@limetech/lime-elements 39.30.0 → 39.31.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [39.31.1](https://github.com/Lundalogik/lime-elements/compare/v39.31.0...v39.31.1) (2026-06-08)
+
+### Bug Fixes
+
+
+* **action-bar:** lighten item background on hover ([2e04263](https://github.com/Lundalogik/lime-elements/commit/2e0426398005eb58c8213d4b3ead7a705ed86ebd))
+* **action-bar:** replace sharp borders with a softer inset shadow when floating ([b031e43](https://github.com/Lundalogik/lime-elements/commit/b031e43a2fde4eafb584e75c3355dc232b64a020))
+
+## [39.31.0](https://github.com/Lundalogik/lime-elements/compare/v39.30.0...v39.31.0) (2026-06-08)
+
+### Features
+
+
+* **form:** emit data-schema-path on layout wrappers ([cd5fb31](https://github.com/Lundalogik/lime-elements/commit/cd5fb3144cff526f71e669cb23bc73fa6f82f358))
+
 ## [39.30.0](https://github.com/Lundalogik/lime-elements/compare/v39.29.3...v39.30.0) (2026-06-05)
 
 ### Features

package/dist/cjs/limel-action-bar_3.cjs.entry.js

@@ -7,7 +7,7 @@ var randomString = require('./random-string-BTzDB2ee.js');
 var makeEnterClickable = require('./make-enter-clickable-NuTMC9MU.js');
 var getIconProps = require('./get-icon-props-CwpDdQDI.js');
 
-const actionBarCss = () => `:host(limel-action-bar){--action-bar-item-height:2rem;--limel-action-bar-item-text-color:var(       --action-bar-item-text-color,       rgb(var(--contrast-1100))   );box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.25rem;max-width:100%;border-radius:var(--action-bar-border-radius);background-color:var(--action-bar-background-color, rgb(var(--contrast-100)))}:host(limel-action-bar),.items{gap:0.25rem}@media (pointer: coarse){:host(limel-action-bar),.items{gap:0.5rem}}.items{display:inline-flex;max-width:100%;min-width:0}:host(limel-action-bar.is-full-width){width:100%}:host(limel-action-bar.is-floating){--action-bar-border-radius:100vw;border:1px solid rgb(var(--contrast-400));padding-right:0.125rem;padding-left:0.125rem;max-width:calc(100% - 2rem);box-shadow:var(--shadow-depth-16), var(--shadow-depth-8)}`;
+const actionBarCss = () => `:host(limel-action-bar){--action-bar-item-height:2rem;--limel-action-bar-item-text-color:var(       --action-bar-item-text-color,       rgb(var(--contrast-1100))   );--limel-action-bar-background-color:var(       --action-bar-background-color,       rgb(var(--contrast-100))   );box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.25rem;max-width:100%;border-radius:var(--action-bar-border-radius);background-color:var(--limel-action-bar-background-color)}:host(limel-action-bar),.items{gap:0.25rem}@media (pointer: coarse){:host(limel-action-bar),.items{gap:0.5rem}}.items{display:inline-flex;max-width:100%;min-width:0}:host(limel-action-bar.is-full-width){width:100%}:host(limel-action-bar.is-floating){--action-bar-border-radius:100vw;padding-right:0.125rem;padding-left:0.125rem;max-width:calc(100% - 2rem);box-shadow:var(--shadow-brighten-edges-inside), var(--shadow-depth-16), var(--shadow-depth-8)}`;
 
 const ActionBar = class {
     constructor(hostRef) {
@@ -130,7 +130,7 @@ const ActionBar = class {
 };
 ActionBar.style = actionBarCss();
 
-const actionBarItemCss = () => `@charset "UTF-8";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit}button:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover,button:not([disabled]):focus,button:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([disabled]):hover,button:not([disabled]):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed)}button:not([disabled]):hover,button:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:var(--limel-theme-default-font-size);padding:0 0.25rem}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}button.is-selected{color:var(--lime-primary-color, var(--limel-theme-primary-color)) !important}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}hr{all:unset;width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){hr{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}`;
+const actionBarItemCss = () => `@charset "UTF-8";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit}button:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--limel-action-bar-background-color)}button:not([disabled]):hover,button:not([disabled]):focus,button:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([disabled]):hover,button:not([disabled]):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-action-bar-item-text-color);background-color:color-mix(in srgb, var(--limel-action-bar-background-color), white 20%)}button:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed)}button:not([disabled]):hover,button:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:var(--limel-theme-default-font-size);padding:0 0.25rem}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}button.is-selected{color:var(--lime-primary-color, var(--limel-theme-primary-color)) !important}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}hr{all:unset;width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){hr{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}`;
 
 const ActionBarButton = class {
     constructor(hostRef) {

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

@@ -40529,6 +40529,7 @@ class GridLayout extends React.Component {
         });
     }
     render() {
+        var _a;
         const classes = ['limel-form-layout--grid'];
         const columns = this.getColumnCount(this.state.maxColumns);
         classes.push(`layout-${columns}-columns`);
@@ -40537,6 +40538,7 @@ class GridLayout extends React.Component {
         }
         return React.createElement('div', {
             className: classes.join(' '),
+            'data-schema-path': toSchemaPath((_a = this.props.schemaPath) !== null && _a !== void 0 ? _a : []),
             ref: this.elementRef,
         }, this.props.children);
     }
@@ -40608,9 +40610,10 @@ class RowLayout extends React.Component {
         this.elementRef = React.createRef();
     }
     render() {
-        const classes = ['limel-form-row--layout'];
+        var _a;
         return React.createElement('div', {
-            className: classes.join(' '),
+            className: 'limel-form-row--layout',
+            'data-schema-path': toSchemaPath((_a = this.props.schemaPath) !== null && _a !== void 0 ? _a : []),
             ref: this.elementRef,
         }, this.props.children.map((child, index) => {
             return React.createElement(Row, {
@@ -40642,7 +40645,7 @@ const ObjectFieldTemplate = (props) => {
     const arrayContext = reactExports.useContext(ArrayFieldContext);
     const id = props.fieldPathId.$id;
     if (arrayContext && id !== 'root') {
-        return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema));
+        return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
     }
     if (id === 'root' || !isCollapsible(props.schema)) {
         return renderFieldWithTitle(props);
@@ -40650,7 +40653,7 @@ const ObjectFieldTemplate = (props) => {
     return renderCollapsibleField(props);
 };
 function renderFieldWithTitle(props) {
-    return React.createElement(React.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema));
+    return React.createElement(React.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
 }
 function renderSectionHeader(props) {
     const help = getHelpComponent(props.schema);
@@ -40672,7 +40675,7 @@ function renderCollapsibleField(props) {
         id: getSchemaObjectPropertyPath(props.registry.formContext.schema, props.fieldPathId),
         'is-open': defaultOpen,
         invalid: invalid,
-    }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema));
+    }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
 }
 function getSchemaObjectPropertyPath(schema, fieldPathId) {
     var _a, _b;
@@ -40684,32 +40687,45 @@ function getSchemaObjectPropertyPath(schema, fieldPathId) {
         .join('');
     return `${rootPath}${subSchemaPath}`;
 }
-function renderProperties(properties, schema) {
+function renderProperties(properties, schema, schemaPath) {
     var _a;
     const layout = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.layout;
-    return renderLayout(properties, layout);
+    return renderLayout(properties, layout, schemaPath);
 }
-function renderLayout(properties, layout) {
+function renderLayout(properties, layout, schemaPath) {
     const type = (layout === null || layout === void 0 ? void 0 : layout.type) || 'default';
     const layouts = {
         default: renderDefaultLayout,
         grid: renderGridLayout,
         row: renderRowLayout,
     };
-    return layouts[type](properties, layout);
+    return layouts[type](properties, layout, schemaPath);
 }
-function renderDefaultLayout(properties) {
+function renderDefaultLayout(properties, _layout, schemaPath) {
     return React.createElement('div', {
         className: 'limel-form-layout--default',
+        'data-schema-path': toSchemaPath(schemaPath),
     }, properties.map((element) => element.content));
 }
-function renderGridLayout(properties, layout) {
+/**
+ * Render a schema path as a leading-slash string. Root → `/`,
+ * `['rules']` → `/rules`, `['rules', 'details']` → `/rules/details`.
+ *
+ * @param path the schema-path segments (typically `fieldPathId.path`).
+ */
+function toSchemaPath(path) {
+    return path.length === 0 ? '/' : `/${path.join('/')}`;
+}
+function renderGridLayout(properties, layout, schemaPath) {
     return React.createElement(GridLayout, {
         options: layout,
+        schemaPath: schemaPath,
     }, properties.map((element) => element.content));
 }
-function renderRowLayout(properties) {
-    return React.createElement(RowLayout, {}, properties.map((element) => element.content));
+function renderRowLayout(properties, _layout, schemaPath) {
+    return React.createElement(RowLayout, {
+        schemaPath: schemaPath,
+    }, properties.map((element) => element.content));
 }
 function isCollapsible(schema) {
     var _a;

package/dist/collection/components/action-bar/action-bar-item/action-bar-item.css

@@ -128,7 +128,7 @@ button:not([disabled]) {
   transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--limel-action-bar-item-text-color);
-  background-color: var(--action-bar-background-color);
+  background-color: var(--limel-action-bar-background-color);
 }
 button:not([disabled]):hover, button:not([disabled]):focus, button:not([disabled]):focus-visible {
   will-change: color, background-color, box-shadow, transform;
@@ -136,7 +136,7 @@ button:not([disabled]):hover, button:not([disabled]):focus, button:not([disabled
 button:not([disabled]):hover, button:not([disabled]):focus-visible {
   transform: translate3d(0, -0.04rem, 0);
   color: var(--limel-action-bar-item-text-color);
-  background-color: var(--action-bar-background-color);
+  background-color: color-mix(in srgb, var(--limel-action-bar-background-color), white 20%);
 }
 button:not([disabled]):hover {
   box-shadow: var(--button-shadow-hovered);
@@ -149,7 +149,7 @@ button:not([disabled]):active {
       1.16
   );
   transform: translate3d(0, 0.05rem, 0);
-  background-color: var(--action-bar-background-color);
+  background-color: var(--limel-action-bar-background-color);
   box-shadow: var(--button-shadow-inset-pressed);
 }
 button:not([disabled]):hover, button:not([disabled]):active {

package/dist/collection/components/action-bar/action-bar.css

@@ -11,13 +11,17 @@
       --action-bar-item-text-color,
       rgb(var(--contrast-1100))
   );
+  --limel-action-bar-background-color: var(
+      --action-bar-background-color,
+      rgb(var(--contrast-100))
+  );
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   padding: 0.125rem 0.25rem;
   max-width: 100%;
   border-radius: var(--action-bar-border-radius);
-  background-color: var(--action-bar-background-color, rgb(var(--contrast-100)));
+  background-color: var(--limel-action-bar-background-color);
 }
 
 :host(limel-action-bar),
@@ -43,9 +47,8 @@
 
 :host(limel-action-bar.is-floating) {
   --action-bar-border-radius: 100vw;
-  border: 1px solid rgb(var(--contrast-400));
   padding-right: 0.125rem;
   padding-left: 0.125rem;
   max-width: calc(100% - 2rem);
-  box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);
+  box-shadow: var(--shadow-brighten-edges-inside), var(--shadow-depth-16), var(--shadow-depth-8);
 }

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

@@ -465,3 +465,50 @@ export const nestedStringCustomComponentSchema = {
         },
     },
 };
+export const nestedSchemaPathSchema = {
+    type: 'object',
+    properties: {
+        section: {
+            type: 'object',
+            title: 'Section',
+            properties: {
+                details: {
+                    type: 'object',
+                    title: 'Details',
+                    properties: {
+                        contact: {
+                            type: 'object',
+                            title: 'Contact',
+                            properties: {
+                                name: { type: 'string', title: 'Name' },
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    },
+};
+export const nestedLayoutSchemaPathSchema = {
+    type: 'object',
+    properties: {
+        grid: {
+            type: 'object',
+            title: 'Grid',
+            properties: {
+                first: { type: 'string', title: 'First' },
+                second: { type: 'string', title: 'Second' },
+            },
+            lime: { layout: { type: 'grid', columns: 2 } },
+        },
+        row: {
+            type: 'object',
+            title: 'Row',
+            properties: {
+                third: { type: 'string', title: 'Third' },
+                fourth: { type: 'string', title: 'Fourth' },
+            },
+            lime: { layout: { type: 'row' } },
+        },
+    },
+};

package/dist/collection/components/form/templates/grid-layout.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { toSchemaPath } from "./object-field";
 const MAX_COLUMNS = 5;
 const MAX_COLUMN_WIDTH = 15;
 const PX_PER_REM = 16;
@@ -47,6 +48,7 @@ export class GridLayout extends React.Component {
         });
     }
     render() {
+        var _a;
         const classes = ['limel-form-layout--grid'];
         const columns = this.getColumnCount(this.state.maxColumns);
         classes.push(`layout-${columns}-columns`);
@@ -55,6 +57,7 @@ export class GridLayout extends React.Component {
         }
         return React.createElement('div', {
             className: classes.join(' '),
+            'data-schema-path': toSchemaPath((_a = this.props.schemaPath) !== null && _a !== void 0 ? _a : []),
             ref: this.elementRef,
         }, this.props.children);
     }

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

@@ -8,7 +8,7 @@ export const ObjectFieldTemplate = (props) => {
     const arrayContext = useContext(ArrayFieldContext);
     const id = props.fieldPathId.$id;
     if (arrayContext && id !== 'root') {
-        return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema));
+        return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
     }
     if (id === 'root' || !isCollapsible(props.schema)) {
         return renderFieldWithTitle(props);
@@ -16,7 +16,7 @@ export const ObjectFieldTemplate = (props) => {
     return renderCollapsibleField(props);
 };
 function renderFieldWithTitle(props) {
-    return React.createElement(React.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema));
+    return React.createElement(React.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
 }
 function renderSectionHeader(props) {
     const help = getHelpComponent(props.schema);
@@ -38,7 +38,7 @@ function renderCollapsibleField(props) {
         id: getSchemaObjectPropertyPath(props.registry.formContext.schema, props.fieldPathId),
         'is-open': defaultOpen,
         invalid: invalid,
-    }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema));
+    }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
 }
 function getSchemaObjectPropertyPath(schema, fieldPathId) {
     var _a, _b;
@@ -50,32 +50,45 @@ function getSchemaObjectPropertyPath(schema, fieldPathId) {
         .join('');
     return `${rootPath}${subSchemaPath}`;
 }
-function renderProperties(properties, schema) {
+function renderProperties(properties, schema, schemaPath) {
     var _a;
     const layout = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.layout;
-    return renderLayout(properties, layout);
+    return renderLayout(properties, layout, schemaPath);
 }
-function renderLayout(properties, layout) {
+function renderLayout(properties, layout, schemaPath) {
     const type = (layout === null || layout === void 0 ? void 0 : layout.type) || 'default';
     const layouts = {
         default: renderDefaultLayout,
         grid: renderGridLayout,
         row: renderRowLayout,
     };
-    return layouts[type](properties, layout);
+    return layouts[type](properties, layout, schemaPath);
 }
-function renderDefaultLayout(properties) {
+function renderDefaultLayout(properties, _layout, schemaPath) {
     return React.createElement('div', {
         className: 'limel-form-layout--default',
+        'data-schema-path': toSchemaPath(schemaPath),
     }, properties.map((element) => element.content));
 }
-function renderGridLayout(properties, layout) {
+/**
+ * Render a schema path as a leading-slash string. Root → `/`,
+ * `['rules']` → `/rules`, `['rules', 'details']` → `/rules/details`.
+ *
+ * @param path the schema-path segments (typically `fieldPathId.path`).
+ */
+export function toSchemaPath(path) {
+    return path.length === 0 ? '/' : `/${path.join('/')}`;
+}
+function renderGridLayout(properties, layout, schemaPath) {
     return React.createElement(GridLayout, {
         options: layout,
+        schemaPath: schemaPath,
     }, properties.map((element) => element.content));
 }
-function renderRowLayout(properties) {
-    return React.createElement(RowLayout, {}, properties.map((element) => element.content));
+function renderRowLayout(properties, _layout, schemaPath) {
+    return React.createElement(RowLayout, {
+        schemaPath: schemaPath,
+    }, properties.map((element) => element.content));
 }
 function isCollapsible(schema) {
     var _a;

package/dist/collection/components/form/templates/row-layout.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { Row } from "../row/row";
+import { toSchemaPath } from "./object-field";
 export class RowLayout extends React.Component {
     constructor(props) {
         super(props);
@@ -7,9 +8,10 @@ export class RowLayout extends React.Component {
         this.elementRef = React.createRef();
     }
     render() {
-        const classes = ['limel-form-row--layout'];
+        var _a;
         return React.createElement('div', {
-            className: classes.join(' '),
+            className: 'limel-form-row--layout',
+            'data-schema-path': toSchemaPath((_a = this.props.schemaPath) !== null && _a !== void 0 ? _a : []),
             ref: this.elementRef,
         }, this.props.children.map((child, index) => {
             return React.createElement(Row, {

package/dist/esm/limel-action-bar_3.entry.js

@@ -5,7 +5,7 @@ import { c as createRandomString } from './random-string-JbKhhoXs.js';
 import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-BgTwPGeH.js';
 import { b as getIconColor, d as getIconTitle, g as getIconName } from './get-icon-props-CgNJbSP4.js';
 
-const actionBarCss = () => `:host(limel-action-bar){--action-bar-item-height:2rem;--limel-action-bar-item-text-color:var(       --action-bar-item-text-color,       rgb(var(--contrast-1100))   );box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.25rem;max-width:100%;border-radius:var(--action-bar-border-radius);background-color:var(--action-bar-background-color, rgb(var(--contrast-100)))}:host(limel-action-bar),.items{gap:0.25rem}@media (pointer: coarse){:host(limel-action-bar),.items{gap:0.5rem}}.items{display:inline-flex;max-width:100%;min-width:0}:host(limel-action-bar.is-full-width){width:100%}:host(limel-action-bar.is-floating){--action-bar-border-radius:100vw;border:1px solid rgb(var(--contrast-400));padding-right:0.125rem;padding-left:0.125rem;max-width:calc(100% - 2rem);box-shadow:var(--shadow-depth-16), var(--shadow-depth-8)}`;
+const actionBarCss = () => `:host(limel-action-bar){--action-bar-item-height:2rem;--limel-action-bar-item-text-color:var(       --action-bar-item-text-color,       rgb(var(--contrast-1100))   );--limel-action-bar-background-color:var(       --action-bar-background-color,       rgb(var(--contrast-100))   );box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.25rem;max-width:100%;border-radius:var(--action-bar-border-radius);background-color:var(--limel-action-bar-background-color)}:host(limel-action-bar),.items{gap:0.25rem}@media (pointer: coarse){:host(limel-action-bar),.items{gap:0.5rem}}.items{display:inline-flex;max-width:100%;min-width:0}:host(limel-action-bar.is-full-width){width:100%}:host(limel-action-bar.is-floating){--action-bar-border-radius:100vw;padding-right:0.125rem;padding-left:0.125rem;max-width:calc(100% - 2rem);box-shadow:var(--shadow-brighten-edges-inside), var(--shadow-depth-16), var(--shadow-depth-8)}`;
 
 const ActionBar = class {
     constructor(hostRef) {
@@ -128,7 +128,7 @@ const ActionBar = class {
 };
 ActionBar.style = actionBarCss();
 
-const actionBarItemCss = () => `@charset "UTF-8";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit}button:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover,button:not([disabled]):focus,button:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([disabled]):hover,button:not([disabled]):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed)}button:not([disabled]):hover,button:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:var(--limel-theme-default-font-size);padding:0 0.25rem}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}button.is-selected{color:var(--lime-primary-color, var(--limel-theme-primary-color)) !important}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}hr{all:unset;width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){hr{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}`;
+const actionBarItemCss = () => `@charset "UTF-8";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit}button:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--limel-action-bar-background-color)}button:not([disabled]):hover,button:not([disabled]):focus,button:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([disabled]):hover,button:not([disabled]):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-action-bar-item-text-color);background-color:color-mix(in srgb, var(--limel-action-bar-background-color), white 20%)}button:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed)}button:not([disabled]):hover,button:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:var(--limel-theme-default-font-size);padding:0 0.25rem}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}button.is-selected{color:var(--lime-primary-color, var(--limel-theme-primary-color)) !important}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}hr{all:unset;width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){hr{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}`;
 
 const ActionBarButton = class {
     constructor(hostRef) {

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

@@ -40527,6 +40527,7 @@ class GridLayout extends React.Component {
         });
     }
     render() {
+        var _a;
         const classes = ['limel-form-layout--grid'];
         const columns = this.getColumnCount(this.state.maxColumns);
         classes.push(`layout-${columns}-columns`);
@@ -40535,6 +40536,7 @@ class GridLayout extends React.Component {
         }
         return React.createElement('div', {
             className: classes.join(' '),
+            'data-schema-path': toSchemaPath((_a = this.props.schemaPath) !== null && _a !== void 0 ? _a : []),
             ref: this.elementRef,
         }, this.props.children);
     }
@@ -40606,9 +40608,10 @@ class RowLayout extends React.Component {
         this.elementRef = React.createRef();
     }
     render() {
-        const classes = ['limel-form-row--layout'];
+        var _a;
         return React.createElement('div', {
-            className: classes.join(' '),
+            className: 'limel-form-row--layout',
+            'data-schema-path': toSchemaPath((_a = this.props.schemaPath) !== null && _a !== void 0 ? _a : []),
             ref: this.elementRef,
         }, this.props.children.map((child, index) => {
             return React.createElement(Row, {
@@ -40640,7 +40643,7 @@ const ObjectFieldTemplate = (props) => {
     const arrayContext = reactExports.useContext(ArrayFieldContext);
     const id = props.fieldPathId.$id;
     if (arrayContext && id !== 'root') {
-        return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema));
+        return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
     }
     if (id === 'root' || !isCollapsible(props.schema)) {
         return renderFieldWithTitle(props);
@@ -40648,7 +40651,7 @@ const ObjectFieldTemplate = (props) => {
     return renderCollapsibleField(props);
 };
 function renderFieldWithTitle(props) {
-    return React.createElement(React.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema));
+    return React.createElement(React.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
 }
 function renderSectionHeader(props) {
     const help = getHelpComponent(props.schema);
@@ -40670,7 +40673,7 @@ function renderCollapsibleField(props) {
         id: getSchemaObjectPropertyPath(props.registry.formContext.schema, props.fieldPathId),
         'is-open': defaultOpen,
         invalid: invalid,
-    }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema));
+    }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
 }
 function getSchemaObjectPropertyPath(schema, fieldPathId) {
     var _a, _b;
@@ -40682,32 +40685,45 @@ function getSchemaObjectPropertyPath(schema, fieldPathId) {
         .join('');
     return `${rootPath}${subSchemaPath}`;
 }
-function renderProperties(properties, schema) {
+function renderProperties(properties, schema, schemaPath) {
     var _a;
     const layout = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.layout;
-    return renderLayout(properties, layout);
+    return renderLayout(properties, layout, schemaPath);
 }
-function renderLayout(properties, layout) {
+function renderLayout(properties, layout, schemaPath) {
     const type = (layout === null || layout === void 0 ? void 0 : layout.type) || 'default';
     const layouts = {
         default: renderDefaultLayout,
         grid: renderGridLayout,
         row: renderRowLayout,
     };
-    return layouts[type](properties, layout);
+    return layouts[type](properties, layout, schemaPath);
 }
-function renderDefaultLayout(properties) {
+function renderDefaultLayout(properties, _layout, schemaPath) {
     return React.createElement('div', {
         className: 'limel-form-layout--default',
+        'data-schema-path': toSchemaPath(schemaPath),
     }, properties.map((element) => element.content));
 }
-function renderGridLayout(properties, layout) {
+/**
+ * Render a schema path as a leading-slash string. Root → `/`,
+ * `['rules']` → `/rules`, `['rules', 'details']` → `/rules/details`.
+ *
+ * @param path the schema-path segments (typically `fieldPathId.path`).
+ */
+function toSchemaPath(path) {
+    return path.length === 0 ? '/' : `/${path.join('/')}`;
+}
+function renderGridLayout(properties, layout, schemaPath) {
     return React.createElement(GridLayout, {
         options: layout,
+        schemaPath: schemaPath,
     }, properties.map((element) => element.content));
 }
-function renderRowLayout(properties) {
-    return React.createElement(RowLayout, {}, properties.map((element) => element.content));
+function renderRowLayout(properties, _layout, schemaPath) {
+    return React.createElement(RowLayout, {
+        schemaPath: schemaPath,
+    }, properties.map((element) => element.content));
 }
 function isCollapsible(schema) {
     var _a;