@limetech/lime-elements 40.10.0 → 40.11.0

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

@@ -0,0 +1,83 @@
+import { Color } from '../../global/shared-types/color.types';
+import { Icon, IconName } from '../../global/shared-types/icon.types';
+/**
+ * One panel in the stack of a side panel.
+ *
+ * @beta
+ */
+export interface SidePanelEntry {
+    /**
+     * Heading of the panel.
+     */
+    heading: string;
+    /**
+     * Second line below the heading.
+     */
+    subheading?: string;
+    /**
+     * Icon shown next to the heading.
+     */
+    icon?: IconName | Icon;
+    /**
+     * Background color of the header. When it is set, the heading and the
+     * subheading are white, with a text shadow, so that they are easier to
+     * read on the color. Use a color that is dark enough for white text.
+     */
+    color?: Color;
+}
+/**
+ * A button in the toolbar of a side panel.
+ *
+ * @beta
+ */
+export interface SidePanelAction {
+    /**
+     * The kind of button.
+     */
+    type: SidePanelActionType;
+    /**
+     * Label of the button. Shown as a tooltip and used as the accessible name.
+     */
+    label: string;
+    /**
+     * Identifies the action in the `selectAction` event. Defaults to `type`.
+     */
+    id?: string;
+    /**
+     * Additional text in the tooltip, below the label. For example the name
+     * of what the action opens.
+     */
+    helperLabel?: string;
+    /**
+     * If set, the action is a link to this URL. The user can then open it in
+     * a new tab, like any other link. `selectAction` is still emitted. To
+     * handle the navigation in another way, call `preventDefault` on its
+     * `event`, but only for a plain click with the primary button: `button` is
+     * `0`, and `metaKey`, `ctrlKey`, `shiftKey` and `altKey` are `false`. Let
+     * the browser handle all other clicks, so that the user can still open the
+     * link in a new tab.
+     */
+    href?: string;
+}
+/**
+ * Detail of the `selectAction` event of a side panel.
+ *
+ * @beta
+ */
+export interface SidePanelActionSelect {
+    /**
+     * The `id` of the clicked action, or its `type` if it has no `id`.
+     */
+    id: string;
+    /**
+     * The click event.
+     */
+    event: MouseEvent;
+}
+/**
+ * The kinds of buttons that can be used as actions in a side panel.
+ *
+ * @beta
+ */
+export type SidePanelActionType = 'newTab' | 'expand';
+//# sourceMappingURL=side-panel.types.d.ts.map

package/dist/types/components/tooltip/description-registry.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Set the `aria-description` of an element on behalf of an owner. The
+ * description that the element had before is kept, for when the last owner
+ * stops describing it.
+ *
+ * @param element
+ * @param owner
+ * @param text
+ */
+export declare function setDescription(element: Element, owner: object, text: string): void;
+/**
+ * Stop describing an element on behalf of an owner. The text of the owner
+ * that described it most recently stays, and when none is left, the
+ * description that the element had before is put back. Nothing is changed
+ * if the attribute has been changed by someone else.
+ *
+ * @param element
+ * @param owner
+ */
+export declare function clearDescription(element: Element, owner: object): void;
+//# sourceMappingURL=description-registry.d.ts.map

package/dist/types/components/tooltip/get-description.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Get the text that a screen reader should read as the description of the
+ * element that a tooltip describes. The label and the helper label are left
+ * out when they only repeat the name of the element, or the text of one of
+ * its parts, so that they are not read twice.
+ *
+ * @param element
+ * @param label
+ * @param helperLabel
+ * @param hotkey
+ */
+export declare function getDescription(element: HTMLElement, label: string, helperLabel?: string, hotkey?: string): string;
+//# sourceMappingURL=get-description.d.ts.map

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

