@limetech/lime-elements 40.10.1 → 40.11.0

package/dist/types/components.d.ts

@@ -49,6 +49,7 @@ import { ContentType } from "./components/text-editor/prosemirror-adapter/editor
 import { EditorImage, EditorMetadata, ImageInserter, InlineImages, TriggerCharacter, TriggerEventDetail } from "./components/text-editor/text-editor.types";
 import { EditorUiType } from "./components/text-editor/types";
 import { Option } from "./components/select/option.types";
+import { SidePanelAction, SidePanelActionSelect, SidePanelEntry } from "./components/side-panel/side-panel.types";
 import { SpinnerSize } from "./components/spinner/spinner.types";
 import { Tab } from "./components/tab-bar/tab.types";
 import { Column, ColumnAggregate, ColumnSorter, RowData, RowReorderEvent, TableParams } from "./components/table/table.types";
@@ -98,6 +99,7 @@ export { ContentType } from "./components/text-editor/prosemirror-adapter/editor
 export { EditorImage, EditorMetadata, ImageInserter, InlineImages, TriggerCharacter, TriggerEventDetail } from "./components/text-editor/text-editor.types";
 export { EditorUiType } from "./components/text-editor/types";
 export { Option } from "./components/select/option.types";
+export { SidePanelAction, SidePanelActionSelect, SidePanelEntry } from "./components/side-panel/side-panel.types";
 export { SpinnerSize } from "./components/spinner/spinner.types";
 export { Tab } from "./components/tab-bar/tab.types";
 export { Column, ColumnAggregate, ColumnSorter, RowData, RowReorderEvent, TableParams } from "./components/table/table.types";
