@limetech/lime-elements 40.15.0 → 40.16.0

package/dist/lime-elements/{p-64540beb.entry.js → p-fad7a3fa.entry.js}

@@ -1 +1 @@
-import{r as e,c as o,h as t,H as r,a as i}from"./p-BU9IJqli.js";import{t as a}from"./p-B26k4gw8.js";import{A as s,b as n,c as l,d as c}from"./p-Bu6-QXrA.js";import"./p-ChagAaNf.js";const h={left:{axis:"x",cursor:"col-resize",direction:-1,growKey:l,shrinkKey:c},right:{axis:"x",cursor:"col-resize",direction:1,growKey:c,shrinkKey:l},top:{axis:"y",cursor:"row-resize",direction:-1,growKey:s,shrinkKey:n},bottom:{axis:"y",cursor:"row-resize",direction:1,growKey:n,shrinkKey:s}};function d(e){return"x"===h[e].axis?"vertical":"horizontal"}const p={activeDrags:0};function b(e){document.body.style.cursor=e.cursor,document.body.style.userSelect=e.userSelect}function m(e,o){let t,r,i,a=h.left,s=!1;const n=e=>"x"===a.axis?e.clientX:e.clientY,l=l=>{var c;void 0===t&&(l.preventDefault(),t=l.pointerId,s=!1,a=h[o.getLocation()],r=n(l),i=o.getSize(),e.setPointerCapture(l.pointerId),c=a.cursor,0===p.activeDrags&&(p.before={cursor:document.body.style.cursor,userSelect:document.body.style.userSelect}),p.activeDrags+=1,b({cursor:c,userSelect:"none"}))},c=e=>{e.pointerId===t&&(s=!0,o.resize(i+a.direction*(n(e)-r)))},d=e=>{e.pointerId===t&&(m(),s&&o.end())},m=()=>{void 0!==t&&(t=void 0,p.activeDrags-=1,0===p.activeDrags&&b(p.before))};return e.addEventListener("pointerdown",l),e.addEventListener("pointermove",c),e.addEventListener("pointerup",d),e.addEventListener("pointercancel",d),e.addEventListener("lostpointercapture",d),()=>{m(),e.removeEventListener("pointerdown",l),e.removeEventListener("pointermove",c),e.removeEventListener("pointerup",d),e.removeEventListener("pointercancel",d),e.removeEventListener("lostpointercapture",d)}}const v="separator",u=class{constructor(t){e(this,t),this.changeSize=o(this,"changeSize",1),this.endResize=o(this,"endResize",1),this.location="left",this.language="en",this.isPointerOver=!1,this.hasKeyboardFocus=!1,this.handlePointerEnter=()=>{this.isPointerOver=!0},this.handlePointerLeave=()=>{this.isPointerOver=!1},this.handleFocus=e=>{this.hasKeyboardFocus=e.currentTarget.matches(":focus-visible")},this.handleBlur=()=>{this.hasKeyboardFocus=!1},this.handleKeyDown=e=>{const o=function(e,o){const{growKey:t,shrinkKey:r}=h[e];return o===t?8:o===r?-8:void 0}(this.location,e.key);void 0!==o&&(e.preventDefault(),this.hasKeyboardFocus=!0,this.changeSize.emit(this.elementSize()+o),this.endResize.emit())},this.elementSize=()=>{return e=this.resizableElement(),"x"===h[this.location].axis?e.offsetWidth:e.offsetHeight;var e}}connectedCallback(){this.stopResizing=m(this.host,{getLocation:()=>this.location,getSize:this.elementSize,resize:e=>this.changeSize.emit(e),end:()=>this.endResize.emit()})}disconnectedCallback(){var e;null===(e=this.stopResizing)||void 0===e||e.call(this),this.stopResizing=void 0}render(){const e=this.getName();return t(r,{key:"a764146953b0d52a3a3b81450e8e1e65c90c5210",onKeyDown:this.handleKeyDown,onPointerEnter:this.handlePointerEnter,onPointerLeave:this.handlePointerLeave},t("div",{key:"0d65a5646d9ede0f310045cb2858c554210c001a",role:"separator",id:v,tabindex:"0","aria-orientation":d(this.location),"aria-label":e,"aria-valuenow":this.value,"aria-valuemin":this.min,"aria-valuemax":this.max,onFocus:this.handleFocus,onBlur:this.handleBlur},t("div",{key:"6c5d001384b9b7289c7a40c641c858c7c72de3ca",role:"presentation"},t("span",{key:"c43208aff2850d3e3ce439774e069d3bba23bdec"}),t("span",{key:"f30a64d1bde31ba4a6578d2cdb71ad742bc55ae6"}),t("span",{key:"6d6bac3ba8a6ad7cbdebc730084eed8a8df2f9a2"}))),t("limel-tooltip",{key:"9e2c59edf8223ff52a634e227855ca8b1b4d7664",elementId:v,label:e,helperLabel:this.getHint(),openDirection:this.location}))}getName(){return this.resizableRegionLabel?a.get("resize-handle.resize",this.language,{region:this.resizableRegionLabel}):a.get("resize-handle.resize-this-region",this.language)}getHint(){if(this.isPointerOver&&!this.hasKeyboardFocus)return a.get("resize-handle.drag",this.language);const e="vertical"===d(this.location)?"resize-handle.keys-left-right":"resize-handle.keys-up-down";return a.get(e,this.language)}resizableElement(){return this.host.parentElement?this.host.parentElement:this.host.getRootNode().host}static get delegatesFocus(){return!0}get host(){return i(this)}};u.style='@charset "UTF-8";:host(limel-resize-handle){position:absolute;z-index:1;touch-action:none}div[role=separator]{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:100vh;outline:none}div[role=separator]::before,div[role=separator]::after{pointer-events:none;content:"";display:block;position:absolute;inset:0;border-radius:100vh;margin:auto}div[role=separator]::before{transition:scale 0.3s ease, opacity 0.3s ease;transition-delay:0.2s;opacity:0}div[role=separator]::after{transition:background-color 0.4s ease;transition-delay:0.2s;background-color:rgb(var(--contrast-600))}:host([location=top]),:host([location=bottom]){cursor:row-resize;height:var(--limel-resize-handle-thickness, 0.5rem) !important;right:0;left:0}:host([location=top]) div[role=separator]::before,:host([location=bottom]) div[role=separator]::before{scale:1 0.9;height:0.5rem;width:var(--limel-resize-handle-visual-length, auto)}:host([location=top]) div[role=separator]::after,:host([location=bottom]) div[role=separator]::after{height:0.125rem;width:var(--limel-resize-handle-visual-length, auto)}:host([location=top]){top:0}:host([location=top]) div[role=separator]::before{top:0;bottom:auto}:host([location=top]) div[role=separator]::after{top:calc((0.5rem - 0.125rem) / 2);bottom:auto}:host([location=bottom]){bottom:0}:host([location=bottom]) div[role=separator]::before{top:auto;bottom:0}:host([location=bottom]) div[role=separator]::after{top:auto;bottom:calc((0.5rem - 0.125rem) / 2)}:host([location=left]),:host([location=right]){cursor:col-resize;width:0.5rem;top:0;bottom:0}:host([location=left]) div[role=separator]::before,:host([location=right]) div[role=separator]::before{scale:0.9 1}:host([location=left]) div[role=separator]::after,:host([location=right]) div[role=separator]::after{width:0.125rem}:host([location=left]){left:0}:host([location=right]){right:0}:host(:hover) div[role=separator]::before,:host div[role=separator]:focus-visible::before{transition-duration:0.46s;transition-timing-function:ease-in;opacity:1;scale:1 1;background-color:rgb(var(--color-sky-light), 0.4)}:host(:hover) div[role=separator]::after,:host div[role=separator]:focus-visible::after{transition-duration:0.2s;transition-timing-function:ease-in;background-color:rgb(var(--color-sky-default))}div[role=presentation]{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);pointer-events:none;position:relative;z-index:1;display:flex;gap:0.25rem;align-items:center;justify-content:center;width:fit-content;padding:0.1875rem 0.25rem;border-radius:100vh;margin:auto;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-pressed)}div[role=presentation] span{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);border-radius:0.125rem;width:0.25rem;height:0.125rem;background-color:rgb(var(--contrast-700))}:host([location=top]) div[role=presentation]{margin-top:0;margin-bottom:auto}:host([location=bottom]) div[role=presentation]{margin-top:auto;margin-bottom:0}div[role=separator][aria-orientation=vertical]>div[role=presentation]{rotate:90deg}:host(:hover),:host div[role=separator]:focus-visible{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host(:hover) div[role=presentation],:host div[role=separator]:focus-visible div[role=presentation]{will-change:background-color, box-shadow, transform;transform:translate3d(0, -0.04rem, 0);box-shadow:var(--button-shadow-normal)}:host(:hover) span,:host div[role=separator]:focus-visible span{will-change:background-color;background-color:var(--mdc-theme-primary)}';export{u as limel_resize_handle}
+import{r as e,c as o,h as t,H as r,a as i}from"./p-BU9IJqli.js";import{t as a}from"./p-B26k4gw8.js";import{A as s,b as n,c as l,d as c}from"./p-Bu6-QXrA.js";import"./p-ChagAaNf.js";const h={left:{axis:"x",cursor:"col-resize",direction:-1,growKey:l,shrinkKey:c},right:{axis:"x",cursor:"col-resize",direction:1,growKey:c,shrinkKey:l},top:{axis:"y",cursor:"row-resize",direction:-1,growKey:s,shrinkKey:n},bottom:{axis:"y",cursor:"row-resize",direction:1,growKey:n,shrinkKey:s}};function d(e){return"x"===h[e].axis?"vertical":"horizontal"}const p={activeDrags:0};function b(e){document.body.style.cursor=e.cursor,document.body.style.userSelect=e.userSelect}function m(e,o){let t,r,i,a=h.left,s=!1;const n=e=>"x"===a.axis?e.clientX:e.clientY,l=l=>{var c;void 0===t&&(l.preventDefault(),t=l.pointerId,s=!1,a=h[o.getLocation()],r=n(l),i=o.getSize(),e.setPointerCapture(l.pointerId),c=a.cursor,0===p.activeDrags&&(p.before={cursor:document.body.style.cursor,userSelect:document.body.style.userSelect}),p.activeDrags+=1,b({cursor:c,userSelect:"none"}))},c=e=>{e.pointerId===t&&(s=!0,o.resize(i+a.direction*(n(e)-r)))},d=e=>{e.pointerId===t&&(m(),s&&o.end())},m=()=>{void 0!==t&&(t=void 0,p.activeDrags-=1,0===p.activeDrags&&b(p.before))};return e.addEventListener("pointerdown",l),e.addEventListener("pointermove",c),e.addEventListener("pointerup",d),e.addEventListener("pointercancel",d),e.addEventListener("lostpointercapture",d),()=>{m(),e.removeEventListener("pointerdown",l),e.removeEventListener("pointermove",c),e.removeEventListener("pointerup",d),e.removeEventListener("pointercancel",d),e.removeEventListener("lostpointercapture",d)}}const v="separator",u=class{constructor(t){e(this,t),this.changeSize=o(this,"changeSize",1),this.endResize=o(this,"endResize",1),this.location="left",this.language="en",this.isPointerOver=!1,this.hasKeyboardFocus=!1,this.handlePointerEnter=()=>{this.isPointerOver=!0},this.handlePointerLeave=()=>{this.isPointerOver=!1},this.handleFocus=e=>{this.hasKeyboardFocus=e.currentTarget.matches(":focus-visible")},this.handleBlur=()=>{this.hasKeyboardFocus=!1},this.handleKeyDown=e=>{const o=function(e,o){const{growKey:t,shrinkKey:r}=h[e];return o===t?8:o===r?-8:void 0}(this.location,e.key);void 0!==o&&(e.preventDefault(),this.hasKeyboardFocus=!0,this.changeSize.emit(this.elementSize()+o),this.endResize.emit())},this.elementSize=()=>{return e=this.resizableElement(),"x"===h[this.location].axis?e.offsetWidth:e.offsetHeight;var e}}connectedCallback(){this.stopResizing=m(this.host,{getLocation:()=>this.location,getSize:this.elementSize,resize:e=>this.changeSize.emit(e),end:()=>this.endResize.emit()})}disconnectedCallback(){var e;null===(e=this.stopResizing)||void 0===e||e.call(this),this.stopResizing=void 0}render(){const e=this.getName();return t(r,{key:"60afc9a25d46b0353ea82e5d952c4f16ea966af9",onKeyDown:this.handleKeyDown,onPointerEnter:this.handlePointerEnter,onPointerLeave:this.handlePointerLeave},t("div",{key:"cf668350fd88ceb546b2ba5d9f2e256fad850633",role:"separator",id:v,tabindex:"0","aria-orientation":d(this.location),"aria-label":e,"aria-valuenow":this.value,"aria-valuemin":this.min,"aria-valuemax":this.max,onFocus:this.handleFocus,onBlur:this.handleBlur},t("div",{key:"581a96a20905d70ed32f5a25b8db803ea4daee6a",role:"presentation"},t("span",{key:"a06b14126c53c2a28c32897cf27d95f2d86d6e71"}),t("span",{key:"b0b80786f6fa842b562c3e17c82f6d569f977d6f"}),t("span",{key:"f1604f9a3e96bf59558bba08a3c9388f97ecb17e"}))),t("limel-tooltip",{key:"43c3a9a2502f30e58067f1eb16e53129face2bf4",elementId:v,label:e,helperLabel:this.getHint(),openDirection:this.location}))}getName(){return this.resizableRegionLabel?a.get("resize-handle.resize",this.language,{region:this.resizableRegionLabel}):a.get("resize-handle.resize-this-region",this.language)}getHint(){if(this.isPointerOver&&!this.hasKeyboardFocus)return a.get("resize-handle.drag",this.language);const e="vertical"===d(this.location)?"resize-handle.keys-left-right":"resize-handle.keys-up-down";return a.get(e,this.language)}resizableElement(){return this.host.parentElement?this.host.parentElement:this.host.getRootNode().host}static get delegatesFocus(){return!0}get host(){return i(this)}};u.style='@charset "UTF-8";:host(limel-resize-handle){position:absolute;z-index:1;touch-action:none}div[role=separator]{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:100vh;outline:none}div[role=separator]::before,div[role=separator]::after{pointer-events:none;content:"";display:block;position:absolute;inset:0;border-radius:100vh;margin:auto}div[role=separator]::before{transition:scale 0.3s ease, opacity 0.3s ease;transition-delay:0.2s;opacity:0}div[role=separator]::after{transition:background-color 0.4s ease;transition-delay:0.2s;background-color:rgb(var(--contrast-600))}:host([location=top]),:host([location=bottom]){cursor:row-resize;height:var(--limel-resize-handle-thickness, 0.5rem) !important;right:0;left:0}:host([location=top]) div[role=separator]::before,:host([location=bottom]) div[role=separator]::before{scale:1 0.9;height:0.5rem;width:var(--limel-resize-handle-visual-length, auto)}:host([location=top]) div[role=separator]::after,:host([location=bottom]) div[role=separator]::after{height:0.125rem;width:var(--limel-resize-handle-visual-length, auto)}:host([location=top]){top:0}:host([location=top]) div[role=separator]::before{top:0;bottom:auto}:host([location=top]) div[role=separator]::after{top:calc((0.5rem - 0.125rem) / 2);bottom:auto}:host([location=bottom]){bottom:0}:host([location=bottom]) div[role=separator]::before{top:auto;bottom:0}:host([location=bottom]) div[role=separator]::after{top:auto;bottom:calc((0.5rem - 0.125rem) / 2)}:host([location=left]),:host([location=right]){cursor:col-resize;width:0.5rem;top:0;bottom:0}:host([location=left]) div[role=separator]::before,:host([location=right]) div[role=separator]::before{scale:0.9 1}:host([location=left]) div[role=separator]::after,:host([location=right]) div[role=separator]::after{width:0.125rem}:host([location=left]){left:0}:host([location=right]){right:0}:host(:hover) div[role=separator]::before,:host div[role=separator]:focus-visible::before{transition-duration:0.46s;transition-timing-function:ease-in;opacity:1;scale:1 1;background-color:rgb(var(--color-sky-light), 0.4)}:host(:hover) div[role=separator]::after,:host div[role=separator]:focus-visible::after{transition-duration:0.2s;transition-timing-function:ease-in;background-color:rgb(var(--color-sky-default))}div[role=presentation]{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);pointer-events:none;position:relative;z-index:1;display:flex;gap:0.25rem;align-items:center;justify-content:center;width:fit-content;padding:0.1875rem 0.25rem;border-radius:100vh;margin:auto;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-pressed)}div[role=presentation] span{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);border-radius:0.125rem;width:0.25rem;height:0.125rem;background-color:rgb(var(--contrast-700))}:host([location=top]) div[role=presentation]{margin-top:0;margin-bottom:auto}:host([location=bottom]) div[role=presentation]{margin-top:auto;margin-bottom:0}div[role=separator][aria-orientation=vertical]>div[role=presentation]{rotate:90deg}:host(:hover),:host div[role=separator]:focus-visible{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host(:hover) div[role=presentation],:host div[role=separator]:focus-visible div[role=presentation]{will-change:background-color, box-shadow, transform;transform:translate3d(0, -0.04rem, 0);box-shadow:var(--button-shadow-normal)}:host(:hover) span,:host div[role=separator]:focus-visible span{will-change:background-color;background-color:var(--mdc-theme-primary)}';export{u as limel_resize_handle}

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

