@uh-design-system/component-library 1.6.0 → 1.7.0-rc.0

package/dist/types/components.d.ts

@@ -6575,6 +6575,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'
@@ -9608,6 +9755,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 +10265,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;
@@ -16921,6 +17117,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'
@@ -20006,6 +20349,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;
     }
@@ -20446,6 +20832,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 +21243,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uh-design-system/component-library",
-  "version": "1.6.0",
+  "version": "1.7.0-rc.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-rc.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": "8f8bbfba2282582fe5c083b2711245611241548e"
 }

package/dist/cjs/ariaDeprecationFactory-BsGXud4n.js

@@ -1,30 +0,0 @@
-'use strict';
-
-var index = require('./index-C6e6b_ut.js');
-var attributes = require('./attributes-DbNfxmvc.js');
-
-const ariaDeprecationFactory = (Base) => {
-    const AriaDeprecation = class extends Base {
-        constructor(hostRef) {
-            super();
-            index.registerInstance(this, hostRef);
-        }
-        dsMuteAriaDeprecationWarning = false;
-        getDeprecationWarningForAriaAttribute = (el, attr) => {
-            if (this.dsMuteAriaDeprecationWarning)
-                return;
-            if (el.hasAttribute(attr)) {
-                console.warn(`[DEPRECATION] The use of the '${attr}' attribute on <${el.tagName.toLowerCase()}> is deprecated and will be removed in a future version (tba). Please refer to the documentation for alternative ds-prefixed property name. If the attribute you are using does not have a corresponding ds-prefixed property name, please contact developers at #designsystem Slack channel. In the future, any aria-attributes set on the web component will remain on the host element. To mute all warnings on this component instance, set the "dsMuteAriaDeprecationWarning" property.`);
-            }
-        };
-        getDeprecationWarningsForAriaAttributes = (el) => {
-            if (this.dsMuteAriaDeprecationWarning)
-                return;
-            for (const attr of attributes.ariaAttributes)
-                this.getDeprecationWarningForAriaAttribute(el, attr);
-        };
-    };
-    return AriaDeprecation;
-};
-
-exports.ariaDeprecationFactory = ariaDeprecationFactory;