@uh-design-system/component-library 1.4.0-rc.0 → 1.4.0-rc.2

package/dist/types/components.d.ts

@@ -6,6 +6,8 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { DsAccordionToggleEvent } from "./components/01-base-components/ds-accordion/ds-accordion";
+import { DsActionListItemSelectEvent, DsActionListItemVariant } from "./components/01-base-components/ds-action-menu/ds-action-list-item/ds-action-list-item";
+import { DsActionMenuCloseEvent, DsActionMenuOpenEvent } from "./components/01-base-components/ds-action-menu/ds-action-menu";
 import { DsBackdropTransitionEvent } from "./components/01-base-components/ds-backdrop/ds-backdrop";
 import { LinkTarget } from "./components/utils/link/linkUtils";
 import { DsCheckboxBlurEvent, DsCheckboxChangeEvent, DsCheckboxFocusEvent } from "./components/01-base-components/ds-checkbox/ds-checkbox";
@@ -25,11 +27,15 @@ import { DsRadioButtonGroupChangeEvent, DsRadioButtonGroupInvalidStateChangeEven
 import { RibbonLink } from "./data";
 import { DsSelectBlurEvent, DsSelectChangeEvent, DsSelectFocusEvent, DsSelectMultipleChangeEvent } from "./components/01-base-components/ds-select/ds-select";
 import { Language } from "./store";
+import { DsTabClickEvent, DsTabFocusEvent } from "./components/01-base-components/ds-tabs/ds-tab/ds-tab";
+import { DsTabChangeEvent } from "./components/01-base-components/ds-tabs/ds-tablist/ds-tablist";
 import { DsTextAreaEvent } from "./components/01-base-components/ds-text-area/ds-text-area";
 import { DsTextInputType } from "./components/01-base-components/ds-text-input/utils";
 import { DsTextInputEvent } from "./components/01-base-components/ds-text-input/ds-text-input";
 import { Event } from "./stencil-public-runtime";
 export { DsAccordionToggleEvent } from "./components/01-base-components/ds-accordion/ds-accordion";
+export { DsActionListItemSelectEvent, DsActionListItemVariant } from "./components/01-base-components/ds-action-menu/ds-action-list-item/ds-action-list-item";
+export { DsActionMenuCloseEvent, DsActionMenuOpenEvent } from "./components/01-base-components/ds-action-menu/ds-action-menu";
 export { DsBackdropTransitionEvent } from "./components/01-base-components/ds-backdrop/ds-backdrop";
 export { LinkTarget } from "./components/utils/link/linkUtils";
 export { DsCheckboxBlurEvent, DsCheckboxChangeEvent, DsCheckboxFocusEvent } from "./components/01-base-components/ds-checkbox/ds-checkbox";
@@ -49,6 +55,8 @@ export { DsRadioButtonGroupChangeEvent, DsRadioButtonGroupInvalidStateChangeEven
 export { RibbonLink } from "./data";
 export { DsSelectBlurEvent, DsSelectChangeEvent, DsSelectFocusEvent, DsSelectMultipleChangeEvent } from "./components/01-base-components/ds-select/ds-select";
 export { Language } from "./store";
+export { DsTabClickEvent, DsTabFocusEvent } from "./components/01-base-components/ds-tabs/ds-tab/ds-tab";
+export { DsTabChangeEvent } from "./components/01-base-components/ds-tabs/ds-tablist/ds-tablist";
 export { DsTextAreaEvent } from "./components/01-base-components/ds-text-area/ds-text-area";
 export { DsTextInputType } from "./components/01-base-components/ds-text-input/utils";
 export { DsTextInputEvent } from "./components/01-base-components/ds-text-input/ds-text-input";
@@ -143,6 +151,154 @@ export namespace Components {
          */
         "setIsExpanded": (isExpanded: boolean) => Promise<void>;
     }
+    interface DsActionList {
+    }
+    interface DsActionListDivider {
+    }
+    interface DsActionListGroupTitle {
+        /**
+          * ID applied to the title span, used by the parent ds-action-list for aria-labelledby.
+          * @default groupTitleIdGenerator.next().value as string
+         */
+        "dsId": string;
+        /**
+          * The visible group title text.
+         */
+        "dsTitle": string;
+    }
+    interface DsActionListItem {
+        /**
+          * When false, selecting a single-select item will not close the menu. Has no effect on action, action-danger, or multi-select variants. Defaults to true.
+          * @default true
+         */
+        "dsCloseOnSelect": boolean;
+        /**
+          * Optional secondary description text rendered below the label.
+         */
+        "dsDescription"?: string;
+        /**
+          * When true, the item is disabled and cannot be interacted with.
+          * @default false
+         */
+        "dsDisabled": boolean;
+        /**
+          * Icon name to display. Not applicable to multi-select variant. When any item in a sibling group has an icon, other items without icons are automatically indented via `dsIndented`.
+         */
+        "dsIcon"?: string;
+        /**
+          * Unique identifier for the item. Emitted in the dsSelect event payload.
+          * @default actionListItemIdGenerator.next().value as string
+         */
+        "dsId": string;
+        /**
+          * When true, adds left padding to align this item with siblings that have icons. Automatically set by the parent `ds-action-list` when needed.
+          * @default false
+         */
+        "dsIndented": boolean;
+        /**
+          * Visible label for the item.
+         */
+        "dsLabel": string;
+        /**
+          * Selected state for single-select and multi-select variants.
+          * @default false
+         */
+        "dsSelected": boolean;
+        /**
+          * When true, the item is visible and focusable but cannot be activated. Unlike `dsDisabled`, the item retains its normal appearance except the description text is rendered in the attention color to signal unavailability.
+          * @default false
+         */
+        "dsUnavailable": boolean;
+        /**
+          * Variant of the item, which determines ARIA role and visual appearance: - "action": standard action, role="menuitem", closes menu on select - "action-danger": destructive action, role="menuitem", closes menu on select - "single-select": radio selection, role="menuitemradio", closes menu on select - "multi-select": checkbox selection, role="menuitemcheckbox", menu stays open
+          * @default 'action'
+         */
+        "dsVariant": DsActionListItemVariant;
+        /**
+          * Sets focus to the internal button element.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Sets the tabIndex on the internal button element. Used by ds-action-list for roving tabindex in standalone mode.
+         */
+        "setTabIndex": (value: number) => Promise<void>;
+    }
+    interface DsActionMenu {
+        /**
+          * Closes the menu and returns focus to the trigger button.
+         */
+        "close": () => Promise<void>;
+        /**
+          * Alignment of the menu relative to the trigger button. - "start": menu left edge aligns with button left edge - "center": menu center aligns with button center - "end": menu right edge aligns with button right edge
+          * @default 'start'
+         */
+        "dsAlign": 'start' | 'center' | 'end';
+        /**
+          * Accessible label for the trigger button. Required when using `dsIconOnly=true` since there is no visible text to announce. Forwarded as `aria-label` to the internal `ds-button`.
+         */
+        "dsAriaLabel"?: string;
+        /**
+          * Colour of the trigger button.
+          * @default 'blue'
+         */
+        "dsButtonColour": 'blue' | 'black' | 'white' | 'danger';
+        /**
+          * Size of the trigger button.
+          * @default 'medium'
+         */
+        "dsButtonSize": 'small' | 'medium';
+        /**
+          * Visible label on the trigger button.
+          * @default ''
+         */
+        "dsButtonText": string;
+        /**
+          * Variant of the trigger button.
+          * @default 'secondary'
+         */
+        "dsButtonVariant": 'primary' | 'secondary' | 'supplementary';
+        /**
+          * When true, the trigger button is disabled and the menu cannot be opened.
+          * @default false
+         */
+        "dsDisabled": boolean;
+        /**
+          * Icon name for the trigger button. When not icon-only, a chevron is appended automatically.
+          * @default ''
+         */
+        "dsIcon": string;
+        /**
+          * When true, renders an icon-only button as the trigger. The icon defaults to a vertical three-dot (more-vert) icon unless `dsIcon` is set.
+          * @default false
+         */
+        "dsIconOnly": boolean;
+        /**
+          * ID for the trigger button element. Also used to derive the CSS anchor-name and aria-labelledby.
+          * @default actionMenuIdGenerator.next().value as string
+         */
+        "dsId": string;
+        /**
+          * CSS max-height for the menu (e.g. "300px"). When set, the menu becomes scrollable.
+         */
+        "dsMenuMaxHeight"?: string;
+        /**
+          * Custom CSS width for the menu (e.g. "400px", "20rem"). When undefined, the menu grows to fit its content with a minimum of 288px. Note: the menu uses `position: fixed`, so percentage values (e.g. "100%") are relative to the viewport, not the trigger button.
+         */
+        "dsMenuWidth"?: string;
+        /**
+          * Where the menu opens relative to the trigger. - "bottom": always opens below - "top": always opens above - "auto": browser uses CSS position-try-fallbacks to flip automatically when near viewport edge
+          * @default 'auto'
+         */
+        "dsPlacement": 'bottom' | 'top' | 'auto';
+        /**
+          * Opens the menu and moves focus to the first focusable item.
+         */
+        "open": () => Promise<void>;
+        /**
+          * Toggles the menu open/closed state.
+         */
+        "toggle": () => Promise<void>;
+    }
     interface DsAssistiveText {
         /**
           * Passed to the `id` attribute of the `small` element.
@@ -325,6 +481,11 @@ export namespace Components {
           * Passed to the `aria-haspopup` attribute of the `button` element.
          */
         "dsAriaHaspopup"?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+        /**
+          * Passed to the `aria-hidden` attribute of the `button` element.
+          * @default false
+         */
+        "dsAriaHidden"?: boolean;
         /**
           * Passed to the `aria-label` attribute of the `button` element.
          */
@@ -420,6 +581,10 @@ export namespace Components {
           * Information for screen readers when spinner is displayed
          */
         "dsSpinnerHiddenText": string;
+        /**
+          * Passed to the `tabindex` attribute of the `button` element.
+         */
+        "dsTabIndex"?: number;
         /**
           * Text to display inside the button.
           * @default ''
@@ -459,6 +624,11 @@ export namespace Components {
           * Optional line-clamp for description to restrict how many lines of text should be shown.
          */
         "dsDescriptionClamp"?: number;
+        /**
+          * If `dsDescription` is set, defines the maximum width of the description text. Default is 'none'.
+          * @default 'none'
+         */
+        "dsDescriptionMaxWidth": DsDescriptionMaxWidth;
         /**
           * Optional eyebrow text displayed above the heading
          */
@@ -5376,6 +5546,11 @@ export namespace Components {
           * Description text
          */
         "dsDescription"?: string;
+        /**
+          * If `dsDescription` is set, defines the maximum width of the description text. Default is 550px.
+          * @default '550px'
+         */
+        "dsDescriptionMaxWidth": DsDescriptionMaxWidth;
         /**
           * Assistive text for the dismiss button, hidden visually but read by screen readers
          */
@@ -6052,6 +6227,81 @@ export namespace Components {
         "getLanguage": () => Promise<Language>;
         "setLanguage": (language: Language) => Promise<void>;
     }
+    interface DsTab {
+        /**
+          * The name of the icon to display at the end of the tab.
+         */
+        "dsIconEnd"?: string;
+        /**
+          * The colour of the end icon.
+         */
+        "dsIconEndColour"?: (typeof colourNames)[number];
+        /**
+          * The name of the icon to display at the start of the tab.
+         */
+        "dsIconStart"?: string;
+        /**
+          * The ID of the tab.
+         */
+        "dsId": string;
+        /**
+          * The ID of the associated tab panel.
+         */
+        "dsTabPanelId": string;
+        /**
+          * The text content of the tab.
+         */
+        "dsText"?: string;
+        "setFocus": () => Promise<void>;
+    }
+    interface DsTablist {
+        /**
+          * The ARIA label for the tablist.
+         */
+        "dsAriaLabel"?: string;
+        /**
+          * The ID of the element that labels the tablist.
+         */
+        "dsAriaLabelledby"?: string;
+        /**
+          * For internal use.  Checks if scroll buttons should be shown. This method should be called whenever a new tab is connected to the tablist.
+         */
+        "tabConnected": () => Promise<void>;
+        /**
+          * For internal use.  Checks if scroll buttons should be shown. This method should be called whenever a tab is disconnected from the tablist.
+         */
+        "tabDisconnected": () => Promise<void>;
+    }
+    interface DsTabpanel {
+        /**
+          * The ID of the tab panel.
+         */
+        "dsId": string;
+        /**
+          * If true, adds paddings to the tab panel content.
+          * @default true
+         */
+        "dsPadded"?: boolean;
+        /**
+          * The ID of the associated tab.
+         */
+        "dsTabId": string;
+    }
+    interface DsTabs {
+        /**
+          * The ID of the currently active tab.
+         */
+        "dsCurrentTab": string;
+        /**
+          * The ID of the currently active tab panel.
+         */
+        "dsCurrentTabPanel": string;
+        /**
+          * The variant of the tabs component.
+          * @default 'container'
+         */
+        "dsVariant": 'container' | 'line';
+    }
     interface DsTag {
         /**
           * Passed to the `aria-hidden` attribute of the tag
@@ -6350,6 +6600,14 @@ export interface DsAccordionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsAccordionElement;
 }
+export interface DsActionListItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsActionListItemElement;
+}
+export interface DsActionMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsActionMenuElement;
+}
 export interface DsBackdropCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsBackdropElement;
@@ -6458,6 +6716,14 @@ export interface DsStoreCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsStoreElement;
 }
+export interface DsTabCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTabElement;
+}
+export interface DsTablistCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTablistElement;
+}
 export interface DsTextAreaCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTextAreaElement;
@@ -6484,6 +6750,59 @@ declare global {
         prototype: HTMLDsAccordionElement;
         new (): HTMLDsAccordionElement;
     };
+    interface HTMLDsActionListElement extends Components.DsActionList, HTMLStencilElement {
+    }
+    var HTMLDsActionListElement: {
+        prototype: HTMLDsActionListElement;
+        new (): HTMLDsActionListElement;
+    };
+    interface HTMLDsActionListDividerElement extends Components.DsActionListDivider, HTMLStencilElement {
+    }
+    var HTMLDsActionListDividerElement: {
+        prototype: HTMLDsActionListDividerElement;
+        new (): HTMLDsActionListDividerElement;
+    };
+    interface HTMLDsActionListGroupTitleElement extends Components.DsActionListGroupTitle, HTMLStencilElement {
+    }
+    var HTMLDsActionListGroupTitleElement: {
+        prototype: HTMLDsActionListGroupTitleElement;
+        new (): HTMLDsActionListGroupTitleElement;
+    };
+    interface HTMLDsActionListItemElementEventMap {
+        "dsSelect": DsActionListItemSelectEvent;
+    }
+    interface HTMLDsActionListItemElement extends Components.DsActionListItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsActionListItemElementEventMap>(type: K, listener: (this: HTMLDsActionListItemElement, ev: DsActionListItemCustomEvent<HTMLDsActionListItemElementEventMap[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 HTMLDsActionListItemElementEventMap>(type: K, listener: (this: HTMLDsActionListItemElement, ev: DsActionListItemCustomEvent<HTMLDsActionListItemElementEventMap[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 HTMLDsActionListItemElement: {
+        prototype: HTMLDsActionListItemElement;
+        new (): HTMLDsActionListItemElement;
+    };
+    interface HTMLDsActionMenuElementEventMap {
+        "dsOpen": DsActionMenuOpenEvent;
+        "dsClose": DsActionMenuCloseEvent;
+    }
+    interface HTMLDsActionMenuElement extends Components.DsActionMenu, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsActionMenuElementEventMap>(type: K, listener: (this: HTMLDsActionMenuElement, ev: DsActionMenuCustomEvent<HTMLDsActionMenuElementEventMap[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 HTMLDsActionMenuElementEventMap>(type: K, listener: (this: HTMLDsActionMenuElement, ev: DsActionMenuCustomEvent<HTMLDsActionMenuElementEventMap[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 HTMLDsActionMenuElement: {
+        prototype: HTMLDsActionMenuElement;
+        new (): HTMLDsActionMenuElement;
+    };
     interface HTMLDsAssistiveTextElement extends Components.DsAssistiveText, HTMLStencilElement {
     }
     var HTMLDsAssistiveTextElement: {
@@ -8836,6 +9155,53 @@ declare global {
         prototype: HTMLDsStoreElement;
         new (): HTMLDsStoreElement;
     };
+    interface HTMLDsTabElementEventMap {
+        "dsTabClick": DsTabClickEvent;
+        "dsTabFocus": DsTabFocusEvent;
+    }
+    interface HTMLDsTabElement extends Components.DsTab, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsTabElementEventMap>(type: K, listener: (this: HTMLDsTabElement, ev: DsTabCustomEvent<HTMLDsTabElementEventMap[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 HTMLDsTabElementEventMap>(type: K, listener: (this: HTMLDsTabElement, ev: DsTabCustomEvent<HTMLDsTabElementEventMap[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 HTMLDsTabElement: {
+        prototype: HTMLDsTabElement;
+        new (): HTMLDsTabElement;
+    };
+    interface HTMLDsTablistElementEventMap {
+        "dsTabChange": DsTabChangeEvent;
+    }
+    interface HTMLDsTablistElement extends Components.DsTablist, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsTablistElementEventMap>(type: K, listener: (this: HTMLDsTablistElement, ev: DsTablistCustomEvent<HTMLDsTablistElementEventMap[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 HTMLDsTablistElementEventMap>(type: K, listener: (this: HTMLDsTablistElement, ev: DsTablistCustomEvent<HTMLDsTablistElementEventMap[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 HTMLDsTablistElement: {
+        prototype: HTMLDsTablistElement;
+        new (): HTMLDsTablistElement;
+    };
+    interface HTMLDsTabpanelElement extends Components.DsTabpanel, HTMLStencilElement {
+    }
+    var HTMLDsTabpanelElement: {
+        prototype: HTMLDsTabpanelElement;
+        new (): HTMLDsTabpanelElement;
+    };
+    interface HTMLDsTabsElement extends Components.DsTabs, HTMLStencilElement {
+    }
+    var HTMLDsTabsElement: {
+        prototype: HTMLDsTabsElement;
+        new (): HTMLDsTabsElement;
+    };
     interface HTMLDsTagElement extends Components.DsTag, HTMLStencilElement {
     }
     var HTMLDsTagElement: {
@@ -8903,6 +9269,11 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "ds-accordion": HTMLDsAccordionElement;
+        "ds-action-list": HTMLDsActionListElement;
+        "ds-action-list-divider": HTMLDsActionListDividerElement;
+        "ds-action-list-group-title": HTMLDsActionListGroupTitleElement;
+        "ds-action-list-item": HTMLDsActionListItemElement;
+        "ds-action-menu": HTMLDsActionMenuElement;
         "ds-assistive-text": HTMLDsAssistiveTextElement;
         "ds-backdrop": HTMLDsBackdropElement;
         "ds-badge": HTMLDsBadgeElement;
@@ -9231,6 +9602,10 @@ declare global {
         "ds-select-native": HTMLDsSelectNativeElement;
         "ds-spinner": HTMLDsSpinnerElement;
         "ds-store": HTMLDsStoreElement;
+        "ds-tab": HTMLDsTabElement;
+        "ds-tablist": HTMLDsTablistElement;
+        "ds-tabpanel": HTMLDsTabpanelElement;
+        "ds-tabs": HTMLDsTabsElement;
         "ds-tag": HTMLDsTagElement;
         "ds-tag-group": HTMLDsTagGroupElement;
         "ds-text-area": HTMLDsTextAreaElement;
@@ -9328,6 +9703,146 @@ declare namespace LocalJSX {
          */
         "onDsToggle"?: (event: DsAccordionCustomEvent<DsAccordionToggleEvent>) => void;
     }
+    interface DsActionList {
+    }
+    interface DsActionListDivider {
+    }
+    interface DsActionListGroupTitle {
+        /**
+          * ID applied to the title span, used by the parent ds-action-list for aria-labelledby.
+          * @default groupTitleIdGenerator.next().value as string
+         */
+        "dsId"?: string;
+        /**
+          * The visible group title text.
+         */
+        "dsTitle": string;
+    }
+    interface DsActionListItem {
+        /**
+          * When false, selecting a single-select item will not close the menu. Has no effect on action, action-danger, or multi-select variants. Defaults to true.
+          * @default true
+         */
+        "dsCloseOnSelect"?: boolean;
+        /**
+          * Optional secondary description text rendered below the label.
+         */
+        "dsDescription"?: string;
+        /**
+          * When true, the item is disabled and cannot be interacted with.
+          * @default false
+         */
+        "dsDisabled"?: boolean;
+        /**
+          * Icon name to display. Not applicable to multi-select variant. When any item in a sibling group has an icon, other items without icons are automatically indented via `dsIndented`.
+         */
+        "dsIcon"?: string;
+        /**
+          * Unique identifier for the item. Emitted in the dsSelect event payload.
+          * @default actionListItemIdGenerator.next().value as string
+         */
+        "dsId"?: string;
+        /**
+          * When true, adds left padding to align this item with siblings that have icons. Automatically set by the parent `ds-action-list` when needed.
+          * @default false
+         */
+        "dsIndented"?: boolean;
+        /**
+          * Visible label for the item.
+         */
+        "dsLabel": string;
+        /**
+          * Selected state for single-select and multi-select variants.
+          * @default false
+         */
+        "dsSelected"?: boolean;
+        /**
+          * When true, the item is visible and focusable but cannot be activated. Unlike `dsDisabled`, the item retains its normal appearance except the description text is rendered in the attention color to signal unavailability.
+          * @default false
+         */
+        "dsUnavailable"?: boolean;
+        /**
+          * Variant of the item, which determines ARIA role and visual appearance: - "action": standard action, role="menuitem", closes menu on select - "action-danger": destructive action, role="menuitem", closes menu on select - "single-select": radio selection, role="menuitemradio", closes menu on select - "multi-select": checkbox selection, role="menuitemcheckbox", menu stays open
+          * @default 'action'
+         */
+        "dsVariant"?: DsActionListItemVariant;
+        /**
+          * Emitted when the item is activated (click or Enter/Space).
+         */
+        "onDsSelect"?: (event: DsActionListItemCustomEvent<DsActionListItemSelectEvent>) => void;
+    }
+    interface DsActionMenu {
+        /**
+          * Alignment of the menu relative to the trigger button. - "start": menu left edge aligns with button left edge - "center": menu center aligns with button center - "end": menu right edge aligns with button right edge
+          * @default 'start'
+         */
+        "dsAlign"?: 'start' | 'center' | 'end';
+        /**
+          * Accessible label for the trigger button. Required when using `dsIconOnly=true` since there is no visible text to announce. Forwarded as `aria-label` to the internal `ds-button`.
+         */
+        "dsAriaLabel"?: string;
+        /**
+          * Colour of the trigger button.
+          * @default 'blue'
+         */
+        "dsButtonColour"?: 'blue' | 'black' | 'white' | 'danger';
+        /**
+          * Size of the trigger button.
+          * @default 'medium'
+         */
+        "dsButtonSize"?: 'small' | 'medium';
+        /**
+          * Visible label on the trigger button.
+          * @default ''
+         */
+        "dsButtonText"?: string;
+        /**
+          * Variant of the trigger button.
+          * @default 'secondary'
+         */
+        "dsButtonVariant"?: 'primary' | 'secondary' | 'supplementary';
+        /**
+          * When true, the trigger button is disabled and the menu cannot be opened.
+          * @default false
+         */
+        "dsDisabled"?: boolean;
+        /**
+          * Icon name for the trigger button. When not icon-only, a chevron is appended automatically.
+          * @default ''
+         */
+        "dsIcon"?: string;
+        /**
+          * When true, renders an icon-only button as the trigger. The icon defaults to a vertical three-dot (more-vert) icon unless `dsIcon` is set.
+          * @default false
+         */
+        "dsIconOnly"?: boolean;
+        /**
+          * ID for the trigger button element. Also used to derive the CSS anchor-name and aria-labelledby.
+          * @default actionMenuIdGenerator.next().value as string
+         */
+        "dsId"?: string;
+        /**
+          * CSS max-height for the menu (e.g. "300px"). When set, the menu becomes scrollable.
+         */
+        "dsMenuMaxHeight"?: string;
+        /**
+          * Custom CSS width for the menu (e.g. "400px", "20rem"). When undefined, the menu grows to fit its content with a minimum of 288px. Note: the menu uses `position: fixed`, so percentage values (e.g. "100%") are relative to the viewport, not the trigger button.
+         */
+        "dsMenuWidth"?: string;
+        /**
+          * Where the menu opens relative to the trigger. - "bottom": always opens below - "top": always opens above - "auto": browser uses CSS position-try-fallbacks to flip automatically when near viewport edge
+          * @default 'auto'
+         */
+        "dsPlacement"?: 'bottom' | 'top' | 'auto';
+        /**
+          * Emitted when the menu closes.
+         */
+        "onDsClose"?: (event: DsActionMenuCustomEvent<DsActionMenuCloseEvent>) => void;
+        /**
+          * Emitted when the menu opens.
+         */
+        "onDsOpen"?: (event: DsActionMenuCustomEvent<DsActionMenuOpenEvent>) => void;
+    }
     interface DsAssistiveText {
         /**
           * Passed to the `id` attribute of the `small` element.
@@ -9526,6 +10041,11 @@ declare namespace LocalJSX {
           * Passed to the `aria-haspopup` attribute of the `button` element.
          */
         "dsAriaHaspopup"?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+        /**
+          * Passed to the `aria-hidden` attribute of the `button` element.
+          * @default false
+         */
+        "dsAriaHidden"?: boolean;
         /**
           * Passed to the `aria-label` attribute of the `button` element.
          */
@@ -9621,6 +10141,10 @@ declare namespace LocalJSX {
           * Information for screen readers when spinner is displayed
          */
         "dsSpinnerHiddenText"?: string;
+        /**
+          * Passed to the `tabindex` attribute of the `button` element.
+         */
+        "dsTabIndex"?: number;
         /**
           * Text to display inside the button.
           * @default ''
@@ -9656,6 +10180,11 @@ declare namespace LocalJSX {
           * Optional line-clamp for description to restrict how many lines of text should be shown.
          */
         "dsDescriptionClamp"?: number;
+        /**
+          * If `dsDescription` is set, defines the maximum width of the description text. Default is 'none'.
+          * @default 'none'
+         */
+        "dsDescriptionMaxWidth"?: DsDescriptionMaxWidth;
         /**
           * Optional eyebrow text displayed above the heading
          */
@@ -14684,6 +15213,11 @@ declare namespace LocalJSX {
           * Description text
          */
         "dsDescription"?: string;
+        /**
+          * If `dsDescription` is set, defines the maximum width of the description text. Default is 550px.
+          * @default '550px'
+         */
+        "dsDescriptionMaxWidth"?: DsDescriptionMaxWidth;
         /**
           * Assistive text for the dismiss button, hidden visually but read by screen readers
          */
@@ -15434,6 +15968,84 @@ declare namespace LocalJSX {
         "dsLanguage"?: Language;
         "onDsLanguageChange"?: (event: DsStoreCustomEvent<Language>) => void;
     }
+    interface DsTab {
+        /**
+          * The name of the icon to display at the end of the tab.
+         */
+        "dsIconEnd"?: string;
+        /**
+          * The colour of the end icon.
+         */
+        "dsIconEndColour"?: (typeof colourNames)[number];
+        /**
+          * The name of the icon to display at the start of the tab.
+         */
+        "dsIconStart"?: string;
+        /**
+          * The ID of the tab.
+         */
+        "dsId": string;
+        /**
+          * The ID of the associated tab panel.
+         */
+        "dsTabPanelId": string;
+        /**
+          * The text content of the tab.
+         */
+        "dsText"?: string;
+        /**
+          * Emitted when the tab is clicked and should become active.
+         */
+        "onDsTabClick"?: (event: DsTabCustomEvent<DsTabClickEvent>) => void;
+        /**
+          * Emitted when the tab receives focus.
+         */
+        "onDsTabFocus"?: (event: DsTabCustomEvent<DsTabFocusEvent>) => void;
+    }
+    interface DsTablist {
+        /**
+          * The ARIA label for the tablist.
+         */
+        "dsAriaLabel"?: string;
+        /**
+          * The ID of the element that labels the tablist.
+         */
+        "dsAriaLabelledby"?: string;
+        /**
+          * Emitted when a tab is clicked and the active tab should be changed.
+         */
+        "onDsTabChange"?: (event: DsTablistCustomEvent<DsTabChangeEvent>) => void;
+    }
+    interface DsTabpanel {
+        /**
+          * The ID of the tab panel.
+         */
+        "dsId": string;
+        /**
+          * If true, adds paddings to the tab panel content.
+          * @default true
+         */
+        "dsPadded"?: boolean;
+        /**
+          * The ID of the associated tab.
+         */
+        "dsTabId": string;
+    }
+    interface DsTabs {
+        /**
+          * The ID of the currently active tab.
+         */
+        "dsCurrentTab": string;
+        /**
+          * The ID of the currently active tab panel.
+         */
+        "dsCurrentTabPanel": string;
+        /**
+          * The variant of the tabs component.
+          * @default 'container'
+         */
+        "dsVariant"?: 'container' | 'line';
+    }
     interface DsTag {
         /**
           * Passed to the `aria-hidden` attribute of the tag
@@ -15749,6 +16361,11 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "ds-accordion": DsAccordion;
+        "ds-action-list": DsActionList;
+        "ds-action-list-divider": DsActionListDivider;
+        "ds-action-list-group-title": DsActionListGroupTitle;
+        "ds-action-list-item": DsActionListItem;
+        "ds-action-menu": DsActionMenu;
         "ds-assistive-text": DsAssistiveText;
         "ds-backdrop": DsBackdrop;
         "ds-badge": DsBadge;
@@ -16077,6 +16694,10 @@ declare namespace LocalJSX {
         "ds-select-native": DsSelectNative;
         "ds-spinner": DsSpinner;
         "ds-store": DsStore;
+        "ds-tab": DsTab;
+        "ds-tablist": DsTablist;
+        "ds-tabpanel": DsTabpanel;
+        "ds-tabs": DsTabs;
         "ds-tag": DsTag;
         "ds-tag-group": DsTagGroup;
         "ds-text-area": DsTextArea;
@@ -16090,6 +16711,11 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "ds-accordion": LocalJSX.DsAccordion & JSXBase.HTMLAttributes<HTMLDsAccordionElement>;
+            "ds-action-list": LocalJSX.DsActionList & JSXBase.HTMLAttributes<HTMLDsActionListElement>;
+            "ds-action-list-divider": LocalJSX.DsActionListDivider & JSXBase.HTMLAttributes<HTMLDsActionListDividerElement>;
+            "ds-action-list-group-title": LocalJSX.DsActionListGroupTitle & JSXBase.HTMLAttributes<HTMLDsActionListGroupTitleElement>;
+            "ds-action-list-item": LocalJSX.DsActionListItem & JSXBase.HTMLAttributes<HTMLDsActionListItemElement>;
+            "ds-action-menu": LocalJSX.DsActionMenu & JSXBase.HTMLAttributes<HTMLDsActionMenuElement>;
             "ds-assistive-text": LocalJSX.DsAssistiveText & JSXBase.HTMLAttributes<HTMLDsAssistiveTextElement>;
             "ds-backdrop": LocalJSX.DsBackdrop & JSXBase.HTMLAttributes<HTMLDsBackdropElement>;
             "ds-badge": LocalJSX.DsBadge & JSXBase.HTMLAttributes<HTMLDsBadgeElement>;
@@ -16456,6 +17082,10 @@ declare module "@stencil/core" {
             "ds-select-native": LocalJSX.DsSelectNative & JSXBase.HTMLAttributes<HTMLDsSelectNativeElement>;
             "ds-spinner": LocalJSX.DsSpinner & JSXBase.HTMLAttributes<HTMLDsSpinnerElement>;
             "ds-store": LocalJSX.DsStore & JSXBase.HTMLAttributes<HTMLDsStoreElement>;
+            "ds-tab": LocalJSX.DsTab & JSXBase.HTMLAttributes<HTMLDsTabElement>;
+            "ds-tablist": LocalJSX.DsTablist & JSXBase.HTMLAttributes<HTMLDsTablistElement>;
+            "ds-tabpanel": LocalJSX.DsTabpanel & JSXBase.HTMLAttributes<HTMLDsTabpanelElement>;
+            "ds-tabs": LocalJSX.DsTabs & JSXBase.HTMLAttributes<HTMLDsTabsElement>;
             "ds-tag": LocalJSX.DsTag & JSXBase.HTMLAttributes<HTMLDsTagElement>;
             "ds-tag-group": LocalJSX.DsTagGroup & JSXBase.HTMLAttributes<HTMLDsTagGroupElement>;
             "ds-text-area": LocalJSX.DsTextArea & JSXBase.HTMLAttributes<HTMLDsTextAreaElement>;