@limetech/lime-elements 40.12.2 → 40.13.0

package/dist/collection/components/form/form.css

@@ -434,4 +434,63 @@ limel-markdown {
 }
 .rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field h1:before {
   display: none;
+}
+
+.limel-form-field--highlighted {
+  position: relative;
+}
+.limel-form-field--highlighted::after {
+  content: "";
+  position: absolute;
+  inset: -0.25rem;
+  border-radius: 0.5rem;
+  pointer-events: none;
+  animation-name: highlight-field-background, highlight-field-shadow;
+  animation-duration: 6s;
+  animation-delay: 0.1s, 0.3s;
+  animation-timing-function: ease-in-out;
+}
+@media (prefers-reduced-motion) {
+  .limel-form-field--highlighted::after {
+    animation-duration: 4s;
+    animation-delay: 0s;
+  }
+}
+
+@keyframes highlight-field-background {
+  0% {
+    background-color: transparent;
+  }
+  12.5% {
+    background-color: color-mix(in srgb, var(--lime-primary-color, var(--limel-theme-primary-color)), transparent 65%);
+  }
+  45%, 100% {
+    background-color: transparent;
+  }
+}
+@keyframes highlight-field-shadow {
+  0%, 25%, 50% {
+    box-shadow: none;
+  }
+  12.5%, 37.5% {
+    box-shadow: var(--shadow-depth-8-focused);
+  }
+  62.5%, 72.5% {
+    box-shadow: var(--shadow-depth-8-focused);
+    animation-timing-function: ease-out;
+  }
+  100% {
+    box-shadow: none;
+  }
+}
+@media (prefers-reduced-motion) {
+  @keyframes highlight-field-shadow {
+    0%, 25% {
+      box-shadow: var(--shadow-depth-8-focused);
+      animation-timing-function: ease-out;
+    }
+    100% {
+      box-shadow: none;
+    }
+  }
 }

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

@@ -20,7 +20,8 @@ import { ArrayField as CustomArrayField } from "./fields/array-field";
 import { ObjectField as CustomObjectField } from "./fields/object-field";
 import { widgets } from "./widgets";
 import { rjsfValidator } from "./validator";
-import { mapValues } from "lodash-es";
+import { isEqual, mapValues } from "lodash-es";
+import { showField } from "./show-field";
 /**
  * @exampleComponent limel-example-form
  * @exampleComponent limel-example-nested-form
@@ -38,6 +39,7 @@ import { mapValues } from "lodash-es";
  * @exampleComponent limel-example-form-row-layout
  * @exampleComponent limel-example-builtin-field-types-form
  * @exampleComponent limel-example-code-editor-form
+ * @exampleComponent limel-example-form-highlighted-field
  */
 export class Form {
     constructor() {
@@ -66,6 +68,13 @@ export class Form {
     }
     componentDidLoad() {
         this.initialize();
+        this.showHighlightedField();
+    }
+    handleHighlightedFieldChange(newPath, oldPath) {
+        // A host that renders again passes an equal path in a new array.
+        if (!isEqual(newPath, oldPath)) {
+            this.showHighlightedField();
+        }
     }
     initialize() {
         if (this.initialized || !this.host.shadowRoot.querySelector('.root')) {
@@ -87,7 +96,7 @@ export class Form {
         this.initialized = false;
     }
     render() {
-        return h("div", { key: '9c5db05ffcc594473a3ca7b2e3962f1659d3601d', class: "root" });
+        return h("div", { key: 'ffbfb1d5d0377c01a29740b7a08fdfb3532e470f', class: "root" });
     }
     reactRender() {
         if (!this.root) {
@@ -134,6 +143,13 @@ export class Form {
             },
         }, []));
     }
+    showHighlightedField() {
+        if (!this.highlightedField) {
+            return;
+        }
+        const root = this.host.shadowRoot.querySelector('.root');
+        void showField(root, this.highlightedField);
+    }
     handleChange(event) {
         this.change.emit(event.formData);
     }
@@ -386,6 +402,31 @@ export class Form {
                 "reflect": false,
                 "attribute": "reveal-errors",
                 "defaultValue": "false"
+            },
+            "highlightedField": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<string | number>",
+                    "resolved": "(string | number)[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "beta",
+                            "text": undefined
+                        }],
+                    "text": "The path in the value of a field to take the user to, such as\n`['heroes', 2, 'name']`. When it changes, the form opens the sections\nand list items the field is in, scrolls it into view, focuses it and\nbriefly highlights it.\n\nIf the path goes further than the form can show, such as into a custom\ncomponent, the closest field above the end of the path is shown. To show\nthe same field again, set it to `undefined` first."
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
@@ -430,4 +471,10 @@ export class Form {
             }];
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "highlightedField",
+                "methodName": "handleHighlightedFieldChange"
+            }];
+    }
 }

