@limetech/lime-elements 40.17.0 → 40.17.1

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

@@ -32,7 +32,7 @@ const FormHeader = class {
         this.headingLevel = 1;
     }
     render() {
-        return (index.h(index.Host, { key: 'bfb0a90340ac54c7f083df2989fd8c2acb97308f' }, this.renderHeading(), this.renderHelp(), this.renderDescription()));
+        return (index.h(index.Host, { key: '0d8282124405665c18b93aa753dd40cf616a6e6b' }, this.renderHeading(), this.renderHelp(), this.renderDescription()));
     }
     renderHeading() {
         if (!this.heading) {

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

@@ -2,6 +2,7 @@
 
 var index = require('./index-BlsqxTB1.js');
 var _commonjsHelpers = require('./_commonjsHelpers-CFO10eej.js');
+var headingLevel = require('./heading-level-BxCuIKkm.js');
 var _baseIteratee = require('./_baseIteratee-Cistiy8H.js');
 var isEmpty = require('./isEmpty-BsdhcVKT.js');
 var helpProps = require('./help-props-Ds30nnt1.js');
@@ -44023,16 +44024,6 @@ function isType(input, type) {
     return 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.
  */
@@ -44398,6 +44389,7 @@ const ArrayItemErrorsContext = reactExports.createContext(null);
 
 const ObjectFieldTemplate = (props) => {
     const arrayContext = reactExports.useContext(ArrayFieldContext);
+    const headingLevel = reactExports.useContext(HeadingLevelContext);
     const id = props.fieldPathId.$id;
     if (arrayContext && id !== 'root') {
         return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
@@ -44405,13 +44397,13 @@ const ObjectFieldTemplate = (props) => {
     if (id === 'root' || !isCollapsible(props.schema)) {
         return renderFieldWithTitle(props);
     }
-    return renderCollapsibleField(props);
+    return renderCollapsibleField(props, headingLevel);
 };
 function renderFieldWithTitle(props) {
     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) {
+function renderCollapsibleField(props, headingLevel) {
     var _a;
     const defaultOpen = !isCollapsed(props.schema);
     const helpElement = getHelpComponent(props.schema, {
@@ -44421,10 +44413,11 @@ function renderCollapsibleField(props) {
     const invalid = revealErrors && hasNestedErrors(props.errorSchema);
     return React.createElement('limel-collapsible-section', {
         header: props.title,
+        headingLevel: headingLevel,
         id: getSchemaObjectPropertyPath(props.registry.formContext.schema, props.fieldPathId),
         'is-open': defaultOpen,
         invalid: invalid,
-    }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
+    }, helpElement, renderDescription(props.description), React.createElement(BelowHeading, { hasHeading: !!props.title }, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String))));
 }
 function getSchemaObjectPropertyPath(schema, fieldPathId) {
     var _a, _b;
@@ -44821,10 +44814,11 @@ class CollapsibleItemTemplate extends React.Component {
         section.removeEventListener('open', this.handleOpen);
     }
     render() {
-        const { data, schema, formSchema, errorSchema, revealErrors } = this.props;
+        const { errorSchema, revealErrors } = this.props;
+        const header = getItemHeader(this.props);
         let children;
         if (this.state.isOpen) {
-            children = this.props.children;
+            children = React.createElement(BelowHeading, { hasHeading: !!header }, this.props.children);
         }
         const dragHandle = this.props.allowItemReorder
             ? React.createElement('limel-drag-handle', {
@@ -44834,7 +44828,8 @@ class CollapsibleItemTemplate extends React.Component {
             : null;
         const invalid = revealErrors === true && hasNestedErrors(errorSchema);
         return React.createElement('limel-collapsible-section', {
-            header: findTitle(data, schema, formSchema) || 'New item',
+            header: header,
+            headingLevel: this.context,
             class: 'array-item limel-form-array-item--object',
             ref: (section) => {
                 this.section = section;
@@ -44866,6 +44861,13 @@ class CollapsibleItemTemplate extends React.Component {
         event.detail.run(event);
     }
 }
+CollapsibleItemTemplate.contextType = HeadingLevelContext;
+function getItemHeader(props) {
+    const { data, schema, formSchema } = props;
+    const title = findTitle(data, schema, formSchema);
+    const text = Array.isArray(title) ? title.join(', ') : title;
+    return text ? String(text) : 'New item';
+}
 /**
  * An item counts as new while it holds nothing the user entered. Since
  * `@rjsf/core` 6.10 fills a required property with its default as soon as the
@@ -46158,7 +46160,8 @@ const Form = class {
         /**
          * 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`.
+         * level of nesting, down to `6`. A collapsible section, and each item
+         * of a list that is shown as one, counts as a level too.
          *
          * 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
@@ -46191,7 +46194,7 @@ const Form = class {
         this.warnIfHeadingLevelIsInvalid();
     }
     warnIfHeadingLevelIsInvalid() {
-        if (!isHeadingLevel(this.headingLevel)) {
+        if (!headingLevel.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.`);
         }
     }
@@ -46221,7 +46224,7 @@ const Form = class {
         this.initialized = false;
     }
     render() {
-        return index.h("div", { key: '3f2e4aedf778c43f02ab87c32074cb3face9a55b', class: "root" });
+        return index.h("div", { key: 'e986502a86c34465c7e3f2af89372e00809e4705', class: "root" });
     }
     reactRender() {
         if (!this.root) {
@@ -46229,7 +46232,7 @@ const Form = class {
             this.root = clientExports.createRoot(rootElement);
         }
         this.root.render(React.createElement(HeadingLevelContext.Provider, {
-            value: isHeadingLevel(this.headingLevel)
+            value: headingLevel.isHeadingLevel(this.headingLevel)
                 ? this.headingLevel
                 : 1,
         }, React.createElement(Form$1, {

package/dist/collection/components/collapsible-section/collapsible-section.js

@@ -4,13 +4,8 @@ import { makeEnterClickable, removeEnterClickable, } from "../../util/make-enter
 import { createRandomString } from "../../util/random-string";
 import { getIconColor, getIconName, getIconTitle, } from "../icon/get-icon-props";
 import translate from "../../global/translations";
+import { isHeadingLevel } from "../../util/heading-level";
 const DEFAULT_HEADING_LEVEL = 2;
-function isHeadingLevel(level) {
-    return (typeof level === 'number' &&
-        Number.isSafeInteger(level) &&
-        level >= 1 &&
-        level <= 6);
-}
 /**
  * A collapsible section can be used to group related content together
  * and hide the group when not needed.
@@ -135,7 +130,7 @@ export class CollapsibleSection {
         removeEnterClickable(button);
     }
     render() {
-        return (h("section", { key: '1cb8db604bbbc8f8dbb7ca97895b3cfcf4dcd80b', class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, h("header", { key: '4e55c5b636b1d049df4d77a77a35285648096ea0' }, h("button", { key: '29eefb5499fb0f00cbdf513698acf8f357a935a6', class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.getCollapsibleSectionAriaLabel(), type: "button" }), this.renderExpandCollapseSign(), this.renderIcon(), this.renderHeading(), h("div", { key: '16ec84abfe81a812c9d30188a714b58d363ca8a3', class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), h("div", { key: 'f28ff7d73f05dc1a6ca0dcd9948cb67107647598', class: "body", inert: !this.isOpen, "aria-hidden": String(!this.isOpen), id: this.bodyId, role: "region" }, h("slot", { key: '33d0fda5501c178f92dff4a1b0361a43829fe095' }))));
+        return (h("section", { key: 'ff18dacc5e74d3bd8d16da55be3e5340922acf86', class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, h("header", { key: 'f4dba35493c7ce7344ff34d2fbaeeb769f8c87eb' }, h("button", { key: 'd3a632b4002d01774c9bb88f250be4e196340ef3', class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.getCollapsibleSectionAriaLabel(), type: "button" }), this.renderExpandCollapseSign(), this.renderIcon(), this.renderHeading(), h("div", { key: '8d8489917d5e1bfa8de3cca8294651f448c8129c', class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), h("div", { key: 'fd7e13cf3bd26815d62c3fbac0ef04ed4db364b5', class: "body", inert: !this.isOpen, "aria-hidden": String(!this.isOpen), id: this.bodyId, role: "region" }, h("slot", { key: '90ed08286c1091f5c5c5feec827729cfa65588fc' }))));
     }
     getHeadingLevel() {
         return isHeadingLevel(this.headingLevel)
@@ -207,9 +202,16 @@ export class CollapsibleSection {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "1 | 2 | 3 | 4 | 5 | 6",
+                    "original": "HeadingLevel",
                     "resolved": "1 | 2 | 3 | 4 | 5 | 6",
-                    "references": {}
+                    "references": {
+                        "HeadingLevel": {
+                            "location": "import",
+                            "path": "../../global/shared-types/heading-level.types",
+                            "id": "src/global/shared-types/heading-level.types.ts::HeadingLevel",
+                            "referenceLocation": "HeadingLevel"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,

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

@@ -14,6 +14,7 @@ import { h, } from "@stencil/core";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import JSONSchemaForm from "@rjsf/core";
+import { isHeadingLevel } from "../../util/heading-level";
 import { ArrayFieldTemplate, ArrayFieldItemTemplate, FieldTemplate, ObjectFieldTemplate, } from "./templates";
 import { SchemaField as CustomSchemaField } from "./fields/schema-field";
 import { ArrayField as CustomArrayField } from "./fields/array-field";
@@ -22,7 +23,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";
+import { HeadingLevelContext } from "./templates/heading-level";
 /**
  * @exampleComponent limel-example-form
  * @exampleComponent limel-example-nested-form
@@ -56,7 +57,8 @@ export class Form {
         /**
          * 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`.
+         * level of nesting, down to `6`. A collapsible section, and each item
+         * of a list that is shown as one, counts as a level too.
          *
          * 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
@@ -119,7 +121,7 @@ export class Form {
         this.initialized = false;
     }
     render() {
-        return h("div", { key: '3f2e4aedf778c43f02ab87c32074cb3face9a55b', class: "root" });
+        return h("div", { key: 'e986502a86c34465c7e3f2af89372e00809e4705', class: "root" });
     }
     reactRender() {
         if (!this.root) {
@@ -419,8 +421,8 @@ export class Form {
                     "references": {
                         "HeadingLevel": {
                             "location": "import",
-                            "path": "./form.types",
-                            "id": "src/components/form/form.types.ts::HeadingLevel",
+                            "path": "../../global/shared-types/heading-level.types",
+                            "id": "src/global/shared-types/heading-level.types.ts::HeadingLevel",
                             "referenceLocation": "HeadingLevel"
                         }
                     }
@@ -429,7 +431,7 @@ export class Form {
                 "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`."
+                    "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`. A collapsible section, and each item\nof a list that is shown as one, counts as a level too.\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,

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

@@ -455,6 +455,26 @@ export const nestedArrayObjectSchema = {
         },
     },
 };
+export const arrayItemWithEmptyListSchema = {
+    type: 'object',
+    properties: {
+        people: {
+            type: 'array',
+            title: 'People',
+            items: {
+                type: 'object',
+                properties: {
+                    tags: {
+                        type: 'array',
+                        title: 'Tags',
+                        items: { type: 'string' },
+                    },
+                    role: { type: 'string', title: 'Role' },
+                },
+            },
+        },
+    },
+};
 export const topLevelStringCustomComponentSchema = {
     type: 'object',
     properties: {
@@ -729,6 +749,54 @@ export const untitledRootSchema = {
         },
     },
 };
+export const nestedCollapsibleSchema = {
+    type: 'object',
+    title: 'Form',
+    properties: {
+        details: {
+            type: 'object',
+            title: 'Details',
+            lime: { collapsible: true },
+            properties: {
+                address: {
+                    type: 'object',
+                    title: 'Address',
+                    lime: { collapsible: true },
+                    properties: {
+                        street: { type: 'string', title: 'Street' },
+                        position: {
+                            type: 'object',
+                            title: 'Position',
+                            properties: {
+                                latitude: { type: 'number', title: 'Latitude' },
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    },
+};
+export const untitledCollapsibleSchema = {
+    type: 'object',
+    title: 'Form',
+    properties: {
+        details: {
+            type: 'object',
+            title: '',
+            lime: { collapsible: true },
+            properties: {
+                section: {
+                    type: 'object',
+                    title: 'Section',
+                    properties: {
+                        name: { type: 'string', title: 'Name' },
+                    },
+                },
+            },
+        },
+    },
+};
 export const untitledRowSchema = {
     type: 'object',
     title: 'Form',

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

@@ -3,6 +3,7 @@ import { findTitle, hasNestedErrors } from "./common";
 import { getDefaultFormState, } from "@rjsf/utils";
 import { isEmpty, isEqual } from "lodash-es";
 import { rjsfValidator } from "../validator";
+import { BelowHeading, HeadingLevelContext } from "./heading-level";
 export class CollapsibleItemTemplate extends React.Component {
     constructor(props) {
         super(props);
@@ -35,10 +36,11 @@ export class CollapsibleItemTemplate extends React.Component {
         section.removeEventListener('open', this.handleOpen);
     }
     render() {
-        const { data, schema, formSchema, errorSchema, revealErrors } = this.props;
+        const { errorSchema, revealErrors } = this.props;
+        const header = getItemHeader(this.props);
         let children;
         if (this.state.isOpen) {
-            children = this.props.children;
+            children = React.createElement(BelowHeading, { hasHeading: !!header }, this.props.children);
         }
         const dragHandle = this.props.allowItemReorder
             ? React.createElement('limel-drag-handle', {
@@ -48,7 +50,8 @@ export class CollapsibleItemTemplate extends React.Component {
             : null;
         const invalid = revealErrors === true && hasNestedErrors(errorSchema);
         return React.createElement('limel-collapsible-section', {
-            header: findTitle(data, schema, formSchema) || 'New item',
+            header: header,
+            headingLevel: this.context,
             class: 'array-item limel-form-array-item--object',
             ref: (section) => {
                 this.section = section;
@@ -80,6 +83,13 @@ export class CollapsibleItemTemplate extends React.Component {
         event.detail.run(event);
     }
 }
+CollapsibleItemTemplate.contextType = HeadingLevelContext;
+function getItemHeader(props) {
+    const { data, schema, formSchema } = props;
+    const title = findTitle(data, schema, formSchema);
+    const text = Array.isArray(title) ? title.join(', ') : title;
+    return text ? String(text) : 'New item';
+}
 /**
  * An item counts as new while it holds nothing the user entered. Since
  * `@rjsf/core` 6.10 fills a required property with its default as soon as the

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

@@ -1,14 +1,4 @@
 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.
  */

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

@@ -4,8 +4,10 @@ import { GridLayout } from "./grid-layout";
 import { RowLayout } from "./row-layout";
 import { getHelpComponent } from "../help";
 import { ArrayFieldContext } from "./array-context";
+import { BelowHeading, HeadingLevelContext } from "./heading-level";
 export const ObjectFieldTemplate = (props) => {
     const arrayContext = useContext(ArrayFieldContext);
+    const headingLevel = useContext(HeadingLevelContext);
     const id = props.fieldPathId.$id;
     if (arrayContext && id !== 'root') {
         return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
@@ -13,13 +15,13 @@ export const ObjectFieldTemplate = (props) => {
     if (id === 'root' || !isCollapsible(props.schema)) {
         return renderFieldWithTitle(props);
     }
-    return renderCollapsibleField(props);
+    return renderCollapsibleField(props, headingLevel);
 };
 function renderFieldWithTitle(props) {
     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) {
+function renderCollapsibleField(props, headingLevel) {
     var _a;
     const defaultOpen = !isCollapsed(props.schema);
     const helpElement = getHelpComponent(props.schema, {
@@ -29,10 +31,11 @@ function renderCollapsibleField(props) {
     const invalid = revealErrors && hasNestedErrors(props.errorSchema);
     return React.createElement('limel-collapsible-section', {
         header: props.title,
+        headingLevel: headingLevel,
         id: getSchemaObjectPropertyPath(props.registry.formContext.schema, props.fieldPathId),
         'is-open': defaultOpen,
         invalid: invalid,
-    }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
+    }, helpElement, renderDescription(props.description), React.createElement(BelowHeading, { hasHeading: !!props.title }, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String))));
 }
 function getSchemaObjectPropertyPath(schema, fieldPathId) {
     var _a, _b;

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

@@ -29,7 +29,7 @@ export class FormHeader {
         this.headingLevel = 1;
     }
     render() {
-        return (h(Host, { key: 'bfb0a90340ac54c7f083df2989fd8c2acb97308f' }, this.renderHeading(), this.renderHelp(), this.renderDescription()));
+        return (h(Host, { key: '0d8282124405665c18b93aa753dd40cf616a6e6b' }, this.renderHeading(), this.renderHelp(), this.renderDescription()));
     }
     renderHeading() {
         if (!this.heading) {
@@ -91,8 +91,8 @@ export class FormHeader {
                     "references": {
                         "HeadingLevel": {
                             "location": "import",
-                            "path": "../form/form.types",
-                            "id": "src/components/form/form.types.ts::HeadingLevel",
+                            "path": "../../global/shared-types/heading-level.types",
+                            "id": "src/global/shared-types/heading-level.types.ts::HeadingLevel",
                             "referenceLocation": "HeadingLevel"
                         }
                     }

package/dist/collection/global/shared-types/heading-level.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/interface.js

@@ -44,6 +44,7 @@ export * from './global/shared-types/separator.types';
 export * from './global/shared-types/icon.types';
 export * from './global/shared-types/image.types';
 export * from './global/shared-types/color.types';
+export * from './global/shared-types/heading-level.types';
 export * from './components/text-editor/text-editor.types';
 export * from './components/text-editor/types';
 export * from './components/text-editor/prosemirror-adapter/menu/types';

package/dist/collection/util/heading-level.js

@@ -0,0 +1,10 @@
+/**
+ * @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);
+}

package/dist/esm/heading-level-B3C0kDpZ.js

@@ -0,0 +1,12 @@
+/**
+ * @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);
+}
+
+export { isHeadingLevel as i };

package/dist/esm/limel-collapsible-section.entry.js

@@ -4,17 +4,12 @@ import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter
 import { c as createRandomString } from './random-string-BrjD-ITe.js';
 import { b as getIconColor, d as getIconTitle, g as getIconName } from './get-icon-props-CgNJbSP4.js';
 import { t as translations } from './translations-Drl5LNAD.js';
+import { i as isHeadingLevel } from './heading-level-B3C0kDpZ.js';
 import './language-ChagAaNf.js';
 
 const collapsibleSectionCss = () => `@charset "UTF-8";.expand-icon{position:relative;display:flex;align-items:center;justify-content:center;height:1.875rem;margin:0 0 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;inset:auto;margin:auto;width:100%;border-radius:1rem;height:0.125rem}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s;opacity:0;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:nth-of-type(2){transform:translate3d(0, 0.25rem, 0) rotate(90deg)}.line:nth-of-type(3){transform:translate3d(0, -0.25rem, 0) rotate(-90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}.line:nth-of-type(2):before,.line:nth-of-type(2):after,.line:nth-of-type(3):before,.line:nth-of-type(3):after{content:"";position:absolute;inset:0;margin:auto;width:50%;height:100%;border-radius:inherit;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:nth-of-type(2):before,.line:nth-of-type(3):before{transform:translate3d(0, -0.1rem, 0) rotate(45deg)}.line:nth-of-type(2):after,.line:nth-of-type(3):after{transform:translate3d(0, 0.1rem, 0) rotate(-45deg)}.open-close-toggle:hover+.expand-icon .line:first-of-type,.open-close-toggle:hover+.expand-icon .line:last-of-type,.open-close-toggle:focus-visible+.expand-icon .line:first-of-type,.open-close-toggle:focus-visible+.expand-icon .line:last-of-type{transition:opacity 0.8s ease 0.4s, transform 0.4s ease 0.3s;opacity:1}.open-close-toggle:hover+.expand-icon .line:first-of-type,.open-close-toggle:focus-visible+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type,.open-close-toggle:focus-visible+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3),.open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(2),.open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(2){transform:translate3d(0, 0.5rem, 0) rotate(90deg);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3),.open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(3){transform:translate3d(0, -0.5rem, 0) rotate(-90deg);opacity:0.4}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s;opacity:1}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, 1rem, 0) rotate(90deg);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, -1rem, 0) rotate(-90deg);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type,section.open .open-close-toggle:focus-visible+.expand-icon .line:first-of-type,section.open .open-close-toggle:focus-visible+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:focus-visible+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type,section.open .open-close-toggle:focus-visible+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2),section.open .open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(2){transform:translate3d(0, 1rem, 0) rotate(90deg);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3),section.open .open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(3){transform:translate3d(0, -1rem, 0) rotate(-90deg);opacity:0}:host(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}button.open-close-toggle{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;position:absolute;inset:0;width:100%}button.open-close-toggle:focus{outline:none}button.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.open-close-toggle{transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}button.open-close-toggle:hover,button.open-close-toggle:focus-visible{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open button.open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) var(--limel-cs-open-header-bottom-border-radius, 0) var(--limel-cs-open-header-bottom-border-radius, 0)}section.open button.open-close-toggle:hover,section.open button.open-close-toggle:focus-visible{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}section{transition:box-shadow 0.4s ease;border-radius:var(--border-radius-of-header)}section[aria-invalid]:not([aria-invalid=false]){--header-stroke-color:rgb(var(--color-red-default)) !important}section[aria-invalid]:not([aria-invalid=false]):not(.open){box-shadow:0 0 0 1px rgb(var(--color-red-default))}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;gap:0.5rem;padding-left:0.5rem;height:2.5rem}limel-icon{width:1.5rem;flex-shrink:0}.title{font-size:1rem;font-weight:300;color:var(--limel-theme-on-surface-color);justify-self:flex-start;user-select:none;height:auto;max-height:3rem;line-height:1.2rem;display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:1rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));opacity:0;margin-right:0.5rem}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}::slotted([slot=header]){margin-right:0.5rem}.body{background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header)}.body{transition:grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);display:grid;grid-template-rows:var(--limel-cs-grid-template-rows)}.body slot{transition:opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);display:block;overflow:hidden}:host(limel-collapsible-section:not([is-open])){--limel-cs-opacity-transition-speed:0.1s;--limel-cs-opacity-transition-delay:0s;--limel-cs-grid-template-rows-transition-speed:0.3s;--limel-cs-grid-template-rows:0fr}:host(limel-collapsible-section:not([is-open])) slot{opacity:0}:host(limel-collapsible-section[is-open]){--limel-cs-opacity-transition-speed:0.4s;--limel-cs-opacity-transition-delay:0.3s;--limel-cs-grid-template-rows-transition-speed:0.46s;--limel-cs-grid-template-rows:1fr}:host(limel-collapsible-section[is-open]) slot{opacity:1}header:hover+.body,header:has(.open-close-toggle:hover)+.body,header:has(.open-close-toggle:focus-visible)+.body{will-change:grid-template-rows}header:hover+.body slot,header:has(.open-close-toggle:hover)+.body slot,header:has(.open-close-toggle:focus-visible)+.body slot{will-change:opacity}`;
 
 const DEFAULT_HEADING_LEVEL = 2;
-function isHeadingLevel(level) {
-    return (typeof level === 'number' &&
-        Number.isSafeInteger(level) &&
-        level >= 1 &&
-        level <= 6);
-}
 const CollapsibleSection = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -121,7 +116,7 @@ const CollapsibleSection = class {
         removeEnterClickable(button);
     }
     render() {
-        return (h("section", { key: '1cb8db604bbbc8f8dbb7ca97895b3cfcf4dcd80b', class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, h("header", { key: '4e55c5b636b1d049df4d77a77a35285648096ea0' }, h("button", { key: '29eefb5499fb0f00cbdf513698acf8f357a935a6', class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.getCollapsibleSectionAriaLabel(), type: "button" }), this.renderExpandCollapseSign(), this.renderIcon(), this.renderHeading(), h("div", { key: '16ec84abfe81a812c9d30188a714b58d363ca8a3', class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), h("div", { key: 'f28ff7d73f05dc1a6ca0dcd9948cb67107647598', class: "body", inert: !this.isOpen, "aria-hidden": String(!this.isOpen), id: this.bodyId, role: "region" }, h("slot", { key: '33d0fda5501c178f92dff4a1b0361a43829fe095' }))));
+        return (h("section", { key: 'ff18dacc5e74d3bd8d16da55be3e5340922acf86', class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, h("header", { key: 'f4dba35493c7ce7344ff34d2fbaeeb769f8c87eb' }, h("button", { key: 'd3a632b4002d01774c9bb88f250be4e196340ef3', class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.getCollapsibleSectionAriaLabel(), type: "button" }), this.renderExpandCollapseSign(), this.renderIcon(), this.renderHeading(), h("div", { key: '8d8489917d5e1bfa8de3cca8294651f448c8129c', class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), h("div", { key: 'fd7e13cf3bd26815d62c3fbac0ef04ed4db364b5', class: "body", inert: !this.isOpen, "aria-hidden": String(!this.isOpen), id: this.bodyId, role: "region" }, h("slot", { key: '90ed08286c1091f5c5c5feec827729cfa65588fc' }))));
     }
     getHeadingLevel() {
         return isHeadingLevel(this.headingLevel)