npm - udp-stencil-component-library - Versions diffs - 25.18.1-beta.6 → 25.18.1-beta.7 - Mend

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

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 (72) hide show

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

@@ -8,18 +8,46 @@ export class UdpTabs {
          * - `'fill'`: Tabs will stretch to fill the available horizontal space.
          */
         this.variant = 'fill';
-        this.activeTab = 0;
-        this.tabDetails = []; // Uses new interface
+        /**
+         * (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.tabs = [];
+        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() {
@@ -31,9 +59,27 @@ export class UdpTabs {
     componentDidLoad() {
         this.initializeTabs();
     }
-    onActiveTabChange() {
+    /**
+     * 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(() => {
@@ -44,21 +90,29 @@ export class UdpTabs {
     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;
+        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(() => {
@@ -67,12 +121,17 @@ export class UdpTabs {
         });
     }
     updateActiveTabs() {
-        this.tabs.forEach((tab, index) => {
-            tab.active = index === this.activeTab;
-        });
+        // 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];
+        const activeButton = this.buttonRefs[this.activeTab]; // Use getter
         if (!activeButton) {
             this.sliderStyle = { width: '0px', transform: 'translateX(0px)' };
             return;
@@ -95,7 +154,18 @@ export class UdpTabs {
         if ((_a = this.tabDetails[tabIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
             return;
         }
-        this.activeTab = tabIndex;
+        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)
@@ -106,20 +176,16 @@ export class UdpTabs {
         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'
+                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'
+                behavior: 'smooth',
             });
         }
     }
@@ -137,21 +203,22 @@ export class UdpTabs {
         container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });
     }
     render() {
-        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) => {
+        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 titleEl = h("span", null, tab.title);
+            const labelEl = h("span", null, tab.label);
             return (h("button", { class: {
-                    'active': index === this.activeTab,
+                    '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 === 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' }))));
+                }, 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"; }
@@ -186,23 +253,89 @@ export class UdpTabs {
                 "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": "activeTab",
+                "propName": "internalActiveTab",
                 "methodName": "onActiveTabChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "tabs",
+                "methodName": "onTabsPropChange"
             }, {
                 "propName": "variant",
                 "methodName": "onVariantChange"

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

	@@ -1 +1 @@
1	- {"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 } 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"]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -38,7 +38,7 @@ export class UdpTab {
     }
     static get properties() {
         return {
-            "title": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -55,7 +55,7 @@ export class UdpTab {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "title"
+                "attribute": "label"
             },
             "active": {
                 "type": "boolean",

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

	@@ -1 +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,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() ~~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"]}
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,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 ADDED Viewed

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

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

@@ -0,0 +1,65 @@
+import { h } from "@stencil/core";
+export class UdpTabPanel {
+    render() {
+        const isActive = this.value === this.index;
+        return (h("div", { key: '735bca81299145233b3e2e017eef05a840b0fb69', class: {
+                'tab-panel': true,
+                'active': isActive,
+            }, role: "tabpanel", "aria-hidden": !isActive ? 'true' : 'false' }, h("slot", { key: '68ad651e93008ca12c4d976ca71747a4f4cf4b39' })));
+    }
+    static get is() { return "udp-tab-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-tab-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-tab-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The active tab index, provided by the parent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The index this panel corresponds to."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index"
+            }
+        };
+    }
+}
+//# sourceMappingURL=udp-tab-panel.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"udp-tab-panel.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,WAAW;IAWtB,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QAE3C,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,QAAQ,EAAE,QAAQ;aACnB,EACD,IAAI,EAAC,UAAU,iBAEF,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAEzC,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'udp-tab-panel',\n styleUrl: 'udp-tab-panel.css',\n shadow: true,\n})\nexport class UdpTabPanel {\n /**\n * The active tab index, provided by the parent.\n */\n @Prop() value: number;\n\n /**\n * The index this panel corresponds to.\n */\n @Prop() index: number;\n\n render() {\n const isActive = this.value === this.index;\n\n return (\n <div\n class={{\n 'tab-panel': true,\n 'active': isActive,\n }}\n role=\"tabpanel\"\n // Use aria-hidden for accessibility and :host styling\n aria-hidden={!isActive ? 'true' : 'false'}\n >\n <slot></slot>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/my-component/UI/toolbars/app-bar/app-bar.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import Menu24 from "@carbon/icons/es/menu/24";
 export class AppBar {
     render() {
-        return (h("div", { key: '90d237af2bda122e231ed0d4934f41a2c7b21992', class: "header" }, h("stencil-icon-button", { key: 'a35a9b3355284d972f5fd564c0b133ed32114b63', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: 'bd93a6c415dcab2421175e13c9e7a0807f78b85e', variant: 'data-display-one' }, " ", h("slot", { key: '6c4b317a6fd338dfdda3a77991ed78fd1702b995' }), "   "), h("a", { key: 'b2066316b5184675a04c2481fe1856785211b390', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: '3ba55346dea1a86fd90c63d366661dfb5e77d871', class: "header__logo" }), h("div", { key: '4cc724ff9b5f73262503172656b2439313552285', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: '7c3a3275ca99c1a328d86dd2b90a2bafe3290d5a', class: "header__global" }, h("udp-avatar", { key: '9a4db5288bce2550d56acfd124b57165e08b8d08', username: this.username }))));
+        return (h("div", { key: '569816f25d9bdf9286623b9e2b7e86ecb3ddb785', class: "header" }, h("stencil-icon-button", { key: '2980f6a34b1321c23b709ccdc63a49b35262a41f', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: '916bf7f902e71fb62694a84ddabe0ffa9638424d', variant: 'data-display-one' }, " ", h("slot", { key: '5e792e8680f9e11ae8de27d9ccee20c004fe9cf4' }), "   "), h("a", { key: '6eb956082f541a38807e29dc8c18c0e5ce0e7a99', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: 'ab60340a8b921edf0dc303de7558ab5b2dd473ce', class: "header__logo" }), h("div", { key: '64082fa1132e127acdb00f9e6876e39d53ed03ce', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: '133b4ec8621d4a2d9fd0bb7b0c9f870741bba504', class: "header__global" }, h("udp-avatar", { key: 'a8a35852fee5cd30832266fa88cde579c5b9d2ad', username: this.username }))));
     }
     static get is() { return "app-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/util/ghost-render/ghost-render.js CHANGED Viewed

@@ -70,7 +70,7 @@ export class GhostRender {
         // The <slot /> is necessary to prevent the Stencil compiler from
         // overly optimizing this component's output and aliasing the
         // defineCustomElement export, which breaks downstream wrappers.
-        return (h(Host, { key: '63ea7c8c6831190e02052214270b60939e300039' }, h("slot", { key: '7745b374f2a3c64dbd29e414d3350bdfc984bdf6' })));
+        return (h(Host, { key: '1e77fbfc7ab0bc5ca00ee2351f547ef3d752f7c9' }, h("slot", { key: '092e556509b9c77f9c54da22fd41ed35c2ce65b2' })));
     }
     static get is() { return "ghost-render"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/demo/ambient-demo-container.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class AmbientDemoContainer {
     render() {
-        return (h("div", { key: 'e2dc6db3f12a7cc3cbd9e0e5e59bb63abe1ff839', class: "container" }, h("div", { key: '1097924d31d84a42f3dfa4411efa02ca2d578b23', class: "title-container" }, " ", h("unity-typography", { key: '3c126bce0e92f7b57016dd206a83935bd216c9fe', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: '0df19aa562c08c1b24453f8b8c4b57a153f11d3b' })));
+        return (h("div", { key: 'aabd2db2a35785c49e8bce7f39ec3321814514b5', class: "container" }, h("div", { key: '104242d374cbb562dae2934c379384adcf689cc2', class: "title-container" }, " ", h("unity-typography", { key: 'ee84ba9c0176de8e4ed3a2f5521fcecf7602ebea', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: 'f55df725728ccad67e8f191a09eff301fb26d394' })));
     }
     static get is() { return "ambient-demo-container"; }
     static get encapsulation() { return "shadow"; }