@limetech/lime-elements 40.11.3 → 40.12.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "40.11.3",
+  "version": "40.12.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -56,14 +56,14 @@
     "@commitlint/config-conventional": "^21.2.3",
     "@limetech/eslint-config": "^5.0.1",
     "@microsoft/api-extractor": "^7.59.4",
-    "@playwright/test": "1.64.0",
+    "@playwright/test": "1.64.1",
     "@popperjs/core": "^2.11.8",
     "@rjsf/core": "^6.11.0",
     "@rjsf/utils": "^6.11.0",
     "@rjsf/validator-ajv8": "^6.11.0",
     "@stencil/core": "^4.43.5",
     "@stencil/sass": "^3.3.3",
-    "@stencil/vitest": "^1.15.1",
+    "@stencil/vitest": "^1.16.1",
     "@types/codemirror": "^5.60.17",
     "@types/html-escaper": "^3.0.4",
     "@types/lodash-es": "^4.17.12",
@@ -93,7 +93,7 @@
     "morphdom": "^2.7.8",
     "number-abbreviate": "^2.0.0",
     "parse-css-color": "^0.2.1",
-    "postal-mime": "^4.0.5",
+    "postal-mime": "^4.0.6",
     "prettier": "^3.9.10",
     "prosemirror-example-setup": "^1.2.3",
     "prosemirror-markdown": "^1.13.8",
@@ -101,8 +101,8 @@
     "prosemirror-schema-basic": "^1.2.5",
     "prosemirror-tables": "^1.8.5",
     "prosemirror-test-builder": "^1.1.1",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
     "rehype-parse": "^9.0.1",
     "rehype-raw": "^7.0.0",
     "rehype-remark": "^10.0.1",