@limetech/lime-elements 40.11.2 → 40.12.0

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

@@ -2,87 +2,28 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { SidePanelAction, SidePanelActionSelect, SidePanelEntry } from './side-panel.types';
 /**
  * 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 and a header.
+ * It does not block the rest of the page. Place it in an element with
+ * `position: relative`.
  *
- * 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 panel has:
+ * - a toolbar with a close button, and buttons from `actions`
+ * - a header that shows the last entry of `stack`, with a slot for controls
+ * - backs behind its left edge, for the other entries of `stack`
+ * - a handle on its left edge, to resize the panel
+ * - a full screen mode, for small screens
  *
- * The CSS custom properties can be set on the panel or on any ancestor.
+ * The panel emits `close`, but does not remove itself. The consumer must
+ * remove it from the DOM.
  *
- * 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.
- *
- * ## 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);
- * }
- * ```
+ * Each example shows one feature in detail, and when to use it.
  *
  * @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
+ * @exampleComponent limel-example-side-panel-stacking
+ * @exampleComponent limel-example-side-panel-full-screen
  * @slot - Content of the panel
  * @slot header-actions - Small controls at the right end of the header. Content that is larger than half the header width or the height of the headings is cut off.
  * @private
@@ -101,7 +42,7 @@ export declare class SidePanel {
     /**
      * 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.
+     * header. The other entries are shown as backs behind the panel.
      */
     stack: SidePanelEntry[];
     /**
@@ -118,6 +59,13 @@ export declare class SidePanel {
      * event either.
      */
     closeOnEscape: boolean;
+    /**
+     * Set to `true` when the screen is too narrow for the panel to be displayed
+     * on top of the page. The panel then covers the full width of the
+     * positioned ancestor. It cannot be resized, and the backs of the stack are
+     * not shown.
+     */
+    fullScreen: boolean;
     /**
      * Emitted when the close button is clicked, or when Escape is pressed and
      * `closeOnEscape` is `true`.
@@ -134,6 +82,11 @@ export declare class SidePanel {
      * restore the width with `--side-panel-width` the next time the panel opens.
      */
     changeWidth: EventEmitter<number>;
+    /**
+     * Emitted when a back of the stack is clicked. The detail is the index of
+     * its entry in `stack`.
+     */
+    selectStackEntry: EventEmitter<number>;
     private host;
     private widthRange?;
     private panel;
