@limetech/lime-elements 40.15.0 → 40.17.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/popover/popover.d.ts

@@ -53,6 +53,25 @@ export declare class Popover {
      * Decides the popover's location in relation to its trigger
      */
     openDirection: OpenDirection;
+    /**
+     * Says what kind of popup the trigger opens, so that a screen reader can
+     * announce it. Use the one that fits what you put in the popover: `dialog`
+     * for a form, a message or other content, and `menu`, `listbox`, `tree`
+     * or `grid` when the content is one of those widgets.
+     *
+     * A popup with one of these roles needs a name, so the role is used only
+     * together with `accessibleLabel`. Without one, the popover warns in the
+     * console.
+     *
+     * When the role is not set or not used, the trigger only says that it
+     * opens a popup.
+     */
+    popupRole?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid';
+    /**
+     * The name of the popup, which a screen reader announces when the focus
+     * moves into it. Used together with `popupRole`.
+     */
+    accessibleLabel?: string;
     /**
      * Emits an event when the component is closing
      */
@@ -61,10 +80,12 @@ export declare class Popover {
     private portalId;
     private triggerSlot;
     private shouldRestoreFocusOnClose;
+    private hasWarnedAboutMissingName;
     constructor();
     protected watchOpen(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    componentWillRender(): void;
     componentDidRender(): void;
     private setupGlobalHandlers;
     /**
@@ -81,5 +102,8 @@ export declare class Popover {
     private readonly setTriggerRef;
     private readonly focusTrigger;
     private setTriggerAttributes;
+    private getNamedPopupRole;
+    private warnIfRoleHasNoName;
+    private setControlledPopup;
 }
 //# sourceMappingURL=popover.d.ts.map

package/dist/types/components/popover-surface/popover-surface.d.ts

@@ -7,6 +7,14 @@ export declare class PopoverSurface {
      * Content to render
      */
     contentCollection: HTMLCollection;
+    /**
+     * The role of the surface, for assistive technology
+     */
+    popupRole?: string;
+    /**
+     * The name of the surface, for assistive technology
+     */
+    accessibleLabel?: string;
     private host;
     componentDidLoad(): void;
     render(): any;