@limetech/lime-elements 40.22.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/filled-defaults.js

@@ -0,0 +1,132 @@
+import { isEmpty, isEqual, isPlainObject } from "lodash-es";
+/**
+ * The value without the defaults that were filled into the value the form was
+ * given, as long as they still hold their default. A default the user changed
+ * stays, and so do the defaults of what the user added, such as a list item.
+ *
+ * @param value - the value the form holds, with the defaults filled in
+ * @param filled - the value the form was given, with the defaults filled in
+ * @param given - the value the form was given
+ * @returns the value without the defaults that were filled in
+ */
+export function withoutFilledDefaults(value, filled, given) {
+    // A change can bring in objects that hold nothing, which mean nothing
+    if (isPlainObject(value)) {
+        return withoutFilledProperties(value, isPlainObject(filled) ? filled : {}, given);
+    }
+    if (Array.isArray(value)) {
+        return withoutFilledItems(value, Array.isArray(filled) ? filled : [], given);
+    }
+    return given === undefined && isEqual(value, filled) ? undefined : value;
+}
+function withoutFilledProperties(value, filled, given) {
+    const givenProperties = isPlainObject(given)
+        ? given
+        : {};
+    // In the order they were given, so a saved value keeps its key order
+    const keys = new Set([
+        ...Object.keys(givenProperties),
+        ...Object.keys(value),
+    ]);
+    const result = {};
+    for (const key of keys) {
+        if (!Object.hasOwn(value, key)) {
+            continue;
+        }
+        const kept = withoutFilledDefaults(value[key], filled[key], givenProperties[key]);
+        if (kept !== undefined) {
+            result[key] = kept;
+        }
+    }
+    return isEmpty(result) && given == null ? given : result;
+}
+// Items are paired with the ones the form was given by content, so a removed
+// or moved item does not shift the others onto the defaults of their
+// neighbors. An item that no longer equals any of them is paired with the one
+// it has the most in common with, so an edited item still loses its defaults
+function withoutFilledItems(items, filled, given) {
+    // A list that was not given is a default as a whole: once the user
+    // changes it, it is the user's
+    if (!Array.isArray(given)) {
+        return isEqual(items, filled) ? given : items;
+    }
+    const givenItems = given;
+    const matches = pairItems(items, filled);
+    const result = [];
+    for (const [index, item] of items.entries()) {
+        const match = matches.get(index);
+        if (match === undefined) {
+            result.push(item);
+            continue;
+        }
+        const kept = withoutFilledDefaults(item, filled[match], givenItems[match]);
+        if (kept !== undefined) {
+            result.push(kept);
+        }
+    }
+    return result;
+}
+function pairItems(items, filled) {
+    const matches = new Map();
+    const unmatched = new Set(filled.keys());
+    const pair = (index, match) => {
+        matches.set(index, match);
+        unmatched.delete(match);
+    };
+    for (const [index, item] of items.entries()) {
+        if (unmatched.has(index) && isEqual(item, filled[index])) {
+            pair(index, index);
+        }
+    }
+    for (const [index, item] of items.entries()) {
+        if (matches.has(index)) {
+            continue;
+        }
+        const same = [...unmatched].find((i) => isEqual(item, filled[i]));
+        if (same !== undefined) {
+            pair(index, same);
+        }
+    }
+    for (const [index, item] of items.entries()) {
+        if (matches.has(index)) {
+            continue;
+        }
+        const closest = findClosest(item, filled, unmatched);
+        if (closest !== undefined) {
+            pair(index, closest);
+        }
+    }
+    return matches;
+}
+// The one item that shares the most equal properties, if it shares any at
+// all. When several share as many there is no telling which the item was, and
+// it is left as it is, since a kept default means the same as a missing one
+// while a lost value does not
+function findClosest(item, filled, candidates) {
+    if (!isPlainObject(item)) {
+        return undefined;
+    }
+    let closest;
+    let best = 0;
+    let isTied = false;
+    for (const candidate of candidates) {
+        const score = sharedProperties(item, filled[candidate]);
+        if (score === best) {
+            isTied = true;
+            continue;
+        }
+        if (score < best) {
+            continue;
+        }
+        best = score;
+        closest = candidate;
+        isTied = false;
+    }
+    return isTied ? undefined : closest;
+}
+function sharedProperties(item, other) {
+    if (!isPlainObject(other)) {
+        return 0;
+    }
+    return Object.entries(item).filter(([key, value]) => isEqual(value, other[key])).length;
+}

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

