@limetech/lime-elements 40.23.0 → 40.24.0

package/dist/collection/components/date-picker/pickers/picker.js

@@ -38,7 +38,43 @@ export class Picker {
     }
     setValue(value) {
         var _a;
-        (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.setDate(value, false);
+        const currentlySelected = (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.selectedDates[0];
+        const isUnchanged = currentlySelected
+            ? (value === null || value === void 0 ? void 0 : value.getTime()) === currentlySelected.getTime()
+            : !value;
+        if (!this.flatpickr || isUnchanged) {
+            // Runs on every re-render, so skip an unchanged date.
+            return;
+        }
+        this.flatpickr.setDate(value, false);
+        this.redrawSelection();
+    }
+    /**
+     * A silent `setDate` fires no Flatpickr hooks, so a picker that marks
+     * its selection from hooks does it here instead.
+     */
+    redrawSelection() {
+        // The default day grid is redrawn by Flatpickr itself.
+    }
+    // Flatpickr only does this on key presses in the input it is bound to.
+    focusDay() {
+        const day = this.getDayToFocus();
+        day === null || day === void 0 ? void 0 : day.focus();
+        return !!day;
+    }
+    // The same order Flatpickr uses.
+    getDayToFocus() {
+        var _a;
+        const days = (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.daysContainer;
+        if (!days) {
+            return;
+        }
+        const isVisible = (day) => (day === null || day === void 0 ? void 0 : day.isConnected) && days.contains(day);
+        return [
+            this.flatpickr.selectedDateElem,
+            this.flatpickr.todayDateElem,
+            days.querySelector('.flatpickr-day:not(.prevMonthDay):not(.nextMonthDay)'),
+        ].find(isVisible);
     }
     redraw() {
         var _a;

package/dist/collection/components/date-picker/pickers/quarter-picker.js

@@ -47,6 +47,9 @@ export class QuarterPicker extends Picker {
     }
     async handleClose(selectedDates) {
         await super.handleClose(selectedDates);
+        this.redrawSelection();
+    }
+    redrawSelection() {
         this.selectQuarter(this.flatpickr.selectedDates, this.flatpickr.input.value, this.flatpickr);
     }
     handleReady(_, __, fp) {

package/dist/collection/components/date-picker/pickers/week-picker.js

@@ -1,5 +1,6 @@
 import weekSelectPlugin from "flatpickr/dist/plugins/weekSelect/weekSelect";
 import { Picker } from "./picker";
+const DAYS_PER_WEEK = 7;
 export class WeekPicker extends Picker {
     constructor(language, change, dateFormat = '[w] W GGGG') {
         super(language, change, dateFormat);
@@ -12,4 +13,24 @@ export class WeekPicker extends Picker {
         }
         return config;
     }
+    /**
+     * Marks the selected week the way the `weekSelect` plugin does.
+     */
+    redrawSelection() {
+        var _a, _b;
+        const days = (_a = this.flatpickr.days) === null || _a === void 0 ? void 0 : _a.childNodes;
+        const selectedIndex = (_b = this.flatpickr.selectedDateElem) === null || _b === void 0 ? void 0 : _b.$i;
+        // `clear()` leaves `selectedDateElem` on the old cell.
+        const hasSelection = this.flatpickr.selectedDates.length > 0;
+        if (this.nativePicker ||
+            !days ||
+            !hasSelection ||
+            selectedIndex === undefined) {
+            return;
+        }
+        const weekStart = DAYS_PER_WEEK * Math.floor(selectedIndex / DAYS_PER_WEEK);
+        for (let i = weekStart; i < weekStart + DAYS_PER_WEEK; i++) {
+            days[i].classList.add('week', 'selected');
+        }
+    }
 }

package/dist/collection/components/date-picker/pickers/year-picker.js

@@ -67,8 +67,32 @@ export class YearPicker extends Picker {
     }
     async handleClose(selectedDates) {
         await super.handleClose(selectedDates);
+        this.redrawSelection();
+    }
+    redrawSelection() {
+        const selected = this.flatpickr.selectedDates[0];
+        if (selected) {
+            this.showYear(selected.getFullYear());
+        }
         this.selectYear(this.flatpickr.selectedDates, this.flatpickr.input.value);
     }
+    /**
+     * Moves the year window, which only the arrows move otherwise, so that
+     * `year` has a cell to highlight.
+     * @param year
+     */
+    showYear(year) {
+        var _a, _b;
+        const first = (_a = this.years[0]) === null || _a === void 0 ? void 0 : _a.year();
+        const last = (_b = this.years.at(-1)) === null || _b === void 0 ? void 0 : _b.year();
+        if (first === undefined || last === undefined) {
+            return;
+        }
+        if (year >= first && year <= last) {
+            return;
+        }
+        this.addYears(year - this.years[YEAR_INTERVAL / 2].year());
+    }
     handleReady(_, __, fp) {
         this.bootstrapYearPicker(fp);
         this.selectYear(fp.selectedDates, fp.input.value);

package/dist/collection/components/dialog/dialog.js

@@ -84,10 +84,10 @@ export class Dialog {
         this.mdcDialog.destroy();
     }
     render() {
-        return (h("div", { key: 'a9a3f26e3da86f1659487affe5a8758dca4cefb9', class: {
+        return (h("div", { key: '3e1a6defb45d3a7db6569742226cb0f6f417fb6e', class: {
                 'mdc-dialog': true,
                 'full-screen': !!this.fullscreen,
-            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: '792d35f0b5c497bac447327c2aafdd74e3b8c0ee', hidden: true, id: "initialFocusEl" }), h("div", { key: 'a4331ee65f7ff242ee2af707281a1051f307a218', class: "mdc-dialog__container" }, h("div", { key: 'c4e1ef542e1078fe65bb6c299a890da6242c154e', class: "mdc-dialog__surface" }, h("input", { key: '626470072fbed50ef98ab29e32ad0d219018cb51', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: '8399fa33d6b6d342848f7051fc92b4bde9b02f8e', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: '94f1d56d78fd5e5f0cc483c622b1138ed7148a2e' })), this.renderFooter())), h("div", { key: '22a1c2516049f8a8d444fbb60c0009cb96dffe9f', class: "mdc-dialog__scrim" })));
+            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: '4a5f5cbd39cefc237854e87a3bd26c9a371d0703', hidden: true, id: "initialFocusEl" }), h("div", { key: 'cea96e7efebe5f92b65c36f9e9ff4b4814cf6245', class: "mdc-dialog__container" }, h("div", { key: '2002f463e8289d8e11974818e8339cd8506d9172', class: "mdc-dialog__surface" }, h("input", { key: 'ff0f029260dcd53f59f0ac7882b917e7fdff41a1', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: 'd2f23c68ef6fa558c7d40b7a729173bfc6c1e120', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: '7b990ba91a610dad210627c1e6075b4db6ecd0c8' })), this.renderFooter())), h("div", { key: 'b878b47719571bac33c5f8f04e6271d11fd7bf69', class: "mdc-dialog__scrim" })));
     }
     watchHandler(newValue, oldValue) {
         if (oldValue === newValue || !this.mdcDialog) {

package/dist/collection/components/dock/dock.js

@@ -94,11 +94,11 @@ export class Dock {
         this.resizeObserver.disconnect();
     }
     render() {
-        return (h(Host, { key: '5f27f5d6ed669bdee199afc2dfe151495a67b05b', class: {
+        return (h(Host, { key: 'a2389035294a8e9faaf4de889fef82c3775dd3aa', class: {
                 dock: true,
                 expanded: this.expanded,
                 'has-mobile-layout': this.useMobileLayout,
-            } }, h("nav", { key: '9f7befc311318c7ff2486714adc0a6ec0e6b4cea', "aria-label": this.accessibleLabel }, this.dockItems.map(this.renderDockItem), this.renderSeparator(), this.dockFooterItems.map(this.renderDockItem)), this.renderExpandShrinkToggle()));
+            } }, h("nav", { key: '7a5ef68e234cb744eaef4ee59a3d9cfed70af4aa', "aria-label": this.accessibleLabel }, this.dockItems.map(this.renderDockItem), this.renderSeparator(), this.dockFooterItems.map(this.renderDockItem)), this.renderExpandShrinkToggle()));
     }
     renderExpandShrinkToggle() {
         if (this.useMobileLayout || !this.allowResize) {

package/dist/collection/components/drag-handle/drag-handle.js

@@ -51,7 +51,7 @@ export class DragHandleComponent {
     render() {
         const tooltipLabel = translate.get('drag-handle.drag-to-reorder', this.language);
         const ariaLabel = translate.get('drag-handle.drag-handle', this.language);
-        return (h(Host, { key: '2656fb1a09ca8bd8db8fe5849b4d5aa231d13e6e' }, h("button", { key: 'f2239eca3b4a11dd09f551d53c08aec30e780904', "data-drag-handle": true, type: "button", class: "limel-drag-handle", tabindex: -1, "aria-label": ariaLabel, id: this.dragHandleId, onClick: this.handleClick }, h("div", { key: '3c47f3612efa43a3e020f432e88b71524b15190b', class: "drag-icon", role: "presentation", "aria-hidden": "true" }, h("div", { key: "1" }), h("div", { key: "2" }), h("div", { key: "3" }), h("div", { key: "4" }), h("div", { key: "5" }), h("div", { key: "6" })), h("limel-tooltip", { key: 'e2706e1f4757b75ac8bce97d549e6e81ee53ecca', openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
+        return (h(Host, { key: '2f2da901278a10d69a28e8a8054b5dd95a449fc4' }, h("button", { key: 'a0515c4b75a5442b9dab1f93d1b00b24506e2996', "data-drag-handle": true, type: "button", class: "limel-drag-handle", tabindex: -1, "aria-label": ariaLabel, id: this.dragHandleId, onClick: this.handleClick }, h("div", { key: '493353f7fdd9f7fd9e0ae3f805e041072e58dee0', class: "drag-icon", role: "presentation", "aria-hidden": "true" }, h("div", { key: "1" }), h("div", { key: "2" }), h("div", { key: "3" }), h("div", { key: "4" }), h("div", { key: "5" }), h("div", { key: "6" })), h("limel-tooltip", { key: '93ce003748dba6771876e8b83e4ba5cb021c8a5f', openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
     }
     static get is() { return "limel-drag-handle"; }
     static get originalStyleUrls() {

package/dist/collection/components/email-viewer/email-viewer.js

@@ -75,7 +75,7 @@ export class EmailViewer {
         }
     }
     render() {
-        return (h(Host, { key: '85990dff64a6fc62c1c3d4ca58c188ceee3aa639' }, h("div", { key: '6e1ab5f5210789e68256cd8bc2c50df7de3fe9e1', class: "email", part: "email" }, this.renderHeaders(), this.renderRemoteImageBanner(), h("section", { key: '523d7d19938312506bdfd735fde3251dfc408c75' }, this.renderAttachments(), this.renderBody()))));
+        return (h(Host, { key: 'f3190e64d1a5334ff9e172e4f47eaafb8c854851' }, h("div", { key: 'ad8cb6e436784d255f357fe2393a682998371cd1', class: "email", part: "email" }, this.renderHeaders(), this.renderRemoteImageBanner(), h("section", { key: '42adf034350835f0e91888bb99123fbcd79e698a' }, this.renderAttachments(), this.renderBody()))));
     }
     renderHeaders() {
         const headerFields = [

package/dist/collection/components/file/file.js

@@ -154,7 +154,7 @@ export class File {
         this.resizingFile = undefined;
     }
     render() {
-        return (h(Host, { key: 'fde08c4a882443f122caf923cd5d4eae1603342d', "aria-busy": this.isBusy ? 'true' : 'false' }, h("limel-file-dropzone", { key: 'bbafe0b47742c71cca1dd78a380072ceb6646c37', disabled: this.disabled || this.readonly || !!this.displayedFile, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip(), this.renderSpinner()));
+        return (h(Host, { key: '00d4776052cbffc0066deba3a1c162d49d9c4e02', "aria-busy": this.isBusy ? 'true' : 'false' }, h("limel-file-dropzone", { key: 'a3e031aba6715b825fde01d91a9d2667f300a606', disabled: this.disabled || this.readonly || !!this.displayedFile, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip(), this.renderSpinner()));
     }
     get statusText() {
         var _a, _b, _c;

package/dist/collection/components/file-dropzone/file-dropzone.js

@@ -90,7 +90,7 @@ export class FileDropzone {
         };
     }
     render() {
-        return (h(Host, { key: '0a8c13ab0d5f60152669965bb43981cc1f6c430f', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, h("slot", { key: '740de02e64e7cebca2cd67d10c148d9761ac85bb' }), this.renderOnDragLayout()));
+        return (h(Host, { key: '15f9995e7746e8019c3f0d9cd6590bb38bd61e84', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, h("slot", { key: 'f55bf7a4630b1c72fb7839db63cdb9df1c4d5b60' }), this.renderOnDragLayout()));
     }
     static get is() { return "limel-file-dropzone"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/file-input/file-input.js

@@ -72,7 +72,7 @@ export class FileInput {
         this.fileInput = this.element.shadowRoot.getElementById(this.fileInputId);
     }
     render() {
-        return (h(Host, { key: '1bedc75973c5a12ff099607e35991153811f3166', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("input", { key: '583506fe7cbc9319bece58aefe5d793fc563dbc2', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), h("slot", { key: 'fef95ae5ffdc6a4cc00be7f6e021ea39ed253412' })));
+        return (h(Host, { key: 'fb2eee15dce908e1206d6021b59779b75568a1cd', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("input", { key: '12071d39f562b4d8fa058aee903393297501ece5', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), h("slot", { key: '0569c37440177e0b191a9885cf035be5a0a50881' })));
     }
     handleKeyDown(event) {
         if (['Tab', 'Backspace', 'Enter'].includes(event.code)) {

package/dist/collection/components/flex-container/flex-container.js

@@ -31,7 +31,7 @@ export class FlexContainer {
         console.warn('limel-flex-container is deprecated, please use CSS instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox');
     }
     render() {
-        return h("slot", { key: 'f5baf3c618a69e1beaaf8574af3388e88306f5bf' });
+        return h("slot", { key: 'd73b0afc5cbdb3b9754360c1c638d24578cd8331' });
     }
     static get is() { return "limel-flex-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/form/fields/schema-field.js

@@ -9,7 +9,9 @@ import { getHelpComponent } from "../help";
 import { TimePicker } from "../widgets/time-picker";
 import { isIntegerType, isNumberType } from "../schema";
 import { RowLayoutContext } from "../row/row-context";
+import { listenForInvalidInput } from "../invalid-input";
 const { fields: defaultFields } = getDefaultRegistry();
+const DATE_FORMATS = new Set(['date', 'date-time', 'time']);
 const BaseSchemaField = defaultFields.SchemaField;
 /**
  * If given a value and schema, check if the value should be translated
@@ -88,10 +90,23 @@ export class SchemaField extends React.Component {
         this.state = {
             modified: false,
         };
+        // The date picker never emits text it rejects, so the value stays valid
+        // while the field shows an error.
+        this.reportInvalidInput = (message) => {
+            var _a, _b;
+            const { registry, fieldPathId } = this.props;
+            if (!fieldPathId) {
+                return;
+            }
+            (_b = (_a = registry.formContext) === null || _a === void 0 ? void 0 : _a.setInvalidInput) === null || _b === void 0 ? void 0 : _b.call(_a, fieldPathId.path, message);
+        };
         this.handleChange = this.handleChange.bind(this);
         this.handleCustomComponentChange =
             this.handleCustomComponentChange.bind(this);
     }
+    componentWillUnmount() {
+        this.reportInvalidInput(null);
+    }
     isInvalid() {
         var _a;
         const { modified } = this.state;
@@ -166,7 +181,7 @@ export class SchemaField extends React.Component {
                     name: name,
                     schemaPath: (_a = fieldPathId === null || fieldPathId === void 0 ? void 0 : fieldPathId.path) === null || _a === void 0 ? void 0 : _a.map(String),
                 };
-                return () => { };
+                return listenForInvalidInput(element, this.reportInvalidInput);
             } });
     }
     renderCustomComponent(props) {
@@ -191,6 +206,9 @@ export class SchemaField extends React.Component {
         if (this.props.schema.format === 'time') {
             fieldProps.uiSchema = Object.assign({ 'ui:widget': TimePicker }, fieldProps.uiSchema);
         }
+        if (DATE_FORMATS.has(this.props.schema.format)) {
+            fieldProps.uiSchema = Object.assign(Object.assign({}, fieldProps.uiSchema), { 'ui:onInvalidInput': this.reportInvalidInput });
+        }
         // Our text widget renders a native `<input type="number">` for numeric
         // schemas. `@rjsf/core` otherwise rewrites the value to the locale's
         // decimal separator, which such an input cannot display.

package/dist/collection/components/form/form.js

@@ -98,9 +98,12 @@ export class Form {
          */
         this.includeDefaults = true;
         this.isValid = true;
+        // Their value is still the last valid one, so the schema can't tell.
+        this.invalidInputErrors = new Map();
         this.initialized = false;
         this.handleChange = this.handleChange.bind(this);
         this.getCustomErrorMessages = this.getCustomErrorMessages.bind(this);
+        this.setInvalidInput = this.setInvalidInput.bind(this);
     }
     connectedCallback() {
         this.initialize();
@@ -158,7 +161,7 @@ export class Form {
         this.initialized = false;
     }
     render() {
-        return h("div", { key: 'a50619f8a46a7e3b3ca5ade698141f22cfdd704f', class: "root" });
+        return h("div", { key: 'c6f8c1df8165c5ac23b133a369ebb0f58563d74f', class: "root" });
     }
     reactRender() {
         if (!this.root) {
@@ -192,6 +195,7 @@ export class Form {
                 rootValue: this.value,
                 propsFactory: this.propsFactory,
                 revealErrors: this.revealErrors,
+                setInvalidInput: this.setInvalidInput,
             },
             fields: {
                 SchemaField: CustomSchemaField,
@@ -273,12 +277,35 @@ export class Form {
         const contentId = (fingerprint >>> 0).toString(36);
         return Object.assign(Object.assign({}, schema), { $id: $id ? `${$id}-${contentId}` : contentId });
     }
+    setInvalidInput(path, message) {
+        var _a;
+        const property = `.${path.join('.')}`;
+        const current = this.invalidInputErrors.get(property);
+        if (((_a = current === null || current === void 0 ? void 0 : current.message) !== null && _a !== void 0 ? _a : null) === message) {
+            return;
+        }
+        if (message === null) {
+            this.invalidInputErrors.delete(property);
+        }
+        else {
+            this.invalidInputErrors.set(property, {
+                name: 'invalidInput',
+                property: property,
+                message: message,
+                schemaPath: '',
+            });
+        }
+        this.validateFormData();
+    }
     hasExtraErrors() {
         return !!this.errors && Object.keys(this.errors).length > 0;
     }
     emitValidationStatus(errors) {
-        const valid = (!errors || errors.length === 0) && !this.hasExtraErrors();
-        const formErrors = this.mapErrors(errors !== null && errors !== void 0 ? errors : []);
+        const formErrors = [
+            ...this.mapErrors(errors !== null && errors !== void 0 ? errors : []),
+            ...this.invalidInputErrors.values(),
+        ];
+        const valid = formErrors.length === 0 && !this.hasExtraErrors();
         const status = { valid: valid, errors: formErrors };
         if (this.isValid !== valid || !valid) {
             this.validate.emit(status);

package/dist/collection/components/form/form.test-schemas.js

@@ -289,6 +289,17 @@ export const dateSchema = {
         birthday: { type: 'string', title: 'Birthday', format: 'date' },
     },
 };
+// Its component renders a `limel-date-picker` in its shadow root.
+export const wrappedDateSchema = {
+    type: 'object',
+    properties: {
+        birthday: {
+            type: 'string',
+            title: 'Birthday',
+            lime: { component: { name: 'test-wrapped-date-picker' } },
+        },
+    },
+};
 export const integerSchema = {
     type: 'object',
     properties: {

package/dist/collection/components/form/invalid-input.js

@@ -0,0 +1,14 @@
+/**
+ * Listens for `invalidInput` from the element or from inside it, such as
+ * a `limel-date-picker` in a custom component's shadow root.
+ * @param element - the field's element
+ * @param report - called with each message
+ * @returns a function that stops listening
+ */
+export function listenForInvalidInput(element, report) {
+    const listener = (event) => {
+        report(event.detail);
+    };
+    element.addEventListener('invalidInput', listener);
+    return () => element.removeEventListener('invalidInput', listener);
+}

package/dist/collection/components/form/widgets/date-picker.js

@@ -13,6 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import moment from "moment/moment";
 import React from "react";
 import { LimeElementsWidgetAdapter } from "../adapters";
+import { listenForInvalidInput } from "../invalid-input";
 export class DatePicker extends React.Component {
     constructor(props) {
         super(props);
@@ -20,6 +21,7 @@ export class DatePicker extends React.Component {
         this.state = {
             modified: false,
         };
+        this.watchInvalidInput = (element) => listenForInvalidInput(element, (message) => { var _a, _b; return (_b = (_a = this.props.options) === null || _a === void 0 ? void 0 : _a.onInvalidInput) === null || _b === void 0 ? void 0 : _b.call(_a, message); });
         this.handleChange = this.handleChange.bind(this);
     }
     render() {
@@ -32,7 +34,7 @@ export class DatePicker extends React.Component {
                 change: this.handleChange,
             },
             widgetProps: props,
-            extraProps: Object.assign({ type: type }, (_b = (_a = props.schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.props),
+            extraProps: Object.assign(Object.assign({ type: type }, (_b = (_a = props.schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.props), { ref: this.watchInvalidInput }),
         });
     }
     getValue() {

package/dist/collection/components/form-header/form-header.js

@@ -29,7 +29,7 @@ export class FormHeader {
         this.headingLevel = 1;
     }
     render() {
-        return (h(Host, { key: '832fda595a6e861d113ad64890b5ba0f4958e830' }, this.renderHeading(), this.renderHelp(), this.renderDescription()));
+        return (h(Host, { key: '64e0934e418bf6fff83f140b02faf7f6cb8f4f0f' }, this.renderHeading(), this.renderHelp(), this.renderDescription()));
     }
     renderHeading() {
         if (!this.heading) {

package/dist/collection/components/grid/grid.js

@@ -12,7 +12,7 @@ export class Grid {
         console.warn('limel-grid is deprecated, please use CSS instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout');
     }
     render() {
-        return h("slot", { key: 'c1e2b8ee2a681748256f6a0d7cd6db7aec27872e' });
+        return h("slot", { key: 'c4db2bee4485745f79636e4a3a2f04fa603af9b8' });
     }
     static get is() { return "limel-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.js

@@ -61,7 +61,7 @@ export class Header {
         this.subheadingDivider = '·';
     }
     render() {
-        return (h(Host, { key: '25d008daf81297376579028f9116d4f78580e029' }, h("div", { key: '9bb06b9d428bcc709ef6a2cbfc5e7811b35d2c5e', class: "information" }, this.renderIcon(), h("div", { key: '417dcd90bbe18770eb25f69d3c614752571868b1', class: "headings" }, h("h1", { key: '591449da7543a5f708729bdda5ea231dfa9d4e17', class: "heading", title: this.heading }, this.heading), h("h2", { key: '8696119afe92d304fc03fa5d6b092419029bc052', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '4903a0c675afa7371943f2b007d7367649eb473a', name: "actions" }, h("slot", { key: '009934d3d4ae2ff2932754e452bfb714506f9e66' }))));
+        return (h(Host, { key: '35935910757d74259ce3a286922ee0d35aad1ec9' }, h("div", { key: 'bd95cc50ec22e4881d3254aebec9143e6bb2a634', class: "information" }, this.renderIcon(), h("div", { key: '54a84e428595f989548855559cf71172264301ba', class: "headings" }, h("h1", { key: '99ccc155b7fa5a00a63f9c2a9caa0918ef33dc13', class: "heading", title: this.heading }, this.heading), h("h2", { key: 'cc06e5bac3f36daad46d8335bb8ee80ef7bb27e0', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '2e94d276dcbe7404d4f618125763b5b1e5ff47ef', name: "actions" }, h("slot", { key: '6a5f81a642323a7c6bc8839f5ee8e3c6f11f905b' }))));
     }
     renderIcon() {
         var _a, _b, _c, _d, _e;

package/dist/collection/components/help/help-content.js

@@ -19,7 +19,7 @@ export class HelpContent {
         };
     }
     render() {
-        return (h(Host, { key: 'd0f448293f17fbd80e5c8b0b26aa32d58af1d5ac' }, h("limel-markdown", { key: 'b69b41f86e1c362c3d12c50d24c579bf9d5a434d', value: this.value }), this.renderReadMoreLink()));
+        return (h(Host, { key: '213707af11bc0757a2b50652aeaf4f8869a8dd7c' }, h("limel-markdown", { key: 'f0f0ee7a087a8705ebb7fa463bf7f0d5f1abb207', value: this.value }), this.renderReadMoreLink()));
     }
     static get is() { return "limel-help-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/help/help.js

@@ -41,9 +41,9 @@ export class HelpComponent {
         };
     }
     render() {
-        return (h(Host, { key: '9f166e16ef9ddfd552bcf9bde262ca84e4b31399' }, h("limel-popover", { key: 'f0bf20043acb1ac323fcc01e6f9d64d8481b9382', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: 'c3a62e9d9f82cc16dfb4aa39a711397b0f91def1', slot: "trigger", type: "button", onClick: this.openPopover, class: {
+        return (h(Host, { key: '0456a88ddfbe21f501bb58fd0792eaeb39ad3962' }, h("limel-popover", { key: 'db4fd15af11578c40ae6ed4e39f9931bea14d457', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: '0e530613dcf6c02e879a4a1ae52e1e24403ef30d', slot: "trigger", type: "button", onClick: this.openPopover, class: {
                 'is-open': this.isOpen,
-            } }, this.trigger), h("limel-help-content", { key: '75edc59e9c5a2557c9766165e52f6aa1b5baee49', value: this.value, readMoreLink: this.readMoreLink }))));
+            } }, this.trigger), h("limel-help-content", { key: '64d119e480cb64cbdeab156787dddc6f36e1368e', value: this.value, readMoreLink: this.readMoreLink }))));
     }
     static get is() { return "limel-help"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/helper-line/helper-line.js

@@ -50,9 +50,9 @@ export class HelperLine {
         };
     }
     render() {
-        return (h(Host, { key: 'e42ca019869a7b4b47d93c4f402bdbf3b99b37cf', tabIndex: -1, class: {
+        return (h(Host, { key: '5bc750e2c8c7bce88fd9fc6f2ec4f27133ad5ed7', tabIndex: -1, class: {
                 invalid: this.invalid,
-            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '3db5b20efaa64d9a20b6da5c711d2fb64393143a' }, this.renderHelperText(), this.renderCharacterCounter())));
+            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '7bc84f9c6ae3ac8de904c56a97497f8f427583f4' }, this.renderHelperText(), this.renderCharacterCounter())));
     }
     static get is() { return "limel-helper-line"; }
     static get originalStyleUrls() {

package/dist/collection/components/hotkey/hotkey.js

@@ -30,7 +30,7 @@ export class Hotkey {
         const parts = tokenizeHotkeyString(this.value);
         const displayParts = parts.map((part) => formatDisplayToken(part, this.isApple));
         const ariaLabel = getHotkeyAriaLabel(this.value, this.isApple);
-        return (h(Host, { key: '0cf81f7754511dce0358be8ba428e047e6bf6ab5', "aria-label": ariaLabel || undefined }, displayParts.map(({ display, isGlyph }, index) => (h("kbd", { key: `${parts[index]}-${index}`, class: isGlyph ? 'is-glyph' : undefined }, h("span", null, display))))));
+        return (h(Host, { key: 'bf8ed107c45987511194dc5b44e9c414f690f66d', "aria-label": ariaLabel || undefined }, displayParts.map(({ display, isGlyph }, index) => (h("kbd", { key: `${parts[index]}-${index}`, class: isGlyph ? 'is-glyph' : undefined }, h("span", null, display))))));
     }
     static get is() { return "limel-hotkey"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/icon.js

@@ -50,7 +50,7 @@ export class Icon {
         this.loadIcon(this.name);
     }
     render() {
-        return h("div", { key: '154a32782255d3b6870d1ea67bdf8e8906655c9a', class: "container" });
+        return h("div", { key: '4ba343ef7bc8cfb1c035c3c947388954d9218b3f', class: "container" });
     }
     updateAccessibility() {
         if (!this.internals) {

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

@@ -52,7 +52,7 @@ export class IconButton {
         if (this.host.hasAttribute('tabindex')) {
             buttonAttributes.tabindex = this.host.getAttribute('tabindex');
         }
-        return (h(Host, { key: '24e71b62ab7e2d038ecc9c8982ffad932ecf89c0', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: '435485320ca03a49d4ecce7e45d641e53ccbd107', "aria-label": this.label, disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
+        return (h(Host, { key: 'a75232fbdba624fceddf7d7846cb6a5a8b33532a', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: 'd74d4073e4e7147adfa478f699e1269fb72e1718', "aria-label": this.label, disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
     }
     renderIcon() {
         var _a, _b;

package/dist/collection/components/info-tile/info-tile.js

@@ -127,9 +127,9 @@ export class InfoTile {
             this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
         const link = this.disabled ? '#' : (_e = this.link) === null || _e === void 0 ? void 0 : _e.href;
         const rel = getRel((_f = this.link) === null || _f === void 0 ? void 0 : _f.target, (_g = this.link) === null || _g === void 0 ? void 0 : _g.rel);
-        return (h(Host, { key: '2d5b3fb9509298316af814acac20bbb1f6c22f85', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: '2ce2856cca107671b539b5b462af04c3a9536a39', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
+        return (h(Host, { key: '071f39e5edf3e116952c3a6c9b639298c90c6f4f', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: '4e13663d26cefa33182920351c08a3006bf41b75', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
                 'is-clickable': !!((_k = this.link) === null || _k === void 0 ? void 0 : _k.href) && !this.disabled,
-            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: '8cf1cdd2c841a3c30512b390748ec7af9ccaaa06', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '4b999b693dd6e882370006edfede8a54488a2873', class: "value-group" }, this.renderPrefix(), h("div", { key: '5b06443fe1171e158f78cadb11291501507e16bc', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '18c6b6dd3bdaacce430ddd4e2f7dbc65e400b3d0' })), this.renderNotification()));
+            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: '8f05aca2443b71bd1fce49ace715afbaaa440282', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '1f8b0f1e1199a9908a3613ab18a7cbfc421c58c6', class: "value-group" }, this.renderPrefix(), h("div", { key: 'b98294d9c40828fd6d5a177f5532022168b09b9b', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: 'e26ed5c63e3aa37b8c3d427487c2836e5d66b346' })), this.renderNotification()));
     }
     checkProps(propValue) {
         return propValue ? propValue + ' ' : '';

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

@@ -703,7 +703,7 @@ export class InputField {
             properties['aria-haspopup'] = 'listbox';
             properties['aria-expanded'] = String(this.suggestionsEngaged && this.isSuggestionListOpen());
         }
-        return (h(Host, { key: 'c14cb199267a0efbf6dc974e31d479be51653c91' }, h("limel-notched-outline", { key: 'd1783d42e0da20cd4224065b6cffba95be9850eb', labelId: this.inputId, labelElementId: this.labelElementId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: '67cb792d8718c2aae28ce509e931fd578d4df139', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList(), this.renderSuggestionsMessage()));
+        return (h(Host, { key: '35c8c2ce777eb327994089a5c6c9aa0dc3e32528' }, h("limel-notched-outline", { key: 'be4d77167a4ad7437c5e18dc7b9fce2c5965a6a5', labelId: this.inputId, labelElementId: this.labelElementId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: 'fa3a652d313d4561d3cf0a172e70fcc0346be764', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList(), this.renderSuggestionsMessage()));
     }
     valueWatcher(newValue) {
         if (!this.mdcTextField || this.changeWaiting) {

package/dist/collection/components/list/list.js

@@ -186,7 +186,7 @@ export class List {
             maxLinesSecondaryText = 1;
         }
         const html = this.listRenderer.render(this.items, this.config);
-        return (h(Host, { key: 'e6619c70eab882e1a9ed482098a7f1ed673c74a1', style: {
+        return (h(Host, { key: '2ff544c93286e06ac298eb1cc8fa2567c360fc7a', style: {
                 '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
             } }, html));
     }

package/dist/collection/components/list-item/list-item.js

@@ -158,9 +158,9 @@ export class ListItemComponent {
             // also keep for `menuitem` for visual state consistency
             ariaProps['aria-selected'] = this.selected ? 'true' : 'false';
         }
-        return (h(Host, Object.assign({ key: 'fc4d7eab0b57e21d39c7d4fcc5ec7678a4e9662f', role: this.getHostRole(), class: {
+        return (h(Host, Object.assign({ key: '023c6ebda746cc74c85a7430fe29f321d52409f1', role: this.getHostRole(), class: {
                 'has-primary-component': !!((_a = this.primaryComponent) === null || _a === void 0 ? void 0 : _a.name),
-            } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { key: 'bf56c25af2a5f6c0e7ed7ea7b5cd6952888efb61', class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
+            } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { key: 'b7812dba6249c1bd119524457c92f37a0f64f897', class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
     }
     /**
      * Returns a stable reference for the provided actions array to avoid

package/dist/collection/components/list-item/menu-item-meta/menu-item-meta.js

@@ -22,7 +22,7 @@ export class MenuItemMeta {
         this.showChevron = false;
     }
     render() {
-        return (h(Host, { key: '966057ee998af91916099c59398ea93742175fb5' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
+        return (h(Host, { key: 'faedb5e17e19f8a9a2b8252f1af115099ae53312' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
     }
     renderCommandText() {
         if (this.hotkey) {

package/dist/collection/components/markdown/markdown.js

@@ -170,7 +170,7 @@ export class Markdown {
         this.cleanupImageIntersectionObserver();
     }
     render() {
-        return (h(Host, { key: '847bffc9b7fa4fbec42b705d3019c635d88fb6c6' }, h("div", { key: 'cd84ef0919fc4b2b80090de836366b317e60e51a', id: "markdown", ref: (el) => (this.rootElement = el) })));
+        return (h(Host, { key: 'f51d4ce2bc5997174b764ceedafdb8bd41351945' }, h("div", { key: 'a16ca446fd14455d86417fd6d5eec9a6aa8d365b', id: "markdown", ref: (el) => (this.rootElement = el) })));
     }
     setupImageIntersectionObserver() {
         if (this.lazyLoadImages) {

package/dist/collection/components/masonry-layout/masonry-layout.js

@@ -59,7 +59,7 @@ export class MasonryLayout {
         const style = {
             height: `${this.containerHeight}rem`,
         };
-        return (h(Host, { key: '08a40d19c6457ff0d8a1da75de5b3e9379b05999', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: '736ef2dd358e6fb03daf87fe9b23d4625c5c3d64' })));
+        return (h(Host, { key: '3b80e77df259cd79e939c920cf71141237263dee', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: 'b0139c075f47c7dbea879807fecca84927c56b52' })));
     }
     setupObservers() {
         this.resizeObserver = new ResizeObserver(() => {

package/dist/collection/components/menu/menu.js

@@ -593,7 +593,7 @@ export class Menu {
         const cssProperties = this.getCssProperties();
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
         const menuSurfaceWidth = this.getMenuSurfaceWidth(cssProperties['--menu-surface-width']);
-        return (h("div", { key: '26574aeebd102eaf96a2893508537ab34d7ce6d4', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: 'fa7fa2b583684b4d83467be5004b98146e8ea71e', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: '6443fc725c1054cee3aa6bc136d3c90891c897a5', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: 'd9e4719f9c97ec82b15674305a66c6ddd6aac512', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
+        return (h("div", { key: 'f6ac70782b0ff263af1bd6a53c9747e3ce5753cf', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: 'f56b5854098853a5917fae62441f44e28155feb4', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: '123e00157c611599cd98019603f7a8e5b0084622', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '69e6e046881dacee20233fc36bde8370fd162d44', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
                 'has-grid-layout': this.gridLayout,
             } }, this.renderSearchField(), this.renderBreadcrumb(), this.renderLoader(), this.renderEmptyMessage(), this.renderMenuList()))));
     }

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

@@ -88,7 +88,7 @@ export class MenuList {
             iconSize: this.iconSize,
         };
         const html = this.MenuListRenderer.render(this.items, this.config);
-        return h("div", { key: '8cb1b8b5fc263086d4dbc83d7da2ae0b45c58d1d', class: "mdc-menu mdc-menu-surface" }, html);
+        return h("div", { key: '3e3164ce24bddffb3369b133e7ceb0b00bcec67a', class: "mdc-menu mdc-menu-surface" }, html);
     }
     itemsChanged() {
         setTimeout(() => {