@limetech/lime-elements 40.23.0 → 40.25.0

package/dist/esm/limel-drag-handle_2.entry.js

@@ -1,6 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-BU9IJqli.js';
-import { t as translations } from './translations-D9ZGrMhe.js';
-import './language-VamkUr90.js';
+import { r as registerInstance, h, H as Host } from './index-D3SUrFhp.js';
+import { t as translations } from './translations--i932i_D.js';
 
 const dragHandleCss = () => `@charset "UTF-8";limel-drag-handle{display:inline-flex;align-items:center;justify-content:center}button.limel-drag-handle{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit}button.limel-drag-handle:focus{outline:none}button.limel-drag-handle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.limel-drag-handle{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}button.limel-drag-handle:hover,button.limel-drag-handle:focus,button.limel-drag-handle:focus-visible{will-change:color, background-color, box-shadow, transform}button.limel-drag-handle:hover,button.limel-drag-handle:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-primary);background-color:transparent}button.limel-drag-handle:hover{box-shadow:var(--button-shadow-hovered)}button.limel-drag-handle:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.limel-drag-handle:hover,button.limel-drag-handle:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.limel-drag-handle{touch-action:none;cursor:grab}button.limel-drag-handle:active{cursor:grabbing}button.limel-drag-handle:active,button.limel-drag-handle:hover{box-shadow:none !important}button.limel-drag-handle{display:inline-flex;align-items:center;justify-content:center;border-radius:0.4rem;padding:0.5rem;max-height:2.25rem;max-width:2.25rem;color:rgb(var(--contrast-900))}button.limel-drag-handle .drag-icon{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.2rem}limel-drag-handle[drag-direction=horizontal] button.limel-drag-handle .drag-icon{grid-template-columns:1fr 1fr}button.limel-drag-handle .drag-icon div{transition:transform 0.2s ease, background-color 0.2s ease;height:0.125rem;width:0.125rem;border-radius:1rem;background-color:currentColor;transform:scale(1)}.is-being-dragged button.limel-drag-handle .drag-icon div,button.limel-drag-handle:active .drag-icon div,button.limel-drag-handle:focus .drag-icon div,button.limel-drag-handle:hover .drag-icon div,button.limel-drag-handle:focus-visible .drag-icon div{background-color:var(--mdc-theme-primary);transform:scale(1.5)}`;
 
@@ -32,7 +31,7 @@ const DragHandleComponent = class {
     render() {
         const tooltipLabel = translations.get('drag-handle.drag-to-reorder', this.language);
         const ariaLabel = translations.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 }))));
     }
 };
 DragHandleComponent.style = dragHandleCss();