@@ -14,6 +14,7 @@ import { h, } from "@stencil/core";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import JSONSchemaForm from "@rjsf/core";
+import { getDefaultFormState, } from "@rjsf/utils";
 import { isHeadingLevel } from "../../util/heading-level";
 import { ArrayFieldTemplate, ArrayFieldItemTemplate, FieldTemplate, ObjectFieldTemplate, } from "./templates";
 import { SchemaField as CustomSchemaField } from "./fields/schema-field";
@@ -23,7 +24,17 @@ import { widgets } from "./widgets";
 import { rjsfValidator } from "./validator";
 import { isEqual, mapValues } from "lodash-es";
 import { showField, stopShowingField } from "./show-field";
+import { withoutFilledDefaults } from "./filled-defaults";
 import { HeadingLevelContext } from "./templates/heading-level";
+// `@rjsf/core` v6 treats a `const` inside `oneOf`/`anyOf` as a default and
+// auto-selects the first option, so an optional enum can never be left empty
+// (clearing it just gets repopulated on the next render). `skipOneOf` keeps this
+// off for enums while still applying genuine `default` values, matching the
+// pre-v6 behavior.
+const FILL_DEFAULTS = {
+    constAsDefaults: 'skipOneOf',
+    requiredBooleanDefault: 'skip',
+};
 /**
  * @exampleComponent limel-example-form
  * @exampleComponent limel-example-nested-form
@@ -44,6 +55,7 @@ import { HeadingLevelContext } from "./templates/heading-level";
  * @exampleComponent limel-example-code-editor-form
  * @exampleComponent limel-example-form-highlighted-field
  * @exampleComponent limel-example-form-heading-level
+ * @exampleComponent limel-example-form-include-defaults
  */
 export class Form {
     constructor() {
@@ -73,17 +85,41 @@ export class Form {
          * which keeps untouched required-empty fields silent.
          */
         this.revealErrors = false;
+        /**
+         * Set to `false` to leave the defaults of the schema out of the value,
+         * so that it stays as it was given until the user changes something. The
+         * form still shows the defaults. A default the user changes is in the
+         * value from then on, and so are the defaults that a change brings in,
+         * such as those of a new list item or of fields that depend on the
+         * changed one. Pass the value the form emits back in as `value`.
+         * The form validates what it shows, defaults included. When the user
+         * changes everything back, the value is what the form was given, also
+         * when that is `null` or `undefined`.
+         */
+        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();
     }
     componentWillLoad() {
+        this.currentValue = this.value;
         this.warnIfHeadingLevelIsInvalid();
     }
+    handleValueChange() {
+        // The host usually hands back the value the form emitted, as a new
+        // object, which is not a new value to leave the defaults out of
+        if (!isEqual(this.value, this.currentValue)) {
+            this.givenValue = undefined;
+        }
+        this.currentValue = this.value;
+    }
     componentDidLoad() {
         this.initialize();
         this.showHighlightedField();
@@ -125,7 +161,7 @@ export class Form {
         this.initialized = false;
     }
     render() {
-        return h("div", { key: '549ba8cd825aadedc4ec9e696f6d03bee028cb89', class: "root" });
+        return h("div", { key: 'c6f8c1df8165c5ac23b133a369ebb0f58563d74f', class: "root" });
     }
     reactRender() {
         if (!this.root) {
@@ -138,21 +174,12 @@ export class Form {
                 : 1,
         }, React.createElement(JSONSchemaForm, {
             schema: this.prepareSchema(this.schema),
-            formData: this.value,
+            formData: this.currentValue,
             onChange: this.handleChange,
             widgets: widgets,
             validator: rjsfValidator,
             liveValidate: 'onChange',
-            // `@rjsf/core` v6 treats a `const` inside `oneOf`/`anyOf`
-            // as a default and auto-selects the first option, so an
-            // optional enum can never be left empty (clearing it just
-            // gets repopulated on the next render). `skipOneOf` keeps
-            // this off for enums while still applying genuine
-            // `default` values, matching the pre-v6 behavior.
-            experimental_defaultFormStateBehavior: {
-                constAsDefaults: 'skipOneOf',
-                requiredBooleanDefault: 'skip',
-            },
+            experimental_defaultFormStateBehavior: FILL_DEFAULTS,
             showErrorList: false,
             extraErrors: this.getExtraErrors(this.errors),
             templates: {
@@ -168,6 +195,7 @@ export class Form {
                 rootValue: this.value,
                 propsFactory: this.propsFactory,
                 revealErrors: this.revealErrors,
+                setInvalidInput: this.setInvalidInput,
             },
             fields: {
                 SchemaField: CustomSchemaField,
@@ -186,11 +214,42 @@ export class Form {
         return this.host.shadowRoot.querySelector('.root');
     }
     handleChange(event) {
-        this.change.emit(event.formData);
+        if (this.includeDefaults) {
+            this.currentValue = event.formData;
+            this.change.emit(event.formData);
+            return;
+        }
+        const { given, filled } = this.getGivenValue();
+        this.givenValue.held = event.formData;
+        const value = withoutFilledDefaults(event.formData, filled, given);
+        if (isEqual(value, this.currentValue)) {
+            // What the form holds changed, even though the value did not
+            this.emitValidationStatus(event.errors);
+            return;
+        }
+        this.currentValue = value;
+        this.change.emit(this.currentValue);
     }
-    validateFormData() {
+    getGivenValue() {
         var _a;
-        const { errors } = rjsfValidator.validateFormData((_a = this.value) !== null && _a !== void 0 ? _a : {}, this.prepareSchema(this.schema));
+        const schema = this.prepareSchema(this.schema);
+        if (((_a = this.givenValue) === null || _a === void 0 ? void 0 : _a.schemaId) !== schema.$id) {
+            const filled = getDefaultFormState(rjsfValidator, schema, this.currentValue, schema, false, FILL_DEFAULTS);
+            this.givenValue = {
+                schemaId: schema.$id,
+                given: this.currentValue,
+                filled,
+                held: filled,
+            };
+        }
+        return this.givenValue;
+    }
+    validateFormData() {
+        // With the defaults left out of the value, the form holds more than it
+        const value = this.includeDefaults
+            ? this.value
+            : this.getGivenValue().held;
+        const { errors } = rjsfValidator.validateFormData(value !== null && value !== void 0 ? value : {}, this.prepareSchema(this.schema));
         this.emitValidationStatus(errors);
     }
     /**
@@ -218,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);
@@ -465,6 +547,26 @@ export class Form {
                 "attribute": "reveal-errors",
                 "defaultValue": "false"
             },
+            "includeDefaults": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `false` to leave the defaults of the schema out of the value,\nso that it stays as it was given until the user changes something. The\nform still shows the defaults. A default the user changes is in the\nvalue from then on, and so are the defaults that a change brings in,\nsuch as those of a new list item or of fields that depend on the\nchanged one. Pass the value the form emits back in as `value`.\nThe form validates what it shows, defaults included. When the user\nchanges everything back, the value is what the form was given, also\nwhen that is `null` or `undefined`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "include-defaults",
+                "defaultValue": "true"
+            },
             "highlightedField": {
                 "type": "unknown",
                 "mutable": false,
@@ -535,6 +637,9 @@ export class Form {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
                 "propName": "headingLevel",
                 "methodName": "handleHeadingLevelChange"
             }, {