@limetech/lime-elements 40.8.1 → 40.10.0

package/dist/types/components.d.ts

@@ -1462,7 +1462,7 @@ export namespace Components {
          */
         "dockItems": DockItem[];
         /**
-          * Defines the width of the component, when it loads. - `true`: shows both icons and labels of the Dock items. - `false`: only shows icons of the doc items, and displays their labels as tooltip.  Note: when `useMobileLayout` is `true`, labels will always be shown as tooltips. Read more below…
+          * Defines whether the labels of the dock items are shown, when the component loads. - `true`: shows both icons and labels of the dock items. In the vertical layout, the labels are placed beside the icons. In the horizontal mobile layout, they are placed below the icons, in small text that is truncated when there is not enough space. - `false`: only shows icons of the dock items, and displays their labels as tooltips.  In the horizontal mobile layout, there is no room for the button that expands and shrinks the dock, so end-users cannot change this there. Set `expanded` yourself, for example from a user setting.
           * @default false
          */
         "expanded"?: boolean;
@@ -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;
@@ -8363,7 +8529,7 @@ declare namespace LocalJSX {
          */
         "dockItems"?: DockItem[];
         /**
-          * Defines the width of the component, when it loads. - `true`: shows both icons and labels of the Dock items. - `false`: only shows icons of the doc items, and displays their labels as tooltip.  Note: when `useMobileLayout` is `true`, labels will always be shown as tooltips. Read more below…
+          * Defines whether the labels of the dock items are shown, when the component loads. - `true`: shows both icons and labels of the dock items. In the vertical layout, the labels are placed beside the icons. In the horizontal mobile layout, they are placed below the icons, in small text that is truncated when there is not enough space. - `false`: only shows icons of the dock items, and displays their labels as tooltips.  In the horizontal mobile layout, there is no room for the button that expands and shrinks the dock, so end-users cannot change this there. Set `expanded` yourself, for example from a user setting.
           * @default false
          */
         "expanded"?: boolean;
@@ -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.8.1",
+  "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}