@limetech/lime-elements 39.17.0 → 39.17.2

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [39.17.2](https://github.com/Lundalogik/lime-elements/compare/v39.17.1...v39.17.2) (2026-04-27)
+
+### Bug Fixes
+
+
+* **card:** don't show hover effects when card is neither clickable nor has 3D effect ([20cf51b](https://github.com/Lundalogik/lime-elements/commit/20cf51b5a425a05eb259d39f80c24ca9bf130fe7))
+
+## [39.17.1](https://github.com/Lundalogik/lime-elements/compare/v39.17.0...v39.17.1) (2026-04-27)
+
+### Bug Fixes
+
+
+* **form:** allow clearing custom components nested inside array items ([02910c1](https://github.com/Lundalogik/lime-elements/commit/02910c1b10fca4e5fbea564555dc4db75be82c99))
+* **form:** preserve nested-object leaf data inside array items ([8e29997](https://github.com/Lundalogik/lime-elements/commit/8e299974ed9b3b14dd9eda4313ded2106716225d))
+* **form:** reset obsolete dependent fields inside array items on trigger change ([7e1458e](https://github.com/Lundalogik/lime-elements/commit/7e1458e54467db9f2019a1160a52dad94b7e7a14))
+
 ## [39.17.0](https://github.com/Lundalogik/lime-elements/compare/v39.16.4...v39.17.0) (2026-04-27)
 
 ### Features

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

@@ -5,7 +5,7 @@ var isItem = require('./is-item-DMELyaao.js');
 var getIconProps = require('./get-icon-props-CwpDdQDI.js');
 var _3dTiltHoverEffect = require('./3d-tilt-hover-effect-DI8kt0Y0.js');
 
-const cardCss = () => `@charset "UTF-8";*{box-sizing:border-box;min-width:0;min-height:0}:host(limel-card){display:flex;border-radius:var(--card-border-radius, 0.95rem)}section{box-sizing:border-box;display:flex;gap:0.5rem;flex-direction:column}:host(limel-card[orientation=landscape]) section{flex-direction:row}section{width:100%;border-radius:var(--card-border-radius, 0.95rem);border:1px solid rgb(var(--contrast-500));padding:0.25rem;background-color:var(--card-background-color, rgb(var(--contrast-300)))}section:hover{border-color:transparent;background-color:var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))))}.body{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}.image-wrapper{flex-shrink:0;display:flex;align-items:center;justify-content:center}:host(limel-card[orientation=portrait]) .image-wrapper{width:100%}:host(limel-card[orientation=landscape]) .image-wrapper{flex-shrink:0;max-width:40%;height:100%}:host(limel-card[orientation=landscape]) .image-wrapper img{height:100%}img{transition:filter 0.6s ease;object-fit:cover;border-radius:calc(var(--card-border-radius, 0.95rem) / 1.4);min-width:0.5rem;min-height:0.5rem;max-width:100%;max-height:100%}section:hover img,section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}.markdown-wrapper{position:relative;flex-grow:1;display:flex;flex-direction:column}.markdown-wrapper limel-markdown{overflow-y:auto;flex-grow:1;padding:0.5rem 0.75rem}.markdown-wrapper::before{top:0;background:radial-gradient(farthest-side at 50% 0%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0))}.markdown-wrapper::after{bottom:0;background:radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0))}.markdown-wrapper::before,.markdown-wrapper::after{content:"";pointer-events:none;position:absolute;right:0;left:0;height:0.75rem;opacity:0;transition:opacity 0.6s ease;background-repeat:no-repeat}.markdown-wrapper.can-scroll-up::before,.markdown-wrapper.can-scroll-down::after{opacity:1}header{flex-shrink:0;display:flex;justify-content:center;gap:0.5rem;padding:0.25rem 0.75rem}:host(limel-card[orientation=landscape]) header{padding-top:0.5rem}header:has(limel-icon){padding-left:0.25rem}header .headings{flex-grow:1;display:flex;flex-direction:column;gap:0.125rem}header .title{padding-right:1.25rem}header limel-icon{flex-shrink:0;width:2rem}header h1{font-size:1.125rem;font-weight:500;color:var(--card-heading-color, rgb(var(--contrast-1100)));letter-spacing:-0.03125rem}header h2{font-size:var(--limel-theme-default-font-size);font-weight:400;color:var(--card-subheading-color, rgb(var(--contrast-1000)))}header h1,header h2{word-break:break-word;hyphens:auto;-webkit-hyphens:auto;margin:0}limel-action-bar{flex-shrink:0;--action-bar-background-color:transparent;margin-left:auto}limel-3d-hover-effect-glow{border-radius:var(--card-border-radius, 0.95rem)}:host(limel-card[show-3d-effect]){isolation:isolate;transform-style:preserve-3d;perspective:1000px}@media (prefers-reduced-motion){:host(limel-card[show-3d-effect]){perspective:2000px}}section{position:relative;transition-duration:0.8s;transition-property:transform, box-shadow, background-color;transition-timing-function:ease-out;transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg)}section:focus{outline:none}section:hover,section:focus,section:focus-visible,section:focus-within{will-change:background-color, box-shadow, transform}section:hover,section:focus,section:focus-visible,section:active{transition-duration:0.2s}section:hover,section:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}section:hover{transform:scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d))}section:focus-visible{outline:none;transform:scale3d(1.01, 1.01, 1.01)}section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5}@media (prefers-reduced-motion){section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}:host(limel-card[clickable]) section{cursor:pointer;box-shadow:var(--button-shadow-normal)}:host(limel-card[clickable]) section:hover,:host(limel-card[clickable]) section:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}:host(limel-card[clickable]) section:active{transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);box-shadow:var(--button-shadow-pressed)}:host(limel-card[clickable]) section:focus-visible{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-hovered)}:host(limel-card[clickable]) section:focus-visible:active{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-pressed)}:host(limel-card[selected]) section,:host(limel-card[selected]) section:hover,:host(limel-card[selected]) section:focus-visible,:host(limel-card[selected]) section:active{box-shadow:var(--shadow-focused-state)}`;
+const cardCss = () => `@charset "UTF-8";*{box-sizing:border-box;min-width:0;min-height:0}:host(limel-card){display:flex;border-radius:var(--card-border-radius, 0.95rem)}section{box-sizing:border-box;display:flex;gap:0.5rem;flex-direction:column}:host(limel-card[orientation=landscape]) section{flex-direction:row}section{width:100%;border-radius:var(--card-border-radius, 0.95rem);border:1px solid rgb(var(--contrast-500));padding:0.25rem;background-color:var(--card-background-color, rgb(var(--contrast-300)))}:host(limel-card[clickable]) section,:host(limel-card[show-3d-effect]) section{position:relative;transition-duration:0.8s;transition-property:transform, box-shadow, background-color;transition-timing-function:ease-out;transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg)}:host(limel-card[clickable]) section:focus,:host(limel-card[show-3d-effect]) section:focus{outline:none}:host(limel-card[clickable]) section:hover,:host(limel-card[clickable]) section:focus,:host(limel-card[clickable]) section:focus-visible,:host(limel-card[clickable]) section:focus-within,:host(limel-card[show-3d-effect]) section:hover,:host(limel-card[show-3d-effect]) section:focus,:host(limel-card[show-3d-effect]) section:focus-visible,:host(limel-card[show-3d-effect]) section:focus-within{will-change:background-color, box-shadow, transform}:host(limel-card[clickable]) section:hover,:host(limel-card[clickable]) section:focus,:host(limel-card[clickable]) section:focus-visible,:host(limel-card[clickable]) section:active,:host(limel-card[show-3d-effect]) section:hover,:host(limel-card[show-3d-effect]) section:focus,:host(limel-card[show-3d-effect]) section:focus-visible,:host(limel-card[show-3d-effect]) section:active{transition-duration:0.2s}:host(limel-card[clickable]) section:hover,:host(limel-card[clickable]) section:focus-visible,:host(limel-card[show-3d-effect]) section:hover,:host(limel-card[show-3d-effect]) section:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}:host(limel-card[clickable]) section:hover,:host(limel-card[show-3d-effect]) section:hover{transform:scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d))}:host(limel-card[clickable]) section:focus-visible,:host(limel-card[show-3d-effect]) section:focus-visible{outline:none;transform:scale3d(1.01, 1.01, 1.01)}:host(limel-card[clickable]) section:hover limel-3d-hover-effect-glow,:host(limel-card[show-3d-effect]) section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5}@media (prefers-reduced-motion){:host(limel-card[clickable]) section:hover limel-3d-hover-effect-glow,:host(limel-card[show-3d-effect]) section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}:host(limel-card[clickable]) section{cursor:pointer;box-shadow:var(--button-shadow-normal)}:host(limel-card[clickable]) section:hover,:host(limel-card[clickable]) section:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}:host(limel-card[clickable]) section:active{transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);box-shadow:var(--button-shadow-pressed)}:host(limel-card[clickable]) section:focus-visible{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-hovered)}:host(limel-card[clickable]) section:focus-visible:active{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-pressed)}:host(limel-card[clickable]) section:hover{border-color:transparent;background-color:var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))))}.body{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}.image-wrapper{flex-shrink:0;display:flex;align-items:center;justify-content:center}:host(limel-card[orientation=portrait]) .image-wrapper{width:100%}:host(limel-card[orientation=landscape]) .image-wrapper{flex-shrink:0;max-width:40%;height:100%}:host(limel-card[orientation=landscape]) .image-wrapper img{height:100%}img{transition:filter 0.6s ease;object-fit:cover;border-radius:calc(var(--card-border-radius, 0.95rem) / 1.4);min-width:0.5rem;min-height:0.5rem;max-width:100%;max-height:100%}:host(limel-card[show-3d-effect]) section:hover img,:host(limel-card[show-3d-effect]) section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}.markdown-wrapper{position:relative;flex-grow:1;display:flex;flex-direction:column}.markdown-wrapper limel-markdown{overflow-y:auto;flex-grow:1;padding:0.5rem 0.75rem}.markdown-wrapper::before{top:0;background:radial-gradient(farthest-side at 50% 0%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0))}.markdown-wrapper::after{bottom:0;background:radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0))}.markdown-wrapper::before,.markdown-wrapper::after{content:"";pointer-events:none;position:absolute;right:0;left:0;height:0.75rem;opacity:0;transition:opacity 0.6s ease;background-repeat:no-repeat}.markdown-wrapper.can-scroll-up::before,.markdown-wrapper.can-scroll-down::after{opacity:1}header{flex-shrink:0;display:flex;justify-content:center;gap:0.5rem;padding:0.25rem 0.75rem}:host(limel-card[orientation=landscape]) header{padding-top:0.5rem}header:has(limel-icon){padding-left:0.25rem}header .headings{flex-grow:1;display:flex;flex-direction:column;gap:0.125rem}header .title{padding-right:1.25rem}header limel-icon{flex-shrink:0;width:2rem}header h1{font-size:1.125rem;font-weight:500;color:var(--card-heading-color, rgb(var(--contrast-1100)));letter-spacing:-0.03125rem}header h2{font-size:var(--limel-theme-default-font-size);font-weight:400;color:var(--card-subheading-color, rgb(var(--contrast-1000)))}header h1,header h2{word-break:break-word;hyphens:auto;-webkit-hyphens:auto;margin:0}limel-action-bar{flex-shrink:0;--action-bar-background-color:transparent;margin-left:auto}limel-3d-hover-effect-glow{border-radius:var(--card-border-radius, 0.95rem)}:host(limel-card[show-3d-effect]){isolation:isolate;transform-style:preserve-3d;perspective:1000px}@media (prefers-reduced-motion){:host(limel-card[show-3d-effect]){perspective:2000px}}:host(limel-card[selected]) section,:host(limel-card[selected]) section:hover,:host(limel-card[selected]) section:focus-visible,:host(limel-card[selected]) section:active{box-shadow:var(--shadow-focused-state)}`;
 
 const Card = class {
     constructor(hostRef) {

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

@@ -39813,6 +39813,21 @@ function isCustomObjectSchema(schema) {
 function isAdditionalProperty(schema) {
     return schema[ADDITIONAL_PROPERTY_FLAG] === true;
 }
+/**
+ * Check whether a schema permits `null` as a valid value. Used to decide
+ * whether a cleared field value should be preserved as `null` or converted
+ * to `undefined` so the property can be removed from the form data.
+ *
+ * @param schema - the schema to check
+ * @returns true if the schema's type is `'null'` or includes `'null'`
+ */
+const schemaAllowsNull = (schema) => {
+    const type = schema === null || schema === void 0 ? void 0 : schema.type;
+    if (!type) {
+        return false;
+    }
+    return Array.isArray(type) ? type.includes('null') : type === 'null';
+};
 
 /**
  * A widget is a concept in react-jsonschema-form (rjsf).
@@ -40007,7 +40022,7 @@ const BaseSchemaField = defaultFields$2.SchemaField;
  * @returns whether or not null should be changed to undefined
  */
 const shouldChangeToUndefined = (value, schema) => {
-    return value === null && !schema.type.includes('null');
+    return value === null && !schemaAllowsNull(schema);
 };
 const hasCustomComponent = (schema) => {
     var _a, _b;
@@ -40094,9 +40109,26 @@ class SchemaField extends React.Component {
         const { formData, schema } = this.props;
         const { rootSchema } = this.props.registry;
         this.setState({ modified: true });
+        if (this.isDeepLeafChange(path)) {
+            this.props.onChange(data, path);
+            return;
+        }
         const newData = resetDependentFields(formData, data, schema, rootSchema);
         this.props.onChange(newData, path);
     }
+    /**
+     * RJSF v6's built-in ArrayField shares one onChange handler across all
+     * descendants, so changes to leaves deep inside an array item bubble
+     * through this SchemaField with a path that is deeper than its own.
+     * The enclosing ArrayField rebuilds the affected item and runs
+     * `resetDependentFields` at the item level (see array-field.ts), so we
+     * must pass the partial leaf data through untouched here.
+     * @param path
+     */
+    isDeepLeafChange(path) {
+        const { fieldPathId } = this.props;
+        return !!fieldPathId && path.length > fieldPathId.path.length;
+    }
     buildCustomComponentProps() {
         const { disabled, readonly, name, registry, schema: rawSchema, errorSchema, fieldPathId, } = this.props;
         const schema = rawSchema;
@@ -40208,6 +40240,10 @@ class ArrayField extends React.Component {
     handleChange(newData, path) {
         const { formData: oldData, schema } = this.props;
         const { rootSchema } = this.props.registry;
+        if (this.isDeepLeafChange(path)) {
+            this.handleDeepLeafChange(newData, path);
+            return;
+        }
         // This case handles when the first list item is added. When there are no
         // items we get undefined instead of []
         if (!oldData) {
@@ -40237,11 +40273,102 @@ class ArrayField extends React.Component {
         }
         this.props.onChange(newData, path);
     }
+    /**
+     * RJSF v6's built-in ArrayField shares one onChange handler across all
+     * descendants, so changes to leaves deep inside an array item bubble
+     * through here with the leaf value (not the full array) and a path that
+     * is deeper than this field's own path.
+     * @param path
+     */
+    isDeepLeafChange(path) {
+        const { formData, fieldPathId } = this.props;
+        return (Array.isArray(formData) &&
+            !!fieldPathId &&
+            path.length > fieldPathId.path.length);
+    }
+    /**
+     * Rebuild the affected item locally so we can (a) restore `undefined`
+     * when the leaf schema does not allow `null` — the built-in handler
+     * coerces `undefined` to `null`, which breaks field clearing for custom
+     * components — and (b) still run `resetDependentFields` at the item
+     * level so sibling fields that became obsolete for the new data are
+     * cleared.
+     * @param newData
+     * @param path
+     */
+    handleDeepLeafChange(newData, path) {
+        const { formData: oldData, fieldPathId } = this.props;
+        const [indexSegment, ...pathInItem] = path.slice(fieldPathId.path.length);
+        const index = Number(indexSegment);
+        const newArray = [...oldData];
+        newArray[index] = this.buildResetItem(newData, index, pathInItem);
+        this.props.onChange(newArray, fieldPathId.path);
+    }
+    buildResetItem(newData, index, pathInItem) {
+        const { formData: oldData, schema } = this.props;
+        const { rootSchema } = this.props.registry;
+        const itemSchema = (Array.isArray(schema.items) ? schema.items[index] : schema.items);
+        const leafSchema = getSchemaAtPath(itemSchema, pathInItem);
+        const value = newData === null && !schemaAllowsNull(leafSchema)
+            ? undefined
+            : newData;
+        const oldItem = oldData[index];
+        const newItem = setValueAtPath(oldItem, pathInItem, value);
+        return resetDependentFields(oldItem, newItem, itemSchema, rootSchema);
+    }
     render() {
         const arrayProps = Object.assign(Object.assign({}, this.props), { onChange: this.handleChange });
         return React.createElement('div', { ref: this.setWrapper }, React.createElement(BaseArrayField, arrayProps));
     }
 }
+function getSchemaAtPath(schema, pathSegments) {
+    let current = schema;
+    for (const segment of pathSegments) {
+        if (!current) {
+            return;
+        }
+        current = resolveSchemaSegment(current, segment);
+    }
+    return current;
+}
+function resolveSchemaSegment(schema, segment) {
+    var _a;
+    if (typeof segment === 'number') {
+        const items = schema.items;
+        return Array.isArray(items) ? items[segment] : items;
+    }
+    return (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[segment];
+}
+/**
+ * Return a copy of `target` with `value` written at the location described
+ * by `pathSegments`, creating intermediate containers as needed. Numeric
+ * segments address arrays; string segments address object keys. `target`
+ * is not mutated.
+ *
+ * @param target
+ * @param pathSegments
+ * @param value
+ * @example
+ * setValueAtPath({ a: { b: 1 } }, ['a', 'b'], 2); // → { a: { b: 2 } }
+ * setValueAtPath([{ x: 1 }], [0, 'x'], 9);        // → [{ x: 9 }]
+ */
+function setValueAtPath(target, pathSegments, value) {
+    if (pathSegments.length === 0) {
+        return value;
+    }
+    const clone = cloneContainer(target, pathSegments[0]);
+    set(clone, pathSegments, value);
+    return clone;
+}
+function cloneContainer(target, firstSegment) {
+    if (Array.isArray(target) || isPlainObject(target)) {
+        return cloneDeep.cloneDeep(target);
+    }
+    if (typeof firstSegment === 'number') {
+        return [];
+    }
+    return {};
+}
 
 class CodeEditor extends React.Component {
     constructor(props) {

package/dist/collection/components/card/card.css

@@ -131,7 +131,58 @@ section {
   padding: 0.25rem;
   background-color: var(--card-background-color, rgb(var(--contrast-300)));
 }
-section:hover {
+:host(limel-card[clickable]) section, :host(limel-card[show-3d-effect]) section {
+  position: relative;
+  transition-duration: 0.8s;
+  transition-property: transform, box-shadow, background-color;
+  transition-timing-function: ease-out;
+  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
+}
+:host(limel-card[clickable]) section:focus, :host(limel-card[show-3d-effect]) section:focus {
+  outline: none;
+}
+:host(limel-card[clickable]) section:hover, :host(limel-card[clickable]) section:focus, :host(limel-card[clickable]) section:focus-visible, :host(limel-card[clickable]) section:focus-within, :host(limel-card[show-3d-effect]) section:hover, :host(limel-card[show-3d-effect]) section:focus, :host(limel-card[show-3d-effect]) section:focus-visible, :host(limel-card[show-3d-effect]) section:focus-within {
+  will-change: background-color, box-shadow, transform;
+}
+:host(limel-card[clickable]) section:hover, :host(limel-card[clickable]) section:focus, :host(limel-card[clickable]) section:focus-visible, :host(limel-card[clickable]) section:active, :host(limel-card[show-3d-effect]) section:hover, :host(limel-card[show-3d-effect]) section:focus, :host(limel-card[show-3d-effect]) section:focus-visible, :host(limel-card[show-3d-effect]) section:active {
+  transition-duration: 0.2s;
+}
+:host(limel-card[clickable]) section:hover, :host(limel-card[clickable]) section:focus-visible, :host(limel-card[show-3d-effect]) section:hover, :host(limel-card[show-3d-effect]) section:focus-visible {
+  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
+}
+:host(limel-card[clickable]) section:hover, :host(limel-card[show-3d-effect]) section:hover {
+  transform: scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d));
+}
+:host(limel-card[clickable]) section:focus-visible, :host(limel-card[show-3d-effect]) section:focus-visible {
+  outline: none;
+  transform: scale3d(1.01, 1.01, 1.01);
+}
+:host(limel-card[clickable]) section:hover limel-3d-hover-effect-glow, :host(limel-card[show-3d-effect]) section:hover limel-3d-hover-effect-glow {
+  --limel-3d-hover-effect-glow-opacity: 0.5;
+}
+@media (prefers-reduced-motion) {
+  :host(limel-card[clickable]) section:hover limel-3d-hover-effect-glow, :host(limel-card[show-3d-effect]) section:hover limel-3d-hover-effect-glow {
+    --limel-3d-hover-effect-glow-opacity: 0.2;
+  }
+}
+:host(limel-card[clickable]) section {
+  cursor: pointer;
+  box-shadow: var(--button-shadow-normal);
+}
+:host(limel-card[clickable]) section:hover, :host(limel-card[clickable]) section:focus-visible {
+  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
+}
+:host(limel-card[clickable]) section:active {
+  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
+  box-shadow: var(--button-shadow-pressed);
+}
+:host(limel-card[clickable]) section:focus-visible {
+  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);
+}
+:host(limel-card[clickable]) section:focus-visible:active {
+  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);
+}
+:host(limel-card[clickable]) section:hover {
   border-color: transparent;
   background-color: var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))));
 }
@@ -170,7 +221,7 @@ img {
   max-width: 100%;
   max-height: 100%;
 }
-section:hover img, section:focus-visible img {
+:host(limel-card[show-3d-effect]) section:hover img, :host(limel-card[show-3d-effect]) section:focus-visible img {
   transition-duration: 0.2s;
   filter: saturate(1.3);
 }
@@ -275,58 +326,6 @@ limel-3d-hover-effect-glow {
   }
 }
 
-section {
-  position: relative;
-  transition-duration: 0.8s;
-  transition-property: transform, box-shadow, background-color;
-  transition-timing-function: ease-out;
-  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
-}
-section:focus {
-  outline: none;
-}
-section:hover, section:focus, section:focus-visible, section:focus-within {
-  will-change: background-color, box-shadow, transform;
-}
-section:hover, section:focus, section:focus-visible, section:active {
-  transition-duration: 0.2s;
-}
-section:hover, section:focus-visible {
-  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
-}
-section:hover {
-  transform: scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d));
-}
-section:focus-visible {
-  outline: none;
-  transform: scale3d(1.01, 1.01, 1.01);
-}
-section:hover limel-3d-hover-effect-glow {
-  --limel-3d-hover-effect-glow-opacity: 0.5;
-}
-@media (prefers-reduced-motion) {
-  section:hover limel-3d-hover-effect-glow {
-    --limel-3d-hover-effect-glow-opacity: 0.2;
-  }
-}
-:host(limel-card[clickable]) section {
-  cursor: pointer;
-  box-shadow: var(--button-shadow-normal);
-}
-:host(limel-card[clickable]) section:hover, :host(limel-card[clickable]) section:focus-visible {
-  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
-}
-:host(limel-card[clickable]) section:active {
-  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
-  box-shadow: var(--button-shadow-pressed);
-}
-:host(limel-card[clickable]) section:focus-visible {
-  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);
-}
-:host(limel-card[clickable]) section:focus-visible:active {
-  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);
-}
-
 :host(limel-card[selected]) section, :host(limel-card[selected]) section:hover, :host(limel-card[selected]) section:focus-visible, :host(limel-card[selected]) section:active {
   box-shadow: var(--shadow-focused-state);
 }

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { getDefaultRegistry } from "@rjsf/core";
-import { resetDependentFields } from "./field-helpers";
+import { cloneDeep, isPlainObject, set } from "lodash-es";
+import { resetDependentFields, schemaAllowsNull } from "./field-helpers";
 import { ARRAY_REORDER_EVENT } from "../templates/array-field";
 const { fields: defaultFields } = getDefaultRegistry();
 const BaseArrayField = defaultFields.ArrayField;
@@ -69,6 +70,10 @@ export class ArrayField extends React.Component {
     handleChange(newData, path) {
         const { formData: oldData, schema } = this.props;
         const { rootSchema } = this.props.registry;
+        if (this.isDeepLeafChange(path)) {
+            this.handleDeepLeafChange(newData, path);
+            return;
+        }
         // This case handles when the first list item is added. When there are no
         // items we get undefined instead of []
         if (!oldData) {
@@ -98,8 +103,99 @@ export class ArrayField extends React.Component {
         }
         this.props.onChange(newData, path);
     }
+    /**
+     * RJSF v6's built-in ArrayField shares one onChange handler across all
+     * descendants, so changes to leaves deep inside an array item bubble
+     * through here with the leaf value (not the full array) and a path that
+     * is deeper than this field's own path.
+     * @param path
+     */
+    isDeepLeafChange(path) {
+        const { formData, fieldPathId } = this.props;
+        return (Array.isArray(formData) &&
+            !!fieldPathId &&
+            path.length > fieldPathId.path.length);
+    }
+    /**
+     * Rebuild the affected item locally so we can (a) restore `undefined`
+     * when the leaf schema does not allow `null` — the built-in handler
+     * coerces `undefined` to `null`, which breaks field clearing for custom
+     * components — and (b) still run `resetDependentFields` at the item
+     * level so sibling fields that became obsolete for the new data are
+     * cleared.
+     * @param newData
+     * @param path
+     */
+    handleDeepLeafChange(newData, path) {
+        const { formData: oldData, fieldPathId } = this.props;
+        const [indexSegment, ...pathInItem] = path.slice(fieldPathId.path.length);
+        const index = Number(indexSegment);
+        const newArray = [...oldData];
+        newArray[index] = this.buildResetItem(newData, index, pathInItem);
+        this.props.onChange(newArray, fieldPathId.path);
+    }
+    buildResetItem(newData, index, pathInItem) {
+        const { formData: oldData, schema } = this.props;
+        const { rootSchema } = this.props.registry;
+        const itemSchema = (Array.isArray(schema.items) ? schema.items[index] : schema.items);
+        const leafSchema = getSchemaAtPath(itemSchema, pathInItem);
+        const value = newData === null && !schemaAllowsNull(leafSchema)
+            ? undefined
+            : newData;
+        const oldItem = oldData[index];
+        const newItem = setValueAtPath(oldItem, pathInItem, value);
+        return resetDependentFields(oldItem, newItem, itemSchema, rootSchema);
+    }
     render() {
         const arrayProps = Object.assign(Object.assign({}, this.props), { onChange: this.handleChange });
         return React.createElement('div', { ref: this.setWrapper }, React.createElement(BaseArrayField, arrayProps));
     }
 }
+function getSchemaAtPath(schema, pathSegments) {
+    let current = schema;
+    for (const segment of pathSegments) {
+        if (!current) {
+            return;
+        }
+        current = resolveSchemaSegment(current, segment);
+    }
+    return current;
+}
+function resolveSchemaSegment(schema, segment) {
+    var _a;
+    if (typeof segment === 'number') {
+        const items = schema.items;
+        return Array.isArray(items) ? items[segment] : items;
+    }
+    return (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[segment];
+}
+/**
+ * Return a copy of `target` with `value` written at the location described
+ * by `pathSegments`, creating intermediate containers as needed. Numeric
+ * segments address arrays; string segments address object keys. `target`
+ * is not mutated.
+ *
+ * @param target
+ * @param pathSegments
+ * @param value
+ * @example
+ * setValueAtPath({ a: { b: 1 } }, ['a', 'b'], 2); // → { a: { b: 2 } }
+ * setValueAtPath([{ x: 1 }], [0, 'x'], 9);        // → [{ x: 9 }]
+ */
+function setValueAtPath(target, pathSegments, value) {
+    if (pathSegments.length === 0) {
+        return value;
+    }
+    const clone = cloneContainer(target, pathSegments[0]);
+    set(clone, pathSegments, value);
+    return clone;
+}
+function cloneContainer(target, firstSegment) {
+    if (Array.isArray(target) || isPlainObject(target)) {
+        return cloneDeep(target);
+    }
+    if (typeof firstSegment === 'number') {
+        return [];
+    }
+    return {};
+}

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

@@ -69,3 +69,18 @@ export function isCustomObjectSchema(schema) {
 function isAdditionalProperty(schema) {
     return schema[ADDITIONAL_PROPERTY_FLAG] === true;
 }
+/**
+ * Check whether a schema permits `null` as a valid value. Used to decide
+ * whether a cleared field value should be preserved as `null` or converted
+ * to `undefined` so the property can be removed from the form data.
+ *
+ * @param schema - the schema to check
+ * @returns true if the schema's type is `'null'` or includes `'null'`
+ */
+export const schemaAllowsNull = (schema) => {
+    const type = schema === null || schema === void 0 ? void 0 : schema.type;
+    if (!type) {
+        return false;
+    }
+    return Array.isArray(type) ? type.includes('null') : type === 'null';
+};

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

@@ -2,7 +2,7 @@ import React from "react";
 import { getDefaultRegistry } from "@rjsf/core";
 import { isEmpty } from "lodash-es";
 import { hasValue, isFieldInvalid, isFieldRequired, getErrorText, } from "../validation-display";
-import { resetDependentFields } from "./field-helpers";
+import { resetDependentFields, schemaAllowsNull } from "./field-helpers";
 import { FieldTemplate } from "../templates";
 import { getHelpComponent } from "../help";
 import { TimePicker } from "../widgets/time-picker";
@@ -34,7 +34,7 @@ const BaseSchemaField = defaultFields.SchemaField;
  * @returns whether or not null should be changed to undefined
  */
 const shouldChangeToUndefined = (value, schema) => {
-    return value === null && !schema.type.includes('null');
+    return value === null && !schemaAllowsNull(schema);
 };
 const hasCustomComponent = (schema) => {
     var _a, _b;
@@ -121,9 +121,26 @@ export class SchemaField extends React.Component {
         const { formData, schema } = this.props;
         const { rootSchema } = this.props.registry;
         this.setState({ modified: true });
+        if (this.isDeepLeafChange(path)) {
+            this.props.onChange(data, path);
+            return;
+        }
         const newData = resetDependentFields(formData, data, schema, rootSchema);
         this.props.onChange(newData, path);
     }
+    /**
+     * RJSF v6's built-in ArrayField shares one onChange handler across all
+     * descendants, so changes to leaves deep inside an array item bubble
+     * through this SchemaField with a path that is deeper than its own.
+     * The enclosing ArrayField rebuilds the affected item and runs
+     * `resetDependentFields` at the item level (see array-field.ts), so we
+     * must pass the partial leaf data through untouched here.
+     * @param path
+     */
+    isDeepLeafChange(path) {
+        const { fieldPathId } = this.props;
+        return !!fieldPathId && path.length > fieldPathId.path.length;
+    }
     buildCustomComponentProps() {
         const { disabled, readonly, name, registry, schema: rawSchema, errorSchema, fieldPathId, } = this.props;
         const schema = rawSchema;

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

@@ -306,3 +306,121 @@ export const nestedArrayObjectSchema = {
         },
     },
 };
+export const topLevelStringCustomComponentSchema = {
+    type: 'object',
+    properties: {
+        icon: {
+            type: 'string',
+            title: 'Icon',
+            lime: { component: { name: 'limel-input-field' } },
+        },
+    },
+};
+export const arrayItemWithDependenciesSchema = {
+    type: 'object',
+    properties: {
+        entries: {
+            type: 'array',
+            title: 'Entries',
+            items: {
+                type: 'object',
+                properties: {
+                    useA: {
+                        type: 'boolean',
+                        title: 'Use A',
+                    },
+                },
+                required: ['useA'],
+                dependencies: {
+                    useA: {
+                        oneOf: [
+                            {
+                                properties: {
+                                    useA: { const: true },
+                                    valueA: {
+                                        type: 'string',
+                                        title: 'Value A',
+                                    },
+                                },
+                            },
+                            {
+                                properties: {
+                                    useA: { const: false },
+                                    valueB: {
+                                        type: 'string',
+                                        title: 'Value B',
+                                    },
+                                },
+                            },
+                        ],
+                    },
+                },
+            },
+        },
+    },
+};
+export const arrayItemWithDependenciesAndCustomConfigSchema = {
+    type: 'object',
+    properties: {
+        entries: {
+            type: 'array',
+            title: 'Entries',
+            items: {
+                type: 'object',
+                properties: {
+                    useA: {
+                        type: 'boolean',
+                        title: 'Use A',
+                    },
+                    config: {
+                        type: 'object',
+                        title: 'Config',
+                        additionalProperties: { type: 'string' },
+                        lime: {
+                            component: { name: 'limel-input-field' },
+                        },
+                    },
+                },
+                required: ['useA'],
+                dependencies: {
+                    useA: {
+                        oneOf: [
+                            {
+                                properties: {
+                                    useA: { const: true },
+                                    valueA: {
+                                        type: 'string',
+                                        title: 'Value A',
+                                    },
+                                },
+                            },
+                            {
+                                properties: { useA: { const: false } },
+                            },
+                        ],
+                    },
+                },
+                additionalProperties: true,
+            },
+        },
+    },
+};
+export const nestedStringCustomComponentSchema = {
+    type: 'object',
+    properties: {
+        views: {
+            type: 'array',
+            title: 'Views',
+            items: {
+                type: 'object',
+                properties: {
+                    icon: {
+                        type: 'string',
+                        title: 'Icon',
+                        lime: { component: { name: 'limel-input-field' } },
+                    },
+                },
+            },
+        },
+    },
+};