@limetech/lime-elements 39.30.0 → 39.31.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/limel-action-bar_3.cjs.entry.js +2 -2
  3. package/dist/cjs/limel-form.cjs.entry.js +29 -13
  4. package/dist/collection/components/action-bar/action-bar-item/action-bar-item.css +3 -3
  5. package/dist/collection/components/action-bar/action-bar.css +6 -3
  6. package/dist/collection/components/form/form.test-schemas.js +47 -0
  7. package/dist/collection/components/form/templates/grid-layout.js +3 -0
  8. package/dist/collection/components/form/templates/object-field.js +24 -11
  9. package/dist/collection/components/form/templates/row-layout.js +4 -2
  10. package/dist/esm/limel-action-bar_3.entry.js +2 -2
  11. package/dist/esm/limel-form.entry.js +29 -13
  12. package/dist/lime-elements/lime-elements.esm.js +1 -1
  13. package/dist/lime-elements/{p-d8b3e0ad.entry.js → p-9a08f55a.entry.js} +1 -1
  14. package/dist/lime-elements/p-fa0d7b8c.entry.js +1 -0
  15. package/dist/types/components/form/form.test-schemas.d.ts +2 -0
  16. package/dist/types/components/form/templates/grid-layout.d.ts +2 -0
  17. package/dist/types/components/form/templates/object-field.d.ts +7 -0
  18. package/dist/types/components/form/templates/row-layout.d.ts +8 -3
  19. package/package.json +9 -4
  20. package/dist/lime-elements/p-d23af300.entry.js +0 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,18 @@
