@limetech/lime-elements 40.9.0 → 40.10.0

package/dist/types/components.d.ts

@@ -3427,6 +3427,45 @@ export namespace Components {
          */
         "selectedItem"?: ListItem<string | number>;
     }
+    /**
+     * 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.
+     * The handle does not resize the element. It emits `changeSize` with the size
+     * that the user asks for, and the consumer applies it.
+     * The handle must be a direct child of the element that it resizes. When the
+     * handle is placed directly in a shadow root, it resizes the element that has
+     * the shadow root. It has `position: absolute` and `z-index: 1`, and sits on
+     * 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`.
+     * @exampleComponent limel-example-resize-handle-basic
+     * @exampleComponent limel-example-resize-handle-locations
+     * @exampleComponent limel-example-resize-handle-grab-area
+     * @private 
+     */
+    interface LimelResizeHandle {
+        /**
+          * The accessible name of the handle.
+         */
+        "label": string;
+        /**
+          * The location of the handle relative to the resizable element.
+          * @default 'left'
+         */
+        "location": 'left' | 'right' | 'top' | 'bottom';
+        /**
+          * The largest size that the element can have, in pixels.
+         */
+        "max"?: number;
+        /**
+          * The smallest size that the element can have, in pixels.
+         */
+        "min"?: number;
+        /**
+          * The size of the element, in pixels: the width when `location` is `left` or `right`, and the height when it is `top` or `bottom`.
+         */
+        "value"?: number;
+    }
     /**
      * Makes content that is larger than its container scrollable, along one axis.
      * The native scrollbar is hidden. Instead, an edge that has more to reveal
@@ -3564,6 +3603,49 @@ export namespace Components {
          */
         "link"?: Link;
     }