package/dist/collection/components/form/show-field.js

@@ -0,0 +1,116 @@
+import { flushSync } from "react-dom";
+import { toSchemaPath } from "./templates/object-field";
+import { getFocusTarget } from "../../util/get-focus-target";
+const HIGHLIGHT_CLASS = 'limel-form-field--highlighted';
+const STABLE_FRAMES = 3;
+const MAX_SETTLE_MS = 2000;
+const MAX_RENDER_FRAMES = 30;
+/**
+ * Open what is closed above a field, scroll it into view, focus it and
+ * highlight it.
+ *
+ * @param root - the element the form is rendered in
+ * @param path - the path of the field in the value of the form
+ */
+export async function showField(root, path) {
+    if (!(await waitUntilRendered(root, path))) {
+        return;
+    }
+    let target;
+    for (let depth = 1; depth <= path.length; depth++) {
+        const element = findByPath(root, path.slice(0, depth));
+        if (!element) {
+            break;
+        }
+        target = element;
+        openSectionsAround(root, element);
+    }
+    if (!target) {
+        return;
+    }
+    // The components inside the field have to be drawn, and the sections
+    // around it opened, before the field is where it will stay.
+    const focusTarget = await getFocusTarget(target);
+    await waitForLayoutToSettle(target);
+    target.scrollIntoView({
+        block: 'center',
+        behavior: prefersReducedMotion() ? 'instant' : 'smooth',
+    });
+    focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus({ preventScroll: true });
+    await waitForLayoutToSettle(target);
+    highlight(target);
+}
+function findByPath(root, path) {
+    const schemaPath = toSchemaPath(path.map(String));
+    return root.querySelector(`[data-schema-path="${CSS.escape(schemaPath)}"]`);
+}
+// The form is drawn a moment after its value or schema is set, so give it a few
+// frames to show the start of the path.
+async function waitUntilRendered(root, path) {
+    for (let frame = 0; frame < MAX_RENDER_FRAMES; frame++) {
+        if (findByPath(root, path.slice(0, 1))) {
+            return true;
+        }
+        await nextFrame();
+    }
+    return false;
+}
+function openSectionsAround(root, element) {
+    for (let node = element; node && node !== root; node = node.parentElement) {
+        if (isClosedSection(node)) {
+            open(node);
+        }
+    }
+}
+function isClosedSection(element) {
+    return (element.tagName === 'LIMEL-COLLAPSIBLE-SECTION' &&
+        !element.isOpen);
+}
+// A collapsed list item renders its fields only once its section says it has
+// been opened, and they have to be in place before the next step is looked up.
+function open(section) {
+    section.isOpen = true;
+    flushSync(() => {
+        section.dispatchEvent(new CustomEvent('open'));
+    });
+}
+// Wait until the field has a size and has stayed in place for a few frames, so
+// it is not scrolled to while the form still grows, nor flashed while scrolling.
+async function waitForLayoutToSettle(element) {
+    let previous = '';
+    let stableFrames = 0;
+    const deadline = performance.now() + MAX_SETTLE_MS;
+    while (performance.now() < deadline) {
+        await nextFrame();
+        const { top, height } = element.getBoundingClientRect();
+        const current = `${top}:${height}`;
+        const isStill = height > 0 && current === previous;
+        stableFrames = isStill ? stableFrames + 1 : 0;
+        if (stableFrames === STABLE_FRAMES) {
+            return;
+        }
+        previous = current;
+    }
+}
+function highlight(element) {
+    // Removed for a frame first, so showing the same field again restarts it.
+    element.classList.remove(HIGHLIGHT_CLASS);
+    const removeHighlight = (event) => {
+        // Animations of what the field holds end here too.
+        if (event.animationName !== 'highlight-field-shadow') {
+            return;
+        }
+        element.classList.remove(HIGHLIGHT_CLASS);
+        element.removeEventListener('animationend', removeHighlight);
+    };
+    requestAnimationFrame(() => {
+        element.classList.add(HIGHLIGHT_CLASS);
+        element.addEventListener('animationend', removeHighlight);
+    });
+}
+function prefersReducedMotion() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function nextFrame() {
+    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}