@@ -43,14 +43,19 @@ export declare class Tooltip {
     elementId: string;
     /**
      * Short descriptive text of the owner element.
+     * Screen readers read it as a part of the description of the element,
+     * unless it only repeats the name that the element already has.
      */
     label: string;
     /**
      * Additional helper text for the element.
+     * Screen readers read it as a part of the description of the element.
      */
     helperLabel?: string;
     /**
      * Keyboard shortcut to visualize inside the tooltip, e.g. `"ctrl+f"`.
+     * Screen readers read it, written out in words, as a part of the
+     * description of the element.
      * Display-only: the tooltip does not listen for the keystroke.
      * Catching the hotkey is the consumer's responsibility.
      */
@@ -67,14 +72,17 @@ export declare class Tooltip {
     private host;
     private open;
     private portalId;
-    private tooltipId;
     private ownerElement;
+    private describedElement?;
+    private latestUpdate;
     private tooltipTimer;
     constructor();
-    connectedCallback(): void;
+    connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
+    protected watchDescription(): Promise<void>;
     render(): JSX.Element;
-    private setOwnerAriaDescribedby;
+    private updateDescription;
+    private restoreDescription;
     private addListeners;
     private removeListeners;
     private showTooltip;

package/dist/types/components.d.ts

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

package/dist/types/interface.d.ts

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

package/dist/types/util/get-focus-target.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Get the element that a screen reader describes for the owner element of a
+ * tooltip. That is the owner itself if it can be focused, otherwise the first
+ * element that can be focused inside it, also inside shadow roots. A disabled
+ * control is only used when there is nothing that can be focused, and if
+ * there is no control at all, the owner itself is used.
+ *
+ * An element that passes the focus on to an element in its shadow root is
+ * never used itself, since the screen reader lands on the element inside.
+ *
+ * @param owner
+ */
+export declare function getFocusTarget(owner: HTMLElement): Promise<HTMLElement>;
+//# sourceMappingURL=get-focus-target.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "40.10.0",
+  "version": "40.11.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -85,7 +85,7 @@
     "html-escaper": "^3.0.3",
     "jsonlint-mod": "^1.7.6",
     "jsx-dom": "^8.1.6",
-    "kompendium": "npm:@limetech/kompendium@^1.3.0",
+    "kompendium": "npm:@limetech/kompendium@^1.4.1",
     "lodash-es": "^4.17.23",
     "material-components-web": "^13.0.0",
     "mdast-util-to-markdown": "^2.2.0",
@@ -94,7 +94,7 @@
     "number-abbreviate": "^2.0.0",
     "parse-css-color": "^0.2.1",
     "postal-mime": "^4.0.5",
-    "prettier": "^3.9.9",
+    "prettier": "^3.9.10",
     "prosemirror-example-setup": "^1.2.3",
     "prosemirror-markdown": "^1.13.8",
     "prosemirror-model": ">=1.25.12",

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

@@ -1 +0,0 @@
-import{r as e,c as i,h as t,H as s,a as o}from"./p-BU9IJqli.js";import{E as r}from"./p-Bu6-QXrA.js";import{c as a}from"./p-BrjD-ITe.js";const n=[];function l(e){e.stopPropagation()}const d=class{constructor(t){e(this,t),this.close=i(this,"close",7),this.changeWidth=i(this,"changeWidth",7),this.closeLabel="Close",this.resizeLabel="Resize",this.closeOnEscape=!0,this.closeButtonId=a(),this.setBody=e=>{this.body=e,this.stopContentEventsInBody()},this.restoreFocus=()=>{const e=!document.activeElement||document.activeElement===document.body;if(this.host.isConnected||!e)return;const i=this.focusedBefore;this.focusedBefore=void 0,(null==i?void 0:i.isConnected)&&i.focus()},this.setPanel=e=>{this.panel=e},this.setMinLimit=e=>{this.minLimit=e},this.setMaxLimit=e=>{this.maxLimit=e},this.handleKeyDown=e=>{this.closeOnEscape&&e.key===r&&!e.defaultPrevented&&this.isLastOpened()&&(e.preventDefault(),this.close.emit())},this.handleChangeSize=e=>{this.rememberWidthBeforeResize(),this.setWidth(e.detail)},this.handleEndResize=()=>{if(!this.isResizing())return;const e=this.widthBeforeResize;this.widthBeforeResize=void 0,this.keepClampedWidth(),this.updateWidthRange(),this.emitWidthIfChanged(e)},this.handleSizeChange=e=>{e.every(this.isMeasured)||this.updateWidthRange()},this.isMeasured=e=>{var i;return e.target===this.panel&&Math.round(e.borderBoxSize[0].inlineSize)===(null===(i=this.widthRange)||void 0===i?void 0:i.now)},this.updateWidthRange=()=>{this.isResizing()||(this.widthRange=this.measureWidthRange())},this.handleClickClose=()=>{this.close.emit()}}connectedCallback(){n.push(this),window.addEventListener("keydown",this.handleKeyDown),this.rememberFocusedElement(),this.observeWidth()}componentDidLoad(){this.observeWidth(),this.moveFocusIntoPanel()}disconnectedCallback(){this.widthBeforeResize=void 0,this.stopObservingWidth(),window.removeEventListener("keydown",this.handleKeyDown),this.removeFromOpenPanels(),queueMicrotask(this.restoreFocus)}render(){return t(s,{key:"1c18f40fb45731bdf157d651d4e649446de5230b"},t("section",{key:"e8b41bded39732750ae3db9b1daf14dc742e1cb7",ref:this.setPanel,role:"dialog","aria-label":this.label,tabindex:"-1"},this.renderHandle(),t("div",{key:"3cba5523e0cbe45fa328daaa40136c063a8c3ac3",class:"content"},t("div",{key:"b5cbc1260b4e6f31ac789179ab4b5a0281b9133b",class:"toolbar"},this.renderCloseButton()),this.renderBody())),t("span",{key:"5fe872f05a6cc49027f84d71a765baa59a53adb9","data-limit":"min",ref:this.setMinLimit}),t("span",{key:"5042e7437e61ae5308e13b1a30f5df24747e2cdf","data-limit":"max",ref:this.setMaxLimit}))}renderCloseButton(){return t("button",{class:"close",id:this.closeButtonId,"aria-label":this.closeLabel,onClick:this.handleClickClose},t("limel-icon",{name:"multiply","aria-hidden":"true"}),t("limel-tooltip",{elementId:this.closeButtonId,label:this.closeLabel}))}renderHandle(){var e,i,s;return t("limel-resize-handle",{class:"handle",label:this.resizeLabel,value:null===(e=this.widthRange)||void 0===e?void 0:e.now,min:null===(i=this.widthRange)||void 0===i?void 0:i.min,max:null===(s=this.widthRange)||void 0===s?void 0:s.max,onChangeSize:this.handleChangeSize,onEndResize:this.handleEndResize})}renderBody(){return t("div",{class:"body",ref:this.setBody},t("slot",null))}stopContentEventsInBody(){var e,i;null===(e=this.body)||void 0===e||e.addEventListener("close",l),null===(i=this.body)||void 0===i||i.addEventListener("changeWidth",l)}stopContentEventAtHost(e){e.target!==this.host&&e.stopImmediatePropagation()}moveFocusIntoPanel(){this.panel.focus({preventScroll:!0})}rememberFocusedElement(){const e=function(){var e;let i=document.activeElement;for(;null===(e=null==i?void 0:i.shadowRoot)||void 0===e?void 0:e.activeElement;)i=i.shadowRoot.activeElement;return i}();e&&e!==document.body&&(this.focusedBefore=e)}removeFromOpenPanels(){const e=n.indexOf(this);-1!==e&&n.splice(e,1)}isLastOpened(){return n.at(-1)===this}setWidth(e){this.panel.style.width=`${e}px`}rememberWidthBeforeResize(){this.isResizing()||(this.widthBeforeResize=this.currentWidth())}isResizing(){return void 0!==this.widthBeforeResize}keepClampedWidth(){this.setWidth(this.currentWidth())}emitWidthIfChanged(e){const i=this.currentWidth();i!==e&&this.changeWidth.emit(i)}observeWidth(){if(this.stopObservingWidth(),this.panel){this.widthObserver=new ResizeObserver(this.handleSizeChange);for(const e of[this.panel,this.minLimit,this.maxLimit])e&&this.widthObserver.observe(e)}}stopObservingWidth(){var e;null===(e=this.widthObserver)||void 0===e||e.disconnect(),this.widthObserver=void 0}measureWidthRange(){const e=this.minLimit.offsetWidth,i=Math.max(e,this.maxLimit.offsetWidth);return{now:Math.round(this.currentWidth()),min:Math.round(e),max:Math.round(i)}}currentWidth(){return this.panel.offsetWidth}get host(){return o(this)}};d.style='@charset "UTF-8";:host(limel-side-panel){--_side-panel-width:var(--side-panel-width, 37.5rem);--_side-panel-min-width:var(--side-panel-min-width, 25rem);--_side-panel-top-inset:var(--side-panel-top-inset, 0px);--_side-panel-right-inset:var(--side-panel-right-inset, 0px);--_side-panel-bottom-inset:var(--side-panel-bottom-inset, 0px);--_side-panel-z-index:var(--side-panel-z-index, 6)}@keyframes show-side-panel{0%{transform:translate3d(12.5rem, 0, 0) scale(0.95);opacity:0}60%{opacity:1}100%{transform:translate3d(0, 0, 0) scale(1)}}section{position:absolute;z-index:var(--_side-panel-z-index);top:var(--_side-panel-top-inset);right:var(--_side-panel-right-inset);bottom:var(--_side-panel-bottom-inset);margin:0.5rem;display:flex;flex-direction:column;isolation:isolate;width:var(--_side-panel-width);min-width:min(var(--_side-panel-min-width), 100% - 1rem);max-width:min(100% - 1rem - 3rem, 60%);max-height:100%;border-radius:1rem;box-shadow:var(--shadow-depth-64);transform-origin:left center;transition:background-color 0.5s ease, transform 0.3s ease, opacity 0.2s ease, right 0.2s ease;animation:show-side-panel 0.46s cubic-bezier(0.08, 0.54, 0.06, 1.11) forwards}section:focus{outline:none}@media (prefers-reduced-motion){section{animation:none;transition:none}}.content{display:flex;flex-direction:column;flex-grow:1;min-height:0;overflow:hidden;border-radius:1rem;background-color:rgb(var(--contrast-100))}.toolbar{flex-shrink:0;display:flex;align-items:center;gap:0.25rem;box-sizing:border-box;min-height:2.375rem;padding:0.25rem 0.125rem;background-color:rgb(var(--contrast-300))}.close{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}.close:hover,.close:focus,.close:focus-visible{will-change:color, background-color, box-shadow, transform}.close:hover,.close:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.close:hover{box-shadow:var(--button-shadow-hovered)}.close:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.close:hover,.close:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.close:focus{outline:none}.close:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.close{isolation:isolate;position:relative;display:flex;justify-content:center;align-items:center;width:1.875rem;height:1.875rem;border-radius:50%}.close limel-icon{width:1.25rem;transition:transform 0.2s ease, color 0.2s ease}.close:before,.close:after{content:"";position:absolute;z-index:-1;inset:0;border-radius:50%;opacity:0;transition-delay:0.1s}.close:before{transition:transform 0.3s ease, opacity 0.3s ease;background-color:rgb(var(--color-orange-dark))}.close:after{transition:transform 0.6s ease, opacity 0.6s ease;background-color:rgb(var(--color-orange-light))}.close:hover limel-icon{color:rgb(var(--color-white));transform:scale(0.7) rotate(90deg)}.close:hover:before{opacity:1;transform:scale(0.4)}.close:hover:after{opacity:0.4;transform:scale(0.6)}.body{flex-grow:1;min-height:0;display:flex;flex-direction:column;overflow:hidden auto}.handle{position:absolute;z-index:1;top:calc(2.375rem + 0.5rem);bottom:1rem;left:calc(0.5rem / -2);width:0.5rem}[data-limit]{position:absolute;visibility:hidden;pointer-events:none;height:0}[data-limit=min]{width:min(var(--_side-panel-min-width), 100% - 1rem)}[data-limit=max]{width:min(100% - 1rem - 3rem, 60%)}';export{d as limel_side_panel}