@limetech/lime-elements 36.1.0-next.13 → 36.1.0-next.15

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+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');
@@ -41,38 +41,6 @@ const DatePicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.change = index.createEvent(this, "change", 7);
-    /**
-     * Set to `true` to disable the field.
-     * Use `disabled` to indicate that the field can normally be interacted
-     * with, but is currently disabled. This tells the user that if certain
-     * requirements are met, the field may become enabled again.
-     */
-    this.disabled = false;
-    /**
-     * Set to `true` to make the field read-only.
-     * Use `readonly` when the field is only there to present the data it holds,
-     * and will not become possible for the current user to edit.
-     */
-    this.readonly = false;
-    /**
-     * Set to `true` to indicate that the current value of the date picker is
-     * invalid.
-     */
-    this.invalid = false;
-    /**
-     * Set to `true` to indicate that the field is required.
-     */
-    this.required = false;
-    /**
-     * Type of date picker.
-     */
-    this.type = 'datetime';
-    /**
-     * Defines the localisation for translations and date formatting.
-     * Property `format` customizes the localized date format.
-     */
-    this.language = 'en';
-    this.showPortal = false;
     this.portalId = `date-picker-calendar-${randomString.createRandomString()}`;
     this.documentClickListener = (event) => {
       if (event.type === 'keydown' &&
@@ -84,6 +52,20 @@ const DatePicker = class {
         this.hideCalendar();
       }
     };
+    this.disabled = false;
+    this.readonly = false;
+    this.invalid = false;
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.helperText = undefined;
+    this.required = false;
+    this.value = undefined;
+    this.type = 'datetime';
+    this.format = undefined;
+    this.language = 'en';
+    this.formattedValue = undefined;
+    this.internalFormat = undefined;
+    this.showPortal = false;
     this.handleCalendarChange = this.handleCalendarChange.bind(this);
     this.handleInputElementChange =
       this.handleInputElementChange.bind(this);

package/dist/cjs/limel-dialog.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 const dispatchResizeEvent = require('./dispatch-resize-event-4462d78f.js');
 const randomString = require('./random-string-4c3b7f1c.js');
 const component = require('./component-67144c1c.js');
@@ -937,22 +937,14 @@ const Dialog = class {
     index.registerInstance(this, hostRef);
     this.close = index.createEvent(this, "close", 7);
     this.closing = index.createEvent(this, "closing", 7);
-    /**
-     * Set to `true` to make the dialog "fullscreen".
-     */
+    this.showFooter = true;
+    this.heading = undefined;
     this.fullscreen = false;
-    /**
-     * `true` if the dialog is open, `false` otherwise.
-     */
     this.open = false;
-    /**
-     * Defines which action triggers a close-event.
-     */
     this.closingActions = {
       escapeKey: true,
       scrimClick: true,
     };
-    this.showFooter = true;
     this.handleMdcOpened = this.handleMdcOpened.bind(this);
     this.handleMdcClosed = this.handleMdcClosed.bind(this);
     this.handleMdcClosing = this.handleMdcClosing.bind(this);

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 const randomString = require('./random-string-4c3b7f1c.js');
 
 const dockButtonCss = ".button{all:unset;cursor:pointer;transition:background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;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);color:var(--limel-dock-item-text-color);background-color:var(--dock-background-color)}.button:hover{box-shadow:var(--button-shadow-hovered)}.button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.button:focus{outline:none}.button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.button: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))}";
@@ -13,20 +13,6 @@ const DockButton = class {
     this.itemSelected = index.createEvent(this, "itemSelected", 7);
     this.menuOpen = index.createEvent(this, "menuOpen", 7);
     this.close = index.createEvent(this, "close", 7);
-    /**
-     * When the dock is expanded or collapsed, dock items
-     * show labels and tooltips as suitable for the layout.
-     */
-    this.expanded = false;
-    /**
-     * When dock is using mobile layout, dock items
-     * show labels and tooltips as suitable for the layout.
-     */
-    this.useMobileLayout = false;
-    /**
-     * Indicated whether the popover that renders a component is open.
-     */
-    this.isOpen = false;
     this.openPopover = (event) => {
       event.stopPropagation();
       this.isOpen = true;
@@ -49,6 +35,10 @@ const DockButton = class {
         (_c = this.customComponentElement) === null || _c === void 0 ? void 0 : _c.focus();
       }
     };
+    this.item = undefined;
+    this.expanded = false;
+    this.useMobileLayout = false;
+    this.isOpen = false;
     this.tooltipId = randomString.createRandomString();
   }
   render() {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+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:0.1875rem 0 0.375rem -0.125rem rgba(var(--color-black), 0.15), 0.1875rem 0 0.625rem -0.125rem rgba(var(--color-black), 0.05)}: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:background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;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{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))}";
 
