@limetech/lime-elements 36.3.1-next.1 → 36.3.1

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

@@ -893,106 +893,21 @@
   color: var(--lime-error-text-color);
 }
 
-/*
- * This file is imported into every component!
- *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
- */
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-:host {
-  --mdc-theme-primary: var(
-      --lime-primary-color,
-      rgb(var(--color-teal-default))
-  );
-  --mdc-theme-secondary: var(
-      --lime-secondary-color,
-      rgb(var(--contrast-1100))
-  );
-  --mdc-theme-on-primary: var(
-      --lime-on-primary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-secondary: var(
-      --lime-on-secondary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-text-disabled-on-background: var(
-      --lime-text-disabled-on-background-color,
-      rgba(var(--contrast-1700), 0.38)
-  );
-  --mdc-theme-text-primary-on-background: var(
-      --lime-text-primary-on-background-color,
-      rgba(var(--contrast-1700), 0.87)
-  );
-  --mdc-theme-text-secondary-on-background: var(
-      --lime-text-secondary-on-background-color,
-      rgba(var(--contrast-1700), 0.54)
-  );
-  --mdc-theme-error: var(
-      --lime-error-background-color,
-      rgb(var(--color-red-dark))
-  );
-  --lime-error-text-color: rgb(var(--color-red-darker));
-  --mdc-theme-surface: var(
-      --lime-surface-background-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-surface: var(
-      --lime-on-surface-color,
-      rgb(var(--contrast-1500))
-  );
-}
-
-.limel-checkbox-helper-line {
-  padding-right: 1rem;
-  padding-left: 1rem;
-  flex-basis: 100%;
-  width: 100%;
-}
-
-.limel-checkbox-helper-text {
-  font-family: Roboto, sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-size: 0.6875rem;
-  font-weight: 400;
-  letter-spacing: 0.0333333333em;
-  text-decoration: inherit;
-  text-transform: inherit;
-  display: block;
-  margin-top: 0;
-  line-height: normal;
-  margin: 0;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+limel-helper-line {
   opacity: 0;
-  color: rgba(var(--contrast-1200), 1);
-}
-
-:host(:hover) .limel-checkbox-helper-text, :host(:focus) .limel-checkbox-helper-text, :host(:focus-within) .limel-checkbox-helper-text {
-  opacity: 1;
 }
 
 @media (pointer: coarse) {
-  .limel-checkbox-helper-text {
+  limel-helper-line {
     opacity: 1;
   }
 }
+:host(:focus) limel-helper-line,
+:host(:focus-visible) limel-helper-line,
+:host(:focus-within) limel-helper-line {
+  opacity: 1;
+}
+
 .lime-checkbox--readonly.mdc-checkbox--disabled {
   opacity: 1;
   --mdc-ripple-press-opacity: 1;
@@ -5362,105 +5277,21 @@ a.mdc-list-item {
   color: var(--lime-error-text-color);
 }
 
-/*
- * This file is imported into every component!
- *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
- */
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-:host {
-  --mdc-theme-primary: var(
-      --lime-primary-color,
-      rgb(var(--color-teal-default))
-  );
-  --mdc-theme-secondary: var(
-      --lime-secondary-color,
-      rgb(var(--contrast-1100))
-  );
-  --mdc-theme-on-primary: var(
-      --lime-on-primary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-secondary: var(
-      --lime-on-secondary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-text-disabled-on-background: var(
-      --lime-text-disabled-on-background-color,
-      rgba(var(--contrast-1700), 0.38)
-  );
-  --mdc-theme-text-primary-on-background: var(
-      --lime-text-primary-on-background-color,
-      rgba(var(--contrast-1700), 0.87)
-  );
-  --mdc-theme-text-secondary-on-background: var(
-      --lime-text-secondary-on-background-color,
-      rgba(var(--contrast-1700), 0.54)
-  );
-  --mdc-theme-error: var(
-      --lime-error-background-color,
-      rgb(var(--color-red-dark))
-  );
-  --lime-error-text-color: rgb(var(--color-red-darker));
-  --mdc-theme-surface: var(
-      --lime-surface-background-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-surface: var(
-      --lime-on-surface-color,
-      rgb(var(--contrast-1500))
-  );
-}
-
-.limel-checkbox-helper-line {
-  padding-right: 1rem;
-  padding-left: 1rem;
-  flex-basis: 100%;
-  width: 100%;
-}
-
-.limel-checkbox-helper-text {
-  font-family: Roboto, sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-size: 0.6875rem;
-  font-weight: 400;
-  letter-spacing: 0.0333333333em;
-  text-decoration: inherit;
-  text-transform: inherit;
-  display: block;
-  margin-top: 0;
-  line-height: normal;
-  margin: 0;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+limel-helper-line {
   opacity: 0;
-  color: rgba(var(--contrast-1200), 1);
-}
-:host(:hover) .limel-checkbox-helper-text, :host(:focus) .limel-checkbox-helper-text, :host(:focus-within) .limel-checkbox-helper-text {
-  opacity: 1;
 }
 
 @media (pointer: coarse) {
-  .limel-checkbox-helper-text {
+  limel-helper-line {
     opacity: 1;
   }
 }
+:host(:focus) limel-helper-line,
+:host(:focus-visible) limel-helper-line,
+:host(:focus-within) limel-helper-line {
+  opacity: 1;
+}
+
 .lime-checkbox--readonly.mdc-checkbox--disabled {
   opacity: 1;
   --mdc-ripple-press-opacity: 1;

package/dist/collection/components/picker/picker.js

@@ -120,7 +120,6 @@ export class Picker {
   /**
    * Renders the dropdown with the items to pick from, or a spinner if the picker
    * is waiting for items to be received
-   *
    * @returns {HTMLElement} picker dropdown
    */
   renderDropdown() {
@@ -179,7 +178,6 @@ export class Picker {
   /**
    * Returns true if the picker is "full"
    * The picker is considered to be full if it has a value and only one is allowed
-   *
    * @returns {boolean} true if the picker is full
    */
   isFull() {
@@ -232,7 +230,6 @@ export class Picker {
   }
   /**
    * Check if a descendant still has focus. If not, reset text value and search result.
-   *
    * @returns {void}
    */
   handleStopEditAndBlur() {
@@ -248,7 +245,6 @@ export class Picker {
   }
   /**
    * Input handler for the input field
-   *
    * @param {InputEvent} event event
    * @returns {void}
    */
@@ -264,7 +260,6 @@ export class Picker {
   }
   /**
    * Change handler for the list
-   *
    * @param {LimelListCustomEvent<ListItem>} event event
    * @returns {void}
    */
@@ -285,7 +280,6 @@ export class Picker {
   }
   /**
    * Change handler for the list
-   *
    * @param {LimelChipSetCustomEvent} event event
    * @returns {void}
    */
@@ -300,7 +294,6 @@ export class Picker {
   /**
    * Focus handler for the chip set
    * Prevent focus if the picker has a value and does not support multiple values
-   *
    * @returns {void}
    */
   async handleInputFieldFocus() {
@@ -329,7 +322,6 @@ export class Picker {
   /**
    * Key handler for the input field
    * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard
-   *
    * @param {KeyboardEvent} event event
    * @returns {void}
    */
@@ -360,7 +352,6 @@ export class Picker {
   }
   /**
    * Key handler for the dropdown
-   *
    * @param {KeyboardEvent} event event
    * @returns {void}
    */

package/dist/collection/components/popover/popover.js

@@ -49,8 +49,6 @@ import { ESCAPE } from '../../util/keycodes';
  * Do not make a popover too big. They should never take over the entire screen.
  * If your content is that big, you should probably be using a Modal instead.
  * :::
- *
- *
  * @slot - Content to put inside the surface
  * @exampleComponent limel-example-popover
  */

package/dist/collection/components/portal/contains.js

@@ -3,7 +3,6 @@
  *
  * If the child element is a descendant of a limel-portal, this function will
  * go back through the portal and check the original tree recursively
- *
  * @param {HTMLElement} element the parent element
  * @param {HTMLElement} child the child element to check
  * @returns {boolean} `true` if child is a descendant of element, taking

package/dist/collection/components/portal/portal.js

@@ -8,20 +8,19 @@ import { createPopper, } from '@popperjs/core';
  * There are some caveats when using this component
  *
  * Events might not bubble up as expected since the content is moved out to
- *   another DOM node.
+ * another DOM node.
  * Any styling that is applied to content from the parent will be lost, if the
- *   content is just another web compoent it will work without any issues.
- *   Alternatively, use the
- *   `style=""` html attribute.
+ * content is just another web compoent it will work without any issues.
+ * Alternatively, use the
+ * `style=""` html attribute.
  * Any component that is placed inside the container must have a style of
- *   `max-height: inherit`. This ensures that its placement is calculated
- *   correctly in relation to the trigger, and that it never covers its own
- *   trigger.
+ * `max-height: inherit`. This ensures that its placement is calculated
+ * correctly in relation to the trigger, and that it never covers its own
+ * trigger.
  * When the node is moved in the DOM, `disconnectedCallback` and
- *   `connectedCallback` will be invoked, so if `disconnectedCallback` is used
- *   to do any tear-down, the appropriate setup will have to be done again on
- *   `connectedCallback`.
- *
+ * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
+ * to do any tear-down, the appropriate setup will have to be done again on
+ * `connectedCallback`.
  * @slot - Content to put inside the portal
  * @private
  * @exampleComponent limel-example-portal

package/dist/collection/components/select/select.css

@@ -1695,10 +1695,8 @@
 .limel-select.limel-select--required .mdc-floating-label::after {
   content: "*";
 }
-.limel-select.limel-select--invalid .mdc-floating-label,
-.limel-select.limel-select--invalid .limel-select__selected-option,
-.limel-select.limel-select--invalid .invalid-icon,
-.limel-select.limel-select--invalid + .mdc-select-helper-line .mdc-select-helper-text {
+.limel-select.limel-select--invalid .limel-select__selected-option__text,
+.limel-select.limel-select--invalid .invalid-icon {
   color: var(--lime-error-text-color);
 }
 .limel-select.limel-select--invalid .mdc-floating-label:not(.mdc-floating-label--float-above) {
@@ -1752,45 +1750,17 @@ select.limel-select__native-control {
   display: none;
 }
 
-:host(:focus) .mdc-select-helper-text,
-:host(:focus-visible) .mdc-select-helper-text,
-:host(:focus-within) .mdc-select-helper-text {
-  opacity: 1;
+limel-helper-line {
+  opacity: 0;
 }
 
-.limel-select--focused + .mdc-select-helper-line .mdc-select-helper-text {
+.limel-select--focused + limel-helper-line {
   opacity: 1;
 }
 
-.mdc-select-helper-line {
-  padding-right: 1rem;
-  padding-left: 1rem;
-  flex-basis: 100%;
-  width: 100%;
-}
-
-.mdc-select-helper-text {
-  margin-left: 0;
-  margin-right: 0;
-  font-family: Roboto, sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-size: 0.6875rem;
-  font-weight: 400;
-  letter-spacing: 0.0333333333em;
-  text-decoration: inherit;
-  text-transform: inherit;
-  display: block;
-  margin-top: 0;
-  line-height: normal;
-  margin: 0;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  opacity: 0;
-}
-.mdc-select-helper-text:before {
-  height: 0.75rem;
-  display: inline-block;
-  width: 0;
-  content: "";
-  vertical-align: 0;
+:host(:focus) limel-helper-line,
+:host(:focus-visible) limel-helper-line,
+:host(:focus-within) limel-helper-line,
+.limel-select--invalid limel-helper-line {
+  opacity: 1;
 }

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

@@ -26,7 +26,7 @@ export const SelectTemplate = (props) => {
     'limel-select--empty': !hasValue,
     'limel-select--with-helper-text': typeof props.helperText === 'string',
   };
-  return (h("div", { class: classList }, h(SelectValue, Object.assign({}, props, { hasValue: hasValue, isValid: isValid, hasEmptyText: hasEmptyText })), h(HelperText, { text: props.helperText }), h(SelectDropdown, Object.assign({}, props))));
+  return (h("div", { class: classList }, h(SelectValue, Object.assign({}, props, { hasValue: hasValue, isValid: isValid, hasEmptyText: hasEmptyText })), h(HelperText, { text: props.helperText, isValid: !props.invalid }), h(SelectDropdown, Object.assign({}, props))));
 };
 const SelectValue = (props) => {
   const anchorClassList = {
@@ -54,7 +54,7 @@ const HelperText = (props) => {
   if (typeof props.text !== 'string') {
     return;
   }
-  return (h("div", { class: "mdc-select-helper-line" }, h("p", { class: "mdc-select-helper-text mdc-select-helper-text--persistent", "aria-hidden": "true" }, props.text.trim())));
+  return (h("limel-helper-line", { helperText: props.text.trim(), invalid: !props.isValid }));
 };
 const SelectDropdown = (props) => {
   if (props.native) {

package/dist/collection/components/shortcut/shortcut.js

@@ -7,7 +7,6 @@ import { h } from '@stencil/core';
  * By default, this navigation will happen within the same browser tab.
  * However, it is possible to override that behavior, by specifying a `target`
  * for the `link` property
- *
  * @exampleComponent limel-example-shortcut
  * @exampleComponent limel-example-shortcut-notification
  * @exampleComponent limel-example-shortcut-styling

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

@@ -913,40 +913,13 @@
   background-color: var(--mdc-theme-primary);
 }
 
-:host(:focus) .mdc-slider-helper-text,
-:host(:focus-visible) .mdc-slider-helper-text,
-:host(:focus-within) .mdc-slider-helper-text {
-  opacity: 1;
-}
-
-.mdc-slider-helper-line {
-  padding-right: 1rem;
-  padding-left: 1rem;
-  flex-basis: 100%;
-  width: 100%;
+limel-helper-line {
+  opacity: 0;
   order: 3;
 }
 
-.mdc-slider-helper-text {
-  font-family: Roboto, sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-size: 0.6875rem;
-  font-weight: 400;
-  letter-spacing: 0.0333333333em;
-  text-decoration: inherit;
-  text-transform: inherit;
-  display: block;
-  margin-top: 0;
-  line-height: normal;
-  margin: 0;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  opacity: 0;
-}
-.mdc-slider-helper-text:before {
-  height: 0.75rem;
-  display: inline-block;
-  width: 0;
-  content: "";
-  vertical-align: 0;
+:host(:focus) limel-helper-line,
+:host(:focus-visible) limel-helper-line,
+:host(:focus-within) limel-helper-line {
+  opacity: 1;
 }

package/dist/collection/components/slider/slider.js

@@ -110,7 +110,7 @@ export class Slider {
     if (!this.helperText) {
       return;
     }
-    return (h("div", { class: "mdc-slider-helper-line" }, h("p", { class: "mdc-slider-helper-text" }, this.helperText)));
+    return h("limel-helper-line", { helperText: this.helperText });
   }
   watchDisabled() {
     this.updateDisabledState();

package/dist/collection/components/snackbar/snackbar.js

@@ -2,12 +2,34 @@ import { MDCSnackbar } from '@material/snackbar';
 import { h, } from '@stencil/core';
 import translate from '../../global/translations';
 /**
+ * A Snackbar –also known as "Toast"– is used to inform the end user
+ * about an action or a process in the system.
+ * The information could vary from announcing that a process has just started,
+ * is taking place now, has ended, or has been interrupted or canceled.
+ *
+ * The information that you provide using a snackbar should be:
+ * - temporary
+ * - contextual
+ * - short
+ * - and most importantly, ignorable.
+ *
+ * It means if the user misses the information, it shouldn't be a big deal.
+ *
+ * :::note
+ * If the information you want to display has a higher importance or priority,
+ * and you need to make sure that the user takes an action to dismiss it,
+ * consider using the [Banner](/#/component/limel-banner/) component instead.
+ * For more complex interactions and for delivering more detailed information,
+ * [Dialog](/#/component/limel-dialog/) is a better choice.
+ * :::
  * @exampleComponent limel-example-snackbar
+ * @exampleComponent limel-example-snackbar-with-action
+ * @exampleComponent limel-example-snackbar-with-changing-messages
  */
 export class Snackbar {
   constructor() {
     this.message = undefined;
-    this.timeout = undefined;
+    this.timeout = 5000;
     this.actionText = undefined;
     this.dismissible = undefined;
     this.multiline = undefined;
@@ -115,13 +137,14 @@ export class Snackbar {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The amount of time in milliseconds to show the snackbar."
         },
         "attribute": "timeout",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "5000"
       },
       "actionText": {
         "type": "string",

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

@@ -11,7 +11,6 @@ import { Host, h } from '@stencil/core';
  * The button should only be used for performing commands!
  * - Never use this component instead of a Select or Menu component!
  * :::
- *
  * @exampleComponent limel-example-split-button-basic
  * @exampleComponent limel-example-split-button-repeat-default-command
  */

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

@@ -14,14 +14,13 @@ const HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX = 40;
  * :::
  * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
  * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.
- *:::tip Other things to consider
+ * :::tip Other things to consider
  * Never divide the content of a tab using a nested tab bar.
  * Never place two tab bars within the same screen.
  * Never use background color for icons in tabs.
  * Avoid having long labels for tabs.
  * A tab will never be removed or get disabled, even if there is no content under it.
  * :::
- *
  * @exampleComponent limel-example-tab-bar
  * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
  * @exampleComponent limel-example-tab-bar-with-equal-tab-width

package/dist/collection/components/tab-bar/tabs.js

@@ -1,7 +1,6 @@
 /**
  * Set a tabs `active` state to true in a list of tabs. The previous tab with
  * `active` set to true will have it set to `false` instead.
- *
  * @param {Tab[]} tabs list of tabs
  * @param {number} index the index of the tab to set to active
  * @returns {Tab[]} a copy of the list of tabs with the changed tabs replaced

package/dist/collection/components/tab-panel/tab-panel.js

@@ -14,7 +14,6 @@ import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
  *
  * The slotted components can also emit the `changeTab` event to update anything
  * inside the actual tab, e.g. to change the icon, color or badge.
- *
  * @slot - Content to put inside the `limel-tab-panel`. Each slotted element
  * must have the `id` attribute equal to the id of the tab it belongs to.
  * @exampleComponent limel-example-tab-panel

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

@@ -7,7 +7,6 @@ export class ColumnDefinitionFactory {
   }
   /**
    * Create Tabulator column definitions from a limel-table column configuration
-   *
    * @param {Column} column config describing the column
    * @returns {Tabulator.ColumnDefinition} Tabulator column
    */
@@ -34,7 +33,6 @@ export class ColumnDefinitionFactory {
 }
 /**
  * Formats the header of the column
- *
  * @param {Column} column the configuration for the column
  * @returns {string | HTMLElement} custom component that renders a column header
  */
@@ -57,7 +55,6 @@ export const formatHeader = (column) => () => {
 };
 /**
  * Create a formatter to be used to format values in a column
- *
  * @param {Column} column config describing the column
  * @param {ElementPool} pool pool to get custom components from
  * @returns {Tabulator.Formatter} Tabulator formatter
@@ -90,7 +87,6 @@ function columnElementExists(column) {
 }
 /**
  * Format the value of a cell in the table
- *
  * @param {Tabulator.CellComponent} cell the cell being rendered in the table
  * @param {Column} column configuration for the current column
  * @returns {string} the formatted value
@@ -108,7 +104,6 @@ export function formatCell(cell, column) {
 }
 /**
  * Create a custom component that renders a cell value
- *
  * @param {Tabulator.CellComponent} cell Tabulator cell
  * @param {Column} column lime-elements column configuration
  * @param {string} value the value of the cell being rendered
@@ -131,7 +126,6 @@ export function createCustomComponent(cell, column, value, pool) {
 }
 /**
  * Set all properties for a custom element, including event listeners
- *
  * @param {HTMLElement} element the custom element
  * @param {object} props object of properties and event listeners
  */
@@ -149,7 +143,6 @@ export function setElementProperties(element, props) {
  *
  * An event listener has to be a function and its property name have to start
  * with "on" followed by the name of the event in camel case, e.g. "onEventName"
- *
  * @param {any} value the value to check
  * @param {string} key name of the property
  * @returns {boolean} true if the property of the object is an event listener
@@ -164,7 +157,6 @@ function isEventListener(value, key) {
  * Get the name of an event from the name of an event listener
  *
  * E.g. "onMyEvent" will return "myEvent"
- *
  * @param {string} eventListener name of the event listener
  * @returns {string} the name of the event
  */
@@ -195,7 +187,6 @@ function createResizeObserver(element, column) {
 }
 /**
  * Create a column sorter from a tabulator sorter
- *
  * @param {Column[]} columns all available columns in the table
  * @returns {Function} function that creates a sorter from a tabulator sorter
  */

package/dist/collection/components/table/element-pool.js

@@ -9,7 +9,6 @@ export class ElementPool {
   }
   /**
    * Get an element from the pool
-   *
    * @param {string} name tag name of the element
    * @returns {HTMLElement} the element
    */
@@ -24,7 +23,6 @@ export class ElementPool {
   }
   /**
    * Release an element from the pool so that it can be reused
-   *
    * @param {HTMLElement} element the element to release from the pool
    */
   release(element) {