@@ -0,0 +1 @@
+import{r as t,c as e,h as r,a as o}from"./p-BU9IJqli.js";import{i}from"./p-CnpoFRmN.js";import{g as a,b as l}from"./p-CgNJbSP4.js";import{A as n,b as s,H as c,e as b,c as d,d as h}from"./p-Bu6-QXrA.js";import{a as u,b as m,i as v,D as p}from"./p-DVx8ZwG_.js";import{S as g,c as f}from"./p-BqoaAMnl.js";import{b as w}from"./p-BuX-Eb_J.js";import"./p-CK4jS9_E.js";import"./p-xGeCwSnE.js";import"./p-BcJ-TDVt.js";import"./p-BJQylLSL.js";import"./p-BZrtP4vv.js";import"./p-oiMYqRQ0.js";import"./p-rJbGuVxd.js";import"./p-DbBZn7JO.js";import"./p-CZ30nDJE.js";import"./p-DpFfRQwV.js";import"./p-B8VKuhvH.js";import"./p-CzTSYn-I.js";import"./p-B--C3qwe.js";import"./p-9W8bTt2G.js";var x=m((function(t,e){return v(t)?function(t,e){var r=-1,o=u,i=!0,a=t.length,l=[],n=e.length;if(!a)return l;e.length>=200&&(o=f,i=!1,e=new g(e));t:for(;++r<a;){var s=t[r],c=s;if(s=0!==s?s:0,i&&c==c){for(var b=n;b--;)if(e[b]===c)continue t;l.push(s)}else o(e,c,undefined)||l.push(s)}return l}(t,w(e,1,v,!0)):[]}));const k={horizontal:new Map([[d,"previous"],[h,"next"],[c,"first"],[b,"last"]]),vertical:new Map([[n,"previous"],[s,"next"],[c,"first"],[b,"last"]])};function j(t,e){return t>=0&&t<e}function y(t,e){return r=>{var o;return!(null===(o=null==e?void 0:e.isDisabled)||void 0===o?void 0:o.call(e,t[r]))}}function C(t,e,r,o,i){for(let a=0;a<t;a+=1){const l=e+r*a;if(!o&&!j(l,t))break;const n=(l%t+t)%t;if(i(n))return n}return-1}const z=class{constructor(r){t(this,r),this.changeTab=e(this,"changeTab",7),this.reorderTab=e(this,"reorderTab",7),this.tabs=[],this.orientation="horizontal",this.allowTabReorder=!1,this.hasLoaded=!1,this.isLaidOutAgain=!1,this.renderedTabs=[],this.handleReorder=t=>{const e=function(t,e){const{order:r,fromIndex:o,toIndex:a}=e,l=e=>e>=0&&e<t.length;if(!l(o)||!l(a))return;const n=[...r];return n.splice(o,0,...n.splice(a,1)),i(n,t.map((({id:t})=>String(t))))?{tab:t[o],fromIndex:o,toIndex:a}:void 0}(this.tabs,t);if(!e)return;const r=this.tabs.map((({id:t})=>t));r.splice(e.toIndex,0,...r.splice(e.fromIndex,1)),this.tabIdsAfterReorder=r,this.reorderTab.emit(e)},this.handleKeyDown=this.handleKeyDown.bind(this)}async connectedCallback(){this.hasLoaded&&(this.revealedTabId=void 0,this.setUpReordering(),await this.revealActiveTab("auto"))}disconnectedCallback(){var t;null===(t=this.dragToReorder)||void 0===t||t.teardown()}componentDidLoad(){this.hasLoaded=!0,this.triggerIconColorWarning()}componentWillRender(){var t;const e=this.getTabElements().indexOf(this.host.shadowRoot.activeElement);this.tabWithFocus=-1===e?void 0:{id:null===(t=this.renderedTabs[e])||void 0===t?void 0:t.id,button:this.getTabElements()[e]}}async componentDidRender(){this.restoreFocus(),this.renderedTabs=this.tabs,this.setUpReordering();const t=this.isLaidOutAgain;this.isLaidOutAgain=!1,await this.revealActiveTab(!this.hasLoaded||t?"auto":void 0,t)}render(){const t=function(t,e,r){const o=t.length,i=y(t,r);return j(e,o)&&i(e)?e:C(o,0,1,!1,i)}(this.tabs,this.tabs.findIndex((t=>t.active)),this.getNavigationOptions());return r("div",{key:"d5f54de83640eb4898a58cd71696085e28f3701a",role:"tablist","aria-orientation":this.getOrientation(),onKeyDown:this.handleKeyDown},r("limel-scroller",{key:"565bbbcdf070a6b2521064a84347028baaae273e",orientation:this.getOrientation()},this.tabs.map(((e,r)=>this.renderTabOrMovableTab(e,r,r===t)))))}tabsChanged(t=[],e=[]){const r=t.map((t=>t.id)),o=e.map((t=>t.id));if(i(r,o))return;const a=this.tabIdsAfterReorder;this.tabIdsAfterReorder=void 0,i(r,a)||(this.revealedTabId=void 0)}orientationChanged(){this.revealedTabId=void 0,this.isLaidOutAgain=!0}getOrientation(){return"vertical"===this.orientation?"vertical":"horizontal"}getNavigationOptions(){return{orientation:this.getOrientation(),wrap:!0}}restoreFocus(){var t;const e=this.tabWithFocus;if(this.tabWithFocus=void 0,!e||e.button.isConnected)return;const r=this.tabs.findIndex((t=>t.id===e.id));null===(t=this.getTabElements()[r])||void 0===t||t.focus()}getTabElements(){return[...this.host.shadowRoot.querySelectorAll('button[role="tab"]')]}canReorderTabs(){return this.allowTabReorder&&this.tabs.length>1}setUpReordering(){var t,e;if(!this.canReorderTabs())return void(null===(t=this.dragToReorder)||void 0===t||t.teardown());const r=this.host.shadowRoot.querySelector("limel-scroller");r&&(null!==(e=this.dragToReorder)&&void 0!==e||(this.dragToReorder=new p({draggable:"[data-reorder-id]",revertDrop:!0,onReorder:this.handleReorder})),this.dragToReorder.setup(r,this.getOrientation()))}async revealActiveTab(t,e=!1){const r=this.tabs.findIndex((t=>t.active));if(-1===r)return void(this.revealedTabId=void 0);if(this.tabs[r].id===this.revealedTabId)return;this.revealedTabId=this.tabs[r].id;const o=this.getTabElements()[r],i=this.host.shadowRoot.querySelector("limel-scroller");o&&i&&(o.matches(":focus")&&!e||(await i.componentOnReady(),await i.reveal(o,t)))}handleKeyDown(t){const e=this.getNavigationOptions();if(!function(t,e){return!(t.altKey||t.ctrlKey||t.metaKey)&&k[e.orientation].has(t.key)}(t,e))return;const r=this.getTabElements().indexOf(t.target);-1!==r&&(t.preventDefault(),this.activateTab(function(t,e,r,o){const i=k[o.orientation].get(e),a=t.length,l=y(t,o),n=C(a,0,1,!1,l);if(!i||-1===n)return-1;if("first"===i)return n;const s=C(a,a-1,-1,!1,l);if("last"===i)return s;if(!j(r,a))return"next"===i?n:s;const c="next"===i?1:-1,b=C(a,r+c,c,Boolean(o.wrap),l);return-1===b?r:b}(this.tabs,t.key,r,e)))}activateTab(t){if(-1===t)return;if(this.getTabElements()[t].focus(),t===this.tabs.findIndex((t=>t.active)))return;const e=function(t,e){const r=t.findIndex((t=>!0===t.active)),o=[...t];return-1!==r&&(o[r]=Object.assign(Object.assign({},t[r]),{active:!1})),o[e]=Object.assign(Object.assign({},t[e]),{active:!0}),o}(this.tabs,t),r=x(e,this.tabs).sort(this.sortByInactive);for(const t of r)this.changeTab.emit(t);this.tabs=e}sortByInactive(t,e){return Number(t.active)-Number(e.active)}renderIcon(t){if(!t.icon)return;const e=a(t.icon),o=l(t.icon,t.iconColor),i={color:""};return o&&(i.color=o),r("limel-icon",{name:e,style:i,size:"small","aria-hidden":"true"})}renderTabOrMovableTab(t,e,o){return this.canReorderTabs()?r("div",{key:t.id,role:"presentation","data-reorder-id":t.id},this.renderTab(t,e,o),r("limel-drag-handle",{"aria-hidden":"true",dragDirection:this.getOrientation(),tooltipOpenDirection:"vertical"===this.getOrientation()?"right":"bottom"})):this.renderTab(t,e,o)}renderTab(t,e,o){return r("button",{key:t.id,role:"tab","aria-selected":t.active?"true":"false",tabindex:o?0:-1,onClick:()=>this.activateTab(e)},r("span",{class:"content"},this.renderIcon(t),r("span",{class:"text"},t.text),t.badge?r("limel-badge",{label:t.badge}):""))}triggerIconColorWarning(){this.tabs.some((t=>t.iconColor))&&console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}get host(){return o(this)}static get watchers(){return{tabs:[{tabsChanged:0}],orientation:[{orientationChanged:0}]}}};z.style="@charset \"UTF-8\";:host(limel-tab-bar){--limel-tab-background-color:var(--contrast-300);--limel-tab-border-radius:0.625rem;--limel-tab-content-inset:0.25rem;--limel-active-tab-background-color:var(       --tab-panel-background-color,       rgb(var(--contrast-100))   );--limel-active-tab-color:var(       --lime-primary-color,       var(--limel-theme-primary-color)   );--limel-tab-active-outer-edge-curve-size:0.75rem;--limel-tab-separator-width:0.125rem;--limel-tab-separator-background-color:rgb(var(--contrast-600));isolation:isolate;display:block;position:relative}limel-scroller{--limel-scroller-fade-color:var(--limel-tab-background-color);--limel-scroller-content-padding:0.25rem       var(--limel-tab-active-outer-edge-curve-size) 0;background-color:rgb(var(--limel-tab-background-color))}:host(.has-tabs-with-equal-width:not([orientation=vertical])) button[role=tab],:host(.has-tabs-with-equal-width:not([orientation=vertical])) limel-scroller>div{flex:1 0 auto;max-width:var(--tab-bar-horizontal-tab-max-width, none)}limel-scroller>div:has(limel-drag-handle:hover),limel-scroller>div:has(limel-drag-handle:focus-within),limel-scroller>div.is-elevated,limel-scroller>div.sortable-chosen{will-change:transform, box-shadow, border-radius, background-color}limel-scroller>div.sortable-ghost{border-radius:0.5rem;box-shadow:var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3)}limel-scroller>div.sortable-chosen{border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color)}limel-scroller>div.is-elevated[draggable=false]{animation:sit-here 0.8s forwards}@keyframes sit-here{0%{border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3)}100%{box-shadow:none}}limel-scroller>div{position:relative;display:flex;flex:0 0 auto}limel-scroller>div button[role=tab]{flex:1 1 auto;min-width:0}limel-scroller>div span.content{padding-right:2rem}limel-scroller>div limel-drag-handle{position:absolute;z-index:3;top:0;bottom:0;right:0.25rem}button[role=tab]{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;position:relative;display:flex;box-sizing:border-box;border-radius:0;padding:var(--limel-tab-content-inset);min-width:2.5rem;background-color:transparent;flex:0 0 auto;height:2.5rem;outline:none;cursor:pointer;white-space:nowrap;font-size:var(--limel-theme-default-font-size)}button[role=tab] limel-icon{transition:color 0.2s ease;color:rgb(var(--contrast-800));margin-left:-0.25rem;flex-shrink:0}button[role=tab] span.text{transition:color 0.2s ease;line-height:1.25;overflow:hidden;text-overflow:ellipsis;color:var(--limel-theme-on-surface-color)}button[role=tab]:hover span.text{color:var(--limel-theme-text-primary-on-background-color)}button[role=tab] limel-badge{margin-right:-0.25rem;box-shadow:0 0 0 1px rgb(var(--contrast-600));pointer-events:none;flex-shrink:0}button[role=tab][aria-selected=true]{background-color:var(--limel-active-tab-background-color);z-index:2}button[role=tab][aria-selected=true]:before,button[role=tab][aria-selected=true]:after{content:\"\";display:block;width:var(--limel-tab-active-outer-edge-curve-size);height:var(--limel-tab-active-outer-edge-curve-size);position:absolute;background-color:var(--limel-active-tab-background-color);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E\")}button[role=tab][aria-selected=true] limel-icon{color:var(--limel-active-tab-color)}button[role=tab][aria-selected=true] span.text{color:var(--limel-active-tab-color)}span.content{transition:box-shadow 0.2s ease;display:flex;flex-grow:1;min-width:0;align-items:center;justify-content:center;gap:0.375rem;padding:0 0.75rem;border-radius:calc(var(--limel-tab-border-radius) - var(--limel-tab-content-inset))}button[role=tab]:focus-visible span.content{transition-duration:0.3s;box-shadow:var(--shadow-depth-8-focused)}:host(limel-tab-bar:not([orientation=vertical])) button[role=tab]{max-width:var(--tab-bar-horizontal-tab-max-width, 16rem)}:host(limel-tab-bar:not([orientation=vertical])) button[role=tab]:not([aria-selected=true]):after{content:\"\";display:block;background-color:var(--limel-tab-separator-background-color);width:var(--limel-tab-separator-width);height:1rem;margin:auto;position:absolute;top:0;bottom:0;border-radius:1rem;right:calc(-1 * var(--limel-tab-separator-width))}:host(limel-tab-bar:not([orientation=vertical])) limel-scroller>:last-child:not([aria-selected=true]):after,:host(limel-tab-bar:not([orientation=vertical])) limel-scroller>:last-child>button[role=tab]:not([aria-selected=true]):after{display:none}:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]{border-radius:var(--limel-tab-border-radius) var(--limel-tab-border-radius) 0 0}:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:before,:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:after{bottom:0}:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:before{left:calc(-1 * var(--limel-tab-active-outer-edge-curve-size));transform:rotateY(180deg)}:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:after{right:calc(-1 * var(--limel-tab-active-outer-edge-curve-size))}:host(limel-tab-bar[orientation=vertical]){width:var(--tab-bar-vertical-width, 10rem)}:host(limel-tab-bar[orientation=vertical]) div[role=tablist]{height:100%}:host(limel-tab-bar[orientation=vertical]) limel-scroller{--limel-scroller-content-padding:var(           --limel-tab-active-outer-edge-curve-size       )       0 var(--limel-tab-active-outer-edge-curve-size) 0.25rem;height:100%}:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]{border-radius:var(--limel-tab-border-radius) 0 0 var(--limel-tab-border-radius)}:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:before,:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:after{right:0}:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:before{bottom:100%;transform:rotateY(180deg)}:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:after{top:100%;transform:rotate(180deg)}:host(limel-tab-bar[orientation=vertical]) span.content{justify-content:flex-start}:host(limel-tab-bar[orientation=vertical]) span.text{flex-grow:1}";export{z as limel_tab_bar}

