@limetech/lime-elements 40.11.3 → 40.12.1

package/dist/collection/components/helper-line/helper-line.js

@@ -7,8 +7,12 @@ import { Host, h } from "@stencil/core";
  * 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
@@ -46,12 +50,11 @@ export class HelperLine {
         };
     }
     render() {
-        return (h(Host, { key: '69872d6dcdbecf1d703a9fb441f118f9389596bc', tabIndex: -1, class: {
+        return (h(Host, { key: 'ac3dcfadd4d281bf64bce4124602279eef598d87', tabIndex: -1, class: {
                 invalid: this.invalid,
-            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: 'bf63441b2481b1d91fae50d7f85630e361fb2089' }, this.renderHelperText(), this.renderCharacterCounter())));
+            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '80aaa762e38841ed13a880cc5444c8aa23025130' }, this.renderHelperText(), this.renderCharacterCounter())));
     }
     static get is() { return "limel-helper-line"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["helper-line.scss"]
@@ -153,7 +156,7 @@ export class HelperLine {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Used by `aria-controls` and `aria-describedby` in the parent component."
+                    "text": "Used by `aria-describedby` in the parent component."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/input-field/input-field.js

@@ -590,21 +590,16 @@ export class InputField {
         properties.required = this.required;
         properties.readonly = this.readonly;
         properties.disabled = this.disabled || this.readonly;
-        let ariaControls = '';
         if (this.hasHelperText()) {
-            ariaControls += this.helperTextId;
             properties['aria-describedby'] = this.helperTextId;
         }
-        if (this.renderAutocompleteList()) {
-            if (ariaControls) {
-                ariaControls += ' ';
-            }
-            ariaControls += this.portalId;
+        if (this.isInvalid()) {
+            properties['aria-invalid'] = 'true';
         }
-        if (ariaControls) {
-            properties['aria-controls'] = ariaControls;
+        if (this.renderAutocompleteList()) {
+            properties['aria-controls'] = this.portalId;
         }
-        return (h(Host, { key: 'dfb11ef606088978c2d3b4622b5d600187e532fa' }, h("limel-notched-outline", { key: 'd91fe3bb99eee9f7562db2c2b6bd6e2b01a4b5cb', labelId: this.inputId, labelElementId: this.labelElementId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: '4ab780c977ce088267686753b0c53f1dfcbb2f11', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
+        return (h(Host, { key: '88b9b2a3b7763341aff9796754e8e59ea979ed1f' }, h("limel-notched-outline", { key: '27a236db38f4f6f9690c7a44e294867b7a4f915f', labelId: this.inputId, labelElementId: this.labelElementId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: 'b20d232b3f4cf805b5a6b459b6d9193dc95e8b19', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
     }
     valueWatcher(newValue) {
         if (!this.mdcTextField || this.changeWaiting) {
@@ -738,7 +733,7 @@ export class InputField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The placeholder text shown inside the input field, when the field is focused and empty."
+                    "text": "A hint about what to type, such as an example or the format of the\nvalue. It is shown inside the field when the field is focused and empty.\n\nDo not use it instead of a `label`, and do not put anything in it that\nthe user needs to know. It disappears when the user starts to type, and\nsome screen readers do not read it. Use `helperText` for that."
                 },
                 "getter": false,
                 "setter": false,
@@ -757,7 +752,7 @@ export class InputField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Optional helper text to display below the input field when it has focus"
+                    "text": "Optional helper text to display below the input field when it has focus.\nScreen readers read it as the description of the field, so use it for\nwhat the user needs to know, such as the format of the value or a\nrequirement."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/select/select.template.js

@@ -5,6 +5,7 @@ import { getIconColor, getIconName } from "../icon/get-icon-props";
 const TRIGGER_ID = 's-trigger';
 const LABEL_ID = 's-label';
 const SELECTED_TEXT_ID = 's-selected-text';
+const HELPER_TEXT_ID = 's-helper-text';
 export const SelectTemplate = (props) => {
     const value = props.value;
     let hasValue = !!props.value;
@@ -37,6 +38,10 @@ export const SelectTemplate = (props) => {
         h(SelectDropdown, Object.assign({}, props)),
     ];
 };
+const getDescribedBy = (props) => {
+    var _a;
+    return ((_a = props.helperText) === null || _a === void 0 ? void 0 : _a.trim()) ? HELPER_TEXT_ID : undefined;
+};
 const floatLabelAbove = (props) => {
     if (props.isOpen) {
         return true;
@@ -58,7 +63,7 @@ const SelectValue = (props) => {
     };
     return (h("button", { id: TRIGGER_ID, slot: "content", class: anchorClassList, onClick: props.open, onKeyDown: props.onTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": props.isOpen, "aria-controls": props.id, "aria-labelledby": props.label
             ? `${LABEL_ID} ${SELECTED_TEXT_ID}`
-            : SELECTED_TEXT_ID, "aria-required": props.required, disabled: props.disabled || props.readonly }, h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), getSelectedPrimaryComponent(props.value), h("span", { id: SELECTED_TEXT_ID, class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
+            : SELECTED_TEXT_ID, "aria-describedby": getDescribedBy(props), "aria-required": props.required, disabled: props.disabled || props.readonly }, h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), getSelectedPrimaryComponent(props.value), h("span", { id: SELECTED_TEXT_ID, class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
 };
 const ShowIcon = (props) => {
     if (props.isValid) {
@@ -70,7 +75,7 @@ const HelperText = (props) => {
     if (typeof props.text !== 'string') {
         return;
     }
-    return (h("limel-helper-line", { helperText: props.text.trim(), invalid: !props.isValid }));
+    return (h("limel-helper-line", { helperText: props.text.trim(), helperTextId: HELPER_TEXT_ID, invalid: !props.isValid }));
 };
 const SelectDropdown = (props) => {
     if (props.native) {
@@ -92,7 +97,7 @@ const NativeDropdown = (props) => {
     const options = props.options
         .filter((option) => !('separator' in option))
         .map(renderOption(props.value));
-    return (h("select", { required: props.required, "aria-labelledby": props.label ? LABEL_ID : undefined, "aria-disabled": props.disabled, "aria-required": props.required, onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled, multiple: props.multiple }, options));
+    return (h("select", { required: props.required, "aria-labelledby": props.label ? LABEL_ID : undefined, "aria-describedby": getDescribedBy(props), "aria-disabled": props.disabled, "aria-required": props.required, onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled, multiple: props.multiple }, options));
 };
 const renderOption = (selectedOption) => {
     return (option) => {

package/dist/collection/components/side-panel/side-panel.css

@@ -132,19 +132,19 @@
 }
 section {
   position: absolute;
-  z-index: var(--_side-panel-z-index);
   top: var(--_side-panel-top-inset);
   right: var(--_side-panel-right-inset);
   bottom: var(--_side-panel-bottom-inset);
   margin: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  isolation: isolate;
   width: var(--_side-panel-width);
   min-width: min(var(--_side-panel-min-width), 100% - 1rem);
   max-width: min(100% - 1rem - 3rem, 60%);
   max-height: 100%;
   border-radius: 1rem;
+  z-index: var(--_side-panel-z-index);
+  display: flex;
+  flex-direction: column;
+  isolation: isolate;
   box-shadow: var(--shadow-depth-64);
   transform-origin: left center;
   transition: background-color 0.5s ease, transform 0.3s ease, opacity 0.2s ease, right 0.2s ease;
@@ -160,7 +160,8 @@ section:focus {
   }
 }
 
-.content {
+.content,
+.stack {
   --dropdown-z-index: var(
       --_side-panel-dropdown-z-index,
       calc(var(--_side-panel-z-index) + 1)
@@ -173,6 +174,21 @@ section:focus {
       --_side-panel-tooltip-z-index,
       calc(var(--_side-panel-z-index) + 1)
   );
+}
+
+:host([full-screen]) section {
+  left: 0;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  margin: 0;
+}
+:host([full-screen]) section,
+:host([full-screen]) .content {
+  border-radius: 0;
+}
+
+.content {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -415,7 +431,7 @@ section:focus {
   --side-panel-header-text-color: var(--limel-theme-on-surface-color);
   --header-top-right-left-border-radius: 0;
   flex-shrink: 0;
-  min-height: calc(1.25rem + 1rem + 2 * 0.125rem);
+  min-height: 2.5rem;
   padding: 0.125rem 0.75rem 0.125rem 0.25rem;
   background-color: var(--header-background-color, rgb(var(--contrast-200)));
 }
@@ -472,4 +488,100 @@ section:focus {
 
 [data-limit=max] {
   width: min(100% - 1rem - 3rem, 60%);
+}
+
+.stack {
+  position: absolute;
+  inset: 0;
+  z-index: calc(var(--_side-panel-z-index) - 1);
+  pointer-events: none;
+}
+
+.back {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  position: absolute;
+  top: var(--_side-panel-top-inset);
+  right: var(--_side-panel-right-inset);
+  bottom: var(--_side-panel-bottom-inset);
+  margin: 0.5rem;
+  width: var(--_side-panel-width);
+  min-width: min(var(--_side-panel-min-width), 100% - 1rem);
+  max-width: min(100% - 1rem - 3rem, 60%);
+  max-height: 100%;
+  border-radius: 1rem;
+}
+.back:focus {
+  outline: none;
+}
+.back:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.back {
+  pointer-events: auto;
+  cursor: pointer;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: rgb(var(--contrast-100));
+  box-shadow: var(--shadow-depth-16);
+  transform-origin: left center;
+  transition: transform 0.3s ease, box-shadow 0.2s ease, background-color 0.2s ease, right 0.2s ease;
+}
+@media (prefers-reduced-motion) {
+  .back {
+    transition: none;
+  }
+}
+.back:nth-last-child(1) {
+  transform: translate3d(-1.4rem, 0, 0) scale(0.98);
+}
+.back:nth-last-child(2) {
+  transform: translate3d(-2.3rem, 0, 0) scale(0.96);
+}
+.back:nth-last-child(3) {
+  transform: translate3d(-3rem, 0, 0) scale(0.94);
+}
+.back:nth-last-child(n+4) {
+  transform: translate3d(-3.4rem, 0, 0) scale(0.92);
+}
+.back:hover {
+  box-shadow: var(--shadow-depth-64);
+}
+.back:hover, .back:focus-visible {
+  right: calc(var(--_side-panel-right-inset) + 0.25rem);
+  background-color: var(--lime-elevated-surface-background-color);
+}
+
+.stack:has(.back:hover) .back:nth-last-child(2) {
+  transform: translate3d(-2.6rem, 0, 0) scale(0.96);
+}
+.stack:has(.back:hover) .back:nth-last-child(3) {
+  transform: translate3d(-3.8rem, 0, 0) scale(0.94);
+}
+.stack:has(.back:hover) .back:nth-last-child(n+4) {
+  transform: translate3d(-4.9rem, 0, 0) scale(0.92);
+}
+
+.back-toolbar,
+.back-band {
+  flex-shrink: 0;
+}
+
+.back-toolbar {
+  height: 2.375rem;
+  background-color: rgb(var(--contrast-300));
+}
+
+.back-band {
+  height: 2.5rem;
+  background-color: rgb(var(--contrast-200));
 }

package/dist/collection/components/side-panel/side-panel.js

@@ -22,87 +22,28 @@ function stopEvent(event) {
 }
 /**
  * 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
@@ -117,7 +58,7 @@ export 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.
          */
         this.stack = [];
         /**
@@ -134,13 +75,27 @@ export class SidePanel {
          * event either.
          */
         this.closeOnEscape = true;
+        /**
+         * 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.
+         */
+        this.fullScreen = false;
         this.closeButtonId = createRandomString();
         this.actionIdPrefix = createRandomString();
+        this.backIdPrefix = createRandomString();
+        this.focusCloseButtonAfterRender = false;
         this.renderAction = (action, index) => {
             const id = `${this.actionIdPrefix}-${index}`;
             const Tag = action.href ? 'a' : 'button';
             return (h(Tag, { class: action.type, id: id, href: action.href, target: getLinkTarget(action), "aria-label": action.label, onClick: this.handleClickAction(action) }, h("limel-icon", { name: ACTION_ICONS[action.type], "aria-hidden": "true" }), h("limel-tooltip", { elementId: id, label: action.label, helperLabel: action.helperLabel })));
         };
+        this.renderBack = (entry, index) => {
+            var _a;
+            const id = `${this.backIdPrefix}-${index}`;
+            return (h("button", { class: "back", id: id, style: { width: (_a = this.panel) === null || _a === void 0 ? void 0 : _a.style.width }, "aria-label": entry.heading, onClick: this.handleClickBack(index) }, h("span", { class: "back-toolbar" }), h("span", { class: "back-band", style: { 'background-color': entry.color } }), h("limel-tooltip", { elementId: id, label: entry.heading, helperLabel: entry.subheading, openDirection: "left" })));
+        };
         /**
          * Components in the content can emit events with the same names as the
          * panel's events, for example `close` from `limel-dialog` or
@@ -235,6 +190,9 @@ export class SidePanel {
                 event: event,
             });
         };
+        this.handleClickBack = (index) => () => {
+            this.selectStackEntry.emit(index);
+        };
         this.handleClickClose = () => {
             this.close.emit();
         };
@@ -256,8 +214,24 @@ export class SidePanel {
         this.removeFromOpenPanels();
         queueMicrotask(this.restoreFocus);
     }
+    // A removed button takes the focus with it, so a keyboard user that goes
+    // back would lose their place in the page. Both props can change in the
+    // same update, so the result comes from both, and not from the prop that
+    // changed last.
+    handleBacksChange() {
+        this.focusCloseButtonAfterRender = this.isFocusedBackRemoved();
+    }
+    componentDidRender() {
+        var _a;
+        if (!this.focusCloseButtonAfterRender) {
+            return;
+        }
+        this.focusCloseButtonAfterRender = false;
+        (_a = this.host.shadowRoot
+            .querySelector('button.close')) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     render() {
-        return (h(Host, { key: 'debf8ec5b8e179cbb69c2d87fdd0db7089707dfb' }, h("section", { key: 'd6165d2ff25cad3b9bebe807065b6a83bca24da2', ref: this.setPanel, role: "dialog", "aria-label": this.label, tabindex: "-1" }, this.renderHandle(), h("div", { key: 'b95d937af7fc5799abee8a6042ea2be6087c1b0b', class: "content" }, h("div", { key: 'e258c9475715b00fd1e56a9975db6d0f7e5d19fc', class: "toolbar" }, this.renderCloseButton(), this.renderActions()), this.renderHeader(), this.renderBody())), h("span", { key: '6b7793d7c02f632d630ac4936524104f81a10e23', "data-limit": "min", ref: this.setMinLimit }), h("span", { key: '6196bc2f8549ddd9b8c8bb43bcf221a43f62c98a', "data-limit": "max", ref: this.setMaxLimit })));
+        return (h(Host, { key: 'ca07c3557df3be7e026a95da296689e1e3c0cf41' }, h("section", { key: '610a8b47c7b34a6d4cb4d253d40cff889ea4c73d', ref: this.setPanel, role: "dialog", "aria-label": this.label, tabindex: "-1" }, this.renderHandle(), h("div", { key: 'c9ddb80456ac82cb39801943b55fcd4de3928852', class: "content" }, h("div", { key: 'f1430da0610a4fe71363ead5c7730d627a8a935c', class: "toolbar" }, this.renderCloseButton(), this.renderActions()), this.renderHeader(), this.renderBody())), this.renderStack(), h("span", { key: 'c7d204c8b323f88962508a4c54493717fe347c8e', "data-limit": "min", ref: this.setMinLimit }), h("span", { key: '2a7fa787fd0d4c777f90b2ef7dff1d9316108416', "data-limit": "max", ref: this.setMaxLimit })));
     }
     // A native button and not `limel-icon-button`, because the hover animation
     // styles the icon, which is inside the shadow root of `limel-icon-button`.
@@ -270,6 +244,21 @@ export class SidePanel {
         }
         return (h("div", { class: "actions" }, this.actions.map((action, index) => this.renderAction(action, index))));
     }
+    renderStack() {
+        const backs = this.stack.slice(0, -1);
+        if (this.fullScreen || backs.length === 0) {
+            return;
+        }
+        return (h("div", { class: "stack" }, backs.map((entry, index) => this.renderBack(entry, index))));
+    }
+    isFocusedBackRemoved() {
+        const backs = [...this.host.shadowRoot.querySelectorAll('.back')];
+        const index = backs.indexOf(this.host.shadowRoot.activeElement);
+        if (index === -1) {
+            return false;
+        }
+        return this.fullScreen || index >= this.stack.length - 1;
+    }
     renderHeader() {
         const entry = this.stack.at(-1);
         if (!entry) {
@@ -279,6 +268,9 @@ export class SidePanel {
     }
     renderHandle() {
         var _a, _b, _c;
+        if (this.fullScreen) {
+            return;
+        }
         return (h("limel-resize-handle", { class: "handle", label: this.resizeLabel, value: (_a = this.widthRange) === null || _a === void 0 ? void 0 : _a.now, min: (_b = this.widthRange) === null || _b === void 0 ? void 0 : _b.min, max: (_c = this.widthRange) === null || _c === void 0 ? void 0 : _c.max, onChangeSize: this.handleChangeSize, onEndResize: this.handleEndResize }));
     }
     renderBody() {
@@ -324,9 +316,16 @@ export class SidePanel {
     // An inline width wins over `--side-panel-width`, and is still limited by
     // `min-width` and `max-width`. The width is set on the element and not with
     // a state, because a render and a measurement on each pointer move make
-    // the drag slow when the content is large.
+    // the drag slow when the content is large. The backs of the stack get the
+    // width too, so that they have the same width as the panel.
     setWidth(width) {
-        this.panel.style.width = `${width}px`;
+        for (const element of this.getPanelBoxes()) {
+            element.style.width = `${width}px`;
+        }
+    }
+    getPanelBoxes() {
+        const backs = this.host.shadowRoot.querySelectorAll('.back');
+        return [this.panel, ...backs];
     }
     rememberWidthBeforeResize() {
         if (this.isResizing()) {
@@ -456,7 +455,7 @@ export class SidePanel {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The panels in the stack, outermost first. The last entry is the panel\nthat is displayed. Its heading, subheading and icon are shown in the\nheader."
+                    "text": "The panels in the stack, outermost first. The last entry is the panel\nthat is displayed. Its heading, subheading and icon are shown in the\nheader. The other entries are shown as backs behind the panel."
                 },
                 "getter": false,
                 "setter": false,
@@ -526,6 +525,26 @@ export class SidePanel {
                 "reflect": false,
                 "attribute": "close-on-escape",
                 "defaultValue": "true"
+            },
+            "fullScreen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `true` when the screen is too narrow for the panel to be displayed\non top of the page. The panel then covers the full width of the\npositioned ancestor. It cannot be resized, and the backs of the stack are\nnot shown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-screen",
+                "defaultValue": "false"
             }
         };
     }
@@ -587,9 +606,33 @@ export class SidePanel {
                     "resolved": "number",
                     "references": {}
                 }
+            }, {
+                "method": "selectStackEntry",
+                "name": "selectStackEntry",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a back of the stack is clicked. The detail is the index of\nits entry in `stack`."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "stack",
+                "methodName": "handleBacksChange"
+            }, {
+                "propName": "fullScreen",
+                "methodName": "handleBacksChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "close",

package/dist/collection/components/text-editor/text-editor.js

@@ -180,9 +180,9 @@ export class TextEditor {
     }
     renderEditor() {
         if (this.readonly) {
-            return (h("limel-markdown", { slot: "content", value: this.value, "aria-controls": this.helperText ? this.helperTextId : undefined, id: this.editorId }));
+            return (h("limel-markdown", { slot: "content", value: this.value, id: this.editorId }));
         }
-        return (h("limel-prosemirror-adapter", { ref: (el) => (this.adapterElement = el), slot: "content", "aria-placeholder": this.placeholder, contentType: this.contentType, onChange: this.handleChange, onImagePasted: this.handleImagePasted, onImageRemoved: this.handleImageRemoved, onMetadataChange: this.handleMetadataChange, customElements: this.customElements, inlineImages: this.inlineImages, value: this.value, "aria-controls": this.helperText ? this.helperTextId : undefined, id: this.editorId, "aria-disabled": this.disabled, "aria-invalid": this.invalid, "aria-required": this.required, language: this.language, triggerCharacters: this.triggers, disabled: this.disabled, ui: this.ui }));
+        return (h("limel-prosemirror-adapter", { ref: (el) => (this.adapterElement = el), slot: "content", "aria-placeholder": this.placeholder, contentType: this.contentType, onChange: this.handleChange, onImagePasted: this.handleImagePasted, onImageRemoved: this.handleImageRemoved, onMetadataChange: this.handleMetadataChange, customElements: this.customElements, inlineImages: this.inlineImages, value: this.value, id: this.editorId, "aria-disabled": this.disabled, "aria-invalid": this.invalid, "aria-required": this.required, language: this.language, triggerCharacters: this.triggers, disabled: this.disabled, ui: this.ui }));
     }
     renderPlaceholder() {
         if (!this.placeholder || this.value) {

package/dist/esm/{checkbox.template-IDyv2bgn.js → checkbox.template-BFL4SMzl.js}

@@ -10,7 +10,7 @@ const CheckboxTemplate = (props) => {
             };
         }
         return [
-            h("limel-dynamic-label", { value: props.checked, "aria-controls": props.helperText ? props.helperTextId : undefined, defaultLabel: { text: props.label, icon: icon }, labels: props.readonlyLabels }),
+            h("limel-dynamic-label", { value: props.checked, defaultLabel: { text: props.label, icon: icon }, labels: props.readonlyLabels }),
             h(HelperText, { text: props.helperText, helperTextId: props.helperTextId, invalid: props.invalid }),
         ];
     }
@@ -35,7 +35,7 @@ const CheckboxTemplate = (props) => {
                 required: props.required,
                 indeterminate: props.indeterminate,
                 readonly: props.readonly,
-            } }, h("input", Object.assign({ type: "checkbox", id: props.id, checked: props.checked, disabled: props.disabled || props.readonly, required: props.required, onChange: props.onChange, "aria-controls": props.helperText ? props.helperTextId : undefined, "aria-describedby": props.helperTextId }, inputProps)), h("div", { class: "box" }, h("svg", { class: "check-mark", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, h("path", { fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))), h("label", { class: "boolean-input-label", htmlFor: props.id }, props.label)),
+            } }, h("input", Object.assign({ type: "checkbox", id: props.id, checked: props.checked, disabled: props.disabled || props.readonly, required: props.required, onChange: props.onChange, "aria-describedby": props.helperTextId }, inputProps)), h("div", { class: "box" }, h("svg", { class: "check-mark", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, h("path", { fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))), h("label", { class: "boolean-input-label", htmlFor: props.id }, props.label)),
         h(HelperText, { text: props.helperText, helperTextId: props.helperTextId, invalid: props.invalid }),
     ];
 };