@limetech/lime-elements 40.15.0 → 40.17.0

package/dist/collection/components/form-header/form-header.js

@@ -0,0 +1,163 @@
+import { Host, h } from "@stencil/core";
+import { getHelpProps } from "./help-props";
+/**
+ * This is an internal and private component that `limel-form` uses to
+ * draw the heading of a section, a list or a custom component, together
+ * with its description and its help.
+ *
+ * Consumers of `limel-form` do not use it. They set the `title`,
+ * the `description` and `lime.help` in the schema, and the form draws
+ * this component with the right heading level.
+ *
+ * :::note
+ * The component has `shadow: false`, so that the heading, the description
+ * and the help are part of the DOM of `limel-form`. This way, the styles
+ * of the form that depend on how deep a field is reach them directly.
+ * :::
+ *
+ * @exampleComponent limel-example-form-header-basic
+ * @exampleComponent limel-example-form-header-heading-level
+ * @exampleComponent limel-example-form-header-help
+ * @private
+ */
+export class FormHeader {
+    constructor() {
+        /**
+         * Which of the heading elements, from `h1` to `h6`, to draw
+         * the `heading` with.
+         */
+        this.headingLevel = 1;
+    }
+    render() {
+        return (h(Host, { key: 'bfb0a90340ac54c7f083df2989fd8c2acb97308f' }, this.renderHeading(), this.renderHelp(), this.renderDescription()));
+    }
+    renderHeading() {
+        if (!this.heading) {
+            return;
+        }
+        const Heading = `h${this.headingLevel}`;
+        return h(Heading, null, this.heading);
+    }
+    renderHelp() {
+        if (!this.help) {
+            return;
+        }
+        return h("limel-help", Object.assign({}, getHelpProps(this.help)));
+    }
+    renderDescription() {
+        if (!this.description) {
+            return;
+        }
+        return h("limel-markdown", { value: this.description });
+    }
+    static get is() { return "limel-form-header"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["form-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["form-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the section, the list or the custom component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "headingLevel": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeadingLevel",
+                    "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+                    "references": {
+                        "HeadingLevel": {
+                            "location": "import",
+                            "path": "../form/form.types",
+                            "id": "src/components/form/form.types.ts::HeadingLevel",
+                            "referenceLocation": "HeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which of the heading elements, from `h1` to `h6`, to draw\nthe `heading` with."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-level",
+                "defaultValue": "1"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text, in markdown, that describes what the `heading` is about."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "help": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Partial<Help>",
+                    "resolved": "Help | string",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Help": {
+                            "location": "import",
+                            "path": "../help/help.types",
+                            "id": "src/components/help/help.types.ts::Help",
+                            "referenceLocation": "Help"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Help to show beside the `heading`. A string is used as the `value`\nof the help."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "help"
+            }
+        };
+    }
+}

package/dist/collection/components/form-header/help-props.js

@@ -0,0 +1,17 @@
+import { pick } from "lodash-es";
+const HELP_PROPERTIES = [
+    'openDirection',
+    'readMoreLink',
+    'trigger',
+    'value',
+];
+/**
+ * @param help - the help of a field, from its schema
+ * @returns the properties of `limel-help` that the help sets, and no others
+ */
+export function getHelpProps(help) {
+    if (typeof help === 'string') {
+        return { value: help };
+    }
+    return pick(help, HELP_PROPERTIES);
+}

package/dist/collection/components/grid/grid.js

