udp-stencil-component-library 25.18.1-beta.7 → 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.js

@@ -1,2 +1,2 @@
-import{r as a,h as e}from"./index-n-1ZSeAs.js";const t=":host{display:block}.tab-panel{display:none}.tab-panel.active{display:block}";const s=class{constructor(e){a(this,e)}render(){const a=this.value===this.index;return e("div",{key:"735bca81299145233b3e2e017eef05a840b0fb69",class:{"tab-panel":true,active:a},role:"tabpanel","aria-hidden":!a?"true":"false"},e("slot",{key:"68ad651e93008ca12c4d976ca71747a4f4cf4b39"}))}};s.style=t;export{s as udp_tab_panel};
+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-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.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;
@@ -7240,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;
@@ -12310,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;
@@ -13633,6 +13713,9 @@ 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>;

package/package.json

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