+    /**
+     * 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 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
+     * that element visible, for example a header.
+     * The CSS custom properties can be set on the panel or on any ancestor.
+     * The panel is a dialog that does not block the rest of the page. Set `label`
+     * to give it an accessible name, which screen readers announce. When the panel
+     * opens, focus moves into it. When the panel is removed, focus returns to the
+     * element that had it before, unless focus is somewhere else by then.
+     * The panel emits `close` when the user clicks the close button, or presses
+     * Escape. It does not remove itself. The consumer must remove it from the DOM.
+     * 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.
+     * @exampleComponent limel-example-side-panel-basic
+     * @exampleComponent limel-example-side-panel-insets
+     * @exampleComponent limel-example-side-panel-escape
+     * @private 
+     */
+    interface LimelSidePanel {
+        /**
+          * Label of the close button. Shown as a tooltip and used as the accessible name.
+          * @default 'Close'
+         */
+        "closeLabel": 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 event either.
+          * @default true
+         */
+        "closeOnEscape": boolean;
+        /**
+          * Accessible name of the panel. Screen readers announce it. Set it to something that tells the user what the panel is for.
+         */
+        "label"?: string;
+        /**
+          * Label of the resize handle. Used as the accessible name.
+          * @default 'Resize'
+         */
+        "resizeLabel": string;
+    }
     /**
      * @exampleComponent limel-example-slider-basic
      * @exampleComponent limel-example-slider-unset
@@ -4358,10 +4440,18 @@ export interface LimelRadioButtonGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelRadioButtonGroupElement;
 }
+export interface LimelResizeHandleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLimelResizeHandleElement;
+}
 export interface LimelSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelSelectElement;
 }
+export interface LimelSidePanelCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLimelSidePanelElement;
+}
 export interface LimelSliderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelSliderElement;
@@ -6378,6 +6468,40 @@ declare global {
         prototype: HTMLLimelRadioButtonGroupElement;
         new (): HTMLLimelRadioButtonGroupElement;
     };
+    interface HTMLLimelResizeHandleElementEventMap {
+        "changeSize": number;
+        "endResize": void;
+    }
+    /**
+     * 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.
+     * The handle does not resize the element. It emits `changeSize` with the size
+     * that the user asks for, and the consumer applies it.
+     * The handle must be a direct child of the element that it resizes. When the
+     * handle is placed directly in a shadow root, it resizes the element that has
+     * the shadow root. It has `position: absolute` and `z-index: 1`, and sits on
+     * 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`.
+     * @exampleComponent limel-example-resize-handle-basic
+     * @exampleComponent limel-example-resize-handle-locations
+     * @exampleComponent limel-example-resize-handle-grab-area
+     * @private 
+     */
+    interface HTMLLimelResizeHandleElement extends Components.LimelResizeHandle, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLimelResizeHandleElementEventMap>(type: K, listener: (this: HTMLLimelResizeHandleElement, ev: LimelResizeHandleCustomEvent<HTMLLimelResizeHandleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLLimelResizeHandleElementEventMap>(type: K, listener: (this: HTMLLimelResizeHandleElement, ev: LimelResizeHandleCustomEvent<HTMLLimelResizeHandleElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLLimelResizeHandleElement: {
+        prototype: HTMLLimelResizeHandleElement;
+        new (): HTMLLimelResizeHandleElement;
+    };
     /**
      * Makes content that is larger than its container scrollable, along one axis.
      * The native scrollbar is hidden. Instead, an edge that has more to reveal
@@ -6464,6 +6588,46 @@ declare global {
         prototype: HTMLLimelShortcutElement;
         new (): HTMLLimelShortcutElement;
     };
+    interface HTMLLimelSidePanelElementEventMap {
+        "close": void;
+        "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 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
+     * that element visible, for example a header.
+     * The CSS custom properties can be set on the panel or on any ancestor.
+     * The panel is a dialog that does not block the rest of the page. Set `label`
+     * to give it an accessible name, which screen readers announce. When the panel
+     * opens, focus moves into it. When the panel is removed, focus returns to the
+     * element that had it before, unless focus is somewhere else by then.
+     * The panel emits `close` when the user clicks the close button, or presses
+     * Escape. It does not remove itself. The consumer must remove it from the DOM.
+     * 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.
+     * @exampleComponent limel-example-side-panel-basic
+     * @exampleComponent limel-example-side-panel-insets
+     * @exampleComponent limel-example-side-panel-escape
+     * @private 
+     */
+    interface HTMLLimelSidePanelElement extends Components.LimelSidePanel, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLimelSidePanelElementEventMap>(type: K, listener: (this: HTMLLimelSidePanelElement, ev: LimelSidePanelCustomEvent<HTMLLimelSidePanelElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLLimelSidePanelElementEventMap>(type: K, listener: (this: HTMLLimelSidePanelElement, ev: LimelSidePanelCustomEvent<HTMLLimelSidePanelElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLLimelSidePanelElement: {
+        prototype: HTMLLimelSidePanelElement;
+        new (): HTMLLimelSidePanelElement;
+    };
     interface HTMLLimelSliderElementEventMap {
         "change": number | null;
     }
@@ -6910,9 +7074,11 @@ declare global {
         "limel-prosemirror-adapter": HTMLLimelProsemirrorAdapterElement;
         "limel-radio-button": HTMLLimelRadioButtonElement;
         "limel-radio-button-group": HTMLLimelRadioButtonGroupElement;
+        "limel-resize-handle": HTMLLimelResizeHandleElement;
         "limel-scroller": HTMLLimelScrollerElement;
         "limel-select": HTMLLimelSelectElement;
         "limel-shortcut": HTMLLimelShortcutElement;
+        "limel-side-panel": HTMLLimelSidePanelElement;
         "limel-slider": HTMLLimelSliderElement;
         "limel-snackbar": HTMLLimelSnackbarElement;
         "limel-spinner": HTMLLimelSpinnerElement;
@@ -10468,6 +10634,53 @@ declare namespace LocalJSX {
          */
         "selectedItem"?: ListItem<string | number>;
     }
+    /**
+     * 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.
+     * The handle does not resize the element. It emits `changeSize` with the size
+     * that the user asks for, and the consumer applies it.
+     * The handle must be a direct child of the element that it resizes. When the
+     * handle is placed directly in a shadow root, it resizes the element that has
+     * the shadow root. It has `position: absolute` and `z-index: 1`, and sits on
+     * 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`.
+     * @exampleComponent limel-example-resize-handle-basic
+     * @exampleComponent limel-example-resize-handle-locations
+     * @exampleComponent limel-example-resize-handle-grab-area
+     * @private 
+     */
+    interface LimelResizeHandle {
+        /**
+          * The accessible name of the handle.
+         */
+        "label"?: string;
+        /**
+          * The location of the handle relative to the resizable element.
+          * @default 'left'
+         */
+        "location"?: 'left' | 'right' | 'top' | 'bottom';
+        /**
+          * The largest size that the element can have, in pixels.
+         */
+        "max"?: number;
+        /**
+          * The smallest size that the element can have, in pixels.
+         */
+        "min"?: number;
+        /**
+          * Emitted on each pointer move during a drag, and on each arrow key press. The detail is the size that the user asks for, in pixels. The consumer limits it, uses it, and sets the result as `value`.
+         */
+        "onChangeSize"?: (event: LimelResizeHandleCustomEvent<number>) => void;
+        /**
+          * 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 size of the element, in pixels: the width when `location` is `left` or `right`, and the height when it is `top` or `bottom`.
+         */
+        "value"?: number;
+    }
     /**
      * Makes content that is larger than its container scrollable, along one axis.
      * The native scrollbar is hidden. Instead, an edge that has more to reveal
@@ -10603,6 +10816,57 @@ declare namespace LocalJSX {
          */
         "link"?: Link;
     }
+    /**
+     * 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 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
+     * that element visible, for example a header.
+     * The CSS custom properties can be set on the panel or on any ancestor.
+     * The panel is a dialog that does not block the rest of the page. Set `label`
+     * to give it an accessible name, which screen readers announce. When the panel
+     * opens, focus moves into it. When the panel is removed, focus returns to the
+     * element that had it before, unless focus is somewhere else by then.
+     * The panel emits `close` when the user clicks the close button, or presses
+     * Escape. It does not remove itself. The consumer must remove it from the DOM.
+     * 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.
+     * @exampleComponent limel-example-side-panel-basic
+     * @exampleComponent limel-example-side-panel-insets
+     * @exampleComponent limel-example-side-panel-escape
+     * @private 
+     */
+    interface LimelSidePanel {
+        /**
+          * Label of the close button. Shown as a tooltip and used as the accessible name.
+          * @default 'Close'
+         */
+        "closeLabel"?: 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 event either.
+          * @default true
+         */
+        "closeOnEscape"?: boolean;
+        /**
+          * Accessible name of the panel. Screen readers announce it. Set it to something that tells the user what the panel is for.
+         */
+        "label"?: string;
+        /**
+          * 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.
+         */
+        "onChangeWidth"?: (event: LimelSidePanelCustomEvent<number>) => void;
+        /**
+          * Emitted when the close button is clicked, or when Escape is pressed and `closeOnEscape` is `true`.
+         */
+        "onClose"?: (event: LimelSidePanelCustomEvent<void>) => void;
+        /**
+          * Label of the resize handle. Used as the accessible name.
+          * @default 'Resize'
+         */
+        "resizeLabel"?: string;
+    }
     /**
      * @exampleComponent limel-example-slider-basic
      * @exampleComponent limel-example-slider-unset
@@ -11852,6 +12116,13 @@ declare namespace LocalJSX {
         "badgeIcons": boolean;
         "maxLinesSecondaryText": number;
     }
+    interface LimelResizeHandleAttributes {
+        "location": 'left' | 'right' | 'top' | 'bottom';
+        "label": string;
+        "value": number;
+        "min": number;
+        "max": number;
+    }
     interface LimelScrollerAttributes {
         "orientation": 'horizontal' | 'vertical';
     }
@@ -11870,6 +12141,12 @@ declare namespace LocalJSX {
         "disabled": boolean;
         "badge": string;
     }
+    interface LimelSidePanelAttributes {
+        "label": string;
+        "closeLabel": string;
+        "resizeLabel": string;
+        "closeOnEscape": boolean;
+    }
     interface LimelSliderAttributes {
         "disabled": boolean;
         "readonly": boolean;
@@ -12039,9 +12316,11 @@ declare namespace LocalJSX {
         "limel-prosemirror-adapter": Omit<LimelProsemirrorAdapter, keyof LimelProsemirrorAdapterAttributes> & { [K in keyof LimelProsemirrorAdapter & keyof LimelProsemirrorAdapterAttributes]?: LimelProsemirrorAdapter[K] } & { [K in keyof LimelProsemirrorAdapter & keyof LimelProsemirrorAdapterAttributes as `attr:${K}`]?: LimelProsemirrorAdapterAttributes[K] } & { [K in keyof LimelProsemirrorAdapter & keyof LimelProsemirrorAdapterAttributes as `prop:${K}`]?: LimelProsemirrorAdapter[K] };
         "limel-radio-button": Omit<LimelRadioButton, keyof LimelRadioButtonAttributes> & { [K in keyof LimelRadioButton & keyof LimelRadioButtonAttributes]?: LimelRadioButton[K] } & { [K in keyof LimelRadioButton & keyof LimelRadioButtonAttributes as `attr:${K}`]?: LimelRadioButtonAttributes[K] } & { [K in keyof LimelRadioButton & keyof LimelRadioButtonAttributes as `prop:${K}`]?: LimelRadioButton[K] } & OneOf<"id", LimelRadioButton["id"], LimelRadioButtonAttributes["id"]>;
         "limel-radio-button-group": Omit<LimelRadioButtonGroup, keyof LimelRadioButtonGroupAttributes> & { [K in keyof LimelRadioButtonGroup & keyof LimelRadioButtonGroupAttributes]?: LimelRadioButtonGroup[K] } & { [K in keyof LimelRadioButtonGroup & keyof LimelRadioButtonGroupAttributes as `attr:${K}`]?: LimelRadioButtonGroupAttributes[K] } & { [K in keyof LimelRadioButtonGroup & keyof LimelRadioButtonGroupAttributes as `prop:${K}`]?: LimelRadioButtonGroup[K] };
+        "limel-resize-handle": Omit<LimelResizeHandle, keyof LimelResizeHandleAttributes> & { [K in keyof LimelResizeHandle & keyof LimelResizeHandleAttributes]?: LimelResizeHandle[K] } & { [K in keyof LimelResizeHandle & keyof LimelResizeHandleAttributes as `attr:${K}`]?: LimelResizeHandleAttributes[K] } & { [K in keyof LimelResizeHandle & keyof LimelResizeHandleAttributes as `prop:${K}`]?: LimelResizeHandle[K] };
         "limel-scroller": Omit<LimelScroller, keyof LimelScrollerAttributes> & { [K in keyof LimelScroller & keyof LimelScrollerAttributes]?: LimelScroller[K] } & { [K in keyof LimelScroller & keyof LimelScrollerAttributes as `attr:${K}`]?: LimelScrollerAttributes[K] } & { [K in keyof LimelScroller & keyof LimelScrollerAttributes as `prop:${K}`]?: LimelScroller[K] };
         "limel-select": Omit<LimelSelect, keyof LimelSelectAttributes> & { [K in keyof LimelSelect & keyof LimelSelectAttributes]?: LimelSelect[K] } & { [K in keyof LimelSelect & keyof LimelSelectAttributes as `attr:${K}`]?: LimelSelectAttributes[K] } & { [K in keyof LimelSelect & keyof LimelSelectAttributes as `prop:${K}`]?: LimelSelect[K] };
         "limel-shortcut": Omit<LimelShortcut, keyof LimelShortcutAttributes> & { [K in keyof LimelShortcut & keyof LimelShortcutAttributes]?: LimelShortcut[K] } & { [K in keyof LimelShortcut & keyof LimelShortcutAttributes as `attr:${K}`]?: LimelShortcutAttributes[K] } & { [K in keyof LimelShortcut & keyof LimelShortcutAttributes as `prop:${K}`]?: LimelShortcut[K] };
+        "limel-side-panel": Omit<LimelSidePanel, keyof LimelSidePanelAttributes> & { [K in keyof LimelSidePanel & keyof LimelSidePanelAttributes]?: LimelSidePanel[K] } & { [K in keyof LimelSidePanel & keyof LimelSidePanelAttributes as `attr:${K}`]?: LimelSidePanelAttributes[K] } & { [K in keyof LimelSidePanel & keyof LimelSidePanelAttributes as `prop:${K}`]?: LimelSidePanel[K] };
         "limel-slider": Omit<LimelSlider, keyof LimelSliderAttributes> & { [K in keyof LimelSlider & keyof LimelSliderAttributes]?: LimelSlider[K] } & { [K in keyof LimelSlider & keyof LimelSliderAttributes as `attr:${K}`]?: LimelSliderAttributes[K] } & { [K in keyof LimelSlider & keyof LimelSliderAttributes as `prop:${K}`]?: LimelSlider[K] };
         "limel-snackbar": Omit<LimelSnackbar, keyof LimelSnackbarAttributes> & { [K in keyof LimelSnackbar & keyof LimelSnackbarAttributes]?: LimelSnackbar[K] } & { [K in keyof LimelSnackbar & keyof LimelSnackbarAttributes as `attr:${K}`]?: LimelSnackbarAttributes[K] } & { [K in keyof LimelSnackbar & keyof LimelSnackbarAttributes as `prop:${K}`]?: LimelSnackbar[K] };
         "limel-spinner": Omit<LimelSpinner, keyof LimelSpinnerAttributes> & { [K in keyof LimelSpinner & keyof LimelSpinnerAttributes]?: LimelSpinner[K] } & { [K in keyof LimelSpinner & keyof LimelSpinnerAttributes as `attr:${K}`]?: LimelSpinnerAttributes[K] } & { [K in keyof LimelSpinner & keyof LimelSpinnerAttributes as `prop:${K}`]?: LimelSpinner[K] };
@@ -13237,6 +13516,23 @@ declare module "@stencil/core" {
              * @beta 
              */
             "limel-radio-button-group": LocalJSX.IntrinsicElements["limel-radio-button-group"] & JSXBase.HTMLAttributes<HTMLLimelRadioButtonGroupElement>;
+            /**
+             * 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.
+             * The handle does not resize the element. It emits `changeSize` with the size
+             * that the user asks for, and the consumer applies it.
+             * The handle must be a direct child of the element that it resizes. When the
+             * handle is placed directly in a shadow root, it resizes the element that has
+             * the shadow root. It has `position: absolute` and `z-index: 1`, and sits on
+             * 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`.
+             * @exampleComponent limel-example-resize-handle-basic
+             * @exampleComponent limel-example-resize-handle-locations
+             * @exampleComponent limel-example-resize-handle-grab-area
+             * @private 
+             */
+            "limel-resize-handle": LocalJSX.IntrinsicElements["limel-resize-handle"] & JSXBase.HTMLAttributes<HTMLLimelResizeHandleElement>;
             /**
              * Makes content that is larger than its container scrollable, along one axis.
              * The native scrollbar is hidden. Instead, an edge that has more to reveal
@@ -13297,6 +13593,29 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-shortcut-with-click-handler
              */
             "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 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
+             * that element visible, for example a header.
+             * The CSS custom properties can be set on the panel or on any ancestor.
+             * The panel is a dialog that does not block the rest of the page. Set `label`
+             * to give it an accessible name, which screen readers announce. When the panel
+             * opens, focus moves into it. When the panel is removed, focus returns to the
+             * element that had it before, unless focus is somewhere else by then.
+             * The panel emits `close` when the user clicks the close button, or presses
+             * Escape. It does not remove itself. The consumer must remove it from the DOM.
+             * 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.
+             * @exampleComponent limel-example-side-panel-basic
+             * @exampleComponent limel-example-side-panel-insets
+             * @exampleComponent limel-example-side-panel-escape
+             * @private 
+             */
+            "limel-side-panel": LocalJSX.IntrinsicElements["limel-side-panel"] & JSXBase.HTMLAttributes<HTMLLimelSidePanelElement>;
             /**
              * @exampleComponent limel-example-slider-basic
              * @exampleComponent limel-example-slider-unset

package/dist/types/util/drag-to-resize.d.ts

@@ -0,0 +1,33 @@
+import { ResizeLocation } from './resize-location';
+export interface ResizeListener {
+    /**
+     * Returns the location of the handle. Called when a drag starts.
+     */
+    getLocation: () => ResizeLocation;
+    /**
+     * Returns the current size of the element, in pixels: the width when the
+     * handle is on the left or the right, the height when it is at the top or
+     * the bottom.
+     */
+    getSize: () => number;
+    /**
+     * Called with the new size, in pixels, on each pointer move.
+     */
+    resize: (size: number) => void;
+    /**
+     * Called when the pointer is released after `resize` was called. Not
+     * called when the pointer is released without having moved, and not called
+     * when the listeners are removed during a drag.
+     */
+    end: () => void;
+}
+/**
+ * Makes an element resizable with a drag handle on one of its edges.
+ *
+ * @param handle - the drag handle
+ * @param listener - gives the location and the size, and is told about the
+ * resize
+ * @returns a function that removes the event listeners
+ */
+export declare function dragToResize(handle: HTMLElement, listener: ResizeListener): () => void;
+//# sourceMappingURL=drag-to-resize.d.ts.map

package/dist/types/util/get-deep-active-element.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns the element that has focus, also when it is inside shadow roots.
+ * `document.activeElement` returns the host of the outermost shadow root that
+ * contains the focused element.
+ *
+ * @returns the element that has focus, or `null` when no element has focus
+ */
+export declare function getDeepActiveElement(): Element | null;
+//# sourceMappingURL=get-deep-active-element.d.ts.map

package/dist/types/util/resize-location.d.ts

@@ -0,0 +1,59 @@
+export type ResizeLocation = 'left' | 'right' | 'top' | 'bottom';
+interface LocationTraits {
+    /**
+     * The axis that the handle is moved along.
+     */
+    axis: 'x' | 'y';
+    /**
+     * The cursor to show while the handle is dragged.
+     */
+    cursor: 'col-resize' | 'row-resize';
+    /**
+     * `1` when the element gets larger as the pointer moves towards higher
+     * coordinates, and `-1` when it gets larger towards lower coordinates.
+     */
+    direction: 1 | -1;
+    /**
+     * The key that moves the handle away from the element, which makes the
+     * element larger.
+     */
+    growKey: string;
+    /**
+     * The key that moves the handle into the element, which makes the element
+     * smaller.
+     */
+    shrinkKey: string;
+}
+export declare const resizeLocations: Record<ResizeLocation, LocationTraits>;
+/**
+ * Returns the orientation of a separator that is a handle at the given
+ * location.
+ *
+ * @param location - the location of the handle
+ * @returns the orientation
+ */
+export declare function getOrientation(location: ResizeLocation): 'vertical' | 'horizontal';
+/**
+ * Returns how many pixels the size of the element changes when the key is
+ * pressed while the handle has focus.
+ *
+ * @param location - the location of the handle
+ * @param key - the `key` of the keyboard event
+ * @returns the change in pixels, or `undefined` when the key does not resize
+ */
+export declare function getKeyboardSizeChange(location: ResizeLocation, key: string): number | undefined;
+/**
+ * Returns the size of the element along the axis that a handle at the given
+ * location resizes: the width for `left` and `right`, the height for `top` and
+ * `bottom`.
+ *
+ * `offsetWidth` and `offsetHeight` are used and not `getBoundingClientRect`,
+ * because an ancestor can be scaled with a transform.
+ *
+ * @param element - the element that the handle resizes
+ * @param location - the location of the handle
+ * @returns the size in pixels
+ */
+export declare function measureSize(element: HTMLElement, location: ResizeLocation): number;
+export {};
+//# sourceMappingURL=resize-location.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "40.9.0",
+  "version": "40.10.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -71,7 +71,7 @@
     "@types/react-dom": "^19.3.0",
     "@types/tabulator-tables": "^6.3.6",
     "@vitest/browser-playwright": "^4.1.11",
-    "axe-core": "4.13.0",
+    "axe-core": "4.14.0",
     "codemirror": "^5.65.9",
     "cross-env": "^10.1.0",
     "dayjs": "^1.11.23",

package/dist/lime-elements/p-14a28a08.entry.js

@@ -1 +0,0 @@
-import{r as t,c as s,h as i,H as a,a as e}from"./p-BU9IJqli.js";import{d as o}from"./p-z_E3sq3p.js";const n=class{constructor(i){t(this,i),this.changeTab=s(this,"changeTab",7),this.tabs=[],this.orientation="horizontal",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 i(a,{key:"130cd711926c119be1b3084dfb966afe6d280926",onChangeTab:this.handleChangeTabs},i("div",{key:"e76da7ba8c93a3d9d4c03a84a01a5358b39b17ed",class:"tab-panel"},i("limel-tab-bar",{key:"0866cd6c59e5e4ea372678a969bc646db81ed285",tabs:this.tabs,orientation:this.orientation}),i("div",{key:"c0ee8b9d6bffcb32fc4894bf0ba7409ac194577d",class:"tab-content"},i("slot",{key:"46b6cd024188a04ba466d831051cf3628996d97e"}))))}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 s=this.slotElements.find((s=>s.id===t.id));s&&(s.style.display=t.active?"":"none",s.tab=t)}handleChangeTabs(t){this.tabs=this.tabs.map((s=>s.id===t.detail.id?t.detail:s)),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}]}}};n.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{n as limel_tab_panel}

package/dist/lime-elements/p-3d05e21f.entry.js

@@ -1 +0,0 @@
-import{r as i,c as t,h as e,H as s}from"./p-BU9IJqli.js";import{t as a}from"./p-w3yKYfBQ.js";import{g as n,a as r,b as o,c as l}from"./p-BCq5M9TE.js";import{f as h}from"./p-24yUSW40.js";import{r as d}from"./p-Dv2HOgWN.js";import"./p-ChagAaNf.js";import"./p-Bu_YRgCL.js";import"./p-CgNJbSP4.js";const p={id:null,text:null,removable:!0},c=class{constructor(e){i(this,e),this.change=t(this,"change",7),this.interact=t(this,"interact",7),this.required=!1,this.disabled=!1,this.readonly=!1,this.invalid=!1,this.loading=!1,this.accept="*",this.language="en",this.dropZoneTip=()=>this.getTranslation("file.drag-and-drop-tips"),this.handleNewFiles=async i=>{this.preventAndStop(i);const t=i.detail[0];let e=t;const s=null==t?void 0:t.fileContent;if(this.resizeImage&&s instanceof Blob&&this.isResizableImage(s)){const i=Object.assign(Object.assign({},t),{loading:!0,statusText:this.getTranslation("file.optimizing")});this.resizingFile=i;try{const i=await d(s,this.resizeImage);e=Object.assign(Object.assign({},t),{filename:i.name,size:i.size,contentType:i.type,fileContent:i})}catch(i){}if(this.resizingFile!==i)return;this.resizingFile=e}this.change.emit(e)},this.handleChipSetChange=i=>{i.stopPropagation();const t=0===i.detail.length?i.detail[0]:null;t||(this.resizingFile=void 0,this.change.emit(t))},this.handleChipInteract=i=>{this.preventAndStop(i),this.interact.emit(i.detail.id)}}get displayedFile(){var i;return null!==(i=this.value)&&void 0!==i?i:this.resizingFile}handleValueChange(){this.resizingFile=void 0}render(){return e(s,{key:"dfaf1d7c9ddb1a8e960547db042402fa690dc829","aria-busy":this.isBusy?"true":"false"},e("limel-file-dropzone",{key:"a3ebe9b925c2e13ad1b87aa3f3a948b05e6b7473",disabled:this.disabled||this.readonly||!!this.displayedFile,accept:this.accept,onFilesSelected:this.handleNewFiles},this.renderChipset()),this.renderDragAndDropTip(),this.renderSpinner())}get statusText(){var i,t,e;return null!==(e=null===(t=null===(i=this.displayedFile)||void 0===i?void 0:i.statusText)||void 0===t?void 0:t.trim())&&void 0!==e?e:""}get isBusy(){var i,t;return this.loading||Boolean(null===(i=this.displayedFile)||void 0===i?void 0:i.loading)||void 0!==(null===(t=this.displayedFile)||void 0===t?void 0:t.progress)}renderSpinner(){if(this.isBusy)return e("limel-spinner",null)}renderDragAndDropTip(){if(!(this.displayedFile||this.disabled||this.readonly||this.isBusy))return e("div",{class:"drag-and-drop-tip"},e("span",{class:"invisible-label-mock",role:"presentation"},this.label),e("span",{class:"tip"},this.dropZoneTip()))}isResizableImage(i){var t;return Boolean(null===(t=i.type)||void 0===t?void 0:t.startsWith("image/"))&&"image/svg+xml"!==i.type}getChipArray(){const i=this.displayedFile;return i?[Object.assign(Object.assign({},p),{text:i.filename,id:i.id,icon:{name:l(i),title:o(i),color:r(i),backgroundColor:n(i)},badge:this.getBadge(),href:i.href,menuItems:i.menuItems,loading:i.loading,progress:i.progress,invalid:i.invalid})]:[]}getBadge(){var i;return this.statusText?this.statusText:"number"==typeof(null===(i=this.displayedFile)||void 0===i?void 0:i.size)?h(this.displayedFile.size):void 0}renderChipset(){const i=e("limel-chip-set",{disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,clearAllButton:!1,label:this.label,helperText:this.helperText,leadingIcon:"upload_to_cloud",language:this.language,onChange:this.handleChipSetChange,onInteract:this.handleChipInteract,required:this.required,type:"input",value:this.getChipArray()});return this.value?i:e("limel-file-input",{accept:this.accept,disabled:this.disabled||this.readonly},i)}preventAndStop(i){i.stopPropagation(),i.preventDefault()}getTranslation(i){return a.get(i,this.language)}static get watchers(){return{value:[{handleValueChange:0}]}}};c.style='@charset "UTF-8";:host(limel-file){--badge-max-width:auto;position:relative}.drag-and-drop-tip{pointer-events:none;position:absolute;box-sizing:border-box;margin:0.25rem;inset:0;display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;border-radius:0.25rem;border:1px dashed rgb(var(--contrast-700));padding:0 0.5rem}.drag-and-drop-tip .invisible-label-mock{flex-shrink:0;opacity:0;padding-right:1rem;padding-left:1.5rem}.drag-and-drop-tip .tip{font-size:smaller;color:var(--limel-theme-text-secondary-on-background-color);height:auto;max-height:3rem;line-height:1;display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}limel-spinner{pointer-events:none;position:absolute;inset:0 0.375rem 0 auto;margin:auto}';export{c as limel_file}

package/dist/lime-elements/p-681cb6de.entry.js

@@ -1 +0,0 @@
-import{r as o,h as t,H as e,a}from"./p-BU9IJqli.js";import{m as i,r as n}from"./p-CIf8aGSd.js";import{c as s}from"./p-BrjD-ITe.js";import{d as r,g as l}from"./p-CgNJbSP4.js";const d=class{constructor(t){o(this,t),this.elevated=!1,this.disabled=!1,this.tooltipId=s(),this.filterClickWhenDisabled=o=>{this.disabled&&o.preventDefault()}}connectedCallback(){this.initialize()}componentWillLoad(){i(this.host)}disconnectedCallback(){n(this.host)}componentDidLoad(){this.initialize()}initialize(){this.host.shadowRoot.querySelector(".mdc-icon-button")}render(){const o={};return this.host.hasAttribute("tabindex")&&(o.tabindex=this.host.getAttribute("tabindex")),t(e,{key:"e2fa10697beccc59cb8f332695e445522391649d",onClick:this.filterClickWhenDisabled},t("button",Object.assign({key:"2dc00d1341e9a458f5a7d060abd777c29cd333e0","aria-label":this.label,disabled:this.disabled,id:this.tooltipId},o),this.renderIcon(),this.renderTooltip(this.tooltipId)))}renderIcon(){var o,e;const a=l(this.icon),i=r(this.icon);return t("limel-icon",{name:a,"aria-label":i,"aria-hidden":i?null:"true",style:{color:`${null===(o=this.icon)||void 0===o?void 0:o.color}`,"--icon-background-color":`${null===(e=this.icon)||void 0===e?void 0:e.backgroundColor}`}})}renderTooltip(o){if(this.label)return t("limel-tooltip",{elementId:o,label:this.label,helperLabel:this.helperLabel})}static get delegatesFocus(){return!0}get host(){return a(this)}};d.style='@charset "UTF-8";: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{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit}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(--icon-background-color, transparent)}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.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button:not(:disabled):hover{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{display:inline-flex;align-items:center;justify-content:center;height:2.25rem;width:2.25rem;border-radius:50%}button:disabled{cursor:not-allowed;color:var(--limel-theme-text-disabled-on-background-color)}:host([elevated]) button:not(:hover):not(:active):not(:disabled):not(:focus-visible){box-shadow:var(--button-shadow-normal)}:host([elevated]) button:disabled{box-shadow:var(--button-shadow-normal)}limel-icon{padding:0.25rem;width:1.75rem}';export{d as limel_icon_button}

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

@@ -1 +0,0 @@
-import{r as t,c as i,h as s,H as e,a as r}from"./p-BU9IJqli.js";import{c as o,i as n}from"./p-Bkvc4sus.js";import{b as a}from"./p-BQeIv4aA.js";import{i as l}from"./p-BYfPV0O4.js";import{b as h}from"./p-BY5NjPj8.js";import{i as p}from"./p-B8VKuhvH.js";import{c}from"./p-BrjD-ITe.js";import"./p-BCq5M9TE.js";import"./p-Bu_YRgCL.js";import"./p-CgNJbSP4.js";import"./p-B6-3WXAv.js";import"./p-CZ30nDJE.js";import"./p-DK0pjX-Y.js";import"./p-BJQylLSL.js";import"./p-oiMYqRQ0.js";import"./p-DbBZn7JO.js";import"./p-BcJ-TDVt.js";import"./p-B--C3qwe.js";import"./p-BOEi1C7r.js";import"./p-CK4jS9_E.js";function f(t,i,s,e){for(var r=-1,o=null==t?0:t.length;++r<o;){var n=t[r];i(e,n,s(n),t)}return e}var m,d=(m=a,function(t,i){if(null==t)return t;if(!l(t))return m(t,i);for(var s=t.length,e=-1,r=Object(t);++e<s&&!1!==i(r[e],e,r););return t});function u(t,i,s,e){return d(t,(function(t,r,o){i(e,t,s(t),o)})),e}var b,j,v=(b=function(t,i,s){t[s?0:1].push(i)},j=function(){return[[],[]]},function(t,i){var s=p(t)?f:u,e=j?[[],[]]:{};return s(t,b,h(i),e)});const y=class{constructor(e){t(this,e),this.filesSelected=i(this,"filesSelected",7),this.filesRejected=i(this,"filesRejected",7),this.accept="*",this.disabled=!1,this.helperText="",this.hasFileToDrop=!1,this.renderOnDragLayout=()=>{if(!this.disabled&&this.hasFileToDrop)return s("div",{class:"has-file-to-drop"},s("limel-icon",{class:"icon",name:"upload_2"}),s("div",{class:"text-helpertext"},this.renderText(),this.renderHelperText()))},this.renderText=()=>{if(this.text)return s("span",{class:"text"},this.text)},this.renderHelperText=()=>{if(this.helperText)return s("span",{class:"helper-text"},this.helperText)},this.handleDrop=t=>{if(t.stopPropagation(),t.preventDefault(),this.hasFileToDrop=!1,this.disabled)return;const i=[...t.dataTransfer.files].map(o),[s,e]=v(i,(t=>n(t,this.accept)));s.length>0&&this.filesSelected.emit(s),e.length>0&&this.filesRejected.emit(e)},this.handleDragOver=t=>{this.hasFileToDrop=!0,t.preventDefault()},this.handleDragLeave=t=>{this.hasFileToDrop=!1,t.preventDefault()}}render(){return s(e,{key:"e9f43878405c9d969b0825e55322ae95b8770db1",onDrop:this.handleDrop,onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave},s("slot",{key:"39087bebe8f40c34b3905891d22c3f9a585e4824"}),this.renderOnDragLayout())}};y.style=":host(limel-file-dropzone){display:block;position:relative}.has-file-to-drop{animation:display-drop-zone 0.6s ease forwards;box-sizing:border-box;isolation:isolate;z-index:1;position:absolute;inset:0.25rem;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:0.5rem;color:rgb(var(--contrast-700));border:0.125rem dashed rgb(var(--color-cyan-light));border-radius:0.75rem}.text-helpertext{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.icon{width:clamp(2rem, 5vh, 7rem)}.text{font-size:clamp(1rem, 2vh, 1.75rem)}.helper-text{font-size:clamp(0.75rem, 1.5vh, 1rem)}@keyframes display-drop-zone{0%{background-color:rgb(var(--contrast-1100), 0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);scale:0.9;opacity:0}50%{scale:1;opacity:1}100%{background-color:rgb(var(--contrast-1100), 0.8);backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem)}}";const g=class{constructor(s){t(this,s),this.filesSelected=i(this,"filesSelected",7),this.accept="*",this.disabled=!1,this.multiple=!1,this.fileInputId=c(),this.handleClick=t=>{if(this.disabled)return t.stopPropagation(),void t.preventDefault();this.triggerFileDialog(),t.stopPropagation()},this.handleKeyUp=t=>{t.stopPropagation(),t.preventDefault(),"Enter"===t.code&&this.triggerFileDialog()},this.handleFileChange=t=>{const i=[...this.fileInput.files];0!==i.length&&(t.stopPropagation(),this.filesSelected.emit(i.map(o)),this.fileInput.value="")}}componentDidLoad(){this.fileInput=this.element.shadowRoot.getElementById(this.fileInputId)}render(){return s(e,{key:"38213e8f3e58a565368415e61fce7fcc44975848",onClick:this.handleClick,onKeyUp:this.handleKeyUp,onKeyDown:this.handleKeyDown},s("input",{key:"1f75283470841c3821f601959038c31c72322f57",hidden:!0,id:this.fileInputId,onChange:this.handleFileChange,type:"file",accept:this.accept,disabled:this.disabled,multiple:this.multiple}),s("slot",{key:"4509934962cbfddb994329102f80c4abe0879d63"}))}handleKeyDown(t){["Tab","Backspace","Enter"].includes(t.code)||(t.preventDefault(),t.stopPropagation())}triggerFileDialog(){this.fileInput.click()}get element(){return r(this)}};export{y as limel_file_dropzone,g as limel_file_input}

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

@@ -1 +0,0 @@
-import{r as t,c as e,h as r,a as i}from"./p-BU9IJqli.js";import{g as a,b as o}from"./p-CgNJbSP4.js";import{A as n,b as l,H as s,c,d as b,e as d}from"./p-DQ5DmW_Y.js";import{i as u}from"./p-COdirXg1.js";import{S as m,c as h}from"./p-B6-3WXAv.js";import{a as v,b as p,i as f,c as g}from"./p-pk5KIdKH.js";import"./p-CZ30nDJE.js";import"./p-DK0pjX-Y.js";import"./p-BJQylLSL.js";import"./p-oiMYqRQ0.js";import"./p-BYfPV0O4.js";import"./p-BcJ-TDVt.js";import"./p-DbBZn7JO.js";import"./p-B8VKuhvH.js";import"./p-B--C3qwe.js";import"./p-CK4jS9_E.js";import"./p-9W8bTt2G.js";var w=p((function(t,e){return f(t)?function(t,e){var r=-1,i=v,a=!0,o=t.length,n=[],l=e.length;if(!o)return n;e.length>=200&&(i=h,a=!1,e=new m(e));t:for(;++r<o;){var s=t[r],c=s;if(s=0!==s?s:0,a&&c==c){for(var b=l;b--;)if(e[b]===c)continue t;n.push(s)}else i(e,c,undefined)||n.push(s)}return n}(t,g(e,1,f)):[]}));const x={horizontal:new Map([[b,"previous"],[d,"next"],[s,"first"],[c,"last"]]),vertical:new Map([[n,"previous"],[l,"next"],[s,"first"],[c,"last"]])};function k(t,e){return t>=0&&t<e}function j(t,e){return r=>{var i;return!(null===(i=null==e?void 0:e.isDisabled)||void 0===i?void 0:i.call(e,t[r]))}}function y(t,e,r,i,a){for(let o=0;o<t;o+=1){const n=e+r*o;if(!i&&!k(n,t))break;const l=(n%t+t)%t;if(a(l))return l}return-1}const C=class{constructor(r){t(this,r),this.changeTab=e(this,"changeTab",7),this.tabs=[],this.orientation="horizontal",this.hasLoaded=!1,this.isLaidOutAgain=!1,this.handleKeyDown=this.handleKeyDown.bind(this)}async connectedCallback(){this.hasLoaded&&(this.revealedTabId=void 0,await this.revealActiveTab("auto"))}componentDidLoad(){this.hasLoaded=!0,this.triggerIconColorWarning()}async componentDidRender(){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 i=t.length,a=j(t,r);return k(e,i)&&a(e)?e:y(i,0,1,!1,a)}(this.tabs,this.tabs.findIndex((t=>t.active)),this.getNavigationOptions());return r("div",{key:"d9f9e2659c8199ddd8202f04ed08535a91da2948",role:"tablist","aria-orientation":this.getOrientation(),onKeyDown:this.handleKeyDown},r("limel-scroller",{key:"fdc0e8389ddc7ac8d0d63e5c777de6b6bf337697",orientation:this.getOrientation()},this.tabs.map(((e,r)=>this.renderTab(e,r,r===t)))))}tabsChanged(t=[],e=[]){const r=t.map((t=>t.id)),i=e.map((t=>t.id));u(r,i)||(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}}getTabElements(){return[...this.host.shadowRoot.querySelectorAll('button[role="tab"]')]}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 i=this.getTabElements()[r],a=this.host.shadowRoot.querySelector("limel-scroller");i&&a&&(i.matches(":focus")&&!e||(await a.componentOnReady(),await a.reveal(i,t)))}handleKeyDown(t){const e=this.getNavigationOptions();if(!function(t,e){return!(t.altKey||t.ctrlKey||t.metaKey)&&x[e.orientation].has(t.key)}(t,e))return;t.preventDefault();const r=this.getTabElements().indexOf(t.target);this.activateTab(function(t,e,r,i){const a=x[i.orientation].get(e),o=t.length,n=j(t,i),l=y(o,0,1,!1,n);if(!a||-1===l)return-1;if("first"===a)return l;const s=y(o,o-1,-1,!1,n);if("last"===a)return s;if(!k(r,o))return"next"===a?l:s;const c="next"===a?1:-1,b=y(o,r+c,c,Boolean(i.wrap),n);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)),i=[...t];return-1!==r&&(i[r]=Object.assign(Object.assign({},t[r]),{active:!1})),i[e]=Object.assign(Object.assign({},t[e]),{active:!0}),i}(this.tabs,t),r=w(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),i=o(t.icon,t.iconColor),n={color:""};return i&&(n.color=i),r("limel-icon",{name:e,style:n,size:"small","aria-hidden":"true"})}renderTab(t,e,i){return r("button",{role:"tab","aria-selected":t.active?"true":"false",tabindex:i?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 i(this)}static get watchers(){return{tabs:[{tabsChanged:0}],orientation:[{orientationChanged:0}]}}};C.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{flex:1 0 auto;max-width:var(--tab-bar-horizontal-tab-max-width, none)}button{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 limel-icon{transition:color 0.2s ease;color:rgb(var(--contrast-800));margin-left:-0.25rem;flex-shrink:0}button span.text{transition:color 0.2s ease;line-height:1.25;overflow:hidden;text-overflow:ellipsis;color:var(--limel-theme-on-surface-color)}button:hover span.text{color:var(--limel-theme-text-primary-on-background-color)}button limel-badge{margin-right:-0.25rem;box-shadow:0 0 0 1px rgb(var(--contrast-600));pointer-events:none;flex-shrink:0}button[aria-selected=true]{background-color:var(--limel-active-tab-background-color);z-index:2}button[aria-selected=true]:before,button[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[aria-selected=true] limel-icon{color:var(--limel-active-tab-color)}button[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:focus-visible span.content{transition-duration:0.3s;box-shadow:var(--shadow-depth-8-focused)}:host(limel-tab-bar:not([orientation=vertical])) button{max-width:var(--tab-bar-horizontal-tab-max-width, 16rem)}:host(limel-tab-bar:not([orientation=vertical])) button: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])) button:not([aria-selected=true]):last-of-type:after{display:none}:host(limel-tab-bar:not([orientation=vertical])) button[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[aria-selected=true]:before,:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:after{bottom:0}:host(limel-tab-bar:not([orientation=vertical])) button[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[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[aria-selected=true]{border-radius:var(--limel-tab-border-radius) 0 0 var(--limel-tab-border-radius)}:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:before,:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:after{right:0}:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:before{bottom:100%;transform:rotateY(180deg)}:host(limel-tab-bar[orientation=vertical]) button[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{C as limel_tab_bar}

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

@@ -1 +0,0 @@
-import{r as e,h as t,H as o,a}from"./p-BU9IJqli.js";import{m as i,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(){i(this.host)}disconnectedCallback(){r(this.host)}render(){return t(o,{key:"e93ab42db5212170ff86c8c2a5f5b8e63c57ba91",onClick:this.filterClickWhenDisabled},t("button",{key:"4c53bd6a15635afc55635c677404828bb94115da",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:"bbfdda5c889727f50bea9a5f27442afc1a53c347",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 a=n(e);let i;return this.label||a||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&&(i=e.color),t("limel-icon",Object.assign({},{role:"presentation",name:o,"aria-label":a,"aria-hidden":a?null:"true",style:{color:i}}))}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 a(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}