@limetech/lime-elements 40.11.3 → 40.12.1

package/dist/types/components.d.ts

@@ -1213,7 +1213,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Helper text of the input field
+          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.
          */
         "helperText": string;
         /**
@@ -1239,7 +1239,7 @@ export namespace Components {
          */
         "paletteColumnCount"?: number;
         /**
-          * The placeholder text shown inside the input field, when the field is focused and empty.
+          * A hint about what to type, such as an example or the format of the value. It is shown inside the field when the field is focused and empty.  Do not use it instead of a `label`, and do not put anything in it that the user needs to know. It disappears when the user starts to type, and some screen readers do not read it. Use `helperText` for that.
          */
         "placeholder": string;
         /**
@@ -1349,7 +1349,7 @@ export namespace Components {
          */
         "formatter"?: (date: Date) => string;
         /**
-          * Optional helper text to display below the input field when it has focus
+          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.
          */
         "helperText": string;
         /**
@@ -1367,7 +1367,7 @@ export namespace Components {
          */
         "language": Languages;
         /**
-          * The placeholder text shown inside the input field, when the field is focused and empty
+          * A hint about what to type, such as an example or the format of the value. It is shown inside the field when the field is focused and empty, but not on iOS and Android, where the native date picker is used.  Do not use it instead of a `label`, and do not put anything in it that the user needs to know. It disappears when the user starts to type, and some screen readers do not read it. Use `helperText` for that.
          */
         "placeholder": string;
         /**
@@ -2059,8 +2059,12 @@ export namespace Components {
      * input field.
      * We created this to keep the visual styles the same everywhere
      * and to avoid importing styles separately.
-     * Also this enables us to open the helper line in limel-portal,
-     * more easily without having to send the styles to the portal.
+     * :::note
+     * The component has `shadow: false`, so that the helper text is part of the
+     * DOM of the consumer. This way, the `id` of the helper text can be used in
+     * the `aria-describedby` of the input element in the consumer, which is
+     * not possible across a shadow root.
+     * :::
      * @exampleComponent limel-example-helper-line-basic
      * @exampleComponent limel-example-helper-line-invalid
      * @exampleComponent limel-example-helper-line-long-text
@@ -2076,7 +2080,7 @@ export namespace Components {
          */
         "helperText"?: string;
         /**
-          * Used by `aria-controls` and `aria-describedby` in the parent component.
+          * Used by `aria-describedby` in the parent component.
          */
         "helperTextId"?: string;
         /**
@@ -2295,7 +2299,7 @@ export namespace Components {
          */
         "getSelectionStart": () => Promise<number | null>;
         /**
-          * Optional helper text to display below the input field when it has focus
+          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.
          */
         "helperText": string;
         /**
@@ -2337,7 +2341,7 @@ export namespace Components {
          */
         "pattern": string;
         /**
-          * The placeholder text shown inside the input field, when the field is focused and empty.
+          * A hint about what to type, such as an example or the format of the value. It is shown inside the field when the field is focused and empty.  Do not use it instead of a `label`, and do not put anything in it that the user needs to know. It disappears when the user starts to type, and some screen readers do not read it. Use `helperText` for that.
          */
         "placeholder": string;
         /**
@@ -3616,70 +3620,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 +3656,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 +3671,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[];
@@ -5780,8 +5743,12 @@ declare global {
      * input field.
      * We created this to keep the visual styles the same everywhere
      * and to avoid importing styles separately.
-     * Also this enables us to open the helper line in limel-portal,
-     * more easily without having to send the styles to the portal.
+     * :::note
+     * The component has `shadow: false`, so that the helper text is part of the
+     * DOM of the consumer. This way, the `id` of the helper text can be used in
+     * the `aria-describedby` of the input element in the consumer, which is
+     * not possible across a shadow root.
+     * :::
      * @exampleComponent limel-example-helper-line-basic
      * @exampleComponent limel-example-helper-line-invalid
      * @exampleComponent limel-example-helper-line-long-text
@@ -6664,73 +6631,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 {
@@ -8377,7 +8299,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Helper text of the input field
+          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.
          */
         "helperText"?: string;
         /**
@@ -8407,7 +8329,7 @@ declare namespace LocalJSX {
          */
         "paletteColumnCount"?: number;
         /**
-          * The placeholder text shown inside the input field, when the field is focused and empty.
+          * A hint about what to type, such as an example or the format of the value. It is shown inside the field when the field is focused and empty.  Do not use it instead of a `label`, and do not put anything in it that the user needs to know. It disappears when the user starts to type, and some screen readers do not read it. Use `helperText` for that.
          */
         "placeholder"?: string;
         /**
@@ -8521,7 +8443,7 @@ declare namespace LocalJSX {
          */
         "formatter"?: (date: Date) => string;
         /**
-          * Optional helper text to display below the input field when it has focus
+          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.
          */
         "helperText"?: string;
         /**
@@ -8543,7 +8465,7 @@ declare namespace LocalJSX {
          */
         "onChange"?: (event: LimelDatePickerCustomEvent<Date>) => void;
         /**
-          * The placeholder text shown inside the input field, when the field is focused and empty
+          * A hint about what to type, such as an example or the format of the value. It is shown inside the field when the field is focused and empty, but not on iOS and Android, where the native date picker is used.  Do not use it instead of a `label`, and do not put anything in it that the user needs to know. It disappears when the user starts to type, and some screen readers do not read it. Use `helperText` for that.
          */
         "placeholder"?: string;
         /**
@@ -9308,8 +9230,12 @@ declare namespace LocalJSX {
      * input field.
      * We created this to keep the visual styles the same everywhere
      * and to avoid importing styles separately.
-     * Also this enables us to open the helper line in limel-portal,
-     * more easily without having to send the styles to the portal.
+     * :::note
+     * The component has `shadow: false`, so that the helper text is part of the
+     * DOM of the consumer. This way, the `id` of the helper text can be used in
+     * the `aria-describedby` of the input element in the consumer, which is
+     * not possible across a shadow root.
+     * :::
      * @exampleComponent limel-example-helper-line-basic
      * @exampleComponent limel-example-helper-line-invalid
      * @exampleComponent limel-example-helper-line-long-text
@@ -9325,7 +9251,7 @@ declare namespace LocalJSX {
          */
         "helperText"?: string;
         /**
-          * Used by `aria-controls` and `aria-describedby` in the parent component.
+          * Used by `aria-describedby` in the parent component.
          */
         "helperTextId"?: string;
         /**
@@ -9532,7 +9458,7 @@ declare namespace LocalJSX {
          */
         "formatNumber"?: boolean;
         /**
-          * Optional helper text to display below the input field when it has focus
+          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.
          */
         "helperText"?: string;
         /**
@@ -9582,7 +9508,7 @@ declare namespace LocalJSX {
          */
         "pattern"?: string;
         /**
-          * The placeholder text shown inside the input field, when the field is focused and empty.
+          * A hint about what to type, such as an example or the format of the value. It is shown inside the field when the field is focused and empty.  Do not use it instead of a `label`, and do not put anything in it that the user needs to know. It disappears when the user starts to type, and some screen readers do not read it. Use `helperText` for that.
          */
         "placeholder"?: string;
         /**
@@ -10946,70 +10872,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 +10908,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 +10929,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 +12224,7 @@ declare namespace LocalJSX {
         "closeLabel": string;
         "resizeLabel": string;
         "closeOnEscape": boolean;
+        "fullScreen": boolean;
     }
     interface LimelSliderAttributes {
         "disabled": boolean;
@@ -13256,8 +13146,12 @@ declare module "@stencil/core" {
              * input field.
              * We created this to keep the visual styles the same everywhere
              * and to avoid importing styles separately.
-             * Also this enables us to open the helper line in limel-portal,
-             * more easily without having to send the styles to the portal.
+             * :::note
+             * The component has `shadow: false`, so that the helper text is part of the
+             * DOM of the consumer. This way, the `id` of the helper text can be used in
+             * the `aria-describedby` of the input element in the consumer, which is
+             * not possible across a shadow root.
+             * :::
              * @exampleComponent limel-example-helper-line-basic
              * @exampleComponent limel-example-helper-line-invalid
              * @exampleComponent limel-example-helper-line-long-text
@@ -13789,70 +13683,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.1",
   "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",