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

package/dist/stencil-library/udp-split-screen.entry.js

@@ -1,2 +1,2 @@
-import{r as e,h as t}from"./index-n-1ZSeAs.js";const s=".container{display:flex;height:100%;width:100%}.container:not(.open){display:none}.panel{flex-grow:1;overflow:auto;cursor:default;}.resizer{background-color:transparent;height:100vh;cursor:ew-resize;position:relative;display:flex;align-items:center;justify-content:center;padding:0 2px;box-sizing:content-box;transition:background-color 0.3s ease;}.resizer:hover{background-color:var(--primary-color);cursor:ew-resize;}.resizer:hover::before{background-color:transparent;}.resizer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:100%;background-color:rgb(219, 219, 219);transition:background-color 0.3s ease;}.drag-handle{content:'';font-size:24px;color:#666;user-select:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}";const o=class{constructor(t){e(this,t);this.isOpen=true;this.panelWidth=75;this.isDragging=false;this.handleDrag=e=>{console.log("Dragging");const t=this.element.getBoundingClientRect();const s=(e.clientX-t.left)/t.width*100;const o=Math.max(2,Math.min(s,98));localStorage.setItem("panelWidth",this.panelWidth.toString());if(this.panelWidth!==o){this.panelWidth=o;localStorage.setItem("panelWidth",this.panelWidth.toString())}}}async toggleOpen(){this.isOpen=!this.isOpen}componentDidLoad(){this.element.addEventListener("mousedown",(e=>{this.isDragging=true;e.preventDefault()}));document.addEventListener("mousemove",(e=>{if(!this.isDragging)return;if(this.isDragging){const t=this.element.getBoundingClientRect();const s=(e.clientX-t.left)/t.width*100;this.panelWidth=Math.max(2,Math.min(s,98))}this.handleDrag(e)}));document.addEventListener("mouseup",(()=>{if(this.isDragging){this.isDragging=false}}))}async componentWillLoad(){const e=localStorage.getItem("panelWidth");if(e){this.panelWidth=parseFloat(e)}}render(){return t("div",{key:"6de7d4288cb53149ae06ed973443b31ecd898015",ref:e=>this.element=e,class:{container:true,open:this.isOpen}},t("div",{key:"a47d6eb52c88ec9c52d895af81ad722c1d5b4df0",class:"panel",style:{width:`${this.panelWidth}%`}},t("slot",{key:"8fe4023b236098476be1c7e113f94377d1396f89",name:"first-panel"})),t("div",{key:"fb98abdfcefa4cd6e8dccd077c911033169244da",class:"resizer",onMouseDown:e=>e.preventDefault()},t("div",{key:"1db3f8ad5295c7feeecbe77a02af8f5cea712be6",class:"drag-handle"})),t("div",{key:"6b8a9feb47f10756bab8a3cf2fa2aac2069627b4",class:"panel",style:{width:`${100-this.panelWidth}%`}},t("slot",{key:"26a15ac5efaae765de72034e8359dfd2a51be80d",name:"second-panel"},this.panelContent)))}};o.style=s;export{o as udp_split_screen};
+import{r as e,h as t}from"./index-n-1ZSeAs.js";const s=".container{display:flex;height:100%;width:100%}.container:not(.open){display:none}.panel{flex-grow:1;overflow:auto;cursor:default;}.resizer{background-color:transparent;height:100vh;cursor:ew-resize;position:relative;display:flex;align-items:center;justify-content:center;padding:0 2px;box-sizing:content-box;transition:background-color 0.3s ease;}.resizer:hover{background-color:var(--primary-color);cursor:ew-resize;}.resizer:hover::before{background-color:transparent;}.resizer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:100%;background-color:rgb(219, 219, 219);transition:background-color 0.3s ease;}.drag-handle{content:'';font-size:24px;color:#666;user-select:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}";const o=class{constructor(t){e(this,t);this.isOpen=true;this.panelWidth=75;this.isDragging=false;this.handleDrag=e=>{console.log("Dragging");const t=this.element.getBoundingClientRect();const s=(e.clientX-t.left)/t.width*100;const o=Math.max(2,Math.min(s,98));localStorage.setItem("panelWidth",this.panelWidth.toString());if(this.panelWidth!==o){this.panelWidth=o;localStorage.setItem("panelWidth",this.panelWidth.toString())}}}async toggleOpen(){this.isOpen=!this.isOpen}componentDidLoad(){this.element.addEventListener("mousedown",(e=>{this.isDragging=true;e.preventDefault()}));document.addEventListener("mousemove",(e=>{if(!this.isDragging)return;if(this.isDragging){const t=this.element.getBoundingClientRect();const s=(e.clientX-t.left)/t.width*100;this.panelWidth=Math.max(2,Math.min(s,98))}this.handleDrag(e)}));document.addEventListener("mouseup",(()=>{if(this.isDragging){this.isDragging=false}}))}async componentWillLoad(){const e=localStorage.getItem("panelWidth");if(e){this.panelWidth=parseFloat(e)}}render(){return t("div",{key:"ca232222c0c85071eb987d373ad1541631070e3e",ref:e=>this.element=e,class:{container:true,open:this.isOpen}},t("div",{key:"c221965b0e7542253986c878b05cc656289431e9",class:"panel",style:{width:`${this.panelWidth}%`}},t("slot",{key:"4edf17b48cf6d2e89826878ede587f0a9e2ce1e8",name:"first-panel"})),t("div",{key:"51b5ea69206ebf1221cbb9dbed3f9456fbf54c59",class:"resizer",onMouseDown:e=>e.preventDefault()},t("div",{key:"86d906ebb8e8561e7e564b6c8b4af62a03e1653c",class:"drag-handle"})),t("div",{key:"28fba6e4b0f176b7e08c1f29a3edc045f66346e8",class:"panel",style:{width:`${100-this.panelWidth}%`}},t("slot",{key:"b1215db69a194eced28d595a39322afbe4c7ccde",name:"second-panel"},this.panelContent)))}};o.style=s;export{o as udp_split_screen};
 //# sourceMappingURL=udp-split-screen.entry.js.map

