@limetech/lime-elements 40.15.0 → 40.16.0

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

@@ -1,30 +1,37 @@
 import { r as registerInstance, c as createEvent, h as h$1, a as getElement } from './index-BU9IJqli.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-B85MJLTf.js';
-import { t as toString$1, b as baseIteratee, g as get } from './_baseIteratee-CVz7aes3.js';
-import { i as isEmpty } from './isEmpty-BGVZ12Ea.js';
+import { b as baseIteratee, g as get } from './_baseIteratee-DM5xljbg.js';
+import { i as isEmpty } from './isEmpty-CvLNUkER.js';
+import { g as getHelpProps } from './help-props-DULV6dHr.js';
 import { b as baseGetTag } from './isObject-BJQylLSL.js';
-import { g as getPrototype } from './_getPrototype-B0kMNv1F.js';
+import { g as getPrototype } from './_getPrototype-CQlOogH0.js';
 import { i as isObjectLike } from './isObjectLike-oiMYqRQ0.js';
-import { b as baseSet, n as negate } from './_baseSet-BUAq8NGm.js';
-import { a as arrayIncludes, b as baseRest, c as baseFlatten, i as isArrayLikeObject, D as DragToReorder } from './drag-to-reorder-BXmXIwCa.js';
-import { s as setToArray, S as SetCache, c as cacheHas } from './_baseIsEqual-B_JRErB0.js';
-import { S as Set$1 } from './_getTag-BiAaLWvH.js';
-import { i as isEqual } from './isEqual-C-pK6AAU.js';
+import { n as negate } from './negate-ooVD-6_a.js';
+import { b as baseFlatten } from './_baseFlatten-mvFj07qD.js';
+import { a as arrayIncludes, b as baseRest, i as isArrayLikeObject, D as DragToReorder } from './drag-to-reorder-9gxiYkIo.js';
+import { s as setToArray, S as SetCache, c as cacheHas } from './_baseIsEqual-CJf575VC.js';
+import { S as Set$1 } from './_getTag-BTNY_Z_q.js';
+import { i as isEqual } from './isEqual-BIfg0KPc.js';
+import { t as toString$1 } from './hasIn-CKUl04DZ.js';
 import { m as moment } from './moment-_DadZLWp.js';
-import { c as cloneDeep } from './cloneDeep-Bcll-3f8.js';
+import { b as baseSet } from './_basePickBy-D_9Hus6l.js';
+import { c as cloneDeep } from './cloneDeep-BYrS7zqD.js';
 import { i as isMultiple } from './multiple-BylwpiM6.js';
 import { g as getFocusTarget } from './get-focus-target-BhoYaGlg.js';
 import { b as baseAssignValue } from './_assignValue-CEFvyZxO.js';
-import { b as baseForOwn } from './_baseForOwn-vKFWmmaS.js';
+import { b as baseForOwn } from './_baseForOwn-C3COyhQS.js';
+import './identity-CK4jS9_E.js';
 import './isArray-B8VKuhvH.js';
-import './isSymbol-ClAke5ga.js';
-import './_isIndex-B--C3qwe.js';
-import './isArrayLike-CyVGB489.js';
+import './_Map-LWJCQc-c.js';
+import './_getNative-COawFdVX.js';
 import './isFunction-9zQTeQI8.js';
-import './identity-CK4jS9_E.js';
+import './isArrayLike-wfLI14yj.js';
+import './isLength-BZrtP4vv.js';
 import './_defineProperty-C69Btzid.js';
-import './_getNative-COawFdVX.js';
+import './_arrayPush-NEl7BpFy.js';
 import './eq-CZ30nDJE.js';
+import './_isIndex-B--C3qwe.js';
+import './isSymbol-ClAke5ga.js';
 
 /**
  * This method returns `undefined`.
@@ -479,7 +486,7 @@ function baseUniq(array, iteratee, comparator) {
  * // => [2, 1]
  */
 var union$1 = baseRest(function(arrays) {
-  return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject));
+  return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true));
 });
 
 var react = {exports: {}};
@@ -44015,14 +44022,81 @@ function isType(input, type) {
 }
 
 /**
+ * @param level - any value
+ * @returns whether the value is a heading level, from `1` to `6`
+ */
+function isHeadingLevel(level) {
+    return (typeof level === 'number' &&
+        Number.isSafeInteger(level) &&
+        level >= 1 &&
+        level <= 6);
+}
+/**
+ * The heading level that a title at the current depth in the form gets.
+ */
+const HeadingLevelContext = React.createContext(1);
+/**
+ * @param level - a heading level
+ * @returns the level of the headings one step below, down to `h6`
+ */
+function nextHeadingLevel(level) {
+    return Math.min(level + 1, 6);
+}
+/**
+ * The title of a field, drawn with the heading level of its depth.
+ *
+ * @param props
+ * @param props.title - the title of the field
+ * @param props.description - the description of the field, in markdown
+ * @param props.help - the help of the field
+ */
+function Header({ title, description, help }) {
+    const headingLevel = reactExports.useContext(HeadingLevelContext);
+    return React.createElement('limel-form-header', {
+        heading: title,
+        headingLevel: headingLevel,
+        description: description,
+        help: help,
+    });
+}
+/**
+ * Gives the fields it wraps one heading level more than the level of the
+ * heading above them, if there is one.
  *
- * @param title
+ * @param props
+ * @param props.hasHeading - whether the fields are below a heading
+ * @param props.children - the fields
  */