@@ -100,12 +99,12 @@ const Scroller = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '78f61e7088a1810df15e343a8efe7e5b9600ed40' }, h("div", { key: 'fab873acfcd0635b23321c97724f5d43dffdac57', class: {
+        return (h(Host, { key: '1545394989338cff0a3d338364cd8379af2f7ce7' }, h("div", { key: '1ed02c23e9d17850828306f203a6cabbd8b0796d', class: {
                 scroller: true,
                 [this.orientation]: true,
                 'can-scroll-to-start': this.canScrollToStart,
                 'can-scroll-to-end': this.canScrollToEnd,
-            } }, h("div", { key: '660a1d2df42aa6087065b1ace5d538ec64e59d6a', class: "scroll-area", ref: (element) => (this.scrollArea = element), onScroll: this.updateScrollability, onFocusin: this.revealFocusedItem }, h("div", { key: '9ec447c273092f67a645676f0c5f34e6d08c128f', class: "scroll-content", ref: (element) => (this.scrollContent = element) }, h("slot", { key: '67385c7bd003d7062b045250afedc0ca21f5e5f8', ref: (element) => (this.slotElement = element) }))), this.renderEdge('start'), this.renderEdge('end'))));
+            } }, h("div", { key: '4297b483a05b4636f4e1a8e571145c6489117ce0', class: "scroll-area", ref: (element) => (this.scrollArea = element), onScroll: this.updateScrollability, onFocusin: this.revealFocusedItem }, h("div", { key: '61e55181e43394d7a9aef2ddee0269295d845244', class: "scroll-content", ref: (element) => (this.scrollContent = element) }, h("slot", { key: 'da3b7bc2ece87c0d6b6c1007b90bf6a55b123ad2', ref: (element) => (this.slotElement = element) }))), this.renderEdge('start'), this.renderEdge('end'))));
     }
     renderEdge(edge) {
         return [

package/dist/esm/limel-dynamic-label.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BU9IJqli.js';
+import { r as registerInstance, h } from './index-D3SUrFhp.js';
 import { g as getIconName } from './get-icon-props-CgNJbSP4.js';
 
 const dynamicLabelCss = () => `*{box-sizing:border-box;min-width:0}:host(limel-dynamic-label){--limel-dynamic-label-min-height:1.75rem;display:flex;gap:0.25rem;align-items:flex-start;border-radius:0.5rem;min-width:0}limel-icon{--limel-icon-svg-margin:0.125rem;border-radius:0.25rem;flex-shrink:0;width:var(--limel-dynamic-label-min-height);color:rgb(var(--contrast-900))}label{flex-grow:1;font-size:var(--limel-theme-default-small-font-size);line-height:normal;color:var(--limel-theme-on-surface-color);padding-top:0.375rem}`;

package/dist/esm/limel-email-viewer.entry.js

@@ -1,9 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BU9IJqli.js';
-import { t as translations } from './translations-D9ZGrMhe.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-D3SUrFhp.js';
+import { t as translations } from './translations--i932i_D.js';
 import { f as formatBytes } from './format-bytes-24yUSW40.js';
 import { a as adaptColorContrast } from './adapt-color-contrast-BQoih_t0.js';
 import { g as getIconBackgroundColorForFile, a as getIconFillColorForFile, b as getIconForFile } from './icons-Bu_YRgCL.js';
-import './language-VamkUr90.js';
 
 /**
  * Checks whether the given HTML contains any images with a `data-remote-src`
@@ -214,7 +213,7 @@ const EmailViewer = class {
         }
     }
     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/esm/limel-file-dropzone_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BU9IJqli.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-D3SUrFhp.js';
 import { c as createFileInfo, i as isTypeAccepted } from './files-CKnLqPDj.js';
 import { b as baseForOwn } from './_baseForOwn-C3COyhQS.js';
 import { i as isArrayLike } from './isArrayLike-wfLI14yj.js';
@@ -235,7 +235,7 @@ const FileDropzone = class {
         };
     }
     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()));
     }
 };
 FileDropzone.style = fileDropzoneCss();
@@ -296,7 +296,7 @@ const FileInput = class {
         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/esm/limel-file-viewer.entry.js

@@ -1,8 +1,7 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-BU9IJqli.js';
-import { t as translations } from './translations-D9ZGrMhe.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-D3SUrFhp.js';
+import { t as translations } from './translations--i932i_D.js';
 import { d as defaultSchema, u as unified, r as rehypeParse, a as rehypeSanitize, v as visit, b as rehypeStringify } from './index-CofmbCdQ.js';
-import { I as ImageTemplate } from './image.template-BGjw97m_.js';
-import './language-VamkUr90.js';
+import { I as ImageTemplate } from './image.template-Cw2q5IS7.js';
 import './_commonjsHelpers-B85MJLTf.js';
 
 /**

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

@@ -1,9 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BU9IJqli.js';
-import { t as translations } from './translations-D9ZGrMhe.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-D3SUrFhp.js';
+import { t as translations } from './translations--i932i_D.js';
 import { g as getFileBackgroundColor, a as getFileColor, b as getFileExtensionTitle, c as getFileIcon } from './file-metadata-BHzkIH4g.js';
 import { f as formatBytes } from './format-bytes-24yUSW40.js';
 import { r as resizeImage } from './image-resize-Dv2HOgWN.js';
-import './language-VamkUr90.js';
 import './icons-Bu_YRgCL.js';
 import './get-icon-props-CgNJbSP4.js';
 
@@ -120,7 +119,7 @@ const File = class {
         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/esm/limel-flatpickr-adapter.entry.js

@@ -1,10 +1,9 @@
-import { r as registerInstance, c as createEvent, h } from './index-BU9IJqli.js';
-import { t as translations } from './translations-D9ZGrMhe.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-D3SUrFhp.js';
+import { a as getPrimarySubtag, t as translations } from './translations--i932i_D.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-B85MJLTf.js';
 import './sv-DpsDSi7k.js';
 import { m as moment } from './moment-_DadZLWp.js';
 import { i as isIOSDevice, a as isAndroidDevice } from './device-B-tmXAXV.js';
-import { a as getPrimarySubtag } from './language-VamkUr90.js';
 import { e as eq } from './eq-CZ30nDJE.js';
 import { i as isArrayLike$1 } from './isArrayLike-wfLI14yj.js';
 import { i as isIndex } from './_isIndex-B--C3qwe.js';
@@ -6505,7 +6504,43 @@ 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;
@@ -7141,6 +7176,9 @@ class MonthPicker extends Picker {
     }
     async handleClose(selectedDates) {
         await super.handleClose(selectedDates);
+        this.redrawSelection();
+    }
+    redrawSelection() {
         this.selectMonth(this.flatpickr.selectedDates, this.flatpickr.input.value, this.flatpickr);
     }
     handleReady(_, __, fp) {
@@ -7257,6 +7295,9 @@ 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) {
@@ -7469,6 +7510,7 @@ function requireWeekSelect () {
 var weekSelectExports = requireWeekSelect();
 var weekSelectPlugin = /*@__PURE__*/getDefaultExportFromCjs(weekSelectExports);
 
+const DAYS_PER_WEEK = 7;
 class WeekPicker extends Picker {
     constructor(language, change, dateFormat = '[w] W GGGG') {
         super(language, change, dateFormat);
@@ -7481,6 +7523,26 @@ 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');
+        }
+    }
 }
 
 const YEAR_INTERVAL = 10;
@@ -7548,8 +7610,32 @@ 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);
@@ -7687,9 +7773,14 @@ const DatePickerCalendar = class {
                 break;
             }
         }