package/dist/collection/components/form/templates/array-field-collapsible-item.js

@@ -54,6 +54,7 @@ export class CollapsibleItemTemplate extends React.Component {
                 this.section = section;
             },
             'is-open': this.state.isOpen,
+            'data-schema-path': this.props.schemaPath,
             'data-reorder-id': String(this.props.index),
             'data-reorderable': this.props.allowItemReorder
                 ? 'true'

package/dist/collection/components/form/templates/array-field-item.js

@@ -3,6 +3,7 @@ import { isObjectType } from "../schema";
 import { CollapsibleItemTemplate } from "./array-field-collapsible-item";
 import { SimpleItemTemplate } from "./array-field-simple-item";
 import { ArrayFieldContext, ArrayItemErrorsContext } from "./array-context";
+import { toSchemaPath } from "./object-field";
 export const ArrayFieldItemTemplate = (props) => {
     const arrayContext = useContext(ArrayFieldContext);
     const itemErrors = useContext(ArrayItemErrorsContext);
@@ -26,6 +27,10 @@ export const ArrayFieldItemTemplate = (props) => {
             allowItemReorder: allowItemReorder,
             errorSchema: itemErrors === null || itemErrors === void 0 ? void 0 : itemErrors[props.index],
             revealErrors: (formContext === null || formContext === void 0 ? void 0 : formContext.revealErrors) === true,
+            schemaPath: toSchemaPath([
+                ...arrayContext.schemaPath,
+                String(props.index),
+            ]),
         }, props.children);
     }
     return React.createElement(SimpleItemTemplate, {

package/dist/collection/components/form/templates/array-field.js

@@ -1,14 +1,10 @@
 import React from "react";
 import { renderDescription, renderTitle } from "./common";
-import Sortable from "sortablejs";
+import { toSchemaPath } from "./object-field";
+import { DragToReorder } from "../../../util/drag-to-reorder";
 import { ArrayFieldContext } from "./array-context";
 export const ARRAY_REORDER_EVENT = 'arrayReorder';
-const DRAG_HANDLE_SELECTOR = '[data-drag-handle]';
 const DRAGGABLE_ITEM_SELECTOR = '.array-item[data-reorderable="true"]';
-const DEFAULT_CONTAINER_CLASS = 'has-an-item-which-is-being-dragged';
-const DEFAULT_DROP_ELEVATION_CLASS = 'is-elevated';
-const DROP_ELEVATION_DURATION = 1000;
-const TOUCH_DRAG_DELAY_MS = 200; // Adds a short hold on touch (long-press) so scroll gestures do not reorder items.
 export class ArrayFieldTemplate extends React.Component {
     constructor(props) {
         super(props);
@@ -21,68 +17,28 @@ export class ArrayFieldTemplate extends React.Component {
             if (this.container === element) {
                 return;
             }
-            this.teardownDragController();
+            this.dragToReorder.teardown();
             this.container = element !== null && element !== void 0 ? element : undefined;
             this.setupDragController();
         };
-        this.handleSortStart = (event) => {
-            if (!this.canReorderItems()) {
-                return;
-            }
-            this.dragSnapshot = [...this.state.order];
-            this.draggedItemIndex = this.getReorderId(event.item);
-            if (this.container) {
-                this.container.classList.add(DEFAULT_CONTAINER_CLASS);
-            }
-            if (event.item instanceof HTMLElement) {
-                this.applyDropElevation(event.item);
-            }
-        };
-        this.handleSortEnd = (event) => {
+        this.handleReorder = ({ order, fromIndex, toIndex, }) => {
             var _a;
-            if (!this.canReorderItems()) {
-                return;
-            }
-            if (this.container) {
-                this.container.classList.remove(DEFAULT_CONTAINER_CLASS);
-            }
-            const snapshot = this.dragSnapshot;
-            const draggedItemIndex = this.draggedItemIndex;
-            this.dragSnapshot = undefined;
-            this.draggedItemIndex = undefined;
-            if (event.item instanceof HTMLElement) {
-                this.dropElevationTarget = event.item;
-            }
-            const finalOrder = this.readOrderFromDom();
-            if (!this.arraysEqual(this.state.order, finalOrder)) {
-                this.setState({ order: finalOrder });
-            }
-            if (snapshot === undefined ||
-                draggedItemIndex === undefined ||
-                !(event.item instanceof HTMLElement)) {
-                this.scheduleDropElevationRemoval();
-                return;
-            }
-            const fromPosition = snapshot.indexOf(draggedItemIndex);
-            const toPosition = finalOrder.indexOf(draggedItemIndex);
-            if (fromPosition === -1 ||
-                toPosition === -1 ||
-                fromPosition === toPosition) {
-                this.scheduleDropElevationRemoval();
-                return;
-            }
+            this.setState({ order: order.map(Number) });
             (_a = this.container) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent(ARRAY_REORDER_EVENT, {
                 bubbles: true,
-                detail: { fromIndex: fromPosition, toIndex: toPosition },
+                detail: { fromIndex, toIndex },
             }));
-            this.scheduleDropElevationRemoval();
         };
         this.state = {
             order: this.extractIndices(props.items),
         };
+        this.dragToReorder = new DragToReorder({
+            draggable: DRAGGABLE_ITEM_SELECTOR,
+            onReorder: this.handleReorder,
+        });
     }
     componentWillUnmount() {
-        this.teardownDragController();
+        this.dragToReorder.teardown();
     }
     componentDidMount() {
         this.setupDragController();
@@ -151,47 +107,10 @@ export class ArrayFieldTemplate extends React.Component {
     }
     setupDragController() {
         if (!this.container || !this.canReorderItems()) {
-            this.teardownDragController();
-            return;
-        }
-        const reorderableItems = this.container.querySelectorAll(`:scope > ${DRAGGABLE_ITEM_SELECTOR}`);
-        if (reorderableItems.length < 2) {
-            this.teardownDragController();
+            this.dragToReorder.teardown();
             return;
         }
-        if (this.sortable) {
-            this.sortable.option('handle', DRAG_HANDLE_SELECTOR);
-            this.sortable.option('draggable', DRAGGABLE_ITEM_SELECTOR);
-            this.sortable.option('disabled', false);
-            this.sortable.option('delay', TOUCH_DRAG_DELAY_MS);
-            this.sortable.option('delayOnTouchOnly', true);
-            return;
-        }
-        this.sortable = Sortable.create(this.container, {
-            animation: 150,
-            handle: DRAG_HANDLE_SELECTOR,
-            draggable: DRAGGABLE_ITEM_SELECTOR,
-            delay: TOUCH_DRAG_DELAY_MS,
-            delayOnTouchOnly: true,
-            onStart: this.handleSortStart,
-            onEnd: this.handleSortEnd,
-        });
-    }
-    teardownDragController() {
-        if (this.sortable) {
-            this.sortable.destroy();
-            this.sortable = undefined;
-        }
-        this.clearDropElevationTimer();
-        if (this.dropElevationTarget) {
-            this.dropElevationTarget.classList.remove(DEFAULT_DROP_ELEVATION_CLASS);
-            this.dropElevationTarget = undefined;
-        }
-        if (this.container) {
-            this.container.classList.remove(DEFAULT_CONTAINER_CLASS);
-        }
-        this.dragSnapshot = undefined;
-        this.draggedItemIndex = undefined;
+        this.dragToReorder.setup(this.container);
     }
     canReorderItems() {
         if (this.props.disabled || this.props.readonly) {
@@ -201,67 +120,6 @@ export class ArrayFieldTemplate extends React.Component {
         const limeOptions = (schema === null || schema === void 0 ? void 0 : schema.lime) || {};
         return limeOptions.allowItemReorder !== false;
     }
-    readOrderFromDom() {
-        if (!this.container) {
-            return [];
-        }
-        // Only read the order of the direct children of this array field.
-        // Nested array fields may render `.array-item` elements inside items,
-        // and those must not affect the parent order.
-        const items = [...this.container.children].filter((element) => {
-            var _a, _b;
-            return Boolean((_b = (_a = element === null || element === void 0 ? void 0 : element.classList) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, 'array-item'));
-        });
-        const order = [];
-        for (const element of items) {
-            const index = this.getReorderId(element);
-            if (index !== undefined) {
-                order.push(index);
-            }
-        }
-        return order;
-    }
-    getReorderId(element) {
-        var _a;
-        if (!element) {
-            return undefined;
-        }
-        const value = (_a = element === null || element === void 0 ? void 0 : element.dataset) === null || _a === void 0 ? void 0 : _a.reorderId;
-        if (value === undefined) {
-            return undefined;
-        }
-        const parsed = Number.parseInt(value, 10);
-        return Number.isNaN(parsed) ? undefined : parsed;
-    }
-    applyDropElevation(item) {
-        if (this.dropElevationTarget && this.dropElevationTarget !== item) {
-            this.dropElevationTarget.classList.remove(DEFAULT_DROP_ELEVATION_CLASS);
-        }
-        this.clearDropElevationTimer();
-        item.classList.add(DEFAULT_DROP_ELEVATION_CLASS);
-        this.dropElevationTarget = item;
-    }
-    scheduleDropElevationRemoval() {
-        if (!this.dropElevationTarget) {
-            return;
-        }
-        const target = this.dropElevationTarget;
-        this.clearDropElevationTimer();
-        this.dropElevationTimeout = setTimeout(() => {
-            target.classList.remove(DEFAULT_DROP_ELEVATION_CLASS);
-            if (this.dropElevationTarget === target) {
-                this.dropElevationTarget = undefined;
-            }
-            this.dropElevationTimeout = undefined;
-        }, DROP_ELEVATION_DURATION);
-    }
-    clearDropElevationTimer() {
-        if (this.dropElevationTimeout === undefined) {
-            return;
-        }
-        clearTimeout(this.dropElevationTimeout);
-        this.dropElevationTimeout = undefined;
-    }
     arraysEqual(a, b) {
         if (a.length !== b.length) {
             return false;
@@ -279,17 +137,21 @@ export class ArrayFieldTemplate extends React.Component {
         return (items !== null && items !== void 0 ? items : []).map((_, index) => index);
     }
     getContextValue() {
-        var _a;
+        var _a, _b, _c;
         const schema = this.props.schema;
         const formData = ((_a = this.props.formData) !== null && _a !== void 0 ? _a : []);
+        const schemaPath = ((_c = (_b = this.props.fieldPathId) === null || _b === void 0 ? void 0 : _b.path) !== null && _c !== void 0 ? _c : []).map(String);
+        const path = toSchemaPath(schemaPath);
         if (this.cachedContextValue &&
             this.cachedSchema === schema &&
-            this.cachedFormData === formData) {
+            this.cachedFormData === formData &&
+            this.cachedPath === path) {
             return this.cachedContextValue;
         }
         this.cachedSchema = schema;
         this.cachedFormData = formData;
-        this.cachedContextValue = { arraySchema: schema, formData };
+        this.cachedPath = path;
+        this.cachedContextValue = { arraySchema: schema, formData, schemaPath };
         return this.cachedContextValue;
     }
 }

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

@@ -1,5 +1,7 @@
 import React from "react";
 import { isObjectType } from "../schema";
+import { toSchemaPath } from "./object-field";
+import { isCustomObjectSchema } from "../fields/field-helpers";
 export const FieldTemplate = (props) => {
     let classNames = props.classNames;
     const colSpan = getColSpan(props.schema);
@@ -17,8 +19,23 @@ export const FieldTemplate = (props) => {
     return React.createElement('div', {
         className: classNames,
         style: style,
+        'data-schema-path': getFieldSchemaPath(props),
     }, props.children);
 };
+// An object marks its own layout wrapper, unless a component or the code
+// editor draws it instead. It lets a host find the element of one field by its path.
+function getFieldSchemaPath(props) {
+    var _a;
+    if (isObjectType(props.schema) && hasOwnLayout(props.schema)) {
+        return undefined;
+    }
+    const path = (_a = props.fieldPathId) === null || _a === void 0 ? void 0 : _a.path;
+    return path ? toSchemaPath(path.map(String)) : undefined;
+}
+function hasOwnLayout(schema) {
+    var _a, _b;
+    return !((_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.name) && !isCustomObjectSchema(schema);
+}
 function getColSpan(schema) {
     var _a;
     const layout = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.layout;

package/dist/collection/components/select/select.template.js

@@ -35,7 +35,7 @@ export const SelectTemplate = (props) => {
     };
     return [
         h("div", { class: fieldClassList }, h("limel-notched-outline", { class: classList, labelId: TRIGGER_ID, labelElementId: LABEL_ID, label: props.label, required: props.required, invalid: !isValid, disabled: props.disabled, readonly: props.readonly, hasValue: hasValue, hasFloatingLabel: floatLabelAbove(props) }, h(SelectValue, Object.assign({}, props, { hasValue: hasValue, isValid: isValid, hasEmptyText: hasEmptyText }))), h(HelperText, { text: props.helperText, isValid: isValid })),
-        h(SelectDropdown, Object.assign({}, props)),
+        h(SelectDropdown, Object.assign({}, props, { isValid: isValid })),
     ];
 };
 const getDescribedBy = (props) => {
@@ -97,7 +97,7 @@ const NativeDropdown = (props) => {
     const options = props.options
         .filter((option) => !('separator' in option))
         .map(renderOption(props.value));
-    return (h("select", { required: props.required, "aria-labelledby": props.label ? LABEL_ID : undefined, "aria-describedby": getDescribedBy(props), "aria-disabled": props.disabled, "aria-required": props.required, onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled, multiple: props.multiple }, options));
+    return (h("select", { required: props.required, "aria-labelledby": props.label ? LABEL_ID : undefined, "aria-describedby": getDescribedBy(props), "aria-disabled": props.disabled, "aria-required": props.required, "aria-invalid": props.isValid ? undefined : 'true', onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled, multiple: props.multiple }, options));
 };
 const renderOption = (selectedOption) => {
     return (option) => {

package/dist/collection/components/slider/slider.js

@@ -270,15 +270,15 @@ export class Slider {
         if (this.disabled || this.readonly) {
             inputProps.disabled = true;
         }
-        return (h(Host, { key: '6d910879894ffc7ff36df228e4252e4758622ab9', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '56e3b4dbc963b6923c63a33acb21895f4e86c947', labelId: this.inputId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !this.isUnset, hasFloatingLabel: true }, h("div", { key: 'f74ef31e0b7d67dcc8a231a05f9b00b84de50b33', slot: "content" }, h("div", { key: '4a4018ac095977f89cba99a0222603469d11ce30', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: '588a4049b70749cf54a9faf08d6f0514cbfd2d6c', id: this.inputId, type: "range", min: min, max: max, value: this.displayValue, "aria-describedby": this.helperText
+        return (h(Host, { key: '6d910879894ffc7ff36df228e4252e4758622ab9', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '56e3b4dbc963b6923c63a33acb21895f4e86c947', labelId: this.inputId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !this.isUnset, hasFloatingLabel: true }, h("div", { key: 'f74ef31e0b7d67dcc8a231a05f9b00b84de50b33', slot: "content" }, h("div", { key: '4a4018ac095977f89cba99a0222603469d11ce30', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: '3c9dc1fb20dd26ae0ea6cbab0914d5012a9c0184', id: this.inputId, type: "range", min: min, max: max, value: this.displayValue, "aria-describedby": this.helperText
                 ? this.helperTextId
-                : undefined, "aria-valuetext": this.isUnset
+                : undefined, "aria-invalid": this.invalid ? 'true' : undefined, "aria-valuetext": this.isUnset
                 ? translate.get('value-not-set', this.language)
                 : undefined, ref: (el) => {
                 this.inputElement = el;
-            }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), h("div", { key: '48f58e7fe170d8fe9d01fcd938b53088ff9b796d', class: "track" }, h("div", { key: '4f488b62a840c0346de6157d7d1ce7bdba26b357', class: "active" }), this.renderStepDots(min, max)), h("div", { key: '4234e2d0711fa650b1d0b7c05eb9d52d327818fc', class: "thumb" }, h("div", { key: '28c9d98e694cdaa0927ef05b396199b24d6b6e16', class: "knob" }), h("div", { key: 'cde9b95313351dd37794e32f2a107426a5bca7dc', class: "indicator", "aria-hidden": "true" }, this.isUnset
+            }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), h("div", { key: '4873567abad9bd78cd44cf244bb5c41e87c10e12', class: "track" }, h("div", { key: '165858a4a1ee9ff35ed17b3f31c358b77143af47', class: "active" }), this.renderStepDots(min, max)), h("div", { key: 'ad6a62247047caad0332385713acf0660473589c', class: "thumb" }, h("div", { key: '10a5b6171a86d156de78987caf36c6256b1d3db7', class: "knob" }), h("div", { key: 'dac6f4e48e2345091c58433124afeb29cca52e02', class: "indicator", "aria-hidden": "true" }, this.isUnset
             ? '\u{2194}\u{FE0E}'
-            : this.displayValue))), h("div", { key: '0fa3c9c45697c787376880734f8be0127927eb30', class: "range-labels" }, h("span", { key: '9dc7d1b38bcf62369e827519b919c9cd69676b4d', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: '6cf1350f909d119da15e46599dbada96f2e9f7dc', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
+            : this.displayValue))), h("div", { key: 'b62ca0a0dc80b5d6c370d477a7cb340c5c1fb79d', class: "range-labels" }, h("span", { key: '4455915693d0c95db8f5a05ac344e8de3c7efe4d', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: 'ef141dec4f89ad937e521cb82b94ad3348904e49', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
     }
     watchValue() {
         this.syncStateFromValue();

package/dist/collection/components/switch/switch.js

@@ -55,7 +55,7 @@ export class Switch {
             return (h("limel-dynamic-label", { value: this.value, "aria-describedby": this.ariaDescribedBy, defaultLabel: { text: this.label, icon: icon }, labels: this.readonlyLabels }));
         };
         this.renderInteractive = () => {
-            return (h("div", { class: "switch" }, h("button", { id: this.fieldId, type: "button", role: "switch", "aria-checked": String(this.value), disabled: this.disabled, onClick: this.handleClick, "aria-describedby": this.ariaDescribedBy }, h("span", { class: "handle" })), h("label", { htmlFor: this.fieldId }, this.label)));
+            return (h("div", { class: "switch" }, h("button", { id: this.fieldId, type: "button", role: "switch", "aria-checked": String(this.value), disabled: this.disabled, onClick: this.handleClick, "aria-describedby": this.ariaDescribedBy, "aria-invalid": this.invalid ? 'true' : undefined }, h("span", { class: "handle" })), h("label", { htmlFor: this.fieldId }, this.label)));
         };
         this.renderHelperLine = () => {
             if (!this.hasHelperText()) {