npm - @limetech/lime-elements - Versions diffs - 40.5.4 → 40.6.1 - Mend

@limetech/lime-elements 40.5.4 → 40.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (451) hide show

package/dist/esm/limel-tab-bar.entry.js CHANGED Viewed

@@ -1,21 +1,21 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Bnc9lzk2.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BU9IJqli.js';
 import { g as getIconName, b as getIconColor } from './get-icon-props-CgNJbSP4.js';
 import { i as isEqual } from './isEqual-CE83yS8T.js';
 import { _ as __extends, a as __assign, f as __read, M as MDCFoundation, c as MDCComponent, m as matches, b as __values } from './ponyfill-ChRGk668.js';
 import { a as applyPassive, b as MDCRippleFoundation, M as MDCRipple } from './component-7QB0OUSF.js';
+import { a as arrayIncludes, b as baseRest, i as isArrayLikeObject, c as baseFlatten, n as noop } from './isArrayLikeObject-tmUOLOWr.js';
 import { S as SetCache, c as cacheHas } from './_baseIsEqual-CyF4P8uM.js';
-import { a as arrayIncludes, b as baseRest, i as isArrayLikeObject, c as baseFlatten } from './isArrayLikeObject-CJB8HbtH.js';
-import './eq-CZ30nDJE.js';
-import './_getTag-BiAaLWvH.js';
+import './identity-CK4jS9_E.js';
+import './_defineProperty-C69Btzid.js';
+import './_getNative-COawFdVX.js';
+import './isFunction-9zQTeQI8.js';
 import './isObject-BJQylLSL.js';
+import './_getTag-BiAaLWvH.js';
 import './isObjectLike-oiMYqRQ0.js';
 import './isArrayLike-CyVGB489.js';
-import './isFunction-9zQTeQI8.js';
-import './_getNative-COawFdVX.js';
 import './isArray-B8VKuhvH.js';
+import './eq-CZ30nDJE.js';
 import './_isIndex-B--C3qwe.js';
-import './identity-CK4jS9_E.js';
-import './_defineProperty-C69Btzid.js';
 /** Used as the size to enable large array optimizations. */
 var LARGE_ARRAY_SIZE = 200;
@@ -2043,13 +2043,18 @@ function setActiveTab(tabs, index) {
     return result;
 }