-        if (this.formatter) {
-            this.picker.formatter = this.formatter;
+    }
+    // `componentDidUpdate` ignores `value` while the calendar is open.
+    watchPreviewValue() {
+        var _a;
+        if (!this.isOpen) {
+            return;
         }
+        this.picker.setValue((_a = this.previewValue) !== null && _a !== void 0 ? _a : this.value);
     }
     componentDidUpdate() {
         if (!this.flatPickrCreated) {
@@ -7700,7 +7791,7 @@ const DatePickerCalendar = class {
         }
     }
     createFlatpickr() {
-        var _a, _b;
+        var _a, _b, _c;
         if (!this.inputElement) {
             // The input element is programatically set on this element
             // after its been rendered.
@@ -7710,9 +7801,21 @@ const DatePickerCalendar = class {
             ((_b = (_a = this.container).checkVisibility) === null || _b === void 0 ? void 0 : _b.call(_a)) === false) {
             return;
         }
-        this.picker.init(this.inputElement, this.container, this.value);
+        // Flatpickr focuses the input it is bound to on Escape, Shift+Tab
+        // and closing, but the proxy is hidden and can't take focus.
+        this.proxyInput.focus = () => this.inputElement.focus();
+        this.picker.init(this.proxyInput, this.container, (_c = this.previewValue) !== null && _c !== void 0 ? _c : this.value);
         this.flatPickrCreated = true;
     }
+    /**
+     * Moves focus to the selected day, else today, else the first day of
+     * the month.
+     * @returns `false` when the calendar has no day grid
+     */
+    async focusDay() {
+        var _a, _b;
+        return (_b = (_a = this.picker) === null || _a === void 0 ? void 0 : _a.focusDay()) !== null && _b !== void 0 ? _b : false;
+    }
     connectedCallback() {
         this.deferredDestroy.cancel();
     }
@@ -7723,10 +7826,15 @@ const DatePickerCalendar = class {
         });
     }
     render() {
-        return (h("div", { key: '86cbefbe9481503480ec3a2d63e333aaa206aecc', class: "container", ref: (el) => (this.container = el), style: {
+        return (h(Host, { key: 'ceea5193e673dbf06b5b39f74ebeaa4f9dfac3be' }, h("input", { key: 'bb62c924bdf96790303f5930e8e0e30b00139e35', type: "text", tabindex: -1, "aria-hidden": "true", hidden: true, ref: (el) => (this.proxyInput = el) }), h("div", { key: '6e6fd47d001c10ef107a8049f27eccd0f4721463', class: "container", ref: (el) => (this.container = el), style: {
                 '--today-label': `"${translations.get('date-picker.today', this.language)}"`,
-            } }));
+            } })));
     }