1
+ ## [39.31.1](https://github.com/Lundalogik/lime-elements/compare/v39.31.0...v39.31.1) (2026-06-08)
2
+
3
+ ### Bug Fixes
4
+
5
+
6
+ * **action-bar:** lighten item background on hover ([2e04263](https://github.com/Lundalogik/lime-elements/commit/2e0426398005eb58c8213d4b3ead7a705ed86ebd))
7
+ * **action-bar:** replace sharp borders with a softer inset shadow when floating ([b031e43](https://github.com/Lundalogik/lime-elements/commit/b031e43a2fde4eafb584e75c3355dc232b64a020))
8
+
9
+ ## [39.31.0](https://github.com/Lundalogik/lime-elements/compare/v39.30.0...v39.31.0) (2026-06-08)
10
+
11
+ ### Features
12
+
13
+
14
+ * **form:** emit data-schema-path on layout wrappers ([cd5fb31](https://github.com/Lundalogik/lime-elements/commit/cd5fb3144cff526f71e669cb23bc73fa6f82f358))
15
+
1
16
  ## [39.30.0](https://github.com/Lundalogik/lime-elements/compare/v39.29.3...v39.30.0) (2026-06-05)
2
17
 
3
18
  ### Features
package/dist/cjs/limel-action-bar_3.cjs.entry.js CHANGED
@@ -7,7 +7,7 @@ var randomString = require('./random-string-BTzDB2ee.js');
7
7
  var makeEnterClickable = require('./make-enter-clickable-NuTMC9MU.js');
8
8
  var getIconProps = require('./get-icon-props-CwpDdQDI.js');
9
9
 
10
- 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)}`;
10
+ 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)}`;
11
11
 
12
12
  const ActionBar = class {
13
13
  constructor(hostRef) {
@@ -130,7 +130,7 @@ const ActionBar = class {
130
130
  };
131
131
  ActionBar.style = actionBarCss();
132
132
 
133
- 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}}`;
133
+ 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}}`;
134
134
 
135
135
  const ActionBarButton = class {
136
136
  constructor(hostRef) {
package/dist/cjs/limel-form.cjs.entry.js CHANGED
@@ -40529,6 +40529,7 @@ class GridLayout extends React.Component {
40529
40529
  });
40530
40530
  }
40531
40531
  render() {
40532
+ var _a;
40532
40533
  const classes = ['limel-form-layout--grid'];
40533
40534
  const columns = this.getColumnCount(this.state.maxColumns);
40534
40535
  classes.push(`layout-${columns}-columns`);
@@ -40537,6 +40538,7 @@ class GridLayout extends React.Component {
40537
40538
  }
40538
40539
  return React.createElement('div', {
40539
40540
  className: classes.join(' '),
40541
+ 'data-schema-path': toSchemaPath((_a = this.props.schemaPath) !== null && _a !== void 0 ? _a : []),
40540
40542
  ref: this.elementRef,
40541
40543
  }, this.props.children);
40542
40544
  }
@@ -40608,9 +40610,10 @@ class RowLayout extends React.Component {
40608
40610
  this.elementRef = React.createRef();
40609
40611
  }
40610
40612
  render() {
40611
- const classes = ['limel-form-row--layout'];
40613
+ var _a;
40612
40614
  return React.createElement('div', {
40613
- className: classes.join(' '),
40615
+ className: 'limel-form-row--layout',
40616
+ 'data-schema-path': toSchemaPath((_a = this.props.schemaPath) !== null && _a !== void 0 ? _a : []),
40614
40617
  ref: this.elementRef,
40615
40618
  }, this.props.children.map((child, index) => {
40616
40619
  return React.createElement(Row, {
@@ -40642,7 +40645,7 @@ const ObjectFieldTemplate = (props) => {
40642
40645
  const arrayContext = reactExports.useContext(ArrayFieldContext);
40643
40646
  const id = props.fieldPathId.$id;
40644
40647
  if (arrayContext && id !== 'root') {
40645
- return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema));
40648
+ return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
40646
40649
  }
40647
40650
  if (id === 'root' || !isCollapsible(props.schema)) {
40648
40651
  return renderFieldWithTitle(props);
@@ -40650,7 +40653,7 @@ const ObjectFieldTemplate = (props) => {
40650
40653
  return renderCollapsibleField(props);
40651
40654
  };
40652
40655
  function renderFieldWithTitle(props) {
40653
- return React.createElement(React.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema));
40656
+ return React.createElement(React.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
40654
40657
  }
40655
40658
  function renderSectionHeader(props) {
40656
40659
  const help = getHelpComponent(props.schema);
@@ -40672,7 +40675,7 @@ function renderCollapsibleField(props) {
40672
40675
  id: getSchemaObjectPropertyPath(props.registry.formContext.schema, props.fieldPathId),
40673
40676
  'is-open': defaultOpen,
40674
40677
  invalid: invalid,
40675
- }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema));
40678
+ }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
40676
40679
  }
40677
40680
  function getSchemaObjectPropertyPath(schema, fieldPathId) {
40678
40681
  var _a, _b;
@@ -40684,32 +40687,45 @@ function getSchemaObjectPropertyPath(schema, fieldPathId) {
40684
40687
  .join('');
40685
40688
  return `${rootPath}${subSchemaPath}`;
40686
40689
  }
40687
- function renderProperties(properties, schema) {
40690
+ function renderProperties(properties, schema, schemaPath) {
40688
40691
  var _a;
40689
40692
  const layout = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.layout;
40690
- return renderLayout(properties, layout);
40693
+ return renderLayout(properties, layout, schemaPath);
40691
40694
  }
40692
- function renderLayout(properties, layout) {
40695
+ function renderLayout(properties, layout, schemaPath) {
40693
40696
  const type = (layout === null || layout === void 0 ? void 0 : layout.type) || 'default';
40694
40697
  const layouts = {
40695
40698
  default: renderDefaultLayout,
40696
40699
  grid: renderGridLayout,
40697
40700
  row: renderRowLayout,
40698
40701
  };
40699
- return layouts[type](properties, layout);
40702
+ return layouts[type](properties, layout, schemaPath);
40700
40703
  }
40701
- function renderDefaultLayout(properties) {
40704
+ function renderDefaultLayout(properties, _layout, schemaPath) {
40702
40705
  return React.createElement('div', {
40703
40706
  className: 'limel-form-layout--default',
40707
+ 'data-schema-path': toSchemaPath(schemaPath),
40704
40708
  }, properties.map((element) => element.content));
40705
40709
  }
40706
- function renderGridLayout(properties, layout) {
40710
+ /**
40711
+ * Render a schema path as a leading-slash string. Root → `/`,
40712
+ * `['rules']` → `/rules`, `['rules', 'details']` → `/rules/details`.
40713
+ *
40714
+ * @param path the schema-path segments (typically `fieldPathId.path`).
40715
+ */
40716
+ function toSchemaPath(path) {
40717
+ return path.length === 0 ? '/' : `/${path.join('/')}`;
40718
+ }
40719
+ function renderGridLayout(properties, layout, schemaPath) {
40707
40720
  return React.createElement(GridLayout, {
40708
40721
  options: layout,
40722
+ schemaPath: schemaPath,
40709
40723
  }, properties.map((element) => element.content));
40710
40724
  }
40711
- function renderRowLayout(properties) {
40712
- return React.createElement(RowLayout, {}, properties.map((element) => element.content));
40725
+ function renderRowLayout(properties, _layout, schemaPath) {
40726
+ return React.createElement(RowLayout, {
40727
+ schemaPath: schemaPath,
40728
+ }, properties.map((element) => element.content));
40713
40729
  }
40714
40730
  function isCollapsible(schema) {
40715
40731
  var _a;
package/dist/collection/components/action-bar/action-bar-item/action-bar-item.css CHANGED
@@ -128,7 +128,7 @@ button:not([disabled]) {
128
128
  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);
129
129
  cursor: pointer;
130
130
  color: var(--limel-action-bar-item-text-color);
131
- background-color: var(--action-bar-background-color);
131
+ background-color: var(--limel-action-bar-background-color);
132
132
  }
133
133
  button:not([disabled]):hover, button:not([disabled]):focus, button:not([disabled]):focus-visible {
134
134
  will-change: color, background-color, box-shadow, transform;
@@ -136,7 +136,7 @@ button:not([disabled]):hover, button:not([disabled]):focus, button:not([disabled
136
136
  button:not([disabled]):hover, button:not([disabled]):focus-visible {
137
137
  transform: translate3d(0, -0.04rem, 0);
138
138
  color: var(--limel-action-bar-item-text-color);
139
- background-color: var(--action-bar-background-color);
139
+ background-color: color-mix(in srgb, var(--limel-action-bar-background-color), white 20%);
140
140
  }
141
141
  button:not([disabled]):hover {
142
142
  box-shadow: var(--button-shadow-hovered);
@@ -149,7 +149,7 @@ button:not([disabled]):active {
149
149
  1.16
150
150
  );
151
151
  transform: translate3d(0, 0.05rem, 0);
152
- background-color: var(--action-bar-background-color);
152
+ background-color: var(--limel-action-bar-background-color);
153
153
  box-shadow: var(--button-shadow-inset-pressed);
154
154
  }
155
155
  button:not([disabled]):hover, button:not([disabled]):active {
package/dist/collection/components/action-bar/action-bar.css CHANGED
@@ -11,13 +11,17 @@
11
11
  --action-bar-item-text-color,
12
12
  rgb(var(--contrast-1100))
13
13
  );
14
+ --limel-action-bar-background-color: var(
15
+ --action-bar-background-color,
16
+ rgb(var(--contrast-100))
17
+ );
14
18
  box-sizing: border-box;
15
19
  display: inline-flex;
16
20
  align-items: center;
17
21
  padding: 0.125rem 0.25rem;
18
22
  max-width: 100%;
19
23
  border-radius: var(--action-bar-border-radius);
20
- background-color: var(--action-bar-background-color, rgb(var(--contrast-100)));
24
+ background-color: var(--limel-action-bar-background-color);
21
25
  }
22
26
 
23
27
  :host(limel-action-bar),
@@ -43,9 +47,8 @@
43
47
 
44
48
  :host(limel-action-bar.is-floating) {
45
49
  --action-bar-border-radius: 100vw;
46
- border: 1px solid rgb(var(--contrast-400));
47
50
  padding-right: 0.125rem;
48
51
  padding-left: 0.125rem;
49
52
  max-width: calc(100% - 2rem);
50
- box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);
53
+ box-shadow: var(--shadow-brighten-edges-inside), var(--shadow-depth-16), var(--shadow-depth-8);
51
54
  }
package/dist/collection/components/form/form.test-schemas.js CHANGED
@@ -465,3 +465,50 @@ export const nestedStringCustomComponentSchema = {
465
465
  },
466
466
  },
467
467
  };
468
+ export const nestedSchemaPathSchema = {
469
+ type: 'object',
470
+ properties: {
471
+ section: {
472
+ type: 'object',
473
+ title: 'Section',
474
+ properties: {
475
+ details: {
476
+ type: 'object',
477
+ title: 'Details',
478
+ properties: {
479
+ contact: {
480
+ type: 'object',
481
+ title: 'Contact',
482
+ properties: {
483
+ name: { type: 'string', title: 'Name' },
484
+ },
485
+ },
486
+ },
487
+ },
488
+ },
489
+ },
490
+ },
491
+ };
492
+ export const nestedLayoutSchemaPathSchema = {
493
+ type: 'object',
494
+ properties: {
495
+ grid: {
496
+ type: 'object',
497
+ title: 'Grid',
498
+ properties: {
499
+ first: { type: 'string', title: 'First' },
500
+ second: { type: 'string', title: 'Second' },
501
+ },
502
+ lime: { layout: { type: 'grid', columns: 2 } },
503
+ },
504
+ row: {
505
+ type: 'object',
506
+ title: 'Row',
507
+ properties: {
508
+ third: { type: 'string', title: 'Third' },
509
+ fourth: { type: 'string', title: 'Fourth' },
510
+ },
511
+ lime: { layout: { type: 'row' } },
512
+ },
513
+ },
514
+ };
package/dist/collection/components/form/templates/grid-layout.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import { toSchemaPath } from "./object-field";
2
3
  const MAX_COLUMNS = 5;
3
4
  const MAX_COLUMN_WIDTH = 15;
4
5
  const PX_PER_REM = 16;
@@ -47,6 +48,7 @@ export class GridLayout extends React.Component {
47
48
  });
48
49
  }
49
50
  render() {
51
+ var _a;
50
52
  const classes = ['limel-form-layout--grid'];
51
53
  const columns = this.getColumnCount(this.state.maxColumns);
52
54
  classes.push(`layout-${columns}-columns`);
@@ -55,6 +57,7 @@ export class GridLayout extends React.Component {
55
57
  }
56
58
  return React.createElement('div', {
57
59
  className: classes.join(' '),
60
+ 'data-schema-path': toSchemaPath((_a = this.props.schemaPath) !== null && _a !== void 0 ? _a : []),
58
61
  ref: this.elementRef,
59
62
  }, this.props.children);
60
63
  }
package/dist/collection/components/form/templates/object-field.js CHANGED
@@ -8,7 +8,7 @@ export const ObjectFieldTemplate = (props) => {
8
8
  const arrayContext = useContext(ArrayFieldContext);
9
9
  const id = props.fieldPathId.$id;
10
10
  if (arrayContext && id !== 'root') {
11
- return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema));
11
+ return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
12
12
  }
13
13
  if (id === 'root' || !isCollapsible(props.schema)) {
14
14
  return renderFieldWithTitle(props);
@@ -16,7 +16,7 @@ export const ObjectFieldTemplate = (props) => {
16
16
  return renderCollapsibleField(props);
17
17
  };
18
18
  function renderFieldWithTitle(props) {
19
- return React.createElement(React.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema));
19
+ return React.createElement(React.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
20
20
  }
21
21
  function renderSectionHeader(props) {
22
22
  const help = getHelpComponent(props.schema);
@@ -38,7 +38,7 @@ function renderCollapsibleField(props) {
38
38
  id: getSchemaObjectPropertyPath(props.registry.formContext.schema, props.fieldPathId),
39
39
  'is-open': defaultOpen,
40
40
  invalid: invalid,
41
- }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema));
41
+ }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
42
42
  }
43
43
  function getSchemaObjectPropertyPath(schema, fieldPathId) {
44
44
  var _a, _b;
@@ -50,32 +50,45 @@ function getSchemaObjectPropertyPath(schema, fieldPathId) {
50
50
  .join('');
51
51
  return `${rootPath}${subSchemaPath}`;
52
52
  }
53
- function renderProperties(properties, schema) {
53
+ function renderProperties(properties, schema, schemaPath) {
54
54
  var _a;
55
55
  const layout = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.layout;
56
- return renderLayout(properties, layout);
56
+ return renderLayout(properties, layout, schemaPath);
57
57
  }
58
- function renderLayout(properties, layout) {
58
+ function renderLayout(properties, layout, schemaPath) {
59
59
  const type = (layout === null || layout === void 0 ? void 0 : layout.type) || 'default';
60
60
  const layouts = {
61
61
  default: renderDefaultLayout,
62
62
  grid: renderGridLayout,
63
63
  row: renderRowLayout,
64
64
  };
65
- return layouts[type](properties, layout);
65
+ return layouts[type](properties, layout, schemaPath);
66
66
  }
67
- function renderDefaultLayout(properties) {
67
+ function renderDefaultLayout(properties, _layout, schemaPath) {
68
68
  return React.createElement('div', {
69
69
  className: 'limel-form-layout--default',
70
+ 'data-schema-path': toSchemaPath(schemaPath),
70
71
  }, properties.map((element) => element.content));
71
72
  }
72
- function renderGridLayout(properties, layout) {
73
+ /**
74
+ * Render a schema path as a leading-slash string. Root → `/`,
75
+ * `['rules']` → `/rules`, `['rules', 'details']` → `/rules/details`.
76
+ *
77
+ * @param path the schema-path segments (typically `fieldPathId.path`).
78
+ */
79
+ export function toSchemaPath(path) {
80
+ return path.length === 0 ? '/' : `/${path.join('/')}`;
81
+ }
82
+ function renderGridLayout(properties, layout, schemaPath) {
73
83
  return React.createElement(GridLayout, {
74
84
  options: layout,
85
+ schemaPath: schemaPath,
75
86
  }, properties.map((element) => element.content));
76
87
  }
77
- function renderRowLayout(properties) {
78
- return React.createElement(RowLayout, {}, properties.map((element) => element.content));
88
+ function renderRowLayout(properties, _layout, schemaPath) {
89
+ return React.createElement(RowLayout, {
90
+ schemaPath: schemaPath,
91
+ }, properties.map((element) => element.content));
79
92
  }
80
93
  function isCollapsible(schema) {
81
94
  var _a;
package/dist/collection/components/form/templates/row-layout.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import { Row } from "../row/row";
3
+ import { toSchemaPath } from "./object-field";
3
4
  export class RowLayout extends React.Component {
4
5
  constructor(props) {
5
6
  super(props);
@@ -7,9 +8,10 @@ export class RowLayout extends React.Component {
7
8
  this.elementRef = React.createRef();
8
9
  }
9
10
  render() {
10
- const classes = ['limel-form-row--layout'];
11
+ var _a;
11
12
  return React.createElement('div', {
12
- className: classes.join(' '),
13
+ className: 'limel-form-row--layout',
14
+ 'data-schema-path': toSchemaPath((_a = this.props.schemaPath) !== null && _a !== void 0 ? _a : []),
13
15
  ref: this.elementRef,
14
16
  }, this.props.children.map((child, index) => {
15
17
  return React.createElement(Row, {
package/dist/esm/limel-action-bar_3.entry.js CHANGED
@@ -5,7 +5,7 @@ import { c as createRandomString } from './random-string-JbKhhoXs.js';
5
5
  import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-BgTwPGeH.js';
6
6
  import { b as getIconColor, d as getIconTitle, g as getIconName } from './get-icon-props-CgNJbSP4.js';
7
7
 
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)) );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)}`;
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)}`;
9
9
 
10
10
  const ActionBar = class {
11
11
  constructor(hostRef) {
@@ -128,7 +128,7 @@ const ActionBar = class {
128
128
  };
129
129
  ActionBar.style = actionBarCss();
130
130
 
131
- 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}}`;
131
+ 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}}`;
132
132
 
133
133
  const ActionBarButton = class {
134
134
  constructor(hostRef) {
package/dist/esm/limel-form.entry.js CHANGED
@@ -40527,6 +40527,7 @@ class GridLayout extends React.Component {
40527
40527
  });
40528
40528
  }
40529
40529
  render() {
40530
+ var _a;
40530
40531
  const classes = ['limel-form-layout--grid'];
40531
40532
  const columns = this.getColumnCount(this.state.maxColumns);
40532
40533
  classes.push(`layout-${columns}-columns`);
@@ -40535,6 +40536,7 @@ class GridLayout extends React.Component {
40535
40536
  }
40536
40537
  return React.createElement('div', {
40537
40538
  className: classes.join(' '),
40539
+ 'data-schema-path': toSchemaPath((_a = this.props.schemaPath) !== null && _a !== void 0 ? _a : []),
40538
40540
  ref: this.elementRef,
40539
40541
  }, this.props.children);
40540
40542
  }
@@ -40606,9 +40608,10 @@ class RowLayout extends React.Component {
40606
40608
  this.elementRef = React.createRef();
40607
40609
  }
40608
40610
  render() {
40609
- const classes = ['limel-form-row--layout'];
40611
+ var _a;
40610
40612
  return React.createElement('div', {
40611
- className: classes.join(' '),
40613
+ className: 'limel-form-row--layout',
40614
+ 'data-schema-path': toSchemaPath((_a = this.props.schemaPath) !== null && _a !== void 0 ? _a : []),
40612
40615
  ref: this.elementRef,
40613
40616
  }, this.props.children.map((child, index) => {
40614
40617
  return React.createElement(Row, {
@@ -40640,7 +40643,7 @@ const ObjectFieldTemplate = (props) => {
40640
40643
  const arrayContext = reactExports.useContext(ArrayFieldContext);
40641
40644
  const id = props.fieldPathId.$id;
40642
40645
  if (arrayContext && id !== 'root') {
40643
- return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema));
40646
+ return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
40644
40647
  }
40645
40648
  if (id === 'root' || !isCollapsible(props.schema)) {
40646
40649
  return renderFieldWithTitle(props);
@@ -40648,7 +40651,7 @@ const ObjectFieldTemplate = (props) => {
40648
40651
  return renderCollapsibleField(props);
40649
40652
  };
40650
40653
  function renderFieldWithTitle(props) {
40651
- return React.createElement(React.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema));
40654
+ return React.createElement(React.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
40652
40655
  }
40653
40656
  function renderSectionHeader(props) {
40654
40657
  const help = getHelpComponent(props.schema);
@@ -40670,7 +40673,7 @@ function renderCollapsibleField(props) {
40670
40673
  id: getSchemaObjectPropertyPath(props.registry.formContext.schema, props.fieldPathId),
40671
40674
  'is-open': defaultOpen,
40672
40675
  invalid: invalid,
40673
- }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema));
40676
+ }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
40674
40677
  }
40675
40678
  function getSchemaObjectPropertyPath(schema, fieldPathId) {
40676
40679
  var _a, _b;
@@ -40682,32 +40685,45 @@ function getSchemaObjectPropertyPath(schema, fieldPathId) {
40682
40685
  .join('');
40683
40686
  return `${rootPath}${subSchemaPath}`;
40684
40687
  }
40685
- function renderProperties(properties, schema) {
40688
+ function renderProperties(properties, schema, schemaPath) {
40686
40689
  var _a;
40687
40690
  const layout = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.layout;
40688
- return renderLayout(properties, layout);
40691
+ return renderLayout(properties, layout, schemaPath);
40689
40692
  }
40690
- function renderLayout(properties, layout) {
40693
+ function renderLayout(properties, layout, schemaPath) {
40691
40694
  const type = (layout === null || layout === void 0 ? void 0 : layout.type) || 'default';
40692
40695
  const layouts = {
40693
40696
  default: renderDefaultLayout,
40694
40697
  grid: renderGridLayout,
40695
40698
  row: renderRowLayout,
40696
40699
  };
40697
- return layouts[type](properties, layout);
40700
+ return layouts[type](properties, layout, schemaPath);
40698
40701
  }
40699
- function renderDefaultLayout(properties) {
40702
+ function renderDefaultLayout(properties, _layout, schemaPath) {
40700
40703
  return React.createElement('div', {
40701
40704
  className: 'limel-form-layout--default',
40705
+ 'data-schema-path': toSchemaPath(schemaPath),
40702
40706
  }, properties.map((element) => element.content));
40703
40707
  }
40704
- function renderGridLayout(properties, layout) {
40708
+ /**
40709
+ * Render a schema path as a leading-slash string. Root → `/`,
40710
+ * `['rules']` → `/rules`, `['rules', 'details']` → `/rules/details`.
40711
+ *
40712
+ * @param path the schema-path segments (typically `fieldPathId.path`).
40713
+ */
40714
+ function toSchemaPath(path) {
40715
+ return path.length === 0 ? '/' : `/${path.join('/')}`;
40716
+ }
40717
+ function renderGridLayout(properties, layout, schemaPath) {
40705
40718
  return React.createElement(GridLayout, {
40706
40719
  options: layout,
40720
+ schemaPath: schemaPath,
40707
40721
  }, properties.map((element) => element.content));
40708
40722
  }
40709
- function renderRowLayout(properties) {
40710
- return React.createElement(RowLayout, {}, properties.map((element) => element.content));
40723
+ function renderRowLayout(properties, _layout, schemaPath) {
40724
+ return React.createElement(RowLayout, {
40725
+ schemaPath: schemaPath,
40726
+ }, properties.map((element) => element.content));
40711
40727
  }
40712
40728
  function isCollapsible(schema) {
40713
40729
  var _a;