@@ -12,7 +12,7 @@ export class Grid {
         console.warn('limel-grid is deprecated, please use CSS instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout');
     }
     render() {
-        return h("slot", { key: '3b806c24a8ef43720ed744030f791878c592bc1a' });
+        return h("slot", { key: '4ebe5815a717a9991c2e2951125f839e8e1708d4' });
     }
     static get is() { return "limel-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.js

@@ -61,7 +61,7 @@ export class Header {
         this.subheadingDivider = '·';
     }
     render() {
-        return (h(Host, { key: '772b80728f03fc7a51ae6b2b8892c0417c4dfc56' }, h("div", { key: '87516edb431b0d65fdebd59b422b62e953f316a7', class: "information" }, this.renderIcon(), h("div", { key: 'fc6dbd30d144dafb66e6f1d2899dfe849835d923', class: "headings" }, h("h1", { key: 'af693c740d006353f6328459ecbc372dfa204398', class: "heading", title: this.heading }, this.heading), h("h2", { key: '2b0e5ed7b7df45ec645057083610ef88ab404b75', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '88d461f901a4daa28a269aeaa2efb3a39f4f610c', name: "actions" }, h("slot", { key: '4a9ade9ab15cc333b9555a8fadad9147145619f9' }))));
+        return (h(Host, { key: 'ee7ff339654246fbe74a971c13555ac58eb193d6' }, h("div", { key: '24a8ea8b2b02a18096fdad46aeaa7716986f39f3', class: "information" }, this.renderIcon(), h("div", { key: '4e6badb9212a41286043a158238edb889e95c20a', class: "headings" }, h("h1", { key: 'cb1e64f29d720de62e7e99d15daa77b3c3a344cb', class: "heading", title: this.heading }, this.heading), h("h2", { key: 'fbdd1399802934b780fb24f35dbaf8d2df98b09c', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '53774b488cc505aca85e776d9c8280c85ef7acfd', name: "actions" }, h("slot", { key: 'd9093bf6ca786faa5481e62c5bff604b20f0283e' }))));
     }
     renderIcon() {
         var _a, _b, _c, _d, _e;

package/dist/collection/components/help/help-content.js

@@ -19,7 +19,7 @@ export class HelpContent {
         };
     }
     render() {
-        return (h(Host, { key: 'dc61745d8db673bafa3179ec2075ac40d26c265e' }, h("limel-markdown", { key: '81b4c0871a566e55119abeebe42e26c45d16ab68', value: this.value }), this.renderReadMoreLink()));
+        return (h(Host, { key: 'c05fa685d65b0b884c0697d259ba1b4811f038d7' }, h("limel-markdown", { key: '6260af655452683b21b704fb9962e010abfe2a1b', value: this.value }), this.renderReadMoreLink()));
     }
     static get is() { return "limel-help-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/help/help.js

@@ -41,9 +41,9 @@ export class HelpComponent {
         };
     }
     render() {
-        return (h(Host, { key: '7dbdb1d1a250fd4655c4cf9f9a711f9f82d128e0' }, h("limel-popover", { key: '4a0bce2e74a621ffc392cabfb4d3f3817bfb14cf', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: '22a0c7b7002973d95dba6e8cfef34b73ddc779e6', slot: "trigger", type: "button", onClick: this.openPopover, class: {
+        return (h(Host, { key: 'ff14013e9f366372a5ac61fdb9852e73377e7c7f' }, h("limel-popover", { key: 'b63ff7f51c29dc61ffdfe647329020639f1a8511', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: '09f65e0a7f2bdca258f848f459eadc49f863b9f2', slot: "trigger", type: "button", onClick: this.openPopover, class: {
                 'is-open': this.isOpen,
-            } }, this.trigger), h("limel-help-content", { key: '86cb41721ed8e9eb2b5c0dc6eb930c2b0a412a6e', value: this.value, readMoreLink: this.readMoreLink }))));
+            } }, this.trigger), h("limel-help-content", { key: '92223e842dd3dbf07365a1f45003b61033109b25', value: this.value, readMoreLink: this.readMoreLink }))));
     }
     static get is() { return "limel-help"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,9 +50,9 @@ export class HelperLine {
         };
     }
     render() {
-        return (h(Host, { key: '67896281429efb2375427383aa6c7046096ad203', tabIndex: -1, class: {
+        return (h(Host, { key: '3dba31860682ccb6230de96f458e19252a150dd0', tabIndex: -1, class: {
                 invalid: this.invalid,
-            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '7fbf830b9edd0b2aeb36539ddbc8c2b472acc4eb' }, this.renderHelperText(), this.renderCharacterCounter())));
+            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '28dd4294f7a2d6db746388109ef9fb7d1f640b4d' }, this.renderHelperText(), this.renderCharacterCounter())));
     }
     static get is() { return "limel-helper-line"; }
     static get originalStyleUrls() {

package/dist/collection/components/hotkey/hotkey.js

@@ -30,7 +30,7 @@ export class Hotkey {
         const parts = tokenizeHotkeyString(this.value);
         const displayParts = parts.map((part) => formatDisplayToken(part, this.isApple));
         const ariaLabel = getHotkeyAriaLabel(this.value, this.isApple);
-        return (h(Host, { key: '9c75664311ac5138a87c1c5bb58c48a40ec44dc5', "aria-label": ariaLabel || undefined }, displayParts.map(({ display, isGlyph }, index) => (h("kbd", { key: `${parts[index]}-${index}`, class: isGlyph ? 'is-glyph' : undefined }, h("span", null, display))))));
+        return (h(Host, { key: '6c2857b3a8827d78ea18379d7338f0e31c3f44a9', "aria-label": ariaLabel || undefined }, displayParts.map(({ display, isGlyph }, index) => (h("kbd", { key: `${parts[index]}-${index}`, class: isGlyph ? 'is-glyph' : undefined }, h("span", null, display))))));
     }
     static get is() { return "limel-hotkey"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/icon.js

@@ -50,7 +50,7 @@ export class Icon {
         this.loadIcon(this.name);
     }
     render() {
-        return h("div", { key: '0f09232e65b213e57673054707f6bdb400000fd6', class: "container" });
+        return h("div", { key: '68180e22c8eda7efb4a5ca9085ff0dc127052b3f', class: "container" });
     }
     updateAccessibility() {
         if (!this.internals) {

package/dist/collection/components/icon-button/icon-button.js

@@ -52,7 +52,7 @@ export class IconButton {
         if (this.host.hasAttribute('tabindex')) {
             buttonAttributes.tabindex = this.host.getAttribute('tabindex');
         }
-        return (h(Host, { key: '0df9ac9a4c51f8062cdd7a6fa91204ea0e3b78f7', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: '3ebf706164e779db253d82d38c4aab3ddf33e770', "aria-label": this.label, disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
+        return (h(Host, { key: 'ecf9bef958b6d3f2666d61c8eb10b6790311706d', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: 'fcadafff6a3e2a36082f4baad0c342a448c4126f', "aria-label": this.label, disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
     }
     renderIcon() {
         var _a, _b;

package/dist/collection/components/info-tile/info-tile.js

@@ -127,9 +127,9 @@ export class InfoTile {
             this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
         const link = this.disabled ? '#' : (_e = this.link) === null || _e === void 0 ? void 0 : _e.href;
         const rel = getRel((_f = this.link) === null || _f === void 0 ? void 0 : _f.target, (_g = this.link) === null || _g === void 0 ? void 0 : _g.rel);
-        return (h(Host, { key: '549c508fdd747f3883afe97efd8eba297d75bc33', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: '3a04537d79c62bce556b0b46bf5f1f3a011ba280', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
+        return (h(Host, { key: '4ae5614ddf0ecc7cb112788bd1c42ca4747cf431', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: '5cb4cd396a5472c050e5911f54aa0272cf1d324d', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
                 'is-clickable': !!((_k = this.link) === null || _k === void 0 ? void 0 : _k.href) && !this.disabled,
-            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: '10b2f70309046c0f811a2af8fadedb86d53a4e10', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '0c3e378b14d23909e1b957704d6c846d1d6a20c3', class: "value-group" }, this.renderPrefix(), h("div", { key: '0cf56fce6179d34ebd047a16492935542fc7c6ed', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: 'b239b27230d6e0fe766517f4c7aba9176a6fdf1e' })), this.renderNotification()));
+            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: 'd111590fd120c7f4a784430d9f13423e6813d88f', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '717a54afb2ffe8c434fdbbe403bbc816ba231fbd', class: "value-group" }, this.renderPrefix(), h("div", { key: '569a6cbb516d6c455757c7685d48a2af9692eca2', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '2afedffb05ddd550677d943a58564565965194dc' })), this.renderNotification()));
     }
     checkProps(propValue) {
         return propValue ? propValue + ' ' : '';

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

@@ -601,7 +601,7 @@ export class InputField {
         if (this.renderAutocompleteList()) {
             properties['aria-controls'] = this.portalId;
         }
-        return (h(Host, { key: '0f3e3dadc4345adb1abbbca32cd13a041172767b' }, h("limel-notched-outline", { key: '1f833a0fcb202529209ce58ce1c6ab313ab5e0e6', 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: '1f866999f40bd57e11dc80cb2c04935dcfe0f31b', 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: '3abb0e074f55f8e47f46cf77ed885797047e44b9' }, h("limel-notched-outline", { key: '0d25df2774e7cda39da90163b0832a1ea117d7c8', 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: 'a60a2bfcdafe232b32a0d67f972c3885fc5b6428', 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) {

package/dist/collection/components/list/list.js

@@ -194,7 +194,7 @@ export class List {
             maxLinesSecondaryText = 1;
         }
         const html = this.listRenderer.render(this.items, this.config);
-        return (h(Host, { key: 'c0b436d0236fd177e789d43518eb193d5e5e7bbf', style: {
+        return (h(Host, { key: 'c1c087f11542451c1747d510c133e79f94d643ba', style: {
                 '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
             } }, html));
     }

package/dist/collection/components/list-item/list-item.js

@@ -158,9 +158,9 @@ export class ListItemComponent {
             // also keep for `menuitem` for visual state consistency
             ariaProps['aria-selected'] = this.selected ? 'true' : 'false';
         }
-        return (h(Host, Object.assign({ key: 'c546782bb0418b47bffe81e5532c2f1ac3971c82', role: this.getHostRole(), class: {
+        return (h(Host, Object.assign({ key: '0ff3eea71319a17641cc264d85ba35c1c8db83c8', role: this.getHostRole(), class: {
                 'has-primary-component': !!((_a = this.primaryComponent) === null || _a === void 0 ? void 0 : _a.name),
-            } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { key: '16b10f373ce8c8508a0ef680acea777c9f6aeac6', class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
+            } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { key: 'e38dc3bb9a09cf08892e7485681a4421a5bdd2ba', class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
     }
     /**
      * Returns a stable reference for the provided actions array to avoid

package/dist/collection/components/list-item/menu-item-meta/menu-item-meta.js

@@ -22,7 +22,7 @@ export class MenuItemMeta {
         this.showChevron = false;
     }
     render() {
-        return (h(Host, { key: 'd8b7f496ec83b138cfe9b7ea5deaf7a862a92a7f' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
+        return (h(Host, { key: 'd4bb2de50d260fdf49eafe2449ca388f0369a682' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
     }
     renderCommandText() {
         if (this.hotkey) {

package/dist/collection/components/markdown/markdown.js

@@ -170,7 +170,7 @@ export class Markdown {
         this.cleanupImageIntersectionObserver();
     }
     render() {
-        return (h(Host, { key: 'eb1749c0d9dda5b26400cb8a11e884d435e759f4' }, h("div", { key: '2574a46c51bd1d18808f1bac945a7d356550e02c', id: "markdown", ref: (el) => (this.rootElement = el) })));
+        return (h(Host, { key: '3121124a57e9522dced4b749bfedfbe8dea2ea70' }, h("div", { key: '6f2b983303c0921a7b979cf0bbbdcc657e7555f8', id: "markdown", ref: (el) => (this.rootElement = el) })));
     }
     setupImageIntersectionObserver() {
         if (this.lazyLoadImages) {

package/dist/collection/components/masonry-layout/masonry-layout.js

@@ -59,7 +59,7 @@ export class MasonryLayout {
         const style = {
             height: `${this.containerHeight}rem`,
         };
-        return (h(Host, { key: 'b25a2eb6e10535aa5fedb8de8baeb96f51e10739', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: 'fa2c4773d1fb41e2ea0725a28911840e45e5c809' })));
+        return (h(Host, { key: 'db11d17d15303afcf0d767e085dbe653ab90f9dd', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: '7a4f2639e7b02720b08b778d437e536ee5707cfa' })));
     }
     setupObservers() {
         this.resizeObserver = new ResizeObserver(() => {

package/dist/collection/components/menu/menu.js

@@ -593,7 +593,7 @@ export class Menu {
         const cssProperties = this.getCssProperties();
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
         const menuSurfaceWidth = this.getMenuSurfaceWidth(cssProperties['--menu-surface-width']);
-        return (h("div", { key: '6d847423b24fe40843b5650e1bf4374683a039da', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: 'ac6b1f1ed8801096f7d00fa0a9198a76c1ce3019', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'cb084d50d4abacfb9dc670d59477ac881bf6d480', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '7ac31e90caa874032731f8ceb3521ffb014eb05f', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
+        return (h("div", { key: 'b989b659926fd335f77346886528cf3277f39c4d', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '3a8f9cbf65303bcf18358607559a204e944b18bb', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'd56ff6ab5d7504f9d4646ef2dcde736bd4515143', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '983315550638557b27cac1f9d604a36dca16bdd7', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
                 'has-grid-layout': this.gridLayout,
             } }, this.renderSearchField(), this.renderBreadcrumb(), this.renderLoader(), this.renderEmptyMessage(), this.renderMenuList()))));
     }

package/dist/collection/components/menu-list/menu-list.js

@@ -88,7 +88,7 @@ export class MenuList {
             iconSize: this.iconSize,
         };
         const html = this.MenuListRenderer.render(this.items, this.config);
-        return h("div", { key: '3415e15ffee93dd14fd52e5d465cd4afc31ac9fe', class: "mdc-menu mdc-menu-surface" }, html);
+        return h("div", { key: '193deffa6146711b12adc1dd7ddcdeffd3b8c3c7', class: "mdc-menu mdc-menu-surface" }, html);
     }
     itemsChanged() {
         setTimeout(() => {

package/dist/collection/components/menu-surface/menu-surface.js

@@ -103,7 +103,7 @@ export class MenuSurface {
             'mdc-elevation-transition': true,
             'mdc-elevation--z4': true,
         };
-        return (h("div", { key: '6a3fd2315216b168a3e898e4ef43a928a19efe76', class: classList, tabindex: "-1" }, h("slot", { key: '4bf591cdb0e628622d8eada0e628eb33f1aaa74b' })));
+        return (h("div", { key: 'da08fd948f5b38010647be878ab4d9ff4e6a8361', class: classList, tabindex: "-1" }, h("slot", { key: '2e69828eb156273746e946cc34f2c557bad111c4' })));
     }
     static get is() { return "limel-menu-surface"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/notched-outline/notched-outline.js

@@ -59,7 +59,7 @@ export class NotchedOutline {
         this.hasFloatingLabel = false;
     }
     render() {
-        return (h("div", { key: '3a89f4df1e456e91ae6963275d8e554f785d5806', class: "limel-notched-outline" }, h("slot", { key: 'd372b467d8aed4d97fe89073f3a9bf8d6af451ae', name: "content" }), h("span", { key: 'f56e6d2d3b75e5d05738e28696d892cfdddc991b', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '76c5ac529a46fa4a32969deb9a00bc872ab903e9', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: 'a37b86f6ebb5db2eb9c1f2c8994fce60e70260b6', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
+        return (h("div", { key: '8d1e3ea6b74700e4f79050dac678c5a1b4d1d0bc', class: "limel-notched-outline" }, h("slot", { key: 'fcb6831f64089a7ac25a0a9998eb331a9a965ae7', name: "content" }), h("span", { key: '870e9ddbefbbba75e61336b7171fcf43137c1379', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '5a12f8d71d2dbf8245b4faacf3ae8ec3f92a3cba', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: '73d69b455321439990591b94894f13f8837f2617', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
     }
     renderLabel() {
         if (!this.label) {

package/dist/collection/components/pagination/pagination.js

@@ -304,7 +304,7 @@ export class Pagination {
     }
     render() {
         const { slots } = this.view;
-        return (h(Host, { key: 'b8e02650528bd6547965afb437129cad0ea6cd33' }, h("nav", { key: '3b4b66479357da55ff6ff41d78cc37f77b2d32f6', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: 'b248701311dd6da9d4fb158299d07e618297038e', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
+        return (h(Host, { key: '7d7e26956a5df97a75d2e9d4a8d5b2407b2b65a3' }, h("nav", { key: 'e2b6b6a1bb513e3136b6fcc2e34c668be8e64089', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: '00e74cdbf6ca753b7bac6b4731a5b63c4ac4d338', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
     }
     /**
      * Without a count we know where the user is but not how far the set goes,
@@ -342,7 +342,8 @@ export class Pagination {
         if (pageCount === null) {
             return;
         }
-        return (h("limel-popover", { key: `gap-${index}`, open: this.openGap === index, openDirection: "bottom", onClose: this.closeJump }, h("button", { slot: "trigger", class: "gap", id: this.slotId(index), "aria-label": this.translate('pagination.jump-to-a-page'), "aria-disabled": this.loading ? 'true' : null, "data-index": index, onClick: this.openJump }, "\u00B7\u00B7\u00B7"), h("limel-pagination-jump", { open: this.openGap === index, page: this.view.page, pageCount: pageCount, loading: this.loading, language: this.languageForNumbers, onJump: this.handleJump })));
+        const jumpLabel = this.translate('pagination.jump-to-a-page');
+        return (h("limel-popover", { key: `gap-${index}`, open: this.openGap === index, openDirection: "bottom", popupRole: "dialog", accessibleLabel: jumpLabel, onClose: this.closeJump }, h("button", { slot: "trigger", class: "gap", id: this.slotId(index), "aria-label": jumpLabel, "aria-disabled": this.loading ? 'true' : null, "data-index": index, onClick: this.openJump }, "\u00B7\u00B7\u00B7"), h("limel-pagination-jump", { open: this.openGap === index, page: this.view.page, pageCount: pageCount, loading: this.loading, language: this.languageForNumbers, onJump: this.handleJump })));
     }
     focusGap(index) {
         var _a;

package/dist/collection/components/picker/picker.js

@@ -199,7 +199,7 @@ export class Picker {
             props.maxItems = 1;
         }
         return [
-            h("limel-chip-set", Object.assign({ key: '48b339e4313ecdd3541e4256d96b54cebb04b0d8', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
+            h("limel-chip-set", Object.assign({ key: 'eed0789b538bd50638936e1c6ad7e9deaef954ec', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
             this.renderDropdown(),
         ];
     }

package/dist/collection/components/popover/popover.js

@@ -56,6 +56,7 @@ export class Popover {
          */
         this.open = false;
         this.shouldRestoreFocusOnClose = false;
+        this.hasWarnedAboutMissingName = false;
         this.handleGlobalKeyPress = (event) => {
             if (event.key !== ESCAPE) {
                 return;
@@ -77,11 +78,12 @@ export class Popover {
             focusTriggerElement(trigger);
         };
         this.setTriggerAttributes = (element) => {
-            element.setAttribute('aria-haspopup', 'true');
+            var _a;
+            element.setAttribute('aria-haspopup', (_a = this.getNamedPopupRole()) !== null && _a !== void 0 ? _a : 'true');
             // `aria-expanded` is needed even when the popover is closed. Without
             // it, the trigger reads as an ordinary button to a screen reader.
             element.setAttribute('aria-expanded', this.open ? 'true' : 'false');
-            element.setAttribute('aria-controls', this.portalId);
+            this.setControlledPopup(element);
             element.setAttribute('role', 'button');
         };
         this.portalId = createRandomString();
@@ -101,6 +103,9 @@ export class Popover {
     disconnectedCallback() {
         this.teardownGlobalHandlers();
     }
+    componentWillRender() {
+        this.warnIfRoleHasNoName();
+    }
     componentDidRender() {
         if (!this.triggerSlot) {
             return;
@@ -137,7 +142,7 @@ export class Popover {
     render() {
         const cssProperties = this.getCssProperties();
         const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-        return (h("div", { key: 'a02ffc9fddedc154172b0d4882bfe59b2577ffac', class: "trigger-anchor" }, h("slot", { key: '3665da92007e5943986f57c449055b892502f67e', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '461758e543e835682034c689fcb093fb53ea352e', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '85c7c3d6b11c616eab35bc8419fa2769e5e602ed', contentCollection: this.host.children, style: cssProperties }))));
+        return (h("div", { key: 'f314178b0648433c2e764a31b64c94c85f31d7ce', class: "trigger-anchor" }, h("slot", { key: '93953d9f7bf5c1c0550e445a4e49591029408725', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '01d43457e8eeebd3c135ea823bb26e0e3e336d12', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '6c368bcc7a3914fa62525b01f912cf4d0e640531', contentCollection: this.host.children, popupRole: this.getNamedPopupRole(), accessibleLabel: this.accessibleLabel, style: cssProperties }))));
     }
     globalClickListener(event) {
         const element = event.target;
@@ -162,6 +167,24 @@ export class Popover {
         });
         return zipObject(propertyNames, values);
     }
+    getNamedPopupRole() {
+        return this.accessibleLabel ? this.popupRole : undefined;
+    }
+    warnIfRoleHasNoName() {
+        const hasNoName = !!this.popupRole && !this.accessibleLabel;
+        if (hasNoName && !this.hasWarnedAboutMissingName) {
+            console.warn(`limel-popover: popupRole is "${this.popupRole}", but there is no accessibleLabel to name the popup. The role is not used until the popup has a name.`);
+        }
+        this.hasWarnedAboutMissingName = hasNoName;
+    }
+    setControlledPopup(element) {
+        const popup = document.querySelector(`#${this.portalId}`);
+        if ('ariaControlsElements' in element) {
+            element.ariaControlsElements = popup ? [popup] : null;
+            return;
+        }
+        element.setAttribute('aria-controls', this.portalId);
+    }
     static get is() { return "limel-popover"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
@@ -221,6 +244,44 @@ export class Popover {
                 "setter": false,
                 "reflect": true,
                 "attribute": "open-direction"
+            },
+            "popupRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'",
+                    "resolved": "\"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Says what kind of popup the trigger opens, so that a screen reader can\nannounce it. Use the one that fits what you put in the popover: `dialog`\nfor a form, a message or other content, and `menu`, `listbox`, `tree`\nor `grid` when the content is one of those widgets.\n\nA popup with one of these roles needs a name, so the role is used only\ntogether with `accessibleLabel`. Without one, the popover warns in the\nconsole.\n\nWhen the role is not set or not used, the trigger only says that it\nopens a popup."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popup-role"
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the popup, which a screen reader announces when the focus\nmoves into it. Used together with `popupRole`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accessible-label"
             }
         };
     }

package/dist/collection/components/popover-surface/popover-surface.js

@@ -8,7 +8,7 @@ export class PopoverSurface {
         this.appendElement();
     }
     render() {
-        return h("div", { key: '565d94e781d72493de84f12970471ecf220dd601', class: "limel-popover-surface", tabindex: "0" });
+        return (h("div", { key: '0391463d9777ee0a43de19b4fcf97e5b1ef120d9', class: "limel-popover-surface", tabindex: "0", role: this.popupRole, "aria-label": this.accessibleLabel }));
     }
     appendElement() {
         const portalContainer = this.host.shadowRoot.querySelector('.limel-popover-surface');
@@ -55,6 +55,44 @@ export class PopoverSurface {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "popupRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The role of the surface, for assistive technology"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popup-role"
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the surface, for assistive technology"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accessible-label"
             }
         };
     }

package/dist/collection/components/portal/portal.js

@@ -115,7 +115,7 @@ export class Portal {
         this.showContainer();
     }
     render() {
-        return h("slot", { key: 'd342bcf892ea6bba5eafc93d07119a3c86df2623' });
+        return h("slot", { key: '153c97264598d26b0c043075c889ed882bf5e9de' });
     }
     onVisible() {
         if (!this.container && this.visible) {

package/dist/collection/components/profile-picture/profile-picture.js

@@ -243,7 +243,8 @@ export class ProfilePicture {
             maxWidth: '20rem',
             borderRadius: '0.75rem',
         };
-        return (h("limel-popover", { open: this.isErrorMessagePopoverOpen, onClick: this.openPopover, onClose: this.onPopoverClose }, h("limel-icon-button", { slot: "trigger", elevated: true, icon: errorIcon, "aria-live": "polite", label: this.getTranslation('profile-picture.unsupported-preview.title') }), h("limel-callout", { type: "warning", style: errorMessageStyles, heading: this.getTranslation('profile-picture.unsupported-preview.title') }, this.getTranslation('profile-picture.unsupported-preview.description'))));
+        const title = this.getTranslation('profile-picture.unsupported-preview.title');
+        return (h("limel-popover", { open: this.isErrorMessagePopoverOpen, popupRole: "dialog", accessibleLabel: title, onClick: this.openPopover, onClose: this.onPopoverClose }, h("limel-icon-button", { slot: "trigger", elevated: true, icon: errorIcon, "aria-live": "polite", label: title }), h("limel-callout", { type: "warning", style: errorMessageStyles, heading: title }, this.getTranslation('profile-picture.unsupported-preview.description'))));
     }
     getImageSrc() {
         if (!this.value) {