@uh-design-system/component-library 1.6.0 → 1.7.0

package/dist/types/components.d.ts

@@ -5729,22 +5729,31 @@ export namespace Components {
          */
         "dsAspectRatio": string;
         /**
-          * Whether the media should autoplay (video/audio only).
+          * Whether the media should autoplay (video only).
           * @default false
          */
         "dsAutoplay"?: boolean;
+        /**
+          * Caption text displayed below the media. Renders a <figcaption> element when provided.
+         */
+        "dsCaptionText"?: string;
+        /**
+          * Whether to show native playback controls (video only).
+          * @default true
+         */
+        "dsControls"?: boolean;
         /**
           * Fluid size for taking full width or height of the container.
           * @default false
          */
         "dsFluid"?: boolean;
         /**
-          * Whether the media should loop (video/audio only).
+          * Whether the media should loop (video only).
           * @default false
          */
         "dsLoop"?: boolean;
         /**
-          * Whether the media should be muted (video/audio only).
+          * Whether the media should be muted (video only).
           * @default true
          */
         "dsMuted"?: boolean;
@@ -5753,15 +5762,23 @@ export namespace Components {
          */
         "dsPoster"?: string;
         /**
-          * Source URL for the media (image, video, audio, or YouTube).
+          * Sizes attribute for responsive images (e.g., '(max-width: 600px) 100vw, 50vw'). Only applies when dsType is 'image'. Used together with dsSrcset.
+         */
+        "dsSizes"?: string;
+        /**
+          * Source URL for the media (image, video, or YouTube).
          */
         "dsSrc": string;
         /**
-          * Type of media to display: 'image', 'video', 'audio', or 'youtube'.
+          * Srcset attribute for responsive images (e.g., 'img-800.jpg 800w, img-1200.jpg 1200w'). Only applies when dsType is 'image'.
+         */
+        "dsSrcset"?: string;
+        /**
+          * Type of media to display: 'image', 'video', or 'youtube'.
          */
         "dsType": MediaType;
         /**
-          * Whether the image should use lazy loading or not.
+          * Whether the image should use lazy loading.
           * @default true
          */
         "dsUseLazy"?: boolean;
@@ -6575,6 +6592,153 @@ export namespace Components {
          */
         "dsUseRoleAlert": boolean;
     }
+    interface DsStep {
+        /**
+          * Passed to the `dsFullWidth` property of the `ds-step-base` element.
+          * @default false
+         */
+        "dsFullWidth": boolean;
+        /**
+          * Ordinal number of the step.
+         */
+        "dsOrdinal": number;
+        /**
+          * Passed to the `dsOrientation` property of the `ds-step-base` element.
+         */
+        "dsOrientation"?: 'horizontal' | 'vertical';
+        /**
+          * Phase of the step.
+          * @default 'static'
+         */
+        "dsPhase": 'static' | 'incomplete' | 'current' | 'complete';
+    }
+    interface DsStepBase {
+        /**
+          * If true, the step will take the full width of its container. Can be used to achieve same size for all steps in a horizontal stepper.
+          * @default false
+         */
+        "dsFullWidth": boolean;
+        /**
+          * Orientation of the step bullet and line. Should match the `dsOrientation` property of the `ds-steps` component.
+          * @default 'vertical'
+         */
+        "dsOrientation": 'horizontal' | 'vertical';
+    }
+    interface DsStepBullet {
+        /**
+          * If true, a line will be shown.
+          * @default true
+         */
+        "dsShowLine": boolean;
+        /**
+          * Passed to the `dsSize` property of the `ds-step-bullet-base` element.
+          * @default 'medium'
+         */
+        "dsSize": 'small' | 'medium';
+    }
+    interface DsStepBulletBase {
+        /**
+          * Border colour of the step bullet.
+         */
+        "dsBorderColour"?: string;
+        /**
+          * Width of the border of the step bullet.
+          * @default 'none'
+         */
+        "dsBorderWidth": 'none' | 'hairline' | 'thin' | 'thick' | 'xThick';
+        /**
+          * Fill colour of the step bullet.
+         */
+        "dsFillColour"?: string;
+        /**
+          * Name of the icon to display inside the step bullet.
+         */
+        "dsIcon"?: string;
+        /**
+          * Colour of the icon inside the step bullet.
+         */
+        "dsIconColour"?: string;
+        /**
+          * Colour of the line.
+         */
+        "dsLineColour"?: string;
+        /**
+          * Width of the line.
+          * @default 'none'
+         */
+        "dsLineWidth": 'none' | 'hairline' | 'thin' | 'thick' | 'xThick';
+        /**
+          * Orientation of the step. Should match the `dsOrientation` property of the `ds-steps` component.
+          * @default 'vertical'
+         */
+        "dsOrientation": 'horizontal' | 'vertical';
+        /**
+          * Size of the step bullet.
+          * @default 'medium'
+         */
+        "dsSize": 'small' | 'medium';
+        /**
+          * Text to display inside the step bullet.
+         */
+        "dsText"?: string;
+        /**
+          * Colour of the text inside the step bullet.
+         */
+        "dsTextColour"?: string;
+    }
+    interface DsStepContent {
+        /**
+          * Passed to the `dsFullWidth` property of the `ds-step-content-base` element.
+          * @default false
+         */
+        "dsFullWidth": boolean;
+        /**
+          * Passed to the `dsHeading` property of the `ds-step-content-base` element.
+          * @default ''
+         */
+        "dsHeading": string;
+    }
+    interface DsStepContentBase {
+        /**
+          * Passed to the `aria-current` attribute of the heading element. Should be set to "step" for the current step.
+          * @default undefined
+         */
+        "dsAriaCurrent": 'step' | undefined;
+        /**
+          * If true, the step content takes the full width of its container.
+          * @default false
+         */
+        "dsFullWidth": boolean;
+        /**
+          * Heading text for the step content.
+          * @default ''
+         */
+        "dsHeading": string;
+        /**
+          * Colour of the heading text.
+         */
+        "dsHeadingColour"?: string;
+        /**
+          * Assistive text for screen readers. Provide additional context for the step, e.g., a status text.
+         */
+        "dsHiddenAssistiveText"?: string;
+        /**
+          * Ordinal number of the step.
+         */
+        "dsOrdinal"?: number;
+        /**
+          * Orientation of the step. Should match the `dsOrientation` property of the `ds-steps` component.
+          * @default 'vertical'
+         */
+        "dsOrientation": 'horizontal' | 'vertical';
+    }
+    interface DsSteps {
+        /**
+          * Orientation of the steps.
+          * @default 'vertical'
+         */
+        "dsOrientation": 'horizontal' | 'vertical';
+    }
     interface DsStore {
         /**
           * @default 'en'
@@ -6588,6 +6752,10 @@ export namespace Components {
           * The name of the icon to display at the end of the tab.
          */
         "dsIconEnd"?: string;
+        /**
+          * The aria-label for the end icon.
+         */
+        "dsIconEndAriaLabel"?: string;
         /**
           * The colour of the end icon.
          */
@@ -6596,6 +6764,10 @@ export namespace Components {
           * The name of the icon to display at the start of the tab.
          */
         "dsIconStart"?: string;
+        /**
+          * The aria-label for the start icon.
+         */
+        "dsIconStartAriaLabel"?: string;
         /**
           * The ID of the tab.
          */
@@ -9608,6 +9780,48 @@ declare global {
         prototype: HTMLDsSpinnerElement;
         new (): HTMLDsSpinnerElement;
     };
+    interface HTMLDsStepElement extends Components.DsStep, HTMLStencilElement {
+    }
+    var HTMLDsStepElement: {
+        prototype: HTMLDsStepElement;
+        new (): HTMLDsStepElement;
+    };
+    interface HTMLDsStepBaseElement extends Components.DsStepBase, HTMLStencilElement {
+    }
+    var HTMLDsStepBaseElement: {
+        prototype: HTMLDsStepBaseElement;
+        new (): HTMLDsStepBaseElement;
+    };
+    interface HTMLDsStepBulletElement extends Components.DsStepBullet, HTMLStencilElement {
+    }
+    var HTMLDsStepBulletElement: {
+        prototype: HTMLDsStepBulletElement;
+        new (): HTMLDsStepBulletElement;
+    };
+    interface HTMLDsStepBulletBaseElement extends Components.DsStepBulletBase, HTMLStencilElement {
+    }
+    var HTMLDsStepBulletBaseElement: {
+        prototype: HTMLDsStepBulletBaseElement;
+        new (): HTMLDsStepBulletBaseElement;
+    };
+    interface HTMLDsStepContentElement extends Components.DsStepContent, HTMLStencilElement {
+    }
+    var HTMLDsStepContentElement: {
+        prototype: HTMLDsStepContentElement;
+        new (): HTMLDsStepContentElement;
+    };
+    interface HTMLDsStepContentBaseElement extends Components.DsStepContentBase, HTMLStencilElement {
+    }
+    var HTMLDsStepContentBaseElement: {
+        prototype: HTMLDsStepContentBaseElement;
+        new (): HTMLDsStepContentBaseElement;
+    };
+    interface HTMLDsStepsElement extends Components.DsSteps, HTMLStencilElement {
+    }
+    var HTMLDsStepsElement: {
+        prototype: HTMLDsStepsElement;
+        new (): HTMLDsStepsElement;
+    };
     interface HTMLDsStoreElementEventMap {
         "dsLanguageChange": Language;
     }
@@ -10076,6 +10290,13 @@ declare global {
         "ds-select": HTMLDsSelectElement;
         "ds-select-native": HTMLDsSelectNativeElement;
         "ds-spinner": HTMLDsSpinnerElement;
+        "ds-step": HTMLDsStepElement;
+        "ds-step-base": HTMLDsStepBaseElement;
+        "ds-step-bullet": HTMLDsStepBulletElement;
+        "ds-step-bullet-base": HTMLDsStepBulletBaseElement;
+        "ds-step-content": HTMLDsStepContentElement;
+        "ds-step-content-base": HTMLDsStepContentBaseElement;
+        "ds-steps": HTMLDsStepsElement;
         "ds-store": HTMLDsStoreElement;
         "ds-tab": HTMLDsTabElement;
         "ds-tablist": HTMLDsTablistElement;
@@ -15972,22 +16193,31 @@ declare namespace LocalJSX {
          */
         "dsAspectRatio"?: string;
         /**
-          * Whether the media should autoplay (video/audio only).
+          * Whether the media should autoplay (video only).
           * @default false
          */
         "dsAutoplay"?: boolean;
+        /**
+          * Caption text displayed below the media. Renders a <figcaption> element when provided.
+         */
+        "dsCaptionText"?: string;
+        /**
+          * Whether to show native playback controls (video only).
+          * @default true
+         */
+        "dsControls"?: boolean;
         /**
           * Fluid size for taking full width or height of the container.
           * @default false
          */
         "dsFluid"?: boolean;
         /**
-          * Whether the media should loop (video/audio only).
+          * Whether the media should loop (video only).
           * @default false
          */
         "dsLoop"?: boolean;
         /**
-          * Whether the media should be muted (video/audio only).
+          * Whether the media should be muted (video only).
           * @default true
          */
         "dsMuted"?: boolean;
@@ -15996,15 +16226,23 @@ declare namespace LocalJSX {
          */
         "dsPoster"?: string;
         /**
-          * Source URL for the media (image, video, audio, or YouTube).
+          * Sizes attribute for responsive images (e.g., '(max-width: 600px) 100vw, 50vw'). Only applies when dsType is 'image'. Used together with dsSrcset.
+         */
+        "dsSizes"?: string;
+        /**
+          * Source URL for the media (image, video, or YouTube).
          */
         "dsSrc": string;
         /**
-          * Type of media to display: 'image', 'video', 'audio', or 'youtube'.
+          * Srcset attribute for responsive images (e.g., 'img-800.jpg 800w, img-1200.jpg 1200w'). Only applies when dsType is 'image'.
+         */
+        "dsSrcset"?: string;
+        /**
+          * Type of media to display: 'image', 'video', or 'youtube'.
          */
         "dsType": MediaType;
         /**
-          * Whether the image should use lazy loading or not.
+          * Whether the image should use lazy loading.
           * @default true
          */
         "dsUseLazy"?: boolean;
@@ -16921,6 +17159,153 @@ declare namespace LocalJSX {
          */
         "dsUseRoleAlert"?: boolean;
     }
+    interface DsStep {
+        /**
+          * Passed to the `dsFullWidth` property of the `ds-step-base` element.
+          * @default false
+         */
+        "dsFullWidth"?: boolean;
+        /**
+          * Ordinal number of the step.
+         */
+        "dsOrdinal": number;
+        /**
+          * Passed to the `dsOrientation` property of the `ds-step-base` element.
+         */
+        "dsOrientation"?: 'horizontal' | 'vertical';
+        /**
+          * Phase of the step.
+          * @default 'static'
+         */
+        "dsPhase"?: 'static' | 'incomplete' | 'current' | 'complete';
+    }
+    interface DsStepBase {
+        /**
+          * If true, the step will take the full width of its container. Can be used to achieve same size for all steps in a horizontal stepper.
+          * @default false
+         */
+        "dsFullWidth"?: boolean;
+        /**
+          * Orientation of the step bullet and line. Should match the `dsOrientation` property of the `ds-steps` component.
+          * @default 'vertical'
+         */
+        "dsOrientation"?: 'horizontal' | 'vertical';
+    }
+    interface DsStepBullet {
+        /**
+          * If true, a line will be shown.
+          * @default true
+         */
+        "dsShowLine"?: boolean;
+        /**
+          * Passed to the `dsSize` property of the `ds-step-bullet-base` element.
+          * @default 'medium'
+         */
+        "dsSize"?: 'small' | 'medium';
+    }
+    interface DsStepBulletBase {
+        /**
+          * Border colour of the step bullet.
+         */
+        "dsBorderColour"?: string;
+        /**
+          * Width of the border of the step bullet.
+          * @default 'none'
+         */
+        "dsBorderWidth"?: 'none' | 'hairline' | 'thin' | 'thick' | 'xThick';
+        /**
+          * Fill colour of the step bullet.
+         */
+        "dsFillColour"?: string;
+        /**
+          * Name of the icon to display inside the step bullet.
+         */
+        "dsIcon"?: string;
+        /**
+          * Colour of the icon inside the step bullet.
+         */
+        "dsIconColour"?: string;
+        /**
+          * Colour of the line.
+         */
+        "dsLineColour"?: string;
+        /**
+          * Width of the line.
+          * @default 'none'
+         */
+        "dsLineWidth"?: 'none' | 'hairline' | 'thin' | 'thick' | 'xThick';
+        /**
+          * Orientation of the step. Should match the `dsOrientation` property of the `ds-steps` component.
+          * @default 'vertical'
+         */
+        "dsOrientation"?: 'horizontal' | 'vertical';
+        /**
+          * Size of the step bullet.
+          * @default 'medium'
+         */
+        "dsSize"?: 'small' | 'medium';
+        /**
+          * Text to display inside the step bullet.
+         */
+        "dsText"?: string;
+        /**
+          * Colour of the text inside the step bullet.
+         */
+        "dsTextColour"?: string;
+    }
+    interface DsStepContent {
+        /**
+          * Passed to the `dsFullWidth` property of the `ds-step-content-base` element.
+          * @default false
+         */
+        "dsFullWidth"?: boolean;
+        /**
+          * Passed to the `dsHeading` property of the `ds-step-content-base` element.
+          * @default ''
+         */
+        "dsHeading"?: string;
+    }
+    interface DsStepContentBase {
+        /**
+          * Passed to the `aria-current` attribute of the heading element. Should be set to "step" for the current step.
+          * @default undefined
+         */
+        "dsAriaCurrent"?: 'step' | undefined;
+        /**
+          * If true, the step content takes the full width of its container.
+          * @default false
+         */
+        "dsFullWidth"?: boolean;
+        /**
+          * Heading text for the step content.
+          * @default ''
+         */
+        "dsHeading"?: string;
+        /**
+          * Colour of the heading text.
+         */
+        "dsHeadingColour"?: string;
+        /**
+          * Assistive text for screen readers. Provide additional context for the step, e.g., a status text.
+         */
+        "dsHiddenAssistiveText"?: string;
+        /**
+          * Ordinal number of the step.
+         */
+        "dsOrdinal"?: number;
+        /**
+          * Orientation of the step. Should match the `dsOrientation` property of the `ds-steps` component.
+          * @default 'vertical'
+         */
+        "dsOrientation"?: 'horizontal' | 'vertical';
+    }
+    interface DsSteps {
+        /**
+          * Orientation of the steps.
+          * @default 'vertical'
+         */
+        "dsOrientation"?: 'horizontal' | 'vertical';
+    }
     interface DsStore {
         /**
           * @default 'en'
@@ -16933,6 +17318,10 @@ declare namespace LocalJSX {
           * The name of the icon to display at the end of the tab.
          */
         "dsIconEnd"?: string;
+        /**
+          * The aria-label for the end icon.
+         */
+        "dsIconEndAriaLabel"?: string;
         /**
           * The colour of the end icon.
          */
@@ -16941,6 +17330,10 @@ declare namespace LocalJSX {
           * The name of the icon to display at the start of the tab.
          */
         "dsIconStart"?: string;
+        /**
+          * The aria-label for the start icon.
+         */
+        "dsIconStartAriaLabel"?: string;
         /**
           * The ID of the tab.
          */
@@ -19821,9 +20214,13 @@ declare namespace LocalJSX {
         "dsAutoplay": boolean;
         "dsLoop": boolean;
         "dsMuted": boolean;
+        "dsControls": boolean;
         "dsUseLazy": boolean;
         "dsAspectRatio": string;
         "dsFluid": boolean;
+        "dsCaptionText": string;
+        "dsSrcset": string;
+        "dsSizes": string;
     }
     interface DsModalAttributes {
         "dsId": string;
@@ -20006,6 +20403,49 @@ declare namespace LocalJSX {
         "dsUseAriaLive": boolean;
         "dsHiddenAssistiveText": string;
     }
+    interface DsStepAttributes {
+        "dsOrientation": 'horizontal' | 'vertical';
+        "dsPhase": 'static' | 'incomplete' | 'current' | 'complete';
+        "dsOrdinal": number;
+        "dsFullWidth": boolean;
+    }
+    interface DsStepBaseAttributes {
+        "dsOrientation": 'horizontal' | 'vertical';
+        "dsFullWidth": boolean;
+    }
+    interface DsStepBulletAttributes {
+        "dsSize": 'small' | 'medium';
+        "dsShowLine": boolean;
+    }
+    interface DsStepBulletBaseAttributes {
+        "dsOrientation": 'horizontal' | 'vertical';
+        "dsSize": 'small' | 'medium';
+        "dsFillColour": string;
+        "dsBorderColour": string;
+        "dsBorderWidth": 'none' | 'hairline' | 'thin' | 'thick' | 'xThick';
+        "dsLineColour": string;
+        "dsLineWidth": 'none' | 'hairline' | 'thin' | 'thick' | 'xThick';
+        "dsIcon": string;
+        "dsIconColour": string;
+        "dsText": string;
+        "dsTextColour": string;
+    }
+    interface DsStepContentAttributes {
+        "dsHeading": string;
+        "dsFullWidth": boolean;
+    }
+    interface DsStepContentBaseAttributes {
+        "dsOrientation": 'horizontal' | 'vertical';
+        "dsHeading": string;
+        "dsHeadingColour": string;
+        "dsOrdinal": number;
+        "dsHiddenAssistiveText": string;
+        "dsFullWidth": boolean;
+        "dsAriaCurrent": 'step' | undefined;
+    }
+    interface DsStepsAttributes {
+        "dsOrientation": 'horizontal' | 'vertical';
+    }
     interface DsStoreAttributes {
         "dsLanguage": Language;
     }
@@ -20014,7 +20454,9 @@ declare namespace LocalJSX {
         "dsTabPanelId": string;
         "dsText": string;
         "dsIconStart": string;
+        "dsIconStartAriaLabel": string;
         "dsIconEnd": string;
+        "dsIconEndAriaLabel": string;
         "dsIconEndColour": (typeof colourNames)[number];
     }
     interface DsTablistAttributes {
@@ -20446,6 +20888,13 @@ declare namespace LocalJSX {
         "ds-select": Omit<DsSelect, keyof DsSelectAttributes> & { [K in keyof DsSelect & keyof DsSelectAttributes]?: DsSelect[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `attr:${K}`]?: DsSelectAttributes[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `prop:${K}`]?: DsSelect[K] };
         "ds-select-native": Omit<DsSelectNative, keyof DsSelectNativeAttributes> & { [K in keyof DsSelectNative & keyof DsSelectNativeAttributes]?: DsSelectNative[K] } & { [K in keyof DsSelectNative & keyof DsSelectNativeAttributes as `attr:${K}`]?: DsSelectNativeAttributes[K] } & { [K in keyof DsSelectNative & keyof DsSelectNativeAttributes as `prop:${K}`]?: DsSelectNative[K] };
         "ds-spinner": Omit<DsSpinner, keyof DsSpinnerAttributes> & { [K in keyof DsSpinner & keyof DsSpinnerAttributes]?: DsSpinner[K] } & { [K in keyof DsSpinner & keyof DsSpinnerAttributes as `attr:${K}`]?: DsSpinnerAttributes[K] } & { [K in keyof DsSpinner & keyof DsSpinnerAttributes as `prop:${K}`]?: DsSpinner[K] };
+        "ds-step": Omit<DsStep, keyof DsStepAttributes> & { [K in keyof DsStep & keyof DsStepAttributes]?: DsStep[K] } & { [K in keyof DsStep & keyof DsStepAttributes as `attr:${K}`]?: DsStepAttributes[K] } & { [K in keyof DsStep & keyof DsStepAttributes as `prop:${K}`]?: DsStep[K] } & OneOf<"dsOrdinal", DsStep["dsOrdinal"], DsStepAttributes["dsOrdinal"]>;
+        "ds-step-base": Omit<DsStepBase, keyof DsStepBaseAttributes> & { [K in keyof DsStepBase & keyof DsStepBaseAttributes]?: DsStepBase[K] } & { [K in keyof DsStepBase & keyof DsStepBaseAttributes as `attr:${K}`]?: DsStepBaseAttributes[K] } & { [K in keyof DsStepBase & keyof DsStepBaseAttributes as `prop:${K}`]?: DsStepBase[K] };
+        "ds-step-bullet": Omit<DsStepBullet, keyof DsStepBulletAttributes> & { [K in keyof DsStepBullet & keyof DsStepBulletAttributes]?: DsStepBullet[K] } & { [K in keyof DsStepBullet & keyof DsStepBulletAttributes as `attr:${K}`]?: DsStepBulletAttributes[K] } & { [K in keyof DsStepBullet & keyof DsStepBulletAttributes as `prop:${K}`]?: DsStepBullet[K] };
+        "ds-step-bullet-base": Omit<DsStepBulletBase, keyof DsStepBulletBaseAttributes> & { [K in keyof DsStepBulletBase & keyof DsStepBulletBaseAttributes]?: DsStepBulletBase[K] } & { [K in keyof DsStepBulletBase & keyof DsStepBulletBaseAttributes as `attr:${K}`]?: DsStepBulletBaseAttributes[K] } & { [K in keyof DsStepBulletBase & keyof DsStepBulletBaseAttributes as `prop:${K}`]?: DsStepBulletBase[K] };
+        "ds-step-content": Omit<DsStepContent, keyof DsStepContentAttributes> & { [K in keyof DsStepContent & keyof DsStepContentAttributes]?: DsStepContent[K] } & { [K in keyof DsStepContent & keyof DsStepContentAttributes as `attr:${K}`]?: DsStepContentAttributes[K] } & { [K in keyof DsStepContent & keyof DsStepContentAttributes as `prop:${K}`]?: DsStepContent[K] };
+        "ds-step-content-base": Omit<DsStepContentBase, keyof DsStepContentBaseAttributes> & { [K in keyof DsStepContentBase & keyof DsStepContentBaseAttributes]?: DsStepContentBase[K] } & { [K in keyof DsStepContentBase & keyof DsStepContentBaseAttributes as `attr:${K}`]?: DsStepContentBaseAttributes[K] } & { [K in keyof DsStepContentBase & keyof DsStepContentBaseAttributes as `prop:${K}`]?: DsStepContentBase[K] };
+        "ds-steps": Omit<DsSteps, keyof DsStepsAttributes> & { [K in keyof DsSteps & keyof DsStepsAttributes]?: DsSteps[K] } & { [K in keyof DsSteps & keyof DsStepsAttributes as `attr:${K}`]?: DsStepsAttributes[K] } & { [K in keyof DsSteps & keyof DsStepsAttributes as `prop:${K}`]?: DsSteps[K] };
         "ds-store": Omit<DsStore, keyof DsStoreAttributes> & { [K in keyof DsStore & keyof DsStoreAttributes]?: DsStore[K] } & { [K in keyof DsStore & keyof DsStoreAttributes as `attr:${K}`]?: DsStoreAttributes[K] } & { [K in keyof DsStore & keyof DsStoreAttributes as `prop:${K}`]?: DsStore[K] };
         "ds-tab": Omit<DsTab, keyof DsTabAttributes> & { [K in keyof DsTab & keyof DsTabAttributes]?: DsTab[K] } & { [K in keyof DsTab & keyof DsTabAttributes as `attr:${K}`]?: DsTabAttributes[K] } & { [K in keyof DsTab & keyof DsTabAttributes as `prop:${K}`]?: DsTab[K] } & OneOf<"dsId", DsTab["dsId"], DsTabAttributes["dsId"]> & OneOf<"dsTabPanelId", DsTab["dsTabPanelId"], DsTabAttributes["dsTabPanelId"]>;
         "ds-tablist": Omit<DsTablist, keyof DsTablistAttributes> & { [K in keyof DsTablist & keyof DsTablistAttributes]?: DsTablist[K] } & { [K in keyof DsTablist & keyof DsTablistAttributes as `attr:${K}`]?: DsTablistAttributes[K] } & { [K in keyof DsTablist & keyof DsTablistAttributes as `prop:${K}`]?: DsTablist[K] };
@@ -20850,6 +21299,13 @@ declare module "@stencil/core" {
             "ds-select": LocalJSX.IntrinsicElements["ds-select"] & JSXBase.HTMLAttributes<HTMLDsSelectElement>;
             "ds-select-native": LocalJSX.IntrinsicElements["ds-select-native"] & JSXBase.HTMLAttributes<HTMLDsSelectNativeElement>;
             "ds-spinner": LocalJSX.IntrinsicElements["ds-spinner"] & JSXBase.HTMLAttributes<HTMLDsSpinnerElement>;
+            "ds-step": LocalJSX.IntrinsicElements["ds-step"] & JSXBase.HTMLAttributes<HTMLDsStepElement>;
+            "ds-step-base": LocalJSX.IntrinsicElements["ds-step-base"] & JSXBase.HTMLAttributes<HTMLDsStepBaseElement>;
+            "ds-step-bullet": LocalJSX.IntrinsicElements["ds-step-bullet"] & JSXBase.HTMLAttributes<HTMLDsStepBulletElement>;
+            "ds-step-bullet-base": LocalJSX.IntrinsicElements["ds-step-bullet-base"] & JSXBase.HTMLAttributes<HTMLDsStepBulletBaseElement>;
+            "ds-step-content": LocalJSX.IntrinsicElements["ds-step-content"] & JSXBase.HTMLAttributes<HTMLDsStepContentElement>;
+            "ds-step-content-base": LocalJSX.IntrinsicElements["ds-step-content-base"] & JSXBase.HTMLAttributes<HTMLDsStepContentBaseElement>;
+            "ds-steps": LocalJSX.IntrinsicElements["ds-steps"] & JSXBase.HTMLAttributes<HTMLDsStepsElement>;
             "ds-store": LocalJSX.IntrinsicElements["ds-store"] & JSXBase.HTMLAttributes<HTMLDsStoreElement>;
             "ds-tab": LocalJSX.IntrinsicElements["ds-tab"] & JSXBase.HTMLAttributes<HTMLDsTabElement>;
             "ds-tablist": LocalJSX.IntrinsicElements["ds-tablist"] & JSXBase.HTMLAttributes<HTMLDsTablistElement>;

package/dist/types/global.d.ts

@@ -9,4 +9,5 @@ declare global {
    */
   var _uhdsMatomoCollectionProbability: number | undefined;
   var _uhdsMatomoAppName: string | undefined;
+  var __uhdsReservedIds: Set<string>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uh-design-system/component-library",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "publishConfig": {
     "access": "public"
   },
@@ -89,7 +89,7 @@
     "@types/node": "^22.19.19",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.5",
-    "@uh-design-system/storybook-stencil-docs-utils": "^1.6.0",
+    "@uh-design-system/storybook-stencil-docs-utils": "^1.7.0",
     "@vitest/browser": "4.1.8",
     "@vitest/browser-playwright": "4.1.8",
     "@vitest/coverage-v8": "4.1.8",
@@ -111,5 +111,5 @@
     "vitest": "4.1.8"
   },
   "license": "MIT",
-  "gitHead": "cb0556ae53bc2cd12502cbd708dd69fa484f9efd"
+  "gitHead": "95e9b6931917a027034c116be39d78866d607bc7"
 }