@limetech/lime-elements 40.17.0 → 40.18.0

package/dist/lime-elements/p-e8255f0b.entry.js

@@ -0,0 +1 @@
+import{r as e,c as o,h as t,a as i}from"./p-BU9IJqli.js";import{d as n}from"./p-z_E3sq3p.js";import{m as s,r}from"./p-CIf8aGSd.js";import{c as a}from"./p-BrjD-ITe.js";import{b as l,d as c,g as d}from"./p-CgNJbSP4.js";import{t as p}from"./p-B26k4gw8.js";import{i as h}from"./p-B3C0kDpZ.js";import"./p-ChagAaNf.js";const g=class{constructor(i){e(this,i),this.open=o(this,"open",7),this.close=o(this,"close",7),this.action=o(this,"action",7),this.isOpen=!1,this.headingLevel=2,this.invalid=!1,this.language="en",this.bodyId=a(),this.headingId=a(),this.onClick=()=>{this.handleInteraction()},this.handleInteraction=()=>{this.isOpen=!this.isOpen,this.isOpen?(this.open.emit(),setTimeout(n,100)):this.close.emit()},this.renderExpandCollapseSign=()=>t("div",{class:"expand-icon",role:"presentation","aria-hidden":"true"},t("div",{class:"line"}),t("div",{class:"line"}),t("div",{class:"line"}),t("div",{class:"line"})),this.renderIcon=()=>{if(!this.icon)return;const e=d(this.icon),o=l(this.icon),i=c(this.icon);return t("limel-icon",{name:e,"aria-label":i,"aria-hidden":i?null:"true",style:{color:`${o}`}})},this.renderHeading=()=>{if(!this.header)return;const e=`h${this.getHeadingLevel()}`;return t(e,{class:"title mdc-typography mdc-typography--headline2",id:this.headingId},this.header)},this.renderActions=()=>{if(this.actions)return t("div",{class:"actions"},this.actions.map(this.renderActionButton))},this.renderActionButton=e=>t("limel-icon-button",{icon:e.icon,label:e.label,disabled:e.disabled,onClick:this.handleActionClick(e)}),this.handleActionClick=e=>o=>{o.stopPropagation(),this.action.emit(e)},this.getCollapsibleSectionAriaLabel=()=>p.get(this.isOpen?"collapsible-section.close":"collapsible-section.open",this.language,{header:this.header?`"${this.header}"`:" "})}componentWillLoad(){this.warnIfHeadingLevelIsInvalid()}handleHeadingLevelChange(){this.warnIfHeadingLevelIsInvalid()}componentDidRender(){const e=this.host.shadowRoot.querySelector(".open-close-toggle");s(e)}disconnectedCallback(){const e=this.host.shadowRoot.querySelector(".open-close-toggle");r(e)}render(){return t("section",{key:"ff18dacc5e74d3bd8d16da55be3e5340922acf86",class:this.isOpen?"open":"","aria-invalid":this.invalid,"aria-labelledby":this.header?this.headingId:null},t("header",{key:"f4dba35493c7ce7344ff34d2fbaeeb769f8c87eb"},t("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(),t("div",{key:"8d8489917d5e1bfa8de3cca8294651f448c8129c",class:"divider-line",role:"presentation"}),this.renderHeaderSlot(),this.renderActions()),t("div",{key:"fd7e13cf3bd26815d62c3fbac0ef04ed4db364b5",class:"body",inert:!this.isOpen,"aria-hidden":String(!this.isOpen),id:this.bodyId,role:"region"},t("slot",{key:"90ed08286c1091f5c5c5feec827729cfa65588fc"})))}getHeadingLevel(){return h(this.headingLevel)?this.headingLevel:2}warnIfHeadingLevelIsInvalid(){h(this.headingLevel)||console.warn(`limel-collapsible-section: headingLevel must be a whole number from 1 to 6, but it is ${this.headingLevel}. The heading is drawn as an h2 instead.`)}renderHeaderSlot(){return t("slot",{name:"header"})}get host(){return i(this)}static get watchers(){return{headingLevel:[{handleHeadingLevelChange:0}]}}};g.style='@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}';export{g as limel_collapsible_section}

package/dist/types/components/collapsible-section/collapsible-section.d.ts

@@ -1,6 +1,7 @@
 import { Action } from './action';
 import { Icon, IconName } from '../../global/shared-types/icon.types';
 import { Languages } from '../date-picker/date.types';
+import { HeadingLevel } from '../../global/shared-types/heading-level.types';
 /**
  * A collapsible section can be used to group related content together
  * and hide the group when not needed.
@@ -40,7 +41,7 @@ export declare class CollapsibleSection {
      * For example, when the section is below an `h2`, set it to `3`.
      * It does not change how the heading looks.
      */
-    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    headingLevel: HeadingLevel;
     /**
      * Icon to display in the header of the section
      */

package/dist/types/components/form/fields/schema-field.d.ts

@@ -19,6 +19,7 @@ export declare class SchemaField extends React.Component<FieldProps> {
     constructor(props: any);
     private isInvalid;
     private getHelperText;
+    private hasHeaderFromForm;
     private handleCustomComponentChange;
     private handleChange;
     /**

package/dist/types/components/form/form.d.ts

@@ -1,11 +1,13 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { FormError, FormSchema, HeadingLevel, ValidationError, ValidationStatus } from './form.types';
+import { FormError, FormSchema, ValidationError, ValidationStatus } from './form.types';
+import { HeadingLevel } from '../../global/shared-types/heading-level.types';
 /**
  * @exampleComponent limel-example-form
  * @exampleComponent limel-example-nested-form
  * @exampleComponent limel-example-list-form
  * @exampleComponent limel-example-dynamic-form
  * @exampleComponent limel-example-custom-component-form
+ * @exampleComponent limel-example-custom-component-header-form
  * @exampleComponent limel-example-props-factory-form
  * @exampleComponent limel-example-form-layout
  * @exampleComponent limel-example-form-span-fields
@@ -55,7 +57,8 @@ export declare 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

package/dist/types/components/form/form.test-schemas.d.ts

@@ -26,6 +26,10 @@ export declare const integerSchema: FormSchema;
 export declare const serverErrorsSchema: FormSchema;
 export declare const transformErrorsSchema: FormSchema;
 export declare const customComponentSchema: FormSchema;
+export declare const customComponentWithHeaderSchema: FormSchema;
+export declare const requiredCustomComponentWithHeaderSchema: FormSchema;
+export declare const customComponentWithHelpSchema: FormSchema;
+export declare const rowLayoutWithCustomComponentHeaderSchema: FormSchema;
 export declare const undefinedComponentSchema: FormSchema;
 export declare const emptySchema: FormSchema;
 export declare const hiddenFieldSchema: FormSchema;
@@ -35,6 +39,7 @@ export declare const arrayItemControlsSchema: FormSchema;
 export declare const rowLayoutSchema: FormSchema;
 export declare const rowLayoutWithCustomComponentSchema: FormSchema;
 export declare const nestedArrayObjectSchema: FormSchema;
+export declare const arrayItemWithEmptyListSchema: FormSchema;
 export declare const topLevelStringCustomComponentSchema: FormSchema;
 export declare const stringWithDefaultCustomComponentSchema: FormSchema;
 export declare const arrayItemWithDependenciesSchema: FormSchema;
@@ -48,5 +53,7 @@ export declare const requiredCheckboxSchema: FormSchema;
 export declare const nestedTitlesSchema: FormSchema;
 export declare const titledRowLayoutSchema: FormSchema;
 export declare const untitledRootSchema: FormSchema;
+export declare const nestedCollapsibleSchema: FormSchema;
+export declare const untitledCollapsibleSchema: FormSchema;
 export declare const untitledRowSchema: FormSchema;
 //# sourceMappingURL=form.test-schemas.d.ts.map

package/dist/types/components/form/form.types.d.ts

@@ -72,12 +72,6 @@ export type ValidationError = {
      */
     [key: string]: string[] | ValidationError;
 };
-/**
- * The level of a heading, from `1` for an `h1` to `6` for an `h6`.
- *
- * @public
- */
-export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 /**
  * @public
  */
@@ -110,7 +104,8 @@ export interface FormComponent<T = any> {
      */
     label?: string;
     /**
-     * The helper text for the current property
+     * The helper text for the current property. While the property has a
+     * validation error to show, this is the error.
      */
     helperText?: string;
     /**
@@ -230,6 +225,21 @@ export interface FormComponentOptions {
      * specified on the `FormComponent` interface
      */
     props?: Record<string, any>;
+    /**
+     * Let the form draw the title, the description and the help of the field
+     * above the component, as a heading that fits how deep the field is.
+     *
+     * The component still gets `label` and `helperText`, so a component that
+     * draws its own title or description should read this option in
+     * `formInfo.schema` and leave them out. It should still show `helperText`
+     * while `invalid` is `true`, because that is where the form puts a
+     * validation error.
+     *
+     * A row layout draws its own header, so the option has no effect there.
+     *
+     * Defaults to `false`.
+     */
+    showHeader?: boolean;
 }
 /**
  * @public

package/dist/types/components/form/row/row.d.ts

@@ -3,7 +3,7 @@ import { RowProps } from '../templates/types';
 import { HeadingLevelContext } from '../templates/heading-level';
 export declare class Row extends React.Component<RowProps> {
     props: RowProps;
-    static readonly contextType: React.Context<import("../form.types").HeadingLevel>;
+    static readonly contextType: React.Context<import("../../..").HeadingLevel>;
     context: React.ContextType<typeof HeadingLevelContext>;
     constructor(props: RowProps);
     render(): React.DetailedReactHTMLElement<{

package/dist/types/components/form/templates/array-field-collapsible-item.d.ts

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { ArrayFieldItemButtonsTemplateProps, ErrorSchema } from '@rjsf/utils';
 import { JSONSchema7 } from 'json-schema';
+import { HeadingLevelContext } from './heading-level';
 export interface CollapsibleItemProps {
     buttonsProps: ArrayFieldItemButtonsTemplateProps;
     /**
@@ -46,6 +47,8 @@ export interface CollapsibleItemProps {
 }
 export declare class CollapsibleItemTemplate extends React.Component<PropsWithChildren<CollapsibleItemProps>> {
     props: PropsWithChildren<CollapsibleItemProps>;
+    static readonly contextType: React.Context<import("../../..").HeadingLevel>;
+    context: React.ContextType<typeof HeadingLevelContext>;
     state: {
         isOpen: boolean;
     };
@@ -55,7 +58,8 @@ export declare class CollapsibleItemTemplate extends React.Component<PropsWithCh
     componentDidUpdate(): void;
     componentWillUnmount(): void;
     render(): React.ReactElement<{
-        header: any;
+        header: string;
+        headingLevel: import("../../..").HeadingLevel;
         class: string;
         ref: (section: HTMLLimelCollapsibleSectionElement) => void;
         'is-open': boolean;

package/dist/types/components/form/templates/heading-level.d.ts

@@ -1,11 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { Help } from '../../help/help.types';
-import { HeadingLevel } from '../form.types';
-/**
- * @param level - any value
- * @returns whether the value is a heading level, from `1` to `6`
- */
-export declare function isHeadingLevel(level: unknown): level is HeadingLevel;
+import { HeadingLevel } from '../../../global/shared-types/heading-level.types';
 /**
  * The heading level that a title at the current depth in the form gets.
  */

package/dist/types/components/form/templates/object-field.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { LimeObjectFieldTemplateProps } from './types';
+import { HeadingLevel } from '../../../global/shared-types/heading-level.types';
 export declare const ObjectFieldTemplate: (props: LimeObjectFieldTemplateProps) => React.FunctionComponentElement<React.FragmentProps> | React.ReactElement<{
     header: string;
+    headingLevel: HeadingLevel;
     id: string;
     'is-open': boolean;
     invalid: boolean;

package/dist/types/components/form-header/form-header.d.ts

@@ -1,5 +1,5 @@
 import { Help } from '../help/help.types';
-import { HeadingLevel } from '../form/form.types';
+import { HeadingLevel } from '../../global/shared-types/heading-level.types';
 /**
  * This is an internal and private component that `limel-form` uses to
  * draw the heading of a section, a list or a custom component, together

package/dist/types/components.d.ts

@@ -24,6 +24,7 @@ import { MenuItem as MenuItem1 } from "./components";
 import { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 import { CodeDiffLayout } from "./components/code-diff/code-diff.types";
 import { ColorScheme, Language } from "./components/code-editor/code-editor.types";
+import { HeadingLevel } from "./global/shared-types/heading-level.types";
 import { Action } from "./components/collapsible-section/action";
 import { CustomColorSwatch, CustomPalette } from "./components/color-picker/color-picker.types";
 import { Config } from "./global/config";
@@ -34,7 +35,7 @@ import { FileInfo } from "./global/shared-types/file.types";
 import { ResizeOptions } from "./util/image-resize";
 import { OfficeViewer } from "./components/file-viewer/file-viewer.types";
 import { FlexContainerAlign, FlexContainerDirection, FlexContainerJustify } from "./components/flex-container/flex-container.types";
-import { FormError, FormSchema, HeadingLevel, ValidationError, ValidationStatus } from "./components/form/form.types";
+import { FormError, FormSchema, ValidationError, ValidationStatus } from "./components/form/form.types";
 import { Help } from "./components/help/help.types";
 import { IconSize } from "./components/icon/icon.types";
 import { InfoTileProgress } from "./components/info-tile/info-tile.types";
@@ -75,6 +76,7 @@ export { MenuItem as MenuItem1 } from "./components";
 export { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 export { CodeDiffLayout } from "./components/code-diff/code-diff.types";
 export { ColorScheme, Language } from "./components/code-editor/code-editor.types";
+export { HeadingLevel } from "./global/shared-types/heading-level.types";
 export { Action } from "./components/collapsible-section/action";
 export { CustomColorSwatch, CustomPalette } from "./components/color-picker/color-picker.types";
 export { Config } from "./global/config";
@@ -85,7 +87,7 @@ export { FileInfo } from "./global/shared-types/file.types";
 export { ResizeOptions } from "./util/image-resize";
 export { OfficeViewer } from "./components/file-viewer/file-viewer.types";
 export { FlexContainerAlign, FlexContainerDirection, FlexContainerJustify } from "./components/flex-container/flex-container.types";
-export { FormError, FormSchema, HeadingLevel, ValidationError, ValidationStatus } from "./components/form/form.types";
+export { FormError, FormSchema, ValidationError, ValidationStatus } from "./components/form/form.types";
 export { Help } from "./components/help/help.types";
 export { IconSize } from "./components/icon/icon.types";
 export { InfoTileProgress } from "./components/info-tile/info-tile.types";
@@ -1180,7 +1182,7 @@ export namespace Components {
           * The level of the heading that the `header` is drawn with, from `1` for an `h1` to `6` for an `h6`.  Set it so that the heading fits below the headings around the section. For example, when the section is below an `h2`, set it to `3`. It does not change how the heading looks.
           * @default 2
          */
-        "headingLevel": 1 | 2 | 3 | 4 | 5 | 6;
+        "headingLevel": HeadingLevel;
         /**
           * Icon to display in the header of the section
          */
@@ -1897,6 +1899,7 @@ export namespace Components {
      * @exampleComponent limel-example-list-form
      * @exampleComponent limel-example-dynamic-form
      * @exampleComponent limel-example-custom-component-form
+     * @exampleComponent limel-example-custom-component-header-form
      * @exampleComponent limel-example-props-factory-form
      * @exampleComponent limel-example-form-layout
      * @exampleComponent limel-example-form-span-fields
@@ -1922,7 +1925,7 @@ export namespace Components {
          */
         "errors": ValidationError;
         /**
-          * 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`.
+          * 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`. 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 an `h2` heading, set it to `3`.
           * @default 1
          */
         "headingLevel": HeadingLevel;
@@ -5745,6 +5748,7 @@ declare global {
      * @exampleComponent limel-example-list-form
      * @exampleComponent limel-example-dynamic-form
      * @exampleComponent limel-example-custom-component-form
+     * @exampleComponent limel-example-custom-component-header-form
      * @exampleComponent limel-example-props-factory-form
      * @exampleComponent limel-example-form-layout
      * @exampleComponent limel-example-form-span-fields
@@ -8426,7 +8430,7 @@ declare namespace LocalJSX {
           * The level of the heading that the `header` is drawn with, from `1` for an `h1` to `6` for an `h6`.  Set it so that the heading fits below the headings around the section. For example, when the section is below an `h2`, set it to `3`. It does not change how the heading looks.
           * @default 2
          */
-        "headingLevel"?: 1 | 2 | 3 | 4 | 5 | 6;
+        "headingLevel"?: HeadingLevel;
         /**
           * Icon to display in the header of the section
          */
@@ -9232,6 +9236,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-list-form
      * @exampleComponent limel-example-dynamic-form
      * @exampleComponent limel-example-custom-component-form
+     * @exampleComponent limel-example-custom-component-header-form
      * @exampleComponent limel-example-props-factory-form
      * @exampleComponent limel-example-form-layout
      * @exampleComponent limel-example-form-span-fields
@@ -9257,7 +9262,7 @@ declare namespace LocalJSX {
          */
         "errors"?: ValidationError;
         /**
-          * 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`.
+          * 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`. 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 an `h2` heading, set it to `3`.
           * @default 1
          */
         "headingLevel"?: HeadingLevel;
@@ -12158,7 +12163,7 @@ declare namespace LocalJSX {
     interface LimelCollapsibleSectionAttributes {
         "isOpen": boolean;
         "header": string;
-        "headingLevel": 1 | 2 | 3 | 4 | 5 | 6;
+        "headingLevel": HeadingLevel;
         "icon": IconName | Icon;
         "invalid": boolean;
         "language": Languages;
@@ -13384,6 +13389,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-list-form
              * @exampleComponent limel-example-dynamic-form
              * @exampleComponent limel-example-custom-component-form
+             * @exampleComponent limel-example-custom-component-header-form
              * @exampleComponent limel-example-props-factory-form
              * @exampleComponent limel-example-form-layout
              * @exampleComponent limel-example-form-span-fields

package/dist/types/global/shared-types/heading-level.types.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The level of a heading, from `1` for an `h1` to `6` for an `h6`.
+ *
+ * @public
+ */
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+//# sourceMappingURL=heading-level.types.d.ts.map

package/dist/types/interface.d.ts

@@ -19,7 +19,7 @@ export * from './components/flex-container/flex-container.types';
 export * from './global/shared-types/custom-element.types';
 export * from './global/config';
 export * from './global/shared-types/link.types';
-export { EventEmitter, ValidationStatus, FormError, ValidationError, FormComponent, FormInfo, FormSchema, HeadingLevel, LimeSchemaOptions, LimeLayoutOptions, FormComponentOptions, FormLayoutOptions, GridLayoutOptions, RowLayoutOptions, FormLayoutType, ReplaceObjectType, FormSchemaArrayItem, FormSubKeySchema, } from './components/form/form.types';
+export { EventEmitter, ValidationStatus, FormError, ValidationError, FormComponent, FormInfo, FormSchema, LimeSchemaOptions, LimeLayoutOptions, FormComponentOptions, FormLayoutOptions, GridLayoutOptions, RowLayoutOptions, FormLayoutType, ReplaceObjectType, FormSchemaArrayItem, FormSubKeySchema, } from './components/form/form.types';
 export * from './components/help/help.types';
 export * from './components/icon/icon.types';
 export * from './components/info-tile/info-tile.types';
@@ -45,6 +45,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/types/util/heading-level.d.ts

@@ -0,0 +1,7 @@
+import { HeadingLevel } from '../global/shared-types/heading-level.types';
+/**
+ * @param level - any value
+ * @returns whether the value is a heading level, from `1` to `6`
+ */
+export declare function isHeadingLevel(level: unknown): level is HeadingLevel;
+//# sourceMappingURL=heading-level.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "40.17.0",
+  "version": "40.18.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -93,7 +93,7 @@
     "morphdom": "^2.7.8",
     "number-abbreviate": "^2.0.0",
     "parse-css-color": "^0.2.1",
-    "postal-mime": "^4.0.11",
+    "postal-mime": "^4.1.4",
     "prettier": "^3.9.10",
     "prosemirror-example-setup": "^1.2.3",
     "prosemirror-markdown": "^1.13.9",

package/dist/lime-elements/p-1d13245d.entry.js

@@ -1 +0,0 @@
-import{r as e,c as o,h as t,a as i}from"./p-BU9IJqli.js";import{d as n}from"./p-z_E3sq3p.js";import{m as s,r}from"./p-CIf8aGSd.js";import{c as a}from"./p-BrjD-ITe.js";import{b as l,d as c,g as d}from"./p-CgNJbSP4.js";import{t as p}from"./p-B26k4gw8.js";import"./p-ChagAaNf.js";function h(e){return"number"==typeof e&&Number.isSafeInteger(e)&&e>=1&&e<=6}const g=class{constructor(i){e(this,i),this.open=o(this,"open",7),this.close=o(this,"close",7),this.action=o(this,"action",7),this.isOpen=!1,this.headingLevel=2,this.invalid=!1,this.language="en",this.bodyId=a(),this.headingId=a(),this.onClick=()=>{this.handleInteraction()},this.handleInteraction=()=>{this.isOpen=!this.isOpen,this.isOpen?(this.open.emit(),setTimeout(n,100)):this.close.emit()},this.renderExpandCollapseSign=()=>t("div",{class:"expand-icon",role:"presentation","aria-hidden":"true"},t("div",{class:"line"}),t("div",{class:"line"}),t("div",{class:"line"}),t("div",{class:"line"})),this.renderIcon=()=>{if(!this.icon)return;const e=d(this.icon),o=l(this.icon),i=c(this.icon);return t("limel-icon",{name:e,"aria-label":i,"aria-hidden":i?null:"true",style:{color:`${o}`}})},this.renderHeading=()=>{if(!this.header)return;const e=`h${this.getHeadingLevel()}`;return t(e,{class:"title mdc-typography mdc-typography--headline2",id:this.headingId},this.header)},this.renderActions=()=>{if(this.actions)return t("div",{class:"actions"},this.actions.map(this.renderActionButton))},this.renderActionButton=e=>t("limel-icon-button",{icon:e.icon,label:e.label,disabled:e.disabled,onClick:this.handleActionClick(e)}),this.handleActionClick=e=>o=>{o.stopPropagation(),this.action.emit(e)},this.getCollapsibleSectionAriaLabel=()=>p.get(this.isOpen?"collapsible-section.close":"collapsible-section.open",this.language,{header:this.header?`"${this.header}"`:" "})}componentWillLoad(){this.warnIfHeadingLevelIsInvalid()}handleHeadingLevelChange(){this.warnIfHeadingLevelIsInvalid()}componentDidRender(){const e=this.host.shadowRoot.querySelector(".open-close-toggle");s(e)}disconnectedCallback(){const e=this.host.shadowRoot.querySelector(".open-close-toggle");r(e)}render(){return t("section",{key:"1cb8db604bbbc8f8dbb7ca97895b3cfcf4dcd80b",class:this.isOpen?"open":"","aria-invalid":this.invalid,"aria-labelledby":this.header?this.headingId:null},t("header",{key:"4e55c5b636b1d049df4d77a77a35285648096ea0"},t("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(),t("div",{key:"16ec84abfe81a812c9d30188a714b58d363ca8a3",class:"divider-line",role:"presentation"}),this.renderHeaderSlot(),this.renderActions()),t("div",{key:"f28ff7d73f05dc1a6ca0dcd9948cb67107647598",class:"body",inert:!this.isOpen,"aria-hidden":String(!this.isOpen),id:this.bodyId,role:"region"},t("slot",{key:"33d0fda5501c178f92dff4a1b0361a43829fe095"})))}getHeadingLevel(){return h(this.headingLevel)?this.headingLevel:2}warnIfHeadingLevelIsInvalid(){h(this.headingLevel)||console.warn(`limel-collapsible-section: headingLevel must be a whole number from 1 to 6, but it is ${this.headingLevel}. The heading is drawn as an h2 instead.`)}renderHeaderSlot(){return t("slot",{name:"header"})}get host(){return i(this)}static get watchers(){return{headingLevel:[{handleHeadingLevelChange:0}]}}};g.style='@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}';export{g as limel_collapsible_section}