@limetech/lime-elements 40.13.0 → 40.14.0

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

@@ -0,0 +1 @@
+import{r as t,c as a,h as s,H as i,a as e}from"./p-BU9IJqli.js";import{d as o}from"./p-z_E3sq3p.js";const h=class{constructor(s){t(this,s),this.changeTab=a(this,"changeTab",7),this.reorderTab=a(this,"reorderTab",7),this.tabs=[],this.orientation="horizontal",this.allowTabReorder=!1,this.slotElements=[],this.handleChangeTabs=this.handleChangeTabs.bind(this),this.setSlotElements=this.setSlotElements.bind(this),this.setTabStatus=this.setTabStatus.bind(this)}connectedCallback(){this.initialize()}componentDidLoad(){this.initialize()}initialize(){const t=this.getSlot();if(t){t.addEventListener("slotchange",this.setSlotElements),this.setSlotElements();for(const t of this.tabs)this.setTabStatus(t)}}disconnectedCallback(){this.getSlot().removeEventListener("slotchange",this.setSlotElements)}tabsChanged(){this.hidePanels();for(const t of this.tabs)this.setTabStatus(t)}render(){return s(i,{key:"530a6e0b8ae7387edaf8e0c1b6360a5a8099f155",onChangeTab:this.handleChangeTabs},s("div",{key:"5d2ba03a54a5315b9c400d28b8dc0967a41a34fe",class:"tab-panel"},s("limel-tab-bar",{key:"69183dd7c31a1d5c6d7027a81bf152586bf6fd0a",tabs:this.tabs,orientation:this.orientation,allowTabReorder:this.allowTabReorder}),s("div",{key:"f7ac219b8f1941a1b2b5656f36646077165b2ec9",class:"tab-content"},s("slot",{key:"177a1e39cdc731a2e77b6d06a691851a193b2a40"}))))}setSlotElements(){const t=this.getSlot();this.hidePanels(),this.slotElements=Array.prototype.slice.call(t.assignedElements());for(const t of this.tabs)this.setTabStatus(t)}setTabStatus(t){const a=this.slotElements.find((a=>a.id===t.id));a&&(a.style.display=t.active?"":"none",a.tab=t)}handleChangeTabs(t){this.tabs=this.tabs.map((a=>a.id===t.detail.id?t.detail:a)),this.setTabStatus(t.detail),setTimeout(o,0)}getSlot(){return this.host.shadowRoot.querySelector("slot")}hidePanels(){for(const t of this.slotElements)t.style.display="none"}get host(){return e(this)}static get watchers(){return{tabs:[{tabsChanged:0}]}}};h.style=":host(limel-tab-panel){--tab-panel-background-color:rgb(var(--contrast-100));display:block;height:100%}.tab-panel{height:100%;position:relative;display:flex;flex-direction:column}.tab-content{height:100%;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;background-color:var(--tab-panel-background-color)}:host(limel-tab-panel[orientation=vertical]) div.tab-panel{flex-direction:row}:host(limel-tab-panel[orientation=vertical]) div.tab-content{min-width:0}";export{h as limel_tab_panel}

package/dist/lime-elements/{p-c12fbc91.entry.js → p-f455150b.entry.js}