@@ -14,45 +14,6 @@ const Dock = class {
     this.menuOpen = index.createEvent(this, "menuOpen", 7);
     this.close = index.createEvent(this, "close", 7);
     this.dockExpanded = index.createEvent(this, "dockExpanded", 7);
-    /**
-     * Items that are placed in the dock.
-     */
-    this.dockItems = [];
-    /**
-     * Items that are placed at the bottom of the dock. (Or at the end in mobile
-     * layout.)
-     */
-    this.dockFooterItems = [];
-    /**
-     * Defines the width of the component, when it loads.
-     * - `true`: shows both icons and labels of the Dock items.
-     * - `false`: only shows icons of the doc items, and displays
-     * their labels as tooltip.
-     *
-     * Note: when `useMobileLayout` is `true`, labels will always
-     * be shown as tooltips. Read more below…
-     */
-    this.expanded = false;
-    /**
-     * Set to `false` if you do not want to allow end-users
-     * to exapnd or shrink the Dock. This will hide the
-     * expand/shrink button, and the only things that defines
-     * the layout will be the `expanded` property, and
-     * the `mobileBreakPoint`.
-     */
-    this.allowResize = true;
-    /**
-     * Defines the breakpoint in pixles, at which the component will be rendered
-     * in a hoizontal layout. Default breakpoint is `700` pixels, which means
-     * when the screen size is smaller than `700px`, the component will automatically
-     * switch to a horizontal layout.
-     */
-    this.mobileBreakPoint = DEFAULT_MOBILE_BREAKPOINT;
-    /**
-     * Is used to render the component horizontally, and place
-     * the Dock items in a row.
-     */
-    this.useMobileLayout = false;
     this.renderSeparator = () => {
       return this.useMobileLayout ? null : index.h("span", { class: "footer-separator" });
     };
@@ -74,6 +35,13 @@ const Dock = class {
       this.expanded = !this.expanded;
       this.dockExpanded.emit(this.expanded);
     };
+    this.dockItems = [];
+    this.dockFooterItems = [];
+    this.accessibleLabel = undefined;
+    this.expanded = false;
+    this.allowResize = true;
+    this.mobileBreakPoint = DEFAULT_MOBILE_BREAKPOINT;
+    this.useMobileLayout = false;
   }
   componentDidLoad() {
     this.resizeObserver = new ResizeObserver(this.handleResize);

package/dist/cjs/limel-file.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 const translations = require('./translations-ca7279bc.js');
 const randomString = require('./random-string-4c3b7f1c.js');
 const component = require('./component-ae3bfacf.js');
@@ -406,28 +406,6 @@ const File = class {
     index.registerInstance(this, hostRef);
     this.change = index.createEvent(this, "change", 7);
     this.interact = index.createEvent(this, "interact", 7);
-    /**
-     * Set to `true` to indicate that the field is required.
-     */
-    this.required = false;
-    /**
-     * True if the input should be disabled
-     */
-    this.disabled = false;
-    /**
-     * Set to `true` to disable adding and removing files, but allow interaction
-     * with any already existing file.
-     */
-    this.readonly = false;
-    /**
-     * The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)
-     */
-    this.accept = '*';
-    /**
-     * Defines the localisation for translations.
-     */
-    this.language = 'en';
-    this.isDraggingOverDropZone = false;
     this.fileInputId = randomString.createRandomString();
     this.handleDragEnter = (event) => {
       this.isDraggingOverDropZone = true;
@@ -442,6 +420,14 @@ const File = class {
       const dataTransfer = event.dataTransfer;
       this.handleFile(dataTransfer.files[0]);
     };
+    this.value = undefined;
+    this.label = undefined;
+    this.required = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.accept = '*';
+    this.language = 'en';
+    this.isDraggingOverDropZone = false;
     this.handleFileSelection = this.handleFileSelection.bind(this);
     this.handleFileChange = this.handleFileChange.bind(this);
     this.handleChipSetChange = this.handleChipSetChange.bind(this);

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 const translations = require('./translations-ca7279bc.js');
 const _commonjsHelpers = require('./_commonjsHelpers-0c557e26.js');
 const dateFormatter = require('./dateFormatter-d7a8d40d.js');
@@ -7562,16 +7562,13 @@ const DatePickerCalendar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.change = index.createEvent(this, "change", 7);
-    /**
-     * Type of date picker.
-     */
+    this.flatPickrCreated = false;
+    this.value = undefined;
     this.type = 'datetime';
-    /**
-     * Defines the localisation for translations and date formatting.
-     * Property `format` customizes the localized date format.
-     */
+    this.format = undefined;
+    this.isOpen = undefined;
+    this.inputElement = undefined;
     this.language = 'en';
-    this.flatPickrCreated = false;
   }
   componentWillLoad() {
     switch (this.type) {

package/dist/cjs/limel-flex-container.cjs.entry.js

@@ -2,28 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 
 const flexContainerCss = ":host(limel-flex-container){display:flex}:host(limel-flex-container[hidden]){display:none}:host(limel-flex-container[direction=horizontal]){flex-direction:row}:host(limel-flex-container[direction=horizontal][reverse]){flex-direction:row-reverse}:host(limel-flex-container[direction=vertical]){flex-direction:column}:host(limel-flex-container[direction=vertical][reverse]){flex-direction:column-reverse}:host(limel-flex-container[align=start]){align-items:flex-start}:host(limel-flex-container[align=end]){align-items:flex-end}:host(limel-flex-container[align=center]){align-items:center}:host(limel-flex-container[align=stretch]){align-items:stretch}:host(limel-flex-container[justify=start]){justify-content:flex-start}:host(limel-flex-container[justify=end]){justify-content:flex-end}:host(limel-flex-container[justify=center]){justify-content:center}:host(limel-flex-container[justify=space-between]){justify-content:space-between}:host(limel-flex-container[justify=space-around]){justify-content:space-around}:host(limel-flex-container[justify=space-evenly]){justify-content:space-evenly}:host(limel-flex-container[slot=button]){gap:0.5rem;width:100%;justify-content:flex-end}:host(limel-flex-container[slot=button][direction=horizontal][reverse]){justify-content:flex-start}";
 
 const FlexContainer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * Direction of the main axis
-     */
     this.direction = 'horizontal';
-    /**
-     * Specify how items are aligned along the main axis
-     */
     this.justify = 'space-between';
-    /**
-     * Specify how items are aligned along the cross axis
-     */
     this.align = 'center';
-    /**
-     * Reverse the order of the items
-     */
     this.reverse = false;
   }
   componentWillLoad() {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 const _commonjsHelpers = require('./_commonjsHelpers-0c557e26.js');
 const isEqual$1 = require('./isEqual-d2a13a24.js');
 const isArray$4 = require('./isArray-d188a04f.js');
@@ -29519,15 +29519,13 @@ const Form = class {
     index.registerInstance(this, hostRef);
     this.change = index.createEvent(this, "change", 7);
     this.validate = index.createEvent(this, "validate", 7);
-    /**
-     * The schema used to render the form
-     */
+    this.isValid = true;
     this.schema = {};
-    /**
-     * Set to `true` to disable the whole form.
-     */
+    this.value = undefined;
     this.disabled = false;
-    this.isValid = true;
+    this.propsFactory = undefined;
+    this.transformErrors = undefined;
+    this.errors = undefined;
     this.handleChange = this.handleChange.bind(this);
     this.getCustomErrorMessages = this.getCustomErrorMessages.bind(this);
   }

package/dist/cjs/limel-grid.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 
 const gridCss = ":host{display:block;position:relative}:host([hidden]){display:none}slot{display:grid;grid-template-areas:var(--lime-grid-area, \"\");grid-template-columns:repeat(var(--lime-grid-columns, 4), minmax(0, 1fr));gap:var(--lime-grid-gutter, 1rem);grid-auto-flow:row dense;grid-auto-rows:var(--lime-grid-cell-height, 2.5rem);margin:0;height:100%;width:100%}";
 

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

@@ -2,13 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+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 Header = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.icon = undefined;
+    this.heading = undefined;
+    this.subheading = undefined;
+    this.supportingText = undefined;
   }
   render() {
     return [

package/dist/cjs/limel-icon-button.cjs.entry.js

@@ -2,21 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 
 const iconButtonCss = ".mdc-icon-button{font-size:24px;width:48px;height:48px;padding:12px}.mdc-icon-button.mdc-icon-button--reduced-size{width:40px;height:40px;padding:8px}.mdc-icon-button.mdc-icon-button--reduced-size.mdc-icon-button--touch{margin-top:4px;margin-bottom:4px;margin-right:4px;margin-left:4px}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-icon-button:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38))}.mdc-icon-button svg,.mdc-icon-button img{width:24px;height:24px}.mdc-icon-button{display:inline-block;position:relative;box-sizing:border-box;border:none;outline:none;background-color:transparent;fill:currentColor;color:inherit;text-decoration:none;cursor:pointer;user-select:none;overflow:visible}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-icon-button:disabled{cursor:default;pointer-events:none}.mdc-icon-button--display-flex{align-items:center;display:inline-flex;justify-content:center}.mdc-icon-button__icon{display:inline-block}.mdc-icon-button__icon.mdc-icon-button__icon--on{display:none}.mdc-icon-button--touch{margin-top:0px;margin-bottom:0px}.mdc-icon-button--on .mdc-icon-button__icon{display:none}.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on{display:inline-block}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-icon-button .mdc-icon-button__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-icon-button .mdc-icon-button__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation .mdc-icon-button__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before,.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-icon-button:hover .mdc-icon-button__ripple::before,.mdc-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before,.mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after{transition:opacity 150ms linear}.mdc-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-icon-button .mdc-icon-button__ripple{pointer-events:none;z-index:1}:host([hidden]){display:none}:host([disabled]){pointer-events:none}.mdc-icon-button{transition:background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:2.25rem;width:2.25rem;padding:0.125rem;border-radius:50%;background-color:var(--icon-background-color, transparent)}.mdc-icon-button:hover{box-shadow:var(--button-shadow-hovered)}.mdc-icon-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}:host([elevated]) .mdc-icon-button:not(:hover):not(:active):not(:focus-visible){box-shadow:var(--button-shadow-normal)}.mdc-icon-button:disabled{color:var(--mdc-theme-text-disabled-on-background)}.mdc-icon-button:focus-visible{box-shadow:var(--shadow-depth-8-focused);border-radius:50%}limel-icon{width:1.25rem;height:1.25rem}";
 
 const IconButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * Set to `true` to give the button our standard "elevated" look, lifting
-     * it off the flat layout.
-     */
+    this.icon = undefined;
     this.elevated = false;
-    /**
-     * Set to `true` to disable the button.
-     */
+    this.label = undefined;
     this.disabled = false;
   }
   connectedCallback() {

package/dist/cjs/limel-icon.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 const config = require('./config-c6520559.js');
 
 class IconCache {
@@ -88,6 +88,9 @@ const iconCss = ":host{background-color:var(--icon-background-color, transparent
 const Icon = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.size = undefined;
+    this.name = undefined;
+    this.badge = undefined;
   }
   componentDidLoad() {
     this.loadIcon(this.name);

package/dist/cjs/limel-input-field.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 const keycodes = require('./keycodes-3949f425.js');
 const linkHelper = require('./link-helper-4f75d41d.js');
 const randomString = require('./random-string-4c3b7f1c.js');
@@ -230,64 +230,6 @@ const InputField = class {
     index.registerInstance(this, hostRef);
     this.change = index.createEvent(this, "change", 7);
     this.action = index.createEvent(this, "action", 7);
-    /**
-     * Set to `true` to disable the field.
-     * Use `disabled` to indicate that the field can normally be interacted
-     * with, but is currently disabled. This tells the user that if certain
-     * requirements are met, the field may become enabled again.
-     */
-    this.disabled = false;
-    /**
-     * Set to `true` to make the field read-only.
-     * Use `readonly` when the field is only there to present the data it holds,
-     * and will not become possible for the current user to edit.
-     */
-    this.readonly = false;
-    /**
-     * Set to `true` to indicate that the current value of the input field is
-     * invalid.
-     */
-    this.invalid = false;
-    /**
-     * Set to `true` to indicate that the field is required.
-     */
-    this.required = false;
-    /**
-     * Type of input.
-     *
-     * Note** regarding type `url`: `limel-input` uses the native validation
-     * built into the browser for many types of input fields. The native
-     * validation for `url` is very strict, and does not allow relative urls,
-     * nor any other formats that are not a "fully qualified" url. To allow
-     * such urls, use the type `urlAsText` instead. `urlAsText` works exactly
-     * like `text` in all regards, except that it enables use of the `showLink`
-     * property.
-     */
-    this.type = 'text';
-    /**
-     * Set to `true` to format the current value of the input field only
-     * if the field is of type number.
-     * The number format is determined by the current language of the browser.
-     */
-    this.formatNumber = true;
-    /**
-     * Incremental values that are valid if the field type is `number`.
-     */
-    this.step = 'any';
-    /**
-     * list of suggestions `value` can autocomplete to.
-     */
-    this.completions = [];
-    /**
-     * For inputs of type `email`, `tel`, `url`, and `urlAsText`, set this to
-     * `true` to show a trailing icon with a `mailto:`,`tel:`, or normal link,
-     * respectively. The default icon can be overridden using the `trailingIcon`
-     * property.
-     */
-    this.showLink = false;
-    this.isFocused = false;
-    this.isModified = false;
-    this.showCompletions = false;
     this.completionsList = [];
     this.initialize = () => {
       const element = this.limelInputField.shadowRoot.querySelector('.mdc-text-field');
@@ -689,6 +631,31 @@ const InputField = class {
       // circumstances when the value is changed by the scrolling.
       // Please test THOROUGHLY if you remove this event handler 😄
     };
+    this.disabled = false;
+    this.readonly = false;
+    this.invalid = false;
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.helperText = undefined;
+    this.prefix = undefined;
+    this.suffix = undefined;
+    this.required = false;
+    this.value = undefined;
+    this.trailingIcon = undefined;
+    this.leadingIcon = undefined;
+    this.pattern = undefined;
+    this.type = 'text';
+    this.formatNumber = true;
+    this.step = 'any';
+    this.max = undefined;
+    this.min = undefined;
+    this.maxlength = undefined;
+    this.minlength = undefined;
+    this.completions = [];
+    this.showLink = false;
+    this.isFocused = false;
+    this.isModified = false;
+    this.showCompletions = false;
     const debounceTimeout = 300;
     this.changeEmitter = debounce(this.changeEmitter, debounceTimeout);
     this.portalId = randomString.createRandomString();

package/dist/cjs/limel-linear-progress.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 const component = require('./component-67144c1c.js');
 const util = require('./util-b0f5741e.js');
 
@@ -432,13 +432,7 @@ const linearProgressCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-
 const LinearProgress = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * The value of the progress bar. Should be between `0` and `1`.
-     */
     this.value = 0;
-    /**
-     * Puts the progress bar in an indeterminate state
-     */
     this.indeterminate = false;
   }
   connectedCallback() {

package/dist/cjs/limel-list_2.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 const component = require('./component-66df95e7.js');
-const checkbox_template = require('./checkbox.template-b6c6562c.js');
+const checkbox_template = require('./checkbox.template-ac867c17.js');
 const component$1 = require('./component-cf490570.js');
 const dom = require('./dom-20826de0.js');
 const keycodes = require('./keycodes-3949f425.js');
@@ -238,18 +238,6 @@ const List = class {
     index.registerInstance(this, hostRef);
     this.change = index.createEvent(this, "change", 7);
     this.select = index.createEvent(this, "select", 7);
-    /**
-     * Size of the icons in the list
-     */
-    this.iconSize = 'small';
-    /**
-     * By default, lists will display 3 lines of text, and then truncate the rest.
-     * Consumers can increase or decrease this number by specifying
-     * `maxLinesSecondaryText`. If consumer enters zero or negative
-     * numbers we default to 1; and if they type decimals we round up.
-     */
-    // eslint-disable-next-line no-magic-numbers
-    this.maxLinesSecondaryText = 3;
     this.listRenderer = new ListRenderer();
     this.setup = () => {
       this.setupList();
@@ -327,6 +315,11 @@ const List = class {
     this.isListItem = (item) => {
       return !('separator' in item);
     };
+    this.items = undefined;
+    this.badgeIcons = undefined;
+    this.iconSize = 'small';
+    this.type = undefined;
+    this.maxLinesSecondaryText = 3;
   }
   connectedCallback() {
     this.setup();
@@ -390,10 +383,6 @@ const MenuSurface = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.dismiss = index.createEvent(this, "dismiss", 7);
-    /**
-     * True if the menu surface is open, false otherwise
-     */
-    this.open = false;
     this.setup = () => {
       const menuElement = this.host.shadowRoot.querySelector('.mdc-menu-surface');
       if (!menuElement) {
@@ -478,6 +467,8 @@ const MenuSurface = class {
         this.dismiss.emit();
       }
     };
+    this.open = false;
+    this.allowClicksElement = undefined;
   }
   connectedCallback() {
     this.setup();