@@ -141,7 +94,9 @@ export declare class SidePanel {
     private maxLimit?;
     private closeButtonId;
     private actionIdPrefix;
+    private backIdPrefix;
     private widthObserver?;
+    private focusCloseButtonAfterRender;
     /**
      * The width before the resize that is in progress, in pixels. `undefined`
      * when the user is not resizing the panel.
@@ -154,10 +109,15 @@ export declare class SidePanel {
     connectedCallback(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    protected handleBacksChange(): void;
+    componentDidRender(): void;
     render(): any;
     private renderCloseButton;
     private renderActions;
     private renderAction;
+    private renderStack;
+    private isFocusedBackRemoved;
+    private renderBack;
     private renderHeader;
     private renderHandle;
     private renderBody;
@@ -196,6 +156,7 @@ export declare class SidePanel {
     private removeFromOpenPanels;
     private isLastOpened;
     private setWidth;
+    private getPanelBoxes;
     private handleChangeSize;
     private handleEndResize;
     private rememberWidthBeforeResize;
@@ -210,6 +171,7 @@ export declare class SidePanel {
     private measureWidthRange;
     private currentWidth;
     private handleClickAction;
+    private handleClickBack;
     private handleClickClose;
 }
 //# sourceMappingURL=side-panel.d.ts.map

package/dist/types/components.d.ts

@@ -3616,70 +3616,24 @@ 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 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
-     * 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.
-     * ## 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);
-     * }
-     * ```
+     * It does not block the rest of the page. Place it in an element with
+     * `position: relative`.
+     * The panel has:
+     * - a toolbar with a close button, and buttons from `actions`
+     * - a header that shows the last entry of `stack`, with a slot for controls
+     * - backs behind its left edge, for the other entries of `stack`
+     * - a handle on its left edge, to resize the panel
+     * - a full screen mode, for small screens
+     * The panel emits `close`, but does not remove itself. The consumer must
+     * remove it from the DOM.
+     * Each example shows one feature in detail, and when to use it.
      * @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
+     * @exampleComponent limel-example-side-panel-stacking
+     * @exampleComponent limel-example-side-panel-full-screen
      * @private 
      */
     interface LimelSidePanel {
@@ -3698,6 +3652,11 @@ export namespace Components {
           * @default true
          */
         "closeOnEscape": boolean;
+        /**
+          * Set to `true` when the screen is too narrow for the panel to be displayed on top of the page. The panel then covers the full width of the positioned ancestor. It cannot be resized, and the backs of the stack are not shown.
+          * @default false
+         */
+        "fullScreen": boolean;
         /**
           * Accessible name of the panel. Screen readers announce it. Set it to something that tells the user what the panel is for.
          */
@@ -3708,7 +3667,7 @@ export namespace Components {
          */
         "resizeLabel": string;
         /**
-          * The panels in the stack, outermost first. The last entry is the panel that is displayed. Its heading, subheading and icon are shown in the header.
+          * The panels in the stack, outermost first. The last entry is the panel that is displayed. Its heading, subheading and icon are shown in the header. The other entries are shown as backs behind the panel.
           * @default []
          */
         "stack": SidePanelEntry[];
@@ -6664,73 +6623,28 @@ declare global {
         "close": void;
         "selectAction": SidePanelActionSelect;
         "changeWidth": number;
+        "selectStackEntry": 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 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
-     * 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.
-     * ## 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);
-     * }
-     * ```
+     * It does not block the rest of the page. Place it in an element with
+     * `position: relative`.
+     * The panel has:
+     * - a toolbar with a close button, and buttons from `actions`
+     * - a header that shows the last entry of `stack`, with a slot for controls
+     * - backs behind its left edge, for the other entries of `stack`
+     * - a handle on its left edge, to resize the panel
+     * - a full screen mode, for small screens
+     * The panel emits `close`, but does not remove itself. The consumer must
+     * remove it from the DOM.
+     * Each example shows one feature in detail, and when to use it.
      * @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
+     * @exampleComponent limel-example-side-panel-stacking
+     * @exampleComponent limel-example-side-panel-full-screen
      * @private 
      */
     interface HTMLLimelSidePanelElement extends Components.LimelSidePanel, HTMLStencilElement {
@@ -10946,70 +10860,24 @@ 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 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
-     * 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.
-     * ## 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);
-     * }
-     * ```
+     * It does not block the rest of the page. Place it in an element with
+     * `position: relative`.
+     * The panel has:
+     * - a toolbar with a close button, and buttons from `actions`
+     * - a header that shows the last entry of `stack`, with a slot for controls
+     * - backs behind its left edge, for the other entries of `stack`
+     * - a handle on its left edge, to resize the panel
+     * - a full screen mode, for small screens
+     * The panel emits `close`, but does not remove itself. The consumer must
+     * remove it from the DOM.
+     * Each example shows one feature in detail, and when to use it.
      * @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
+     * @exampleComponent limel-example-side-panel-stacking
+     * @exampleComponent limel-example-side-panel-full-screen
      * @private 
      */
     interface LimelSidePanel {
@@ -11028,6 +10896,11 @@ declare namespace LocalJSX {
           * @default true
          */
         "closeOnEscape"?: boolean;
+        /**
+          * Set to `true` when the screen is too narrow for the panel to be displayed on top of the page. The panel then covers the full width of the positioned ancestor. It cannot be resized, and the backs of the stack are not shown.
+          * @default false
+         */
+        "fullScreen"?: boolean;
         /**
           * Accessible name of the panel. Screen readers announce it. Set it to something that tells the user what the panel is for.
          */
@@ -11044,13 +10917,17 @@ declare namespace LocalJSX {
           * 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;
+        /**
+          * Emitted when a back of the stack is clicked. The detail is the index of its entry in `stack`.
+         */
+        "onSelectStackEntry"?: (event: LimelSidePanelCustomEvent<number>) => void;
         /**
           * Label of the resize handle. Used as the accessible name.
           * @default 'Resize'
          */
         "resizeLabel"?: string;
         /**
-          * The panels in the stack, outermost first. The last entry is the panel that is displayed. Its heading, subheading and icon are shown in the header.
+          * The panels in the stack, outermost first. The last entry is the panel that is displayed. Its heading, subheading and icon are shown in the header. The other entries are shown as backs behind the panel.
           * @default []
          */
         "stack"?: SidePanelEntry[];
@@ -12335,6 +12212,7 @@ declare namespace LocalJSX {
         "closeLabel": string;
         "resizeLabel": string;
         "closeOnEscape": boolean;
+        "fullScreen": boolean;
     }
     interface LimelSliderAttributes {
         "disabled": boolean;
@@ -13789,70 +13667,24 @@ 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 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
-             * 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.
-             * ## 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);
-             * }
-             * ```
+             * It does not block the rest of the page. Place it in an element with
+             * `position: relative`.
+             * The panel has:
+             * - a toolbar with a close button, and buttons from `actions`
+             * - a header that shows the last entry of `stack`, with a slot for controls
+             * - backs behind its left edge, for the other entries of `stack`
+             * - a handle on its left edge, to resize the panel
+             * - a full screen mode, for small screens
+             * The panel emits `close`, but does not remove itself. The consumer must
+             * remove it from the DOM.
+             * Each example shows one feature in detail, and when to use it.
              * @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
+             * @exampleComponent limel-example-side-panel-stacking
+             * @exampleComponent limel-example-side-panel-full-screen
              * @private 
              */
             "limel-side-panel": LocalJSX.IntrinsicElements["limel-side-panel"] & JSXBase.HTMLAttributes<HTMLLimelSidePanelElement>;

package/dist/types/util/focus-trigger-element.d.ts

@@ -1,10 +1,10 @@
 /**
- * Focuses the first focusable element inside a trigger element.
- * Supports custom elements by searching both the element's shadow root
- * and its light DOM.
+ * Focuses a trigger element, or the first focusable element inside it if the
+ * trigger can not take focus itself. Supports custom elements by searching
+ * both the element's shadow root and its light DOM.
  *
  * @param trigger - The trigger element to focus.
- * @returns `true` if focus was moved, otherwise `false`.
+ * @returns `false` if there is no trigger, or it is disabled. Otherwise `true`.
  */
 export declare const focusTriggerElement: (trigger?: HTMLElement | null) => boolean;
 //# sourceMappingURL=focus-trigger-element.d.ts.map

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

@@ -1,14 +1,26 @@
 /**
- * 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.
+ * Get the element that gets the focus when a user moves to `owner`. 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.
+ * never used itself, since the focus lands on the element inside.
  *
+ * Waits for the components in the way to render, so use this for an owner
+ * that may not have rendered yet.
+ *
+ * @see findFocusTarget for an owner that has already rendered
  * @param owner
  */
 export declare function getFocusTarget(owner: HTMLElement): Promise<HTMLElement>;
+/**
+ * Same as `getFocusTarget`, for an owner that has already rendered, without
+ * waiting for any component.
+ *
+ * @see getFocusTarget for an owner that may not have rendered yet
+ * @param owner
+ */
+export declare function findFocusTarget(owner: HTMLElement): HTMLElement;
 //# sourceMappingURL=get-focus-target.d.ts.map