package/dist/lime-elements/p-ooVD-6_a.js

@@ -0,0 +1 @@
+function t(t){if("function"!=typeof t)throw new TypeError("Expected a function");return function(){var r=arguments;switch(r.length){case 0:return!t.call(this);case 1:return!t.call(this,r[0]);case 2:return!t.call(this,r[0],r[1]);case 3:return!t.call(this,r[0],r[1],r[2])}return!t.apply(this,r)}}export{t as n}

package/dist/lime-elements/p-rJbGuVxd.js

@@ -0,0 +1 @@
+import{g as t}from"./p-DbBZn7JO.js";import{e as n}from"./p-CZ30nDJE.js";import{M as r}from"./p-DpFfRQwV.js";var i=t(Object,"create"),s=Object.prototype.hasOwnProperty,o=Object.prototype.hasOwnProperty;function u(t){var n=-1,r=null==t?0:t.length;for(this.clear();++n<r;){var i=t[n];this.set(i[0],i[1])}}function h(t,r){for(var i=t.length;i--;)if(n(t[i][0],r))return i;return-1}u.prototype.clear=function(){this.__data__=i?i(null):{},this.size=0},u.prototype.delete=function(t){var n=this.has(t)&&delete this.__data__[t];return this.size-=n?1:0,n},u.prototype.get=function(t){var n=this.__data__;if(i){var r=n[t];return"__lodash_hash_undefined__"===r?void 0:r}return s.call(n,t)?n[t]:void 0},u.prototype.has=function(t){var n=this.__data__;return i?void 0!==n[t]:o.call(n,t)},u.prototype.set=function(t,n){var r=this.__data__;return this.size+=this.has(t)?0:1,r[t]=i&&void 0===n?"__lodash_hash_undefined__":n,this};var e=Array.prototype.splice;function a(t){var n=-1,r=null==t?0:t.length;for(this.clear();++n<r;){var i=t[n];this.set(i[0],i[1])}}function f(t,n){var r,i,s=t.__data__;return("string"==(i=typeof(r=n))||"number"==i||"symbol"==i||"boolean"==i?"__proto__"!==r:null===r)?s["string"==typeof n?"string":"hash"]:s.map}function v(t){var n=-1,r=null==t?0:t.length;for(this.clear();++n<r;){var i=t[n];this.set(i[0],i[1])}}function c(t,n){for(var r=-1,i=n.length,s=t.length;++r<i;)t[s+r]=n[r];return t}a.prototype.clear=function(){this.__data__=[],this.size=0},a.prototype.delete=function(t){var n=this.__data__,r=h(n,t);return!(r<0||(r==n.length-1?n.pop():e.call(n,r,1),--this.size,0))},a.prototype.get=function(t){var n=this.__data__,r=h(n,t);return r<0?void 0:n[r][1]},a.prototype.has=function(t){return h(this.__data__,t)>-1},a.prototype.set=function(t,n){var r=this.__data__,i=h(r,t);return i<0?(++this.size,r.push([t,n])):r[i][1]=n,this},v.prototype.clear=function(){this.size=0,this.__data__={hash:new u,map:new(r||a),string:new u}},v.prototype.delete=function(t){var n=f(this,t).delete(t);return this.size-=n?1:0,n},v.prototype.get=function(t){return f(this,t).get(t)},v.prototype.has=function(t){return f(this,t).has(t)},v.prototype.set=function(t,n){var r=f(this,t),i=r.size;return r.set(t,n),this.size+=r.size==i?0:1,this};export{a as L,v as M,c as a}