+    static get watchers() { return {
+        "previewValue": [{
+                "watchPreviewValue": 0
+            }]
+    }; }
 };
 DatePickerCalendar.style = flatpickrAdapterCss();
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BU9IJqli.js';
+import { r as registerInstance, h } from './index-D3SUrFhp.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}`;
 
@@ -26,7 +26,7 @@ const FlexContainer = class {
         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' });
     }
 };
 FlexContainer.style = flexContainerCss();

package/dist/esm/limel-form-header.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BU9IJqli.js';
+import { r as registerInstance, h, H as Host } from './index-D3SUrFhp.js';
 import { g as getHelpProps } from './help-props-DULV6dHr.js';
 import './_basePickBy-D_9Hus6l.js';
 import './hasIn-CKUl04DZ.js';
@@ -30,7 +30,7 @@ const FormHeader = class {
         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/esm/limel-form.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h as h$1, a as getElement } from './index-BU9IJqli.js';
+import { r as registerInstance, c as createEvent, h as h$1, a as getElement } from './index-D3SUrFhp.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-B85MJLTf.js';
 import { i as isHeadingLevel } from './heading-level-B3C0kDpZ.js';
 import { b as baseIteratee, g as get } from './_baseIteratee-DM5xljbg.js';
@@ -45163,6 +45163,21 @@ class LimeElementsWidgetAdapter extends React.Component {
 }
 LimeElementsWidgetAdapter.contextType = RowLayoutContext;
 
+/**
+ * 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
+ */
+function listenForInvalidInput(element, report) {
+    const listener = (event) => {
+        report(event.detail);
+    };
+    element.addEventListener('invalidInput', listener);
+    return () => element.removeEventListener('invalidInput', listener);
+}
+
 var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s)