package/dist/stencil-library/udp-stepper-demo.entry.js

@@ -1,2 +1,2 @@
-import{r as t,h as e}from"./index-n-1ZSeAs.js";const i=class{constructor(i){t(this,i);this.activeStep=0;this.completed={};this.step1=e("div",null,"This is step 1 content - Try clicking next!");this.step2=e("div",null,"This is step 2 content - You can go back or forward");this.step3=e("div",null,"This is step 3 content - Final step!");this.steps=[{stepDisplay:{inProcessIcon:"1",completeIcon:"✓",title:"First Step",subTitle:"Start here"},stepTitle:"Step 1",showTitle:true,buttons:[{title:"Next",action:2,variant:"default",customAction:()=>{this.completed=Object.assign(Object.assign({},this.completed),{[0]:true});this.activeStep=1}}],content:this.step1},{stepDisplay:{inProcessIcon:"2",completeIcon:"✓",title:"Second Step",subTitle:"Middle step"},stepTitle:"Step 2",showTitle:true,buttons:[{title:"Back",action:1,variant:"outline",customAction:()=>this.activeStep=0},{title:"Next",action:3,variant:"default",customAction:()=>{this.completed=Object.assign(Object.assign({},this.completed),{[1]:true});this.activeStep=2}}],content:this.step2},{stepDisplay:{inProcessIcon:"3",completeIcon:"✓",title:"Final Step",subTitle:"Complete the process"},stepTitle:"Step 3",showTitle:true,buttons:[{title:"Back",action:2,customAction:()=>this.activeStep=1},{title:"Finish",action:3,variant:"default",customAction:()=>{this.completed=Object.assign(Object.assign({},this.completed),{[2]:true});console.log("Process completed!")}}],content:this.step3}];this.handleStepChange=t=>{this.activeStep=t}}render(){return e("div",{key:"afad6510846a9c4d5d83344d045915061c40e4da",style:{padding:"2rem"}},e("unity-typography",{key:"39114ea64804d8441c90ab2b4bac9175509128f1",variant:"h2"},"Horizontal Stepper with Labels bottom"),e("udp-stepper",{key:"4525e5ceb4a92ddc679690ba2762bfaff5b09218",steps:this.steps,activeStep:this.activeStep,completed:this.completed,stepChange:this.handleStepChange,orientation:"horizontal",labelDisplay:"all",labelPosition:"bottom"}),e("unity-typography",{key:"c28dc5a2348e1af8e544a33d6f359d32d7f326ea",variant:"h2"},"Horizontal Stepper without Labels"),e("udp-stepper",{key:"bc50999f3a4b9f150d3f932101221c9c6b992fdc",steps:this.steps,activeStep:this.activeStep,completed:this.completed,stepChange:this.handleStepChange,orientation:"horizontal",labelDisplay:"none",labelPosition:"bottom"}),e("unity-typography",{key:"a5fb283cd408dae5a92b5bbcb999849d29c4114e",variant:"h2"},"Horizontal Stepper with Labels to Right"),e("udp-stepper",{key:"cc34b5cfd9e2a29dc5f23c229e28ff6e3bb4fccd",steps:this.steps,activeStep:this.activeStep,completed:this.completed,stepChange:this.handleStepChange,orientation:"horizontal",labelDisplay:"all",labelPosition:"right"}),e("unity-typography",{key:"6d602c582f6ebc764cb46f0bc3a7b7322da22217",variant:"h2"},"Vertical Stepper"),e("udp-stepper",{key:"f530054751640c808efa3a1abdfea025402283a8",steps:this.steps,activeStep:this.activeStep,completed:this.completed,stepChange:this.handleStepChange,orientation:"vertical",labelDisplay:"all",labelPosition:"right"}))}};export{i as udp_stepper_demo};
+import{r as t,h as e}from"./index-n-1ZSeAs.js";const i=class{constructor(i){t(this,i);this.activeStep=0;this.completed={};this.step1=e("div",null,"This is step 1 content - Try clicking next!");this.step2=e("div",null,"This is step 2 content - You can go back or forward");this.step3=e("div",null,"This is step 3 content - Final step!");this.steps=[{stepDisplay:{inProcessIcon:"1",completeIcon:"✓",title:"First Step",subTitle:"Start here"},stepTitle:"Step 1",showTitle:true,buttons:[{title:"Next",action:2,variant:"default",customAction:()=>{this.completed=Object.assign(Object.assign({},this.completed),{[0]:true});this.activeStep=1}}],content:this.step1},{stepDisplay:{inProcessIcon:"2",completeIcon:"✓",title:"Second Step",subTitle:"Middle step"},stepTitle:"Step 2",showTitle:true,buttons:[{title:"Back",action:1,variant:"outline",customAction:()=>this.activeStep=0},{title:"Next",action:3,variant:"default",customAction:()=>{this.completed=Object.assign(Object.assign({},this.completed),{[1]:true});this.activeStep=2}}],content:this.step2},{stepDisplay:{inProcessIcon:"3",completeIcon:"✓",title:"Final Step",subTitle:"Complete the process"},stepTitle:"Step 3",showTitle:true,buttons:[{title:"Back",action:2,customAction:()=>this.activeStep=1},{title:"Finish",action:3,variant:"default",customAction:()=>{this.completed=Object.assign(Object.assign({},this.completed),{[2]:true});console.log("Process completed!")}}],content:this.step3}];this.handleStepChange=t=>{this.activeStep=t}}render(){return e("div",{key:"e81619ca3c31f9f6662c0b3af6c02a2db3e3f564",style:{padding:"2rem"}},e("unity-typography",{key:"5e11e57915b6081e460f47a344dd31bf722d7e5b",variant:"h2"},"Horizontal Stepper with Labels bottom"),e("udp-stepper",{key:"ec35e19cc92d59c85818becd4e4d56e065df5dc3",steps:this.steps,activeStep:this.activeStep,completed:this.completed,stepChange:this.handleStepChange,orientation:"horizontal",labelDisplay:"all",labelPosition:"bottom"}),e("unity-typography",{key:"f0011595e8eb435dd85b6c6c2570029a3cbd6afc",variant:"h2"},"Horizontal Stepper without Labels"),e("udp-stepper",{key:"afe54dc4d369c757dcb6ba5fe455e84c95e86f07",steps:this.steps,activeStep:this.activeStep,completed:this.completed,stepChange:this.handleStepChange,orientation:"horizontal",labelDisplay:"none",labelPosition:"bottom"}),e("unity-typography",{key:"394396ffff23cc1f4d99611bc3ccceeb096a2c1e",variant:"h2"},"Horizontal Stepper with Labels to Right"),e("udp-stepper",{key:"104aaf080e02cd0c9da8a84cf911b721883e0a37",steps:this.steps,activeStep:this.activeStep,completed:this.completed,stepChange:this.handleStepChange,orientation:"horizontal",labelDisplay:"all",labelPosition:"right"}),e("unity-typography",{key:"90b1aaf901ca38b48c5584c0fb79d75a0f5a2a8c",variant:"h2"},"Vertical Stepper"),e("udp-stepper",{key:"219567475d5ea693bd77641df12c20ee9360367d",steps:this.steps,activeStep:this.activeStep,completed:this.completed,stepChange:this.handleStepChange,orientation:"vertical",labelDisplay:"all",labelPosition:"right"}))}};export{i as udp_stepper_demo};
 //# sourceMappingURL=udp-stepper-demo.entry.js.map