package/dist/lime-elements/p-xGeCwSnE.js

@@ -0,0 +1 @@
+import{i as r}from"./p-BcJ-TDVt.js";import{i as t}from"./p-BZrtP4vv.js";function i(i){return null!=i&&t(i.length)&&!r(i)}export{i}

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { FormError, FormSchema, ValidationError, ValidationStatus } from './form.types';
+import { FormError, FormSchema, HeadingLevel, ValidationError, ValidationStatus } from './form.types';
 /**
  * @exampleComponent limel-example-form
  * @exampleComponent limel-example-nested-form
@@ -18,6 +18,7 @@ import { FormError, FormSchema, ValidationError, ValidationStatus } from './form
  * @exampleComponent limel-example-builtin-field-types-form
  * @exampleComponent limel-example-code-editor-form
  * @exampleComponent limel-example-form-highlighted-field
+ * @exampleComponent limel-example-form-heading-level
  */
 export declare class Form {
     /**
@@ -51,6 +52,16 @@ export declare class Form {
      * errors generated server side.
      */
     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`.
+     */
+    headingLevel: HeadingLevel;
     /**
      * Set to `true` to render every field with a validation error as
      * invalid, even untouched ones, and to reflect that on each
@@ -85,7 +96,10 @@ export declare class Form {
     private initialized;
     constructor();
     connectedCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
+    protected handleHeadingLevelChange(): void;
+    private warnIfHeadingLevelIsInvalid;
     protected handleHighlightedFieldChange(newPath?: Array<string | number>, oldPath?: Array<string | number>): void;
     private initialize;
     componentDidUpdate(): void;

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

@@ -45,4 +45,8 @@ export declare const nestedLayoutSchemaPathSchema: FormSchema;
 export declare const getConditionalCustomComponentSchema: (value: Record<string, any>) => FormSchema;
 export declare const arrayItemWithEnumAndDefaultSchema: FormSchema;
 export declare const requiredCheckboxSchema: FormSchema;
+export declare const nestedTitlesSchema: FormSchema;
+export declare const titledRowLayoutSchema: FormSchema;
+export declare const untitledRootSchema: FormSchema;
+export declare const untitledRowSchema: FormSchema;
 //# sourceMappingURL=form.test-schemas.d.ts.map

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

@@ -72,6 +72,12 @@ 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
  */

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

@@ -6,8 +6,6 @@ import { FormSchema } from '../form.types';
  * @param extraProps - additional props to pass to the limel-help element
  */
 export declare function getHelpComponent(schema: FormSchema, extraProps?: Record<string, unknown>): React.ReactElement<{
-    value: string;
-}, string | React.JSXElementConstructor<any>> | React.ReactElement<{
     openDirection?: import("../../..").OpenDirection;
     readMoreLink?: import("../../..").Link;
     trigger?: string;

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

@@ -1,7 +1,10 @@
 import React from 'react';
 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>;
+    context: React.ContextType<typeof HeadingLevelContext>;
     constructor(props: RowProps);
     render(): React.DetailedReactHTMLElement<{
         className: string;

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

@@ -1,13 +1,26 @@
 import React from 'react';
 import { JSONSchema7 } from 'json-schema';
 import { ErrorSchema } from '@rjsf/utils';
+import { Help } from '../../help/help.types';
 /**
+ * Render the title of a field, with its description and help, as a
+ * heading.
  *
- * @param title
+ * @param title - the title of the field
+ * @param description - the description of the field, in markdown
+ * @param help - the help of the field, as in `lime.help` of the schema
  */
-export declare function renderTitle(title: string): React.DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;
+export declare function renderHeader(title: string, description?: string, help?: string | Partial<Help>): React.FunctionComponentElement<import("./heading-level").HeaderProps>;
+/**
+ * Render a field with its header, followed by its content. The headings in
+ * the content are one level below the heading of the field.
+ *
+ * @param title - the title of the field
+ * @param description - the description of the field, in markdown
+ * @param help - the help of the field, as in `lime.help` of the schema
+ * @param content - the content of the field
+ */
+export declare function renderSection(title: string, description: string | undefined, help: string | Partial<Help> | undefined, ...content: React.ReactNode[]): React.FunctionComponentElement<React.FragmentProps>;
 /**
  *
  * @param description

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

@@ -0,0 +1,49 @@
+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;
+/**
+ * The heading level that a title at the current depth in the form gets.
+ */
+export declare const HeadingLevelContext: React.Context<HeadingLevel>;
+/**
+ * @param level - a heading level
+ * @returns the level of the headings one step below, down to `h6`
+ */
+export declare function nextHeadingLevel(level: HeadingLevel): HeadingLevel;
+export interface HeaderProps {
+    title: string;
+    description?: string;
+    help?: string | Partial<Help>;
+}
+/**
+ * The title of a field, drawn with the heading level of its depth.
+ *
+ * @param props
+ * @param props.title - the title of the field
+ * @param props.description - the description of the field, in markdown
+ * @param props.help - the help of the field
+ */
+export declare function Header({ title, description, help }: HeaderProps): React.ReactElement<{
+    heading: string;
+    headingLevel: HeadingLevel;
+    description: string;
+    help: string | Partial<Help>;
+}, string | React.JSXElementConstructor<any>>;
+export interface BelowHeadingProps {
+    hasHeading: boolean;
+}
+/**
+ * Gives the fields it wraps one heading level more than the level of the
+ * heading above them, if there is one.
+ *
+ * @param props
+ * @param props.hasHeading - whether the fields are below a heading
+ * @param props.children - the fields
+ */
+export declare function BelowHeading({ hasHeading, children, }: PropsWithChildren<BelowHeadingProps>): React.FunctionComponentElement<React.ProviderProps<HeadingLevel>>;
+//# sourceMappingURL=heading-level.d.ts.map

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

@@ -0,0 +1,47 @@
+import { Help } from '../help/help.types';
+import { HeadingLevel } from '../form/form.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
+ * with its description and its help.
+ *
+ * Consumers of `limel-form` do not use it. They set the `title`,
+ * the `description` and `lime.help` in the schema, and the form draws
+ * this component with the right heading level.
+ *
+ * :::note
+ * The component has `shadow: false`, so that the heading, the description
+ * and the help are part of the DOM of `limel-form`. This way, the styles
+ * of the form that depend on how deep a field is reach them directly.
+ * :::
+ *
+ * @exampleComponent limel-example-form-header-basic
+ * @exampleComponent limel-example-form-header-heading-level
+ * @exampleComponent limel-example-form-header-help
+ * @private
+ */
+export declare class FormHeader {
+    /**
+     * The title of the section, the list or the custom component.
+     */
+    heading?: string;
+    /**
+     * Which of the heading elements, from `h1` to `h6`, to draw
+     * the `heading` with.
+     */
+    headingLevel: HeadingLevel;
+    /**
+     * Text, in markdown, that describes what the `heading` is about.
+     */
+    description?: string;
+    /**
+     * Help to show beside the `heading`. A string is used as the `value`
+     * of the help.
+     */
+    help?: string | Partial<Help>;
+    render(): any;
+    private renderHeading;
+    private renderHelp;
+    private renderDescription;
+}
+//# sourceMappingURL=form-header.d.ts.map

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

@@ -0,0 +1,7 @@
+import { Help } from '../help/help.types';
+/**
+ * @param help - the help of a field, from its schema
+ * @returns the properties of `limel-help` that the help sets, and no others
+ */
+export declare function getHelpProps(help: string | Partial<Help>): Partial<Help>;
+//# sourceMappingURL=help-props.d.ts.map

package/dist/types/components.d.ts

@@ -34,7 +34,8 @@ 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, ValidationError, ValidationStatus } from "./components/form/form.types";
+import { FormError, FormSchema, HeadingLevel, 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";
 import { InputType } from "./components/input-field/input-field.types";
@@ -84,7 +85,8 @@ 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, ValidationError, ValidationStatus } from "./components/form/form.types";
+export { FormError, FormSchema, HeadingLevel, 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";
 export { InputType } from "./components/input-field/input-field.types";
@@ -1907,6 +1909,7 @@ export namespace Components {
      * @exampleComponent limel-example-builtin-field-types-form
      * @exampleComponent limel-example-code-editor-form
      * @exampleComponent limel-example-form-highlighted-field
+     * @exampleComponent limel-example-form-heading-level
      */
     interface LimelForm {
         /**
@@ -1918,6 +1921,11 @@ export namespace Components {
           * Extra errors to display in the form. Typical use case is asynchronous errors generated server side.
          */
         "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`.
+          * @default 1
+         */
+        "headingLevel": HeadingLevel;
         /**
           * The path in the value of a field to take the user to, such as `['heroes', 2, 'name']`. When it changes, the form opens the sections and list items the field is in, scrolls it into view, focuses it and briefly highlights it.  If the path goes further than the form can show, such as into a custom component, the closest field above the end of the path is shown. To show the same field again, set it to `undefined` first.
           * @beta
@@ -1946,6 +1954,42 @@ export namespace Components {
          */
         "value": object;
     }