-const tabBarCss = () => `@charset "UTF-8";.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))}.mdc-tab-bar{width:100%}.mdc-tab{height:48px}.mdc-tab--stacked{height:72px}.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}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-color:#6200ee;border-color:var(--mdc-theme-primary, #6200ee)}.mdc-tab-indicator .mdc-tab-indicator__content--icon{color:#018786;color:var(--mdc-theme-secondary, #018786)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:2px}.mdc-tab-indicator .mdc-tab-indicator__content--icon{height:34px;font-size:34px}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition:150ms opacity linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition-delay:100ms}.mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform, uppercase)}.mdc-tab .mdc-tab__text-label{color:rgba(0, 0, 0, 0.6)}.mdc-tab .mdc-tab__icon{color:rgba(0, 0, 0, 0.54);fill:currentColor}.mdc-tab{position:relative}.mdc-tab__content{position:relative}.mdc-tab__icon{width:24px;height:24px;font-size:24px}.mdc-tab--active .mdc-tab__text-label{color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}.mdc-tab--active .mdc-tab__icon{color:#6200ee;color:var(--mdc-theme-primary, #6200ee);fill:currentColor}.mdc-tab{background:none}.mdc-tab{min-width:90px;padding-right:24px;padding-left:24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1}.mdc-tab::-moz-focus-inner{padding:0;border:0}.mdc-tab--min-width{flex:0 1 auto}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab__icon{transition:150ms color linear;z-index:2}.mdc-tab--stacked .mdc-tab__content{flex-direction:column;align-items:center;justify-content:center}.mdc-tab--stacked .mdc-tab__text-label{padding-top:6px;padding-bottom:4px}.mdc-tab--active .mdc-tab__text-label,.mdc-tab--active .mdc-tab__icon{transition-delay:100ms}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:8px;padding-right:0}[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label,.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl]{padding-left:0;padding-right:8px;}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-tab{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-tab .mdc-tab__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-tab .mdc-tab__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-tab.mdc-ripple-upgraded--foreground-deactivation .mdc-tab__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-tab:hover .mdc-tab__ripple::before,.mdc-tab.mdc-ripple-surface--hover .mdc-tab__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-tab.mdc-ripple-upgraded--background-focused .mdc-tab__ripple::before,.mdc-tab:not(.mdc-ripple-upgraded):focus .mdc-tab__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-tab:not(.mdc-ripple-upgraded) .mdc-tab__ripple::after{transition:opacity 150ms linear}.mdc-tab:not(.mdc-ripple-upgraded):active .mdc-tab__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab__ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;will-change:transform, opacity}:host(limel-tab-bar){--limel-tab-background-color:var(--contrast-300);--limel-tab-border-radius:0.625rem;--limel-active-tab-background-color:var(       --tab-panel-background-color,       rgb(var(--contrast-100))   );--limel-tab-active-outer-edge-curve-size:0.75rem;--limel-tab-separator-width:0.125rem;--limel-tab-separator-background-color:rgb(var(--contrast-600));isolation:isolate;display:block;position:relative}:host(.has-tabs-with-equal-width) .mdc-tab{flex:1 0 auto}.mdc-tab{font-family:inherit;font-weight:400;letter-spacing:normal;font-size:var(--limel-theme-default-font-size);text-transform:none}.mdc-tab-indicator .mdc-tab-indicator__content{border:none}.mdc-tab__ripple{box-sizing:border-box;border-radius:var(--limel-tab-border-radius);border-style:solid;border-color:transparent;border-width:0.25rem;opacity:0.7}.mdc-tab__ripple:before,.mdc-tab__ripple:after{transition:background-color 0.5s ease}.mdc-tab{border-radius:0;padding-right:1rem;padding-left:1rem;min-width:2.5rem;background-color:transparent;flex:0 0 auto;height:2.5rem}.mdc-tab:not(.mdc-tab--active):after{content:"";display:block;background-color:var(--limel-tab-separator-background-color);width:var(--limel-tab-separator-width);height:1rem;margin:auto;position:absolute;top:0;bottom:0;border-radius:1rem;right:calc(-1 * var(--limel-tab-separator-width))}.mdc-tab:not(.mdc-tab--active):last-of-type:after{display:none}.mdc-tab .mdc-tab__icon{color:rgb(var(--contrast-800));margin-left:-0.25rem}.mdc-tab limel-badge{margin-right:-0.25rem;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.mdc-tab--active{border-radius:var(--limel-tab-border-radius) var(--limel-tab-border-radius) 0 0;background-color:var(--limel-active-tab-background-color);z-index:2}.mdc-tab--active:before,.mdc-tab--active:after{content:"";display:block;width:var(--limel-tab-active-outer-edge-curve-size);height:var(--limel-tab-active-outer-edge-curve-size);position:absolute;bottom:0;background-color:var(--limel-active-tab-background-color);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E")}.mdc-tab--active:before{left:calc(-1 * var(--limel-tab-active-outer-edge-curve-size));transform:rotateY(180deg)}.mdc-tab--active:after{right:calc(-1 * var(--limel-tab-active-outer-edge-curve-size))}.mdc-tab--active .mdc-ripple-upgraded--background-focused:before{background-color:transparent;transition:background-color 1s ease}.mdc-tab--active .mdc-tab__icon{color:var(--mdc-theme-primary)}.mdc-tab__content{gap:0.375rem}.mdc-tab .mdc-tab__text-label{transition:color 0.2s ease;padding-left:0 !important;color:var(--limel-theme-on-surface-color)}.mdc-tab:hover .mdc-tab__text-label{color:var(--limel-theme-text-primary-on-background-color)}.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--lime-primary-color, var(--limel-theme-primary-color))}`;
+const tabBarCss = () => `.mdc-tab-bar{width:100%}.mdc-tab{height:48px}.mdc-tab--stacked{height:72px}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-color:#6200ee;border-color:var(--mdc-theme-primary, #6200ee)}.mdc-tab-indicator .mdc-tab-indicator__content--icon{color:#018786;color:var(--mdc-theme-secondary, #018786)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:2px}.mdc-tab-indicator .mdc-tab-indicator__content--icon{height:34px;font-size:34px}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition:150ms opacity linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition-delay:100ms}.mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform, uppercase)}.mdc-tab .mdc-tab__text-label{color:rgba(0, 0, 0, 0.6)}.mdc-tab .mdc-tab__icon{color:rgba(0, 0, 0, 0.54);fill:currentColor}.mdc-tab{position:relative}.mdc-tab__content{position:relative}.mdc-tab__icon{width:24px;height:24px;font-size:24px}.mdc-tab--active .mdc-tab__text-label{color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}.mdc-tab--active .mdc-tab__icon{color:#6200ee;color:var(--mdc-theme-primary, #6200ee);fill:currentColor}.mdc-tab{background:none}.mdc-tab{min-width:90px;padding-right:24px;padding-left:24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1}.mdc-tab::-moz-focus-inner{padding:0;border:0}.mdc-tab--min-width{flex:0 1 auto}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab__icon{transition:150ms color linear;z-index:2}.mdc-tab--stacked .mdc-tab__content{flex-direction:column;align-items:center;justify-content:center}.mdc-tab--stacked .mdc-tab__text-label{padding-top:6px;padding-bottom:4px}.mdc-tab--active .mdc-tab__text-label,.mdc-tab--active .mdc-tab__icon{transition-delay:100ms}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:8px;padding-right:0}[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label,.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl]{padding-left:0;padding-right:8px;}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-tab{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-tab .mdc-tab__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-tab .mdc-tab__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-tab.mdc-ripple-upgraded--foreground-deactivation .mdc-tab__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-tab:hover .mdc-tab__ripple::before,.mdc-tab.mdc-ripple-surface--hover .mdc-tab__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-tab.mdc-ripple-upgraded--background-focused .mdc-tab__ripple::before,.mdc-tab:not(.mdc-ripple-upgraded):focus .mdc-tab__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-tab:not(.mdc-ripple-upgraded) .mdc-tab__ripple::after{transition:opacity 150ms linear}.mdc-tab:not(.mdc-ripple-upgraded):active .mdc-tab__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab__ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;will-change:transform, opacity}:host(limel-tab-bar){--limel-tab-background-color:var(--contrast-300);--limel-tab-border-radius:0.625rem;--limel-active-tab-background-color:var(       --tab-panel-background-color,       rgb(var(--contrast-100))   );--limel-tab-active-outer-edge-curve-size:0.75rem;--limel-tab-separator-width:0.125rem;--limel-tab-separator-background-color:rgb(var(--contrast-600));isolation:isolate;display:block;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}.mdc-tab{font-family:inherit;font-weight:400;letter-spacing:normal;font-size:var(--limel-theme-default-font-size);text-transform:none}.mdc-tab-indicator .mdc-tab-indicator__content{border:none}.mdc-tab__ripple{box-sizing:border-box;border-radius:var(--limel-tab-border-radius);border-style:solid;border-color:transparent;border-width:0.25rem;opacity:0.7}.mdc-tab__ripple:before,.mdc-tab__ripple:after{transition:background-color 0.5s ease}.mdc-tab{border-radius:0;padding-right:1rem;padding-left:1rem;min-width:2.5rem;background-color:transparent;flex:0 0 auto;height:2.5rem}.mdc-tab:not(.mdc-tab--active):after{content:"";display:block;background-color:var(--limel-tab-separator-background-color);width:var(--limel-tab-separator-width);height:1rem;margin:auto;position:absolute;top:0;bottom:0;border-radius:1rem;right:calc(-1 * var(--limel-tab-separator-width))}.mdc-tab:not(.mdc-tab--active):last-of-type:after{display:none}.mdc-tab .mdc-tab__icon{color:rgb(var(--contrast-800));margin-left:-0.25rem}.mdc-tab limel-badge{margin-right:-0.25rem;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.mdc-tab--active{border-radius:var(--limel-tab-border-radius) var(--limel-tab-border-radius) 0 0;background-color:var(--limel-active-tab-background-color);z-index:2}.mdc-tab--active:before,.mdc-tab--active:after{content:"";display:block;width:var(--limel-tab-active-outer-edge-curve-size);height:var(--limel-tab-active-outer-edge-curve-size);position:absolute;bottom:0;background-color:var(--limel-active-tab-background-color);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E")}.mdc-tab--active:before{left:calc(-1 * var(--limel-tab-active-outer-edge-curve-size));transform:rotateY(180deg)}.mdc-tab--active:after{right:calc(-1 * var(--limel-tab-active-outer-edge-curve-size))}.mdc-tab--active .mdc-ripple-upgraded--background-focused:before{background-color:transparent;transition:background-color 1s ease}.mdc-tab--active .mdc-tab__icon{color:var(--mdc-theme-primary)}.mdc-tab__content{gap:0.375rem}.mdc-tab .mdc-tab__text-label{transition:color 0.2s ease;padding-left:0 !important;color:var(--limel-theme-on-surface-color)}.mdc-tab:hover .mdc-tab__text-label{color:var(--limel-theme-text-primary-on-background-color)}.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--lime-primary-color, var(--limel-theme-primary-color))}`;
 const { TAB_ACTIVATED_EVENT } = strings$1;