-function renderTitle(title) {
-    if (!title) {
+function BelowHeading({ hasHeading, children, }) {
+    const level = reactExports.useContext(HeadingLevelContext);
+    return React.createElement(HeadingLevelContext.Provider, { value: hasHeading ? nextHeadingLevel(level) : level }, children);
+}
+
+/**
+ * Render the title of a field, with its description and help, as a
+ * heading.
+ *
+ * @param title - the title of the field
+ * @param description - the description of the field, in markdown
+ * @param help - the help of the field, as in `lime.help` of the schema
+ */
+function renderHeader(title, description, help) {
+    if (!title && !description && !help) {
         return;
     }
-    return React.createElement('h1', { className: 'mdc-typography mdc-typography--headline1' }, title);
+    return React.createElement(Header, { title, description, help });
+}
+/**
+ * Render a field with its header, followed by its content. The headings in
+ * the content are one level below the heading of the field.
+ *
+ * @param title - the title of the field
+ * @param description - the description of the field, in markdown
+ * @param help - the help of the field, as in `lime.help` of the schema
+ * @param content - the content of the field
+ */
+function renderSection(title, description, help, ...content) {
+    return React.createElement(React.Fragment, {}, renderHeader(title, description, help), React.createElement(BelowHeading, { hasHeading: !!title }, ...content));
 }
 /**
  *
@@ -44248,7 +44322,8 @@ class Row extends React.Component {
     }
     renderTitle() {
         var _a;
-        return React.createElement('h1', { className: 'title' }, (_a = this.schema) === null || _a === void 0 ? void 0 : _a.title);
+        const title = (_a = this.schema) === null || _a === void 0 ? void 0 : _a.title;
+        return React.createElement(title ? `h${this.context}` : 'div', { className: 'title' }, title);
     }
     renderDescription() {
         var _a;
@@ -44270,6 +44345,7 @@ class Row extends React.Component {
         return (_c = (_b = (_a = this.schema) === null || _a === void 0 ? void 0 : _a.lime) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.icon;
     }
 }
+Row.contextType = HeadingLevelContext;
 
 class RowLayout extends React.Component {
     constructor(props) {
@@ -44302,11 +44378,7 @@ function getHelpComponent(schema, extraProps) {
     if (!help) {
         return;
     }
-    if (typeof help === 'string') {
-        return React.createElement('limel-help', Object.assign({ value: help }, extraProps));
-    }
-    const helpProps = help;
-    return React.createElement('limel-help', Object.assign(Object.assign({}, helpProps), extraProps));
+    return React.createElement('limel-help', Object.assign(Object.assign({}, getHelpProps(help)), extraProps));
 }
 
 const ArrayFieldContext = reactExports.createContext(null);
@@ -44334,14 +44406,8 @@ const ObjectFieldTemplate = (props) => {
     return renderCollapsibleField(props);
 };
 function renderFieldWithTitle(props) {
-    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);
-    if (!help) {
-        return renderTitle(props.title);
-    }
-    return React.createElement(React.Fragment, {}, renderTitle(props.title), help);
+    var _a;
+    return renderSection(props.title, props.description, (_a = props.schema.lime) === null || _a === void 0 ? void 0 : _a.help, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
 }
 function renderCollapsibleField(props) {
     var _a;
@@ -44627,12 +44693,13 @@ class ArrayFieldTemplate extends React.Component {
         }
     }
     render() {
+        var _a;
         const orderedItems = this.getOrderedItems();
         const contextValue = this.getContextValue();
-        return React.createElement(ArrayFieldContext.Provider, { value: contextValue }, React.createElement('div', {}, renderTitle(this.props.title), getHelpComponent(this.props.schema), renderDescription(this.props.schema.description), React.createElement('div', {
+        return React.createElement(ArrayFieldContext.Provider, { value: contextValue }, React.createElement('div', {}, renderSection(this.props.title, this.props.schema.description, (_a = this.props.schema.lime) === null || _a === void 0 ? void 0 : _a.help, React.createElement('div', {
             className: 'array-items',
             ref: this.setContainer,
-        }, orderedItems), this.renderAddButton()));
+        }, orderedItems), this.renderAddButton())));
     }
     renderAddButton() {
         if (!this.props.canAdd) {
@@ -45668,7 +45735,7 @@ class ObjectField extends React.Component {
         if (!isCustomObjectSchema(this.props.schema)) {
             return React.createElement(BaseObjectField, this.props);
         }
-        return React.createElement(React.Fragment, {}, renderTitle(this.props.schema.title), renderDescription(this.props.schema.description), React.createElement(CodeEditor, this.props));
+        return React.createElement(React.Fragment, {}, renderHeader(this.props.schema.title, this.props.schema.description), React.createElement(CodeEditor, this.props));
     }
 }
 
@@ -46059,7 +46126,7 @@ function nextFrame() {
     return new Promise((resolve) => requestAnimationFrame(() => resolve()));
 }
 
-const formCss = () => `@charset "UTF-8";.limel-form-row--layout{--limel-form-row-border-radius:0.375rem;--limel-form-row-icon-size:1.75rem;--limel-form-row-main-information-gap:0.5rem;display:flex;flex-direction:column}.limel-form-row--layout .row{display:flex;gap:0.5rem;flex-direction:column;padding:0.5rem 1rem}.limel-form-row--layout .row:nth-child(odd){background-color:var(--form-background-color-of-odd-rows, rgb(var(--contrast-200)))}.limel-form-row--layout .row:nth-child(even){background-color:var(--form-background-color-of-even-rows, transparent)}.limel-form-row--layout .row:first-child{border-radius:var(--limel-form-row-border-radius) var(--limel-form-row-border-radius) 0 0}.limel-form-row--layout .row:last-child{border-radius:0 0 var(--limel-form-row-border-radius) var(--limel-form-row-border-radius)}.limel-form-row--layout .main-information{position:relative;display:flex;flex-direction:row;align-items:center;gap:var(--limel-form-row-main-information-gap);min-width:0}.limel-form-row--layout .main-information{position:relative}.limel-form-row--layout .main-information>.rjsf-field{position:unset}.limel-form-row--layout .main-information>.rjsf-field limel-help{top:0}.limel-form-row--layout limel-icon{color:rgb(var(--contrast-1200));width:var(--limel-form-row-icon-size);flex-shrink:0;min-width:0}.limel-form-row--layout .title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:normal;flex-grow:1;color:var(--limel-theme-on-surface-color);font-size:0.875rem}.limel-form-row--layout .description{margin:0;color:var(--limel-theme-text-secondary-on-background-color);font-size:var(--limel-theme-default-small-font-size);line-height:1.5}.limel-form-row--layout .has-icon .description{padding-left:calc(var(--limel-form-row-icon-size) + var(--limel-form-row-main-information-gap))}.limel-form-row--layout .rjsf-field{flex-shrink:0;display:flex;align-content:center}.limel-form-row--layout .rjsf-field limel-slider{min-width:8rem;display:block}*,*::after,*::before{box-sizing:border-box}.rjsf-field{min-width:0}.limel-form-array-item--simple{display:flex;align-items:center;padding:0.25rem}.limel-form-array-item--simple>*:first-child{flex:1;min-width:0}.array-items{isolation:isolate;display:flex;flex-direction:column;row-gap:var(--form-row-gap, 0.5rem);margin-top:1rem}.array-items.has-an-item-which-is-being-dragged limel-collapsible-section{--limel-cs-grid-template-rows:0fr;--limel-cs-opacity-transition-speed:0.2s;--limel-cs-grid-template-rows-transition-speed:0.2s;--limel-cs-open-header-bottom-border-radius:0.75rem}.array-item:has(limel-drag-handle:hover),.array-item:has(limel-drag-handle:focus-within),.array-item.is-elevated,.array-item.sortable-chosen{will-change:transform, box-shadow, border-radius, background-color}.array-item.sortable-ghost{border-radius:0.5rem;box-shadow:var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3)}.array-item.sortable-chosen{border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color)}.array-item.is-elevated[draggable=false]{animation:sit-here 0.8s forwards}@keyframes sit-here{0%{border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3)}100%{box-shadow:none}}limel-drag-handle{order:10}limel-collapsible-section.is-being-dragged{border-radius:0.75rem !important}.limel-form-layout--default{display:grid;column-gap:var(--form-column-gap, 1rem);row-gap:var(--form-row-gap, 1rem);padding:var(--form-body-padding, 1rem)}.limel-form-layout--grid{--min-height-of-one-row:2.5rem;display:grid;column-gap:var(--form-column-gap, 1rem);row-gap:var(--form-row-gap, 1rem);padding:var(--form-body-padding, 1rem);grid-template-columns:repeat(var(--number-of-columns), minmax(0, 1fr))}.limel-form-layout--grid.auto-reorder-to-avoid-empty-cells{grid-auto-flow:dense}.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--1,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--2,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--5{grid-column:span 1}.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--2,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--5{grid-column:span 2}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--5{grid-column:span 3}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--3{grid-column:span 3}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--5{grid-column:span 4}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--3{grid-column:span 3}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--4{grid-column:span 4}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--5{grid-column:span 5}.limel-form-layout--grid .limel-form-layout-colspan--all{grid-column:1/-1}.limel-form-layout--grid limel-checkbox,.limel-form-layout--grid limel-switch{min-height:var(--min-height-of-one-row)}.limel-form-layout--grid limel-checkbox{display:block}.limel-form-layout--grid limel-switch{margin-left:0.5rem}.form-error{color:var(--limel-theme-error-color);font-size:0.6875rem;line-height:1.5;visibility:inherit;padding-right:1rem;padding-left:1rem;padding-top:0.25rem}.button-add-new{margin-top:0.5rem;width:100%}h1{position:relative;margin-top:0;margin-bottom:0;word-break:break-word;hyphens:auto;-webkit-hyphens:auto;text-wrap:balance;font-size:var(--limel-form-h1-font-size);line-height:calc(var(--limel-form-h1-font-size) * 1.42857);letter-spacing:-0.01rem;font-weight:500}limel-markdown{display:block;margin-bottom:0.5rem}.rjsf-field{position:relative}.rjsf-field limel-help{position:absolute;top:calc(var(--form-row-gap, 1rem) * -0.5);left:calc(var(--form-column-gap, 1rem) * -0.5)}.rjsf-field h1{color:rgb(var(--contrast-1400), 0.8)}.rjsf-field h1{--limel-form-h1-font-size:1.476rem;font-weight:800}.rjsf-field .rjsf-field h1{--limel-form-h1-font-size:1.383rem;font-weight:700}.rjsf-field .rjsf-field h1:before{content:"";display:block;position:absolute;top:0;bottom:0;margin:auto;left:-0.75rem;background-color:var(--lime-primary-color, var(--limel-theme-primary-color));width:0.125rem;height:1.5rem;border-radius:0.125rem;opacity:0.6}.rjsf-field .rjsf-field .rjsf-field h1{--limel-form-h1-font-size:1.296rem;font-weight:600}.rjsf-field .rjsf-field .rjsf-field h1:before{display:none}.rjsf-field .rjsf-field .rjsf-field .rjsf-field h1{--limel-form-h1-font-size:1.215rem}.rjsf-field .rjsf-field .rjsf-field .rjsf-field h1:before{display:none}.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field h1{--limel-form-h1-font-size:1.138rem}.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field h1:before{display:none}.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field h1{--limel-form-h1-font-size:1.067rem}.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field h1:before{display:none}.limel-form-field--highlighted{position:relative}.limel-form-field--highlighted::after{content:"";position:absolute;inset:-0.25rem;border-radius:0.5rem;pointer-events:none;animation-name:highlight-field-background, highlight-field-shadow;animation-duration:6s;animation-delay:0.1s, 0.3s;animation-timing-function:ease-in-out}@media (prefers-reduced-motion){.limel-form-field--highlighted::after{animation-duration:4s;animation-delay:0s}}@keyframes highlight-field-background{0%{background-color:transparent}12.5%{background-color:color-mix(in srgb, var(--lime-primary-color, var(--limel-theme-primary-color)), transparent 65%)}45%,100%{background-color:transparent}}@keyframes highlight-field-shadow{0%,25%,50%{box-shadow:none}12.5%,37.5%{box-shadow:var(--shadow-depth-8-focused)}62.5%,72.5%{box-shadow:var(--shadow-depth-8-focused);animation-timing-function:ease-out}100%{box-shadow:none}}@media (prefers-reduced-motion){@keyframes highlight-field-shadow{0%,25%{box-shadow:var(--shadow-depth-8-focused);animation-timing-function:ease-out}100%{box-shadow:none}}}`;
+const formCss = () => `@charset "UTF-8";.limel-form-row--layout{--limel-form-row-border-radius:0.375rem;--limel-form-row-icon-size:1.75rem;--limel-form-row-main-information-gap:0.5rem;display:flex;flex-direction:column}.limel-form-row--layout .row{display:flex;gap:0.5rem;flex-direction:column;padding:0.5rem 1rem}.limel-form-row--layout .row:nth-child(odd){background-color:var(--form-background-color-of-odd-rows, rgb(var(--contrast-200)))}.limel-form-row--layout .row:nth-child(even){background-color:var(--form-background-color-of-even-rows, transparent)}.limel-form-row--layout .row:first-child{border-radius:var(--limel-form-row-border-radius) var(--limel-form-row-border-radius) 0 0}.limel-form-row--layout .row:last-child{border-radius:0 0 var(--limel-form-row-border-radius) var(--limel-form-row-border-radius)}.limel-form-row--layout .main-information{position:relative;display:flex;flex-direction:row;align-items:center;gap:var(--limel-form-row-main-information-gap);min-width:0}.limel-form-row--layout .main-information{position:relative}.limel-form-row--layout .main-information>.rjsf-field{position:unset}.limel-form-row--layout .main-information>.rjsf-field limel-help{top:0}.limel-form-row--layout limel-icon{color:rgb(var(--contrast-1200));width:var(--limel-form-row-icon-size);flex-shrink:0;min-width:0}.limel-form-row--layout .title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:normal;flex-grow:1;color:var(--limel-theme-on-surface-color);font-size:0.875rem}.limel-form-row--layout .description{margin:0;color:var(--limel-theme-text-secondary-on-background-color);font-size:var(--limel-theme-default-small-font-size);line-height:1.5}.limel-form-row--layout .has-icon .description{padding-left:calc(var(--limel-form-row-icon-size) + var(--limel-form-row-main-information-gap))}.limel-form-row--layout .rjsf-field{flex-shrink:0;display:flex;align-content:center}.limel-form-row--layout .rjsf-field limel-slider{min-width:8rem;display:block}*,*::after,*::before{box-sizing:border-box}.rjsf-field{min-width:0}.limel-form-array-item--simple{display:flex;align-items:center;padding:0.25rem}.limel-form-array-item--simple>*:first-child{flex:1;min-width:0}.array-items{isolation:isolate;display:flex;flex-direction:column;row-gap:var(--form-row-gap, 0.5rem);margin-top:1rem}.array-items.has-an-item-which-is-being-dragged limel-collapsible-section{--limel-cs-grid-template-rows:0fr;--limel-cs-opacity-transition-speed:0.2s;--limel-cs-grid-template-rows-transition-speed:0.2s;--limel-cs-open-header-bottom-border-radius:0.75rem}.array-item:has(limel-drag-handle:hover),.array-item:has(limel-drag-handle:focus-within),.array-item.is-elevated,.array-item.sortable-chosen{will-change:transform, box-shadow, border-radius, background-color}.array-item.sortable-ghost{border-radius:0.5rem;box-shadow:var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3)}.array-item.sortable-chosen{border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color)}.array-item.is-elevated[draggable=false]{animation:sit-here 0.8s forwards}@keyframes sit-here{0%{border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3)}100%{box-shadow:none}}limel-drag-handle{order:10}limel-collapsible-section.is-being-dragged{border-radius:0.75rem !important}.limel-form-layout--default{display:grid;column-gap:var(--form-column-gap, 1rem);row-gap:var(--form-row-gap, 1rem);padding:var(--form-body-padding, 1rem)}.limel-form-layout--grid{--min-height-of-one-row:2.5rem;display:grid;column-gap:var(--form-column-gap, 1rem);row-gap:var(--form-row-gap, 1rem);padding:var(--form-body-padding, 1rem);grid-template-columns:repeat(var(--number-of-columns), minmax(0, 1fr))}.limel-form-layout--grid.auto-reorder-to-avoid-empty-cells{grid-auto-flow:dense}.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--1,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--2,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--5{grid-column:span 1}.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--2,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--5{grid-column:span 2}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--5{grid-column:span 3}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--3{grid-column:span 3}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--5{grid-column:span 4}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--3{grid-column:span 3}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--4{grid-column:span 4}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--5{grid-column:span 5}.limel-form-layout--grid .limel-form-layout-colspan--all{grid-column:1/-1}.limel-form-layout--grid limel-checkbox,.limel-form-layout--grid limel-switch{min-height:var(--min-height-of-one-row)}.limel-form-layout--grid limel-checkbox{display:block}.limel-form-layout--grid limel-switch{margin-left:0.5rem}.form-error{color:var(--limel-theme-error-color);font-size:0.6875rem;line-height:1.5;visibility:inherit;padding-right:1rem;padding-left:1rem;padding-top:0.25rem}.button-add-new{margin-top:0.5rem;width:100%}:is(h1,h2,h3,h4,h5,h6){position:relative;margin-top:0;margin-bottom:0;word-break:break-word;hyphens:auto;-webkit-hyphens:auto;text-wrap:balance;font-size:var(--limel-form-heading-font-size);line-height:calc(var(--limel-form-heading-font-size) * 1.42857);letter-spacing:-0.01rem;font-weight:500}limel-markdown{display:block;margin-bottom:0.5rem}.rjsf-field{position:relative}.rjsf-field limel-help{position:absolute;top:calc(var(--form-row-gap, 1rem) * -0.5);left:calc(var(--form-column-gap, 1rem) * -0.5)}.rjsf-field :is(h1,h2,h3,h4,h5,h6){color:rgb(var(--contrast-1400), 0.8)}.rjsf-field :is(h1,h2,h3,h4,h5,h6){--limel-form-heading-font-size:1.476rem;font-weight:800}.rjsf-field .rjsf-field :is(h1,h2,h3,h4,h5,h6){--limel-form-heading-font-size:1.383rem;font-weight:700}.rjsf-field .rjsf-field :is(h1,h2,h3,h4,h5,h6):before{content:"";display:block;position:absolute;top:0;bottom:0;margin:auto;left:-0.75rem;background-color:var(--lime-primary-color, var(--limel-theme-primary-color));width:0.125rem;height:1.5rem;border-radius:0.125rem;opacity:0.6}.rjsf-field .rjsf-field .rjsf-field :is(h1,h2,h3,h4,h5,h6){--limel-form-heading-font-size:1.296rem;font-weight:600}.rjsf-field .rjsf-field .rjsf-field :is(h1,h2,h3,h4,h5,h6):before{display:none}.rjsf-field .rjsf-field .rjsf-field .rjsf-field :is(h1,h2,h3,h4,h5,h6){--limel-form-heading-font-size:1.215rem}.rjsf-field .rjsf-field .rjsf-field .rjsf-field :is(h1,h2,h3,h4,h5,h6):before{display:none}.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field :is(h1,h2,h3,h4,h5,h6){--limel-form-heading-font-size:1.138rem}.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field :is(h1,h2,h3,h4,h5,h6):before{display:none}.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field :is(h1,h2,h3,h4,h5,h6){--limel-form-heading-font-size:1.067rem}.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field :is(h1,h2,h3,h4,h5,h6):before{display:none}.limel-form-field--highlighted{position:relative}.limel-form-field--highlighted::after{content:"";position:absolute;inset:-0.25rem;border-radius:0.5rem;pointer-events:none;animation-name:highlight-field-background, highlight-field-shadow;animation-duration:6s;animation-delay:0.1s, 0.3s;animation-timing-function:ease-in-out}@media (prefers-reduced-motion){.limel-form-field--highlighted::after{animation-duration:4s;animation-delay:0s}}@keyframes highlight-field-background{0%{background-color:transparent}12.5%{background-color:color-mix(in srgb, var(--lime-primary-color, var(--limel-theme-primary-color)), transparent 65%)}45%,100%{background-color:transparent}}@keyframes highlight-field-shadow{0%,25%,50%{box-shadow:none}12.5%,37.5%{box-shadow:var(--shadow-depth-8-focused)}62.5%,72.5%{box-shadow:var(--shadow-depth-8-focused);animation-timing-function:ease-out}100%{box-shadow:none}}@media (prefers-reduced-motion){@keyframes highlight-field-shadow{0%,25%{box-shadow:var(--shadow-depth-8-focused);animation-timing-function:ease-out}100%{box-shadow:none}}}`;
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -46086,6 +46153,16 @@ const Form = class {
          * Set to `true` to disable the whole form.
          */
         this.disabled = false;
+        /**
+         * The level, from `1` to `6`, of the topmost headings in the form.
+         * The headings of the sections inside them get one level more for each
+         * level of nesting, down to `6`.
+         *
+         * Set it so that the headings of the form fit below the headings of
+         * the page around it. For example, when the form is in a section with
+         * an `h2` heading, set it to `3`.
+         */
+        this.headingLevel = 1;
         /**
          * Set to `true` to render every field with a validation error as
          * invalid, even untouched ones, and to reflect that on each
@@ -46101,10 +46178,21 @@ const Form = class {
     connectedCallback() {
         this.initialize();
     }
+    componentWillLoad() {
+        this.warnIfHeadingLevelIsInvalid();
+    }
     componentDidLoad() {
         this.initialize();
         this.showHighlightedField();
     }
+    handleHeadingLevelChange() {
+        this.warnIfHeadingLevelIsInvalid();
+    }
+    warnIfHeadingLevelIsInvalid() {
+        if (!isHeadingLevel(this.headingLevel)) {
+            console.warn(`limel-form: headingLevel must be a number from 1 to 6, but it is ${this.headingLevel}. The headings start at level 1 instead.`);
+        }
+    }
     handleHighlightedFieldChange(newPath, oldPath) {
         // A host that renders again passes an equal path in a new array.
         if (!isEqual(newPath, oldPath)) {
@@ -46131,14 +46219,18 @@ const Form = class {
         this.initialized = false;
     }
     render() {
-        return h$1("div", { key: 'e57ab791f09cd1e8271437e91822ffabcfe2a118', class: "root" });
+        return h$1("div", { key: '3f2e4aedf778c43f02ab87c32074cb3face9a55b', class: "root" });
     }
     reactRender() {
         if (!this.root) {
             const rootElement = this.host.shadowRoot.querySelector('.root');
             this.root = clientExports.createRoot(rootElement);
         }
-        this.root.render(React.createElement(Form$1, {
+        this.root.render(React.createElement(HeadingLevelContext.Provider, {
+            value: isHeadingLevel(this.headingLevel)
+                ? this.headingLevel
+                : 1,
+        }, React.createElement(Form$1, {
             schema: this.prepareSchema(this.schema),
             formData: this.value,
             onChange: this.handleChange,
@@ -46176,7 +46268,7 @@ const Form = class {
                 ArrayField: ArrayField,
                 ObjectField: ObjectField,
             },
-        }, []));
+        }, [])));
     }
     showHighlightedField() {
         if (!this.highlightedField) {
@@ -46268,6 +46360,9 @@ const Form = class {
     }
     get host() { return getElement(this); }
     static get watchers() { return {
+        "headingLevel": [{
+                "handleHeadingLevelChange": 0
+            }],
         "highlightedField": [{
                 "handleHighlightedFieldChange": 0
             }]

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

@@ -10,7 +10,7 @@ const Grid = class {
         console.warn('limel-grid is deprecated, please use CSS instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout');
     }
     render() {
-        return h("slot", { key: '3b806c24a8ef43720ed744030f791878c592bc1a' });
+        return h("slot", { key: '4ebe5815a717a9991c2e2951125f839e8e1708d4' });
     }
 };
 Grid.style = gridCss();

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

@@ -13,7 +13,7 @@ const Header = class {
         this.subheadingDivider = '·';
     }
     render() {
-        return (h(Host, { key: '772b80728f03fc7a51ae6b2b8892c0417c4dfc56' }, h("div", { key: '87516edb431b0d65fdebd59b422b62e953f316a7', class: "information" }, this.renderIcon(), h("div", { key: 'fc6dbd30d144dafb66e6f1d2899dfe849835d923', class: "headings" }, h("h1", { key: 'af693c740d006353f6328459ecbc372dfa204398', class: "heading", title: this.heading }, this.heading), h("h2", { key: '2b0e5ed7b7df45ec645057083610ef88ab404b75', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '88d461f901a4daa28a269aeaa2efb3a39f4f610c', name: "actions" }, h("slot", { key: '4a9ade9ab15cc333b9555a8fadad9147145619f9' }))));
+        return (h(Host, { key: 'ee7ff339654246fbe74a971c13555ac58eb193d6' }, h("div", { key: '24a8ea8b2b02a18096fdad46aeaa7716986f39f3', class: "information" }, this.renderIcon(), h("div", { key: '4e6badb9212a41286043a158238edb889e95c20a', class: "headings" }, h("h1", { key: 'cb1e64f29d720de62e7e99d15daa77b3c3a344cb', class: "heading", title: this.heading }, this.heading), h("h2", { key: 'fbdd1399802934b780fb24f35dbaf8d2df98b09c', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '53774b488cc505aca85e776d9c8280c85ef7acfd', name: "actions" }, h("slot", { key: 'd9093bf6ca786faa5481e62c5bff604b20f0283e' }))));
     }
     renderIcon() {
         var _a, _b, _c, _d, _e;

package/dist/esm/{limel-help.entry.js → limel-help_2.entry.js}

@@ -24,11 +24,30 @@ const HelpComponent = class {
         };
     }
     render() {
-        return (h(Host, { key: '7dbdb1d1a250fd4655c4cf9f9a711f9f82d128e0' }, h("limel-popover", { key: '4a0bce2e74a621ffc392cabfb4d3f3817bfb14cf', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: '22a0c7b7002973d95dba6e8cfef34b73ddc779e6', slot: "trigger", type: "button", onClick: this.openPopover, class: {
+        return (h(Host, { key: 'ff14013e9f366372a5ac61fdb9852e73377e7c7f' }, h("limel-popover", { key: 'b63ff7f51c29dc61ffdfe647329020639f1a8511', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: '09f65e0a7f2bdca258f848f459eadc49f863b9f2', slot: "trigger", type: "button", onClick: this.openPopover, class: {
                 'is-open': this.isOpen,
-            } }, this.trigger), h("limel-help-content", { key: '86cb41721ed8e9eb2b5c0dc6eb930c2b0a412a6e', value: this.value, readMoreLink: this.readMoreLink }))));
+            } }, this.trigger), h("limel-help-content", { key: '92223e842dd3dbf07365a1f45003b61033109b25', value: this.value, readMoreLink: this.readMoreLink }))));
     }
 };
 HelpComponent.style = helpCss();
 
-export { HelpComponent as limel_help };
+const limelHelpContentCss = () => `@charset "UTF-8";:host(limel-help-content){display:flex;box-sizing:border-box;flex-direction:column;gap:0.5rem;max-height:30rem;height:100%}limel-markdown{--limel-overflow-mask-vertical:linear-gradient(       to bottom,       transparent 0%,       black calc(0% + var(--limel-top-edge-fade-height, 1rem)),       black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),       transparent 100%   );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);padding-right:1rem;padding-left:1rem;min-height:0;min-width:0;overflow:hidden auto}a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;cursor:pointer;transition:color 0.2s ease;color:rgb(var(--color-blue-default))}a:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:"";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a:hover{color:rgb(var(--color-blue-default))}a:hover:before{opacity:0.3;transform:scale(1)}a{position:sticky;bottom:0;text-decoration:none;font-size:var(--limel-theme-default-font-size);padding-bottom:0.125rem}span{padding:0 1rem 0.5rem 1rem;min-width:0}`;
+
+const HelpContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.renderReadMoreLink = () => {
+            var _a, _b, _c, _d;
+            if (!this.readMoreLink) {
+                return;
+            }
+            return (h("span", null, h("a", { href: (_a = this.readMoreLink) === null || _a === void 0 ? void 0 : _a.href, target: (_b = this.readMoreLink) === null || _b === void 0 ? void 0 : _b.target, title: (_c = this.readMoreLink) === null || _c === void 0 ? void 0 : _c.title, tabindex: "0" }, (_d = this.readMoreLink) === null || _d === void 0 ? void 0 : _d.text)));
+        };
+    }
+    render() {
+        return (h(Host, { key: 'c05fa685d65b0b884c0697d259ba1b4811f038d7' }, h("limel-markdown", { key: '6260af655452683b21b704fb9962e010abfe2a1b', value: this.value }), this.renderReadMoreLink()));
+    }
+};
+HelpContent.style = limelHelpContentCss();
+
+export { HelpComponent as limel_help, HelpContent as limel_help_content };

package/dist/esm/limel-helper-line_3.entry.js

@@ -32,9 +32,9 @@ const HelperLine = class {
         };
     }
     render() {
-        return (h(Host, { key: '67896281429efb2375427383aa6c7046096ad203', tabIndex: -1, class: {
+        return (h(Host, { key: '3dba31860682ccb6230de96f458e19252a150dd0', tabIndex: -1, class: {
                 invalid: this.invalid,
-            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '7fbf830b9edd0b2aeb36539ddbc8c2b472acc4eb' }, this.renderHelperText(), this.renderCharacterCounter())));
+            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '28dd4294f7a2d6db746388109ef9fb7d1f640b4d' }, this.renderHelperText(), this.renderCharacterCounter())));
     }
 };
 HelperLine.style = helperLineCss();
@@ -332,7 +332,7 @@ const List = class {
             maxLinesSecondaryText = 1;
         }
         const html = this.listRenderer.render(this.items, this.config);
-        return (h(Host, { key: 'c0b436d0236fd177e789d43518eb193d5e5e7bbf', style: {
+        return (h(Host, { key: 'c1c087f11542451c1747d510c133e79f94d643ba', style: {
                 '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
             } }, html));
     }
@@ -428,7 +428,7 @@ const NotchedOutline = class {
         this.hasFloatingLabel = false;
     }
     render() {
-        return (h("div", { key: '3a89f4df1e456e91ae6963275d8e554f785d5806', class: "limel-notched-outline" }, h("slot", { key: 'd372b467d8aed4d97fe89073f3a9bf8d6af451ae', name: "content" }), h("span", { key: 'f56e6d2d3b75e5d05738e28696d892cfdddc991b', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '76c5ac529a46fa4a32969deb9a00bc872ab903e9', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: 'a37b86f6ebb5db2eb9c1f2c8994fce60e70260b6', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
+        return (h("div", { key: '8d1e3ea6b74700e4f79050dac678c5a1b4d1d0bc', class: "limel-notched-outline" }, h("slot", { key: 'fcb6831f64089a7ac25a0a9998eb331a9a965ae7', name: "content" }), h("span", { key: '870e9ddbefbbba75e61336b7171fcf43137c1379', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '5a12f8d71d2dbf8245b4faacf3ae8ec3f92a3cba', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: '73d69b455321439990591b94894f13f8837f2617', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
     }
     renderLabel() {
         if (!this.label) {

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

@@ -130,7 +130,7 @@ const Hotkey = class {
         const parts = tokenizeHotkeyString(this.value);
         const displayParts = parts.map((part) => formatDisplayToken(part, this.isApple));
         const ariaLabel = getHotkeyAriaLabel(this.value, this.isApple);
-        return (h(Host, { key: '9c75664311ac5138a87c1c5bb58c48a40ec44dc5', "aria-label": ariaLabel || undefined }, displayParts.map(({ display, isGlyph }, index) => (h("kbd", { key: `${parts[index]}-${index}`, class: isGlyph ? 'is-glyph' : undefined }, h("span", null, display))))));
+        return (h(Host, { key: '6c2857b3a8827d78ea18379d7338f0e31c3f44a9', "aria-label": ariaLabel || undefined }, displayParts.map(({ display, isGlyph }, index) => (h("kbd", { key: `${parts[index]}-${index}`, class: isGlyph ? 'is-glyph' : undefined }, h("span", null, display))))));
     }
 };
 Hotkey.style = hotkeyCss();
@@ -2002,7 +2002,7 @@ const Portal = class {
         this.showContainer();
     }
     render() {
-        return h("slot", { key: 'd342bcf892ea6bba5eafc93d07119a3c86df2623' });
+        return h("slot", { key: '153c97264598d26b0c043075c889ed882bf5e9de' });
     }
     onVisible() {
         if (!this.container && this.visible) {
@@ -2418,10 +2418,10 @@ const Tooltip = class {
     }
     render() {
         const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
-        return (h("div", { key: '731a0a14fd82106f3f64239f602b348c2053762d', class: "trigger-anchor" }, h("limel-portal", { key: 'c862ecd6be6f48fa6a4cc8a7c5d5470b317bdf16', openDirection: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
+        return (h("div", { key: 'd3fb680f623403a5951303e4d104c07fc7a21d4e', class: "trigger-anchor" }, h("limel-portal", { key: '4050fdb323fce7e7f9953ce76c70e98e92a73eac', openDirection: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
                 'z-index': tooltipZIndex,
                 'pointer-events': 'none',
-            }, anchor: this.ownerElement }, h("limel-tooltip-content", { key: '941de1ecb63c329f12c1e38833be15dc8d3283b5', label: this.label, helperLabel: this.helperLabel, hotkey: this.hotkey, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open }))));
+            }, anchor: this.ownerElement }, h("limel-tooltip-content", { key: '53ca0371e38f9dcb7ea1382fd20e892d4e0e4b72', label: this.label, helperLabel: this.helperLabel, hotkey: this.hotkey, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open }))));
     }
     async updateDescription() {
         if (!this.ownerElement) {
@@ -2493,7 +2493,7 @@ const TooltipContent = class {
         const style = this.maxlength
             ? { '--tooltip-max-width-of-text': `${this.maxlength}ch` }
             : undefined;
-        return (h(Host, { key: 'f5812cfa3d4abb1bddd71f4a1356666e655c9665', class: { 'has-column-layout': isLabelsTextLong }, style: style }, h("div", { key: '3bd66c2b52150d4f2b740c914fc13465b2833e7a', class: "label" }, this.label), this.renderHelperLabel(), this.renderHotkey()));
+        return (h(Host, { key: 'f9735b1c49a51e6945014d8a5a23a3e284b53ace', class: { 'has-column-layout': isLabelsTextLong }, style: style }, h("div", { key: '12ed325f94deb0788c72e8ce643adce1127af675', class: "label" }, this.label), this.renderHelperLabel(), this.renderHotkey()));
     }
     renderHelperLabel() {
         if (!this.helperLabel) {

package/dist/esm/limel-icon-button.entry.js

@@ -47,7 +47,7 @@ const IconButton = class {
         if (this.host.hasAttribute('tabindex')) {
             buttonAttributes.tabindex = this.host.getAttribute('tabindex');
         }
-        return (h(Host, { key: '0df9ac9a4c51f8062cdd7a6fa91204ea0e3b78f7', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: '3ebf706164e779db253d82d38c4aab3ddf33e770', "aria-label": this.label, disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
+        return (h(Host, { key: 'ecf9bef958b6d3f2666d61c8eb10b6790311706d', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: 'fcadafff6a3e2a36082f4baad0c342a448c4126f', "aria-label": this.label, disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
     }
     renderIcon() {
         var _a, _b;

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

@@ -184,7 +184,7 @@ const Icon = class {
         this.loadIcon(this.name);
     }
     render() {
-        return h("div", { key: '0f09232e65b213e57673054707f6bdb400000fd6', class: "container" });
+        return h("div", { key: '68180e22c8eda7efb4a5ca9085ff0dc127052b3f', class: "container" });
     }
     updateAccessibility() {
         if (!this.internals) {

package/dist/esm/limel-info-tile.entry.js

@@ -114,9 +114,9 @@ const InfoTile = class {
             this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
         const link = this.disabled ? '#' : (_e = this.link) === null || _e === void 0 ? void 0 : _e.href;
         const rel = getRel((_f = this.link) === null || _f === void 0 ? void 0 : _f.target, (_g = this.link) === null || _g === void 0 ? void 0 : _g.rel);
-        return (h(Host, { key: '549c508fdd747f3883afe97efd8eba297d75bc33', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: '3a04537d79c62bce556b0b46bf5f1f3a011ba280', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
+        return (h(Host, { key: '4ae5614ddf0ecc7cb112788bd1c42ca4747cf431', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: '5cb4cd396a5472c050e5911f54aa0272cf1d324d', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
                 'is-clickable': !!((_k = this.link) === null || _k === void 0 ? void 0 : _k.href) && !this.disabled,
-            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: '10b2f70309046c0f811a2af8fadedb86d53a4e10', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '0c3e378b14d23909e1b957704d6c846d1d6a20c3', class: "value-group" }, this.renderPrefix(), h("div", { key: '0cf56fce6179d34ebd047a16492935542fc7c6ed', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: 'b239b27230d6e0fe766517f4c7aba9176a6fdf1e' })), this.renderNotification()));
+            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: 'd111590fd120c7f4a784430d9f13423e6813d88f', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '717a54afb2ffe8c434fdbbe403bbc816ba231fbd', class: "value-group" }, this.renderPrefix(), h("div", { key: '569a6cbb516d6c455757c7685d48a2af9692eca2', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '2afedffb05ddd550677d943a58564565965194dc' })), this.renderNotification()));
     }
     checkProps(propValue) {
         return propValue ? propValue + ' ' : '';

package/dist/esm/limel-list-item.entry.js

@@ -129,9 +129,9 @@ const ListItemComponent = class {
             // also keep for `menuitem` for visual state consistency
             ariaProps['aria-selected'] = this.selected ? 'true' : 'false';
         }
-        return (h(Host, Object.assign({ key: 'c546782bb0418b47bffe81e5532c2f1ac3971c82', role: this.getHostRole(), class: {
+        return (h(Host, Object.assign({ key: '0ff3eea71319a17641cc264d85ba35c1c8db83c8', role: this.getHostRole(), class: {
                 'has-primary-component': !!((_a = this.primaryComponent) === null || _a === void 0 ? void 0 : _a.name),
-            } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { key: '16b10f373ce8c8508a0ef680acea777c9f6aeac6', class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
+            } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { key: 'e38dc3bb9a09cf08892e7485681a4421a5bdd2ba', class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
     }
     /**
      * Returns a stable reference for the provided actions array to avoid

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

@@ -1191,7 +1191,7 @@ const Markdown = class {
         this.cleanupImageIntersectionObserver();
     }
     render() {
-        return (h(Host, { key: 'eb1749c0d9dda5b26400cb8a11e884d435e759f4' }, h("div", { key: '2574a46c51bd1d18808f1bac945a7d356550e02c', id: "markdown", ref: (el) => (this.rootElement = el) })));
+        return (h(Host, { key: '3121124a57e9522dced4b749bfedfbe8dea2ea70' }, h("div", { key: '6f2b983303c0921a7b979cf0bbbdcc657e7555f8', id: "markdown", ref: (el) => (this.rootElement = el) })));
     }
     setupImageIntersectionObserver() {
         if (this.lazyLoadImages) {

package/dist/esm/limel-masonry-layout.entry.js

@@ -42,7 +42,7 @@ const MasonryLayout = class {
         const style = {
             height: `${this.containerHeight}rem`,
         };
-        return (h(Host, { key: 'b25a2eb6e10535aa5fedb8de8baeb96f51e10739', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: 'fa2c4773d1fb41e2ea0725a28911840e45e5c809' })));
+        return (h(Host, { key: 'db11d17d15303afcf0d767e085dbe653ab90f9dd', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: '7a4f2639e7b02720b08b778d437e536ee5707cfa' })));
     }
     setupObservers() {
         this.resizeObserver = new ResizeObserver(() => {

package/dist/esm/limel-menu-item-meta.entry.js

@@ -16,7 +16,7 @@ const MenuItemMeta = class {
         this.showChevron = false;
     }
     render() {
-        return (h(Host, { key: 'd8b7f496ec83b138cfe9b7ea5deaf7a862a92a7f' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
+        return (h(Host, { key: 'd4bb2de50d260fdf49eafe2449ca388f0369a682' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
     }
     renderCommandText() {
         if (this.hotkey) {

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

@@ -287,7 +287,7 @@ const Pagination = class {
     }
     render() {
         const { slots } = this.view;
-        return (h(Host, { key: 'b8e02650528bd6547965afb437129cad0ea6cd33' }, h("nav", { key: '3b4b66479357da55ff6ff41d78cc37f77b2d32f6', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: 'b248701311dd6da9d4fb158299d07e618297038e', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
+        return (h(Host, { key: '7d7e26956a5df97a75d2e9d4a8d5b2407b2b65a3' }, h("nav", { key: 'e2b6b6a1bb513e3136b6fcc2e34c668be8e64089', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: '00e74cdbf6ca753b7bac6b4731a5b63c4ac4d338', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
     }
     /**
      * Without a count we know where the user is but not how far the set goes,

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

@@ -195,7 +195,7 @@ const Picker = class {
             props.maxItems = 1;
         }
         return [
-            h("limel-chip-set", Object.assign({ key: '48b339e4313ecdd3541e4256d96b54cebb04b0d8', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
+            h("limel-chip-set", Object.assign({ key: 'eed0789b538bd50638936e1c6ad7e9deaef954ec', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
             this.renderDropdown(),
         ];
     }

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

@@ -134,7 +134,7 @@ const Popover = class {
     render() {
         const cssProperties = this.getCssProperties();
         const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-        return (h("div", { key: 'a02ffc9fddedc154172b0d4882bfe59b2577ffac', class: "trigger-anchor" }, h("slot", { key: '3665da92007e5943986f57c449055b892502f67e', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '461758e543e835682034c689fcb093fb53ea352e', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '85c7c3d6b11c616eab35bc8419fa2769e5e602ed', contentCollection: this.host.children, style: cssProperties }))));
+        return (h("div", { key: '5292df85fc887c632417be674a1521e0c3084ad4', class: "trigger-anchor" }, h("slot", { key: '6612ae05c8145183234f265e6cdd7419fbebe292', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '67e816cb950de1933a368743c745b5080fd49ba0', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: 'f22deeea052c868f753fd7016c615ccee5bb068a', contentCollection: this.host.children, style: cssProperties }))));
     }
     globalClickListener(event) {
         const element = event.target;
@@ -178,7 +178,7 @@ const PopoverSurface = class {
         this.appendElement();
     }
     render() {
-        return h("div", { key: '565d94e781d72493de84f12970471ecf220dd601', class: "limel-popover-surface", tabindex: "0" });
+        return h("div", { key: '437d1e0bf1d1ab969aac149c2ada4124ee771ae8', class: "limel-popover-surface", tabindex: "0" });
     }
     appendElement() {
         const portalContainer = this.host.shadowRoot.querySelector('.limel-popover-surface');