+    /**
+     * 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
+     * with its description and its help.
+     * Consumers of `limel-form` do not use it. They set the `title`,
+     * the `description` and `lime.help` in the schema, and the form draws
+     * this component with the right heading level.
+     * :::note
+     * The component has `shadow: false`, so that the heading, the description
+     * and the help are part of the DOM of `limel-form`. This way, the styles
+     * of the form that depend on how deep a field is reach them directly.
+     * :::
+     * @exampleComponent limel-example-form-header-basic
+     * @exampleComponent limel-example-form-header-heading-level
+     * @exampleComponent limel-example-form-header-help
+     * @private 
+     */
+    interface LimelFormHeader {
+        /**
+          * Text, in markdown, that describes what the `heading` is about.
+         */
+        "description"?: string;
+        /**
+          * The title of the section, the list or the custom component.
+         */
+        "heading"?: string;
+        /**
+          * Which of the heading elements, from `h1` to `h6`, to draw the `heading` with.
+          * @default 1
+         */
+        "headingLevel": HeadingLevel;
+        /**
+          * Help to show beside the `heading`. A string is used as the `value` of the help.
+         */
+        "help"?: string | Partial<Help>;
+    }
     /**
      * This component is deprecated and will be removed in a future version of
      * Lime Elements. Please use CSS for your flexible container needs 🙂
@@ -5697,6 +5741,7 @@ declare global {
      * @exampleComponent limel-example-builtin-field-types-form
      * @exampleComponent limel-example-code-editor-form
      * @exampleComponent limel-example-form-highlighted-field
+     * @exampleComponent limel-example-form-heading-level
      */
     interface HTMLLimelFormElement extends Components.LimelForm, HTMLStencilElement {
         addEventListener<K extends keyof HTMLLimelFormElementEventMap>(type: K, listener: (this: HTMLLimelFormElement, ev: LimelFormCustomEvent<HTMLLimelFormElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -5712,6 +5757,29 @@ declare global {
         prototype: HTMLLimelFormElement;
         new (): HTMLLimelFormElement;
     };
+    /**
+     * 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
+     * with its description and its help.
+     * Consumers of `limel-form` do not use it. They set the `title`,
+     * the `description` and `lime.help` in the schema, and the form draws
+     * this component with the right heading level.
+     * :::note
+     * The component has `shadow: false`, so that the heading, the description
+     * and the help are part of the DOM of `limel-form`. This way, the styles
+     * of the form that depend on how deep a field is reach them directly.
+     * :::
+     * @exampleComponent limel-example-form-header-basic
+     * @exampleComponent limel-example-form-header-heading-level
+     * @exampleComponent limel-example-form-header-help
+     * @private 
+     */
+    interface HTMLLimelFormHeaderElement extends Components.LimelFormHeader, HTMLStencilElement {
+    }
+    var HTMLLimelFormHeaderElement: {
+        prototype: HTMLLimelFormHeaderElement;
+        new (): HTMLLimelFormHeaderElement;
+    };
     /**
      * This component is deprecated and will be removed in a future version of
      * Lime Elements. Please use CSS for your flexible container needs 🙂
@@ -7172,6 +7240,7 @@ declare global {
         "limel-flatpickr-adapter": HTMLLimelFlatpickrAdapterElement;
         "limel-flex-container": HTMLLimelFlexContainerElement;
         "limel-form": HTMLLimelFormElement;
+        "limel-form-header": HTMLLimelFormHeaderElement;
         "limel-grid": HTMLLimelGridElement;
         "limel-header": HTMLLimelHeaderElement;
         "limel-help": HTMLLimelHelpElement;
@@ -9159,6 +9228,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-builtin-field-types-form
      * @exampleComponent limel-example-code-editor-form
      * @exampleComponent limel-example-form-highlighted-field
+     * @exampleComponent limel-example-form-heading-level
      */
     interface LimelForm {
         /**
@@ -9170,6 +9240,11 @@ declare namespace LocalJSX {
           * Extra errors to display in the form. Typical use case is asynchronous errors generated server side.
          */
         "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`.
+          * @default 1
+         */
+        "headingLevel"?: HeadingLevel;
         /**
           * The path in the value of a field to take the user to, such as `['heroes', 2, 'name']`. When it changes, the form opens the sections and list items the field is in, scrolls it into view, focuses it and briefly highlights it.  If the path goes further than the form can show, such as into a custom component, the closest field above the end of the path is shown. To show the same field again, set it to `undefined` first.
           * @beta
@@ -9206,6 +9281,42 @@ declare namespace LocalJSX {
          */
         "value"?: object;
     }
+    /**
+     * 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
+     * with its description and its help.
+     * Consumers of `limel-form` do not use it. They set the `title`,
+     * the `description` and `lime.help` in the schema, and the form draws
+     * this component with the right heading level.
+     * :::note
+     * The component has `shadow: false`, so that the heading, the description
+     * and the help are part of the DOM of `limel-form`. This way, the styles
+     * of the form that depend on how deep a field is reach them directly.
+     * :::
+     * @exampleComponent limel-example-form-header-basic
+     * @exampleComponent limel-example-form-header-heading-level
+     * @exampleComponent limel-example-form-header-help
+     * @private 
+     */
+    interface LimelFormHeader {
+        /**
+          * Text, in markdown, that describes what the `heading` is about.
+         */
+        "description"?: string;
+        /**
+          * The title of the section, the list or the custom component.
+         */
+        "heading"?: string;
+        /**
+          * Which of the heading elements, from `h1` to `h6`, to draw the `heading` with.
+          * @default 1
+         */
+        "headingLevel"?: HeadingLevel;
+        /**
+          * Help to show beside the `heading`. A string is used as the `value` of the help.
+         */
+        "help"?: string | Partial<Help>;
+    }
     /**
      * This component is deprecated and will be removed in a future version of
      * Lime Elements. Please use CSS for your flexible container needs 🙂
@@ -12130,8 +12241,15 @@ declare namespace LocalJSX {
     }
     interface LimelFormAttributes {
         "disabled": boolean;
+        "headingLevel": HeadingLevel;
         "revealErrors": boolean;
     }
+    interface LimelFormHeaderAttributes {
+        "heading": string;
+        "headingLevel": HeadingLevel;
+        "description": string;
+        "help": string | Partial<Help>;
+    }
     interface LimelHeaderAttributes {
         "icon": IconName | Icon;
         "heading": string;
@@ -12536,6 +12654,7 @@ declare namespace LocalJSX {
         "limel-flatpickr-adapter": Omit<LimelFlatpickrAdapter, keyof LimelFlatpickrAdapterAttributes> & { [K in keyof LimelFlatpickrAdapter & keyof LimelFlatpickrAdapterAttributes]?: LimelFlatpickrAdapter[K] } & { [K in keyof LimelFlatpickrAdapter & keyof LimelFlatpickrAdapterAttributes as `attr:${K}`]?: LimelFlatpickrAdapterAttributes[K] } & { [K in keyof LimelFlatpickrAdapter & keyof LimelFlatpickrAdapterAttributes as `prop:${K}`]?: LimelFlatpickrAdapter[K] };
         "limel-flex-container": Omit<LimelFlexContainer, keyof LimelFlexContainerAttributes> & { [K in keyof LimelFlexContainer & keyof LimelFlexContainerAttributes]?: LimelFlexContainer[K] } & { [K in keyof LimelFlexContainer & keyof LimelFlexContainerAttributes as `attr:${K}`]?: LimelFlexContainerAttributes[K] } & { [K in keyof LimelFlexContainer & keyof LimelFlexContainerAttributes as `prop:${K}`]?: LimelFlexContainer[K] };
         "limel-form": Omit<LimelForm, keyof LimelFormAttributes> & { [K in keyof LimelForm & keyof LimelFormAttributes]?: LimelForm[K] } & { [K in keyof LimelForm & keyof LimelFormAttributes as `attr:${K}`]?: LimelFormAttributes[K] } & { [K in keyof LimelForm & keyof LimelFormAttributes as `prop:${K}`]?: LimelForm[K] };
+        "limel-form-header": Omit<LimelFormHeader, keyof LimelFormHeaderAttributes> & { [K in keyof LimelFormHeader & keyof LimelFormHeaderAttributes]?: LimelFormHeader[K] } & { [K in keyof LimelFormHeader & keyof LimelFormHeaderAttributes as `attr:${K}`]?: LimelFormHeaderAttributes[K] } & { [K in keyof LimelFormHeader & keyof LimelFormHeaderAttributes as `prop:${K}`]?: LimelFormHeader[K] };
         "limel-grid": LimelGrid;
         "limel-header": Omit<LimelHeader, keyof LimelHeaderAttributes> & { [K in keyof LimelHeader & keyof LimelHeaderAttributes]?: LimelHeader[K] } & { [K in keyof LimelHeader & keyof LimelHeaderAttributes as `attr:${K}`]?: LimelHeaderAttributes[K] } & { [K in keyof LimelHeader & keyof LimelHeaderAttributes as `prop:${K}`]?: LimelHeader[K] };
         "limel-help": Omit<LimelHelp, keyof LimelHelpAttributes> & { [K in keyof LimelHelp & keyof LimelHelpAttributes]?: LimelHelp[K] } & { [K in keyof LimelHelp & keyof LimelHelpAttributes as `attr:${K}`]?: LimelHelpAttributes[K] } & { [K in keyof LimelHelp & keyof LimelHelpAttributes as `prop:${K}`]?: LimelHelp[K] };
@@ -13239,8 +13358,27 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-builtin-field-types-form
              * @exampleComponent limel-example-code-editor-form
              * @exampleComponent limel-example-form-highlighted-field
+             * @exampleComponent limel-example-form-heading-level
              */
             "limel-form": LocalJSX.IntrinsicElements["limel-form"] & JSXBase.HTMLAttributes<HTMLLimelFormElement>;
+            /**
+             * 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
+             * with its description and its help.
+             * Consumers of `limel-form` do not use it. They set the `title`,
+             * the `description` and `lime.help` in the schema, and the form draws
+             * this component with the right heading level.
+             * :::note
+             * The component has `shadow: false`, so that the heading, the description
+             * and the help are part of the DOM of `limel-form`. This way, the styles
+             * of the form that depend on how deep a field is reach them directly.
+             * :::
+             * @exampleComponent limel-example-form-header-basic
+             * @exampleComponent limel-example-form-header-heading-level
+             * @exampleComponent limel-example-form-header-help
+             * @private 
+             */
+            "limel-form-header": LocalJSX.IntrinsicElements["limel-form-header"] & JSXBase.HTMLAttributes<HTMLLimelFormHeaderElement>;
             /**
              * This component is deprecated and will be removed in a future version of
              * Lime Elements. Please use CSS for your flexible container needs 🙂

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, LimeSchemaOptions, LimeLayoutOptions, FormComponentOptions, FormLayoutOptions, GridLayoutOptions, RowLayoutOptions, FormLayoutType, ReplaceObjectType, FormSchemaArrayItem, FormSubKeySchema, } from './components/form/form.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 * from './components/help/help.types';
 export * from './components/icon/icon.types';
 export * from './components/info-tile/info-tile.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "40.15.0",
+  "version": "40.16.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",