-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;
+// MDC wants to scroll the tabs into view itself, and finds what to scroll by
+// looking for the `mdc-tab-scroller` class. Scrolling is up to `limel-scroller`.
+const tabScrollerForMdc = {
+    scrollTo: noop,
+    incrementScroll: noop,
+    getScrollPosition: () => 0,
+    getScrollContentWidth: () => 0,
+    destroy: noop,
+};
 const TabBar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -2058,22 +2063,29 @@ const TabBar = class {
          * List of tabs to display
          */
         this.tabs = [];
-        this.canScrollLeft = false;
-        this.canScrollRight = false;
         this.setupMdc = false;
+        this.hasLoaded = 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);
     }
-    connectedCallback() {
+    async connectedCallback() {
         this.setup();
+        // Connecting after the first render means that the bar was moved, which
+        // resets how far it is scrolled.
+        if (!this.hasLoaded) {
+            return;
+        }
+        this.revealedTabId = undefined;
+        await this.revealActiveTab('auto');
     }
     componentDidLoad() {
+        this.hasLoaded = true;
         this.setup();
         this.triggerIconColorWarning();
     }
+    async componentDidRender() {
+        await this.revealActiveTab(this.hasLoaded ? undefined : 'auto');
+    }
     componentDidUpdate() {
         if (!this.setupMdc) {
             return;
@@ -2085,11 +2097,7 @@ const TabBar = class {
         this.tearDown();
     }
     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" }))))));
+        return (h("div", { key: '343865b4ddac8aa25042cb91916ad411366b4602', class: "mdc-tab-bar", role: "tablist" }, h("limel-scroller", { key: '7329ad9bb97c09afc79c3770d27db9fbb16093f3', class: "mdc-tab-scroller" }, this.tabs.map(this.renderTab))));
     }
     tabsChanged(newTabs = [], oldTabs = []) {
         const newIds = newTabs.map((tab) => tab.id);
@@ -2098,102 +2106,63 @@ const TabBar = class {
             return;
         }
         this.setupMdc = true;
+        this.revealedTabId = undefined;
         this.tearDown();
     }
-    handleWindowResize() {
-        if (!this.scrollArea) {
-            return;
-        }
-        this.handleScroll();
-    }
     setup() {
         const element = this.host.shadowRoot.querySelector('.mdc-tab-bar');
         if (!element) {
             return;
         }
-        this.mdcTabBar = new MDCTabBar(element);
+        this.mdcTabBar = new MDCTabBar(element, undefined, undefined, () => tabScrollerForMdc);
         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.mdcTabBar.listen(TAB_ACTIVATED_EVENT, this.handleTabActivated);
     }
     tearDown() {
-        if (this.scrollArea) {
-            this.scrollArea.removeEventListener('scroll', this.handleScroll);
-        }
-        if (this.mdcTabBar) {
-            this.mdcTabBar.unlisten(TAB_ACTIVATED_EVENT, this.handleTabActivated);
-            this.mdcTabBar.destroy();
+        if (!this.mdcTabBar) {
+            return;
         }
+        this.mdcTabBar.unlisten(TAB_ACTIVATED_EVENT, this.handleTabActivated);
+        this.mdcTabBar.destroy();
     }
-    setupListeners() {
-        this.mdcTabBar.listen(TAB_ACTIVATED_EVENT, this.handleTabActivated);
-        this.scrollArea.addEventListener('scroll', this.handleScroll, {
-            passive: true,
-        });
+    /**
+     * 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;
+        }
+        this.revealedTabId = this.tabs[index].id;
+        const element = this.host.shadowRoot.querySelectorAll('button[role="tab"]')[index];
+        const scroller = this.host.shadowRoot.querySelector('limel-scroller');
+        if (!element || !scroller || element.matches(':focus')) {
+            return;
+        }
+        await scroller.componentOnReady();
+        await scroller.reveal(element, behavior);
     }
     handleTabActivated(event) {
         const index = event.detail.index;
         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;

package/dist/esm/limel-tab-panel.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Bnc9lzk2.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BU9IJqli.js';
 import { d as dispatchResizeEvent } from './dispatch-resize-event-z_E3sq3p.js';
 const tabPanelCss = () => `:host(limel-tab-panel){--tab-panel-background-color:rgb(var(--contrast-100));display:block;height:100%}.tab-panel{height:100%;position:relative;display:flex;flex-direction:column}.tab-content{height:100%;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;background-color:var(--tab-panel-background-color)}`;
@@ -29,8 +29,9 @@ const TabPanel = class {
         }
         slot.addEventListener('slotchange', this.setSlotElements);
         this.setSlotElements();
-        // eslint-disable-next-line unicorn/no-array-for-each
-        this.tabs.forEach(this.setTabStatus);
+        for (const tab of this.tabs) {
+            this.setTabStatus(tab);
+        }
     }
     disconnectedCallback() {
         const slot = this.getSlot();
@@ -38,18 +39,20 @@ const TabPanel = class {
     }
     tabsChanged() {
         this.hidePanels();
-        // eslint-disable-next-line unicorn/no-array-for-each
-        this.tabs.forEach(this.setTabStatus);
+        for (const tab of this.tabs) {
+            this.setTabStatus(tab);
+        }
     }
     render() {
-        return (h(Host, { key: 'e81003e7cb21f7d348368393b6ac6c8039510f26', onChangeTab: this.handleChangeTabs }, h("div", { key: '591a3cd5176b359ce6ce9eef69355d5084656be7', class: "tab-panel" }, h("limel-tab-bar", { key: '1097440df6c6e01693a39efe3647e9511a664887', tabs: this.tabs }), h("div", { key: 'a6c49f26996ecc40f4a5d3d70de52777438adb13', class: "tab-content" }, h("slot", { key: '192808544a1534a3799ab5a438f08cbbe1d6bd40' })))));
+        return (h(Host, { key: 'acb9f2f1081972fc45104cc357055af883ebad2d', onChangeTab: this.handleChangeTabs }, h("div", { key: '318df7ddc8d28f5952c7e67b154088ca13f4355a', class: "tab-panel" }, h("limel-tab-bar", { key: '2656eb61f4e815eba9636bf939e368651bbd8dcf', tabs: this.tabs }), h("div", { key: '41d1bf3149a19d28d7d9f1ace0744ffe26811080', class: "tab-content" }, h("slot", { key: 'ee234615e96536b40ce089978cba5bd21a1fb129' })))));
     }
     setSlotElements() {
         const slot = this.getSlot();
         this.hidePanels();
         this.slotElements = Array.prototype.slice.call(slot.assignedElements());
-        // eslint-disable-next-line unicorn/no-array-for-each
-        this.tabs.forEach(this.setTabStatus);
+        for (const tab of this.tabs) {
+            this.setTabStatus(tab);
+        }
     }
     setTabStatus(tab) {
         const element = this.slotElements.find((e) => e.id === tab.id);
@@ -74,7 +77,7 @@ const TabPanel = class {
         this.setTabStatus(event.detail);
         // Content inside the newly activated tab may need to redraw once
         // visible, so we use the resize event trick. /Ads
-        setTimeout(dispatchResizeEvent);
+        setTimeout(dispatchResizeEvent, 0);
     }
     getSlot() {
         return this.host.shadowRoot.querySelector('slot');