@limetech/lime-elements 40.10.0 → 40.11.0

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

@@ -7,12 +7,22 @@ import { createRandomString } from "../../util/random-string";
  * Escape.
  */
 const openPanels = [];
+// The same icons as the navigation buttons in the Lime CRM web client.
+const ACTION_ICONS = {
+    newTab: 'up_right_arrow',
+    expand: 'expand',
+};
+function getLinkTarget(action) {
+    if (action.href && action.type === 'newTab') {
+        return '_blank';
+    }
+}
 function stopEvent(event) {
     event.stopPropagation();
 }
 /**
  * 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 with a close button.
+ * 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`,
@@ -33,9 +43,68 @@ function stopEvent(event) {
  *
  * 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);
+ * }
+ * ```
+ *
  * @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
+ * @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
  */
 export class SidePanel {
@@ -45,6 +114,16 @@ export class SidePanel {
          * name.
          */
         this.closeLabel = 'Close';
+        /**
+         * 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.
+         */
+        this.stack = [];
+        /**
+         * Buttons in the toolbar, to the right of the close button.
+         */
+        this.actions = [];
         /**
          * Label of the resize handle. Used as the accessible name.
          */
@@ -56,9 +135,28 @@ export class SidePanel {
          */
         this.closeOnEscape = true;
         this.closeButtonId = createRandomString();
-        this.setBody = (element) => {
-            this.body = element;
-            this.stopContentEventsInBody();
+        this.actionIdPrefix = createRandomString();
+        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 })));
+        };
+        /**
+         * Components in the content can emit events with the same names as the
+         * panel's events, for example `close` from `limel-dialog` or
+         * `limel-collapsible-section`. Events from slotted content pass through the
+         * element around the slot before they reach the host, so they are stopped
+         * there. The panel's own events are dispatched on the host, so they are not
+         * affected.
+         *
+         * Keep the event names in sync with {@link SidePanel.stopContentEventAtHost}.
+         *
+         * @param element - the element around a slot
+         */
+        this.stopContentEvents = (element) => {
+            // Adding the same listener again has no effect, so re-renders are safe.
+            element === null || element === void 0 ? void 0 : element.addEventListener('close', stopEvent);
+            element === null || element === void 0 ? void 0 : element.addEventListener('changeWidth', stopEvent);
         };
         // Moving the panel in the DOM also disconnects it. It is then connected
         // again before the microtask runs. Focus only returns when it was lost with
@@ -130,6 +228,13 @@ export class SidePanel {
             }
             this.widthRange = this.measureWidthRange();
         };
+        this.handleClickAction = (action) => (event) => {
+            var _a;
+            this.selectAction.emit({
+                id: (_a = action.id) !== null && _a !== void 0 ? _a : action.type,
+                event: event,
+            });
+        };
         this.handleClickClose = () => {
             this.close.emit();
         };
@@ -152,37 +257,35 @@ export class SidePanel {
         queueMicrotask(this.restoreFocus);
     }
     render() {
-        return (h(Host, { key: '1c18f40fb45731bdf157d651d4e649446de5230b' }, h("section", { key: 'e8b41bded39732750ae3db9b1daf14dc742e1cb7', ref: this.setPanel, role: "dialog", "aria-label": this.label, tabindex: "-1" }, this.renderHandle(), h("div", { key: '3cba5523e0cbe45fa328daaa40136c063a8c3ac3', class: "content" }, h("div", { key: 'b5cbc1260b4e6f31ac789179ab4b5a0281b9133b', class: "toolbar" }, this.renderCloseButton()), this.renderBody())), h("span", { key: '5fe872f05a6cc49027f84d71a765baa59a53adb9', "data-limit": "min", ref: this.setMinLimit }), h("span", { key: '5042e7437e61ae5308e13b1a30f5df24747e2cdf', "data-limit": "max", ref: this.setMaxLimit })));
+        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 })));
     }
     // 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`.
     renderCloseButton() {
         return (h("button", { class: "close", id: this.closeButtonId, "aria-label": this.closeLabel, onClick: this.handleClickClose }, h("limel-icon", { name: "multiply", "aria-hidden": "true" }), h("limel-tooltip", { elementId: this.closeButtonId, label: this.closeLabel })));
     }
