@limetech/lime-elements 40.14.5 → 40.16.0

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

@@ -2,31 +2,38 @@
 
 var index = require('./index-BlsqxTB1.js');
 var _commonjsHelpers = require('./_commonjsHelpers-CFO10eej.js');
-var _baseIteratee = require('./_baseIteratee-BIMRm4nq.js');
-var isEmpty = require('./isEmpty-CCxl3bYc.js');
+var _baseIteratee = require('./_baseIteratee-Cistiy8H.js');
+var isEmpty = require('./isEmpty-BsdhcVKT.js');
+var helpProps = require('./help-props-Ds30nnt1.js');
 var isObject$1 = require('./isObject-B6Osvvqp.js');
-var _getPrototype = require('./_getPrototype-CCLHkBHj.js');
+var _getPrototype = require('./_getPrototype-D74M8h-k.js');
 var isObjectLike = require('./isObjectLike-Dlpn-j-1.js');
-var _baseSet = require('./_baseSet-DykMx7uF.js');
-var dragToReorder = require('./drag-to-reorder-BP5YkPuu.js');
-var _baseIsEqual = require('./_baseIsEqual-zzV9DKMv.js');
-var _getTag = require('./_getTag-BC28Za7d.js');
-var isEqual = require('./isEqual-D3eFkhqd.js');
+var negate = require('./negate-Bg3SqQh6.js');
+var _baseFlatten = require('./_baseFlatten-BonTAUIo.js');
+var dragToReorder = require('./drag-to-reorder-BmVz_kUy.js');
+var _baseIsEqual = require('./_baseIsEqual-DNSR68qD.js');
+var _getTag = require('./_getTag-CxGZ3DRt.js');
+var isEqual = require('./isEqual-QhCilNoo.js');
+var hasIn = require('./hasIn-BQ92Jk0F.js');
 var moment = require('./moment-Cfsz2WF1.js');
-var cloneDeep = require('./cloneDeep-D2immmwT.js');
+var _basePickBy = require('./_basePickBy-DeOMws-h.js');
+var cloneDeep = require('./cloneDeep-CiuKX6HE.js');
 var multiple = require('./multiple-DYfiga7l.js');
 var getFocusTarget = require('./get-focus-target-DgqZ25gx.js');
 var _assignValue = require('./_assignValue-DQh76m39.js');
-var _baseForOwn = require('./_baseForOwn-8jMPwf3X.js');
+var _baseForOwn = require('./_baseForOwn-Bflq946d.js');
+require('./identity-Dz5mxHaJ.js');
 require('./isArray-BuFVIU_i.js');
-require('./isSymbol-DxAVNJfH.js');
-require('./_isIndex-Bu45fvR7.js');
-require('./isArrayLike-C2RwZMG4.js');
+require('./_Map-BsuE0Kgq.js');
+require('./_getNative-Cf52giNE.js');
 require('./isFunction-RSHwsz1x.js');
-require('./identity-Dz5mxHaJ.js');
+require('./isArrayLike-0-cyPB5I.js');
+require('./isLength-DvlFY_9S.js');
 require('./_defineProperty-Csu6P9HT.js');
-require('./_getNative-Cf52giNE.js');
+require('./_arrayPush-0Rd-eNkQ.js');
 require('./eq-DFcUoVzv.js');