package/dist/stencil-library/udp-tab-panel.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-tab-panel.entry.esm.js","sources":["src/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.css?tag=udp-tab-panel&encapsulation=shadow","src/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.tab-panel {\n  display: none;\n}\n\n.tab-panel.active {\n  display: block;\n}\n","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"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG,8EAA8E;;MCOxF,WAAW,GAAA,MAAA;;;;IAWtB,MAAM,GAAA;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;QAE1C,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,QAAQ,EAAE,QAAQ;AACnB,aAAA,EACD,IAAI,EAAC,UAAU,EAAA,aAAA,EAEF,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,EAEzC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;"}

package/dist/stencil-library/udp-tab-panel.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as a}from"./index-n-1ZSeAs.js";const t=":host{display:block}.tab-panel{display:none}.tab-panel.active{display:block}";const s=class{constructor(a){e(this,a)}render(){const e=this.value===this.index;return a("div",{key:"eaa68aa3e874dbf92d218eed44f6332efd7b4946",class:{"tab-panel":true,active:e},role:"tabpanel","aria-hidden":!e?"true":"false"},a("slot",{key:"5ebaeac17012121bcdf75249edd5042f47473f58"}))}};s.style=t;export{s as udp_tab_panel};
+//# sourceMappingURL=udp-tab-panel.entry.js.map