+    renderActions() {
+        if (this.actions.length === 0) {
+            return;
+        }
+        return (h("div", { class: "actions" }, this.actions.map((action, index) => this.renderAction(action, index))));
+    }
+    renderHeader() {
+        const entry = this.stack.at(-1);
+        if (!entry) {
+            return;
+        }
+        return (h("limel-header", { class: { header: true, 'has-color': !!entry.color }, style: { '--header-background-color': entry.color }, icon: entry.icon, heading: entry.heading, subheading: entry.subheading }, h("div", { class: "header-actions", slot: "actions", ref: this.stopContentEvents }, h("slot", { name: "header-actions" }))));
+    }
     renderHandle() {
         var _a, _b, _c;
         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() {
-        return (h("div", { class: "body", ref: this.setBody }, h("slot", null)));
-    }
-    /**
-     * Components in the content can emit events with the same names as the
-     * panel's events, for example `close` from `limel-dialog` or
-     * `limel-collapsible-section`. Events from slotted content pass through
-     * `.body` before they reach the host, so they are stopped there. The panel's
-     * own events are dispatched on the host, so they are not affected.
-     *
-     * Keep the event names in sync with {@link SidePanel.stopContentEventAtHost}.
-     */
-    stopContentEventsInBody() {
-        var _a, _b;
-        // Adding the same listener again has no effect, so re-renders are safe.
-        (_a = this.body) === null || _a === void 0 ? void 0 : _a.addEventListener('close', stopEvent);
-        (_b = this.body) === null || _b === void 0 ? void 0 : _b.addEventListener('changeWidth', stopEvent);
+        return (h("div", { class: "body", ref: this.stopContentEvents }, h("slot", null)));
     }
     /**
-     * Fallback for {@link SidePanel.stopContentEventsInBody}.
+     * Fallback for {@link SidePanel.stopContentEvents}.
      * Stops `close` and `changeWidth` events that reach the host from any
      * element other than the host.
      *
@@ -334,6 +437,56 @@ export class SidePanel {
                 "attribute": "close-label",
                 "defaultValue": "'Close'"
             },
+            "stack": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SidePanelEntry[]",
+                    "resolved": "SidePanelEntry[]",
+                    "references": {
+                        "SidePanelEntry": {
+                            "location": "import",
+                            "path": "./side-panel.types",
+                            "id": "src/components/side-panel/side-panel.types.ts::SidePanelEntry",
+                            "referenceLocation": "SidePanelEntry"
+                        }
+                    }
+                },
+                "required": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "actions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SidePanelAction[]",
+                    "resolved": "SidePanelAction[]",
+                    "references": {
+                        "SidePanelAction": {
+                            "location": "import",
+                            "path": "./side-panel.types",
+                            "id": "src/components/side-panel/side-panel.types.ts::SidePanelAction",
+                            "referenceLocation": "SidePanelAction"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Buttons in the toolbar, to the right of the close button."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
             "resizeLabel": {
                 "type": "string",
                 "mutable": false,
@@ -397,6 +550,28 @@ export class SidePanel {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "selectAction",
+                "name": "selectAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an action in the toolbar is clicked. The detail has the `id`\nof the action, or its `type` if it has no `id`, and the click event."
+                },
+                "complexType": {
+                    "original": "SidePanelActionSelect",
+                    "resolved": "SidePanelActionSelect",
+                    "references": {
+                        "SidePanelActionSelect": {
+                            "location": "import",
+                            "path": "./side-panel.types",
+                            "id": "src/components/side-panel/side-panel.types.ts::SidePanelActionSelect",
+                            "referenceLocation": "SidePanelActionSelect"
+                        }
+                    }
+                }
             }, {
                 "method": "changeWidth",
                 "name": "changeWidth",

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

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/tooltip/description-registry.js

@@ -0,0 +1,57 @@
+const entries = new WeakMap();
+/**
+ * Set the `aria-description` of an element on behalf of an owner. The
+ * description that the element had before is kept, for when the last owner
+ * stops describing it.
+ *
+ * @param element
+ * @param owner
+ * @param text
+ */
+export function setDescription(element, owner, text) {
+    let entry = entries.get(element);
+    if (!entry) {
+        entry = {
+            original: element.getAttribute('aria-description'),
+            texts: new Map(),
+        };
+        entries.set(element, entry);
+    }
+    entry.texts.delete(owner);
+    entry.texts.set(owner, text);
+    element.setAttribute('aria-description', text);
+}
+/**
+ * Stop describing an element on behalf of an owner. The text of the owner
+ * that described it most recently stays, and when none is left, the
+ * description that the element had before is put back. Nothing is changed
+ * if the attribute has been changed by someone else.
+ *
+ * @param element
+ * @param owner
+ */
+export function clearDescription(element, owner) {
+    const entry = entries.get(element);
+    const text = entry === null || entry === void 0 ? void 0 : entry.texts.get(owner);
+    if (!entry || text === undefined) {
+        return;
+    }
+    entry.texts.delete(owner);
+    const isCurrent = element.getAttribute('aria-description') === text;
+    const remaining = [...entry.texts.values()].at(-1);
+    if (remaining !== undefined) {
+        if (isCurrent) {
+            element.setAttribute('aria-description', remaining);
+        }
+        return;
+    }
+    entries.delete(element);
+    if (!isCurrent) {
+        return;
+    }
+    if (entry.original === null) {
+        element.removeAttribute('aria-description');
+        return;
+    }
+    element.setAttribute('aria-description', entry.original);
+}

package/dist/collection/components/tooltip/get-description.js

@@ -0,0 +1,42 @@
+import { isAppleDevice } from "../../util/device";
+import { normalizeHotkeyString } from "../../util/hotkeys";
+import { getHotkeyAriaLabel } from "../hotkey/get-hotkey-aria-label";
+/**
+ * Get the text that a screen reader should read as the description of the
+ * element that a tooltip describes. The label and the helper label are left
+ * out when they only repeat the name of the element, or the text of one of
+ * its parts, so that they are not read twice.
+ *
+ * @param element
+ * @param label
+ * @param helperLabel
+ * @param hotkey
+ */
+export function getDescription(element, label, helperLabel, hotkey) {
+    const names = new Set(getNames(element).map(normalize));
+    const parts = [label, helperLabel].filter((text) => text && !names.has(normalize(text)));
+    parts.push(getHotkeyText(hotkey));
+    return parts.filter(Boolean).join('. ');
+}
+function getHotkeyText(hotkey) {
+    const normalized = normalizeHotkeyString(hotkey);
+    return normalized
+        ? getHotkeyAriaLabel(normalized, isAppleDevice())
+        : undefined;
+}
+function getNames(element) {
+    var _a;
+    const ariaLabel = (_a = element.getAttribute('aria-label')) === null || _a === void 0 ? void 0 : _a.trim();
+    if (ariaLabel) {
+        return [ariaLabel];
+    }
+    const labelled = [...element.querySelectorAll('[aria-label]')];
+    return [
+        element.textContent,
+        ...[...element.children].map((part) => part.textContent),
+        ...labelled.map((labelledElement) => labelledElement.getAttribute('aria-label')),
+    ].filter(Boolean);
+}
+function normalize(text) {
+    return text.replaceAll(/\s+/g, ' ').trim().toLowerCase();
+}

package/dist/collection/components/tooltip/tooltip.js

@@ -1,5 +1,8 @@
 import { h } from "@stencil/core";
 import { createRandomString } from "../../util/random-string";
+import { clearDescription, setDescription } from "./description-registry";
+import { getDescription } from "./get-description";
+import { getFocusTarget } from "../../util/get-focus-target";
 import { getOwnerElement } from "./get-owner-element";
 import { TooltipTimer } from "./tooltip-timer";
 const DEFAULT_MAX_LENGTH = 50;
@@ -48,6 +51,7 @@ export class Tooltip {
          * Decides the tooltip's location in relation to its trigger.
          */
         this.openDirection = 'top';
+        this.latestUpdate = 0;
         this.showTooltip = () => {
             this.tooltipTimer.showAfterDelay();
         };
@@ -55,27 +59,53 @@ export class Tooltip {
             this.tooltipTimer.hide();
         };
         this.portalId = createRandomString();
-        this.tooltipId = createRandomString();
         this.tooltipTimer = new TooltipTimer(() => (this.open = true), () => (this.open = false));
     }
-    connectedCallback() {
+    async connectedCallback() {
         this.ownerElement = getOwnerElement(this.elementId, this.host);
-        this.setOwnerAriaDescribedby();
         this.addListeners();
+        await this.updateDescription();
     }
     disconnectedCallback() {
         this.removeListeners();
+        this.latestUpdate++;
+        this.restoreDescription();
+    }
+    async watchDescription() {
+        await this.updateDescription();
     }
     render() {
         const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
-        return (h("div", { key: '11a9db0e1b1e615ddbdeea5eb2c5089e1f9eadeb', class: "trigger-anchor" }, h("limel-portal", { key: '28e7ffeb63ff24978dd2bd1ed0b0b2aa278abbde', openDirection: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
+        return (h("div", { key: 'f77ad0d2453d4abda766785d0ccfe96154df71bb', class: "trigger-anchor" }, h("limel-portal", { key: 'e7f314f76039381ebe5c3add9e675a53650ad8f1', openDirection: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
                 'z-index': tooltipZIndex,
                 'pointer-events': 'none',
-            }, anchor: this.ownerElement }, h("limel-tooltip-content", { key: 'abc48a7948a932c081a44fb1d617bc3b351d452c', label: this.label, helperLabel: this.helperLabel, hotkey: this.hotkey, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
+            }, anchor: this.ownerElement }, h("limel-tooltip-content", { key: 'afbd8bf04d7070fa8afe22f14496c2c24cdf222e', label: this.label, helperLabel: this.helperLabel, hotkey: this.hotkey, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open }))));
+    }
+    async updateDescription() {
+        if (!this.ownerElement) {
+            return;
+        }
+        const update = ++this.latestUpdate;
+        const element = await getFocusTarget(this.ownerElement);
+        if (!this.host.isConnected || update !== this.latestUpdate) {
+            return;
+        }
+        if (element !== this.describedElement) {
+            this.restoreDescription();
+            this.describedElement = element;
+        }
+        const description = getDescription(element, this.label, this.helperLabel, this.hotkey);
+        if (!description) {
+            this.restoreDescription();
+            return;
+        }
+        setDescription(element, this, description);
     }
-    setOwnerAriaDescribedby() {
-        var _a;
-        (_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-describedby', this.tooltipId);
+    restoreDescription() {
+        if (this.describedElement) {
+            clearDescription(this.describedElement, this);
+        }
+        this.describedElement = undefined;
     }
     addListeners() {
         var _a, _b, _c, _d;
@@ -136,7 +166,7 @@ export class Tooltip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Short descriptive text of the owner element."
+                    "text": "Short descriptive text of the owner element.\nScreen readers read it as a part of the description of the element,\nunless it only repeats the name that the element already has."
                 },
                 "getter": false,
                 "setter": false,
@@ -155,7 +185,7 @@ export class Tooltip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Additional helper text for the element."
+                    "text": "Additional helper text for the element.\nScreen readers read it as a part of the description of the element."
                 },
                 "getter": false,
                 "setter": false,
@@ -174,7 +204,7 @@ export class Tooltip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Keyboard shortcut to visualize inside the tooltip, e.g. `\"ctrl+f\"`.\nDisplay-only: the tooltip does not listen for the keystroke.\nCatching the hotkey is the consumer's responsibility."
+                    "text": "Keyboard shortcut to visualize inside the tooltip, e.g. `\"ctrl+f\"`.\nScreen readers read it, written out in words, as a part of the\ndescription of the element.\nDisplay-only: the tooltip does not listen for the keystroke.\nCatching the hotkey is the consumer's responsibility."
                 },
                 "getter": false,
                 "setter": false,
@@ -236,4 +266,16 @@ export class Tooltip {
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "watchDescription"
+            }, {
+                "propName": "helperLabel",
+                "methodName": "watchDescription"
+            }, {
+                "propName": "hotkey",
+                "methodName": "watchDescription"
+            }];
+    }
 }

package/dist/collection/interface.js

@@ -34,6 +34,7 @@ export * from './components/picker/searcher.types';
 export * from './components/picker/value.types';
 export * from './components/progress-flow/progress-flow.types';
 export * from './components/select/option.types';
+export * from './components/side-panel/side-panel.types';
 export * from './components/spinner/spinner.types';
 export * from './components/tab-bar/tab.types';
 export * from './components/tab-panel/tab-panel.types';

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

@@ -0,0 +1,69 @@
+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 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.
+ *
+ * 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.
+ *
+ * @param owner
+ */
+export async function getFocusTarget(owner) {
+    var _a, _b;
+    const search = {};
+    return (_b = (_a = (await find(owner, search))) !== null && _a !== void 0 ? _a : search.disabled) !== null && _b !== void 0 ? _b : owner;
+}
+async function find(element, search) {
+    if (isFocusable(element)) {
+        return element;
+    }
+    rememberDisabled(element, search);
+    return findInside(element, search);
+}
+async function findInside(element, search) {
+    if (isStencilComponent(element)) {
+        await element.componentOnReady();
+    }
+    const inShadowRoot = element.shadowRoot
+        ? await findAmong(element.shadowRoot.children, search)
+        : undefined;
+    return inShadowRoot !== null && inShadowRoot !== void 0 ? inShadowRoot : findAmong(element.children, search);
+}
+async function findAmong(elements, search) {
+    for (const element of elements) {
+        if (element.localName === 'limel-tooltip') {
+            continue;
+        }
+        const found = await 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');
+}