+require('./_isIndex-Bu45fvR7.js');
+require('./isSymbol-DxAVNJfH.js');
 
 /**
  * This method returns `undefined`.
@@ -243,7 +250,7 @@ function stringToArray(string) {
  */
 function createCaseFirst(methodName) {
   return function(string) {
-    string = _baseIteratee.toString(string);
+    string = hasIn.toString(string);
 
     var strSymbols = hasUnicode(string)
       ? stringToArray(string)
@@ -296,7 +303,7 @@ var upperFirst = createCaseFirst('toUpperCase');
  * // => 'Fred'
  */
 function capitalize(string) {
-  return upperFirst(_baseIteratee.toString(string).toLowerCase());
+  return upperFirst(hasIn.toString(string).toLowerCase());
 }
 
 /**
@@ -390,7 +397,7 @@ function mapValues(object, iteratee) {
  * // => 5
  */
 function set(object, path, value) {
-  return object == null ? object : _baseSet.baseSet(object, path, value);
+  return object == null ? object : _basePickBy.baseSet(object, path, value);
 }
 
 /** Used as references for various `Number` constants. */
@@ -481,7 +488,7 @@ function baseUniq(array, iteratee, comparator) {
  * // => [2, 1]
  */
 var union$1 = dragToReorder.baseRest(function(arrays) {
-  return baseUniq(dragToReorder.baseFlatten(arrays, 1, dragToReorder.isArrayLikeObject));
+  return baseUniq(_baseFlatten.baseFlatten(arrays, 1, dragToReorder.isArrayLikeObject, true));
 });
 
 var react = {exports: {}};
@@ -44017,14 +44024,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));
 }
 /**
  *
@@ -44250,7 +44324,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;
@@ -44272,6 +44347,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) {
@@ -44304,11 +44380,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({}, helpProps.getHelpProps(help)), extraProps));
 }
 
 const ArrayFieldContext = reactExports.createContext(null);
@@ -44336,14 +44408,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;
@@ -44499,7 +44565,7 @@ function isCustomObjectSchema(schema) {
         return true;
     }
     const properties = Object.values(schema.properties);
-    return properties.filter(_baseSet.negate(isAdditionalProperty)).length === 0;
+    return properties.filter(negate.negate(isAdditionalProperty)).length === 0;
 }
 function isAdditionalProperty(schema) {
     return schema[ADDITIONAL_PROPERTY_FLAG] === true;
@@ -44629,12 +44695,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) {
@@ -45670,7 +45737,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));
     }
 }
 
@@ -46061,7 +46128,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 = {};
@@ -46088,6 +46155,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
@@ -46103,10 +46180,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.isEqual(newPath, oldPath)) {
@@ -46133,14 +46221,18 @@ const Form = class {
         this.initialized = false;
     }
     render() {
-        return index.h("div", { key: 'e57ab791f09cd1e8271437e91822ffabcfe2a118', class: "root" });
+        return index.h("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,
@@ -46178,7 +46270,7 @@ const Form = class {
                 ArrayField: ArrayField,
                 ObjectField: ObjectField,
             },
-        }, []));
+        }, [])));
     }
     showHighlightedField() {
         if (!this.highlightedField) {
@@ -46270,6 +46362,9 @@ const Form = class {
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
+        "headingLevel": [{
+                "handleHeadingLevelChange": 0
+            }],
         "highlightedField": [{
                 "handleHighlightedFieldChange": 0
             }]

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

@@ -12,7 +12,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 index.h("slot", { key: '3b806c24a8ef43720ed744030f791878c592bc1a' });
+        return index.h("slot", { key: '4ebe5815a717a9991c2e2951125f839e8e1708d4' });
     }
 };
 Grid.style = gridCss();

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

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

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

@@ -26,11 +26,31 @@ const HelpComponent = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '7dbdb1d1a250fd4655c4cf9f9a711f9f82d128e0' }, index.h("limel-popover", { key: '4a0bce2e74a621ffc392cabfb4d3f3817bfb14cf', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, index.h("button", { key: '22a0c7b7002973d95dba6e8cfef34b73ddc779e6', slot: "trigger", type: "button", onClick: this.openPopover, class: {
+        return (index.h(index.Host, { key: 'ff14013e9f366372a5ac61fdb9852e73377e7c7f' }, index.h("limel-popover", { key: 'b63ff7f51c29dc61ffdfe647329020639f1a8511', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, index.h("button", { key: '09f65e0a7f2bdca258f848f459eadc49f863b9f2', slot: "trigger", type: "button", onClick: this.openPopover, class: {
                 'is-open': this.isOpen,
-            } }, this.trigger), index.h("limel-help-content", { key: '86cb41721ed8e9eb2b5c0dc6eb930c2b0a412a6e', value: this.value, readMoreLink: this.readMoreLink }))));
+            } }, this.trigger), index.h("limel-help-content", { key: '92223e842dd3dbf07365a1f45003b61033109b25', value: this.value, readMoreLink: this.readMoreLink }))));
     }
 };
 HelpComponent.style = helpCss();
 
+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) {
+        index.registerInstance(this, hostRef);
+        this.renderReadMoreLink = () => {
+            var _a, _b, _c, _d;
+            if (!this.readMoreLink) {
+                return;
+            }
+            return (index.h("span", null, index.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 (index.h(index.Host, { key: 'c05fa685d65b0b884c0697d259ba1b4811f038d7' }, index.h("limel-markdown", { key: '6260af655452683b21b704fb9962e010abfe2a1b', value: this.value }), this.renderReadMoreLink()));
+    }
+};
+HelpContent.style = limelHelpContentCss();
+
 exports.limel_help = HelpComponent;
+exports.limel_help_content = HelpContent;

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

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

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

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

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

@@ -49,7 +49,7 @@ const IconButton = class {
         if (this.host.hasAttribute('tabindex')) {
             buttonAttributes.tabindex = this.host.getAttribute('tabindex');
         }
-        return (index.h(index.Host, { key: '0df9ac9a4c51f8062cdd7a6fa91204ea0e3b78f7', onClick: this.filterClickWhenDisabled }, index.h("button", Object.assign({ key: '3ebf706164e779db253d82d38c4aab3ddf33e770', "aria-label": this.label, disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
+        return (index.h(index.Host, { key: 'ecf9bef958b6d3f2666d61c8eb10b6790311706d', onClick: this.filterClickWhenDisabled }, index.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/cjs/limel-icon.cjs.entry.js

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

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

@@ -116,9 +116,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 = linkHelper.getRel((_f = this.link) === null || _f === void 0 ? void 0 : _f.target, (_g = this.link) === null || _g === void 0 ? void 0 : _g.rel);
-        return (index.h(index.Host, { key: '549c508fdd747f3883afe97efd8eba297d75bc33', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, index.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 (index.h(index.Host, { key: '4ae5614ddf0ecc7cb112788bd1c42ca4747cf431', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, index.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(), index.h("slot", { key: '10b2f70309046c0f811a2af8fadedb86d53a4e10', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), index.h("div", { key: '0c3e378b14d23909e1b957704d6c846d1d6a20c3', class: "value-group" }, this.renderPrefix(), index.h("div", { key: '0cf56fce6179d34ebd047a16492935542fc7c6ed', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), index.h("limel-3d-hover-effect-glow", { key: 'b239b27230d6e0fe766517f4c7aba9176a6fdf1e' })), this.renderNotification()));
+            } }, this.renderIcon(), this.renderProgress(), index.h("slot", { key: 'd111590fd120c7f4a784430d9f13423e6813d88f', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), index.h("div", { key: '717a54afb2ffe8c434fdbbe403bbc816ba231fbd', class: "value-group" }, this.renderPrefix(), index.h("div", { key: '569a6cbb516d6c455757c7685d48a2af9692eca2', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), index.h("limel-3d-hover-effect-glow", { key: '2afedffb05ddd550677d943a58564565965194dc' })), this.renderNotification()));
     }
     checkProps(propValue) {
         return propValue ? propValue + ' ' : '';

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

@@ -131,9 +131,9 @@ const ListItemComponent = class {
             // also keep for `menuitem` for visual state consistency
             ariaProps['aria-selected'] = this.selected ? 'true' : 'false';
         }
-        return (index.h(index.Host, Object.assign({ key: 'c546782bb0418b47bffe81e5532c2f1ac3971c82', role: this.getHostRole(), class: {
+        return (index.h(index.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(), index.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(), index.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/cjs/limel-markdown.cjs.entry.js

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

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

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

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

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

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

@@ -289,7 +289,7 @@ const Pagination = class {
     }
     render() {
         const { slots } = this.view;
-        return (index.h(index.Host, { key: 'b8e02650528bd6547965afb437129cad0ea6cd33' }, index.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')), index.h("span", { key: 'b248701311dd6da9d4fb158299d07e618297038e', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
+        return (index.h(index.Host, { key: '7d7e26956a5df97a75d2e9d4a8d5b2407b2b65a3' }, index.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')), index.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/cjs/limel-picker.cjs.entry.js

@@ -197,7 +197,7 @@ const Picker = class {
             props.maxItems = 1;
         }
         return [
-            index.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)),
+            index.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(),
         ];
     }