@@ -45182,6 +45197,7 @@ 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() {
@@ -45194,7 +45210,7 @@ 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() {
@@ -45245,6 +45261,7 @@ const TimePicker = (_a) => {
 const timeStringPattern = /^\d\d:\d\d/;
 
 const { fields: defaultFields$2 } = getDefaultRegistry();
+const DATE_FORMATS = new Set(['date', 'date-time', 'time']);
 const BaseSchemaField = defaultFields$2.SchemaField;
 /**
  * If given a value and schema, check if the value should be translated
@@ -45323,10 +45340,23 @@ 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;
@@ -45401,7 +45431,7 @@ 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) {
@@ -45426,6 +45456,9 @@ 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.
@@ -46370,9 +46403,12 @@ const Form = class {
          */
         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();
@@ -46430,7 +46466,7 @@ const Form = class {
         this.initialized = false;
     }
     render() {
-        return h$1("div", { key: 'a50619f8a46a7e3b3ca5ade698141f22cfdd704f', class: "root" });
+        return h$1("div", { key: 'c6f8c1df8165c5ac23b133a369ebb0f58563d74f', class: "root" });
     }
     reactRender() {
         if (!this.root) {
@@ -46464,6 +46500,7 @@ const Form = class {
                 rootValue: this.value,
                 propsFactory: this.propsFactory,
                 revealErrors: this.revealErrors,
+                setInvalidInput: this.setInvalidInput,
             },
             fields: {
                 SchemaField: SchemaField,
@@ -46545,12 +46582,35 @@ const Form = class {
         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/esm/limel-grid.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BU9IJqli.js';
+import { r as registerInstance, h } from './index-D3SUrFhp.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%}`;
 
@@ -10,7 +10,7 @@ const Grid = class {
         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' });
     }
 };
 Grid.style = gridCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BU9IJqli.js';
+import { r as registerInstance, h, H as Host } from './index-D3SUrFhp.js';
 import { g as getIconName } from './get-icon-props-CgNJbSP4.js';
 
 const headerCss = () => `@charset "UTF-8";: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{--limel-icon-svg-margin:0.25rem;flex-shrink:0;color:var(--limel-header-icon-color, var(--header-icon-color, rgb(var(--contrast-1100))));background-color:var(--limel-header-icon-background-color, var(--header-icon-background-color, transparent));width:2.25rem;border-radius:0.56rem}.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:1rem;font-weight:500}.subheading{color:var(--header-subheading-color, rgb(var(--contrast-900)));font-size:var(--limel-theme-default-small-font-size);font-weight:400}.subheading__supporting-text{color:var(--header-supporting-text-color, var(--header-subheading-color))}.subheading__supporting-text span{margin:0 0.125rem}slot[name=actions]{flex-shrink:0}:host(limel-header.is-narrow){padding:0.125rem 0.25rem}:host(limel-header.is-narrow) .icon{--limel-icon-svg-margin:0;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}`;
@@ -13,7 +13,7 @@ const Header = class {
         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/esm/limel-help_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BU9IJqli.js';
+import { r as registerInstance, h, H as Host } from './index-D3SUrFhp.js';
 
 const helpCss = () => `@charset "UTF-8";limel-popover{display:flex;--popover-surface-width:min(calc(100vw - 4rem), 22rem)}button[slot=trigger]{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button[slot=trigger]:hover,button[slot=trigger]:focus,button[slot=trigger]:focus-visible{will-change:color, background-color, box-shadow, transform}button[slot=trigger]:hover,button[slot=trigger]:focus-visible{transform:translate3d(0, 0.01rem, 0);color:rgb(var(--color-sky-dark));background-color:var(--lime-elevated-surface-background-color)}button[slot=trigger]:hover{box-shadow:var(--button-shadow-hovered)}button[slot=trigger]:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button[slot=trigger]:hover,button[slot=trigger]:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button[slot=trigger]:focus{outline:none}button[slot=trigger]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button[slot=trigger]{box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:rgb(var(--color-sky-default));border-radius:50%;box-shadow:0 0 0 1px rgb(var(--color-sky-lighter), 0.7);width:0.875rem;height:0.875rem;font-size:0.75rem}button[slot=trigger].is-open{color:rgb(var(--color-white));background-color:rgb(var(--color-sky-default));box-shadow:var(--button-shadow-inset)}`;
 
@@ -24,9 +24,9 @@ const HelpComponent = class {
         };
     }
     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 }))));
     }
 };
 HelpComponent.style = helpCss();
@@ -45,7 +45,7 @@ const HelpContent = class {
         };
     }
     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()));
     }
 };
 HelpContent.style = limelHelpContentCss();

package/dist/esm/limel-helper-line_3.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, c as createEvent, a as getElement } from './index-BU9IJqli.js';
+import { r as registerInstance, h, H as Host, c as createEvent, a as getElement } from './index-D3SUrFhp.js';
 import { a as MDCList, s as strings } from './component-kP1jCDLp.js';
 import './ponyfill-6YuZiAPi.js';
 
@@ -32,9 +32,9 @@ const HelperLine = class {
         };
     }
     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())));
     }
 };
 HelperLine.style = helperLineCss();
@@ -323,7 +323,7 @@ const List = class {
             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));
     }
@@ -419,7 +419,7 @@ const NotchedOutline = class {
         this.hasFloatingLabel = false;
     }
     render() {
-        return (h("div", { key: 'ade07e3a9e2a63f0037f46fdbd01f866936c55ed', class: "limel-notched-outline" }, h("slot", { key: '1d7619696aa3c80b17390df8b5bc96591cb0fe36', name: "content" }), h("span", { key: 'a791e6757ff14e7bb2c2a3f833f9877922eebd51', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '623d2d85813b66a3b0a2e33bbbf3cdd51b3505e0', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: 'd5b0c6c6e7a7d5a15fc8795e3126fe3b115019ee', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
+        return (h("div", { key: '8ca3a2622aa918101d5d78f94c9d279276dbba10', class: "limel-notched-outline" }, h("slot", { key: '508f8fb8cc48ba667ad250acae46ff2f4c25ef42', name: "content" }), h("span", { key: 'a071aa9212705b001e52e055d61f1be42a10ae69', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: 'ee1602e3637cbbba489b8b5be5bf65f6352738c5', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: '1517c575f1c4299a5a2d636e0e456b24f939d418', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
     }
     renderLabel() {
         if (!this.label) {