@limetech/lime-elements 40.14.5 → 40.16.0

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

@@ -10,6 +10,13 @@ require('./language-v-MMS6ym.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) {
         index.registerInstance(this, hostRef);
@@ -20,6 +27,15 @@ const CollapsibleSection = class {
          * `true` if the section is expanded, `false` if collapsed.
          */
         this.isOpen = false;
+        /**
+         * 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.
+         */
+        this.headingLevel = DEFAULT_HEADING_LEVEL;
         /**
          * `true` if the section is invalid, `false` if valid.
          * This can be used to indicate that the content inside the section is invalid.
@@ -64,7 +80,8 @@ const CollapsibleSection = class {
             if (!this.header) {
                 return;
             }
-            return (index.h("h2", { class: "title mdc-typography mdc-typography--headline2", id: this.headingId }, this.header));
+            const Heading = `h${this.getHeadingLevel()}`;
+            return (index.h(Heading, { class: "title mdc-typography mdc-typography--headline2", id: this.headingId }, this.header));
         };
         this.renderActions = () => {
             if (!this.actions) {
@@ -91,6 +108,12 @@ const CollapsibleSection = class {
             });
         };
     }
+    componentWillLoad() {
+        this.warnIfHeadingLevelIsInvalid();
+    }
+    handleHeadingLevelChange() {
+        this.warnIfHeadingLevelIsInvalid();
+    }
     componentDidRender() {
         const button = this.host.shadowRoot.querySelector('.open-close-toggle');
         makeEnterClickable.makeEnterClickable(button);
@@ -100,12 +123,27 @@ const CollapsibleSection = class {
         makeEnterClickable.removeEnterClickable(button);
     }
     render() {
-        return (index.h("section", { key: 'bf4e0e3b03e7391b7a279c61e3f3d42731beeec5', class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, index.h("header", { key: '1ad663c74d260d846e96f3facaf04471187f2f44' }, index.h("button", { key: 'c1ff272b07d8d8d349c2be793c4c891daa99f38e', 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(), index.h("div", { key: '6032f0aa48913f04b9e89897a06fd9b62dab6718', class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), index.h("div", { key: '369f0030229d4ec120f79f1333cca5d1dc3eb9df', class: "body", inert: !this.isOpen, "aria-hidden": String(!this.isOpen), id: this.bodyId, role: "region" }, index.h("slot", { key: '504317dafb38fe89e3cfa0df0e3e5fbab4ca4c7e' }))));
+        return (index.h("section", { key: '1cb8db604bbbc8f8dbb7ca97895b3cfcf4dcd80b', class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, index.h("header", { key: '4e55c5b636b1d049df4d77a77a35285648096ea0' }, index.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(), index.h("div", { key: '16ec84abfe81a812c9d30188a714b58d363ca8a3', class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), index.h("div", { key: 'f28ff7d73f05dc1a6ca0dcd9948cb67107647598', class: "body", inert: !this.isOpen, "aria-hidden": String(!this.isOpen), id: this.bodyId, role: "region" }, index.h("slot", { key: '33d0fda5501c178f92dff4a1b0361a43829fe095' }))));
+    }
+    getHeadingLevel() {
+        return isHeadingLevel(this.headingLevel)
+            ? this.headingLevel
+            : DEFAULT_HEADING_LEVEL;
+    }
+    warnIfHeadingLevelIsInvalid() {
+        if (!isHeadingLevel(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 h${DEFAULT_HEADING_LEVEL} instead.`);
+        }
     }
     renderHeaderSlot() {
         return index.h("slot", { name: "header" });
     }
     get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "headingLevel": [{
+                "handleHeadingLevelChange": 0
+            }]
+    }; }
 };
 CollapsibleSection.style = collapsibleSectionCss();
 

package/dist/cjs/limel-color-picker-palette.cjs.entry.js

@@ -103,10 +103,10 @@ const Palette = class {
     render() {
         const background = this.value ? { '--background': this.value } : {};
         return [
-            index.h("div", { key: 'f64284a7fa49f91e6e9a9d6482e612d19c965976', class: "color-picker-palette", style: {
+            index.h("div", { key: 'b2a7d3a6fdb975039b27fa6c1991e2b13dfdfb7c', class: "color-picker-palette", style: {
                     '--color-picker-column-count': `${this.getColumnCount()}`,
                 } }, this.renderSwatches()),
-            index.h("div", { key: '7b6b9c007133801e4266f454011c1f320b73b903', class: "chosen-color-name" }, index.h("limel-input-field", { key: 'f553fd5e39a163f40cf3c3d48f5deb0de2465577', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder, disabled: !this.manualInput }), index.h("div", { key: '5d37ef30b20acb6e2986ca79d2e24475db85fa50', class: "chosen-color-preview", style: background })),
+            index.h("div", { key: '8388ecf46579ee13770a599fb4d73c355e01462e', class: "chosen-color-name" }, index.h("limel-input-field", { key: 'f98cd03a9a5beb2897961a063a1d78ae0e5dd71e', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder, disabled: !this.manualInput }), index.h("div", { key: 'c9502329a95fdf25a7f787183f811679bde62882', class: "chosen-color-preview", style: background })),
         ];
     }
     getPalette() {

package/dist/cjs/limel-color-picker.cjs.entry.js

@@ -78,7 +78,7 @@ const ColorPicker = class {
         (_a = this.contentElement) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (index.h(index.Host, { key: '62a27a77858ae2cd66d473dd84e96d5187cf5e30' }, this.renderTooltip(), this.renderPickerPalette(), index.h("limel-input-field", { key: 'b061325ce2eadd8bedf2e133add138d698e194d1', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled || !this.manualInput, invalid: this.invalid, placeholder: this.placeholder })));
+        return (index.h(index.Host, { key: '04973de288b9d3f4773a03c351d37f288e9e07bf' }, this.renderTooltip(), this.renderPickerPalette(), index.h("limel-input-field", { key: '93c5ea34c6eef290b1b4cf744b911a4e5de80c1c', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled || !this.manualInput, invalid: this.invalid, placeholder: this.placeholder })));
     }
 };
 ColorPicker.style = colorPickerCss();

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

@@ -5,17 +5,20 @@ var dispatchResizeEvent = require('./dispatch-resize-event-DH5CaB3p.js');
 var randomString = require('./random-string-CFCtFh5l.js');
 var ponyfill = require('./ponyfill-CHp7Zocr.js');
 var component = require('./component-GW2n79GH.js');
-var isEqual = require('./isEqual-D3eFkhqd.js');
-require('./_baseIsEqual-zzV9DKMv.js');
-require('./eq-DFcUoVzv.js');
-require('./_getTag-BC28Za7d.js');
+var isEqual = require('./isEqual-QhCilNoo.js');
+require('./_baseIsEqual-DNSR68qD.js');
+require('./_arrayPush-0Rd-eNkQ.js');
+require('./_getNative-Cf52giNE.js');
+require('./isFunction-RSHwsz1x.js');
 require('./isObject-B6Osvvqp.js');
+require('./eq-DFcUoVzv.js');
+require('./_Map-BsuE0Kgq.js');
 require('./isObjectLike-Dlpn-j-1.js');
-require('./isArrayLike-C2RwZMG4.js');
-require('./isFunction-RSHwsz1x.js');
-require('./_getNative-Cf52giNE.js');
 require('./isArray-BuFVIU_i.js');
+require('./_getTag-CxGZ3DRt.js');
+require('./isLength-DvlFY_9S.js');
 require('./_isIndex-Bu45fvR7.js');
+require('./isArrayLike-0-cyPB5I.js');
 
 /**
  * @license
@@ -1017,10 +1020,10 @@ const Dialog = class {
         this.mdcDialog.destroy();
     }
     render() {
-        return (index.h("div", { key: '1b5ea40cec2ae67e3ffa902bd35bfaca444ae2bf', class: {
+        return (index.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 }, index.h("input", { key: 'bcf3bcb62754208c582672667a175e736b0744fa', hidden: true, id: "initialFocusEl" }), index.h("div", { key: '296832fed308a7708a41049efaaf98d45514d2d7', class: "mdc-dialog__container" }, index.h("div", { key: '35367530bccda9a88285f3129d00875dc77c0257', class: "mdc-dialog__surface" }, index.h("input", { key: '9e70d9bd7cdce0dfef28ffe12ec5c07ffc66e5e1', type: "button", id: "initialFocusElement" }), this.renderHeading(), index.h("div", { key: '323d15273582eac0803124b9699d44e2b9a079e2', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, index.h("slot", { key: '0905ccd516e77933531e600faba97e73b5317731' })), this.renderFooter())), index.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 }, index.h("input", { key: 'bee5a5e54bc971b2ebf33fbcd4d84feba6ca9353', hidden: true, id: "initialFocusEl" }), index.h("div", { key: '3e5beb7bb0d881de3449cfe26ba5776f3ece4c42', class: "mdc-dialog__container" }, index.h("div", { key: '928c11c5eca38e7e4065c55d8ec6872c6c0dbd71', class: "mdc-dialog__surface" }, index.h("input", { key: 'c81d5586e8bf3c3f57d7ea6b33585a5e16c016e3', type: "button", id: "initialFocusElement" }), this.renderHeading(), index.h("div", { key: 'd7f278245136ea690182f82ad717ff57e4e4855b', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, index.h("slot", { key: '40c910630b7df325a5e15829f96d6ce0f8e52ff0' })), this.renderFooter())), index.h("div", { key: '8aa1010d47e375d2ef607f87d4e724c674493cf9', class: "mdc-dialog__scrim" })));
     }
     watchHandler(newValue, oldValue) {
         if (oldValue === newValue || !this.mdcDialog) {

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

@@ -97,11 +97,11 @@ const Dock = class {
         this.resizeObserver.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: '59f51282a849383ecc23d3699ab20d9eadef800a', class: {
+        return (index.h(index.Host, { key: '89d1c5d33de71c5b78b572ec3f72b36424c5b12a', class: {
                 dock: true,
                 expanded: this.expanded,
                 'has-mobile-layout': this.useMobileLayout,
-            } }, index.h("nav", { key: 'c60abf3144c58aac33e321548b3167387f1bc2a9', "aria-label": this.accessibleLabel }, this.dockItems.map(this.renderDockItem), this.renderSeparator(), this.dockFooterItems.map(this.renderDockItem)), this.renderExpandShrinkToggle()));
+            } }, index.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/cjs/limel-drag-handle_2.cjs.entry.js

@@ -34,7 +34,7 @@ const DragHandleComponent = class {
     render() {
         const tooltipLabel = translations.translations.get('drag-handle.drag-to-reorder', this.language);
         const ariaLabel = translations.translations.get('drag-handle.drag-handle', this.language);
-        return (index.h(index.Host, { key: 'c88e3c81d5c24052b01bb44a6dd6d1abdddc75cb' }, index.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 }, index.h("div", { key: '8a91aa1f70775148fb4262a9ef51129cfd89cf07', class: "drag-icon", role: "presentation", "aria-hidden": "true" }, index.h("div", { key: "1" }), index.h("div", { key: "2" }), index.h("div", { key: "3" }), index.h("div", { key: "4" }), index.h("div", { key: "5" }), index.h("div", { key: "6" })), index.h("limel-tooltip", { key: '645f814490598b794def31fde73de3bf61041904', openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
+        return (index.h(index.Host, { key: '49a2335a2c2603c7fcdd3c329f71a27f52024f96' }, index.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 }, index.h("div", { key: '841ce098bb464c79773cdac0ea40e89a941d439f', class: "drag-icon", role: "presentation", "aria-hidden": "true" }, index.h("div", { key: "1" }), index.h("div", { key: "2" }), index.h("div", { key: "3" }), index.h("div", { key: "4" }), index.h("div", { key: "5" }), index.h("div", { key: "6" })), index.h("limel-tooltip", { key: '650342114d7c64c5e621e1b65751b242c0a7c5a7', openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
     }
 };
 DragHandleComponent.style = dragHandleCss();
@@ -102,12 +102,12 @@ const Scroller = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: '6e546a2b31136af45497d3de8369754b33992da9' }, index.h("div", { key: '22fbd0723a170201a422d073f41ce8e2a0d726d3', class: {
+        return (index.h(index.Host, { key: '03b2274dac7e30f6e42e2bb5de9d0b7287beaa19' }, index.h("div", { key: 'ddaee4dc60ceea7abce4bee9f6ee521e00c66f55', class: {
                 scroller: true,
                 [this.orientation]: true,
                 'can-scroll-to-start': this.canScrollToStart,
                 'can-scroll-to-end': this.canScrollToEnd,
-            } }, index.h("div", { key: '379da89bc7f3b7b2a4700d1740df7c63906e065f', class: "scroll-area", ref: (element) => (this.scrollArea = element), onScroll: this.updateScrollability, onFocusin: this.revealFocusedItem }, index.h("div", { key: '448ee73f8e9c68db5cadbd0910c9d1135d8d40ee', class: "scroll-content", ref: (element) => (this.scrollContent = element) }, index.h("slot", { key: 'fc12618e40799918647a37be83fe8d8d5f7b8077', ref: (element) => (this.slotElement = element) }))), this.renderEdge('start'), this.renderEdge('end'))));
+            } }, index.h("div", { key: 'ac801f373a0de014b2e367da0c6c137bdbb61017', class: "scroll-area", ref: (element) => (this.scrollArea = element), onScroll: this.updateScrollability, onFocusin: this.revealFocusedItem }, index.h("div", { key: '6cc87291eb0906d2e0121621108c295c4552c29a', class: "scroll-content", ref: (element) => (this.scrollContent = element) }, index.h("slot", { key: 'da169161e52ca970134b95b09fbc643321c5944f', ref: (element) => (this.slotElement = element) }))), this.renderEdge('start'), this.renderEdge('end'))));
     }
     renderEdge(edge) {
         return [

package/dist/cjs/limel-email-viewer.cjs.entry.js

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

package/dist/cjs/limel-file-dropzone_2.cjs.entry.js

@@ -2,22 +2,26 @@
 
 var index = require('./index-BlsqxTB1.js');
 var files = require('./files-DpGigQ8k.js');
-var _baseForOwn = require('./_baseForOwn-8jMPwf3X.js');
-var isArrayLike = require('./isArrayLike-C2RwZMG4.js');
-var _baseIteratee = require('./_baseIteratee-BIMRm4nq.js');
+var _baseForOwn = require('./_baseForOwn-Bflq946d.js');
+var isArrayLike = require('./isArrayLike-0-cyPB5I.js');
+var _baseIteratee = require('./_baseIteratee-Cistiy8H.js');
 var isArray = require('./isArray-BuFVIU_i.js');
 var randomString = require('./random-string-CFCtFh5l.js');
 require('./file-metadata-BrhOssGG.js');
 require('./icons-isR5V1X0.js');
 require('./get-icon-props-CwpDdQDI.js');
-require('./_baseIsEqual-zzV9DKMv.js');
-require('./eq-DFcUoVzv.js');
-require('./_getTag-BC28Za7d.js');
-require('./isObject-B6Osvvqp.js');
-require('./isObjectLike-Dlpn-j-1.js');
+require('./_baseIsEqual-DNSR68qD.js');
+require('./_arrayPush-0Rd-eNkQ.js');
 require('./_getNative-Cf52giNE.js');
 require('./isFunction-RSHwsz1x.js');
+require('./isObject-B6Osvvqp.js');
+require('./eq-DFcUoVzv.js');
+require('./_Map-BsuE0Kgq.js');
+require('./isObjectLike-Dlpn-j-1.js');
+require('./_getTag-CxGZ3DRt.js');
+require('./isLength-DvlFY_9S.js');
 require('./_isIndex-Bu45fvR7.js');
+require('./hasIn-BQ92Jk0F.js');
 require('./isSymbol-DxAVNJfH.js');
 require('./identity-Dz5mxHaJ.js');
 
@@ -233,7 +237,7 @@ const FileDropzone = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '0209f44f7cfe46ccb98b3e15d597555ac57c0dce', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, index.h("slot", { key: '1198fc4141e15527cd7575f5dd88b06b1a9d61c1' }), this.renderOnDragLayout()));
+        return (index.h(index.Host, { key: 'd04afa2b6b4b0cb45ac908891f8b0b5da8d9867b', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, index.h("slot", { key: '1b125711e06ccd2357375127b6cf2dd12779e584' }), this.renderOnDragLayout()));
     }
 };
 FileDropzone.style = fileDropzoneCss();
@@ -294,7 +298,7 @@ const FileInput = class {
         this.fileInput = this.element.shadowRoot.getElementById(this.fileInputId);
     }
     render() {
-        return (index.h(index.Host, { key: 'e499bde6727abc2123d0aa70d446860de930a838', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, index.h("input", { key: '9e3ba97f8f43b90d6d63e348acda5fa2a3976432', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), index.h("slot", { key: 'c29534ed1ee305ba85afd02c4b66e61eae817a5e' })));
+        return (index.h(index.Host, { key: '2ec5c6a56f846b4c606633fd418c4867f50f470d', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, index.h("input", { key: 'c6a782ec3d71be85ca6e4fe13f5616b7c3809989', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), index.h("slot", { key: '86efec1ed582204301530ecd549367be1c952b1d' })));
     }
     handleKeyDown(event) {
         if (['Tab', 'Backspace', 'Enter'].includes(event.code)) {

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

@@ -122,7 +122,7 @@ const File = class {
         this.resizingFile = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'f18050fc95a60bb3c7223ae12107d49e147def67', "aria-busy": this.isBusy ? 'true' : 'false' }, index.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 (index.h(index.Host, { key: '31fa16f6246cd4a6e7a7ce9ec6d32aadf245d84f', "aria-busy": this.isBusy ? 'true' : 'false' }, index.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/cjs/limel-flatpickr-adapter.cjs.entry.js

@@ -8,11 +8,12 @@ var moment = require('./moment-Cfsz2WF1.js');
 var device = require('./device-C9O7lYI9.js');
 var language = require('./language-v-MMS6ym.js');
 var eq = require('./eq-DFcUoVzv.js');
-var isArrayLike$1 = require('./isArrayLike-C2RwZMG4.js');
+var isArrayLike$1 = require('./isArrayLike-0-cyPB5I.js');
 var _isIndex = require('./_isIndex-Bu45fvR7.js');
 var isObject$1 = require('./isObject-B6Osvvqp.js');
 var toNumber = require('./toNumber-v-1DEwWD.js');
 require('./isFunction-RSHwsz1x.js');
+require('./isLength-DvlFY_9S.js');
 require('./isSymbol-DxAVNJfH.js');
 require('./isObjectLike-Dlpn-j-1.js');
 
@@ -7724,7 +7725,7 @@ const DatePickerCalendar = class {
         });
     }
     render() {
-        return (index.h("div", { key: 'aad98186a855e3c4e30dbc597cfad23b9a4cbcbe', class: "container", ref: (el) => (this.container = el), style: {
+        return (index.h("div", { key: 'c9e65b096f57f96afaffcdca7889cf3addb3227f', class: "container", ref: (el) => (this.container = el), style: {
                 '--today-label': `"${translations.translations.get('date-picker.today', this.language)}"`,
             } }));
     }

package/dist/cjs/limel-flex-container.cjs.entry.js

@@ -28,7 +28,7 @@ const FlexContainer = class {
         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 index.h("slot", { key: '2049c195a3ded73e31597b1e51f3d4af9b7316ed' });
+        return index.h("slot", { key: '15e4e05dceb2966750d9fce29f401585c1e7332d' });
     }
 };
 FlexContainer.style = flexContainerCss();

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

@@ -0,0 +1,59 @@
+'use strict';
+
+var index = require('./index-BlsqxTB1.js');
+var helpProps = require('./help-props-Ds30nnt1.js');
+require('./_basePickBy-DeOMws-h.js');
+require('./hasIn-BQ92Jk0F.js');
+require('./isArray-BuFVIU_i.js');
+require('./isSymbol-DxAVNJfH.js');
+require('./isObject-B6Osvvqp.js');
+require('./isObjectLike-Dlpn-j-1.js');
+require('./_arrayPush-0Rd-eNkQ.js');
+require('./_getNative-Cf52giNE.js');
+require('./isFunction-RSHwsz1x.js');
+require('./eq-DFcUoVzv.js');
+require('./_Map-BsuE0Kgq.js');
+require('./_isIndex-Bu45fvR7.js');
+require('./isLength-DvlFY_9S.js');
+require('./_assignValue-DQh76m39.js');
+require('./_defineProperty-Csu6P9HT.js');
+require('./_baseFlatten-BonTAUIo.js');
+require('./identity-Dz5mxHaJ.js');
+
+const formHeaderCss = () => `limel-form-header{display:block}`;
+
+const FormHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Which of the heading elements, from `h1` to `h6`, to draw
+         * the `heading` with.
+         */
+        this.headingLevel = 1;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'bfb0a90340ac54c7f083df2989fd8c2acb97308f' }, this.renderHeading(), this.renderHelp(), this.renderDescription()));
+    }
+    renderHeading() {
+        if (!this.heading) {
+            return;
+        }
+        const Heading = `h${this.headingLevel}`;
+        return index.h(Heading, null, this.heading);
+    }
+    renderHelp() {
+        if (!this.help) {
+            return;
+        }
+        return index.h("limel-help", Object.assign({}, helpProps.getHelpProps(this.help)));
+    }
+    renderDescription() {
+        if (!this.description) {
+            return;
+        }
+        return index.h("limel-markdown", { value: this.description });
+    }
+};
+FormHeader.style = formHeaderCss();
+
+exports.limel_form_header = FormHeader;