@limetech/lime-elements 40.11.2 → 40.12.0

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/util/focus-trigger-element.js

@@ -1,32 +1,21 @@
-const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+import { findFocusTarget } from "./get-focus-target";
 const isDisabled = (element) => {
     return (element.disabled === true ||
         element.hasAttribute('disabled') ||
         element.getAttribute('aria-disabled') === 'true');
 };
 /**
- * Focuses the first focusable element inside a trigger element.
- * Supports custom elements by searching both the element's shadow root
- * and its light DOM.
+ * Focuses a trigger element, or the first focusable element inside it if the
+ * trigger can not take focus itself. Supports custom elements by searching
+ * both the element's shadow root and its light DOM.
  *
  * @param trigger - The trigger element to focus.
- * @returns `true` if focus was moved, otherwise `false`.
+ * @returns `false` if there is no trigger, or it is disabled. Otherwise `true`.
  */
 export const focusTriggerElement = (trigger) => {
-    var _a;
     if (!trigger || isDisabled(trigger)) {
         return false;
     }
-    const shadowFocusable = (_a = trigger.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
-    if (shadowFocusable) {
-        shadowFocusable.focus();
-        return true;
-    }
-    const lightDomFocusable = trigger.querySelector(FOCUSABLE_SELECTOR);
-    if (lightDomFocusable) {
-        lightDomFocusable.focus();
-        return true;
-    }
-    trigger.focus();
+    findFocusTarget(trigger).focus();
     return true;
 };

package/dist/collection/util/get-focus-target.js

@@ -10,44 +10,75 @@ const FOCUSABLE = [
     .join(', ');
 const DISABLED = CONTROLS.map((selector) => `${selector}[disabled]:not([tabindex="-1"])`).join(', ');
 /**
- * Get the element that a screen reader describes for the owner element of a
- * tooltip. That is the owner itself if it can be focused, otherwise the first
- * element that can be focused inside it, also inside shadow roots. A disabled
- * control is only used when there is nothing that can be focused, and if
- * there is no control at all, the owner itself is used.
+ * Get the element that gets the focus when a user moves to `owner`. That is
+ * the owner itself if it can be focused, otherwise the first element that can
+ * be focused inside it, also inside shadow roots. A disabled control is only
+ * used when there is nothing that can be focused, and if there is no control
+ * at all, the owner itself is used.
  *
  * An element that passes the focus on to an element in its shadow root is
- * never used itself, since the screen reader lands on the element inside.
+ * never used itself, since the focus lands on the element inside.
  *
+ * Waits for the components in the way to render, so use this for an owner
+ * that may not have rendered yet.
+ *
+ * @see findFocusTarget for an owner that has already rendered
  * @param owner
  */
 export async function getFocusTarget(owner) {
-    var _a, _b;
+    return runWalk(findTarget(owner));
+}
+async function runWalk(walk, step = walk.next()) {
+    if (step.done) {
+        return step.value;
+    }
+    await step.value.componentOnReady();
+    const found = await runWalk(walk, walk.next());
+    return found;
+}
+/**
+ * Same as `getFocusTarget`, for an owner that has already rendered, without
+ * waiting for any component.
+ *
+ * @see getFocusTarget for an owner that may not have rendered yet
+ * @param owner
+ */
+export function findFocusTarget(owner) {
+    const walk = findTarget(owner);
+    for (let step = walk.next();; step = walk.next()) {
+        if (step.done) {
+            return step.value;
+        }
+    }
+}
+function* findTarget(owner) {
+    var _a;
     const search = {};
-    return (_b = (_a = (await find(owner, search))) !== null && _a !== void 0 ? _a : search.disabled) !== null && _b !== void 0 ? _b : owner;
+    const found = yield* find(owner, search);
+    return (_a = found !== null && found !== void 0 ? found : search.disabled) !== null && _a !== void 0 ? _a : owner;
 }
-async function find(element, search) {
+function* find(element, search) {
     if (isFocusable(element)) {
         return element;
     }
     rememberDisabled(element, search);
-    return findInside(element, search);
+    return yield* findInside(element, search);
 }
-async function findInside(element, search) {
+function* findInside(element, search) {
     if (isStencilComponent(element)) {
-        await element.componentOnReady();
+        yield element;
     }
     const inShadowRoot = element.shadowRoot
-        ? await findAmong(element.shadowRoot.children, search)
+        ? yield* findAmong(element.shadowRoot.children, search)
         : undefined;
-    return inShadowRoot !== null && inShadowRoot !== void 0 ? inShadowRoot : findAmong(element.children, search);
+    return inShadowRoot !== null && inShadowRoot !== void 0 ? inShadowRoot : (yield* findAmong(element.children, search));
 }
-async function findAmong(elements, search) {
+function* findAmong(elements, search) {
     for (const element of elements) {
         if (element.localName === 'limel-tooltip') {
             continue;
         }
-        const found = await find(element, search);
+        const found = yield* find(element, search);
         if (found) {
             return found;
         }

package/dist/esm/{focus-trigger-element-BOFcjLq3.js → focus-trigger-element-CIEHI_yk.js}

@@ -1,4 +1,5 @@
 import { a as assignValue } from './_assignValue-CEFvyZxO.js';
+import { f as findFocusTarget } from './get-focus-target-BhoYaGlg.js';
 
 /**
  * This base implementation of `_.zipObject` which assigns values using `assignFunc`.
@@ -42,36 +43,24 @@ function zipObject(props, values) {
   return baseZipObject(props || [], values || [], assignValue);
 }
 
-const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 const isDisabled = (element) => {
     return (element.disabled === true ||
         element.hasAttribute('disabled') ||
         element.getAttribute('aria-disabled') === 'true');
 };
 /**
- * Focuses the first focusable element inside a trigger element.
- * Supports custom elements by searching both the element's shadow root
- * and its light DOM.
+ * Focuses a trigger element, or the first focusable element inside it if the
+ * trigger can not take focus itself. Supports custom elements by searching
+ * both the element's shadow root and its light DOM.
  *
  * @param trigger - The trigger element to focus.
- * @returns `true` if focus was moved, otherwise `false`.
+ * @returns `false` if there is no trigger, or it is disabled. Otherwise `true`.
  */
 const focusTriggerElement = (trigger) => {
-    var _a;
     if (!trigger || isDisabled(trigger)) {
         return false;
     }
-    const shadowFocusable = (_a = trigger.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
-    if (shadowFocusable) {
-        shadowFocusable.focus();
-        return true;
-    }
-    const lightDomFocusable = trigger.querySelector(FOCUSABLE_SELECTOR);
-    if (lightDomFocusable) {
-        lightDomFocusable.focus();
-        return true;
-    }
-    trigger.focus();
+    findFocusTarget(trigger).focus();
     return true;
 };
 

package/dist/esm/get-focus-target-BhoYaGlg.js

@@ -0,0 +1,102 @@
+const CONTROLS = ['button', 'input:not([type="hidden"])', 'select', 'textarea'];
+const FOCUSABLE = [
+    'a[href]',
+    ...CONTROLS.map((selector) => `${selector}:not([disabled])`),
+    'summary',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]',
+]
+    .map((selector) => `${selector}:not([tabindex="-1"])`)
+    .join(', ');
+const DISABLED = CONTROLS.map((selector) => `${selector}[disabled]:not([tabindex="-1"])`).join(', ');
+/**
+ * Get the element that gets the focus when a user moves to `owner`. That is
+ * the owner itself if it can be focused, otherwise the first element that can
+ * be focused inside it, also inside shadow roots. A disabled control is only
+ * used when there is nothing that can be focused, and if there is no control
+ * at all, the owner itself is used.
+ *
+ * An element that passes the focus on to an element in its shadow root is
+ * never used itself, since the focus lands on the element inside.
+ *
+ * Waits for the components in the way to render, so use this for an owner
+ * that may not have rendered yet.
+ *
+ * @see findFocusTarget for an owner that has already rendered
+ * @param owner
+ */
+async function getFocusTarget(owner) {
+    return runWalk(findTarget(owner));
+}
+async function runWalk(walk, step = walk.next()) {
+    if (step.done) {
+        return step.value;
+    }
+    await step.value.componentOnReady();
+    const found = await runWalk(walk, walk.next());
+    return found;
+}
+/**
+ * Same as `getFocusTarget`, for an owner that has already rendered, without
+ * waiting for any component.
+ *
+ * @see getFocusTarget for an owner that may not have rendered yet
+ * @param owner
+ */
+function findFocusTarget(owner) {
+    const walk = findTarget(owner);
+    for (let step = walk.next();; step = walk.next()) {
+        if (step.done) {
+            return step.value;
+        }
+    }
+}
+function* findTarget(owner) {
+    var _a;
+    const search = {};
+    const found = yield* find(owner, search);
+    return (_a = found !== null && found !== void 0 ? found : search.disabled) !== null && _a !== void 0 ? _a : owner;
+}
+function* find(element, search) {
+    if (isFocusable(element)) {
+        return element;
+    }
+    rememberDisabled(element, search);
+    return yield* findInside(element, search);
+}
+function* findInside(element, search) {
+    if (isStencilComponent(element)) {
+        yield element;
+    }
+    const inShadowRoot = element.shadowRoot
+        ? yield* findAmong(element.shadowRoot.children, search)
+        : undefined;
+    return inShadowRoot !== null && inShadowRoot !== void 0 ? inShadowRoot : (yield* findAmong(element.children, search));
+}
+function* findAmong(elements, search) {
+    for (const element of elements) {
+        if (element.localName === 'limel-tooltip') {
+            continue;
+        }
+        const found = yield* find(element, search);
+        if (found) {
+            return found;
+        }
+    }
+    return undefined;
+}
+function isFocusable(element) {
+    var _a;
+    return !((_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.delegatesFocus) && element.matches(FOCUSABLE);
+}
+function rememberDisabled(element, search) {
+    if (!search.disabled && element.matches(DISABLED)) {
+        search.disabled = element;
+    }
+}
+function isStencilComponent(element) {
+    return ('componentOnReady' in element &&
+        typeof element.componentOnReady === 'function');
+}
+
+export { findFocusTarget as f, getFocusTarget as g };