udp-stencil-component-library 25.18.1-beta.5 → 25.18.1-beta.6

package/dist/components/udp-tab2.js

@@ -8,22 +8,38 @@ const UdpTab = /*@__PURE__*/ proxyCustomElement(class UdpTab extends H {
         if (registerHost !== false) {
             this.__registerHost();
         }
-    }
-    activeChanged() {
-        // Handle the active state change, if needed
+        /**
+         * True if this is the active tab.
+         * This is set by the parent <udp-tabs> component.
+         */
+        this.active = false;
+        /**
+         * Placement of the icon relative to the title.
+         * @default 'start'
+         */
+        this.iconPlacement = 'start';
+        /**
+         * If true, the tab will be hidden from the tab list.
+         * @default false
+         */
+        this.hidden = false;
+        /**
+         * If true, the tab will be unselectable.
+         * @default false
+         */
+        this.disabled = false;
     }
     render() {
-        return (h("div", { key: '775798db38994b9a9dcfdb94a8cc588bafed47f9', class: { 'tab-panel': true, 'active': this.active } }, h("slot", { key: '6f67d3f672d0600eeb84b9dfcc2c12f2fc931ef7' })));
+        return (h("div", { key: '0dbc41862f8bb01ecfec94ca44f082f0e4e7104f', class: { 'tab-panel': true, 'active': this.active }, role: "tabpanel" }, h("slot", { key: 'facc5f18260ea67c405dca1a90dcdc48e5ec995c' })));
     }
-    static get watchers() { return {
-        "active": ["activeChanged"]
-    }; }
     static get style() { return udpTabCss; }
 }, [260, "udp-tab", {
         "title": [1],
-        "active": [4]
-    }, undefined, {
-        "active": ["activeChanged"]
+        "active": [516],
+        "icon": [1],
+        "iconPlacement": [1, "icon-placement"],
+        "hidden": [4],
+        "disabled": [4]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/udp-tab2.js.map

@@ -1 +1 @@
-{"file":"udp-tab2.js","mappings":";;AAAA,MAAM,SAAS,GAAG,mFAAmF;;MCMxF,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;;;;;;;IAKjB,aAAa,GAAA;;;IAIb,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,EAAA,EACtD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/tabs/tab/udp-tab.css?tag=udp-tab","src/components/my-component/UI/tabs/tab/udp-tab.tsx"],"sourcesContent":[".tab-panel {\n    display: none;\n    background-color: #ffffff;\n  }\n  \n  .tab-panel.active {\n    display: block;\n  }\n  \n\n  ","import { Component, h, Prop, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'udp-tab',\n  styleUrl: 'udp-tab.css',\n})\nexport class UdpTab {\n  @Prop() title: string;\n  @Prop() active: boolean;\n\n  @Watch('active')\n  activeChanged() {\n    // Handle the active state change, if needed\n  }\n\n  render() {\n    return (\n      <div class={{ 'tab-panel': true, 'active': this.active }}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"udp-tab2.js","mappings":";;AAAA,MAAM,SAAS,GAAG,mFAAmF;;MCMxF,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AAJnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAUE;;;AAGG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAOhD;;;AAGG;AACK,QAAA,IAAa,CAAA,aAAA,GAAwC,OAAO;AACpE;;;AAGG;AACK,QAAA,IAAM,CAAA,MAAA,GAAa,KAAK;AAEhC;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;AASnC;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,UAAU,EAAA,EACvE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/tabs/tab/udp-tab.css?tag=udp-tab","src/components/my-component/UI/tabs/tab/udp-tab.tsx"],"sourcesContent":[".tab-panel {\n    display: none;\n    background-color: #ffffff;\n  }\n  \n  .tab-panel.active {\n    display: block;\n  }\n  \n\n  ","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'udp-tab',\n  styleUrl: 'udp-tab.css',\n})\nexport class UdpTab {\n  /**\n   * The title of the tab, displayed in the tab-header.\n   */\n  @Prop() title: string;\n\n  /**\n   * True if this is the active tab.\n   * This is set by the parent <udp-tabs> component.\n   */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /**\n   * Optional icon to display in the tab.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Placement of the icon relative to the title.\n   * @default 'start'\n   */\n  @Prop() iconPlacement?: 'start' | 'end' | 'top' | 'bottom' = 'start';\n  /**\n   * If true, the tab will be hidden from the tab list.\n   * @default false\n   */\n  @Prop() hidden?: boolean = false;\n\n  /**\n   * If true, the tab will be unselectable.\n   * @default false\n   */\n  @Prop() disabled?: boolean = false;\n\n  render() {\n    return (\n      <div class={{ 'tab-panel': true, 'active': this.active }} role=\"tabpanel\">\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/udp-tabs2.js

@@ -1,6 +1,7 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
+import { d as defineCustomElement$1 } from './udp-icon2.js';
 
-const udpTabsCss = ".tab-header{display:flex;background-color:#ffffff;border-bottom:1px solid #e0e0e0}.tab-header button{flex-grow:1;padding:16px;font-size:14px;text-align:center;border:none;background:none;cursor:pointer;outline:none;transition:all 0.3s ease}.tab-header button.active{border-bottom:2px solid 'var(--secondary-color)';font-weight:600}.tab-content{display:flex;flex-direction:column;padding:16px;background-color:#ffffff}.tab-header button{cursor:pointer;border:none;padding:16px;background-color:transparent;color:#757575}.tab-header button.active{border-bottom:2px solid #344861;color:#344861;font-weight:600}";
+const udpTabsCss = ".tab-container{display:flex;flex-direction:column}.tab-header{background-color:#ffffff;position:relative;display:flex;align-items:center}.tab-scroll-container{display:flex;position:relative;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0}.tab-scroll-container::-webkit-scrollbar{height:4px}.tab-scroll-container::-webkit-scrollbar-track{background:transparent}.tab-scroll-container::-webkit-scrollbar-thumb{background-color:rgba(0, 0, 0, 0.2);border-radius:4px}.tab-scroll-container::-webkit-scrollbar-thumb:hover{background-color:rgba(0, 0, 0, 0.3)}.tab-header::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--divider-color, #e0e0e0)}.tab-header button{padding:16px;font-size:14px;text-align:center;border:none;background:none;cursor:pointer;outline:none;transition:all 0.22s ease;color:#555555;font-weight:600;opacity:0.9;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px}.tab-header.fill .tab-scroll-container{width:100%}.tab-header.fill .tab-scroll-container button{flex-grow:1}.tab-header button.active{color:var(--secondary-color, #344861);opacity:1.0}.tab-header button.scroll-arrow{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:40px;padding:0;background:#ffffff;cursor:pointer;font-size:16px;font-weight:bold;color:#757575;z-index:2;transition:color 0.2s ease;flex-shrink:0;opacity:1;gap:0}.tab-header button.scroll-arrow:hover{color:#000}.tab-header button.scroll-arrow.left{left:0}.tab-header button.scroll-arrow.right{right:0}.scroll-fade{position:absolute;top:0;bottom:0;width:30px;z-index:1;pointer-events:none}.scroll-fade.left{left:40px;background:linear-gradient(\n    to right,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  )}.scroll-fade.right{right:40px;background:linear-gradient(\n    to left,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  )}.tab-header button udp-icon{font-size:1.2em;line-height:1}.tab-header button.icon-start{flex-direction:row}.tab-header button.icon-end{flex-direction:row-reverse}.tab-header button.icon-top{flex-direction:column;gap:4px}.tab-header button.icon-bottom{flex-direction:column-reverse;gap:4px}.tab-content{padding:16px;background-color:#ffffff}.slider{position:absolute;bottom:0;left:0;height:2px;background-color:var(--secondary-color, #344861);transition:transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),\n    width 0.22s cubic-bezier(0.4, 0, 0.2, 1);z-index:1}.tab-header button.disabled{opacity:0.5;cursor:not-allowed}.tab-header button.disabled.active{color:#757575;opacity:0.5}";
 
 const UdpTabs = /*@__PURE__*/ proxyCustomElement(class UdpTabs extends H {
     constructor(registerHost) {
@@ -8,29 +9,192 @@ const UdpTabs = /*@__PURE__*/ proxyCustomElement(class UdpTabs extends H {
         if (registerHost !== false) {
             this.__registerHost();
         }
+        this.__attachShadow();
+        /**
+         * Specifies the layout variant of the tab header.
+         *
+         * - `'standard'`: Tabs will be sized based on their content.
+         * - `'fill'`: Tabs will stretch to fill the available horizontal space.
+         */
+        this.variant = 'fill';
         this.activeTab = 0;
+        this.tabDetails = []; // Uses new interface
+        this.sliderStyle = {
+            width: '0',
+            transform: 'translateX(0)',
+        };
+        this.showScrollLeft = false;
+        this.showScrollRight = false;
+        this.tabs = [];
+        this.buttonRefs = [];
+    }
+    handleSlotChange() {
+        this.initializeTabs();
+    }
+    handleResize() {
+        requestAnimationFrame(() => {
+            this.updateSliderPosition();
+            this.checkScroll();
+        });
+    }
+    componentDidLoad() {
+        this.initializeTabs();
+    }
+    onActiveTabChange() {
+        this.updateActiveTabs();
+        this.updateSliderPosition();
+    }
+    onVariantChange() {
+        requestAnimationFrame(() => {
+            this.updateSliderPosition();
+            this.checkScroll();
+        });
+    }
+    initializeTabs() {
+        var _a, _b;
+        this.buttonRefs = [];
+        // Get ALL tabs from the slot
+        this.tabs = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'udp-tab');
+        this.tabDetails = this.tabs.map(tab => ({
+            title: tab.title,
+            icon: tab.icon,
+            iconPlacement: tab.iconPlacement,
+            hidden: tab.hidden,
+            disabled: tab.disabled,
+        }));
+        // Check if the current activeTab (default 0) is invalid
+        if (((_a = this.tabDetails[this.activeTab]) === null || _a === void 0 ? void 0 : _a.hidden) || ((_b = this.tabDetails[this.activeTab]) === null || _b === void 0 ? void 0 : _b.disabled)) {
+            // If it is, find the first valid tab to select
+            const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);
+            // If we found one, set it. If not (all tabs invalid), set to -1
+            this.activeTab = firstValidIndex;
+        }
+        this.updateActiveTabs();
+        requestAnimationFrame(() => {
+            this.updateSliderPosition();
+            this.checkScroll();
+        });
+    }
+    updateActiveTabs() {
+        this.tabs.forEach((tab, index) => {
+            tab.active = index === this.activeTab;
+        });
+    }
+    updateSliderPosition() {
+        const activeButton = this.buttonRefs[this.activeTab];
+        if (!activeButton) {
+            this.sliderStyle = { width: '0px', transform: 'translateX(0px)' };
+            return;
+        }
+        this.sliderStyle = {
+            width: `${activeButton.offsetWidth}px`,
+            transform: `translateX(${activeButton.offsetLeft}px)`,
+        };
+    }
+    checkScroll() {
+        if (!this.scrollContainerRef)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainerRef;
+        const isOverflowing = scrollWidth > clientWidth;
+        this.showScrollLeft = isOverflowing && scrollLeft > 1;
+        this.showScrollRight = isOverflowing && scrollLeft < scrollWidth - clientWidth - 1;
     }
     tabClicked(tabIndex) {
+        var _a;
+        if ((_a = this.tabDetails[tabIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+            return;
+        }
         this.activeTab = tabIndex;
+        const tabButton = this.buttonRefs[tabIndex];
+        const container = this.scrollContainerRef;
+        if (!tabButton || !container)
+            return;
+        const { scrollLeft, clientWidth } = container;
+        const tabLeft = tabButton.offsetLeft;
+        const tabRight = tabLeft + tabButton.offsetWidth;
+        const safeZonePadding = 70;
+        const safeZoneLeft = scrollLeft + safeZonePadding;
+        const safeZoneRight = scrollLeft + clientWidth - safeZonePadding;
+        // Check if the tab's left edge is hidden by the left fade
+        if (tabLeft < safeZoneLeft) {
+            // Scroll to position the tab's left edge at the start of the safe zone
+            container.scrollTo({
+                left: tabLeft - safeZonePadding,
+                behavior: 'smooth'
+            });
+        }
+        // Check if the tab's right edge is hidden by the right fade
+        else if (tabRight > safeZoneRight) {
+            // Scroll to position the tab's right edge at the end of the safe zone
+            container.scrollTo({
+                left: tabRight - clientWidth + safeZonePadding,
+                behavior: 'smooth'
+            });
+        }
+    }
+    scrollToStart() {
+        if (!this.scrollContainerRef)
+            return;
+        this.scrollContainerRef.scrollTo({ left: 0, behavior: 'smooth' });
+    }
+    scrollToEnd() {
+        if (!this.scrollContainerRef)
+            return;
+        const container = this.scrollContainerRef;
+        const { scrollWidth, clientWidth } = container;
+        const maxScrollLeft = scrollWidth - clientWidth;
+        container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });
     }
     render() {
-        return (h("div", { key: '11b569eb074151f849159aa15af92129c8992929' }, h("div", { key: '3c6d9178dd37fd5fd5b91ec44e287241ee256e1c', class: "tab-header" }, h("slot", { key: 'e9289d5d3fa6e2da92b81de71e55276b3455f37c', name: "tab-title" })), h("div", { key: 'ed2038f48697251f5dfd3856d26711313376af10' }, h("slot", { key: '2b6d109cef169e2f50fb876387efc334464dc9da' }))));
+        return (h("div", { key: '173d42a32bb4ed0cbd57950e38bb75ab216efda1', class: "tab-container" }, h("div", { key: '369754b2aeed74f35f5e7be39b6617081c41cad2', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: '68fefbbb9e8c95f54b3a78d700698d61b1c0b8bc', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: 'f2230bcf77a4ef6cfc972f3219023c8da4607e2e', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: '69476b6d664f2b42b7a102275999f131e1b397f0', class: "scroll-fade left" }), h("div", { key: 'a12d5b22ec762e52091770b1ed276a7df8267437', class: "tab-scroll-container", ref: el => (this.scrollContainerRef = el), onScroll: () => this.checkScroll() }, this.tabDetails.map((tab, index) => {
+            if (tab.hidden) {
+                return null;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const iconEl = tab.icon ? h("udp-icon", { iconName: tab.icon, color: 'inherit' }) : null;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const titleEl = h("span", null, tab.title);
+            return (h("button", { class: {
+                    'active': index === this.activeTab,
+                    'has-icon': !!tab.icon,
+                    [`icon-${tab.iconPlacement}`]: !!tab.icon,
+                    'disabled': tab.disabled,
+                }, disabled: tab.disabled, onClick: () => this.tabClicked(index), role: "tab", "aria-selected": index === this.activeTab ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', ref: el => (this.buttonRefs[index] = el) }, iconEl, titleEl));
+        }), h("div", { key: '6726c5fd74d32e9385aa83aaf88ab92e9d83d858', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: 'ce175b2bb6465211587af95995375d315a0e6fed', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: '63dbc5cd40921b7b39c75377986ba37b5d69c93a', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: 'b191a3a90cdecf10abf94dc98fbf16bd973ee1e1', iconName: "chevronRight16", color: "inherit" })))), h("div", { key: '3ffe241125e1fa6969cf9fcce49350d63f82bee6', class: "tab-content" }, h("slot", { key: 'a6fe2932604e485e85f0a860ee58633f8bf161b6' }))));
     }
+    get el() { return this; }
+    static get watchers() { return {
+        "activeTab": ["onActiveTabChange"],
+        "variant": ["onVariantChange"]
+    }; }
     static get style() { return udpTabsCss; }
-}, [260, "udp-tabs", {
-        "activeTab": [32]
+}, [257, "udp-tabs", {
+        "variant": [1],
+        "activeTab": [32],
+        "tabDetails": [32],
+        "sliderStyle": [32],
+        "showScrollLeft": [32],
+        "showScrollRight": [32]
+    }, [[0, "slotchange", "handleSlotChange"], [9, "resize", "handleResize"]], {
+        "activeTab": ["onActiveTabChange"],
+        "variant": ["onVariantChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["udp-tabs"];
+    const components = ["udp-tabs", "udp-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "udp-tabs":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, UdpTabs);
             }
             break;
+        case "udp-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 

package/dist/components/udp-tabs2.js.map

@@ -1 +1 @@
-{"file":"udp-tabs2.js","mappings":";;AAAA,MAAM,UAAU,GAAG,imBAAimB;;MCMvmB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AAJpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAKW,QAAA,IAAS,CAAA,SAAA,GAAW,CAAC;AAoB/B;AAlBC,IAAA,UAAU,CAAC,QAAgB,EAAA;AACzB,QAAA,IAAI,CAAC,SAAS,GAAG,QAAQ;;IAG3B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,EAAA,CAEf,CACH,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/tabs/tab/tabs/udp-tabs.css?tag=udp-tabs","src/components/my-component/UI/tabs/tab/tabs/udp-tabs.tsx"],"sourcesContent":[".tab-header {\n    display: flex;\n    background-color: #ffffff;\n    border-bottom: 1px solid #e0e0e0;\n  }\n  \n  .tab-header button {\n    flex-grow: 1;\n    padding: 16px;\n    font-size: 14px;\n    text-align: center;\n    border: none;\n    background: none;\n    cursor: pointer;\n    outline: none;\n    transition: all 0.3s ease;\n  }\n  \n  .tab-header button.active {\n    border-bottom: 2px solid 'var(--secondary-color)';\n    font-weight: 600;\n  }\n  \n  .tab-content {\n    display: flex;\n    flex-direction: column;\n    padding: 16px;\n    background-color: #ffffff;\n  }\n  \n  .tab-header button {\n    cursor: pointer;\n    border: none;\n    padding: 16px;\n    background-color: transparent;\n    color: #757575;\n  }\n  \n  .tab-header button.active {\n    border-bottom: 2px solid #344861;\n    color: #344861;\n    font-weight: 600;\n  }\n  ","import { Component, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'udp-tabs',\n  styleUrl: 'udp-tabs.css',\n})\nexport class UdpTabs {\n  @State() activeTab: number = 0;\n\n  tabClicked(tabIndex: number) {\n    this.activeTab = tabIndex;\n  }\n\n  render() {\n    return (\n      <div>\n        <div class=\"tab-header\">\n          <slot name=\"tab-title\">\n            {/* Titles go here */}\n          </slot>\n        </div>\n        <div>\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"udp-tabs2.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/tabs/tab/tabs/udp-tabs.css?tag=udp-tabs&encapsulation=shadow","src/components/my-component/UI/tabs/tab/tabs/udp-tabs.tsx"],"sourcesContent":[".tab-container {\n  display: flex;\n  flex-direction: column;\n}\n\n.tab-header {\n  background-color: #ffffff;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.tab-scroll-container {\n  display: flex;\n  position: relative;\n  overflow-x: auto;\n  overflow-y: hidden;\n  flex: 1;\n  min-width: 0;\n}\n\n.tab-scroll-container::-webkit-scrollbar {\n  height: 4px;\n}\n.tab-scroll-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.tab-scroll-container::-webkit-scrollbar-thumb {\n  background-color: rgba(0, 0, 0, 0.2);\n  border-radius: 4px;\n}\n.tab-scroll-container::-webkit-scrollbar-thumb:hover {\n  background-color: rgba(0, 0, 0, 0.3);\n}\n\n.tab-header::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 1px;\n  background-color: var(--divider-color, #e0e0e0);\n}\n\n/* This is the base style for tab buttons */\n.tab-header button {\n  padding: 16px;\n  font-size: 14px;\n  text-align: center;\n  border: none;\n  background: none;\n  cursor: pointer;\n  outline: none;\n  transition: all 0.22s ease;\n  color: #555555;;\n  font-weight: 600;\n  opacity: 0.9;\n  white-space: nowrap;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.tab-header.fill .tab-scroll-container {\n  width: 100%;\n}\n.tab-header.fill .tab-scroll-container button {\n  flex-grow: 1;\n}\n\n.tab-header button.active {\n  color: var(--secondary-color, #344861);\n  opacity: 1.0;\n}\n\n.tab-header button.scroll-arrow {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 40px;\n  padding: 0;\n\n  background: #ffffff;\n  cursor: pointer;\n  font-size: 16px;\n  font-weight: bold;\n  color: #757575;\n  z-index: 2;\n  transition: color 0.2s ease;\n\n  flex-shrink: 0;\n  opacity: 1;\n  gap: 0;\n}\n\n.tab-header button.scroll-arrow:hover {\n  color: #000;\n}\n\n.tab-header button.scroll-arrow.left {\n  left: 0;\n}\n\n.tab-header button.scroll-arrow.right {\n  right: 0;\n\n}\n\n.scroll-fade {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 30px;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.scroll-fade.left {\n  left: 40px;\n  background: linear-gradient(\n    to right,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.scroll-fade.right {\n  right: 40px;\n  background: linear-gradient(\n    to left,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.tab-header button udp-icon {\n  font-size: 1.2em;\n  line-height: 1;\n}\n\n.tab-header button.icon-start {\n  flex-direction: row;\n}\n.tab-header button.icon-end {\n  flex-direction: row-reverse;\n}\n.tab-header button.icon-top {\n  flex-direction: column;\n  gap: 4px;\n}\n.tab-header button.icon-bottom {\n  flex-direction: column-reverse;\n  gap: 4px;\n}\n\n.tab-content {\n  padding: 16px;\n  background-color: #ffffff;\n}\n\n.slider {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  background-color: var(--secondary-color, #344861);\n\n  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),\n    width 0.22s cubic-bezier(0.4, 0, 0.2, 1);\n  z-index: 1;\n}\n\n.tab-header button.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.tab-header button.disabled.active {\n  color: #757575;\n  opacity: 0.5;\n}\n","import { Component, h, State, Element, Watch, Listen, Prop } from '@stencil/core';\n\ninterface TabDetail {\n  title: string;\n  icon?: string;\n  iconPlacement?: 'start' | 'end' | 'top' | 'bottom';\n  hidden?: boolean;\n  disabled?: boolean;\n}\n\n@Component({\n  tag: 'udp-tabs',\n  styleUrl: 'udp-tabs.css',\n  shadow: true,\n})\nexport class UdpTabs {\n  @Element() el: HTMLElement;\n\n  /**\n   * Specifies the layout variant of the tab header.\n   *\n   * - `'standard'`: Tabs will be sized based on their content.\n   * - `'fill'`: Tabs will stretch to fill the available horizontal space.\n   */\n  @Prop() variant: 'fill' | 'standard' = 'fill';\n\n  @State() activeTab: number = 0;\n  @State() tabDetails: TabDetail[] = []; // Uses new interface\n  @State() sliderStyle: { width: string; transform: string } = {\n    width: '0',\n    transform: 'translateX(0)',\n  };\n  @State() showScrollLeft: boolean = false;\n  @State() showScrollRight: boolean = false;\n\n  private tabs: HTMLUdpTabElement[] = [];\n  private buttonRefs: HTMLButtonElement[] = [];\n  private scrollContainerRef?: HTMLDivElement;\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.initializeTabs();\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    requestAnimationFrame(() => {\n      this.updateSliderPosition();\n      this.checkScroll();\n    });\n  }\n\n  componentDidLoad() {\n    this.initializeTabs();\n  }\n\n  @Watch('activeTab')\n  onActiveTabChange() {\n    this.updateActiveTabs();\n    this.updateSliderPosition();\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    requestAnimationFrame(() => {\n      this.updateSliderPosition();\n      this.checkScroll();\n    });\n  }\n\n  private initializeTabs() {\n    this.buttonRefs = [];\n    // Get ALL tabs from the slot\n    this.tabs = Array.from(this.el.children).filter(\n      (child): child is HTMLUdpTabElement => child.tagName.toLowerCase() === 'udp-tab',\n    );\n\n    this.tabDetails = this.tabs.map(tab => ({\n      title: tab.title,\n      icon: tab.icon,\n      iconPlacement: tab.iconPlacement,\n      hidden: tab.hidden,\n      disabled: tab.disabled,\n    }));\n\n    // Check if the current activeTab (default 0) is invalid\n    if (this.tabDetails[this.activeTab]?.hidden || this.tabDetails[this.activeTab]?.disabled) {\n      // If it is, find the first valid tab to select\n      const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);\n      // If we found one, set it. If not (all tabs invalid), set to -1\n      this.activeTab = firstValidIndex;\n    }\n\n    this.updateActiveTabs();\n\n    requestAnimationFrame(() => {\n      this.updateSliderPosition();\n      this.checkScroll();\n    });\n  }\n\n  private updateActiveTabs() {\n    this.tabs.forEach((tab, index) => {\n      tab.active = index === this.activeTab;\n    });\n  }\n\n  private updateSliderPosition() {\n    const activeButton = this.buttonRefs[this.activeTab];\n    if (!activeButton) {\n      this.sliderStyle = { width: '0px', transform: 'translateX(0px)' };\n      return;\n    }\n\n    this.sliderStyle = {\n      width: `${activeButton.offsetWidth}px`,\n      transform: `translateX(${activeButton.offsetLeft}px)`,\n    };\n  }\n\n  private checkScroll() {\n    if (!this.scrollContainerRef) return;\n    const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainerRef;\n    const isOverflowing = scrollWidth > clientWidth;\n    this.showScrollLeft = isOverflowing && scrollLeft > 1;\n    this.showScrollRight = isOverflowing && scrollLeft < scrollWidth - clientWidth - 1;\n  }\n\n  private tabClicked(tabIndex: number) {\n    if (this.tabDetails[tabIndex]?.disabled) {\n      return;\n    }\n\n    this.activeTab = tabIndex;\n\n    const tabButton = this.buttonRefs[tabIndex];\n    const container = this.scrollContainerRef;\n\n    if (!tabButton || !container) return;\n\n    const { scrollLeft, clientWidth } = container;\n    const tabLeft = tabButton.offsetLeft;\n    const tabRight = tabLeft + tabButton.offsetWidth;\n\n    const safeZonePadding = 70;\n\n    const safeZoneLeft = scrollLeft + safeZonePadding;\n    const safeZoneRight = scrollLeft + clientWidth - safeZonePadding;\n\n    // Check if the tab's left edge is hidden by the left fade\n    if (tabLeft < safeZoneLeft) {\n      // Scroll to position the tab's left edge at the start of the safe zone\n      container.scrollTo({\n        left: tabLeft - safeZonePadding,\n        behavior: 'smooth'\n      });\n    }\n    // Check if the tab's right edge is hidden by the right fade\n    else if (tabRight > safeZoneRight) {\n      // Scroll to position the tab's right edge at the end of the safe zone\n      container.scrollTo({\n        left: tabRight - clientWidth + safeZonePadding,\n        behavior: 'smooth'\n      });\n    }\n  }\n\n  private scrollToStart() {\n    if (!this.scrollContainerRef) return;\n    this.scrollContainerRef.scrollTo({ left: 0, behavior: 'smooth' });\n  }\n\n  private scrollToEnd() {\n    if (!this.scrollContainerRef) return;\n    const container = this.scrollContainerRef;\n    const { scrollWidth, clientWidth } = container;\n    const maxScrollLeft = scrollWidth - clientWidth;\n    container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });\n  }\n\n  render() {\n    return (\n      <div class=\"tab-container\">\n        <div class={`tab-header ${this.variant}`}>\n          {this.showScrollLeft && (\n            <button\n              class=\"scroll-arrow left\"\n              onClick={() => this.scrollToStart()}\n              aria-label=\"Scroll to first tab\"\n            >\n               <udp-icon iconName=\"chevronLeft16\" color=\"inherit\" />\n            </button>\n          )}\n\n          {this.showScrollLeft && <div class=\"scroll-fade left\"></div>}\n\n          <div\n            class=\"tab-scroll-container\"\n            ref={el => (this.scrollContainerRef = el)}\n            onScroll={() => this.checkScroll()}\n          >\n            {this.tabDetails.map((tab, index) => {\n              if (tab.hidden) {\n                return null;\n              }\n\n              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n              const iconEl = tab.icon ? <udp-icon iconName={tab.icon} color={'inherit'} /> : null;\n              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n              const titleEl = <span>{tab.title}</span>;\n\n              return (\n                <button\n                  class={{\n                    'active': index === this.activeTab,\n                    'has-icon': !!tab.icon,\n                    [`icon-${tab.iconPlacement}`]: !!tab.icon,\n                    'disabled': tab.disabled,\n                  }}\n                  disabled={tab.disabled}\n                  onClick={() => this.tabClicked(index)}\n                  role=\"tab\"\n                  aria-selected={index === this.activeTab ? 'true' : 'false'}\n                  aria-disabled={tab.disabled ? 'true' : 'false'}\n                  ref={el => (this.buttonRefs[index] = el)}\n                >\n                  {iconEl}\n                  {titleEl}\n                </button>\n              );\n            })}\n\n            <div class=\"slider\" style={this.sliderStyle}></div>\n          </div>\n\n          {this.showScrollRight && <div class=\"scroll-fade right\"></div>}\n\n          {this.showScrollRight && (\n            <button\n              class=\"scroll-arrow right\"\n              onClick={() => this.scrollToEnd()}\n              aria-label=\"Scroll to last tab\"\n            >\n              <udp-icon iconName=\"chevronRight16\" color=\"inherit\" />\n            </button>\n          )}\n        </div>\n        <div class=\"tab-content\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-11-04T19:50:11",
+  "timestamp": "2025-11-06T23:59:52",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.2",
@@ -14421,6 +14421,9 @@
           "stencil-icon-button",
           "udp-button"
         ],
+        "udp-tabs": [
+          "udp-icon"
+        ],
         "ambient-template-grid": [
           "udp-menu-item",
           "udp-pop-over",
@@ -15964,6 +15967,9 @@
           "stencil-icon-button",
           "udp-button"
         ],
+        "udp-tabs": [
+          "udp-icon"
+        ],
         "stencil-icon-button": [
           "udp-ambient-tool-tip",
           "udp-badge"
@@ -29458,13 +29464,7 @@
           "attr": "adornment-status",
           "reflectToAttr": false,
           "docs": "The adornmentStatus of the card.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "'success'"
-            }
-          ],
-          "default": "'success'",
+          "docsTags": [],
           "values": [
             {
               "value": "error",
@@ -29767,10 +29767,10 @@
           "docsTags": [
             {
               "name": "default",
-              "text": "'elevated'"
+              "text": "'outlined'"
             }
           ],
-          "default": "'elevated'",
+          "default": "'outlined'",
           "values": [
             {
               "value": "elevated",
@@ -34757,6 +34757,9 @@
           "stencil-icon-button",
           "udp-button"
         ],
+        "udp-tabs": [
+          "udp-icon"
+        ],
         "stencil-icon-button": [
           "udp-ambient-tool-tip",
           "udp-badge"
@@ -35590,6 +35593,9 @@
           "stencil-icon-button",
           "udp-button"
         ],
+        "udp-tabs": [
+          "udp-icon"
+        ],
         "udp-forms-list-card": [
           "unity-typography",
           "stencil-icon-button",
@@ -37613,7 +37619,8 @@
         "udp-forms-builder-menu",
         "udp-menu-item",
         "udp-question-comment",
-        "udp-side-sheet"
+        "udp-side-sheet",
+        "udp-tabs"
       ],
       "dependencies": [],
       "dependencyGraph": {
@@ -37661,6 +37668,9 @@
         ],
         "udp-side-sheet": [
           "udp-icon"
+        ],
+        "udp-tabs": [
+          "udp-icon"
         ]
       }
     },
@@ -46444,9 +46454,15 @@
           },
           "mutable": false,
           "attr": "active",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
+          "reflectToAttr": true,
+          "docs": "True if this is the active tab.\nThis is set by the parent <udp-tabs> component.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -46457,6 +46473,129 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": false,
+          "docs": "If true, the tab will be unselectable.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "hidden",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "hidden",
+          "reflectToAttr": false,
+          "docs": "If true, the tab will be hidden from the tab list.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "icon",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "icon",
+          "reflectToAttr": false,
+          "docs": "Optional icon to display in the tab.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "iconPlacement",
+          "type": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+          "complexType": {
+            "original": "'start' | 'end' | 'top' | 'bottom'",
+            "resolved": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "icon-placement",
+          "reflectToAttr": false,
+          "docs": "Placement of the icon relative to the title.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'start'"
+            }
+          ],
+          "default": "'start'",
+          "values": [
+            {
+              "value": "bottom",
+              "type": "string"
+            },
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            },
+            {
+              "value": "top",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "title",
           "type": "string",
@@ -46468,7 +46607,7 @@
           "mutable": false,
           "attr": "title",
           "reflectToAttr": false,
-          "docs": "",
+          "docs": "The title of the tab, displayed in the tab-header.",
           "docsTags": [],
           "values": [
             {
@@ -46499,16 +46638,63 @@
     },
     {
       "filePath": "src/components/my-component/UI/tabs/tab/tabs/udp-tabs.tsx",
-      "encapsulation": "none",
+      "encapsulation": "shadow",
       "tag": "udp-tabs",
       "readme": "# udp-tabs\n\n\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
-      "props": [],
+      "props": [
+        {
+          "name": "variant",
+          "type": "\"fill\" | \"standard\"",
+          "complexType": {
+            "original": "'fill' | 'standard'",
+            "resolved": "\"fill\" | \"standard\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "variant",
+          "reflectToAttr": false,
+          "docs": "Specifies the layout variant of the tab header.\n\n- `'standard'`: Tabs will be sized based on their content.\n- `'fill'`: Tabs will stretch to fill the available horizontal space.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'fill'"
+            }
+          ],
+          "default": "'fill'",
+          "values": [
+            {
+              "value": "fill",
+              "type": "string"
+            },
+            {
+              "value": "standard",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
       "methods": [],
       "events": [],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "slotchange",
+          "capture": false,
+          "passive": false
+        },
+        {
+          "event": "resize",
+          "target": "window",
+          "capture": false,
+          "passive": true
+        }
+      ],
       "styles": [],
       "slots": [],
       "parts": [],
@@ -46516,8 +46702,13 @@
         "my-component",
         "primary-action-header"
       ],
-      "dependencies": [],
+      "dependencies": [
+        "udp-icon"
+      ],
       "dependencyGraph": {
+        "udp-tabs": [
+          "udp-icon"
+        ],
         "my-component": [
           "udp-tabs"
         ],

package/dist/esm/add-map-feature-popup_4.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-DsqSxziV.js';
+import { r as registerInstance, h, a as getElement } from './index-n-1ZSeAs.js';
 import { Close16, Checkmark16, Filter16, Layers16, Select_0116, Scalpel16, Renew16, OverflowMenuHorizontal16 } from '@carbon/icons/es';
 import { f as searchForLayerOptions } from './udp-map-utils-BokzHQF1.js';
 import { S as SelectFeatureInteractionId } from './common-CwN0FuAf.js';