@@ -1 +1 @@
-import{r as t,h as s,H as i,a as e}from"./p-BU9IJqli.js";const o=class{constructor(s){t(this,s),this.ordered=!1,this.containerHeight=0,this.hasRendered=!1,this.pendingLayoutFrame=null}onOrderedChange(){this.scheduleLayout()}componentDidLoad(){this.setupObservers(),this.layoutItems(),this.hasRendered=!0}connectedCallback(){this.hasRendered&&(this.setupObservers(),this.scheduleLayout())}disconnectedCallback(){var t,s,i;null===(t=this.resizeObserver)||void 0===t||t.disconnect(),null===(s=this.mutationObserver)||void 0===s||s.disconnect(),null===(i=this.itemResizeObserver)||void 0===i||i.disconnect(),null!==this.pendingLayoutFrame&&cancelAnimationFrame(this.pendingLayoutFrame)}render(){return s(i,{key:"4739b8085adca277a42f36478b1692970e2a8675",style:{height:`${this.containerHeight}rem`},class:{"is-laid-out":this.hasRendered}},s("slot",{key:"14290465ddb5ea67ff9d2883904f3298900151ee"}))}setupObservers(){this.resizeObserver=new ResizeObserver((()=>{this.scheduleLayout()})),this.resizeObserver.observe(this.host),this.itemResizeObserver=new ResizeObserver((()=>{this.scheduleLayout()})),this.mutationObserver=new MutationObserver((()=>{this.observeItemSizes(),this.scheduleLayout()})),this.mutationObserver.observe(this.host,{childList:!0}),this.observeItemSizes()}observeItemSizes(){var t;null===(t=this.itemResizeObserver)||void 0===t||t.disconnect();const s=this.getItems();for(const t of s)this.itemResizeObserver.observe(t)}getItems(){return[...this.host.children].filter((t=>t instanceof HTMLElement))}getRootFontSize(){return Number.parseFloat(getComputedStyle(document.documentElement).fontSize)}pxToRem(t,s){return t/s}getCssPropertyInPx(t,s,i){const e=getComputedStyle(this.host).getPropertyValue(t).trim()||s,o=Number.parseFloat(e);return e.endsWith("px")?o:o*i}scheduleLayout(){null!==this.pendingLayoutFrame&&cancelAnimationFrame(this.pendingLayoutFrame),this.pendingLayoutFrame=requestAnimationFrame((()=>{this.pendingLayoutFrame=null,this.layoutItems()}))}layoutItems(){const t=this.getItems();if(0===t.length)return void(this.containerHeight=0);const s=this.host.offsetWidth;if(!s)return;const i=this.getRootFontSize(),e=this.getCssPropertyInPx("--masonry-layout-gap","1rem",i),{columnCount:o,columnWidth:n}=this.calculateColumns(s,e,i),r=this.positionItems(t,o,n,e,i),h=this.pxToRem(Math.max(...r)-e,i);Math.abs(h-this.containerHeight)>.1&&(this.containerHeight=h)}calculateColumns(t,s,i){const e=this.getCssPropertyInPx("--masonry-layout-min-column-width","12rem",i),o=Math.max(1,Math.floor((t+s)/(e+s)));return{columnCount:o,columnWidth:(t-(o-1)*s)/o}}positionItems(t,s,i,e,o){const n=Array.from({length:s},(()=>0));let r=0;for(const h of t){const t=this.ordered?r%s:n.indexOf(Math.min(...n)),a=t*(i+e),l=n[t];h.style.position="absolute",h.style.left=`${this.pxToRem(a,o)}rem`,h.style.top=`${this.pxToRem(l,o)}rem`,h.style.width=`${this.pxToRem(i,o)}rem`,this.hasRendered||this.staggerFadeIn(h,r),n[t]+=h.offsetHeight+e,r++}return n}staggerFadeIn(t,s){if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;t.style.transition="opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1)",t.style.transitionDelay=20*s+"ms";const i=s=>{s.target===t&&"opacity"===s.propertyName&&(t.style.transition="",t.style.transitionDelay="",t.removeEventListener("transitionend",i))};t.addEventListener("transitionend",i)}get host(){return e(this)}static get watchers(){return{ordered:[{onOrderedChange:0}]}}};o.style=":host(limel-masonry-layout){display:block;position:relative;box-sizing:border-box;visibility:hidden}:host(limel-masonry-layout) ::slotted(*){opacity:0;box-sizing:border-box}:host(limel-masonry-layout.is-laid-out){visibility:visible}:host(limel-masonry-layout.is-laid-out) ::slotted(*){opacity:1}";export{o as limel_masonry_layout}
+import{r as t,h as s,H as i,a as e}from"./p-BU9IJqli.js";const o=class{constructor(s){t(this,s),this.ordered=!1,this.containerHeight=0,this.hasRendered=!1,this.pendingLayoutFrame=null}onOrderedChange(){this.scheduleLayout()}componentDidLoad(){this.setupObservers(),this.layoutItems(),this.hasRendered=!0}connectedCallback(){this.hasRendered&&(this.setupObservers(),this.scheduleLayout())}disconnectedCallback(){var t,s,i;null===(t=this.resizeObserver)||void 0===t||t.disconnect(),null===(s=this.mutationObserver)||void 0===s||s.disconnect(),null===(i=this.itemResizeObserver)||void 0===i||i.disconnect(),null!==this.pendingLayoutFrame&&cancelAnimationFrame(this.pendingLayoutFrame)}render(){return s(i,{key:"b25a2eb6e10535aa5fedb8de8baeb96f51e10739",style:{height:`${this.containerHeight}rem`},class:{"is-laid-out":this.hasRendered}},s("slot",{key:"fa2c4773d1fb41e2ea0725a28911840e45e5c809"}))}setupObservers(){this.resizeObserver=new ResizeObserver((()=>{this.scheduleLayout()})),this.resizeObserver.observe(this.host),this.itemResizeObserver=new ResizeObserver((()=>{this.scheduleLayout()})),this.mutationObserver=new MutationObserver((()=>{this.observeItemSizes(),this.scheduleLayout()})),this.mutationObserver.observe(this.host,{childList:!0}),this.observeItemSizes()}observeItemSizes(){var t;null===(t=this.itemResizeObserver)||void 0===t||t.disconnect();const s=this.getItems();for(const t of s)this.itemResizeObserver.observe(t)}getItems(){return[...this.host.children].filter((t=>t instanceof HTMLElement))}getRootFontSize(){return Number.parseFloat(getComputedStyle(document.documentElement).fontSize)}pxToRem(t,s){return t/s}getCssPropertyInPx(t,s,i){const e=getComputedStyle(this.host).getPropertyValue(t).trim()||s,o=Number.parseFloat(e);return e.endsWith("px")?o:o*i}scheduleLayout(){null!==this.pendingLayoutFrame&&cancelAnimationFrame(this.pendingLayoutFrame),this.pendingLayoutFrame=requestAnimationFrame((()=>{this.pendingLayoutFrame=null,this.layoutItems()}))}layoutItems(){const t=this.getItems();if(0===t.length)return void(this.containerHeight=0);const s=this.host.offsetWidth;if(!s)return;const i=this.getRootFontSize(),e=this.getCssPropertyInPx("--masonry-layout-gap","1rem",i),{columnCount:o,columnWidth:n}=this.calculateColumns(s,e,i),r=this.positionItems(t,o,n,e,i),h=this.pxToRem(Math.max(...r)-e,i);Math.abs(h-this.containerHeight)>.1&&(this.containerHeight=h)}calculateColumns(t,s,i){const e=this.getCssPropertyInPx("--masonry-layout-min-column-width","12rem",i),o=Math.max(1,Math.floor((t+s)/(e+s)));return{columnCount:o,columnWidth:(t-(o-1)*s)/o}}positionItems(t,s,i,e,o){const n=Array.from({length:s},(()=>0));let r=0;for(const h of t){const t=this.ordered?r%s:n.indexOf(Math.min(...n)),a=t*(i+e),l=n[t];h.style.position="absolute",h.style.left=`${this.pxToRem(a,o)}rem`,h.style.top=`${this.pxToRem(l,o)}rem`,h.style.width=`${this.pxToRem(i,o)}rem`,this.hasRendered||this.staggerFadeIn(h,r),n[t]+=h.offsetHeight+e,r++}return n}staggerFadeIn(t,s){if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;t.style.transition="opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1)",t.style.transitionDelay=20*s+"ms";const i=s=>{s.target===t&&"opacity"===s.propertyName&&(t.style.transition="",t.style.transitionDelay="",t.removeEventListener("transitionend",i))};t.addEventListener("transitionend",i)}get host(){return e(this)}static get watchers(){return{ordered:[{onOrderedChange:0}]}}};o.style=":host(limel-masonry-layout){display:block;position:relative;box-sizing:border-box;visibility:hidden}:host(limel-masonry-layout) ::slotted(*){opacity:0;box-sizing:border-box}:host(limel-masonry-layout.is-laid-out){visibility:visible}:host(limel-masonry-layout.is-laid-out) ::slotted(*){opacity:1}";export{o as limel_masonry_layout}

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