package/dist/stencil-library/udp-tab-panel.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["registerInstance","h","udpTabPanelCss","UdpTabPanel","constructor","hostRef","this","render","isActive","value","index","key","class","active","role","style"],"sources":["0"],"mappings":"YAAcA,OAAkBC,MAAS,sBAEzC,MAAMC,EAAiB,+EAEvB,MAAMC,EAAc,MAChB,WAAAC,CAAYC,GACRL,EAAiBM,KAAMD,EAC3B,CACA,MAAAE,GACI,MAAMC,EAAWF,KAAKG,QAAUH,KAAKI,MACrC,OAAQT,EAAE,MAAO,CAAEU,IAAK,2CAA4CC,MAAO,CACnE,YAAa,KACbC,OAAUL,GACXM,KAAM,WAAY,eAAgBN,EAAW,OAAS,SAAWP,EAAE,OAAQ,CAAEU,IAAK,6CAC7F,GAEJR,EAAYY,MAAQb,SAEXC","ignoreList":[]}

package/dist/stencil-library/udp-vertical-spacer.entry.js

@@ -1,2 +1,2 @@
-import{r as s,h as a}from"./index-n-1ZSeAs.js";const c=":host{display:block;width:100%}.spacing-01{height:var(--spacing-01)}.spacing-07{height:var(--spacing-07)}.spacing-13{height:var(--spacing-13)}";const i=class{constructor(a){s(this,a)}render(){const s={small:"spacing-01",medium:"spacing-07",large:"spacing-13"};const c=s[this.unit]||"spacing-01";return a("div",{key:"6f95b2f7bac8b4c689e35d4923ff72ae310e5fdb",class:c})}};i.style=c;export{i as udp_vertical_spacer};
+import{r as s,h as a}from"./index-n-1ZSeAs.js";const c=":host{display:block;width:100%}.spacing-01{height:var(--spacing-01)}.spacing-07{height:var(--spacing-07)}.spacing-13{height:var(--spacing-13)}";const i=class{constructor(a){s(this,a)}render(){const s={small:"spacing-01",medium:"spacing-07",large:"spacing-13"};const c=s[this.unit]||"spacing-01";return a("div",{key:"e05ad349a3c1df3a515ede40f457661c8b7913b9",class:c})}};i.style=c;export{i as udp_vertical_spacer};
 //# sourceMappingURL=udp-vertical-spacer.entry.js.map

package/dist/types/components/my-component/UI/drawers/udp-side-sheet/types.d.ts

@@ -0,0 +1,7 @@
+export interface SecondaryButton {
+    id: number | string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    onClick: () => void;
+}

package/dist/types/components/my-component/UI/drawers/udp-side-sheet/udp-side-sheet.d.ts

@@ -1,27 +1,141 @@
 import { EventEmitter } from '../../../../../stencil-public-runtime';
