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

package/dist/types/components.d.ts

@@ -4737,9 +4737,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 +5288,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;
@@ -7261,7 +7284,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 +7556,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;
@@ -12390,9 +12431,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 +12963,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;
@@ -13574,6 +13639,7 @@ declare module "@stencil/core" {
             "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.7",
   "description": "A Stencil based component library for UDP",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",