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

package/dist/collection/components/my-component/UI/tabs/tab/tabs/udp-tabs.js

@@ -1,15 +1,227 @@
 import { h } from "@stencil/core";
 export class UdpTabs {
     constructor() {
-        this.activeTab = 0;
+        /**
+         * 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';
+        /**
+         * (Optional) An array of tab configuration objects.
+         * If provided, this will be used to render tabs instead of slotted `<udp-tab>` components.
+         * This mode is typically used with controlled tabs.
+         */
+        this.tabs = [];
+        this.internalActiveTab = 0; // For uncontrolled mode
+        this.tabDetails = []; // Unified details from prop or slot
+        this.sliderStyle = {
+            width: '0',
+            transform: 'translateX(0)',
+        };
+        this.showScrollLeft = false;
+        this.showScrollRight = false;
+        this.slottedTabs = []; // Renamed from `tabs`
+        this.buttonRefs = [];
+    }
+    /**
+     * Returns true if the component is in controlled mode.
+     */
+    get isControlled() {
+        return this.value != null;
+    }
+    /**
+     * Returns true if tabs are being provided by the `tabs` prop.
+     */
+    get useTabsProp() {
+        return this.tabs && this.tabs.length > 0;
+    }
+    /**
+     * Returns the currently active tab index,
+     * respecting controlled or uncontrolled mode.
+     */
+    get activeTab() {
+        return this.isControlled ? this.value : this.internalActiveTab;
+    }
+    handleSlotChange() {
+        // If we're using the tabs prop, slot changes are irrelevant
+        if (this.useTabsProp)
+            return;
+        this.initializeTabs();
+    }
+    handleResize() {
+        requestAnimationFrame(() => {
+            this.updateSliderPosition();
+            this.checkScroll();
+        });
+    }
+    componentDidLoad() {
+        this.initializeTabs();
+    }
+    /**
+     * Watcher for uncontrolled state changes.
+     */
+    onActiveTabChange(newValue) {
+        this.updateActiveTabs();
+        this.updateSliderPosition();
+        this.scrollTabIntoView(newValue);
+    }
+    /**
+     * Watcher for controlled state changes.
+     */
+    onValueChange(newValue) {
+        this.updateActiveTabs();
+        this.updateSliderPosition();
+        this.scrollTabIntoView(newValue);
+    }
+    /**
+     * Watcher for tabs prop changes.
+     */
+    onTabsPropChange() {
+        this.initializeTabs();
+    }
+    onVariantChange() {
+        requestAnimationFrame(() => {
+            this.updateSliderPosition();
+            this.checkScroll();
+        });
+    }
+    initializeTabs() {
+        var _a, _b;
+        this.buttonRefs = [];
+        if (this.useTabsProp) {
+            // --- Prop-based ---
+            this.tabDetails = this.tabs.map(t => (Object.assign({}, t))); // Use data from prop
+            this.slottedTabs = []; // Ensure we're not tracking slotted tabs
+        }
+        else {
+            // --- Slot-based ---
+            this.slottedTabs = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'udp-tab');
+            this.tabDetails = this.slottedTabs.map(tab => ({
+                label: tab.label,
+                icon: tab.icon,
+                iconPlacement: tab.iconPlacement,
+                hidden: tab.hidden,
+                disabled: tab.disabled,
+            }));
+        }
+        // --- Common Logic ---
+        // In uncontrolled mode, check if the default active tab is invalid.
+        if (!this.isControlled) {
+            if (((_a = this.tabDetails[this.internalActiveTab]) === null || _a === void 0 ? void 0 : _a.hidden) || ((_b = this.tabDetails[this.internalActiveTab]) === null || _b === void 0 ? void 0 : _b.disabled)) {
+                const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);
+                this.internalActiveTab = firstValidIndex > -1 ? firstValidIndex : 0;
+            }
+        }
+        this.updateActiveTabs();
+        requestAnimationFrame(() => {
+            this.updateSliderPosition();
+            this.checkScroll();
+        });
+    }
+    updateActiveTabs() {
+        // Only update slotted tabs if we're in slot mode
+        if (!this.useTabsProp) {
+            const currentActiveTab = this.activeTab;
+            this.slottedTabs.forEach((tab, index) => {
+                tab.active = index === currentActiveTab;
+            });
+        }
+        // If in prop mode, the <button> 'active' class is handled by render()
+    }
+    updateSliderPosition() {
+        const activeButton = this.buttonRefs[this.activeTab]; // Use getter
+        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) {
-        this.activeTab = tabIndex;
+        var _a;
+        if ((_a = this.tabDetails[tabIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+            return;
+        }
+        if (this.isControlled) {
+            // In controlled mode, emit the event for the parent to handle.
+            // The `onValueChange` watcher will handle UI updates when the prop changes.
+            this.udpTabChange.emit(tabIndex);
+        }
+        else {
+            // In uncontrolled mode, update state directly.
+            // The `onActiveTabChange` watcher will handle UI updates.
+            this.internalActiveTab = tabIndex;
+        }
+    }
+    scrollTabIntoView(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;
+        if (tabLeft < safeZoneLeft) {
+            container.scrollTo({
+                left: tabLeft - safeZonePadding,
+                behavior: 'smooth',
+            });
+        }
+        else if (tabRight > safeZoneRight) {
+            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' }))));
+        const currentActiveTab = this.activeTab; // Use getter
+        return (h("div", { key: 'dd8ac7e3d101993b8df00c97bf561e2502e9f3c1', class: "tab-container" }, h("div", { key: '5f70a5c0da906152b130f6eaa98b81bf80485920', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: 'e1a3a7d3650ae3703734a51b251600bf12dbed0c', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: '36e6294b1a775a30906cc0236f8104ad03998c01', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: '8dca0bd111f13c1890fbc010efbabb2aa0440c13', class: "scroll-fade left" }), h("div", { key: '966f761c7f3cc45eb5b6737e8dbb63dc75a68325', 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 labelEl = h("span", null, tab.label);
+            return (h("button", { class: {
+                    'active': index === currentActiveTab,
+                    'has-icon': !!tab.icon,
+                    [`icon-${tab.iconPlacement}`]: !!tab.icon,
+                    'disabled': tab.disabled,
+                }, disabled: tab.disabled, onClick: () => this.tabClicked(index), role: "tab", "aria-selected": index === currentActiveTab ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', ref: el => (this.buttonRefs[index] = el) }, iconEl, labelEl));
+        }), h("div", { key: 'df383b17c3e36fc7f261ff6a6c1220a4f923477f', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: '7f8ae28f6662266a113adbb7ca40a4ef7d0b8427', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: '0ad034fb7dc24388476e0c37bc9cf4196f4145bc', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: '4cdbf5880b2e30dc6541228323a31e2dd34eabae', iconName: "chevronRight16", color: "inherit" })))), !this.isControlled && !this.useTabsProp && (h("div", { key: '2097c674562eb5acfdadda5a05e6f2eed8821f99' }, h("slot", { key: '375c96eb85f6581426f72bf1c544538df4c6fdd6' })))));
     }
     static get is() { return "udp-tabs"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["udp-tabs.css"]
@@ -20,10 +232,129 @@ export class UdpTabs {
             "$": ["udp-tabs.css"]
         };
     }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fill' | 'standard'",
+                    "resolved": "\"fill\" | \"standard\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'fill'"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "(Controlled) The index of the currently active tab.\nIf this prop is provided, the component will be in \"controlled\" mode.\nThe parent must listen for `udpTabChange` to update this value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "tabs": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabDetail[]",
+                    "resolved": "TabDetail[]",
+                    "references": {
+                        "TabDetail": {
+                            "location": "global",
+                            "id": "global::TabDetail"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "(Optional) An array of tab configuration objects.\nIf provided, this will be used to render tabs instead of slotted `<udp-tab>` components.\nThis mode is typically used with controlled tabs."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
     static get states() {
         return {
-            "activeTab": {}
+            "internalActiveTab": {},
+            "tabDetails": {},
+            "sliderStyle": {},
+            "showScrollLeft": {},
+            "showScrollRight": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "udpTabChange",
+                "name": "udpTabChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "(Controlled) Emits the index of the tab that was clicked.\nThis is only emitted in \"controlled\" mode (when `value` is provided)."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "internalActiveTab",
+                "methodName": "onActiveTabChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "tabs",
+                "methodName": "onTabsPropChange"
+            }, {
+                "propName": "variant",
+                "methodName": "onVariantChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "slotchange",
+                "method": "handleSlotChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }
 //# sourceMappingURL=udp-tabs.js.map

package/dist/collection/components/my-component/UI/tabs/tab/tabs/udp-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"udp-tabs.js","sourceRoot":"","sources":["../../../../../../../src/components/my-component/UI/tabs/tab/tabs/udp-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAMpD,MAAM,OAAO,OAAO;IAJpB;QAKW,cAAS,GAAW,CAAC,CAAC;KAoBhC;IAlBC,UAAU,CAAC,QAAgB;QACzB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;IAC5B,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE,4DAAK,KAAK,EAAC,YAAY;gBACrB,6DAAM,IAAI,EAAC,WAAW,GAEf,CACH;YACN;gBACE,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;CACF","sourcesContent":["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-tabs.js","sourceRoot":"","sources":["../../../../../../../src/components/my-component/UI/tabs/tab/tabs/udp-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, State, Element, Watch, Listen, Prop, Event, EventEmitter } from '@stencil/core';\n\ninterface TabDetail {\n  label: 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  /**\n   * (Controlled) The index of the currently active tab.\n   * If this prop is provided, the component will be in \"controlled\" mode.\n   * The parent must listen for `udpTabChange` to update this value.\n   */\n  @Prop() value?: number;\n\n  /**\n   * (Optional) An array of tab configuration objects.\n   * If provided, this will be used to render tabs instead of slotted `<udp-tab>` components.\n   * This mode is typically used with controlled tabs.\n   */\n  @Prop() tabs: TabDetail[] = [];\n\n  /**\n   * (Controlled) Emits the index of the tab that was clicked.\n   * This is only emitted in \"controlled\" mode (when `value` is provided).\n   */\n  @Event() udpTabChange: EventEmitter<number>;\n\n  @State() internalActiveTab: number = 0; // For uncontrolled mode\n  @State() tabDetails: TabDetail[] = []; // Unified details from prop or slot\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 slottedTabs: HTMLUdpTabElement[] = []; // Renamed from `tabs`\n  private buttonRefs: HTMLButtonElement[] = [];\n  private scrollContainerRef?: HTMLDivElement;\n\n  /**\n   * Returns true if the component is in controlled mode.\n   */\n  private get isControlled(): boolean {\n    return this.value != null;\n  }\n\n  /**\n   * Returns true if tabs are being provided by the `tabs` prop.\n   */\n  private get useTabsProp(): boolean {\n    return this.tabs && this.tabs.length > 0;\n  }\n\n  /**\n   * Returns the currently active tab index,\n   * respecting controlled or uncontrolled mode.\n   */\n  private get activeTab(): number {\n    return this.isControlled ? this.value : this.internalActiveTab;\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    // If we're using the tabs prop, slot changes are irrelevant\n    if (this.useTabsProp) return;\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  /**\n   * Watcher for uncontrolled state changes.\n   */\n  @Watch('internalActiveTab')\n  onActiveTabChange(newValue: number) {\n    this.updateActiveTabs();\n    this.updateSliderPosition();\n    this.scrollTabIntoView(newValue);\n  }\n\n  /**\n   * Watcher for controlled state changes.\n   */\n  @Watch('value')\n  onValueChange(newValue: number) {\n    this.updateActiveTabs();\n    this.updateSliderPosition();\n    this.scrollTabIntoView(newValue);\n  }\n\n  /**\n   * Watcher for tabs prop changes.\n   */\n  @Watch('tabs')\n  onTabsPropChange() {\n    this.initializeTabs();\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\n    if (this.useTabsProp) {\n      // --- Prop-based ---\n      this.tabDetails = this.tabs.map(t => ({ ...t })); // Use data from prop\n      this.slottedTabs = []; // Ensure we're not tracking slotted tabs\n    } else {\n      // --- Slot-based ---\n      this.slottedTabs = Array.from(this.el.children).filter(\n        (child): child is HTMLUdpTabElement => child.tagName.toLowerCase() === 'udp-tab',\n      );\n\n      this.tabDetails = this.slottedTabs.map(tab => ({\n        label: tab.label,\n        icon: tab.icon,\n        iconPlacement: tab.iconPlacement,\n        hidden: tab.hidden,\n        disabled: tab.disabled,\n      }));\n    }\n\n    // --- Common Logic ---\n    // In uncontrolled mode, check if the default active tab is invalid.\n    if (!this.isControlled) {\n      if (this.tabDetails[this.internalActiveTab]?.hidden || this.tabDetails[this.internalActiveTab]?.disabled) {\n        const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);\n        this.internalActiveTab = firstValidIndex > -1 ? firstValidIndex : 0;\n      }\n    }\n\n    this.updateActiveTabs();\n\n    requestAnimationFrame(() => {\n      this.updateSliderPosition();\n      this.checkScroll();\n    });\n  }\n\n  private updateActiveTabs() {\n    // Only update slotted tabs if we're in slot mode\n    if (!this.useTabsProp) {\n      const currentActiveTab = this.activeTab;\n      this.slottedTabs.forEach((tab, index) => {\n        tab.active = index === currentActiveTab;\n      });\n    }\n    // If in prop mode, the <button> 'active' class is handled by render()\n  }\n\n  private updateSliderPosition() {\n    const activeButton = this.buttonRefs[this.activeTab]; // Use getter\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    if (this.isControlled) {\n      // In controlled mode, emit the event for the parent to handle.\n      // The `onValueChange` watcher will handle UI updates when the prop changes.\n      this.udpTabChange.emit(tabIndex);\n    } else {\n      // In uncontrolled mode, update state directly.\n      // The `onActiveTabChange` watcher will handle UI updates.\n      this.internalActiveTab = tabIndex;\n    }\n  }\n\n  private scrollTabIntoView(tabIndex: number) {\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    const safeZoneLeft = scrollLeft + safeZonePadding;\n    const safeZoneRight = scrollLeft + clientWidth - safeZonePadding;\n\n    if (tabLeft < safeZoneLeft) {\n      container.scrollTo({\n        left: tabLeft - safeZonePadding,\n        behavior: 'smooth',\n      });\n    } else if (tabRight > safeZoneRight) {\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    const currentActiveTab = this.activeTab; // Use getter\n\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 labelEl = <span>{tab.label}</span>;\n\n              return (\n                <button\n                  class={{\n                    'active': index === currentActiveTab,\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 === currentActiveTab ? 'true' : 'false'}\n                  aria-disabled={tab.disabled ? 'true' : 'false'}\n                  ref={el => (this.buttonRefs[index] = el)}\n                >\n                  {iconEl}\n                  {labelEl}\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\n        {!this.isControlled && !this.useTabsProp && (\n          <div>\n            <slot></slot>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/tabs/tab/udp-tab.css

@@ -1,11 +1,9 @@
 .tab-panel {
     display: none;
-    background-color: #ffffff;
   }
-  
+
   .tab-panel.active {
     display: block;
   }
-  
 
-  
+

package/dist/collection/components/my-component/UI/tabs/tab/udp-tab.js

@@ -1,10 +1,29 @@
 import { h } from "@stencil/core";
 export class UdpTab {
-    activeChanged() {
-        // Handle the active state change, if needed
+    constructor() {
+        /**
+         * 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 is() { return "udp-tab"; }
     static get originalStyleUrls() {
@@ -19,7 +38,7 @@ export class UdpTab {
     }
     static get properties() {
         return {
-            "title": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -31,12 +50,12 @@ export class UdpTab {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The title of the tab, displayed in the tab-header."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "title"
+                "attribute": "label"
             },
             "active": {
                 "type": "boolean",
@@ -50,20 +69,103 @@ export class UdpTab {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "True if this is the active tab.\nThis is set by the parent <udp-tabs> component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon to display in the tab."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "active"
+                "attribute": "icon"
+            },
+            "iconPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end' | 'top' | 'bottom'",
+                    "resolved": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'start'"
+                        }],
+                    "text": "Placement of the icon relative to the title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-placement",
+                "defaultValue": "'start'"
+            },
+            "hidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "If true, the tab will be hidden from the tab list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hidden",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "If true, the tab will be unselectable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
             }
         };
     }
-    static get watchers() {
-        return [{
-                "propName": "active",
-                "methodName": "activeChanged"
-            }];
-    }
 }
 //# sourceMappingURL=udp-tab.js.map

package/dist/collection/components/my-component/UI/tabs/tab/udp-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"udp-tab.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/tabs/tab/udp-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAM1D,MAAM,OAAO,MAAM;IAKjB,aAAa;QACX,4CAA4C;IAC9C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE;YACtD,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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-tab.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/tabs/tab/udp-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMnD,MAAM,OAAO,MAAM;IAJnB;QAUE;;;WAGG;QACsB,WAAM,GAAY,KAAK,CAAC;QAOjD;;;WAGG;QACK,kBAAa,GAAwC,OAAO,CAAC;QACrE;;;WAGG;QACK,WAAM,GAAa,KAAK,CAAC;QAEjC;;;WAGG;QACK,aAAQ,GAAa,KAAK,CAAC;KASpC;IAPC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,UAAU;YACvE,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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() label: 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"]}

package/dist/collection/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.css

@@ -0,0 +1,11 @@
+:host {
+  display: block;
+}
+
+.tab-panel {
+  display: none;
+}
+
+.tab-panel.active {
+  display: block;
+}