npm - @limetech/lime-elements - Versions diffs - 36.3.0-next.2 → 36.3.0-next.20 - Mend

@limetech/lime-elements 36.3.0-next.2 → 36.3.0-next.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

package/dist/cjs/limel-collapsible-section.cjs.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@ const index = require('./index-287e25e0.js');
 const dispatchResizeEvent = require('./dispatch-resize-event-4462d78f.js');
 const keycodes = require('./keycodes-3949f425.js');
-const collapsibleSectionCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host{--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}:host([disabled]){pointer-events:none}.section__header{transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;align-items:center;display:flex;justify-content:space-between;padding-left:0.625rem;padding-right:0.625rem;height:3.75rem;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}section.open .section__header:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.section__header:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.section__header__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-headline2-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline2-line-height, 0.875rem);font-weight:300;font-weight:var(--mdc-typography-headline2-font-weight, 300);letter-spacing:-0.0083333333em;letter-spacing:var(--mdc-typography-headline2-letter-spacing, -0.0083333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline2-text-transform, inherit);justify-self:flex-start;padding-right:0.75rem;user-select:none;padding-right:0.5rem;height:auto;max-height:3rem;line-height:1.2rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.section__header__divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:0.0625rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));margin-right:0.5rem;opacity:0}section.open .section__header__divider-line{opacity:0.16}.section__header__actions{justify-self:flex-end;flex-shrink:0}@keyframes fade-in-section__body{0%{opacity:0}100%{opacity:1}}.section__body{animation:fade-in-section__body 0.3s ease-in forwards;background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);margin-bottom:1.5rem;border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header);display:none;opacity:0}section.open .section__body{display:block}.section__body:before,.section__body:after{content:\" \";display:table}.section__body:after{clear:both}.section__header__expand-icon{position:relative;height:1.875rem;margin:0 1rem 0 0.5rem;width:0.75rem;flex-shrink:0}.expand-icon__line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.expand-icon__line:first-of-type,.expand-icon__line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.expand-icon__line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.expand-icon__line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.expand-icon__line:nth-of-type(2),.expand-icon__line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}.section__header:hover .expand-icon__line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.section__header:hover .expand-icon__line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.section__header:hover .expand-icon__line:nth-of-type(2),.section__header:hover .expand-icon__line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.section__header:hover .expand-icon__line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.section__header:hover .expand-icon__line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .section__header .expand-icon__line:first-of-type,section.open .section__header .expand-icon__line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .section__header .expand-icon__line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .section__header .expand-icon__line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .section__header .expand-icon__line:nth-of-type(2),section.open .section__header .expand-icon__line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .section__header .expand-icon__line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .section__header .expand-icon__line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}section.open .section__header:hover .expand-icon__line:first-of-type,section.open .section__header:hover .expand-icon__line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .section__header:hover .expand-icon__line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .section__header:hover .expand-icon__line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}";
+const collapsibleSectionCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host{--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}:host([disabled]){pointer-events:none}.section__header{transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;align-items:center;display:flex;justify-content:space-between;padding-left:0.625rem;padding-right:0.625rem;height:3.75rem;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}section.open .section__header:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.section__header:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.section__header__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-headline2-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline2-line-height, 0.875rem);font-weight:300;font-weight:var(--mdc-typography-headline2-font-weight, 300);letter-spacing:-0.0083333333em;letter-spacing:var(--mdc-typography-headline2-letter-spacing, -0.0083333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline2-text-transform, inherit);color:var(--mdc-theme-on-surface);justify-self:flex-start;padding-right:0.75rem;user-select:none;padding-right:0.5rem;height:auto;max-height:3rem;line-height:1.2rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.section__header__divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:0.0625rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));margin-right:0.5rem;opacity:0}section.open .section__header__divider-line{opacity:0.16}.section__header__actions{justify-self:flex-end;flex-shrink:0}@keyframes fade-in-section__body{0%{opacity:0}100%{opacity:1}}.section__body{animation:fade-in-section__body 0.3s ease-in forwards;background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);margin-bottom:1.5rem;border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header);display:none;opacity:0}section.open .section__body{display:block}.section__body:before,.section__body:after{content:\" \";display:table}.section__body:after{clear:both}.section__header__expand-icon{position:relative;height:1.875rem;margin:0 1rem 0 0.5rem;width:0.75rem;flex-shrink:0}.expand-icon__line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.expand-icon__line:first-of-type,.expand-icon__line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.expand-icon__line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.expand-icon__line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.expand-icon__line:nth-of-type(2),.expand-icon__line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}.section__header:hover .expand-icon__line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.section__header:hover .expand-icon__line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.section__header:hover .expand-icon__line:nth-of-type(2),.section__header:hover .expand-icon__line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.section__header:hover .expand-icon__line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.section__header:hover .expand-icon__line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .section__header .expand-icon__line:first-of-type,section.open .section__header .expand-icon__line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .section__header .expand-icon__line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .section__header .expand-icon__line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .section__header .expand-icon__line:nth-of-type(2),section.open .section__header .expand-icon__line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .section__header .expand-icon__line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .section__header .expand-icon__line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}section.open .section__header:hover .expand-icon__line:first-of-type,section.open .section__header:hover .expand-icon__line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .section__header:hover .expand-icon__line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .section__header:hover .expand-icon__line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}";
 const CollapsibleSection = class {
   constructor(hostRef) {

package/dist/cjs/limel-date-picker.cjs.entry.js CHANGED Viewed

@@ -5,15 +5,50 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-287e25e0.js');
 const randomString = require('./random-string-4c3b7f1c.js');
 const device = require('./device-c5841113.js');
-const dateFormatter = require('./dateFormatter-d7a8d40d.js');
+require('./sv-dffe48b5.js');
+const moment = require('./moment-d1e35cdc.js');
 const component = require('./component-ae3bfacf.js');
 require('./_commonjsHelpers-0c557e26.js');
-require('./moment-d1e35cdc.js');
 require('./component-67144c1c.js');
 require('./component-cf490570.js');
 require('./ponyfill-98ca4766.js');
 require('./component-dd795ff0.js');
+class DateFormatter {
+  constructor(language = 'en') {
+    this.language = language;
+  }
+  formatDate(date, dateFormat) {
+    if (date) {
+      return moment.moment(date).locale(this.getLanguage()).format(dateFormat);
+    }
+    return '';
+  }
+  parseDate(date, dateFormat) {
+    if (date) {
+      return moment.moment(date, dateFormat).toDate();
+    }
+    return null;
+  }
+  getLanguage() {
+    if (this.language === 'no') {
+      return 'nb';
+    }
+    return this.language;
+  }
+  getDateFormat(type) {
+    return ({
+      date: 'L',
+      time: 'LT',
+      week: '[w] W GGGG',
+      month: 'MM/YYYY',
+      quarter: '[Q]Q YYYY',
+      year: 'YYYY',
+      datetime: 'L - LT',
+    }[type] || 'L - LT');
+  }
+}
 const datePickerCss = ":host(limel-date-picker){position:relative}limel-input-field[disabled],limel-input-field[readonly]{pointer-events:none}";
 // tslint:disable:no-duplicate-string
@@ -52,6 +87,7 @@ const DatePicker = class {
         this.hideCalendar();
       }
     };
+    this.formatValue = (value) => this.dateFormatter.formatDate(value, this.internalFormat);
     this.disabled = false;
     this.readonly = false;
     this.invalid = false;
@@ -63,6 +99,7 @@ const DatePicker = class {
     this.type = 'datetime';
     this.format = undefined;
     this.language = 'en';
+    this.formatter = undefined;
     this.formattedValue = undefined;
     this.internalFormat = undefined;
     this.showPortal = false;
@@ -70,7 +107,7 @@ const DatePicker = class {
     this.handleInputElementChange =
       this.handleInputElementChange.bind(this);
     this.showCalendar = this.showCalendar.bind(this);
-    this.dateFormatter = new dateFormatter.DateFormatter(this.language);
+    this.dateFormatter = new DateFormatter(this.language);
     this.clearValue = this.clearValue.bind(this);
     this.hideCalendar = this.hideCalendar.bind(this);
     this.onInputClick = this.onInputClick.bind(this);
@@ -81,7 +118,7 @@ const DatePicker = class {
   componentWillLoad() {
     this.useNative = !this.readonly && (device.isIOSDevice() || device.isAndroidDevice());
     this.updateInternalFormatAndType();
-    this.formattedValue = this.dateFormatter.formatDate(this.value, this.internalFormat);
+    this.formattedValue = this.formatValue(this.value);
   }
   componentWillUpdate() {
     this.updateInternalFormatAndType();
@@ -99,12 +136,12 @@ const DatePicker = class {
     const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
     return [
       index.h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.formattedValue, onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
-      index.h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, index.h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, onChange: this.handleCalendarChange })),
+      index.h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, index.h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, formatter: this.formatValue, onChange: this.handleCalendarChange })),
     ];
   }
   onValueChange(newValue, oldValue) {
     if (newValue !== oldValue && newValue !== this.formattedValue) {
-      this.formattedValue = this.dateFormatter.formatDate(this.value, this.internalFormat);
+      this.formattedValue = this.formatValue(this.value);
     }
   }
   updateInternalFormatAndType() {
@@ -113,6 +150,9 @@ const DatePicker = class {
     if (this.useNative) {
       this.internalFormat = this.nativeFormat;
     }
+    else if (this.formatter) {
+      this.formatValue = this.formatter;
+    }
     else if (this.format) {
       this.internalFormat = this.format;
     }
@@ -172,7 +212,7 @@ const DatePicker = class {
   }
   handleCalendarChange(event) {
     const date = event.detail;
-    this.formattedValue = this.dateFormatter.formatDate(date, this.internalFormat);
+    this.formattedValue = this.formatValue(date);
     event.stopPropagation();
     if (this.pickerIsAutoClosing()) {
       this.hideCalendar();

package/dist/cjs/limel-dock-button.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-287e25e0.js');
 const randomString = require('./random-string-4c3b7f1c.js');
-const dockButtonCss = ".button{all:unset;cursor:pointer;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;color:var(--limel-dock-item-text-color);background-color:var(--dock-background-color);box-sizing:border-box;display:flex;align-items:center;position:relative;width:100%;height:var(--dock-item-height);border-radius:0.375rem;font-size:0.875rem;padding:0 0.5rem;min-width:var(--dock-item-height)}.button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.button:active{background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}.button:focus{outline:none}.button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.button:hover{z-index:1}.button.selected{color:var(--limel-dock-item-text-color--selected);background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)));box-shadow:var(--button-shadow-inset)}.button.selected:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}.button.selected .icon{color:var(--limel-dock-item-text--selected)}limel-popover{display:grid;grid-template-columns:100%}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:0.5rem;padding-right:0.75rem}.icon{flex-shrink:0;width:calc(var(--dock-item-height) - 1rem);height:calc(var(--dock-item-height) - 1rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}";
+const dockButtonCss = ".button{all:unset;isolation:isolate;position:relative;cursor:pointer;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;color:var(--limel-dock-item-text-color);background-color:var(--dock-background-color);box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--dock-item-height);border-radius:0.375rem;font-size:0.875rem;padding:0 0.5rem;min-width:var(--dock-item-height)}.button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.button:active{background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}.button:focus{outline:none}.button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.button:hover{z-index:1}.button.selected{color:var(--limel-dock-item-text-color--selected);background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)));box-shadow:var(--button-shadow-inset)}.button.selected:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}.button.selected .icon{color:var(--limel-dock-item-text--selected)}limel-popover{display:grid;grid-template-columns:100%}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:0.5rem;padding-right:0.75rem}.icon{flex-shrink:0;width:calc(var(--dock-item-height) - 1rem);height:calc(var(--dock-item-height) - 1rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}limel-badge{position:absolute;top:-0.125rem;right:-0.125rem}";
 const DockButton = class {
   constructor(hostRef) {
@@ -13,6 +13,11 @@ const DockButton = class {
     this.itemSelected = index.createEvent(this, "itemSelected", 7);
     this.menuOpen = index.createEvent(this, "menuOpen", 7);
     this.close = index.createEvent(this, "close", 7);
+    this.renderNotification = () => {
+      if (this.item.badge || this.item.badge === '') {
+        return index.h("limel-badge", { label: this.item.badge });
+      }
+    };
     this.openPopover = (event) => {
       event.stopPropagation();
       this.isOpen = true;
@@ -65,7 +70,7 @@ const DockButton = class {
     return (index.h("button", { slot: slot, tabindex: "0", id: this.tooltipId, type: "button", class: {
         button: true,
         selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
-      }, onClick: handleClick }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
+      }, onClick: handleClick, "aria-live": this.item.badge ? 'polite' : 'off' }, this.renderIcon(), this.renderLabel(), this.renderTooltip(), this.renderNotification()));
   }
   renderIcon() {
     if (!this.item.icon) {

package/dist/cjs/limel-dock.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-287e25e0.js');
-const dockCss = ":host(limel-dock){--dock-item-height:2.75rem;--dock-padding:0.25rem;--dock-expand-shrink-button-height:1rem;--limel-dock-item-text-color:var(\n      --dock-item-text-color,\n      rgb(var(--contrast-1100))\n  );--limel-dock-item-text-color--selected:var(\n      --dock-item-text-color--selected,\n      rgb(var(--contrast-1300))\n  );isolation:isolate;position:relative;display:inline-flex;flex-direction:column;background-color:var(--dock-background-color, rgb(var(--contrast-100)));box-shadow:var(--shadow-depth-8)}:host(limel-dock:not(.has-mobile-layout)){height:100%;width:calc(var(--dock-padding) * 2 + var(--dock-item-height))}:host(limel-dock.expanded){width:var(--dock-expanded-max-width, max-content)}.footer-separator{margin-top:auto;justify-self:flex-end}nav{box-sizing:border-box;display:inline-flex;flex-direction:column;gap:0.375rem;flex-grow:1;padding:var(--dock-padding);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}nav::-webkit-scrollbar{display:none}:host(limel-dock.has-mobile-layout) nav{justify-content:space-between;flex-direction:row}.expand-shrink{all:unset;box-sizing:border-box;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;color:var(--mdc-theme-on-surface);background-color:transparent;cursor:pointer;display:flex;justify-content:center;align-items:center;height:var(--dock-expand-shrink-button-height);padding:0 0.5rem;margin:var(--dock-padding);border-radius:0.375rem}.expand-shrink:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.expand-shrink:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.expand-shrink:focus{outline:none}.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.expand-shrink.expanded{justify-content:flex-end}.expand-shrink.expanded limel-icon{transform:rotateY(180deg)}.expand-shrink limel-icon{width:calc(var(--dock-expand-shrink-button-height) - 0.25rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}";
+const dockCss = ":host(limel-dock){--badge-background-color:rgb(var(--color-red-default));--badge-text-color:rgb(var(--color-white));--dock-item-height:2.75rem;--dock-padding:0.25rem;--dock-expand-shrink-button-height:1rem;--limel-dock-item-text-color:var(\n      --dock-item-text-color,\n      rgb(var(--contrast-1100))\n  );--limel-dock-item-text-color--selected:var(\n      --dock-item-text-color--selected,\n      rgb(var(--contrast-1300))\n  );isolation:isolate;position:relative;display:inline-flex;flex-direction:column;background-color:var(--dock-background-color, rgb(var(--contrast-100)));box-shadow:var(--shadow-depth-8)}:host(limel-dock:not(.has-mobile-layout)){height:100%;width:calc(var(--dock-padding) * 2 + var(--dock-item-height))}:host(limel-dock.expanded){width:var(--dock-expanded-max-width, max-content)}.footer-separator{margin-top:auto;justify-self:flex-end}nav{box-sizing:border-box;display:inline-flex;flex-direction:column;gap:0.375rem;flex-grow:1;padding:var(--dock-padding);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}nav::-webkit-scrollbar{display:none}:host(limel-dock.has-mobile-layout) nav{justify-content:space-between;flex-direction:row}.expand-shrink{all:unset;box-sizing:border-box;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;color:var(--mdc-theme-on-surface);background-color:transparent;cursor:pointer;display:flex;justify-content:center;align-items:center;height:var(--dock-expand-shrink-button-height);padding:0 0.5rem;margin:var(--dock-padding);border-radius:0.375rem}.expand-shrink:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.expand-shrink:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.expand-shrink:focus{outline:none}.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.expand-shrink.expanded{justify-content:flex-end}.expand-shrink.expanded limel-icon{transform:rotateY(180deg)}.expand-shrink limel-icon{width:calc(var(--dock-expand-shrink-button-height) - 0.25rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}";
 const DEFAULT_MOBILE_BREAKPOINT = 700;
 const Dock = class {

package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-287e25e0.js');
 const translations = require('./translations-ca7279bc.js');
 const _commonjsHelpers = require('./_commonjsHelpers-0c557e26.js');
-const dateFormatter = require('./dateFormatter-d7a8d40d.js');
+require('./sv-dffe48b5.js');
 const moment = require('./moment-d1e35cdc.js');
 const device = require('./device-c5841113.js');
 const eq = require('./eq-9a943b00.js');
@@ -6475,12 +6475,10 @@ class Picker {
     if (dateFormat) {
       this.dateFormat = dateFormat;
     }
-    this.dateFormatter = new dateFormatter.DateFormatter(language);
     this.getWeek = this.getWeek.bind(this);
     this.handleClose = this.handleClose.bind(this);
     this.handleOnClose = this.handleOnClose.bind(this);
     this.parseDate = this.parseDate.bind(this);
-    this.formatDate = this.formatDate.bind(this);
     this.getFlatpickrLang = this.getFlatpickrLang.bind(this);
   }
   init(element, container, value) {
@@ -6514,9 +6512,6 @@ class Picker {
     }
     this.flatpickr.destroy();
   }
-  formatDate(date) {
-    return this.dateFormatter.formatDate(date, this.dateFormat);
-  }
   handleClose(selectedDates) {
     return new Promise((resolve) => {
       setTimeout(() => {
@@ -6527,10 +6522,16 @@ class Picker {
     });
   }
   getFlatpickrLang() {
-    return this.language === 'nb' ? 'no' : this.language;
+    if (this.language === 'nb') {
+      return 'no';
+    }
+    return this.language;
   }
   getMomentLang() {
-    return this.language === 'no' ? 'nb' : this.language;
+    if (this.language === 'no') {
+      return 'nb';
+    }
+    return this.language;
   }
   getPickerDate(selectedDates) {
     return selectedDates[0] ? new Date(selectedDates[0].toJSON()) : null;
@@ -7579,6 +7580,7 @@ const DatePickerCalendar = class {
     this.isOpen = undefined;
     this.inputElement = undefined;
     this.language = 'en';
+    this.formatter = undefined;
   }
   componentWillLoad() {
     switch (this.type) {
@@ -7605,6 +7607,7 @@ const DatePickerCalendar = class {
         this.picker = new DatetimePicker(this.format, this.language, this.change);
         break;
     }
+    this.picker.formatDate = this.formatter;
   }
   componentDidUpdate() {
     if (this.flatPickrCreated) {

package/dist/cjs/limel-form.cjs.entry.js CHANGED Viewed

@@ -24000,6 +24000,14 @@ var FormLayoutType;
    * Render the form fields using a responsive grid layout
    */
   FormLayoutType["Grid"] = "grid";
+  /**
+   * Render the form fields in full-width rows.
+   * Each row can have a leading `icon`, and a field.
+   * `title` and `description` provided by the schema will be placed
+   * on the row itself, and not on the field.
+   * This layout is good for creating UIs for user settings pages.
+   */
+  FormLayoutType["Row"] = "row";
 })(FormLayoutType || (FormLayoutType = {}));
 const MAX_COLUMNS = 5;
@@ -24059,6 +24067,72 @@ class GridLayout extends react.Component {
   }
 }
+class Row extends react.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+  }
+  render() {
+    const classes = ['row'];
+    if (this.icon) {
+      classes.push('has-icon');
+    }
+    return react.createElement('div', {
+      className: classes.join(' '),
+    }, this.renderMainInformation(), this.renderDescription());
+  }
+  renderIcon() {
+    if (this.icon) {
+      return react.createElement('limel-icon', {
+        name: this.icon,
+      });
+    }
+  }
+  renderMainInformation() {
+    return react.createElement('div', { className: 'main-information' }, this.renderIcon(), this.renderTitle(), this.renderChildren());
+  }
+  renderTitle() {
+    var _a;
+    return react.createElement('h1', { className: 'title' }, (_a = this.schema) === null || _a === void 0 ? void 0 : _a.title);
+  }
+  renderDescription() {
+    var _a;
+    if ((_a = this.schema) === null || _a === void 0 ? void 0 : _a.description) {
+      return react.createElement('p', { className: 'description' }, this.schema.description);
+    }
+  }
+  renderChildren() {
+    const children = this.props.children;
+    return Object.assign(Object.assign({}, children), { props: Object.assign(Object.assign({}, children.props), { schema: Object.assign(Object.assign({}, children.props.schema), { title: null, description: null }) }) });
+  }
+  get schema() {
+    return this.props.children.props.schema;
+  }
+  get icon() {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = this.schema) === null || _a === void 0 ? void 0 : _a.lime) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.icon;
+  }
+}
+class RowLayout extends react.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.elementRef = react.createRef();
+  }
+  render() {
+    const classes = ['limel-form-row--layout'];
+    return react.createElement('div', {
+      className: classes.join(' '),
+      ref: this.elementRef,
+    }, this.props.children.map((child, index) => {
+      return react.createElement(Row, {
+        key: index.toString(),
+      }, child);
+    }));
+  }
+}
 const ObjectFieldTemplate = (props) => {
   const id = props.idSchema.$id;
   if (id === 'root' || !isCollapsible(props.schema)) {
@@ -24098,6 +24172,7 @@ function renderLayout(properties, layout) {
   const layouts = {
     default: renderDefaultLayout,
     grid: renderGridLayout,
+    row: renderRowLayout,
   };
   return layouts[type](properties, layout);
 }
@@ -24111,6 +24186,9 @@ function renderGridLayout(properties, layout) {
     options: layout,
   }, properties.map((element) => element.content));
 }
+function renderRowLayout(properties) {
+  return react.createElement(RowLayout, {}, properties.map((element) => element.content));
+}
 function isCollapsible(schema) {
   var _a;
   return !!((_a = schema.lime) === null || _a === void 0 ? void 0 : _a.collapsible);
@@ -29531,7 +29609,7 @@ function isInteger(data) {
   return Number.isInteger(Number(data));
 }
-const formCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.mdc-typography{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif)}.mdc-typography--headline1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1.375rem;font-size:var(--mdc-typography-headline1-font-size, 1.375rem);line-height:1.375rem;line-height:var(--mdc-typography-headline1-line-height, 1.375rem);font-weight:300;font-weight:var(--mdc-typography-headline1-font-weight, 300);letter-spacing:-0.015625em;letter-spacing:var(--mdc-typography-headline1-letter-spacing, -0.015625em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline1-text-transform, inherit)}.mdc-typography--headline2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-headline2-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline2-line-height, 0.875rem);font-weight:300;font-weight:var(--mdc-typography-headline2-font-weight, 300);letter-spacing:-0.0083333333em;letter-spacing:var(--mdc-typography-headline2-letter-spacing, -0.0083333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline2-text-transform, inherit)}.mdc-typography--headline3{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline3-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-headline3-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline3-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-headline3-font-weight, 400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline3-letter-spacing, normal);text-decoration:inherit;text-decoration:var(--mdc-typography-headline3-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline3-text-transform, inherit)}.mdc-typography--headline4{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline4-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-headline4-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline4-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-headline4-font-weight, 400);letter-spacing:0.0073529412em;letter-spacing:var(--mdc-typography-headline4-letter-spacing, 0.0073529412em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline4-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline4-text-transform, inherit)}.mdc-typography--headline5{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline5-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-headline5-font-size, 0.875rem);line-height:0.875rem;line-height:var(--mdc-typography-headline5-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-headline5-font-weight, 400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline5-letter-spacing, normal);text-decoration:inherit;text-decoration:var(--mdc-typography-headline5-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline5-text-transform, inherit)}.mdc-typography--headline6{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-headline6-font-size, 0.875rem);line-height:0.875rem;line-height:var(--mdc-typography-headline6-line-height, 0.875rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight, 500);letter-spacing:0.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing, 0.0125em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline6-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform, inherit)}.mdc-typography--subtitle1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem);line-height:1.125rem;line-height:var(--mdc-typography-subtitle1-line-height, 1.125rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit)}.mdc-typography--subtitle2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.8125rem;font-size:var(--mdc-typography-subtitle2-font-size, 0.8125rem);line-height:1.125rem;line-height:var(--mdc-typography-subtitle2-line-height, 1.125rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight, 500);letter-spacing:0.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, 0.0071428571em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform, inherit)}.mdc-typography--body1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.8125rem;font-size:var(--mdc-typography-body1-font-size, 0.8125rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:0.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, 0.03125em);text-decoration:inherit;text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform, inherit)}.mdc-typography--body2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.8125rem;font-size:var(--mdc-typography-body2-font-size, 0.8125rem);line-height:1.625rem;line-height:var(--mdc-typography-body2-line-height, 1.625rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit)}.mdc-typography--caption{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.6875rem;font-size:var(--mdc-typography-caption-font-size, 0.6875rem);line-height:0.875rem;line-height:var(--mdc-typography-caption-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:0.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit)}.mdc-typography--button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:none;text-transform:var(--mdc-typography-button-text-transform, none)}.mdc-typography--overline{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-overline-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.6875rem;font-size:var(--mdc-typography-overline-font-size, 0.6875rem);line-height:0.875rem;line-height:var(--mdc-typography-overline-line-height, 0.875rem);font-weight:500;font-weight:var(--mdc-typography-overline-font-weight, 500);letter-spacing:0.1666666667em;letter-spacing:var(--mdc-typography-overline-letter-spacing, 0.1666666667em);text-decoration:none;text-decoration:var(--mdc-typography-overline-text-decoration, none);text-transform:uppercase;text-transform:var(--mdc-typography-overline-text-transform, uppercase)}.limel-form-array-item--simple{display:flex;align-items:center;margin-right:0.625rem}.limel-form-array-item--simple *:first-child{flex-grow:1}.limel-form-array-item--object{margin-bottom:0.25rem}.limel-form-layout--default{--gap:1rem;display:grid;gap:var(--gap);padding:var(--form-body-padding, 1rem)}.limel-form-layout--grid{--gap:1rem;--min-height-of-one-row:4.71rem;display:grid;gap:var(--gap);padding:var(--form-body-padding, 1rem);grid-template-columns:repeat(var(--number-of-columns), minmax(0, 1fr))}.limel-form-layout--grid.auto-reorder-to-avoid-empty-cells{grid-auto-flow:dense}.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--1,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--2,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--5{grid-column:span 1}.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--2,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--5{grid-column:span 2}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--5{grid-column:span 3}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--3{grid-column:span 3}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--5{grid-column:span 4}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--3{grid-column:span 3}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--4{grid-column:span 4}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--5{grid-column:span 5}.limel-form-layout--grid .limel-form-layout-colspan--all{grid-column:1/-1}.limel-form-layout--grid limel-checkbox,.limel-form-layout--grid limel-switch{min-height:calc(\n            var(--min-height-of-one-row) - 0.9375rem\n        )}.limel-form-layout--grid limel-checkbox{margin-top:0.5rem;display:block}.limel-form-layout--grid limel-switch{margin-left:0.5rem}.form-error{color:var(--mdc-theme-error, #b00020);font-size:0.6875rem;line-height:1.5;visibility:inherit;padding-right:1rem;padding-left:1rem;padding-top:0.25rem}.button-add-new{margin-top:0.5rem;width:100%}.mdc-typography--headline1{position:relative}.form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:2rem;--mdc-typography-headline1-line-height:2.25rem;--mdc-typography-headline1-letter-spacing:-0.0625rem;--mdc-typography-headline1-font-weight:400;color:rgb(var(--contrast-1000));margin-top:1.5rem;margin-bottom:0.5rem}.form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1.625rem;--mdc-typography-headline1-line-height:1.25rem;--mdc-typography-headline1-font-weight:300;margin-top:1.25rem;margin-bottom:0.5rem;color:rgb(var(--contrast-1100))}.form-group .form-group .mdc-typography--headline1:before{content:\"\";display:block;position:absolute;top:0;bottom:0;margin:auto;left:-0.75rem;background-color:var(--mdc-theme-primary);width:0.125rem;height:var(--mdc-typography-headline1-line-height);border-radius:0.125rem;opacity:0.6}.form-group .form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1.375rem;--mdc-typography-headline1-line-height:1.5rem;--mdc-typography-headline1-font-weight:300;margin-top:1rem;margin-bottom:0.5rem;color:rgb(var(--contrast-1200))}.form-group .form-group .form-group .mdc-typography--headline1:before{display:none}.form-group .form-group .form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1.25rem;--mdc-typography-headline1-line-height:1.25rem;--mdc-typography-headline1-font-weight:300;margin-top:1rem;margin-bottom:0.5rem;color:rgb(var(--contrast-1200))}.form-group .form-group .form-group .form-group .mdc-typography--headline1:before{display:none}";
+const formCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.mdc-typography{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif)}.mdc-typography--headline1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1.375rem;font-size:var(--mdc-typography-headline1-font-size, 1.375rem);line-height:1.375rem;line-height:var(--mdc-typography-headline1-line-height, 1.375rem);font-weight:300;font-weight:var(--mdc-typography-headline1-font-weight, 300);letter-spacing:-0.015625em;letter-spacing:var(--mdc-typography-headline1-letter-spacing, -0.015625em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline1-text-transform, inherit)}.mdc-typography--headline2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-headline2-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline2-line-height, 0.875rem);font-weight:300;font-weight:var(--mdc-typography-headline2-font-weight, 300);letter-spacing:-0.0083333333em;letter-spacing:var(--mdc-typography-headline2-letter-spacing, -0.0083333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline2-text-transform, inherit)}.mdc-typography--headline3{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline3-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-headline3-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline3-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-headline3-font-weight, 400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline3-letter-spacing, normal);text-decoration:inherit;text-decoration:var(--mdc-typography-headline3-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline3-text-transform, inherit)}.mdc-typography--headline4{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline4-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-headline4-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline4-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-headline4-font-weight, 400);letter-spacing:0.0073529412em;letter-spacing:var(--mdc-typography-headline4-letter-spacing, 0.0073529412em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline4-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline4-text-transform, inherit)}.mdc-typography--headline5{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline5-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-headline5-font-size, 0.875rem);line-height:0.875rem;line-height:var(--mdc-typography-headline5-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-headline5-font-weight, 400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline5-letter-spacing, normal);text-decoration:inherit;text-decoration:var(--mdc-typography-headline5-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline5-text-transform, inherit)}.mdc-typography--headline6{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-headline6-font-size, 0.875rem);line-height:0.875rem;line-height:var(--mdc-typography-headline6-line-height, 0.875rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight, 500);letter-spacing:0.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing, 0.0125em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline6-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform, inherit)}.mdc-typography--subtitle1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem);line-height:1.125rem;line-height:var(--mdc-typography-subtitle1-line-height, 1.125rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit)}.mdc-typography--subtitle2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.8125rem;font-size:var(--mdc-typography-subtitle2-font-size, 0.8125rem);line-height:1.125rem;line-height:var(--mdc-typography-subtitle2-line-height, 1.125rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight, 500);letter-spacing:0.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, 0.0071428571em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform, inherit)}.mdc-typography--body1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.8125rem;font-size:var(--mdc-typography-body1-font-size, 0.8125rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:0.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, 0.03125em);text-decoration:inherit;text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform, inherit)}.mdc-typography--body2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.8125rem;font-size:var(--mdc-typography-body2-font-size, 0.8125rem);line-height:1.625rem;line-height:var(--mdc-typography-body2-line-height, 1.625rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit)}.mdc-typography--caption{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.6875rem;font-size:var(--mdc-typography-caption-font-size, 0.6875rem);line-height:0.875rem;line-height:var(--mdc-typography-caption-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:0.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit)}.mdc-typography--button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:none;text-transform:var(--mdc-typography-button-text-transform, none)}.mdc-typography--overline{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-overline-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.6875rem;font-size:var(--mdc-typography-overline-font-size, 0.6875rem);line-height:0.875rem;line-height:var(--mdc-typography-overline-line-height, 0.875rem);font-weight:500;font-weight:var(--mdc-typography-overline-font-weight, 500);letter-spacing:0.1666666667em;letter-spacing:var(--mdc-typography-overline-letter-spacing, 0.1666666667em);text-decoration:none;text-decoration:var(--mdc-typography-overline-text-decoration, none);text-transform:uppercase;text-transform:var(--mdc-typography-overline-text-transform, uppercase)}.limel-form-array-item--simple{display:flex;align-items:center;margin-right:0.625rem}.limel-form-array-item--simple *:first-child{flex-grow:1}.limel-form-array-item--object{margin-bottom:0.25rem}.limel-form-layout--default{--gap:1rem;display:grid;gap:var(--gap);padding:var(--form-body-padding, 1rem)}.limel-form-layout--grid{--gap:1rem;--min-height-of-one-row:4.71rem;display:grid;gap:var(--gap);padding:var(--form-body-padding, 1rem);grid-template-columns:repeat(var(--number-of-columns), minmax(0, 1fr))}.limel-form-layout--grid.auto-reorder-to-avoid-empty-cells{grid-auto-flow:dense}.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--1,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--2,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--5{grid-column:span 1}.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--2,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--5{grid-column:span 2}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--5{grid-column:span 3}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--3{grid-column:span 3}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--5{grid-column:span 4}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--3{grid-column:span 3}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--4{grid-column:span 4}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--5{grid-column:span 5}.limel-form-layout--grid .limel-form-layout-colspan--all{grid-column:1/-1}.limel-form-layout--grid limel-checkbox,.limel-form-layout--grid limel-switch{min-height:calc(\n            var(--min-height-of-one-row) - 0.9375rem\n        )}.limel-form-layout--grid limel-checkbox{margin-top:0.5rem;display:block}.limel-form-layout--grid limel-switch{margin-left:0.5rem}.form-error{color:var(--mdc-theme-error, #b00020);font-size:0.6875rem;line-height:1.5;visibility:inherit;padding-right:1rem;padding-left:1rem;padding-top:0.25rem}.button-add-new{margin-top:0.5rem;width:100%}.mdc-typography--headline1{position:relative}.form-group .mdc-typography--headline1,.form-group .mdc-typography--body1{color:rgb(var(--contrast-1100))}.form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:2rem;--mdc-typography-headline1-line-height:2.25rem;--mdc-typography-headline1-letter-spacing:-0.0625rem;--mdc-typography-headline1-font-weight:400;margin-top:1.5rem;margin-bottom:0.5rem}.form-group .form-group .mdc-typography--headline1,.form-group .form-group .mdc-typography--body1{color:rgb(var(--contrast-1200))}.form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1.625rem;--mdc-typography-headline1-line-height:1.25rem;--mdc-typography-headline1-font-weight:300;margin-top:1.25rem;margin-bottom:0.5rem}.form-group .form-group .mdc-typography--headline1:before{content:\"\";display:block;position:absolute;top:0;bottom:0;margin:auto;left:-0.75rem;background-color:var(--mdc-theme-primary);width:0.125rem;height:var(--mdc-typography-headline1-line-height);border-radius:0.125rem;opacity:0.6}.form-group .form-group .form-group .mdc-typography--headline1,.form-group .form-group .form-group .mdc-typography--body1{color:rgb(var(--contrast-1300))}.form-group .form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1.375rem;--mdc-typography-headline1-line-height:1.5rem;--mdc-typography-headline1-font-weight:300;margin-top:1rem;margin-bottom:0.5rem}.form-group .form-group .form-group .mdc-typography--headline1:before{display:none}.form-group .form-group .form-group .form-group .mdc-typography--headline1,.form-group .form-group .form-group .form-group .mdc-typography--body1{color:rgb(var(--contrast-1400))}.form-group .form-group .form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1.25rem;--mdc-typography-headline1-line-height:1.25rem;--mdc-typography-headline1-font-weight:300;margin-top:1rem;margin-bottom:0.5rem}.form-group .form-group .form-group .form-group .mdc-typography--headline1:before{display:none}.limel-form-row--layout{--limel-form-row-border-radius:0.375rem;--limel-form-row-icon-size:1.75rem;--limel-form-row-main-information-gap:0.5rem;display:flex;flex-direction:column}.limel-form-row--layout .row{display:flex;gap:0.5rem;flex-direction:column;padding:0.5rem 1rem}.limel-form-row--layout .row:nth-child(odd){background-color:var(--form-background-color-of-odd-rows, rgb(var(--contrast-200)))}.limel-form-row--layout .row:nth-child(even){background-color:var(--form-background-color-of-even-rows, transparent)}.limel-form-row--layout .row:first-child{border-radius:var(--limel-form-row-border-radius) var(--limel-form-row-border-radius) 0 0}.limel-form-row--layout .row:last-child{border-radius:0 0 var(--limel-form-row-border-radius) var(--limel-form-row-border-radius)}.limel-form-row--layout .main-information{display:flex;flex-direction:row;align-items:center;gap:var(--limel-form-row-main-information-gap);min-width:0}.limel-form-row--layout limel-icon{color:rgb(var(--contrast-1200));width:var(--limel-form-row-icon-size);flex-shrink:0;min-width:0}.limel-form-row--layout .title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:normal;flex-grow:1;color:var(--mdc-theme-on-surface);font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem)}.limel-form-row--layout .description{margin:0;color:var(--mdc-theme-text-secondary-on-background);font-size:var(--mdc-typography-body2-font-size, 0.8125rem);line-height:1.5}.limel-form-row--layout .has-icon .description{padding-left:calc(var(--limel-form-row-icon-size) + var(--limel-form-row-main-information-gap))}.limel-form-row--layout .form-group.field{flex-shrink:0;display:flex;align-content:center}.limel-form-row--layout .form-group.field limel-slider{min-width:8rem;display:block}";
 const Form = class {
   constructor(hostRef) {

package/dist/cjs/limel-header.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-287e25e0.js');
-const headerCss = ":host(limel-header){display:flex;align-items:center;box-sizing:border-box;width:100%;background-color:var(--header-background-color, rgb(var(--contrast-300)));border-top-left-radius:var(--header-top-right-left-border-radius, 0.75rem);border-top-right-radius:var(--header-top-right-left-border-radius, 0.75rem);padding:0.25rem}.information{display:flex;flex-grow:1;align-items:center;min-width:0}.icon{flex-shrink:0;color:var(--header-icon-color, rgb(var(--contrast-1100)));background-color:var(--header-icon-background-color, transparent);width:1.75rem;margin:0 0.5rem}.headings{min-width:0;margin-left:0.25rem}.heading,.subheading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;padding:0}.heading{color:var(--header-heading-color, rgb(var(--contrast-1100)));font-size:1.0625rem}.subheading{color:var(--header-subheading-color, rgb(var(--contrast-900)));font-size:0.875rem;font-weight:lighter}.subheading__supporting-text{color:var(--header-supporting-text-color, var(--header-subheading-color))}.subheading__supporting-text span{margin:0 0.5rem;font-weight:bold}.actions{flex-shrink:0}:host(limel-header.is-narrow){padding:0.125rem 0.25rem}:host(limel-header.is-narrow) .icon{margin-right:0.125rem;width:1.25rem}:host(limel-header.is-narrow) .heading{font-size:0.9375rem}:host(limel-header.has-responsive-layout){display:grid;grid-template-columns:repeat(auto-fit, minmax(clamp(50%, var(--header-responsive-breakpoint, 22rem), 100%), 1fr))}:host(limel-header.has-responsive-layout) .headings{padding-right:0.5rem}:host(limel-header.has-responsive-layout) .actions{display:flex;justify-content:flex-end}";
+const headerCss = ":host(limel-header){display:flex;align-items:center;box-sizing:border-box;width:100%;background-color:var(--header-background-color, rgb(var(--contrast-300)));border-top-left-radius:var(--header-top-right-left-border-radius, 0.75rem);border-top-right-radius:var(--header-top-right-left-border-radius, 0.75rem);padding:0.25rem}.information{display:flex;flex-grow:1;align-items:center;min-width:0}.icon{flex-shrink:0;color:var(--header-icon-color, rgb(var(--contrast-1100)));background-color:var(--header-icon-background-color, transparent);width:1.75rem;margin:0 0.5rem}.headings{min-width:0;margin-left:0.25rem}.heading,.subheading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;padding:0}.heading{color:var(--header-heading-color, rgb(var(--contrast-1100)));font-size:1.0625rem}.subheading{color:var(--header-subheading-color, rgb(var(--contrast-900)));font-size:0.875rem;font-weight:lighter}.subheading__supporting-text{color:var(--header-supporting-text-color, var(--header-subheading-color))}.subheading__supporting-text span{margin:0 0.5rem;font-weight:bold}slot[name=actions]{flex-shrink:0}:host(limel-header.is-narrow){padding:0.125rem 0.25rem}:host(limel-header.is-narrow) .icon{margin-right:0.125rem;width:1.25rem}:host(limel-header.is-narrow) .heading{font-size:0.9375rem}:host(limel-header.has-responsive-layout){display:grid;grid-template-columns:repeat(auto-fit, minmax(clamp(50%, var(--header-responsive-breakpoint, 22rem), 100%), 1fr))}:host(limel-header.has-responsive-layout) .headings{padding-right:0.5rem}:host(limel-header.has-responsive-layout) slot[name=actions]{display:flex;justify-content:flex-end}";
 const Header = class {
   constructor(hostRef) {
@@ -17,7 +17,7 @@ const Header = class {
   render() {
     return [
       index.h("div", { class: "information" }, this.renderIcon(), index.h("div", { class: "headings" }, index.h("h1", { class: "heading", title: this.heading }, this.heading), index.h("h2", { class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))),
-      index.h("div", { class: "actions" }, index.h("slot", null)),
+      index.h("slot", { name: "actions" }, index.h("slot", null)),
     ];
   }
   renderIcon() {

package/dist/cjs/limel-info-tile.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-287e25e0.js');
-const infoTileCss = "/*\n * This file is imported into every component!\n *\n * Nothing in this file may output any CSS\n * without being explicitly called by outside code.\n */\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n  --badge-text-color: var(\n      --info-tile-badge-text-color,\n      rgb(var(--color-white))\n  );\n  --badge-background-color: var(\n      --info-tile-badge-background-color,\n      rgb(var(--color-red-default))\n  );\n  --circular-progress-text-color: var(\n      --info-tile-progress-text-color,\n      var(--info-tile-text-color)\n  );\n  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n  --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n  --circular-progress-background-color: var(\n      --info-tile-progress-background-color,\n      var(--info-tile-background-color)\n  );\n  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  isolation: isolate;\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\na.is-clickable {\n  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-normal);\n  cursor: pointer;\n}\na.is-clickable:hover {\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-hovered);\n}\na.is-clickable:active {\n  box-shadow: var(--button-shadow-pressed);\n  transform: translate3d(0, 0.08rem, 0);\n}\na.is-clickable:focus {\n  outline: none;\n}\na.is-clickable:focus-visible {\n  outline: none;\n  box-shadow: var(--shadow-depth-8-focused);\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    height: min(20%, 5rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\n    --circular-progress-size: initial;\n  }\n}\n\n.label {\n  z-index: 1;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: 0.875rem;\n  }\n}\n\nlimel-badge {\n  position: absolute;\n  top: -0.5rem;\n  right: -0.5rem;\n}\n\nlimel-linear-progress {\n  --lime-primary-color: var(--info-tile-text-color);\n  position: absolute;\n  inset: auto 0 0 0;\n  border-radius: 1rem;\n  overflow: hidden;\n}\n\n.value-group {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n  display: flex;\n}\n\n.prefix,\n.suffix {\n  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n.suffix {\n    font-size: 0.75rem;\n  }\n}\n\n.prefix {\n  align-self: flex-start;\n  line-height: normal;\n  transform: translateY(40%);\n}\n\n.value {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n  transform-origin: left;\n  transform: translate3d(0, 0, 0) scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n\n  .suffix,\n.prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\n  .progress,\n.icon {\n    position: relative;\n    top: unset;\n    right: unset;\n  }\n\n  a {\n    align-items: center;\n    justify-content: center;\n  }\n\n  .label {\n    text-align: center;\n  }\n\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}";
+const infoTileCss = "/*\n * This file is imported into every component!\n *\n * Nothing in this file may output any CSS\n * without being explicitly called by outside code.\n */\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n  --badge-text-color: var(\n      --info-tile-badge-text-color,\n      rgb(var(--color-white))\n  );\n  --badge-background-color: var(\n      --info-tile-badge-background-color,\n      rgb(var(--color-red-default))\n  );\n  --circular-progress-text-color: var(\n      --info-tile-progress-text-color,\n      var(--info-tile-text-color)\n  );\n  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n  --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n  --circular-progress-background-color: var(\n      --info-tile-progress-background-color,\n      var(--info-tile-background-color)\n  );\n  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  isolation: isolate;\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\na.is-clickable {\n  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-normal);\n  cursor: pointer;\n}\na.is-clickable:hover {\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-hovered);\n}\na.is-clickable:active {\n  box-shadow: var(--button-shadow-pressed);\n  transform: translate3d(0, 0.08rem, 0);\n}\na.is-clickable:focus {\n  outline: none;\n}\na.is-clickable:focus-visible {\n  outline: none;\n  box-shadow: var(--shadow-depth-8-focused);\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    width: max(10%, 3rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\n    --circular-progress-size: initial;\n  }\n}\n\n.label {\n  z-index: 1;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: 0.875rem;\n  }\n}\n\nlimel-badge {\n  position: absolute;\n  top: -0.5rem;\n  right: -0.5rem;\n}\n\nlimel-linear-progress {\n  --lime-primary-color: var(--info-tile-text-color);\n  position: absolute;\n  inset: auto 0 0 0;\n  border-radius: 1rem;\n  overflow: hidden;\n}\n\n.value-group {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n  display: flex;\n}\n\n.prefix,\n.suffix {\n  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n.suffix {\n    font-size: 0.75rem;\n  }\n}\n\n.prefix {\n  align-self: flex-start;\n  line-height: normal;\n  transform: translateY(40%);\n}\n\n.value {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n  transform-origin: left;\n  transform: translate3d(0, 0, 0) scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n\n  .suffix,\n.prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\n  .progress,\n.icon {\n    position: relative;\n    top: unset;\n    right: unset;\n  }\n\n  a {\n    align-items: center;\n    justify-content: center;\n  }\n\n  .label {\n    text-align: center;\n  }\n\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}";
 const InfoTile = class {
   constructor(hostRef) {
@@ -17,6 +17,9 @@ const InfoTile = class {
     this.renderValue = () => {
       var _a;
       const characterCount = ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString().length;
+      if (!this.value && this.loading) {
+        return index.h("span", { class: "value" }, "\u00B7\u00B7\u00B7");
+      }
       if (this.value) {
         return (index.h("span", { class: {
             value: true,