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

package/dist/collection/collection-manifest.json

@@ -15,6 +15,8 @@
     "./components/date-picker/date-picker.js",
     "./components/date-picker/flatpickr-adapter/flatpickr-adapter.js",
     "./components/dialog/dialog.js",
+    "./components/dock/dock.js",
+    "./components/dock/dock-button/dock-button.js",
     "./components/file/file.js",
     "./components/flex-container/flex-container.js",
     "./components/form/form.js",

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

@@ -798,6 +798,13 @@ button:active {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
+button:focus {
+  outline: none;
+}
+button:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
 button.mdc-button {
   min-width: 2.25rem;
   padding: 0 0.75rem;
@@ -842,13 +849,16 @@ button limel-icon {
   vertical-align: top;
 }
 button svg {
-  fill: currentColor;
   height: 1.875rem;
   opacity: 0;
   pointer-events: none;
   position: absolute;
   width: 1.875rem;
 }
+button svg line {
+  stroke: rgb(var(--color-white));
+  stroke-width: 2;
+}
 button limel-icon,
 button .label,
 button limel-spinner,
@@ -864,14 +874,20 @@ button.loading limel-spinner {
   display: block;
 }
 button.just-loaded limel-icon,
-button.just-loaded .label {
+button.just-loaded .label, button.just-failed limel-icon,
+button.just-failed .label {
   opacity: 0;
 }
-button.just-loaded svg {
+button.just-loaded svg, button.just-failed svg {
   opacity: 1;
 }
-button.just-loaded limel-spinner {
+button.just-loaded limel-spinner, button.just-failed limel-spinner {
   display: block;
+  animation: fade-out-spinner 0.3s ease;
+}
+button.just-failed {
+  background-color: var(--lime-error-text-color) !important;
+  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 }
 
 .mdc-button--outlined:not(:disabled) {
@@ -879,6 +895,30 @@ button.just-loaded limel-spinner {
   /* @alternate */
   border-color: var(--mdc-theme-primary, #26a69a);
 }
+@keyframes fade-out-spinner {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.5);
+  }
+}
+@keyframes shake {
+  10%, 90% {
+    transform: translate3d(-0.0625rem, 0, 0);
+  }
+  20%, 80% {
+    transform: translate3d(0.125rem, 0, 0);
+  }
+  30%, 50%, 70% {
+    transform: translate3d(-0.1875rem, 0, 0);
+  }
+  40%, 60% {
+    transform: translate3d(0.1875rem, 0, 0);
+  }
+}
 @keyframes reduced-presence {
   0% {
     opacity: 1;

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

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop, Watch } from '@stencil/core';
+import { Component, h, Prop, State, Watch } from '@stencil/core';
 /**
  * @exampleComponent limel-example-button-basic
  * @exampleComponent limel-example-button-disabled
@@ -7,7 +7,8 @@ import { Component, Element, h, Prop, Watch } from '@stencil/core';
  * @exampleComponent limel-example-button-outlined
  * @exampleComponent limel-example-button-primary
  * @exampleComponent limel-example-button-composite
- * @exampleComponent limel-example-button-click
+ * @exampleComponent limel-example-button-click-success
+ * @exampleComponent limel-example-button-click-fail
  * @exampleComponent limel-example-button-reduce-presence
  * @exampleComponent limel-example-button-colors
  */
@@ -32,37 +33,52 @@ export class Button {
      * `disabled` property should be set to `true` as well.
      */
     this.loading = false;
+    /**
+     * Set to `true` to indicate failure instead of success when the button is
+     * no longer in the `loading` state.
+     */
+    this.loadingFailed = false;
+    this.justLoaded = false;
   }
   render() {
-    return (h("button", { class: `
-                    mdc-button
-                    ${this.primary ? 'mdc-button--unelevated' : ''}
-                    ${this.loading ? 'loading' : ''}
-                    ${this.outlined ? 'mdc-button--outlined' : ''}
-                `, disabled: this.disabled },
-      h("div", { class: "mdc-button__ripple" }),
+    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,
+        'mdc-button--outlined': this.outlined,
+      }, disabled: this.disabled || this.loading },
       this.renderIcon(),
       h("span", { class: "label mdc-button__label" }, this.label),
       h("limel-spinner", { limeBranded: false }),
-      h("svg", { viewBox: "0 0 30 30" },
-        h("path", { d: "M20.659 10l-6.885 6.884-3.89-3.89-1.342 1.341 5.053 5.052.182.176L22 11.341z" }))));
+      h("svg", { viewBox: "0 0 30 30" }, this.renderLoadingIcons())));
   }
   loadingWatcher(newValue, oldValue) {
-    const JUST_LOADED = 'just-loaded';
-    const button = this.limelButton.shadowRoot.querySelector('button');
     if (oldValue && !newValue) {
-      button.classList.remove('loading');
-      button.classList.add(JUST_LOADED);
+      this.justLoaded = true;
       const TIMEOUT = 2000;
-      this.justLoadedTimeout = setTimeout(() => {
-        button.classList.remove(JUST_LOADED);
+      this.justLoadedTimeout = window.setTimeout(() => {
+        this.justLoaded = false;
       }, TIMEOUT);
     }
     else if (newValue) {
-      button.classList.remove(JUST_LOADED);
-      clearTimeout(this.justLoadedTimeout);
+      this.justLoaded = false;
+      window.clearTimeout(this.justLoadedTimeout);
     }
   }
+  renderLoadingIcons() {
+    if (this.loadingFailed) {
+      return [
+        h("line", { x1: "9", y1: "9", x2: "21", y2: "21" }),
+        h("line", { x1: "21", y1: "9", x2: "9", y2: "21" }),
+      ];
+    }
+    return [
+      h("line", { x1: "8", y1: "14", x2: "15", y2: "20" }),
+      h("line", { x1: "23", y1: "9", x2: "14", y2: "20" }),
+    ];
+  }
   renderIcon() {
     if (!this.icon) {
       return;
@@ -188,9 +204,29 @@ export class Button {
       "attribute": "loading",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "loadingFailed": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to `true` to indicate failure instead of success when the button is\nno longer in the `loading` state."
+      },
+      "attribute": "loading-failed",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
-  static get elementRef() { return "limelButton"; }
+  static get states() { return {
+    "justLoaded": {}
+  }; }
   static get watchers() { return [{
       "propName": "loading",
       "methodName": "loadingWatcher"

package/dist/collection/components/chip-set/chip-set.css

@@ -2875,13 +2875,17 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
 .clear-all-button:hover {
   background-color: #757580;
 }
-.clear-all-button:focus, .has-chips:not(.mdc-text-field--disabled):hover .clear-all-button, .has-chips:not(.mdc-text-field--disabled).mdc-text-field--focused .clear-all-button {
-  opacity: 1;
+.clear-all-button:focus {
   outline: none;
 }
 .clear-all-button:focus-visible {
+  outline: none;
   box-shadow: var(--shadow-depth-8-focused);
 }
+.clear-all-button:focus, .has-chips:not(.mdc-text-field--disabled):hover .clear-all-button, .has-chips:not(.mdc-text-field--disabled).mdc-text-field--focused .clear-all-button {
+  opacity: 1;
+  outline: none;
+}
 :not(.has-chips) .clear-all-button, .has-chips.mdc-text-field--disabled .clear-all-button {
   display: none;
 }

package/dist/collection/components/chip-set/chip-set.js

@@ -242,19 +242,27 @@ export class ChipSet {
             'lime-notched-outline--notched': !!(this.value.length || this.editMode),
           }, "dropzone-tip": this.dropZoneTip() },
           h("div", { class: "mdc-notched-outline__leading" }),
-          h("div", { class: "mdc-notched-outline__notch" },
-            h("label", { class: {
-                'mdc-floating-label': true,
-                'mdc-text-field--disabled': this.readonly || this.disabled,
-                'mdc-floating-label--required': this.required,
-                'lime-floating-label--float-above': !!(this.value.length || this.editMode),
-              }, htmlFor: "input-element" }, this.label)),
+          this.renderLabel(),
           h("div", { class: "mdc-notched-outline__trailing" })),
         this.renderLeadingIcon(),
         this.renderClearAllChipsButton()),
       this.renderHelperLine(),
     ];
   }
+  renderLabel() {
+    const labelClassList = {
+      'mdc-floating-label': true,
+      'mdc-text-field--no-label': !this.label,
+      'mdc-text-field--disabled': this.readonly || this.disabled,
+      'mdc-floating-label--required': this.required,
+      'lime-floating-label--float-above': !!(this.value.length || this.editMode),
+    };
+    if (!this.label) {
+      return;
+    }
+    return (h("div", { class: "mdc-notched-outline__notch" },
+      h("label", { class: labelClassList, htmlFor: "input-element" }, this.label)));
+  }
   isFull() {
     return !!this.maxItems && this.value.length >= this.maxItems;
   }
@@ -351,10 +359,10 @@ export class ChipSet {
   }
   renderDefaultChip(chip) {
     return (h("div", { class: `mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`, role: "row", id: `${chip.id}` },
-      chip.icon ? this.renderIcon(chip) : null,
-      chip.text ? this.renderLabel(chip) : null));
+      chip.icon ? this.renderChipIcon(chip) : null,
+      chip.text ? this.renderChipLabel(chip) : null));
   }
-  renderLabel(chip) {
+  renderChipLabel(chip) {
     const attributes = {};
     if (chip.href) {
       attributes.href = getHref(chip.href);
@@ -379,8 +387,8 @@ export class ChipSet {
           'mdc-chip--selected': this.inputChipIndexSelected === index,
           disabled: this.disabled,
         }, role: "row", id: `${chip.id}`, onClick: this.catchInputChipClicks },
-        chip.icon ? this.renderIcon(chip) : null,
-        this.renderLabel(chip),
+        chip.icon ? this.renderChipIcon(chip) : null,
+        this.renderChipLabel(chip),
         this.renderChipRemoveButton(chip)),
       this.renderDelimiter(),
     ];
@@ -388,7 +396,7 @@ export class ChipSet {
   catchInputChipClicks(event) {
     event.stopPropagation();
   }
-  renderIcon(chip) {
+  renderChipIcon(chip) {
     const style = {};
     if (chip.iconFillColor) {
       style['--icon-color'] = chip.iconFillColor;

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;
 }

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

@@ -1,14 +1,20 @@
-import { Component, h, Prop, Element, Event, State, } from '@stencil/core';
+import { Component, h, Prop, Element, Event, State, Watch, } from '@stencil/core';
 import CodeMirror from 'codemirror';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/lint/lint';
+import 'codemirror/addon/lint/json-lint';
+import 'codemirror/addon/fold/foldgutter';
+import 'codemirror/addon/fold/brace-fold';
+import jslint from 'jsonlint-mod';
 /**
  * Currently this component support syntax highlighting for `javascript`,
  `json` and `typescript` formats.
  *
  * @exampleComponent limel-example-code-editor
  * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
+ * @exampleComponent limel-example-code-editor-fold-lint
  */
 export class CodeEditor {
   constructor() {
@@ -24,6 +30,14 @@ export class CodeEditor {
      * Displays line numbers in the editor
      */
     this.lineNumbers = false;
+    /**
+     * Allows the user to fold code
+     */
+    this.fold = false;
+    /**
+     * Enables linting of JSON content
+     */
+    this.lint = false;
     /**
      * Select color scheme for the editor
      */
@@ -65,16 +79,37 @@ export class CodeEditor {
     }
     this.editor = this.createEditor();
   }
+  watchValue(newValue) {
+    if (!this.editor) {
+      return;
+    }
+    const currentValue = this.editor.getValue();
+    if (newValue === currentValue) {
+      // Circuit breaker for when the change comes from the editor itself
+      // The caret position will be reset without this
+      return;
+    }
+    this.editor.getDoc().setValue(newValue || '');
+  }
   createEditor() {
     const options = this.getOptions();
     const editor = CodeMirror(this.host.shadowRoot.querySelector('.editor'), options);
     editor.on('change', this.handleChange);
+    // Replace tab with spaces and use the actual indent setting for
+    // the space count
+    editor.setOption('extraKeys', {
+      Tab: (codeMirror) => {
+        const spaces = Array(codeMirror.getOption('indentUnit') + 1).join(' ');
+        codeMirror.replaceSelection(spaces);
+      },
+    });
     return editor;
   }
   getOptions() {
     let mode = this.language;
     const TAB_SIZE = 4;
     let theme = 'lime light';
+    const gutters = [];
     if (this.isDarkMode()) {
       theme = 'lime dark';
     }
@@ -83,6 +118,13 @@ export class CodeEditor {
         name: 'application/json',
         json: true,
       };
+      if (this.lint) {
+        gutters.push('CodeMirror-lint-markers');
+        if (!('jsonlint' in window)) {
+          // eslint-disable-next-line @typescript-eslint/dot-notation
+          window['jsonlint'] = jslint;
+        }
+      }
     }
     else if (this.language === 'typescript') {
       mode = {
@@ -90,9 +132,12 @@ export class CodeEditor {
         typescript: true,
       };
     }
+    if (this.fold) {
+      gutters.push('CodeMirror-foldgutter');
+    }
     return {
       mode: mode,
-      value: this.value,
+      value: this.value || '',
       theme: theme,
       readOnly: this.readonly,
       tabSize: TAB_SIZE,
@@ -100,6 +145,9 @@ export class CodeEditor {
       lineNumbers: this.lineNumbers,
       styleActiveLine: true,
       matchBrackets: true,
+      lint: this.lint,
+      foldGutter: this.fold,
+      gutters: gutters,
     };
   }
   isDarkMode() {
@@ -208,6 +256,42 @@ export class CodeEditor {
       "reflect": false,
       "defaultValue": "false"
     },
+    "fold": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Allows the user to fold code"
+      },
+      "attribute": "fold",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "lint": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enables linting of JSON content"
+      },
+      "attribute": "lint",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "colorScheme": {
       "type": "string",
       "mutable": false,
@@ -252,4 +336,8 @@ export class CodeEditor {
       }
     }]; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "watchValue"
+    }]; }
 }

package/dist/collection/components/collapsible-section/collapsible-section.css

@@ -63,7 +63,7 @@
 /**
  * @prop --closed-header-background-color: background color for header when closed
  * @prop --open-header-background-color: background color for header when open
- * @prop --header-stroke-color: color of the animated icons that visulize collapsed or normal states of the headers, as well as the divider line on headers
+ * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers
  * @prop --body-background-color: background color for body
  * @prop --body-padding: space around content of the body
  */
@@ -92,6 +92,13 @@
   background-color: var(--closed-header-background-color, rgb(var(--contrast-200)));
   border-radius: var(--border-radius-of-header);
 }
+.section__header:focus {
+  outline: none;
+}
+.section__header:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
 section.open .section__header {
   background-color: var(--open-header-background-color, rgb(var(--contrast-100)));
   border-radius: var(--border-radius-of-header) var(--border-radius-of-header) 0 0;
@@ -102,12 +109,6 @@ section.open .section__header:hover {
 .section__header:hover {
   background-color: var(--open-header-background-color, rgb(var(--contrast-300)));
 }
-.section__header:focus {
-  outline: none;
-}
-.section__header:focus-visible {
-  box-shadow: var(--shadow-depth-8-focused);
-}
 
 .section__header__title {
   -moz-osx-font-smoothing: grayscale;