@limetech/lime-elements 40.6.0 → 40.6.2

package/dist/collection/components/slider/get-percentage-class.js

@@ -3,43 +3,34 @@
  * @param value
  */
 export function getPercentageClass(value) {
-    const tenPercent = 0.1;
-    const twentyPercent = 0.2;
-    const thirtyPercent = 0.3;
-    const fortyPercent = 0.4;
-    const fiftyPercent = 0.5;
-    const sixtyPercent = 0.6;
-    const seventyPercent = 0.7;
-    const eightyPercent = 0.8;
-    const ninetyPercent = 0.9;
     if (value === 0) {
         return 'percent-0';
     }
-    if (value < tenPercent) {
+    if (value < 0.1) {
         return 'percent-0-10';
     }
-    if (value < twentyPercent) {
+    if (value < 0.2) {
         return 'percent-10-20';
     }
-    if (value < thirtyPercent) {
+    if (value < 0.3) {
         return 'percent-20-30';
     }
-    if (value < fortyPercent) {
+    if (value < 0.4) {
         return 'percent-30-40';
     }
-    if (value < fiftyPercent) {
+    if (value < 0.5) {
         return 'percent-40-50';
     }
-    if (value < sixtyPercent) {
+    if (value < 0.6) {
         return 'percent-50-60';
     }
-    if (value < seventyPercent) {
+    if (value < 0.7) {
         return 'percent-60-70';
     }
-    if (value < eightyPercent) {
+    if (value < 0.8) {
         return 'percent-70-80';
     }
-    if (value < ninetyPercent) {
+    if (value < 0.9) {
         return 'percent-80-90';
     }
     return 'percent-90-100';

package/dist/collection/components/slider/slider.js

@@ -277,8 +277,8 @@ export class Slider {
                 : undefined, ref: (el) => {
                 this.inputElement = el;
             }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), h("div", { key: 'c287ade5d57268fbf3d0a203f4f94363709dcb74', class: "track" }, h("div", { key: 'd65e20a0bd2da417a797be2501f70860cae04857', class: "active" }), this.renderStepDots(min, max)), h("div", { key: '72e6bf77fddaf64fcde86455bfddd1122a8f174c', class: "thumb" }, h("div", { key: '2066f97938cff1b20ffa0aad2e3c4803a5a2f6f9', class: "knob" }), h("div", { key: 'abd8845bf4d52faeffd1a4f25ca2068a8062bc09', class: "indicator", "aria-hidden": "true" }, this.isUnset
-            ? '\u2194\uFE0E'
-            : this.displayValue))), h("div", { key: '7107d522eb4732ca8e4ae6d901a3981853f9e97b', class: "range-labels" }, h("span", { key: 'babaa35149ef70070141f5f4e49be8fc55e367a4', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: '92caa840cc1ac72681f7ee3b18754a912d1d0829', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
+            ? '\u{2194}\u{FE0E}'
+            : this.displayValue))), h("div", { key: '231a0836f6487fd99fb2aa60d075ad8d21a4ce10', class: "range-labels" }, h("span", { key: '966e8f9241124e9c61da1558ccb04ccb1cf0c402', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: '427e6ff5bd7d894da16a6b9b006fd0e1a44f9348', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
     }
     watchValue() {
         this.syncStateFromValue();

package/dist/collection/components/tab-bar/tab-bar.css

@@ -1,216 +1,3 @@
-@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!
-  */
-.scroll-fade,
-.scroll-button {
-  position: absolute;
-  transition-property: transform;
-  transition-duration: 0.3s;
-  transition-timing-function: ease-out;
-}
-
-.scroll-fade {
-  top: 0;
-  height: 100%;
-  width: 4rem;
-  pointer-events: none;
-}
-.scroll-fade.left {
-  transform: translate3d(-4rem, 0, 0);
-  left: 0;
-  background: linear-gradient(270deg, rgba(var(--limel-tab-background-color), 0) 0%, rgba(var(--limel-tab-background-color), 0.8) 40%, rgba(var(--limel-tab-background-color), 0.8) 100%);
-}
-.scroll-fade.right {
-  transform: translate3d(4rem, 0, 0);
-  right: 0;
-  background: linear-gradient(90deg, rgba(var(--limel-tab-background-color), 0) 0%, rgba(var(--limel-tab-background-color), 0.8) 40%, rgba(var(--limel-tab-background-color), 0.8) 100%);
-}
-
-.scroll-button {
-  display: flex;
-  align-items: center;
-  top: 0;
-  bottom: 0;
-}
-.scroll-button.left {
-  transform: translate3d(-4rem, 0, 0);
-  left: 0.25rem;
-}
-.scroll-button.right {
-  transform: translate3d(4rem, 0, 0);
-  right: 0.25rem;
-}
-.scroll-button:hover {
-  transform: translate3d(0, 0, 0);
-}
-.scroll-button button {
-  appearance: none;
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  text-align: inherit;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.25rem;
-  height: calc(100% - 0.25rem * 2);
-  border-radius: 0.25rem;
-}
-.scroll-button button:not(:disabled) {
-  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);
-}
-.scroll-button button:not(:disabled):hover, .scroll-button button:not(:disabled):focus, .scroll-button button:not(:disabled):focus-visible {
-  will-change: color, background-color, box-shadow, transform;
-}
-.scroll-button button:not(:disabled):hover, .scroll-button button:not(:disabled):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);
-}
-.scroll-button button:not(:disabled):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);
-}
-.scroll-button button:not(:disabled):hover, .scroll-button button:not(:disabled):active {
-  --limel-clickable-transition-speed: 0.2s;
-  --limel-clickable-transform-speed: 0.16s;
-}
-.scroll-button limel-icon {
-  width: 1rem;
-}
-
-.mdc-tab-scroller {
-  position: relative;
-  overflow: hidden;
-}
-.mdc-tab-scroller.can-scroll-left .scroll-fade.left, .mdc-tab-scroller.can-scroll-left .scroll-button.left, .mdc-tab-scroller.can-scroll-right .scroll-fade.right, .mdc-tab-scroller.can-scroll-right .scroll-button.right {
-  transform: translate3d(0, 0, 0);
-}
-.mdc-tab-scroller.can-scroll-left:not(.can-scroll-right) .scroll-button.right, .mdc-tab-scroller.can-scroll-right:not(.can-scroll-left) .scroll-button.left {
-  opacity: 0.5;
-  transition-delay: 0.5s;
-}
-
-.lime-hide-scrollbars {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.mdc-tab-scroller__scroll-content {
-  padding: 0.25rem var(--limel-tab-active-outer-edge-curve-size) 0 var(--limel-tab-active-outer-edge-curve-size);
-  background-color: rgb(var(--limel-tab-background-color));
-}
-
 /**
 * @license
 * Copyright 2018 Google Inc.
@@ -245,82 +32,6 @@
   height: 72px;
 }
 
-/**
-* @license
-* Copyright 2018 Google Inc.
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy
-* of this software and associated documentation files (the "Software"), to deal
-* in the Software without restriction, including without limitation the rights
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-* copies of the Software, and to permit persons to whom the Software is
-* furnished to do so, subject to the following conditions:
-*
-* The above copyright notice and this permission notice shall be included in
-* all copies or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-* THE SOFTWARE.
-*/
-.mdc-tab-scroller.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content {
-  transition: 250ms transform cubic-bezier(0.4, 0, 0.2, 1);
-}
-.mdc-tab-scroller {
-  overflow-y: hidden;
-}
-
-.mdc-tab-scroller__test {
-  position: absolute;
-  top: -9999px;
-  width: 100px;
-  height: 100px;
-  overflow-x: scroll;
-}
-
-.mdc-tab-scroller__scroll-area {
-  -webkit-overflow-scrolling: touch;
-  display: flex;
-  overflow-x: hidden;
-}
-
-.mdc-tab-scroller__scroll-area::-webkit-scrollbar,
-.mdc-tab-scroller__test::-webkit-scrollbar {
-  display: none;
-}
-
-.mdc-tab-scroller__scroll-area--scroll {
-  overflow-x: scroll;
-}
-
-.mdc-tab-scroller__scroll-content {
-  position: relative;
-  display: flex;
-  flex: 1 0 auto;
-  transform: none;
-  will-change: transform;
-}
-
-.mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content {
-  justify-content: flex-start;
-}
-
-.mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content {
-  justify-content: flex-end;
-}
-
-.mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content {
-  justify-content: center;
-}
-
-.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-area {
-  -webkit-overflow-scrolling: auto;
-}
-
 /**
 * @license
 * Copyright 2018 Google Inc.
@@ -693,6 +404,13 @@
   position: relative;
 }
 
+limel-scroller {
+  --limel-scroller-fade-color: var(--limel-tab-background-color);
+  --limel-scroller-content-padding: 0.25rem
+      var(--limel-tab-active-outer-edge-curve-size) 0;
+  background-color: rgb(var(--limel-tab-background-color));
+}
+
 :host(.has-tabs-with-equal-width) .mdc-tab {
   flex: 1 0 auto;
 }

package/dist/collection/components/tab-bar/tab-bar.js

@@ -1,14 +1,13 @@
 import { h, } from "@stencil/core";
-import { MDCTabBar } from "@material/tab-bar";
-import { strings } from "@material/tab-bar/constants";
+import { MDCRipple } from "@material/ripple";
 import { isEqual, difference } from "lodash-es";
 import { setActiveTab } from "./tabs";
 import { getIconColor, getIconName } from "../icon/get-icon-props";
-const { TAB_ACTIVATED_EVENT } = strings;
-const SCROLL_DISTANCE_ON_CLICK_PX = 150;
-const HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX = 40;
-const TOTAL_WIDTH_PERCENTAGE = 100;
-const OVERLAP_PERCENTAGE = 20;
+import { findNavigationTarget, findTabStop, isNavigationKey, NO_NAVIGATION_TARGET, } from "../../util/keyboard-navigation";
+const NAVIGATION = {
+    orientation: 'horizontal',
+    wrap: true,
+};
 /**
  * Tabs are great to organize information hierarchically in the interface and divide it into distinct categories. Using tabs, you can create groups of content that are related and at the same level in the hierarchy.
  * :::warning
@@ -17,6 +16,8 @@ const OVERLAP_PERCENTAGE = 20;
  * :::
  * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
  * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.
+ * The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
+ * The left and right arrow keys move to the previous and the next tab, and select it. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
  * :::tip Other things to consider
  * Never divide the content of a tab using a nested tab bar.
  * Never place two tab bars within the same screen.
@@ -35,38 +36,34 @@ export class TabBar {
          * List of tabs to display
          */
         this.tabs = [];
-        this.canScrollLeft = false;
-        this.canScrollRight = false;
-        this.setupMdc = false;
-        this.handleTabActivated = this.handleTabActivated.bind(this);
-        this.handleScroll = this.handleScroll.bind(this);
-        this.handleLeftScrollClick = this.handleLeftScrollClick.bind(this);
-        this.handleRightScrollClick = this.handleRightScrollClick.bind(this);
-        this.renderTab = this.renderTab.bind(this);
+        this.ripples = new Map();
+        this.hasLoaded = false;
+        this.handleKeyDown = this.handleKeyDown.bind(this);
     }
-    connectedCallback() {
-        this.setup();
+    async connectedCallback() {
+        // Connecting after the first render means that the bar was moved, which
+        // resets how far it is scrolled.
+        if (!this.hasLoaded) {
+            return;
+        }
+        this.updateRipples();
+        this.revealedTabId = undefined;
+        await this.revealActiveTab('auto');
     }
     componentDidLoad() {
-        this.setup();
+        this.hasLoaded = true;
         this.triggerIconColorWarning();
     }
-    componentDidUpdate() {
-        if (!this.setupMdc) {
-            return;
-        }
-        this.setup();
-        this.setupMdc = false;
+    async componentDidRender() {
+        this.updateRipples();
+        await this.revealActiveTab(this.hasLoaded ? undefined : 'auto');
     }
     disconnectedCallback() {
-        this.tearDown();
+        this.destroyRipples();
     }
     render() {
-        return (h("div", { key: 'b0a62a521861357770e12bc6183b9590c49760e0', class: "mdc-tab-bar", role: "tablist" }, h("div", { key: '97750d5ded531aee2fca5cd1f129fee4194b8f09', class: {
-                'mdc-tab-scroller': true,
-                'can-scroll-left': this.canScrollLeft,
-                'can-scroll-right': this.canScrollRight,
-            } }, h("div", { key: '6547764cdcfc4f2f60e510863ede4d58d48b1b0e', class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, h("div", { key: 'b95453f5a1fe8b4aae7ebad439cfb795198623a8', class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), h("div", { key: 'a4703fa681f371d69ab7a6994aa3457c803563bf', class: "scroll-fade left" }), h("div", { key: '6599c7035550249f81b5488deda63900363be953', class: "scroll-button left" }, h("button", { key: '09a0a7f41a8f0dfe458af7bb719aef0fb0e1b9d7', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick }, h("limel-icon", { key: 'dd5f4cf8562fd74148778d5414f98d4c1c949bd0', name: "angle_left" }))), h("div", { key: 'b380cf4e3679d35270453b6a8671e7de8d9a92a7', class: "scroll-fade right" }), h("div", { key: '3589c3bec4d29eee61da6bc0b293201412bd343f', class: "scroll-button right" }, h("button", { key: '8af680e4abefcf6920a602c269f9a937270d70f2', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick }, h("limel-icon", { key: 'be2dcc0f1ba494cce96eab05450ce8c9619981e0', name: "angle_right" }))))));
+        const tabStop = findTabStop(this.tabs, this.tabs.findIndex((tab) => tab.active), NAVIGATION);
+        return (h("div", { key: '7ab809d50e3605613f027a1782d54511e734de93', class: "mdc-tab-bar", role: "tablist", onKeyDown: this.handleKeyDown }, h("limel-scroller", { key: 'd6ac2c90e6da77a239292ac0e90288c3e70b62f8' }, this.tabs.map((tab, index) => this.renderTab(tab, index, index === tabStop)))));
     }
     tabsChanged(newTabs = [], oldTabs = []) {
         const newIds = newTabs.map((tab) => tab.id);
@@ -74,103 +71,91 @@ export class TabBar {
         if (isEqual(newIds, oldIds)) {
             return;
         }
-        this.setupMdc = true;
-        this.tearDown();
+        this.revealedTabId = undefined;
     }
-    handleWindowResize() {
-        if (!this.scrollArea) {
-            return;
+    getTabElements() {
+        return [
+            ...this.host.shadowRoot.querySelectorAll('button[role="tab"]'),
+        ];
+    }
+    /**
+     * Gives every tab MDC's ripple, which is the feedback when a tab is
+     * pressed. Tabs that are gone lose theirs.
+     */
+    updateRipples() {
+        const tabs = this.getTabElements();
+        for (const [tab, ripple] of this.ripples) {
+            if (tabs.includes(tab)) {
+                continue;
+            }
+            ripple.destroy();
+            this.ripples.delete(tab);
+        }
+        for (const tab of tabs) {
+            if (!this.ripples.has(tab)) {
+                this.ripples.set(tab, new MDCRipple(tab));
+            }
         }
-        this.handleScroll();
     }
-    setup() {
-        const element = this.host.shadowRoot.querySelector('.mdc-tab-bar');
-        if (!element) {
-            return;
+    destroyRipples() {
+        for (const ripple of this.ripples.values()) {
+            ripple.destroy();
         }
-        this.mdcTabBar = new MDCTabBar(element);
-        this.mdcTabBar.focusOnActivate = true;
-        this.mdcTabBar.useAutomaticActivation = true;
-        this.scrollArea = element.querySelector('.mdc-tab-scroller__scroll-area');
-        this.scrollContent = element.querySelector('.mdc-tab-scroller__scroll-content');
-        this.setupListeners();
-        // Use timeout to avoid Stencil warning about re-renders. /Ads
-        setTimeout(this.handleScroll, 0);
+        this.ripples.clear();
     }
-    tearDown() {
-        if (this.scrollArea) {
-            this.scrollArea.removeEventListener('scroll', this.handleScroll);
+    /**
+     * A tab that is activated by the user has focus, and the scroller reveals
+     * what has focus. This is for a tab that becomes active without it.
+     *
+     * @param behavior - `auto` to jump to the tab. Leave it out to let the
+     * scroller glide there.
+     */
+    async revealActiveTab(behavior) {
+        const index = this.tabs.findIndex((tab) => tab.active);
+        if (index === -1) {
+            this.revealedTabId = undefined;
+            return;
+        }
+        if (this.tabs[index].id === this.revealedTabId) {
+            return;
         }
-        if (this.mdcTabBar) {
-            this.mdcTabBar.unlisten(TAB_ACTIVATED_EVENT, this.handleTabActivated);
-            this.mdcTabBar.destroy();
+        this.revealedTabId = this.tabs[index].id;
+        const element = this.getTabElements()[index];
+        const scroller = this.host.shadowRoot.querySelector('limel-scroller');
+        if (!element || !scroller || element.matches(':focus')) {
+            return;
         }
+        await scroller.componentOnReady();
+        await scroller.reveal(element, behavior);
     }
-    setupListeners() {
-        this.mdcTabBar.listen(TAB_ACTIVATED_EVENT, this.handleTabActivated);
-        this.scrollArea.addEventListener('scroll', this.handleScroll, {
-            passive: true,
-        });
+    handleKeyDown(event) {
+        if (!isNavigationKey(event, NAVIGATION)) {
+            return;
+        }
+        event.preventDefault();
+        const current = this.getTabElements().indexOf(event.target);
+        this.activateTab(findNavigationTarget(this.tabs, event.key, current, NAVIGATION));
     }
-    handleTabActivated(event) {
-        const index = event.detail.index;
+    activateTab(index) {
+        if (index === NO_NAVIGATION_TARGET) {
+            return;
+        }
+        // Not every browser focuses a button that is clicked, and a key can
+        // lead to the selected tab from another tab that has focus.
+        this.getTabElements()[index].focus();
+        if (index === this.tabs.findIndex((tab) => tab.active)) {
+            return;
+        }
         const newTabs = setActiveTab(this.tabs, index);
-        difference(newTabs, this.tabs)
-            .sort(this.sortByInactive)
-            // eslint-disable-next-line unicorn/no-array-for-each
-            .forEach((tab) => {
+        const changedTabs = difference(newTabs, this.tabs).sort(this.sortByInactive);
+        for (const tab of changedTabs) {
             this.changeTab.emit(tab);
-        });
+        }
         this.tabs = newTabs;
     }
     sortByInactive(a, b) {
         return Number(a.active) - Number(b.active);
     }
-    handleScroll() {
-        const scrollLeft = this.scrollArea.scrollLeft;
-        const scrollRight = Math.floor(this.scrollContent.getBoundingClientRect().width -
-            this.scrollArea.getBoundingClientRect().width -
-            scrollLeft);
-        if (scrollLeft > HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX) {
-            this.canScrollLeft = true;
-        }
-        else {
-            this.canScrollLeft = false;
-        }
-        if (scrollRight > HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX) {
-            this.canScrollRight = true;
-        }
-        else {
-            this.canScrollRight = false;
-        }
-    }
-    handleLeftScrollClick() {
-        const scrollDistance = this.getScrollDistance();
-        this.scrollArea.scroll({
-            left: this.scrollArea.scrollLeft - scrollDistance,
-            behavior: 'smooth',
-        });
-    }
-    handleRightScrollClick() {
-        const scrollDistance = this.getScrollDistance();
-        this.scrollArea.scroll({
-            left: this.scrollArea.scrollLeft + scrollDistance,
-            behavior: 'smooth',
-        });
-    }
-    /**
-     * Calculates how far to scroll when navigation buttons are clicked.
-     * Returns the visible width minus an overlap percentage to maintain context.
-     * Falls back to the constant value if something goes wrong.
-     */
-    getScrollDistance() {
-        if (!this.scrollArea) {
-            return SCROLL_DISTANCE_ON_CLICK_PX;
-        }
-        const containerWidth = this.scrollArea.getBoundingClientRect().width;
-        const scrollDistance = containerWidth * (1 - OVERLAP_PERCENTAGE / TOTAL_WIDTH_PERCENTAGE);
-        return Math.max(scrollDistance, SCROLL_DISTANCE_ON_CLICK_PX);
-    }
     renderIcon(tab) {
         if (!tab.icon) {
             return;
@@ -183,11 +168,11 @@ export class TabBar {
         }
         return (h("limel-icon", { class: "mdc-tab__icon", name: name, style: style, size: "small", "aria-hidden": "true" }));
     }
-    renderTab(tab) {
+    renderTab(tab, index, isTabStop) {
         return (h("button", { class: {
                 'mdc-tab': true,
                 'mdc-tab--active': !!tab.active,
-            }, role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabindex: tab.active ? 0 : -1 }, h("span", { class: "mdc-tab__content" }, this.renderIcon(tab), h("span", { class: "mdc-tab__text-label" }, tab.text), tab.badge ? h("limel-badge", { label: tab.badge }) : ''), h("span", { class: {
+            }, role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabindex: isTabStop ? 0 : -1, onClick: () => this.activateTab(index) }, h("span", { class: "mdc-tab__content" }, this.renderIcon(tab), h("span", { class: "mdc-tab__text-label" }, tab.text), tab.badge ? h("limel-badge", { label: tab.badge }) : ''), h("span", { class: {
                 'mdc-tab-indicator': true,
                 'mdc-tab-indicator--active': !!tab.active,
             } }, h("span", { class: "mdc-tab-indicator__content mdc-tab-indicator__content--underline" })), h("span", { class: "mdc-tab__ripple" })));
@@ -238,12 +223,6 @@ export class TabBar {
             }
         };
     }
-    static get states() {
-        return {
-            "canScrollLeft": {},
-            "canScrollRight": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "changeTab",
@@ -276,13 +255,4 @@ export class TabBar {
                 "methodName": "tabsChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "resize",
-                "method": "handleWindowResize",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }];
-    }
 }