@limetech/lime-elements 40.14.5 → 40.16.0

package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.js

@@ -96,7 +96,7 @@ export class DatePickerCalendar {
         });
     }
     render() {
-        return (h("div", { key: 'aad98186a855e3c4e30dbc597cfad23b9a4cbcbe', class: "container", ref: (el) => (this.container = el), style: {
+        return (h("div", { key: 'c9e65b096f57f96afaffcdca7889cf3addb3227f', class: "container", ref: (el) => (this.container = el), style: {
                 '--today-label': `"${translate.get('date-picker.today', this.language)}"`,
             } }));
     }

package/dist/collection/components/dialog/dialog.js

@@ -84,10 +84,10 @@ export class Dialog {
         this.mdcDialog.destroy();
     }
     render() {
-        return (h("div", { key: '1b5ea40cec2ae67e3ffa902bd35bfaca444ae2bf', class: {
+        return (h("div", { key: 'c25d2992895829671727b0d3a52c89d5cd6d3586', class: {
                 'mdc-dialog': true,
                 'full-screen': !!this.fullscreen,
-            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: 'bcf3bcb62754208c582672667a175e736b0744fa', hidden: true, id: "initialFocusEl" }), h("div", { key: '296832fed308a7708a41049efaaf98d45514d2d7', class: "mdc-dialog__container" }, h("div", { key: '35367530bccda9a88285f3129d00875dc77c0257', class: "mdc-dialog__surface" }, h("input", { key: '9e70d9bd7cdce0dfef28ffe12ec5c07ffc66e5e1', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: '323d15273582eac0803124b9699d44e2b9a079e2', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: '0905ccd516e77933531e600faba97e73b5317731' })), this.renderFooter())), h("div", { key: '1ec2d3d9aa09b60d478c4ff5beefcaaefef9baed', class: "mdc-dialog__scrim" })));
+            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: 'bee5a5e54bc971b2ebf33fbcd4d84feba6ca9353', hidden: true, id: "initialFocusEl" }), h("div", { key: '3e5beb7bb0d881de3449cfe26ba5776f3ece4c42', class: "mdc-dialog__container" }, h("div", { key: '928c11c5eca38e7e4065c55d8ec6872c6c0dbd71', class: "mdc-dialog__surface" }, h("input", { key: 'c81d5586e8bf3c3f57d7ea6b33585a5e16c016e3', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: 'd7f278245136ea690182f82ad717ff57e4e4855b', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: '40c910630b7df325a5e15829f96d6ce0f8e52ff0' })), this.renderFooter())), h("div", { key: '8aa1010d47e375d2ef607f87d4e724c674493cf9', class: "mdc-dialog__scrim" })));
     }
     watchHandler(newValue, oldValue) {
         if (oldValue === newValue || !this.mdcDialog) {

package/dist/collection/components/dock/dock.js

@@ -94,11 +94,11 @@ export class Dock {
         this.resizeObserver.disconnect();
     }
     render() {
-        return (h(Host, { key: '59f51282a849383ecc23d3699ab20d9eadef800a', class: {
+        return (h(Host, { key: '89d1c5d33de71c5b78b572ec3f72b36424c5b12a', class: {
                 dock: true,
                 expanded: this.expanded,
                 'has-mobile-layout': this.useMobileLayout,
-            } }, h("nav", { key: 'c60abf3144c58aac33e321548b3167387f1bc2a9', "aria-label": this.accessibleLabel }, this.dockItems.map(this.renderDockItem), this.renderSeparator(), this.dockFooterItems.map(this.renderDockItem)), this.renderExpandShrinkToggle()));
+            } }, h("nav", { key: 'bd58281fb439dbc3eb2b8fb159fb2a5fd95fc553', "aria-label": this.accessibleLabel }, this.dockItems.map(this.renderDockItem), this.renderSeparator(), this.dockFooterItems.map(this.renderDockItem)), this.renderExpandShrinkToggle()));
     }
     renderExpandShrinkToggle() {
         if (this.useMobileLayout || !this.allowResize) {

package/dist/collection/components/drag-handle/drag-handle.js

@@ -51,7 +51,7 @@ export class DragHandleComponent {
     render() {
         const tooltipLabel = translate.get('drag-handle.drag-to-reorder', this.language);
         const ariaLabel = translate.get('drag-handle.drag-handle', this.language);
-        return (h(Host, { key: 'c88e3c81d5c24052b01bb44a6dd6d1abdddc75cb' }, h("button", { key: 'e45a3d7ca735bc27a4a05c13c65ec0d6e2b4df04', "data-drag-handle": true, type: "button", class: "limel-drag-handle", tabindex: -1, "aria-label": ariaLabel, id: this.dragHandleId, onClick: this.handleClick }, h("div", { key: '8a91aa1f70775148fb4262a9ef51129cfd89cf07', class: "drag-icon", role: "presentation", "aria-hidden": "true" }, h("div", { key: "1" }), h("div", { key: "2" }), h("div", { key: "3" }), h("div", { key: "4" }), h("div", { key: "5" }), h("div", { key: "6" })), h("limel-tooltip", { key: '645f814490598b794def31fde73de3bf61041904', openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
+        return (h(Host, { key: '49a2335a2c2603c7fcdd3c329f71a27f52024f96' }, h("button", { key: '8a8caa87f2e6b43936753f11991e84e81f0385c6', "data-drag-handle": true, type: "button", class: "limel-drag-handle", tabindex: -1, "aria-label": ariaLabel, id: this.dragHandleId, onClick: this.handleClick }, h("div", { key: '841ce098bb464c79773cdac0ea40e89a941d439f', class: "drag-icon", role: "presentation", "aria-hidden": "true" }, h("div", { key: "1" }), h("div", { key: "2" }), h("div", { key: "3" }), h("div", { key: "4" }), h("div", { key: "5" }), h("div", { key: "6" })), h("limel-tooltip", { key: '650342114d7c64c5e621e1b65751b242c0a7c5a7', openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
     }
     static get is() { return "limel-drag-handle"; }
     static get originalStyleUrls() {

package/dist/collection/components/email-viewer/email-viewer.js

@@ -75,7 +75,7 @@ export class EmailViewer {
         }
     }
     render() {
-        return (h(Host, { key: '988ce952ec8bfb1a3f6107687bf99eb921e82a68' }, h("div", { key: '0c0551cf33923837a4fbc0be84bef92e5f42084a', class: "email", part: "email" }, this.renderHeaders(), this.renderRemoteImageBanner(), h("section", { key: '62189859a9796e38bfa2c3aa7af83c3f2cc1e5a6' }, this.renderAttachments(), this.renderBody()))));
+        return (h(Host, { key: '81c11ddad6377f11be8c2f82915708c16fd2ac77' }, h("div", { key: '4be342e3c746106d45eb4cd357f771a252a90ab8', class: "email", part: "email" }, this.renderHeaders(), this.renderRemoteImageBanner(), h("section", { key: 'd6b9661596131110ac40e7fa90dba17e8a5c99fd' }, this.renderAttachments(), this.renderBody()))));
     }
     renderHeaders() {
         const headerFields = [

package/dist/collection/components/file/file.js

@@ -154,7 +154,7 @@ export class File {
         this.resizingFile = undefined;
     }
     render() {
-        return (h(Host, { key: 'f18050fc95a60bb3c7223ae12107d49e147def67', "aria-busy": this.isBusy ? 'true' : 'false' }, h("limel-file-dropzone", { key: 'ede8aa3e8c6e8406a0b38db4ecbe33159ec698bc', disabled: this.disabled || this.readonly || !!this.displayedFile, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip(), this.renderSpinner()));
+        return (h(Host, { key: '31fa16f6246cd4a6e7a7ce9ec6d32aadf245d84f', "aria-busy": this.isBusy ? 'true' : 'false' }, h("limel-file-dropzone", { key: 'f294201908569c70656ef52fff2fcca3e9b72bf0', disabled: this.disabled || this.readonly || !!this.displayedFile, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip(), this.renderSpinner()));
     }
     get statusText() {
         var _a, _b, _c;

package/dist/collection/components/file-dropzone/file-dropzone.js

@@ -90,7 +90,7 @@ export class FileDropzone {
         };
     }
     render() {
-        return (h(Host, { key: '0209f44f7cfe46ccb98b3e15d597555ac57c0dce', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, h("slot", { key: '1198fc4141e15527cd7575f5dd88b06b1a9d61c1' }), this.renderOnDragLayout()));
+        return (h(Host, { key: 'd04afa2b6b4b0cb45ac908891f8b0b5da8d9867b', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, h("slot", { key: '1b125711e06ccd2357375127b6cf2dd12779e584' }), this.renderOnDragLayout()));
     }
     static get is() { return "limel-file-dropzone"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/file-input/file-input.js

@@ -72,7 +72,7 @@ export class FileInput {
         this.fileInput = this.element.shadowRoot.getElementById(this.fileInputId);
     }
     render() {
-        return (h(Host, { key: 'e499bde6727abc2123d0aa70d446860de930a838', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("input", { key: '9e3ba97f8f43b90d6d63e348acda5fa2a3976432', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), h("slot", { key: 'c29534ed1ee305ba85afd02c4b66e61eae817a5e' })));
+        return (h(Host, { key: '2ec5c6a56f846b4c606633fd418c4867f50f470d', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("input", { key: 'c6a782ec3d71be85ca6e4fe13f5616b7c3809989', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), h("slot", { key: '86efec1ed582204301530ecd549367be1c952b1d' })));
     }
     handleKeyDown(event) {
         if (['Tab', 'Backspace', 'Enter'].includes(event.code)) {

package/dist/collection/components/flex-container/flex-container.js

@@ -31,7 +31,7 @@ export class FlexContainer {
         console.warn('limel-flex-container is deprecated, please use CSS instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox');
     }
     render() {
-        return h("slot", { key: '2049c195a3ded73e31597b1e51f3d4af9b7316ed' });
+        return h("slot", { key: '15e4e05dceb2966750d9fce29f401585c1e7332d' });
     }
     static get is() { return "limel-flex-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { getDefaultRegistry } from "@rjsf/core";
 import { CodeEditor } from "../widgets/code-editor";
-import { renderDescription, renderTitle } from "../templates/common";
+import { renderHeader } from "../templates/common";
 import { isCustomObjectSchema } from "./field-helpers";
 const { fields: defaultFields } = getDefaultRegistry();
 const BaseObjectField = defaultFields.ObjectField;
@@ -10,6 +10,6 @@ export 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));
     }
 }

package/dist/collection/components/form/form.css

@@ -358,7 +358,7 @@ limel-collapsible-section.is-being-dragged {
   width: 100%;
 }
 
-h1 {
+:is(h1, h2, h3, h4, h5, h6) {
   position: relative;
   margin-top: 0;
   margin-bottom: 0;
@@ -366,8 +366,8 @@ h1 {
   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);
+  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;
 }
@@ -385,18 +385,18 @@ limel-markdown {
   top: calc(var(--form-row-gap, 1rem) * -0.5);
   left: calc(var(--form-column-gap, 1rem) * -0.5);
 }
-.rjsf-field h1 {
+.rjsf-field :is(h1, h2, h3, h4, h5, h6) {
   color: rgb(var(--contrast-1400), 0.8);
 }
-.rjsf-field h1 {
-  --limel-form-h1-font-size: 1.476rem;
+.rjsf-field :is(h1, h2, h3, h4, h5, h6) {
+  --limel-form-heading-font-size: 1.476rem;
   font-weight: 800;
 }
-.rjsf-field .rjsf-field h1 {
-  --limel-form-h1-font-size: 1.383rem;
+.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 h1:before {
+.rjsf-field .rjsf-field :is(h1, h2, h3, h4, h5, h6):before {
   content: "";
   display: block;
   position: absolute;
@@ -410,29 +410,29 @@ limel-markdown {
   border-radius: 0.125rem;
   opacity: 0.6;
 }
-.rjsf-field .rjsf-field .rjsf-field h1 {
-  --limel-form-h1-font-size: 1.296rem;
+.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 h1:before {
+.rjsf-field .rjsf-field .rjsf-field :is(h1, h2, h3, h4, h5, h6):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 :is(h1, h2, h3, h4, h5, h6) {
+  --limel-form-heading-font-size: 1.215rem;
 }
-.rjsf-field .rjsf-field .rjsf-field .rjsf-field h1:before {
+.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 h1 {
-  --limel-form-h1-font-size: 1.138rem;
+.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 h1:before {
+.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 h1 {
-  --limel-form-h1-font-size: 1.067rem;
+.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 h1:before {
+.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field :is(h1, h2, h3, h4, h5, h6):before {
   display: none;
 }
 

package/dist/collection/components/form/form.js

@@ -22,6 +22,7 @@ import { widgets } from "./widgets";
 import { rjsfValidator } from "./validator";
 import { isEqual, mapValues } from "lodash-es";
 import { showField } from "./show-field";
+import { HeadingLevelContext, isHeadingLevel } from "./templates/heading-level";
 /**
  * @exampleComponent limel-example-form
  * @exampleComponent limel-example-nested-form
@@ -40,6 +41,7 @@ import { showField } from "./show-field";
  * @exampleComponent limel-example-builtin-field-types-form
  * @exampleComponent limel-example-code-editor-form
  * @exampleComponent limel-example-form-highlighted-field
+ * @exampleComponent limel-example-form-heading-level
  */
 export class Form {
     constructor() {
@@ -51,6 +53,16 @@ export class Form {
          * 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
@@ -66,10 +78,21 @@ export class Form {
     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)) {
@@ -96,14 +119,18 @@ export class Form {
         this.initialized = false;
     }
     render() {
-        return h("div", { key: 'e57ab791f09cd1e8271437e91822ffabcfe2a118', class: "root" });
+        return h("div", { key: '3f2e4aedf778c43f02ab87c32074cb3face9a55b', class: "root" });
     }
     reactRender() {
         if (!this.root) {
             const rootElement = this.host.shadowRoot.querySelector('.root');
             this.root = createRoot(rootElement);
         }
-        this.root.render(React.createElement(JSONSchemaForm, {
+        this.root.render(React.createElement(HeadingLevelContext.Provider, {
+            value: isHeadingLevel(this.headingLevel)
+                ? this.headingLevel
+                : 1,
+        }, React.createElement(JSONSchemaForm, {
             schema: this.prepareSchema(this.schema),
             formData: this.value,
             onChange: this.handleChange,
@@ -141,7 +168,7 @@ export class Form {
                 ArrayField: CustomArrayField,
                 ObjectField: CustomObjectField,
             },
-        }, []));
+        }, [])));
     }
     showHighlightedField() {
         if (!this.highlightedField) {
@@ -383,6 +410,33 @@ export class Form {
                 "getter": false,
                 "setter": false
             },
+            "headingLevel": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeadingLevel",
+                    "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+                    "references": {
+                        "HeadingLevel": {
+                            "location": "import",
+                            "path": "./form.types",
+                            "id": "src/components/form/form.types.ts::HeadingLevel",
+                            "referenceLocation": "HeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The level, from `1` to `6`, of the topmost headings in the form.\nThe headings of the sections inside them get one level more for each\nlevel of nesting, down to `6`.\n\nSet it so that the headings of the form fit below the headings of\nthe page around it. For example, when the form is in a section with\nan `h2` heading, set it to `3`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-level",
+                "defaultValue": "1"
+            },
             "revealErrors": {
                 "type": "boolean",
                 "mutable": false,
@@ -473,6 +527,9 @@ export class Form {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
+                "propName": "headingLevel",
+                "methodName": "handleHeadingLevelChange"
+            }, {
                 "propName": "highlightedField",
                 "methodName": "handleHighlightedFieldChange"
             }];

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

@@ -680,3 +680,65 @@ export const requiredCheckboxSchema = {
     },
     required: ['accept'],
 };
+export const nestedTitlesSchema = {
+    type: 'object',
+    title: 'Form',
+    properties: {
+        section: {
+            type: 'object',
+            title: 'Section',
+            properties: {
+                subsection: {
+                    type: 'object',
+                    title: 'Subsection',
+                    properties: {
+                        name: { type: 'string', title: 'Name' },
+                    },
+                },
+            },
+        },
+        list: {
+            type: 'array',
+            title: 'List',
+            items: { type: 'string' },
+        },
+    },
+};
+export const titledRowLayoutSchema = {
+    type: 'object',
+    title: 'Form',
+    properties: {
+        first: { type: 'string', title: 'First' },
+        second: { type: 'string', title: 'Second' },
+    },
+    lime: {
+        layout: {
+            type: 'row',
+        },
+    },
+};
+export const untitledRootSchema = {
+    type: 'object',
+    properties: {
+        section: {
+            type: 'object',
+            title: 'Section',
+            properties: {
+                name: { type: 'string', title: 'Name' },
+            },
+        },
+    },
+};
+export const untitledRowSchema = {
+    type: 'object',
+    title: 'Form',
+    properties: {
+        first: { type: 'string', title: 'First' },
+        second: { type: 'string' },
+    },
+    lime: {
+        layout: {
+            type: 'row',
+        },
+    },
+};

package/dist/collection/components/form/help/help.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { getHelpProps } from "../../form-header/help-props";
 /**
  *
  * @param schema
@@ -10,9 +11,5 @@ export 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));
 }

package/dist/collection/components/form/row/row.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { RowLayoutContext } from "./row-context";
+import { HeadingLevelContext } from "../templates/heading-level";
 export class Row extends React.Component {
     constructor(props) {
         super(props);
@@ -26,7 +27,8 @@ export 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;
@@ -48,3 +50,4 @@ export 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;

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

@@ -1,7 +1,6 @@
 import React from "react";
-import { renderDescription, renderTitle } from "./common";
+import { renderSection } from "./common";
 import { toSchemaPath } from "./object-field";
-import { getHelpComponent } from "../help";
 import { DragToReorder } from "../../../util/drag-to-reorder";
 import { ArrayFieldContext } from "./array-context";
 export const ARRAY_REORDER_EVENT = 'arrayReorder';
@@ -64,12 +63,13 @@ export 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) {

package/dist/collection/components/form/templates/common.js

@@ -1,15 +1,32 @@
 import { get, isEmpty } from "lodash-es";
 import React from "react";
 import { isArrayType, isObjectType } from "../schema";
+import { BelowHeading, Header } from "./heading-level";
 /**
+ * Render the title of a field, with its description and help, as a
+ * heading.
  *
- * @param title
+ * @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
  */
-export function renderTitle(title) {
-    if (!title) {
+export 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
+ */
+export function renderSection(title, description, help, ...content) {
+    return React.createElement(React.Fragment, {}, renderHeader(title, description, help), React.createElement(BelowHeading, { hasHeading: !!title }, ...content));
 }
 /**
  *

package/dist/collection/components/form/templates/heading-level.js

@@ -0,0 +1,51 @@
+import React, { useContext } from "react";
+/**
+ * @param level - any value
+ * @returns whether the value is a heading level, from `1` to `6`
+ */
+export 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.
+ */
+export const HeadingLevelContext = React.createContext(1);
+/**
+ * @param level - a heading level
+ * @returns the level of the headings one step below, down to `h6`
+ */
+export 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
+ */
+export function Header({ title, description, help }) {
+    const headingLevel = 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 props
+ * @param props.hasHeading - whether the fields are below a heading
+ * @param props.children - the fields
+ */
+export function BelowHeading({ hasHeading, children, }) {
+    const level = useContext(HeadingLevelContext);
+    return React.createElement(HeadingLevelContext.Provider, { value: hasHeading ? nextHeadingLevel(level) : level }, children);
+}

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

@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { hasNestedErrors, renderDescription, renderTitle } from "./common";
+import { hasNestedErrors, renderDescription, renderSection } from "./common";
 import { GridLayout } from "./grid-layout";
 import { RowLayout } from "./row-layout";
 import { getHelpComponent } from "../help";
@@ -16,14 +16,8 @@ export const ObjectFieldTemplate = (props) => {
     return renderCollapsibleField(props);
 };
 function renderFieldWithTitle(props) {
-    return React.createElement(React.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema, 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;

package/dist/collection/components/form-header/form-header.css

@@ -0,0 +1,3 @@
+limel-form-header {
+  display: block;
+}