@limetech/lime-elements 35.0.0-next.1 → 35.0.0-next.13

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-e63a89d7.js');
 
 /*
- Stencil Client Patch Esm v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.13.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"]}]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-circular-progress.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-linear-progress.cjs",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider.cjs",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-menu-list.cjs",[[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover-surface.cjs",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-input-field.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-color-picker-palette_2.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}],[1,"limel-popover",{"open":[4]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[514]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-list_3.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-tooltip_2.cjs",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
+  return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-circular-progress.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-linear-progress.cjs",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider.cjs",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-menu-list.cjs",[[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover-surface.cjs",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-input-field.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-color-picker-palette_2.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}],[1,"limel-popover",{"open":[4]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[514]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-list_3.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-tooltip_2.cjs",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -47,7 +47,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.10.0",
+    "version": "2.13.0",
     "typescriptVersion": "4.3.5"
   },
   "collections": [],

package/dist/collection/components/badge/badge.css

@@ -64,33 +64,26 @@
  * @prop --badge-background-color: badge background color
  * @prop --badge-text-color: badge text color
  */
-:host {
-  display: block;
-}
-
 :host([hidden]) {
   display: none;
 }
 
-* {
-  box-sizing: border-box;
-}
-
-.badge-container {
+:host {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-family: Roboto, sans-serif;
   /* @alternate */
   font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
-  display: inline-block;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 0.6875rem;
-  min-width: 1.25rem;
   height: 1.25rem;
+  line-height: 1;
+  min-width: 1.25rem;
+  padding: 0 0.3125rem;
   border-radius: 1.25rem;
-  line-height: 1.25rem;
-  text-align: center;
   background-color: var(--badge-background-color, rgb(var(--contrast-500)));
   color: var(--badge-text-color, rgb(var(--contrast-1200)));
-  padding: 0 0.3125rem;
-  margin-left: 0.25rem;
 }

package/dist/collection/components/badge/badge.js

@@ -1,11 +1,11 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 import { abbreviate } from './format';
 /**
  * @exampleComponent limel-example-badge
  */
 export class Badge {
   render() {
-    return h("div", { class: "badge-container" }, abbreviate(this.label));
+    return abbreviate(this.label);
   }
   static get is() { return "limel-badge"; }
   static get encapsulation() { return "shadow"; }

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

@@ -762,7 +762,6 @@
 
 .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 +879,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') {

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

@@ -2391,7 +2391,7 @@
 
 limel-badge {
   margin-right: 0.25rem;
-  margin-left: -0.5rem;
+  margin-left: -0.25rem;
 }
 
 .mdc-chip__text {

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/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)) {

package/dist/collection/components/input-field/input-field.css

@@ -1791,6 +1791,19 @@
   color: var(--lime-error-text-color);
 }
 
+.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
+  color: rgba(var(--contrast-1200), 1);
+}
+.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
+  color: rgba(var(--contrast-1400), 1);
+}
+.mdc-text-field.mdc-text-field--disabled .mdc-floating-label {
+  color: rgba(var(--contrast-1200), 0.5);
+}
+.mdc-text-field.mdc-text-field--disabled .mdc-text-field__input {
+  color: rgba(var(--contrast-1400), 0.5);
+}
+
 .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing, .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link {
   margin-right: 0.5rem;
 }
@@ -1809,6 +1822,7 @@
   line-height: 1.75rem;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
+  color: rgba(var(--contrast-1400), 1);
   font-size: 0.875rem;
   font-weight: 400;
   letter-spacing: 0.009375em;

package/dist/collection/components/list/list.css

@@ -3057,6 +3057,7 @@ a.mdc-list-item {
       --icon-color,
       rgb(var(--contrast-900))
   );
+  margin: 0.25rem;
   padding: 0;
   border-radius: 0.375rem;
 }
@@ -4028,7 +4029,6 @@ a.mdc-list-item {
 
 .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));