+import { SecondaryButton } from './types';
+/**
+ * Side sheet component used for contextual drawers.
+ */
 export declare class UdpSideSheet {
+    /** Host element reference for portal behavior */
     hostEl: HTMLElement;
+    /** When true, the side sheet is open and visible */
     open: boolean;
+    /** Title text displayed in the header */
     title: string;
+    /** Position of the sheet on the screen */
     position: 'left' | 'right';
+    /** Width preset or a numeric pixel width */
     width: 'sm' | 'md' | 'lg' | 'full' | number;
+    /** Controls whether default inner padding is applied */
     padding: boolean;
+    /** When true, shows a top loader */
     loading: boolean;
+    /** Label for the header primary action button */
     headerActionButtonLabel: string;
+    /** Whether the header action button is disabled */
     headerActionButtonDisabled: boolean;
+    /** Icon name for the header action button */
     headerActionButtonIcon: string;
+    /** Additional secondary buttons to render in the header */
+    headerSecondaryButtons: SecondaryButton[];
+    /** Label for the primary footer action button */
     primaryButtonLabel: string;
+    /** Whether the primary footer button is disabled */
     primaryButtonDisabled: boolean;
+    /** Icon name for the primary footer button */
     primaryButtonIcon: string;
+    /** Secondary buttons to render in the footer */
+    footerSecondaryButtons?: SecondaryButton[];
+    /** Emitted when the sheet is closed */
     udpSideSheetClose: EventEmitter<void>;
+    /** Emitted when the primary footer button is clicked */
     udpPrimaryButtonClick: EventEmitter<void>;
+    /** Emitted when the header action button is clicked */
     udpHeaderActionButtonClick: EventEmitter<void>;
+    /** Whether the footer should show the overflow "More" button */
+    showOverflowButton: boolean;
+    /** Whether the overflow popover is open */
+    openOverflowMenu: boolean;
+    /** Anchor element for the overflow popover */
+    overflowMenuAnchor: HTMLElement;
+    visibleSecondaryButtons: SecondaryButton[];
+    overflowSecondaryButtons: SecondaryButton[];
+    /** Saved original document.body.overflow value to restore on close */
     private originalBodyOverflow;
+    /** ResizeObserver instance watching footer size changes */
+    private resizeObserver;
+    /** Reference to the footer element */
+    private footerRef;
+    /** Offscreen measurement container for buttons */
+    private measurementContainerRef;
+    /** Saved original document.body.paddingRight value to restore on close */
+    private originalBodyPaddingRight;
+    /**
+     * Watcher for `open` prop. Handles portal append/removal and body scroll lock.
+     *
+     * @param newValue - new value of the `open` prop
+     * @param oldValue - previous value of the `open` prop
+     */
     handleOpenChange(newValue: boolean, oldValue: boolean): void;
+    /**
+     * Watcher for footer secondary buttons changes. Triggers overflow recalculation.
+     */
+    handleSecondaryButtonsChange(): void;
+    /**
+     * Measures footer buttons in an offscreen container and sets `showOverflowButton`.
+     * Safely returns early if required refs are unavailable.
+     */
+    private checkOverflow;
+    /**
+     * Transition end handler used to remove the host element from body after close.
+     *
+     * @private
+     */
     private handleTransitionEnd;
+    /**
+     * Lifecycle: componentDidLoad. Sets up ResizeObserver and initial overflow check.
+     *
+     * @private
+     */
+    componentDidLoad(): void;
+    /**
+     * Lifecycle: disconnectedCallback. Restores body styles and disconnects observers.
+     *
+     * @private
+     */
     disconnectedCallback(): void;
+    /**
+     * Close the side sheet and emit close event.
+     *
+     * @private
+     */
     private onClose;
+    /**
+     * Backdrop click handler. Only closes when clicking the backdrop itself.
+     *
+     * @param e - MouseEvent from the backdrop click
+     * @private
+     */
+    private onCloseBackdrop;
+    /**
+     * Emit primary footer button click event.
+     *
+     * @private
+     */
     private onPrimaryButtonClick;
+    /**
+     * Emit header action button click event.
+     *
+     * @private
+     */
     private onHeaderActionButtonClick;
+    /**
+     * Open overflow menu anchored to the clicked element.
+     *
+     * @param event - MouseEvent from the "More" button click
+     * @private
+     */
+    private onMoreActionButtonClick;
+    /**
+     * Close the overflow popover.
+     *
+     * @param e - optional KeyboardEvent or MouseEvent (unused)
+     * @private
+     */
+    private handleCloseOverflowMenu;
+    /**
+     * Render the component UI.
+     *
+     * @returns JSX element tree
+     * @private
+     */
     render(): any;
 }

package/dist/types/components/my-component/UI/tabs/tab/tabs/udp-tabs.d.ts