@@ -3605,7 +3607,7 @@ export namespace Components {
     }
     /**
      * A resizable panel that is displayed on top of the right side of the page.
-     * The content is placed in the default slot, below a toolbar with a close button.
+     * The content is placed in the default slot, below a toolbar and a header.
      * The panel is positioned relative to its nearest positioned ancestor. Set
      * `position: relative` on that element. Use `--side-panel-top-inset`,
      * `--side-panel-right-inset` and `--side-panel-bottom-inset` to keep parts of
@@ -3620,12 +3622,63 @@ export namespace Components {
      * The user can resize the panel by dragging its left edge, or with the arrow
      * keys. The panel emits `changeWidth` when a resize is finished.
      * See the examples for how closing and resizing work in detail.
+     * ## Header
+     * The header shows the heading, subheading and icon of the last entry in
+     * `stack`. When the entry has a `color`, the header gets that background color,
+     * and the headings are white with a text shadow. When `stack` is empty, the
+     * panel has no header.
+     * Put controls for the header, for example a follow button or a menu, in the
+     * `header-actions` slot. They are shown at the right end of the header. When
+     * `stack` is empty, there is no header, and the slot content is not shown.
+     * The slot is for small controls. It is at most half as wide as the header,
+     * and at most as tall as the heading and subheading together. Larger content
+     * is cut off, so that the header keeps its size.
+     * The slot content is not tied to an entry in `stack`. When the last entry
+     * changes, the consumer must also change the slot content.
+     * The slot content keeps its own colors. Use `--side-panel-header-text-color`
+     * to match the text color of the header. It is white when the header has a
+     * `color`. It can also be used as the `color` of an `Icon`.
+     * ## Actions
+     * The toolbar has a close button on the left. Other buttons are set with
+     * `actions`, and are shown on the right. The `type` of an action decides its
+     * icon. When the user clicks an action, the panel emits `selectAction` with the
+     * `id` of the action and the click event. The consumer decides what the action
+     * does.
+     * An action with an `href` is a link, so the user can open it in a new tab.
+     * To handle the navigation in another way, for example with the router of the
+     * application, call `preventDefault` on the click event in `selectAction`. Do
+     * this only for a plain click with the primary button. Let the browser handle
+     * all other clicks, so that Ctrl-click and Cmd-click still open the link in a
+     * new tab:
+     * ```ts
+     * function handleSelectAction(event: CustomEvent<SidePanelActionSelect>) {
+     *     const click = event.detail.event;
+     *     const isPlainClick =
+     *         click.button === 0 &&
+     *         !click.metaKey &&
+     *         !click.ctrlKey &&
+     *         !click.shiftKey &&
+     *         !click.altKey;
+     *     if (!isPlainClick) {
+     *         return;
+     *     }
+     *     click.preventDefault();
+     *     router.navigate(event.detail.id);
+     * }
+     * ```
      * @exampleComponent limel-example-side-panel-basic
      * @exampleComponent limel-example-side-panel-insets
      * @exampleComponent limel-example-side-panel-escape
+     * @exampleComponent limel-example-side-panel-actions
+     * @exampleComponent limel-example-side-panel-header-actions
      * @private 
      */
     interface LimelSidePanel {
+        /**
+          * Buttons in the toolbar, to the right of the close button.
+          * @default []
+         */
+        "actions": SidePanelAction[];
         /**
           * Label of the close button. Shown as a tooltip and used as the accessible name.
           * @default 'Close'
@@ -3645,6 +3698,11 @@ export namespace Components {
           * @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.
+          * @default []
+         */
+        "stack": SidePanelEntry[];
     }
     /**
      * @exampleComponent limel-example-slider-basic
@@ -6590,11 +6648,12 @@ declare global {
     };
     interface HTMLLimelSidePanelElementEventMap {
         "close": void;
+        "selectAction": SidePanelActionSelect;
         "changeWidth": number;
     }
     /**
      * A resizable panel that is displayed on top of the right side of the page.
-     * The content is placed in the default slot, below a toolbar with a close button.
+     * The content is placed in the default slot, below a toolbar and a header.
      * The panel is positioned relative to its nearest positioned ancestor. Set
      * `position: relative` on that element. Use `--side-panel-top-inset`,
      * `--side-panel-right-inset` and `--side-panel-bottom-inset` to keep parts of
@@ -6609,9 +6668,55 @@ declare global {
      * The user can resize the panel by dragging its left edge, or with the arrow
      * keys. The panel emits `changeWidth` when a resize is finished.
      * See the examples for how closing and resizing work in detail.
+     * ## Header
+     * The header shows the heading, subheading and icon of the last entry in
+     * `stack`. When the entry has a `color`, the header gets that background color,
+     * and the headings are white with a text shadow. When `stack` is empty, the
+     * panel has no header.
+     * Put controls for the header, for example a follow button or a menu, in the
+     * `header-actions` slot. They are shown at the right end of the header. When
+     * `stack` is empty, there is no header, and the slot content is not shown.
+     * The slot is for small controls. It is at most half as wide as the header,
+     * and at most as tall as the heading and subheading together. Larger content
+     * is cut off, so that the header keeps its size.
+     * The slot content is not tied to an entry in `stack`. When the last entry
+     * changes, the consumer must also change the slot content.
+     * The slot content keeps its own colors. Use `--side-panel-header-text-color`
+     * to match the text color of the header. It is white when the header has a
+     * `color`. It can also be used as the `color` of an `Icon`.
+     * ## Actions
+     * The toolbar has a close button on the left. Other buttons are set with
+     * `actions`, and are shown on the right. The `type` of an action decides its
+     * icon. When the user clicks an action, the panel emits `selectAction` with the
+     * `id` of the action and the click event. The consumer decides what the action
+     * does.
+     * An action with an `href` is a link, so the user can open it in a new tab.
+     * To handle the navigation in another way, for example with the router of the
+     * application, call `preventDefault` on the click event in `selectAction`. Do
+     * this only for a plain click with the primary button. Let the browser handle
+     * all other clicks, so that Ctrl-click and Cmd-click still open the link in a
+     * new tab:
+     * ```ts
+     * function handleSelectAction(event: CustomEvent<SidePanelActionSelect>) {
+     *     const click = event.detail.event;
+     *     const isPlainClick =
+     *         click.button === 0 &&
+     *         !click.metaKey &&
+     *         !click.ctrlKey &&
+     *         !click.shiftKey &&
+     *         !click.altKey;
+     *     if (!isPlainClick) {
+     *         return;
+     *     }
+     *     click.preventDefault();
+     *     router.navigate(event.detail.id);
+     * }
+     * ```
      * @exampleComponent limel-example-side-panel-basic
      * @exampleComponent limel-example-side-panel-insets
      * @exampleComponent limel-example-side-panel-escape
+     * @exampleComponent limel-example-side-panel-actions
+     * @exampleComponent limel-example-side-panel-header-actions
      * @private 
      */
     interface HTMLLimelSidePanelElement extends Components.LimelSidePanel, HTMLStencilElement {
@@ -10818,7 +10923,7 @@ declare namespace LocalJSX {
     }
     /**
      * A resizable panel that is displayed on top of the right side of the page.
-     * The content is placed in the default slot, below a toolbar with a close button.
+     * The content is placed in the default slot, below a toolbar and a header.
      * The panel is positioned relative to its nearest positioned ancestor. Set
      * `position: relative` on that element. Use `--side-panel-top-inset`,
      * `--side-panel-right-inset` and `--side-panel-bottom-inset` to keep parts of
@@ -10833,12 +10938,63 @@ declare namespace LocalJSX {
      * The user can resize the panel by dragging its left edge, or with the arrow
      * keys. The panel emits `changeWidth` when a resize is finished.
      * See the examples for how closing and resizing work in detail.
+     * ## Header
+     * The header shows the heading, subheading and icon of the last entry in
+     * `stack`. When the entry has a `color`, the header gets that background color,
+     * and the headings are white with a text shadow. When `stack` is empty, the
+     * panel has no header.
+     * Put controls for the header, for example a follow button or a menu, in the
+     * `header-actions` slot. They are shown at the right end of the header. When
+     * `stack` is empty, there is no header, and the slot content is not shown.
+     * The slot is for small controls. It is at most half as wide as the header,
+     * and at most as tall as the heading and subheading together. Larger content
+     * is cut off, so that the header keeps its size.
+     * The slot content is not tied to an entry in `stack`. When the last entry
+     * changes, the consumer must also change the slot content.
+     * The slot content keeps its own colors. Use `--side-panel-header-text-color`
+     * to match the text color of the header. It is white when the header has a
+     * `color`. It can also be used as the `color` of an `Icon`.
+     * ## Actions
+     * The toolbar has a close button on the left. Other buttons are set with
+     * `actions`, and are shown on the right. The `type` of an action decides its
+     * icon. When the user clicks an action, the panel emits `selectAction` with the
+     * `id` of the action and the click event. The consumer decides what the action
+     * does.
+     * An action with an `href` is a link, so the user can open it in a new tab.
+     * To handle the navigation in another way, for example with the router of the
+     * application, call `preventDefault` on the click event in `selectAction`. Do
+     * this only for a plain click with the primary button. Let the browser handle
+     * all other clicks, so that Ctrl-click and Cmd-click still open the link in a
+     * new tab:
+     * ```ts
+     * function handleSelectAction(event: CustomEvent<SidePanelActionSelect>) {
+     *     const click = event.detail.event;
+     *     const isPlainClick =
+     *         click.button === 0 &&
+     *         !click.metaKey &&
+     *         !click.ctrlKey &&
+     *         !click.shiftKey &&
+     *         !click.altKey;
+     *     if (!isPlainClick) {
+     *         return;
+     *     }
+     *     click.preventDefault();
+     *     router.navigate(event.detail.id);
+     * }
+     * ```
      * @exampleComponent limel-example-side-panel-basic
      * @exampleComponent limel-example-side-panel-insets
      * @exampleComponent limel-example-side-panel-escape
+     * @exampleComponent limel-example-side-panel-actions
+     * @exampleComponent limel-example-side-panel-header-actions
      * @private 
      */
     interface LimelSidePanel {
+        /**
+          * Buttons in the toolbar, to the right of the close button.
+          * @default []
+         */
+        "actions"?: SidePanelAction[];
         /**
           * Label of the close button. Shown as a tooltip and used as the accessible name.
           * @default 'Close'
@@ -10861,11 +11017,20 @@ declare namespace LocalJSX {
           * Emitted when the close button is clicked, or when Escape is pressed and `closeOnEscape` is `true`.
          */
         "onClose"?: (event: LimelSidePanelCustomEvent<void>) => void;
+        /**
+          * Emitted when an action in the toolbar is clicked. The detail has the `id` of the action, or its `type` if it has no `id`, and the click event.
+         */
+        "onSelectAction"?: (event: LimelSidePanelCustomEvent<SidePanelActionSelect>) => 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.
+          * @default []
+         */
+        "stack"?: SidePanelEntry[];
     }
     /**
      * @exampleComponent limel-example-slider-basic
@@ -13595,7 +13760,7 @@ declare module "@stencil/core" {
             "limel-shortcut": LocalJSX.IntrinsicElements["limel-shortcut"] & JSXBase.HTMLAttributes<HTMLLimelShortcutElement>;
             /**
              * A resizable panel that is displayed on top of the right side of the page.
-             * The content is placed in the default slot, below a toolbar with a close button.
+             * The content is placed in the default slot, below a toolbar and a header.
              * The panel is positioned relative to its nearest positioned ancestor. Set
              * `position: relative` on that element. Use `--side-panel-top-inset`,
              * `--side-panel-right-inset` and `--side-panel-bottom-inset` to keep parts of
@@ -13610,9 +13775,55 @@ declare module "@stencil/core" {
              * The user can resize the panel by dragging its left edge, or with the arrow
              * keys. The panel emits `changeWidth` when a resize is finished.
              * See the examples for how closing and resizing work in detail.
+             * ## Header
+             * The header shows the heading, subheading and icon of the last entry in
+             * `stack`. When the entry has a `color`, the header gets that background color,
+             * and the headings are white with a text shadow. When `stack` is empty, the
+             * panel has no header.
+             * Put controls for the header, for example a follow button or a menu, in the
+             * `header-actions` slot. They are shown at the right end of the header. When
+             * `stack` is empty, there is no header, and the slot content is not shown.
+             * The slot is for small controls. It is at most half as wide as the header,
+             * and at most as tall as the heading and subheading together. Larger content
+             * is cut off, so that the header keeps its size.
+             * The slot content is not tied to an entry in `stack`. When the last entry
+             * changes, the consumer must also change the slot content.
+             * The slot content keeps its own colors. Use `--side-panel-header-text-color`
+             * to match the text color of the header. It is white when the header has a
+             * `color`. It can also be used as the `color` of an `Icon`.
+             * ## Actions
+             * The toolbar has a close button on the left. Other buttons are set with
+             * `actions`, and are shown on the right. The `type` of an action decides its
+             * icon. When the user clicks an action, the panel emits `selectAction` with the
+             * `id` of the action and the click event. The consumer decides what the action
+             * does.
+             * An action with an `href` is a link, so the user can open it in a new tab.
+             * To handle the navigation in another way, for example with the router of the
+             * application, call `preventDefault` on the click event in `selectAction`. Do
+             * this only for a plain click with the primary button. Let the browser handle
+             * all other clicks, so that Ctrl-click and Cmd-click still open the link in a
+             * new tab:
+             * ```ts
+             * function handleSelectAction(event: CustomEvent<SidePanelActionSelect>) {
+             *     const click = event.detail.event;
+             *     const isPlainClick =
+             *         click.button === 0 &&
+             *         !click.metaKey &&
+             *         !click.ctrlKey &&
+             *         !click.shiftKey &&
+             *         !click.altKey;
+             *     if (!isPlainClick) {
+             *         return;
+             *     }
+             *     click.preventDefault();
+             *     router.navigate(event.detail.id);
+             * }
+             * ```
              * @exampleComponent limel-example-side-panel-basic
              * @exampleComponent limel-example-side-panel-insets
              * @exampleComponent limel-example-side-panel-escape
+             * @exampleComponent limel-example-side-panel-actions
+             * @exampleComponent limel-example-side-panel-header-actions
              * @private 
              */
             "limel-side-panel": LocalJSX.IntrinsicElements["limel-side-panel"] & JSXBase.HTMLAttributes<HTMLLimelSidePanelElement>;

package/dist/types/interface.d.ts

@@ -35,6 +35,7 @@ export * from './components/picker/searcher.types';
 export * from './components/picker/value.types';
 export * from './components/progress-flow/progress-flow.types';
 export * from './components/select/option.types';
+export * from './components/side-panel/side-panel.types';
 export * from './components/spinner/spinner.types';
 export * from './components/tab-bar/tab.types';
 export * from './components/tab-panel/tab-panel.types';

package/package.json

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

package/dist/lime-elements/p-566750e5.entry.js

@@ -1 +0,0 @@
-import{r as e,c as i,h as t,H as s,a as o}from"./p-BU9IJqli.js";import{E as r}from"./p-Bu6-QXrA.js";import{c as a}from"./p-BrjD-ITe.js";const n=[];function l(e){e.stopPropagation()}const d=class{constructor(t){e(this,t),this.close=i(this,"close",7),this.changeWidth=i(this,"changeWidth",7),this.closeLabel="Close",this.resizeLabel="Resize",this.closeOnEscape=!0,this.closeButtonId=a(),this.setBody=e=>{this.body=e,this.stopContentEventsInBody()},this.restoreFocus=()=>{const e=!document.activeElement||document.activeElement===document.body;if(this.host.isConnected||!e)return;const i=this.focusedBefore;this.focusedBefore=void 0,(null==i?void 0:i.isConnected)&&i.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 i;return e.target===this.panel&&Math.round(e.borderBoxSize[0].inlineSize)===(null===(i=this.widthRange)||void 0===i?void 0:i.now)},this.updateWidthRange=()=>{this.isResizing()||(this.widthRange=this.measureWidthRange())},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)}render(){return t(s,{key:"1c18f40fb45731bdf157d651d4e649446de5230b"},t("section",{key:"e8b41bded39732750ae3db9b1daf14dc742e1cb7",ref:this.setPanel,role:"dialog","aria-label":this.label,tabindex:"-1"},this.renderHandle(),t("div",{key:"3cba5523e0cbe45fa328daaa40136c063a8c3ac3",class:"content"},t("div",{key:"b5cbc1260b4e6f31ac789179ab4b5a0281b9133b",class:"toolbar"},this.renderCloseButton()),this.renderBody())),t("span",{key:"5fe872f05a6cc49027f84d71a765baa59a53adb9","data-limit":"min",ref:this.setMinLimit}),t("span",{key:"5042e7437e61ae5308e13b1a30f5df24747e2cdf","data-limit":"max",ref:this.setMaxLimit}))}renderCloseButton(){return t("button",{class:"close",id:this.closeButtonId,"aria-label":this.closeLabel,onClick:this.handleClickClose},t("limel-icon",{name:"multiply","aria-hidden":"true"}),t("limel-tooltip",{elementId:this.closeButtonId,label:this.closeLabel}))}renderHandle(){var e,i,s;return t("limel-resize-handle",{class:"handle",label:this.resizeLabel,value:null===(e=this.widthRange)||void 0===e?void 0:e.now,min:null===(i=this.widthRange)||void 0===i?void 0:i.min,max:null===(s=this.widthRange)||void 0===s?void 0:s.max,onChangeSize:this.handleChangeSize,onEndResize:this.handleEndResize})}renderBody(){return t("div",{class:"body",ref:this.setBody},t("slot",null))}stopContentEventsInBody(){var e,i;null===(e=this.body)||void 0===e||e.addEventListener("close",l),null===(i=this.body)||void 0===i||i.addEventListener("changeWidth",l)}stopContentEventAtHost(e){e.target!==this.host&&e.stopImmediatePropagation()}moveFocusIntoPanel(){this.panel.focus({preventScroll:!0})}rememberFocusedElement(){const e=function(){var e;let i=document.activeElement;for(;null===(e=null==i?void 0:i.shadowRoot)||void 0===e?void 0:e.activeElement;)i=i.shadowRoot.activeElement;return i}();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){this.panel.style.width=`${e}px`}rememberWidthBeforeResize(){this.isResizing()||(this.widthBeforeResize=this.currentWidth())}isResizing(){return void 0!==this.widthBeforeResize}keepClampedWidth(){this.setWidth(this.currentWidth())}emitWidthIfChanged(e){const i=this.currentWidth();i!==e&&this.changeWidth.emit(i)}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,i=Math.max(e,this.maxLimit.offsetWidth);return{now:Math.round(this.currentWidth()),min:Math.round(e),max:Math.round(i)}}currentWidth(){return this.panel.offsetWidth}get host(){return o(this)}};d.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)}@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;z-index:var(--_side-panel-z-index);top:var(--_side-panel-top-inset);right:var(--_side-panel-right-inset);bottom:var(--_side-panel-bottom-inset);margin:0.5rem;display:flex;flex-direction:column;isolation:isolate;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;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{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))}.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)}.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%)}';export{d as limel_side_panel}