@@ -4146,8 +4146,7 @@ a.mdc-list-item {
   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/menu-list/menu-list.css

@@ -3063,6 +3063,7 @@ a.mdc-list-item {
       --icon-color,
       rgb(var(--contrast-900))
   );
+  margin: 0.25rem;
   padding: 0;
   border-radius: 0.375rem;
 }
@@ -4034,7 +4035,6 @@ a.mdc-list-item {
 
 .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));
@@ -4152,8 +4152,7 @@ a.mdc-list-item {
   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/select/select.css

@@ -1338,6 +1338,11 @@
 }
 
 .limel-select__selected-option__text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.mdc-select:not(.mdc-select--disabled) .limel-select__selected-option__text {
   font-family: Roboto, sans-serif;
   line-height: 1.75rem;
   -moz-osx-font-smoothing: grayscale;
@@ -1346,9 +1351,6 @@
   font-weight: 400;
   letter-spacing: 0.009375em;
   color: rgba(var(--contrast-1200), 1);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
 
 .limel-select {
@@ -1372,6 +1374,7 @@
   box-shadow: var(--shadow-depth-8-focused) !important;
 }
 .limel-select .limel-select-trigger .mdc-floating-label {
+  color: rgba(var(--contrast-1200), 1);
   width: calc( 100% - 1rem );
 }
 .limel-select .limel-select-trigger .mdc-floating-label.mdc-floating-label--float-above {

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

@@ -73,7 +73,7 @@ const MenuDropdown = (props) => {
   const items = createMenuItems(props.options, props.value);
   return (h("limel-portal", { containerId: props.id, visible: props.isOpen, inheritParentWidth: true, containerStyle: { 'z-index': props.dropdownZIndex } },
     h("limel-menu-surface", { open: props.isOpen, onDismiss: props.close, style: {
-        '--menu-surface-width': '100%',
+        '--mdc-menu-min-width': '100%',
         'max-height': 'inherit',
         display: 'flex',
       } },

package/dist/collection/components/slider/slider.css

@@ -600,11 +600,16 @@
     transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
   }
 }
+:host([disabled]:not([readonly])) .slider__label {
+  color: rgba(var(--contrast-1200), 0.5);
+}
+
 .slider {
   position: relative;
 }
 
 .slider__label {
+  color: rgba(var(--contrast-1200), 1);
   padding-left: 1.25rem;
   top: 0.5625rem;
 }

package/dist/collection/components/tab-bar/tab-bar.css

@@ -587,19 +587,10 @@
   flex: 1 0 auto;
 }
 
-.mdc-tab__icon {
-  margin-right: 0.5rem;
-}
-
 .mdc-tab-indicator .mdc-tab-indicator__content {
   border: none;
 }
 
-.mdc-tab--active .mdc-ripple-upgraded--background-focused:before {
-  background-color: transparent;
-  transition: background-color 1s ease;
-}
-
 .mdc-tab__ripple {
   box-sizing: border-box;
   border-radius: 0.625rem;
@@ -615,9 +606,8 @@
 .mdc-tab {
   border-radius: 0;
   letter-spacing: normal;
-}
-
-.mdc-tab {
+  padding-right: 1.25rem;
+  padding-left: 1.25rem;
   background-color: transparent;
   flex: 0 0 auto;
 }
@@ -660,4 +650,16 @@
 }
 .mdc-tab--active:after {
   right: -0.75rem;
+}
+.mdc-tab--active .mdc-ripple-upgraded--background-focused:before {
+  background-color: transparent;
+  transition: background-color 1s ease;
+}
+
+.mdc-tab__content {
+  gap: 0.375rem;
+}
+
+.mdc-tab__text-label {
+  padding-left: 0 !important;
 }

package/dist/collection/components/table/columns.js

@@ -134,7 +134,7 @@ export function createCustomComponent(cell, column, value, pool) {
  * @param {HTMLElement} element the custom element
  * @param {object} props object of properties and event listeners
  */
-function setElementProperties(element, props) {
+export function setElementProperties(element, props) {
   const properties = pickBy(props, negate(isEventListener));
   Object.assign(element, properties);
   const listeners = pickBy(props, isEventListener);

package/dist/collection/components/table/selection.js

@@ -0,0 +1,111 @@
+/**
+ * Contains a set of selected data objects with methods for adding and removing
+ * items to the selection by referring to them by their index/position.
+ * Maintains a memory of the last toggled item which can be used to select or
+ * deselect a range of items between the last toggled item and a given item.
+ */
+export class Selection {
+  /**
+   * Creates an instance of the Selection class.
+   * The provided function `getDataByIndex` is used to provide data for the
+   * selected items when selection is toggled by using the item index,
+   * which can be the row position in a table.
+   *
+   * @param {Function} getDataByIndex A function that returns the data at the given index
+   */
+  constructor(getDataByIndex) {
+    this.getDataByIndex = getDataByIndex;
+    this.toggleRange = (fromIndex, toIndex) => {
+      const select = !this.selectedItems.has(this.getDataByIndex(toIndex));
+      const lowerBound = Math.min(fromIndex, toIndex);
+      const upperBound = Math.max(fromIndex, toIndex);
+      const updatedIndexes = [];
+      const updatedItems = [];
+      for (let index = lowerBound; index <= upperBound; index++) {
+        const data = this.getDataByIndex(index);
+        if (!data) {
+          continue;
+        }
+        const isSelected = this.selectedItems.has(data);
+        if (isSelected === select) {
+          continue;
+        }
+        if (select) {
+          this.selectedItems.add(data);
+        }
+        else {
+          this.selectedItems.delete(data);
+        }
+        updatedIndexes.push(index);
+        updatedItems.push(data);
+      }
+      this.lastToggledIndex = toIndex;
+      return {
+        selected: select,
+        items: updatedItems,
+        indexes: updatedIndexes,
+      };
+    };
+    this.clear();
+  }
+  /**
+   * @returns {number} The size of the selection
+   */
+  get size() {
+    return this.selectedItems.size;
+  }
+  /**
+   * @returns {any[]} The selected items
+   */
+  get items() {
+    return Array.from(this.selectedItems);
+  }
+  /**
+   * @param {any[]} items The selected items
+   */
+  set items(items) {
+    this.selectedItems = new Set(items);
+    this.lastToggledIndex = -1;
+  }
+  /**
+   * Checks whether the given item exist in the selection
+   *
+   * @param {any} data The data to look up
+   * @returns {boolean} `true` if the given data exist in the selection, otherwise `false`
+   */
+  has(data) {
+    return this.selectedItems.has(data);
+  }
+  /**
+   * Toggles the item at the given index in the selection
+   *
+   * @param {number} index The index of the item to toggle
+   * @returns {SelectionChangeSet} The changes made to the selection
+   */
+  toggleSelection(index) {
+    return this.toggleRange(index, index);
+  }
+  /**
+   * Toggles the items from the last toggled index to the given index in the selection.
+   * The toggled items will be toggled as the item at the given index no matter
+   * their current state in the selection.
+   * Initially, when no last toggled index exist, this function behaves like
+   * `toggleSelection`.
+   *
+   * @param {number} index The index of the item to toggle
+   * @returns {SelectionChangeSet} The changes made to the selection
+   */
+  toggleSelectionFromLastIndex(index) {
+    if (this.lastToggledIndex < 0) {
+      return this.toggleSelection(index);
+    }
+    return this.toggleRange(this.lastToggledIndex, index);
+  }
+  /**
+   * Clears the current selection and resets last toggled index
+   */
+  clear() {
+    this.selectedItems = new Set();
+    this.lastToggledIndex = -1;
+  }
+}