@watermarkinsights/ripple 5.20.0-alpha.1 → 5.20.0-alpha.3

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.css

@@ -882,6 +882,7 @@
 .tab-item:hover {
   background-color: var(--wmcolor-interactive-background-hover);
   color: var(--wmcolor-interactive-hover);
+  cursor: pointer;
 }
 .tab-item:hover.dark {
   background-color: var(--wmcolor-interactive-background-hover-ondark);

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js

@@ -38,9 +38,9 @@ export class TabItem {
                 "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
             };
         }
-        return (h(Host, { key: 'c4233132fdeffae370245ddb4d62e05fc59ac68d', role: "presentation" }, h("li", { key: '43d23f45217e39a9c6e8d6d0f3f5401c1fa7f252', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, h("a", { key: '4606d7b99a4ebe3e92bc71089458ce4356ef318a', class: `tab`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1, onFocus: () => {
+        return (h(Host, { key: 'c4233132fdeffae370245ddb4d62e05fc59ac68d', role: "presentation" }, h("li", { key: '748c4e4a2af2a3a073a2b7b4692b1b9624991ae4', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation", onClick: this.tabClicked }, h("a", { key: 'a46175de71ef92d9beec5969ca641f26689e2551', class: `tab`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1, onFocus: () => {
                 this.wmIntTabFocused.emit({ tabItem: this.el });
-            } }, h("slot", { key: '0ec5fa05c84e7b1e6eb51a3f6e6da39568c44a5c' })))));
+            } }, h("slot", { key: 'aa80ce2cc949795bc58d506d3491ec03e9e5ba76' })))));
     }
     static get is() { return "wm-tab-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.css

@@ -899,7 +899,7 @@
 }
 :host .tabcontainer.dark {
   margin: 0;
-  padding-inline-start: 0.125rem;
+  padding-inline: 0.125rem;
 }
 :host .tabcontainer.fade-left.fade-right {
   mask-image: linear-gradient(90deg, transparent 0, black var(--fade-distance), black calc(100% - var(--fade-distance)), transparent 100%);

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js

@@ -2,10 +2,13 @@ import { h, Host } from "@stencil/core";
 import { debounce, intl } from "../../../global/functions";
 export class TabList {
     constructor() {
-        this.debouncedUpdateContainerFades = debounce(() => {
-            this.updateContainerFades();
+        this.debouncedUpdateContainerState = debounce(() => {
+            this.updateContainerFade();
             this.updateArrowVisibility();
         }, 16);
+        this.debouncedUpdateFade = debounce(() => {
+            this.updateContainerFade();
+        }, 16);
         this.customBackground = undefined;
         this.customPadding = undefined;
         this.selectedTab = undefined;
@@ -53,7 +56,9 @@ export class TabList {
         this.setSelected(selectedTab);
         this.handleTabFocused(this.selectedTabItem);
         this.updateArrowVisibility();
-        this.tabContainerEl.addEventListener("scroll", this.debouncedUpdateContainerFades);
+        this.tabContainerEl.addEventListener("scroll", this.debouncedUpdateContainerState);
+        const resizeObserver = new ResizeObserver(() => this.debouncedUpdateFade());
+        resizeObserver.observe(this.tabContainerEl);
     }
     tabItemLoaded(ev) {
         this.setAriaOnPanelAndTab(ev.target);
@@ -119,7 +124,7 @@ export class TabList {
         const targetScrollLeft = this.calculateScrollPositionForTab(tabItem, alignment);
         this.tabContainerEl.scrollTo({ left: targetScrollLeft, behavior: "smooth" });
         // Update container fade effects based on scroll position
-        this.updateContainerFades();
+        this.updateContainerFade();
     }
     calculateScrollPositionForTab(tabItem, alignment = "auto") {
         const containerRect = this.tabContainerEl.getBoundingClientRect();
@@ -166,12 +171,7 @@ export class TabList {
         }
         return tabRight - containerRect.width; // Right side cut off, align right
     }
-    /**
-     * Updates fade effects on the container based on scroll position.
-     * Adds classes to show left/right fades when content is scrolled out of view.
-     * Disables fades on edges where the focused tab is aligned to avoid obscuring focus ring.
-     */
-    updateContainerFades() {
+    updateContainerFade() {
         const scrollLeft = this.tabContainerEl.scrollLeft;
         const scrollWidth = this.tabContainerEl.scrollWidth;
         const containerWidth = this.tabContainerEl.clientWidth;
@@ -279,11 +279,11 @@ export class TabList {
                 "margin-left": "-" + this.customPadding,
             };
         }
-        return (h(Host, { key: 'b2757d684e2de9a0c37e39a16adba7933497e5ad' }, h("div", { key: 'bebc718c9cf90387d1aa081ff559ac8ded3c1862', class: "component-wrapper" }, h("wm-button", { key: '25d51d95e3f181ca9a3f1eca892151a6c4679838', class: "left-arrow", "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "chevron-left", tooltip: intl.formatMessage({
+        return (h(Host, { key: '81232664b58f1c0c39e62d502753e1b648b587d2' }, h("div", { key: 'ed6c7811469bc394b2215c732b073b03fa935bf3', class: "component-wrapper" }, h("wm-button", { key: 'c2bf1c1070515c5ec1fb800e9c30db40e11d35ba', class: "left-arrow", "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "chevron-left", tooltip: intl.formatMessage({
                 id: "tabs.showPreviousTabs",
                 defaultMessage: "Show previous tabs",
                 description: "Tooltip for button scrolling tab group.",
-            }), onClick: () => this.handleLeftArrowClick() }), h("ul", { key: 'e7179a83c597cfb8e18d97ca03f951a9000c3213', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""}`, style: margins, role: "tablist", tabIndex: -1 }, h("slot", { key: '9569251578be9691fb6c03c94dfeb2fe1a0aa04d' })), h("wm-button", { key: '996fe7e8bf119336b2b11b20219d7b00a9059ef7', class: "right-arrow", "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "chevron-right", tooltip: intl.formatMessage({
+            }), onClick: () => this.handleLeftArrowClick() }), h("ul", { key: '0ec8db2e754e96ebfcac536054698862a97f79fd', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""}`, style: margins, role: "tablist", tabIndex: -1 }, h("slot", { key: '5a1b00b872d9c72dd395a5cb959fc9566b8f108f' })), h("wm-button", { key: '424d7e7a460d82406654e2989a2d15adf8638a9c', class: "right-arrow", "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "chevron-right", tooltip: intl.formatMessage({
                 id: "tabs.showNextTabs",
                 defaultMessage: "Show next tabs",
                 description: "Tooltip for button scrolling tab group.",

package/dist/esm/{app-globals-8edefb94.js → app-globals-6487fe11.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.20.0-alpha.1";
+const version = "5.20.0-alpha.3";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/loader.js

@@ -1,6 +1,6 @@
 import { b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-8edefb94.js';
+import { g as globalScripts } from './app-globals-6487fe11.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/ripple.js

@@ -1,6 +1,6 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-8edefb94.js';
+import { g as globalScripts } from './app-globals-6487fe11.js';
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com