@@ -92,6 +92,13 @@ export interface FormComponent<T = any> {
      * Whether or not the current property is disabled
      */
     disabled?: boolean;
+    /**
+     * Whether or not the current property is invalid. The form sets this
+     * when the property has validation errors that should be shown. Use it
+     * to show the error state of the component, instead of working it out
+     * from `formInfo.errorSchema`
+     */
+    invalid?: boolean;
     /**
      * The label of the current property
      */

package/dist/types/components/resize-handle/resize-handle.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { Languages } from '../date-picker/date.types';
 /**
  * A handle on an edge of an element. The user drags the handle, or presses an
  * arrow key while the handle has focus, to resize the element.
@@ -13,9 +14,18 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * `static`. If other content covers the handle, also give the element
  * `isolation: isolate`.
  *
+ * ## Accessibility
+ * The user reaches the handle with the <kbd>Tab</kbd> key. The handle is named
+ * "Resize" followed by `resizableRegionLabel`, for example "Resize side
+ * panel". A tooltip shows the name and how to resize. While the pointer is
+ * over the handle, it says to drag the handle. While the handle has keyboard
+ * focus, it says which arrow keys to press, which fit `location`. Screen
+ * readers read the arrow keys as the description of the handle.
+ *
  * @exampleComponent limel-example-resize-handle-basic
  * @exampleComponent limel-example-resize-handle-locations
  * @exampleComponent limel-example-resize-handle-grab-area
+ * @exampleComponent limel-example-resize-handle-accessibility
  * @private
  */
 export declare class ResizeHandle {
@@ -24,9 +34,20 @@ export declare class ResizeHandle {
      */
     location: 'left' | 'right' | 'top' | 'bottom';
     /**
-     * The accessible name of the handle.
+     * The name of the region that the handle resizes, for example
+     * `side panel`. The accessible name of the handle is "Resize" followed by
+     * this name, for example "Resize side panel". When no name is set, the
+     * handle is named "Resize this region".
+     *
+     * Write the name in the language that is set in `language`, in the form
+     * that reads right after "Resize", for example `side panel` in English
+     * and `sidopanelen` in Swedish.
+     */
+    resizableRegionLabel?: string;
+    /**
+     * Defines the language for translations.
      */
-    label: string;
+    language: Languages;
     /**
      * The size of the element, in pixels: the width when `location` is `left`
      * or `right`, and the height when it is `top` or `bottom`.
@@ -52,11 +73,19 @@ export declare class ResizeHandle {
      * press. Pressing and releasing the handle without moving it emits nothing.
      */
     endResize: EventEmitter<void>;
+    private isPointerOver;
+    private hasKeyboardFocus;
     private host;
     private stopResizing?;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;
+    private getName;
+    private getHint;
+    private handlePointerEnter;
+    private handlePointerLeave;
+    private handleFocus;
+    private handleBlur;
     private handleKeyDown;
     private elementSize;
     private resizableElement;

package/dist/types/components/side-panel/side-panel.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { Languages } from '../date-picker/date.types';
 import { SidePanelAction, SidePanelActionSelect, SidePanelEntry } from './side-panel.types';
 /**
  * A resizable panel that is displayed on top of the right side of the page.
@@ -24,6 +25,7 @@ import { SidePanelAction, SidePanelActionSelect, SidePanelEntry } from './side-p
  * @exampleComponent limel-example-side-panel-header-actions
  * @exampleComponent limel-example-side-panel-stacking
  * @exampleComponent limel-example-side-panel-full-screen
+ * @exampleComponent limel-example-side-panel-accessibility
  * @slot - Content of the panel
  * @slot header-actions - Small controls at the right end of the header. Content that is larger than half the header width or the height of the headings is cut off.
  * @private
@@ -32,8 +34,16 @@ export declare class SidePanel {
     /**
      * Accessible name of the panel. Screen readers announce it. Set it to
      * something that tells the user what the panel is for.
+     *
+     * The resize handle is named after it, for example "Resize Customer
+     * details panel". When no label is set, the handle is named "Resize side
+     * panel".
      */
     label?: string;
+    /**
+     * Defines the language for translations.
+     */
+    language: Languages;
     /**
      * Label of the close button. Shown as a tooltip and used as the accessible
      * name.
@@ -49,10 +59,6 @@ export declare class SidePanel {
      * Buttons in the toolbar, to the right of the close button.
      */
     actions: SidePanelAction[];
-    /**
-     * Label of the resize handle. Used as the accessible name.
-     */
-    resizeLabel: string;
     /**
      * Whether pressing Escape emits `close`. Set to `false` to let only the
      * close button emit `close`. The panel then does not prevent the Escape
@@ -120,6 +126,7 @@ export declare class SidePanel {
     private renderBack;
     private renderHeader;
     private renderHandle;
+    private getRegionLabel;
     private renderBody;
     /**
      * Components in the content can emit events with the same names as the

package/dist/types/components.d.ts

@@ -3481,16 +3481,25 @@ export namespace Components {
      * the edge that `location` names. Give the element a `position` other than
      * `static`. If other content covers the handle, also give the element
      * `isolation: isolate`.
+     * ## Accessibility
+     * The user reaches the handle with the <kbd>Tab</kbd> key. The handle is named
+     * "Resize" followed by `resizableRegionLabel`, for example "Resize side
+     * panel". A tooltip shows the name and how to resize. While the pointer is
+     * over the handle, it says to drag the handle. While the handle has keyboard
+     * focus, it says which arrow keys to press, which fit `location`. Screen
+     * readers read the arrow keys as the description of the handle.
      * @exampleComponent limel-example-resize-handle-basic
      * @exampleComponent limel-example-resize-handle-locations
      * @exampleComponent limel-example-resize-handle-grab-area
+     * @exampleComponent limel-example-resize-handle-accessibility
      * @private 
      */
     interface LimelResizeHandle {
         /**
-          * The accessible name of the handle.
+          * Defines the language for translations.
+          * @default 'en'
          */
-        "label": string;
+        "language": Languages;
         /**
           * The location of the handle relative to the resizable element.
           * @default 'left'
@@ -3504,6 +3513,10 @@ export namespace Components {
           * The smallest size that the element can have, in pixels.
          */
         "min"?: number;
+        /**
+          * The name of the region that the handle resizes, for example `side panel`. The accessible name of the handle is "Resize" followed by this name, for example "Resize side panel". When no name is set, the handle is named "Resize this region".  Write the name in the language that is set in `language`, in the form that reads right after "Resize", for example `side panel` in English and `sidopanelen` in Swedish.
+         */
+        "resizableRegionLabel"?: string;
         /**
           * The size of the element, in pixels: the width when `location` is `left` or `right`, and the height when it is `top` or `bottom`.
          */
@@ -3666,6 +3679,7 @@ export namespace Components {
      * @exampleComponent limel-example-side-panel-header-actions
      * @exampleComponent limel-example-side-panel-stacking
      * @exampleComponent limel-example-side-panel-full-screen
+     * @exampleComponent limel-example-side-panel-accessibility
      * @private 
      */
     interface LimelSidePanel {
@@ -3690,14 +3704,14 @@ export namespace Components {
          */
         "fullScreen": boolean;
         /**
-          * Accessible name of the panel. Screen readers announce it. Set it to something that tells the user what the panel is for.
+          * Accessible name of the panel. Screen readers announce it. Set it to something that tells the user what the panel is for.  The resize handle is named after it, for example "Resize Customer details panel". When no label is set, the handle is named "Resize side panel".
          */
         "label"?: string;
         /**
-          * Label of the resize handle. Used as the accessible name.
-          * @default 'Resize'
+          * Defines the language for translations.
+          * @default 'en'
          */
-        "resizeLabel": string;
+        "language": Languages;
         /**
           * The panels in the stack, outermost first. The last entry is the panel that is displayed. Its heading, subheading and icon are shown in the header. The other entries are shown as backs behind the panel.
           * @default []
@@ -6570,9 +6584,17 @@ declare global {
      * the edge that `location` names. Give the element a `position` other than
      * `static`. If other content covers the handle, also give the element
      * `isolation: isolate`.
+     * ## Accessibility
+     * The user reaches the handle with the <kbd>Tab</kbd> key. The handle is named
+     * "Resize" followed by `resizableRegionLabel`, for example "Resize side
+     * panel". A tooltip shows the name and how to resize. While the pointer is
+     * over the handle, it says to drag the handle. While the handle has keyboard
+     * focus, it says which arrow keys to press, which fit `location`. Screen
+     * readers read the arrow keys as the description of the handle.
      * @exampleComponent limel-example-resize-handle-basic
      * @exampleComponent limel-example-resize-handle-locations
      * @exampleComponent limel-example-resize-handle-grab-area
+     * @exampleComponent limel-example-resize-handle-accessibility
      * @private 
      */
     interface HTMLLimelResizeHandleElement extends Components.LimelResizeHandle, HTMLStencilElement {
@@ -6701,6 +6723,7 @@ declare global {
      * @exampleComponent limel-example-side-panel-header-actions
      * @exampleComponent limel-example-side-panel-stacking
      * @exampleComponent limel-example-side-panel-full-screen
+     * @exampleComponent limel-example-side-panel-accessibility
      * @private 
      */
     interface HTMLLimelSidePanelElement extends Components.LimelSidePanel, HTMLStencilElement {
@@ -10786,16 +10809,25 @@ declare namespace LocalJSX {
      * the edge that `location` names. Give the element a `position` other than
      * `static`. If other content covers the handle, also give the element
      * `isolation: isolate`.
+     * ## Accessibility
+     * The user reaches the handle with the <kbd>Tab</kbd> key. The handle is named
+     * "Resize" followed by `resizableRegionLabel`, for example "Resize side
+     * panel". A tooltip shows the name and how to resize. While the pointer is
+     * over the handle, it says to drag the handle. While the handle has keyboard
+     * focus, it says which arrow keys to press, which fit `location`. Screen
+     * readers read the arrow keys as the description of the handle.
      * @exampleComponent limel-example-resize-handle-basic
      * @exampleComponent limel-example-resize-handle-locations
      * @exampleComponent limel-example-resize-handle-grab-area
+     * @exampleComponent limel-example-resize-handle-accessibility
      * @private 
      */
     interface LimelResizeHandle {
         /**
-          * The accessible name of the handle.
+          * Defines the language for translations.
+          * @default 'en'
          */
-        "label"?: string;
+        "language"?: Languages;
         /**
           * The location of the handle relative to the resizable element.
           * @default 'left'
@@ -10817,6 +10849,10 @@ declare namespace LocalJSX {
           * Emitted after the last `changeSize` when the user has finished a resize: when the pointer is released after it has moved, and after each arrow key press. Pressing and releasing the handle without moving it emits nothing.
          */
         "onEndResize"?: (event: LimelResizeHandleCustomEvent<void>) => void;
+        /**
+          * The name of the region that the handle resizes, for example `side panel`. The accessible name of the handle is "Resize" followed by this name, for example "Resize side panel". When no name is set, the handle is named "Resize this region".  Write the name in the language that is set in `language`, in the form that reads right after "Resize", for example `side panel` in English and `sidopanelen` in Swedish.
+         */
+        "resizableRegionLabel"?: string;
         /**
           * The size of the element, in pixels: the width when `location` is `left` or `right`, and the height when it is `top` or `bottom`.
          */
@@ -10977,6 +11013,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-side-panel-header-actions
      * @exampleComponent limel-example-side-panel-stacking
      * @exampleComponent limel-example-side-panel-full-screen
+     * @exampleComponent limel-example-side-panel-accessibility
      * @private 
      */
     interface LimelSidePanel {
@@ -11001,9 +11038,14 @@ declare namespace LocalJSX {
          */
         "fullScreen"?: boolean;
         /**
-          * Accessible name of the panel. Screen readers announce it. Set it to something that tells the user what the panel is for.
+          * Accessible name of the panel. Screen readers announce it. Set it to something that tells the user what the panel is for.  The resize handle is named after it, for example "Resize Customer details panel". When no label is set, the handle is named "Resize side panel".
          */
         "label"?: string;
+        /**
+          * Defines the language for translations.
+          * @default 'en'
+         */
+        "language"?: Languages;
         /**
           * Emitted when the user has finished a resize that changed the width. The detail is the new width in pixels. The panel already uses the new width. Store the value to restore the width with `--side-panel-width` the next time the panel opens.
          */
@@ -11020,11 +11062,6 @@ declare namespace LocalJSX {
           * Emitted when a back of the stack is clicked. The detail is the index of its entry in `stack`.
          */
         "onSelectStackEntry"?: (event: LimelSidePanelCustomEvent<number>) => void;
-        /**
-          * Label of the resize handle. Used as the accessible name.
-          * @default 'Resize'
-         */
-        "resizeLabel"?: string;
         /**
           * The panels in the stack, outermost first. The last entry is the panel that is displayed. Its heading, subheading and icon are shown in the header. The other entries are shown as backs behind the panel.
           * @default []
@@ -12315,7 +12352,8 @@ declare namespace LocalJSX {
     }
     interface LimelResizeHandleAttributes {
         "location": 'left' | 'right' | 'top' | 'bottom';
-        "label": string;
+        "resizableRegionLabel": string;
+        "language": Languages;
         "value": number;
         "min": number;
         "max": number;
@@ -12340,8 +12378,8 @@ declare namespace LocalJSX {
     }
     interface LimelSidePanelAttributes {
         "label": string;
+        "language": Languages;
         "closeLabel": string;
-        "resizeLabel": string;
         "closeOnEscape": boolean;
         "fullScreen": boolean;
     }
@@ -13737,9 +13775,17 @@ declare module "@stencil/core" {
              * the edge that `location` names. Give the element a `position` other than
              * `static`. If other content covers the handle, also give the element
              * `isolation: isolate`.
+             * ## Accessibility
+             * The user reaches the handle with the <kbd>Tab</kbd> key. The handle is named
+             * "Resize" followed by `resizableRegionLabel`, for example "Resize side
+             * panel". A tooltip shows the name and how to resize. While the pointer is
+             * over the handle, it says to drag the handle. While the handle has keyboard
+             * focus, it says which arrow keys to press, which fit `location`. Screen
+             * readers read the arrow keys as the description of the handle.
              * @exampleComponent limel-example-resize-handle-basic
              * @exampleComponent limel-example-resize-handle-locations
              * @exampleComponent limel-example-resize-handle-grab-area
+             * @exampleComponent limel-example-resize-handle-accessibility
              * @private 
              */
             "limel-resize-handle": LocalJSX.IntrinsicElements["limel-resize-handle"] & JSXBase.HTMLAttributes<HTMLLimelResizeHandleElement>;
@@ -13823,6 +13869,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-side-panel-header-actions
              * @exampleComponent limel-example-side-panel-stacking
              * @exampleComponent limel-example-side-panel-full-screen
+             * @exampleComponent limel-example-side-panel-accessibility
              * @private 
              */
             "limel-side-panel": LocalJSX.IntrinsicElements["limel-side-panel"] & JSXBase.HTMLAttributes<HTMLLimelSidePanelElement>;

package/dist/types/translations/da.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'snackbar.dismiss': string;
     'file.drag-and-drop-tips': string;

package/dist/types/translations/de.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'snackbar.dismiss': string;
     'file.drag-and-drop-tips': string;

package/dist/types/translations/en.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'snackbar.dismiss': string;
     'file.drag-and-drop-tips': string;

package/dist/types/translations/fi.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'snackbar.dismiss': string;
     'file.drag-and-drop-tips': string;

package/dist/types/translations/fr.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'snackbar.dismiss': string;
     'file.drag-and-drop-tips': string;

package/dist/types/translations/nl.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'snackbar.dismiss': string;
     'file.drag-and-drop-tips': string;

package/dist/types/translations/no.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'file.drag-and-drop-tips': string;
     'file.optimizing': string;

package/dist/types/translations/sv.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'snackbar.dismiss': string;
     'file.drag-and-drop-tips': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "40.13.0",
+  "version": "40.14.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -52,8 +52,8 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@commitlint/cli": "^21.2.3",
-    "@commitlint/config-conventional": "^21.2.3",
+    "@commitlint/cli": "^21.2.4",
+    "@commitlint/config-conventional": "^21.2.4",
     "@limetech/eslint-config": "^5.0.3",
     "@microsoft/api-extractor": "^7.59.4",
     "@playwright/test": "1.64.1",
@@ -93,7 +93,7 @@
     "morphdom": "^2.7.8",
     "number-abbreviate": "^2.0.0",
     "parse-css-color": "^0.2.1",
-    "postal-mime": "^4.0.8",
+    "postal-mime": "^4.0.11",
     "prettier": "^3.9.10",
     "prosemirror-example-setup": "^1.2.3",
     "prosemirror-markdown": "^1.13.8",

package/dist/lime-elements/p-26813b2c.entry.js

@@ -1 +0,0 @@
-import{r as e,h as t,H as o,a as i}from"./p-BU9IJqli.js";import{m as a,r}from"./p-CIf8aGSd.js";import{d as n,g as s}from"./p-CgNJbSP4.js";const l=class{constructor(t){e(this,t),this.primary=!1,this.outlined=!1,this.disabled=!1,this.loading=!1,this.loadingFailed=!1,this.justLoaded=!1,this.filterClickWhenDisabled=e=>{this.disabled&&e.preventDefault()}}componentWillLoad(){a(this.host)}disconnectedCallback(){r(this.host)}render(){return t(o,{key:"0c29dc9e776e7f8847c3c2b72c901f4c48614fe7",onClick:this.filterClickWhenDisabled},t("button",{key:"4b4ce07c60d70ee0586ede555a354f44a8c28502",class:{loading:this.loading,"just-loaded":this.justLoaded&&!this.loadingFailed,"just-failed":this.justLoaded&&this.loadingFailed,outlined:this.outlined},disabled:this.disabled||this.loading,"aria-busy":this.loading?"true":"false","aria-live":"polite"},this.renderIcon(this.icon),this.renderLabel(),this.renderSpinner(),t("svg",{key:"ec49bd0ef8920fd33b6db0d5e7b1569f756c5eeb",viewBox:"0 0 30 30"},this.renderLoadingIcons())))}loadingWatcher(e,t){this.hasFinishedLoading(e,t)?this.handleLoadingFinished():e&&this.handleLoadingStarted()}hasFinishedLoading(e,t){return t&&!e}handleLoadingFinished(){this.justLoaded=!0,this.justLoadedTimeout=window.setTimeout((()=>{this.justLoaded=!1}),2e3)}handleLoadingStarted(){this.justLoaded=!1,window.clearTimeout(this.justLoadedTimeout)}renderLoadingIcons(){return this.loadingFailed?[t("line",{x1:"9",y1:"9",x2:"21",y2:"21"}),t("line",{x1:"21",y1:"9",x2:"9",y2:"21"})]:[t("line",{x1:"8",y1:"14",x2:"15",y2:"20"}),t("line",{x1:"23",y1:"9",x2:"14",y2:"20"})]}renderIcon(e){const o=s(e);if(!o)return;const i=n(e);let a;return this.label||i||console.warn("⚠️ Accessibility warning: `limel-button` has no `label` and its `icon` has no `title`. This creates an inaccessible button for screen reader users. Please add either a `label`, a `title` to the `icon`, or use a `limel-tooltip`. See https://lundalogik.github.io/lime-elements/versions/latest/#/component/limel-button/ for more information."),"object"==typeof e&&(a=e.color),t("limel-icon",Object.assign({},{role:i?"img":"presentation",name:o,"aria-label":i,"aria-hidden":i?null:"true",style:{color:a}}))}renderLabel(){if(this.label)return t("span",{class:"label"},this.label)}renderSpinner(){if(this.loading)return t("limel-spinner",{limeBranded:!1})}static get delegatesFocus(){return!0}get host(){return i(this)}static get watchers(){return{loading:[{loadingWatcher:0}]}}};l.style='@charset "UTF-8";@keyframes reduced-presence{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.7)}}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded){animation:reduced-presence 0.3s ease forwards;transition:padding 0.3s ease, min-width 0.3s ease;transition-delay:0.3s;padding:0;min-width:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .label{transition:font-size 0.8s ease;transition-delay:0.3s;font-size:0;opacity:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-icon,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-spinner,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) svg,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .icon{transition:all 0.3s ease;transition-delay:0.3s;opacity:0;width:0;height:0}:host{display:inline-block}:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button.mdc-button{font-family:inherit}button{--_primary-color:var(       --lime-primary-color,       var(--limel-theme-primary-color)   );display:flex;align-items:center;justify-content:center;gap:0.125rem;border:none;border-radius:0.4rem;padding-top:0;padding-right:var(--button-padding-right, 0.5rem);padding-bottom:0;padding-left:var(--button-padding-left, 0.5rem);min-height:2.25rem;width:100%}button:not(:disabled){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);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}button:not(:disabled):hover,button:not(:disabled):focus,button:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}button:not(:disabled):hover,button:not(:disabled):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button:not(:disabled):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button:not(:disabled):hover,button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:disabled{cursor:not-allowed}:host(limel-button[primary]) button:not(:disabled){color:var(--lime-on-primary-color, var(--limel-theme-on-primary-color));background-color:var(--_primary-color)}:host(limel-button[primary]) button:disabled{background-color:color-mix(in srgb, var(--_primary-color), transparent 80%)}:host(limel-button:not([primary])) button:not(:disabled){color:var(--_primary-color)}:host(limel-button:not([primary])) button:disabled.outlined{color:color-mix(in srgb, var(--_primary-color), transparent 60%);border-color:color-mix(in srgb, var(--_primary-color), transparent 70%)}:host(limel-button:not([primary])) button:disabled:not(.outlined){color:rgba(var(--contrast-1100), 0.37);background-color:rgba(var(--contrast-900), 0.1)}.label{font-size:var(--limel-theme-default-font-size);font-weight:600;letter-spacing:0.03125rem;padding:0 0.25rem}limel-spinner{position:absolute}limel-icon{width:1.25rem;flex-shrink:0;vertical-align:top}svg{height:1.875rem;opacity:0;pointer-events:none;position:absolute;width:1.875rem}svg line{stroke:rgb(var(--contrast-600));stroke-width:2}limel-icon,.label,limel-spinner,svg{transition:opacity 300ms ease-in-out}.loading limel-icon,.loading .label{opacity:0}.loading limel-spinner{opacity:1}.just-loaded limel-icon,.just-loaded .label,.just-failed limel-icon,.just-failed .label{opacity:0}.just-loaded svg,.just-failed svg{opacity:1}.just-failed{background-color:var(--limel-theme-error-color) !important;animation:shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.outlined{border:1px solid;border-color:var(--_primary-color)}@keyframes shake{10%,90%{transform:translate3d(-0.0625rem, 0, 0)}20%,80%{transform:translate3d(0.125rem, 0, 0)}30%,50%,70%{transform:translate3d(-0.1875rem, 0, 0)}40%,60%{transform:translate3d(0.1875rem, 0, 0)}}';export{l as limel_button}

package/dist/lime-elements/p-4f58c6b3.entry.js

@@ -1 +0,0 @@
-import{r as e,c as t,h as i,H as o,a}from"./p-BU9IJqli.js";import{E as r}from"./p-Bu6-QXrA.js";import{c as s}from"./p-BrjD-ITe.js";const n=[],l={newTab:"up_right_arrow",expand:"expand"};function c(e){if(e.href&&"newTab"===e.type)return"_blank"}function d(e){e.stopPropagation()}const h=class{constructor(o){e(this,o),this.close=t(this,"close",7),this.selectAction=t(this,"selectAction",7),this.changeWidth=t(this,"changeWidth",7),this.selectStackEntry=t(this,"selectStackEntry",7),this.closeLabel="Close",this.stack=[],this.actions=[],this.resizeLabel="Resize",this.closeOnEscape=!0,this.fullScreen=!1,this.closeButtonId=s(),this.actionIdPrefix=s(),this.backIdPrefix=s(),this.focusCloseButtonAfterRender=!1,this.renderAction=(e,t)=>{const o=`${this.actionIdPrefix}-${t}`;return i(e.href?"a":"button",{class:e.type,id:o,href:e.href,target:c(e),"aria-label":e.label,onClick:this.handleClickAction(e)},i("limel-icon",{name:l[e.type],"aria-hidden":"true"}),i("limel-tooltip",{elementId:o,label:e.label,helperLabel:e.helperLabel}))},this.renderBack=(e,t)=>{var o;const a=`${this.backIdPrefix}-${t}`;return i("button",{class:"back",id:a,style:{width:null===(o=this.panel)||void 0===o?void 0:o.style.width},"aria-label":e.heading,onClick:this.handleClickBack(t)},i("span",{class:"back-toolbar"}),i("span",{class:"back-band",style:{"background-color":e.color}}),i("limel-tooltip",{elementId:a,label:e.heading,helperLabel:e.subheading,openDirection:"left"}))},this.stopContentEvents=e=>{null==e||e.addEventListener("close",d),null==e||e.addEventListener("changeWidth",d)},this.restoreFocus=()=>{const e=!document.activeElement||document.activeElement===document.body;if(this.host.isConnected||!e)return;const t=this.focusedBefore;this.focusedBefore=void 0,(null==t?void 0:t.isConnected)&&t.focus()},this.setPanel=e=>{this.panel=e},this.setMinLimit=e=>{this.minLimit=e},this.setMaxLimit=e=>{this.maxLimit=e},this.handleKeyDown=e=>{this.closeOnEscape&&e.key===r&&!e.defaultPrevented&&this.isLastOpened()&&(e.preventDefault(),this.close.emit())},this.handleChangeSize=e=>{this.rememberWidthBeforeResize(),this.setWidth(e.detail)},this.handleEndResize=()=>{if(!this.isResizing())return;const e=this.widthBeforeResize;this.widthBeforeResize=void 0,this.keepClampedWidth(),this.updateWidthRange(),this.emitWidthIfChanged(e)},this.handleSizeChange=e=>{e.every(this.isMeasured)||this.updateWidthRange()},this.isMeasured=e=>{var t;return e.target===this.panel&&Math.round(e.borderBoxSize[0].inlineSize)===(null===(t=this.widthRange)||void 0===t?void 0:t.now)},this.updateWidthRange=()=>{this.isResizing()||(this.widthRange=this.measureWidthRange())},this.handleClickAction=e=>t=>{var i;this.selectAction.emit({id:null!==(i=e.id)&&void 0!==i?i:e.type,event:t})},this.handleClickBack=e=>()=>{this.selectStackEntry.emit(e)},this.handleClickClose=()=>{this.close.emit()}}connectedCallback(){n.push(this),window.addEventListener("keydown",this.handleKeyDown),this.rememberFocusedElement(),this.observeWidth()}componentDidLoad(){this.observeWidth(),this.moveFocusIntoPanel()}disconnectedCallback(){this.widthBeforeResize=void 0,this.stopObservingWidth(),window.removeEventListener("keydown",this.handleKeyDown),this.removeFromOpenPanels(),queueMicrotask(this.restoreFocus)}handleBacksChange(){this.focusCloseButtonAfterRender=this.isFocusedBackRemoved()}componentDidRender(){var e;this.focusCloseButtonAfterRender&&(this.focusCloseButtonAfterRender=!1,null===(e=this.host.shadowRoot.querySelector("button.close"))||void 0===e||e.focus())}render(){return i(o,{key:"ca07c3557df3be7e026a95da296689e1e3c0cf41"},i("section",{key:"610a8b47c7b34a6d4cb4d253d40cff889ea4c73d",ref:this.setPanel,role:"dialog","aria-label":this.label,tabindex:"-1"},this.renderHandle(),i("div",{key:"c9ddb80456ac82cb39801943b55fcd4de3928852",class:"content"},i("div",{key:"f1430da0610a4fe71363ead5c7730d627a8a935c",class:"toolbar"},this.renderCloseButton(),this.renderActions()),this.renderHeader(),this.renderBody())),this.renderStack(),i("span",{key:"c7d204c8b323f88962508a4c54493717fe347c8e","data-limit":"min",ref:this.setMinLimit}),i("span",{key:"2a7fa787fd0d4c777f90b2ef7dff1d9316108416","data-limit":"max",ref:this.setMaxLimit}))}renderCloseButton(){return i("button",{class:"close",id:this.closeButtonId,"aria-label":this.closeLabel,onClick:this.handleClickClose},i("limel-icon",{name:"multiply","aria-hidden":"true"}),i("limel-tooltip",{elementId:this.closeButtonId,label:this.closeLabel}))}renderActions(){if(0!==this.actions.length)return i("div",{class:"actions"},this.actions.map(((e,t)=>this.renderAction(e,t))))}renderStack(){const e=this.stack.slice(0,-1);if(!this.fullScreen&&0!==e.length)return i("div",{class:"stack"},e.map(((e,t)=>this.renderBack(e,t))))}isFocusedBackRemoved(){const e=[...this.host.shadowRoot.querySelectorAll(".back")].indexOf(this.host.shadowRoot.activeElement);return-1!==e&&(this.fullScreen||e>=this.stack.length-1)}renderHeader(){const e=this.stack.at(-1);if(e)return i("limel-header",{class:{header:!0,"has-color":!!e.color},style:{"--header-background-color":e.color},icon:e.icon,heading:e.heading,subheading:e.subheading},i("div",{class:"header-actions",slot:"actions",ref:this.stopContentEvents},i("slot",{name:"header-actions"})))}renderHandle(){var e,t,o;if(!this.fullScreen)return i("limel-resize-handle",{class:"handle",label:this.resizeLabel,value:null===(e=this.widthRange)||void 0===e?void 0:e.now,min:null===(t=this.widthRange)||void 0===t?void 0:t.min,max:null===(o=this.widthRange)||void 0===o?void 0:o.max,onChangeSize:this.handleChangeSize,onEndResize:this.handleEndResize})}renderBody(){return i("div",{class:"body",ref:this.stopContentEvents},i("slot",null))}stopContentEventAtHost(e){e.target!==this.host&&e.stopImmediatePropagation()}moveFocusIntoPanel(){this.panel.focus({preventScroll:!0})}rememberFocusedElement(){const e=function(){var e;let t=document.activeElement;for(;null===(e=null==t?void 0:t.shadowRoot)||void 0===e?void 0:e.activeElement;)t=t.shadowRoot.activeElement;return t}();e&&e!==document.body&&(this.focusedBefore=e)}removeFromOpenPanels(){const e=n.indexOf(this);-1!==e&&n.splice(e,1)}isLastOpened(){return n.at(-1)===this}setWidth(e){for(const t of this.getPanelBoxes())t.style.width=`${e}px`}getPanelBoxes(){const e=this.host.shadowRoot.querySelectorAll(".back");return[this.panel,...e]}rememberWidthBeforeResize(){this.isResizing()||(this.widthBeforeResize=this.currentWidth())}isResizing(){return void 0!==this.widthBeforeResize}keepClampedWidth(){this.setWidth(this.currentWidth())}emitWidthIfChanged(e){const t=this.currentWidth();t!==e&&this.changeWidth.emit(t)}observeWidth(){if(this.stopObservingWidth(),this.panel){this.widthObserver=new ResizeObserver(this.handleSizeChange);for(const e of[this.panel,this.minLimit,this.maxLimit])e&&this.widthObserver.observe(e)}}stopObservingWidth(){var e;null===(e=this.widthObserver)||void 0===e||e.disconnect(),this.widthObserver=void 0}measureWidthRange(){const e=this.minLimit.offsetWidth,t=Math.max(e,this.maxLimit.offsetWidth);return{now:Math.round(this.currentWidth()),min:Math.round(e),max:Math.round(t)}}currentWidth(){return this.panel.offsetWidth}get host(){return a(this)}static get watchers(){return{stack:[{handleBacksChange:0}],fullScreen:[{handleBacksChange:0}]}}};h.style='@charset "UTF-8";:host(limel-side-panel){--_side-panel-width:var(--side-panel-width, 37.5rem);--_side-panel-min-width:var(--side-panel-min-width, 25rem);--_side-panel-top-inset:var(--side-panel-top-inset, 0px);--_side-panel-right-inset:var(--side-panel-right-inset, 0px);--_side-panel-bottom-inset:var(--side-panel-bottom-inset, 0px);--_side-panel-z-index:var(--side-panel-z-index, 6);--_side-panel-dropdown-z-index:var(--dropdown-z-index);--_side-panel-popover-z-index:var(--popover-z-index);--_side-panel-tooltip-z-index:var(--tooltip-z-index)}@keyframes show-side-panel{0%{transform:translate3d(12.5rem, 0, 0) scale(0.95);opacity:0}60%{opacity:1}100%{transform:translate3d(0, 0, 0) scale(1)}}section{position:absolute;top:var(--_side-panel-top-inset);right:var(--_side-panel-right-inset);bottom:var(--_side-panel-bottom-inset);margin:0.5rem;width:var(--_side-panel-width);min-width:min(var(--_side-panel-min-width), 100% - 1rem);max-width:min(100% - 1rem - 3rem, 60%);max-height:100%;border-radius:1rem;z-index:var(--_side-panel-z-index);display:flex;flex-direction:column;isolation:isolate;box-shadow:var(--shadow-depth-64);transform-origin:left center;transition:background-color 0.5s ease, transform 0.3s ease, opacity 0.2s ease, right 0.2s ease;animation:show-side-panel 0.46s cubic-bezier(0.08, 0.54, 0.06, 1.11) forwards}section:focus{outline:none}@media (prefers-reduced-motion){section{animation:none;transition:none}}.content,.stack{--dropdown-z-index:var(       --_side-panel-dropdown-z-index,       calc(var(--_side-panel-z-index) + 1)   );--popover-z-index:var(       --_side-panel-popover-z-index,       calc(var(--_side-panel-z-index) + 1)   );--tooltip-z-index:var(       --_side-panel-tooltip-z-index,       calc(var(--_side-panel-z-index) + 1)   )}:host([full-screen]) section{left:0;width:100%;min-width:100%;max-width:100%;margin:0}:host([full-screen]) section,:host([full-screen]) .content{border-radius:0}.content{display:flex;flex-direction:column;flex-grow:1;min-height:0;overflow:hidden;border-radius:1rem;background-color:rgb(var(--contrast-100))}.toolbar{flex-shrink:0;display:flex;align-items:center;gap:0.25rem;box-sizing:border-box;min-height:2.375rem;padding:0.25rem 0.125rem;background-color:rgb(var(--contrast-300))}.actions{display:flex;align-items:center;gap:0.25rem;margin-left:auto}.actions>*{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;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);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}.actions>*:hover,.actions>*:focus,.actions>*:focus-visible{will-change:color, background-color, box-shadow, transform}.actions>*:hover,.actions>*:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.actions>*:hover{box-shadow:var(--button-shadow-hovered)}.actions>*:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.actions>*:hover,.actions>*:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.actions>*:focus{outline:none}.actions>*:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.actions>*{isolation:isolate;position:relative;display:flex;justify-content:center;align-items:center;width:1.875rem;height:1.875rem;border-radius:50%}.actions>* limel-icon{width:1.25rem;transition:transform 0.2s ease, color 0.2s ease}.actions>*{--_side-panel-action-background-color:rgb(var(--contrast-300))}.actions>*:hover,.actions>*:focus-visible{--_side-panel-action-background-color:var(       --lime-elevated-surface-background-color   )}.actions>*:hover limel-icon{color:var(--mdc-theme-primary)}.newTab limel-icon{transition:transform 0.2s ease;transform:scale(0.8);z-index:3}.newTab:before{z-index:2}.newTab:after{z-index:1}.newTab:before,.newTab:after{content:"";transition:transform 0.2s ease, outline-color 0.2s ease;position:absolute;width:0.875rem;height:0.875rem;outline:1.5px solid rgb(var(--contrast-900));border-radius:1px;background-color:var(--_side-panel-action-background-color)}.newTab:hover limel-icon{transform:translate3d(-0.1rem, 0.1rem, 0) scale(1)}.newTab:hover:before{transform:translate3d(0.125rem, -0.125rem, 0);outline-color:rgb(var(--contrast-1000));box-shadow:var(--shadow-depth-8)}.newTab:hover:after{transform:translate3d(-0.15rem, 0.15rem, 0) scale(0.9);outline-color:rgb(var(--contrast-700))}.expand:after{transition:transform 0.2s ease;content:"";position:absolute;z-index:1;background-color:var(--_side-panel-action-background-color);width:0.75rem;height:0.75rem}.expand:hover:after{transform:scale(0.5)}.expand:hover limel-icon{transform:scale(1.18)}.close{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;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);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}.close:hover,.close:focus,.close:focus-visible{will-change:color, background-color, box-shadow, transform}.close:hover,.close:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.close:hover{box-shadow:var(--button-shadow-hovered)}.close:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.close:hover,.close:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.close:focus{outline:none}.close:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.close{isolation:isolate;position:relative;display:flex;justify-content:center;align-items:center;width:1.875rem;height:1.875rem;border-radius:50%}.close limel-icon{width:1.25rem;transition:transform 0.2s ease, color 0.2s ease}.close:before,.close:after{content:"";position:absolute;z-index:-1;inset:0;border-radius:50%;opacity:0;transition-delay:0.1s}.close:before{transition:transform 0.3s ease, opacity 0.3s ease;background-color:rgb(var(--color-orange-dark))}.close:after{transition:transform 0.6s ease, opacity 0.6s ease;background-color:rgb(var(--color-orange-light))}.close:hover limel-icon{color:rgb(var(--color-white));transform:scale(0.7) rotate(90deg)}.close:hover:before{opacity:1;transform:scale(0.4)}.close:hover:after{opacity:0.4;transform:scale(0.6)}.header{--side-panel-header-text-color:var(--limel-theme-on-surface-color);--header-top-right-left-border-radius:0;flex-shrink:0;min-height:2.5rem;padding:0.125rem 0.75rem 0.125rem 0.25rem;background-color:var(--header-background-color, rgb(var(--contrast-200)))}.header-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0;max-width:50%;overflow:hidden;box-sizing:border-box;max-height:calc(1.25rem + 1rem + 2 * 0.25rem);padding:0.25rem;margin:-0.25rem -0.25rem -0.25rem auto;color:var(--side-panel-header-text-color);text-shadow:none}.has-color{--side-panel-header-text-color:rgb(var(--color-white));--header-heading-color:var(--side-panel-header-text-color);--header-subheading-color:var(--side-panel-header-text-color);text-shadow:0 0 1px rgba(var(--color-black), 0.2), 0 0 0.25rem rgba(var(--color-black), 0.2)}.body{flex-grow:1;min-height:0;display:flex;flex-direction:column;overflow:hidden auto}.handle{position:absolute;z-index:1;top:calc(2.375rem + 0.5rem);bottom:1rem;left:calc(0.5rem / -2);width:0.5rem}[data-limit]{position:absolute;visibility:hidden;pointer-events:none;height:0}[data-limit=min]{width:min(var(--_side-panel-min-width), 100% - 1rem)}[data-limit=max]{width:min(100% - 1rem - 3rem, 60%)}.stack{position:absolute;inset:0;z-index:calc(var(--_side-panel-z-index) - 1);pointer-events:none}.back{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;position:absolute;top:var(--_side-panel-top-inset);right:var(--_side-panel-right-inset);bottom:var(--_side-panel-bottom-inset);margin:0.5rem;width:var(--_side-panel-width);min-width:min(var(--_side-panel-min-width), 100% - 1rem);max-width:min(100% - 1rem - 3rem, 60%);max-height:100%;border-radius:1rem}.back:focus{outline:none}.back:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.back{pointer-events:auto;cursor:pointer;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;background-color:rgb(var(--contrast-100));box-shadow:var(--shadow-depth-16);transform-origin:left center;transition:transform 0.3s ease, box-shadow 0.2s ease, background-color 0.2s ease, right 0.2s ease}@media (prefers-reduced-motion){.back{transition:none}}.back:nth-last-child(1){transform:translate3d(-1.4rem, 0, 0) scale(0.98)}.back:nth-last-child(2){transform:translate3d(-2.3rem, 0, 0) scale(0.96)}.back:nth-last-child(3){transform:translate3d(-3rem, 0, 0) scale(0.94)}.back:nth-last-child(n+4){transform:translate3d(-3.4rem, 0, 0) scale(0.92)}.back:hover{box-shadow:var(--shadow-depth-64)}.back:hover,.back:focus-visible{right:calc(var(--_side-panel-right-inset) + 0.25rem);background-color:var(--lime-elevated-surface-background-color)}.stack:has(.back:hover) .back:nth-last-child(2){transform:translate3d(-2.6rem, 0, 0) scale(0.96)}.stack:has(.back:hover) .back:nth-last-child(3){transform:translate3d(-3.8rem, 0, 0) scale(0.94)}.stack:has(.back:hover) .back:nth-last-child(n+4){transform:translate3d(-4.9rem, 0, 0) scale(0.92)}.back-toolbar,.back-band{flex-shrink:0}.back-toolbar{height:2.375rem;background-color:rgb(var(--contrast-300))}.back-band{height:2.5rem;background-color:rgb(var(--contrast-200))}';export{h as limel_side_panel}