@@ -1,5 +1,6 @@
+import { EventEmitter } from '../../../../../../stencil-public-runtime';
 interface TabDetail {
-    title: string;
+    label: string;
     icon?: string;
     iconPlacement?: 'start' | 'end' | 'top' | 'bottom';
     hidden?: boolean;
@@ -14,7 +15,24 @@ export declare class UdpTabs {
      * - `'fill'`: Tabs will stretch to fill the available horizontal space.
      */
     variant: 'fill' | 'standard';
-    activeTab: number;
+    /**
+     * (Controlled) The index of the currently active tab.
+     * If this prop is provided, the component will be in "controlled" mode.
+     * The parent must listen for `udpTabChange` to update this value.
+     */
+    value?: number;
+    /**
+     * (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.
+     */
+    tabs: TabDetail[];
+    /**
+     * (Controlled) Emits the index of the tab that was clicked.
+     * This is only emitted in "controlled" mode (when `value` is provided).
+     */
+    udpTabChange: EventEmitter<number>;
+    internalActiveTab: number;
     tabDetails: TabDetail[];
     sliderStyle: {
         width: string;
@@ -22,19 +40,44 @@ export declare class UdpTabs {
     };
     showScrollLeft: boolean;
     showScrollRight: boolean;
-    private tabs;
+    private slottedTabs;
     private buttonRefs;
     private scrollContainerRef?;
+    /**
+     * Returns true if the component is in controlled mode.
+     */
+    private get isControlled();
+    /**
+     * Returns true if tabs are being provided by the `tabs` prop.
+     */
+    private get useTabsProp();
+    /**
+     * Returns the currently active tab index,
+     * respecting controlled or uncontrolled mode.
+     */
+    private get activeTab();
     handleSlotChange(): void;
     handleResize(): void;
     componentDidLoad(): void;
-    onActiveTabChange(): void;
+    /**
+     * Watcher for uncontrolled state changes.
+     */
+    onActiveTabChange(newValue: number): void;
+    /**
+     * Watcher for controlled state changes.
+     */
+    onValueChange(newValue: number): void;
+    /**
+     * Watcher for tabs prop changes.
+     */
+    onTabsPropChange(): void;
     onVariantChange(): void;
     private initializeTabs;
     private updateActiveTabs;
     private updateSliderPosition;
     private checkScroll;
     private tabClicked;
+    private scrollTabIntoView;
     private scrollToStart;
     private scrollToEnd;
     render(): any;

package/dist/types/components/my-component/UI/tabs/tab/udp-tab.d.ts

@@ -2,7 +2,7 @@ export declare class UdpTab {
     /**
      * The title of the tab, displayed in the tab-header.
      */
-    title: string;
+    label: string;
     /**
      * True if this is the active tab.
      * This is set by the parent <udp-tabs> component.

package/dist/types/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.d.ts

@@ -0,0 +1,11 @@
+export declare class UdpTabPanel {
+    /**
+     * The active tab index, provided by the parent.
+     */
+    value: number;
+    /**
+     * The index this panel corresponds to.
+     */
+    index: number;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -22,6 +22,7 @@ import { Event, VNode } from "./stencil-public-runtime";
 import { Guid as Guid1 } from "./global/types";
 import { UdpForm } from "./components/my-component/UI/forms/udp-forms/utils/classes/UdpForm";
 import { UdpFormSubmission } from "./components/my-component/UI/forms/udp-forms/utils/classes/UdpFormSubmission";
+import { SecondaryButton } from "./components/my-component/UI/drawers/udp-side-sheet/types";
 import { LabelDisplayMode, LabelPosition, Steps } from "./components/my-component/UI/stepper/types";
 import { User } from "./udp-utilities/udp-user-creator";
 import { XYMultiSeriesSeriesProps, XYMultiSeriesXAxisProps, XYMultiSeriesYAxisProps, XYSeriesTypes } from "./components/my-component/UI/charts/chartUtils";
@@ -43,6 +44,7 @@ export { Event, VNode } from "./stencil-public-runtime";
 export { Guid as Guid1 } from "./global/types";
 export { UdpForm } from "./components/my-component/UI/forms/udp-forms/utils/classes/UdpForm";
 export { UdpFormSubmission } from "./components/my-component/UI/forms/udp-forms/utils/classes/UdpFormSubmission";
+export { SecondaryButton } from "./components/my-component/UI/drawers/udp-side-sheet/types";
 export { LabelDisplayMode, LabelPosition, Steps } from "./components/my-component/UI/stepper/types";
 export { User } from "./udp-utilities/udp-user-creator";
 export { XYMultiSeriesSeriesProps, XYMultiSeriesXAxisProps, XYMultiSeriesYAxisProps, XYSeriesTypes } from "./components/my-component/UI/charts/chartUtils";
@@ -4618,37 +4620,70 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * Side sheet component used for contextual drawers.
+     */
     interface UdpSideSheet {
         /**
+          * Secondary buttons to render in the footer
+         */
+        "footerSecondaryButtons"?: SecondaryButton[];
+        /**
+          * Whether the header action button is disabled
           * @default false
          */
         "headerActionButtonDisabled": boolean;
+        /**
+          * Icon name for the header action button
+         */
         "headerActionButtonIcon": string;
+        /**
+          * Label for the header primary action button
+         */
         "headerActionButtonLabel": string;
         /**
+          * Additional secondary buttons to render in the header
+         */
+        "headerSecondaryButtons": SecondaryButton[];
+        /**
+          * When true, shows a top loader
           * @default false
          */
         "loading": boolean;
         /**
+          * When true, the side sheet is open and visible
           * @default false
          */
         "open": boolean;
         /**
+          * Controls whether default inner padding is applied
           * @default true
          */
         "padding": boolean;
         /**
+          * Position of the sheet on the screen
           * @default 'right'
          */
         "position": 'left' | 'right';
         /**
+          * Whether the primary footer button is disabled
           * @default false
          */
         "primaryButtonDisabled": boolean;
+        /**
+          * Icon name for the primary footer button
+         */
         "primaryButtonIcon": string;
+        /**
+          * Label for the primary footer action button
+         */
         "primaryButtonLabel": string;
+        /**
+          * Title text displayed in the header
+         */
         "title": string;
         /**
+          * Width preset or a numeric pixel width
           * @default 'md'
          */
         "width": 'sm' | 'md' | 'lg' | 'full' | number;
@@ -4737,9 +4772,28 @@ export namespace Components {
         /**
           * The title of the tab, displayed in the tab-header.
          */
-        "title": string;
+        "label": string;
+    }
+    interface UdpTabPanel {
+        /**
+          * The index this panel corresponds to.
+         */
+        "index": number;
+        /**
+          * The active tab index, provided by the parent.
+         */
+        "value": number;
     }
     interface UdpTabs {
+        /**
+          * (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.
+          * @default []
+         */
+        "tabs": TabDetail[];
+        /**
+          * (Controlled) The index of the currently active tab. If this prop is provided, the component will be in "controlled" mode. The parent must listen for `udpTabChange` to update this value.
+         */
+        "value"?: number;
         /**
           * 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.
           * @default 'fill'
@@ -5269,6 +5323,10 @@ export interface UdpSideSheetCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLUdpSideSheetElement;
 }
+export interface UdpTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLUdpTabsElement;
+}
 export interface UdpTimeSelectorCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLUdpTimeSelectorElement;
@@ -7217,6 +7275,9 @@ declare global {
         "udpPrimaryButtonClick": void;
         "udpHeaderActionButtonClick": void;
     }
+    /**
+     * Side sheet component used for contextual drawers.
+     */
     interface HTMLUdpSideSheetElement extends Components.UdpSideSheet, HTMLStencilElement {
         addEventListener<K extends keyof HTMLUdpSideSheetElementEventMap>(type: K, listener: (this: HTMLUdpSideSheetElement, ev: UdpSideSheetCustomEvent<HTMLUdpSideSheetElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -7261,7 +7322,24 @@ declare global {
         prototype: HTMLUdpTabElement;
         new (): HTMLUdpTabElement;
     };
+    interface HTMLUdpTabPanelElement extends Components.UdpTabPanel, HTMLStencilElement {
+    }
+    var HTMLUdpTabPanelElement: {
+        prototype: HTMLUdpTabPanelElement;
+        new (): HTMLUdpTabPanelElement;
+    };
+    interface HTMLUdpTabsElementEventMap {
+        "udpTabChange": number;
+    }
     interface HTMLUdpTabsElement extends Components.UdpTabs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLUdpTabsElementEventMap>(type: K, listener: (this: HTMLUdpTabsElement, ev: UdpTabsCustomEvent<HTMLUdpTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLUdpTabsElementEventMap>(type: K, listener: (this: HTMLUdpTabsElement, ev: UdpTabsCustomEvent<HTMLUdpTabsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLUdpTabsElement: {
         prototype: HTMLUdpTabsElement;
@@ -7516,6 +7594,7 @@ declare global {
         "udp-stepper": HTMLUdpStepperElement;
         "udp-stepper-demo": HTMLUdpStepperDemoElement;
         "udp-tab": HTMLUdpTabElement;
+        "udp-tab-panel": HTMLUdpTabPanelElement;
         "udp-tabs": HTMLUdpTabsElement;
         "udp-time-selector": HTMLUdpTimeSelectorElement;
         "udp-user-creator": HTMLUdpUserCreatorElement;
@@ -12269,40 +12348,82 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * Side sheet component used for contextual drawers.
+     */
     interface UdpSideSheet {
         /**
+          * Secondary buttons to render in the footer
+         */
+        "footerSecondaryButtons"?: SecondaryButton[];
+        /**
+          * Whether the header action button is disabled
           * @default false
          */
         "headerActionButtonDisabled"?: boolean;
+        /**
+          * Icon name for the header action button
+         */
         "headerActionButtonIcon"?: string;
+        /**
+          * Label for the header primary action button
+         */
         "headerActionButtonLabel"?: string;
         /**
+          * Additional secondary buttons to render in the header
+         */
+        "headerSecondaryButtons"?: SecondaryButton[];
+        /**
+          * When true, shows a top loader
           * @default false
          */
         "loading"?: boolean;
+        /**
+          * Emitted when the header action button is clicked
+         */
         "onUdpHeaderActionButtonClick"?: (event: UdpSideSheetCustomEvent<void>) => void;
+        /**
+          * Emitted when the primary footer button is clicked
+         */
         "onUdpPrimaryButtonClick"?: (event: UdpSideSheetCustomEvent<void>) => void;
+        /**
+          * Emitted when the sheet is closed
+         */
         "onUdpSideSheetClose"?: (event: UdpSideSheetCustomEvent<void>) => void;
         /**
+          * When true, the side sheet is open and visible
           * @default false
          */
         "open"?: boolean;
         /**
+          * Controls whether default inner padding is applied
           * @default true
          */
         "padding"?: boolean;
         /**
+          * Position of the sheet on the screen
           * @default 'right'
          */
         "position"?: 'left' | 'right';
         /**
+          * Whether the primary footer button is disabled
           * @default false
          */
         "primaryButtonDisabled"?: boolean;
+        /**
+          * Icon name for the primary footer button
+         */
         "primaryButtonIcon"?: string;
+        /**
+          * Label for the primary footer action button
+         */
         "primaryButtonLabel"?: string;
+        /**
+          * Title text displayed in the header
+         */
         "title"?: string;
         /**
+          * Width preset or a numeric pixel width
           * @default 'md'
          */
         "width"?: 'sm' | 'md' | 'lg' | 'full' | number;
@@ -12390,9 +12511,32 @@ declare namespace LocalJSX {
         /**
           * The title of the tab, displayed in the tab-header.
          */
-        "title"?: string;
+        "label"?: string;
+    }
+    interface UdpTabPanel {
+        /**
+          * The index this panel corresponds to.
+         */
+        "index"?: number;
+        /**
+          * The active tab index, provided by the parent.
+         */
+        "value"?: number;
     }
     interface UdpTabs {
+        /**
+          * (Controlled) Emits the index of the tab that was clicked. This is only emitted in "controlled" mode (when `value` is provided).
+         */
+        "onUdpTabChange"?: (event: UdpTabsCustomEvent<number>) => void;
+        /**
+          * (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.
+          * @default []
+         */
+        "tabs"?: TabDetail[];
+        /**
+          * (Controlled) The index of the currently active tab. If this prop is provided, the component will be in "controlled" mode. The parent must listen for `udpTabChange` to update this value.
+         */
+        "value"?: number;
         /**
           * 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.
           * @default 'fill'
@@ -12899,6 +13043,7 @@ declare namespace LocalJSX {
         "udp-stepper": UdpStepper;
         "udp-stepper-demo": UdpStepperDemo;
         "udp-tab": UdpTab;
+        "udp-tab-panel": UdpTabPanel;
         "udp-tabs": UdpTabs;
         "udp-time-selector": UdpTimeSelector;
         "udp-user-creator": UdpUserCreator;
@@ -13568,12 +13713,16 @@ declare module "@stencil/core" {
              * ```
              */
             "udp-selector": LocalJSX.UdpSelector & JSXBase.HTMLAttributes<HTMLUdpSelectorElement>;
+            /**
+             * Side sheet component used for contextual drawers.
+             */
             "udp-side-sheet": LocalJSX.UdpSideSheet & JSXBase.HTMLAttributes<HTMLUdpSideSheetElement>;
             "udp-skeleton-loading": LocalJSX.UdpSkeletonLoading & JSXBase.HTMLAttributes<HTMLUdpSkeletonLoadingElement>;
             "udp-split-screen": LocalJSX.UdpSplitScreen & JSXBase.HTMLAttributes<HTMLUdpSplitScreenElement>;
             "udp-stepper": LocalJSX.UdpStepper & JSXBase.HTMLAttributes<HTMLUdpStepperElement>;
             "udp-stepper-demo": LocalJSX.UdpStepperDemo & JSXBase.HTMLAttributes<HTMLUdpStepperDemoElement>;
             "udp-tab": LocalJSX.UdpTab & JSXBase.HTMLAttributes<HTMLUdpTabElement>;
+            "udp-tab-panel": LocalJSX.UdpTabPanel & JSXBase.HTMLAttributes<HTMLUdpTabPanelElement>;
             "udp-tabs": LocalJSX.UdpTabs & JSXBase.HTMLAttributes<HTMLUdpTabsElement>;
             /**
              * A standardized time input component with validation, min/max constraints, and precise time selection.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "udp-stencil-component-library",
-  "version": "25.18.1-beta.6",
+  "version": "25.18.1-beta.8",
   "description": "A Stencil based component library for UDP",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",