@limetech/lime-elements 40.5.4 → 40.6.1

package/dist/collection/components/radio-button-group/radio-button-group.js

@@ -37,7 +37,7 @@ export class RadioButtonGroup {
         };
     }
     render() {
-        return (h("limel-list", { key: '467b17f3d721555c52d871ab3f7b6a36cd70d6a6', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
+        return (h("limel-list", { key: '1c3fef764fd84f4e84d38a4dbd04f2272fb73775', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
     }
     createItems() {
         return this.items.map((option) => {

package/dist/collection/components/radio-button-group/radio-button.js

@@ -31,12 +31,12 @@ import { Host, h } from "@stencil/core";
  */
 export class RadioButtonComponent {
     render() {
-        return (h(Host, { key: '01f0b56a991bc0a54e4ba09e7dd4a394d87d800a', class: {
+        return (h(Host, { key: '93e5adb101fd866a1c56e0233b32eddef6617a08', class: {
                 'boolean-input': true,
                 'radio-button': true,
                 checked: this.checked,
                 disabled: this.disabled,
-            } }, h("input", { key: '89371d4f79105022dc13ed8d50b9bf2004f4059a', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: '7e7e210a4c703f69bfca2a3c8a5487be4221f0b4', class: "box" }), h("label", { key: 'b00bd3ac42a5b8e3691d9b5e698b59752ab795f1', class: "boolean-input-label", htmlFor: this.id }, this.label)));
+            } }, h("input", { key: '816bc49ab2f8bd6fcbaa8d10c7b5250fd64aa044', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: 'e4656777d40210f46c5f28deace470a90f41cfdf', class: "box" }), h("label", { key: 'c27a557fea46c0951a0aed27df40a61b30809550', class: "boolean-input-label", htmlFor: this.id }, this.label)));
     }
     static get is() { return "limel-radio-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/scroller/scroller.css

@@ -0,0 +1,317 @@
+@charset "UTF-8";
+/**
+* Note! This file is forwarded via `src/style/exports.scss`
+* and exposed to consumers through the root `index.scss`.
+*
+* Consumers import it using:
+* `@use '@limetech/lime-elements' as lime-elements;`
+*
+* Legacy import paths (`dist/scss/mixins`) are maintained
+* for backward compatibility via copy rules in the Stencil config.
+*/
+/**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+* This mixin will add a chessboard background pattern,
+* typically used to visualize transparency.
+*/
+/**
+* Make a container resizable by the user.
+* This is used in the documentations and examples
+* of some components, to demonstrate how the component
+* behaves in a resizable container.
+*/
+/**
+ * Drag to reorder mixins
+ */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
+/**
+ * @prop --limel-scroller-fade-color: The color, as an RGB triplet, that the edges fade into. It should match the background that the scroller is placed on. Defaults to `--contrast-100`.
+ * @prop --limel-scroller-content-padding: Padding around the content. It scrolls together with the content. Defaults to `0`.
+ */
+:host(limel-scroller) {
+  display: block;
+}
+
+div.scroller {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+}
+
+div.scroll-area {
+  display: flex;
+  height: 100%;
+  scrollbar-width: none;
+}
+div.scroll-area::-webkit-scrollbar {
+  display: none;
+}
+
+div.scroll-content {
+  display: flex;
+  flex: 1 0 auto;
+  position: relative;
+  isolation: isolate;
+  padding: var(--limel-scroller-content-padding, 0);
+}
+
+::slotted(*) {
+  flex-shrink: 0;
+}
+
+div.scroll-fade,
+div.scroll-button {
+  position: absolute;
+  transition: transform 0.3s ease-out;
+}
+
+div.scroll-fade {
+  pointer-events: none;
+}
+
+div.scroll-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+div.scroll-button div.arrow-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  color: var(--limel-theme-on-surface-color);
+}
+div.scroll-button svg.arrow {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+div.scroller.horizontal div.scroll-area {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+div.scroller.horizontal ::slotted(*) {
+  scroll-margin-inline: 2.25rem;
+}
+div.scroller.horizontal div.scroll-fade {
+  top: 0;
+  width: 4rem;
+  height: 100%;
+}
+div.scroller.horizontal div.scroll-fade.start {
+  left: 0;
+  transform: translate3d(-4rem, 0, 0);
+  background: linear-gradient(270deg, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0) 0%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 40%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 100%);
+}
+div.scroller.horizontal div.scroll-fade.end {
+  right: 0;
+  transform: translate3d(4rem, 0, 0);
+  background: linear-gradient(90deg, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0) 0%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 40%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 100%);
+}
+div.scroller.horizontal div.scroll-button {
+  top: 0;
+  bottom: 0;
+}
+div.scroller.horizontal div.scroll-button.start {
+  left: 0.25rem;
+  transform: translate3d(-4rem, 0, 0);
+}
+div.scroller.horizontal div.scroll-button.start svg.arrow {
+  transform: rotate(180deg);
+}
+div.scroller.horizontal div.scroll-button.end {
+  right: 0.25rem;
+  transform: translate3d(4rem, 0, 0);
+}
+div.scroller.horizontal div.scroll-button div.arrow-button {
+  width: 1.25rem;
+  height: calc(100% - 0.5rem);
+}
+
+div.scroller.vertical div.scroll-area {
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+div.scroller.vertical div.scroll-content {
+  flex-direction: column;
+}
+div.scroller.vertical ::slotted(*) {
+  scroll-margin-block: 2.25rem;
+}
+div.scroller.vertical div.scroll-fade {
+  left: 0;
+  width: 100%;
+  height: 4rem;
+}
+div.scroller.vertical div.scroll-fade.start {
+  top: 0;
+  transform: translate3d(0, -4rem, 0);
+  background: linear-gradient(0deg, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0) 0%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 40%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 100%);
+}
+div.scroller.vertical div.scroll-fade.end {
+  bottom: 0;
+  transform: translate3d(0, 4rem, 0);
+  background: linear-gradient(180deg, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0) 0%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 40%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 100%);
+}
+div.scroller.vertical div.scroll-button {
+  left: 0;
+  right: 0;
+}
+div.scroller.vertical div.scroll-button.start {
+  top: 0.25rem;
+  transform: translate3d(0, -4rem, 0);
+}
+div.scroller.vertical div.scroll-button.start svg.arrow {
+  transform: rotate(-90deg);
+}
+div.scroller.vertical div.scroll-button.end {
+  bottom: 0.25rem;
+  transform: translate3d(0, 4rem, 0);
+}
+div.scroller.vertical div.scroll-button.end svg.arrow {
+  transform: rotate(90deg);
+}
+div.scroller.vertical div.scroll-button div.arrow-button {
+  height: 1.25rem;
+  width: calc(100% - 0.5rem);
+}
+
+div.scroller.can-scroll-to-start div.scroll-fade.start,
+div.scroller.can-scroll-to-start div.scroll-button.start {
+  transform: translate3d(0, 0, 0);
+}
+
+div.scroller.can-scroll-to-end div.scroll-fade.end,
+div.scroller.can-scroll-to-end div.scroll-button.end {
+  transform: translate3d(0, 0, 0);
+}
+
+div.scroller.can-scroll-to-start:not(.can-scroll-to-end) div.scroll-button.end,
+div.scroller.can-scroll-to-end:not(.can-scroll-to-start) div.scroll-button.start {
+  opacity: 0.5;
+  transition-delay: 0.5s;
+}
+
+div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button,
+div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button {
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
+  cursor: pointer;
+  color: var(--limel-theme-on-surface-color);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-normal);
+}
+div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:hover, div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:focus, div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:focus-visible,
+div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button:hover,
+div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button:focus,
+div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
+div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:hover, div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:focus-visible,
+div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button:hover,
+div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button:focus-visible {
+  transform: translate3d(0, -0.04rem, 0);
+  color: var(--limel-theme-on-surface-color);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-hovered);
+}
+div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:active,
+div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
+  box-shadow: var(--button-shadow-pressed);
+}
+div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:hover, div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:active,
+div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button:hover,
+div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
+}
+
+div.scroller div.scroll-button.start:hover,
+div.scroller div.scroll-button.end:hover {
+  transform: translate3d(0, 0, 0);
+}

package/dist/collection/components/scroller/scroller.js

@@ -0,0 +1,284 @@
+import { h, Host } from "@stencil/core";
+const MIN_PAGE_SHARE = 0.5;
+const HIDE_BUTTON_WHEN_CLOSER_TO_EDGE_THAN_PX = 40;
+const PAGE_OVERLAP = 0.2;
+// A click on an arrow is no reason to take the focus from the item that has it.
+const keepFocusWhereItIs = (event) => event.preventDefault();
+// Points towards the end of the horizontal axis. The styles turn it around.
+const Arrow = () => (h("svg", { class: "arrow", viewBox: "0 0 48 48", "aria-hidden": "true", focusable: "false" }, h("path", { d: "M18 4l20 20-20 20" })));
+/**
+ * Makes content that is larger than its container scrollable, along one axis.
+ *
+ * The native scrollbar is hidden. Instead, an edge that has more to reveal
+ * fades out, and an arrow appears on it. Clicking the arrow scrolls almost a
+ * page, and leaves the last part of the previous page in view, as a reference
+ * for how far the user has scrolled. For people who have asked their system to
+ * reduce motion, the scroller jumps instead of gliding.
+ *
+ * When something inside the scroller receives focus, the scroller reveals the
+ * item that holds it, together with a glimpse of whatever is next to it. An
+ * item can control how much of its neighbors gets revealed, by setting its
+ * `scroll-margin`. An item that becomes selected without receiving focus is up
+ * to the consumer to reveal, using the `reveal()` method.
+ *
+ * :::note Accessibility
+ * The arrows are only a shortcut for people who use a mouse or a touch screen.
+ * They are not real buttons. Screen readers do not announce them, and the Tab
+ * key skips them. Therefore, the content must contain something that can
+ * receive focus, such as a button, a link or a tab. Without it, there is no way
+ * to scroll with a keyboard. The examples explain the reasoning.
+ * :::
+ *
+ * @slot - The content to scroll. Each child is treated as an item.
+ * @exampleComponent limel-example-scroller-horizontal
+ * @exampleComponent limel-example-scroller-vertical
+ * @private
+ */
+export class Scroller {
+    constructor() {
+        /**
+         * The axis along which the content scrolls.
+         */
+        this.orientation = 'horizontal';
+        this.canScrollToStart = false;
+        this.canScrollToEnd = false;
+        this.fades = {};
+        this.handleResize = () => {
+            const pending = this.pendingReveal;
+            if (pending) {
+                this.revealItem(pending.item, pending.behavior);
+            }
+            this.updateScrollability();
+        };
+        this.updateScrollability = () => {
+            const area = this.scrollArea;
+            if (!area) {
+                return;
+            }
+            const vertical = this.orientation === 'vertical';
+            const scrolled = vertical ? area.scrollTop : area.scrollLeft;
+            const overflow = vertical
+                ? area.scrollHeight - area.clientHeight
+                : area.scrollWidth - area.clientWidth;
+            this.canScrollToStart =
+                scrolled > HIDE_BUTTON_WHEN_CLOSER_TO_EDGE_THAN_PX;
+            this.canScrollToEnd =
+                Math.floor(overflow - scrolled) >
+                    HIDE_BUTTON_WHEN_CLOSER_TO_EDGE_THAN_PX;
+        };
+        this.revealFocusedItem = (event) => {
+            const item = this.findItem(event.target);
+            if (!item) {
+                return;
+            }
+            // The browser scrolls a focused element into view too. Wait for it
+            // to be done, so that the position it leaves is what we adjust.
+            requestAnimationFrame(() => this.revealItem(item));
+        };
+    }
+    connectedCallback() {
+        this.observeSize();
+    }
+    componentDidLoad() {
+        this.observeSize();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        return (h(Host, { key: 'e84ebfb819a65ec4b655155c88fae8d3163f81e5' }, h("div", { key: '5de2d4b4ea1f5f423d69195fb66e2a9e83bd5b3f', class: {
+                scroller: true,
+                [this.orientation]: true,
+                'can-scroll-to-start': this.canScrollToStart,
+                'can-scroll-to-end': this.canScrollToEnd,
+            } }, h("div", { key: 'e6b6d2832c6d8eecd18f5b653ee39d1f107d212a', class: "scroll-area", ref: (element) => (this.scrollArea = element), onScroll: this.updateScrollability, onFocusin: this.revealFocusedItem }, h("div", { key: '696a605e2478ea31b256631df195cb3e0e64d07a', class: "scroll-content", ref: (element) => (this.scrollContent = element) }, h("slot", { key: 'c32bfe0c61b93c794e2837563ea081ffccf33440', ref: (element) => (this.slotElement = element) }))), this.renderEdge('start'), this.renderEdge('end'))));
+    }
+    renderEdge(edge) {
+        return [
+            h("div", { key: `fade-${edge}`, class: `scroll-fade ${edge}`, ref: (element) => (this.fades[edge] = element) }),
+            h("div", { key: `button-${edge}`, class: `scroll-button ${edge}`, "aria-hidden": "true" }, h("div", { class: "arrow-button", onMouseDown: keepFocusWhereItIs, onClick: () => this.scrollOnePage(edge) }, h(Arrow, null))),
+        ];
+    }
+    observeSize() {
+        var _a;
+        if (!this.scrollArea || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        (_a = this.resizeObserver) !== null && _a !== void 0 ? _a : (this.resizeObserver = new ResizeObserver(this.handleResize));
+        this.resizeObserver.observe(this.scrollArea);
+        this.resizeObserver.observe(this.scrollContent);
+    }
+    scrollOnePage(edge) {
+        const area = this.scrollArea;
+        const fade = this.fades[edge];
+        const vertical = this.orientation === 'vertical';
+        const [size, fadeSize] = vertical
+            ? [area.clientHeight, fade.offsetHeight]
+            : [area.clientWidth, fade.offsetWidth];
+        // What is under the arrow, and faded, on one edge must land clear of
+        // the fade and the arrow on the other edge.
+        const overlap = Math.max(size * PAGE_OVERLAP, fadeSize);
+        const distance = Math.max(size - overlap, size * MIN_PAGE_SHARE);
+        const delta = edge === 'start' ? -distance : distance;
+        const behavior = getScrollBehavior();
+        area.scrollBy(vertical ? { top: delta, behavior } : { left: delta, behavior });
+    }
+    // What has focus, or is asked to be revealed, can be deeper inside an item.
+    // The item is what gets revealed, since it is what carries the
+    // `scroll-margin`.
+    findItem(element) {
+        let node = element;
+        while (node && node.assignedSlot !== this.slotElement) {
+            node = node.parentElement;
+        }
+        return node;
+    }
+    /**
+     * Scrolls an item into view, together with a glimpse of its neighbors.
+     * Whatever receives focus is revealed without being asked to. This is for
+     * an item that becomes selected without receiving focus. If the scroller
+     * is hidden, in a dialog that is closed for instance, the item is revealed
+     * when the scroller is shown.
+     *
+     * @param item - one of the items of the scroller, or something inside one
+     * @param behavior - `auto` jumps to the item, and `smooth` glides there.
+     * Defaults to `smooth`, unless the user has asked to reduce motion.
+     */
+    async reveal(item, behavior = getScrollBehavior()) {
+        var _a;
+        this.revealItem((_a = this.findItem(item)) !== null && _a !== void 0 ? _a : item, behavior);
+    }
+    revealItem(item, behavior = getScrollBehavior()) {
+        const area = this.scrollArea;
+        this.pendingReveal = undefined;
+        if (!area || !item.isConnected) {
+            return;
+        }
+        // There is nothing to measure while the scroller is hidden.
+        if (area.getClientRects().length === 0) {
+            this.pendingReveal = { item, behavior };
+            return;
+        }
+        const vertical = this.orientation === 'vertical';
+        const [before, after] = vertical
+            ? ['top', 'bottom']
+            : ['left', 'right'];
+        const size = vertical ? 'height' : 'width';
+        const areaBox = area.getBoundingClientRect();
+        const itemBox = item.getBoundingClientRect();
+        const style = getComputedStyle(item);
+        // The boxes are measured on the screen, where a scroller that is
+        // scaled, as it is in a dialog that is opening, is larger or smaller
+        // than the distance it takes to scroll.
+        const scale = areaBox[size] / Number.parseFloat(getComputedStyle(area)[size]) ||
+            1;
+        const margin = (side) => Number.parseFloat(style.getPropertyValue(`scroll-margin-${side}`)) *
+            scale;
+        const hiddenBefore = areaBox[before] - (itemBox[before] - margin(before));
+        const hiddenAfter = itemBox[after] + margin(after) - areaBox[after];
+        let distance = 0;
+        if (hiddenBefore > 0) {
+            distance = -hiddenBefore;
+        }
+        else if (hiddenAfter > 0) {
+            distance = hiddenAfter;
+        }
+        if (distance === 0) {
+            return;
+        }
+        area.scrollBy(vertical
+            ? { top: distance / scale, behavior }
+            : { left: distance / scale, behavior });
+    }
+    static get is() { return "limel-scroller"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["scroller.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["scroller.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The axis along which the content scrolls."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "canScrollToStart": {},
+            "canScrollToEnd": {}
+        };
+    }
+    static get methods() {
+        return {
+            "reveal": {
+                "complexType": {
+                    "signature": "(item: HTMLElement, behavior?: ScrollBehavior) => Promise<void>",
+                    "parameters": [{
+                            "name": "item",
+                            "type": "HTMLElement",
+                            "docs": "- one of the items of the scroller, or something inside one"
+                        }, {
+                            "name": "behavior",
+                            "type": "\"auto\" | \"instant\" | \"smooth\"",
+                            "docs": "- `auto` jumps to the item, and `smooth` glides there.\nDefaults to `smooth`, unless the user has asked to reduce motion."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        },
+                        "ScrollBehavior": {
+                            "location": "global",
+                            "id": "global::ScrollBehavior"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scrolls an item into view, together with a glimpse of its neighbors.\nWhatever receives focus is revealed without being asked to. This is for\nan item that becomes selected without receiving focus. If the scroller\nis hidden, in a dialog that is closed for instance, the item is revealed\nwhen the scroller is shown.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "item - one of the items of the scroller, or something inside one"
+                        }, {
+                            "name": "param",
+                            "text": "behavior - `auto` jumps to the item, and `smooth` glides there.\nDefaults to `smooth`, unless the user has asked to reduce motion."
+                        }]
+                }
+            }
+        };
+    }
+}
+function getScrollBehavior() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches
+        ? 'auto'
+        : 'smooth';
+}

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

@@ -89,14 +89,15 @@ export class Select {
             }
             const isEnter = event.key === ENTER;
             const isSpace = event.key === SPACEBAR;
-            if (!this.menuOpen && (isSpace || isEnter)) {
-                event.stopPropagation();
-                event.preventDefault();
-                // `preventDefault` cancels the activation click that the trigger
-                // `button` would otherwise synthesize, so the menu has to be
-                // opened here rather than through the click handler.
-                this.openMenu();
+            if (this.menuOpen || !(isSpace || isEnter)) {
+                return;
             }
+            event.stopPropagation();
+            event.preventDefault();
+            // `preventDefault` cancels the activation click that the trigger
+            // `button` would otherwise synthesize, so the menu has to be
+            // opened here rather than through the click handler.
+            this.openMenu();
         };
         this.setListElement = (element) => {
             var _a, _b;
@@ -236,10 +237,11 @@ export class Select {
             clearTimeout(this.focusTimeoutId);
             this.focusTimeoutId = undefined;
         }
-        if (this.focusObserver) {
-            this.focusObserver.disconnect();
-            this.focusObserver = undefined;
+        if (!this.focusObserver) {
+            return;
         }
+        this.focusObserver.disconnect();
+        this.focusObserver = undefined;
     }
     focusFirstMenuItem(list) {
         var _a;
@@ -308,7 +310,7 @@ export class Select {
             requestAnimationFrame(() => {
                 setTimeout(() => {
                     menuSurface.scrollTop = scrollPosition;
-                });
+                }, 0);
             });
             return;
         }

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

@@ -43,9 +43,7 @@ const floatLabelAbove = (props) => {
         if (isMultiple(value)) {
             return value.length > 0;
         }
-        else {
-            return value.text !== '';
-        }
+        return value.text !== '';
     }
     return false;
 };