@uh-design-system/component-library 1.7.0 → 1.7.1-rc.1

package/dist/collection/components/01-base-components/ds-spinner/ds-spinner.css

@@ -174,47 +174,47 @@
   font-weight: var(--ds-fontWeight-bold);
 }
 
-.ds-spinner__pA2cRq {
+.ds-spinner__0apwgA {
   display: inline-block;
 }
-.ds-spinner__pA2cRq:has(.ds-spinner__pA2cRq__text) {
+.ds-spinner__0apwgA:has(.ds-spinner__0apwgA__text) {
   display: inline-flex;
   align-items: center;
   gap: calc(var(--spinner-size) / 2);
 }
-.ds-spinner__pA2cRq {
+.ds-spinner__0apwgA {
   /* Size */
 }
-.ds-spinner__pA2cRq--small {
+.ds-spinner__0apwgA--small {
   padding: 1.5px;
 }
-.ds-spinner__pA2cRq--medium {
+.ds-spinner__0apwgA--medium {
   padding: 3px;
 }
-.ds-spinner__pA2cRq--large {
+.ds-spinner__0apwgA--large {
   padding: 3px;
 }
-.ds-spinner__pA2cRq--xLarge {
+.ds-spinner__0apwgA--xLarge {
   padding: 5.5px;
 }
-.ds-spinner__pA2cRq--2xLarge {
+.ds-spinner__0apwgA--2xLarge {
   padding: 5.5px;
 }
-.ds-spinner__pA2cRq--custom {
+.ds-spinner__0apwgA--custom {
   padding: calc(var(--spinner-size) / 8);
 }
-.ds-spinner__pA2cRq {
+.ds-spinner__0apwgA {
   /* Position */
 }
-.ds-spinner__pA2cRq--below {
+.ds-spinner__0apwgA--below {
   flex-direction: column;
   align-items: center;
 }
-.ds-spinner__pA2cRq--right {
+.ds-spinner__0apwgA--right {
   flex-direction: row;
   align-items: center;
 }
-.ds-spinner__pA2cRq__spinner {
+.ds-spinner__0apwgA__spinner {
   width: var(--spinner-size, 24px);
   height: var(--spinner-size, 24px);
   border-radius: 50%;
@@ -224,14 +224,14 @@
   align-items: center;
   justify-content: center;
 }
-.ds-spinner__pA2cRq__text {
+.ds-spinner__0apwgA__text {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
 }
-.ds-spinner__pA2cRq__text--white {
+.ds-spinner__0apwgA__text--white {
   color: var(--ds-textColor-white);
 }
-.ds-spinner__pA2cRq__segment {
+.ds-spinner__0apwgA__segment {
   display: block;
   position: absolute;
   width: var(--spinner-size, 24px);
@@ -241,13 +241,13 @@
   animation: ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;
   border-color: var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color);
 }
-.ds-spinner__pA2cRq__segment--1 {
+.ds-spinner__0apwgA__segment--1 {
   animation-delay: -0.3s;
 }
-.ds-spinner__pA2cRq__segment--2 {
+.ds-spinner__0apwgA__segment--2 {
   animation-delay: -0.2s;
 }
-.ds-spinner__pA2cRq__segment--3 {
+.ds-spinner__0apwgA__segment--3 {
   animation-delay: -0.1s;
 }
 
@@ -261,17 +261,17 @@
 }
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
-  .ds-spinner__pA2cRq__segment {
+  .ds-spinner__0apwgA__segment {
     animation-duration: 2.2s; /* Double the original duration (slower) */
     animation-timing-function: linear; /* More predictable motion */
   }
-  .ds-spinner__pA2cRq__segment--1 {
+  .ds-spinner__0apwgA__segment--1 {
     animation-delay: -0.6s;
   }
-  .ds-spinner__pA2cRq__segment--2 {
+  .ds-spinner__0apwgA__segment--2 {
     animation-delay: -0.4s;
   }
-  .ds-spinner__pA2cRq__segment--3 {
+  .ds-spinner__0apwgA__segment--3 {
     animation-delay: -0.2s;
   }
 }

package/dist/collection/components/01-base-components/ds-spinner/ds-spinner.js

@@ -62,11 +62,11 @@ export class DsSpinner extends Mixin(componentFactory('ds-spinner')) {
         const segmentClasses = (index) => classNames(`${baseClass}__segment`, `${baseClass}__segment--${index}`);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
         const spinnerSizeValue = this.dsCustomSize ? `calc(${this.dsCustomSize} / 1.5833333333)` : `${sizeInPixels}px`;
-        return (h("div", { key: 'a33343e541291ea9ba854634c3f26a1853cfa64f', role: this.dsUseRoleAlert ? 'alert' : undefined, "aria-live": this.dsUseAriaLive ? 'polite' : undefined, class: classes, style: {
+        return (h("div", { key: '11073f15065c18fbf680e3df35d0f165814dc417', role: this.dsUseRoleAlert ? 'alert' : undefined, "aria-live": this.dsUseAriaLive ? 'polite' : undefined, class: classes, style: {
                 '--spinner-size': spinnerSizeValue,
                 '--spinner-color': `${spinnerColorVariable}`,
                 '--spinner-border-color': this.dsColour == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, h("div", { key: '116bbf9107b66da116f2d6fdcf9568338c8766af', class: `${baseClass}__spinner` }, h("div", { key: '3db7345f09d73f86c46bb61c8e2e70f3d8f4faed', class: segmentClasses(1) }), h("div", { key: 'b4248b82e5b6fe49ac4731c0b1cd56e7a75979b1', class: segmentClasses(2) }), h("div", { key: '4cd59a8e7f375d4dde962b8f15db1177bf2239c6', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: '6fbc62de59ebad538ab4ab260eee616c2f467337' }, h("span", { key: '721d8c643f286893bfee85d77c520ed381bad5a1' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: '161af4dc48584b93618f3032882b6d015ccad5b1', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
+            }, ...this.inheritedAttributes }, h("div", { key: '7d9c5f7c27f91caf6ad409c690367062097eb902', class: `${baseClass}__spinner` }, h("div", { key: '4952f55054e6d407b9a77b291126b5fa97bfafd4', class: segmentClasses(1) }), h("div", { key: 'e504ceea1effbb99f4060dcb2b62c2eb3c4d58ef', class: segmentClasses(2) }), h("div", { key: 'cf60357cbf03d025b46c2fa03c33f43d3106e1ed', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: '0679971243cbc2f2b072e253577413405e1e3432' }, h("span", { key: 'b5bf752c0347ce88c9cfb0ffc5702a46783cff8b' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: 'a2f5f41cd6292956f4804898386ea17387e7b29d', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
     }
     static get is() { return "ds-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/01-base-components/ds-steps/ds-step/ds-step-bullet/ds-step-bullet.js

@@ -110,7 +110,7 @@ export class DsStepBullet extends Mixin(componentFactory('ds-step-bullet'), step
         };
     }
     render() {
-        return h(this.DsStepBulletBase, { key: 'a62501301642df7c2aed85a005db622ad8bb226a', ...this.bulletProps });
+        return h(this.DsStepBulletBase, { key: '6ff2f93632411e0c11ac1f48d4c4da82e8d957d9', ...this.bulletProps });
     }
     static get is() { return "ds-step-bullet"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-steps/ds-step/ds-step-content/ds-step-content.js

@@ -49,8 +49,11 @@ export class DsStepContent extends Mixin(componentFactory('ds-step-content'), st
                 return 'var(--ds-textColor-default)';
         }
     }
+    async setFocus() {
+        await this.el.querySelector(this.DsStepContentBase)?.setFocus();
+    }
     render() {
-        return (h(this.DsStepContentBase, { key: '63a95baa13529efd8c142391031ffc31c8ca98f5', dsOrientation: this.orientation, dsHeading: this.dsHeading, dsHeadingColour: this.headingColour, dsOrdinal: this.ordinal, dsFullWidth: this.dsFullWidth, dsHiddenAssistiveText: this.isCompleted ? this.stepCompleted : undefined, dsAriaCurrent: this.phase === 'current' ? 'step' : undefined }, h("slot", { key: '6b29a2e935c1c65d113c271cbff9c40bbfb2cbca', name: "heading", slot: "heading" }), h("slot", { key: '010976cdcd833565366d481779c38d502d1b8929', name: "content", slot: "content" })));
+        return (h(this.DsStepContentBase, { key: '12924ff92817d4ebf5c8664ef57b16635822f957', dsOrientation: this.orientation, dsHeading: this.dsHeading, dsHeadingColour: this.headingColour, dsOrdinal: this.ordinal, dsFullWidth: this.dsFullWidth, dsHiddenAssistiveText: this.isCompleted ? this.stepCompleted : undefined, dsAriaCurrent: this.phase === 'current' ? 'step' : undefined }, h("slot", { key: '54f7b35d92f83d73277bea21d162944a62cff693', name: "heading", slot: "heading" }), h("slot", { key: 'd9c3257e90769b2491783672cf6e44af56908d42', name: "content", slot: "content" })));
     }
     static get is() { return "ds-step-content"; }
     static get encapsulation() { return "scoped"; }
@@ -108,6 +111,27 @@ export class DsStepContent extends Mixin(componentFactory('ds-step-content'), st
             }
         };
     }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Calls `setFocus` method of the `ds-step-content-base` inside the `ds-step-content` component.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
 }
 declareComponentDependencies([h("ds-step-content-base", null)]);

package/dist/collection/components/01-base-components/ds-steps/ds-step/ds-step.js

@@ -38,7 +38,7 @@ export class DsStep extends Mixin(componentFactory('ds-step'), stepsFactory) {
         this.updateContext();
     }
     render() {
-        return (h(Host, { key: '7ba999e8c0a6f9cedb672f457f57633d0b1ebeff', role: "listitem" }, h(this.DsStepBase, { key: '200457cf7373dda8ef2627406f93b4b50f52fe6c', dsOrientation: this.resolvedOrientation, dsFullWidth: this.dsFullWidth }, h("slot", { key: '3f7f1eb4203012b24853fc2757155d13d6e7af1e', name: "bullet" }), h("slot", { key: '5043a5b700da51ce0ae919d157252c7e37a3f39d', name: "content" }))));
+        return (h(Host, { key: '8f0225e5dfd404f06ad4e41e0348d9c0dac84793', role: "listitem" }, h(this.DsStepBase, { key: 'd852b13ca57245b84e225b5cafa45665c887f9ff', dsOrientation: this.resolvedOrientation, dsFullWidth: this.dsFullWidth }, h("slot", { key: 'b77f6bd691d634a95e7bf030dedb5ebe9ab8a688', name: "bullet" }), h("slot", { key: 'de533991a648902924813144ba765e9c5c7357f2', name: "content" }))));
     }
     static get is() { return "ds-step"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-steps/ds-step-base/ds-step-base.css

@@ -4,11 +4,11 @@
   display: block;
 }
 
-:host(.ds-step-base__pA2cRq__host--full-width) {
+:host(.ds-step-base__0apwgA__host--full-width) {
   flex: 1;
 }
 
-.ds-step-base__pA2cRq {
+.ds-step-base__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -19,6 +19,6 @@
   align-items: stretch;
   gap: var(--ds-spacing-xSmall);
 }
-.ds-step-base__pA2cRq--vertical {
+.ds-step-base__0apwgA--vertical {
   flex-direction: row;
 }

package/dist/collection/components/01-base-components/ds-steps/ds-step-base/ds-step-base.js

@@ -17,7 +17,7 @@ export class DsStepBase extends Mixin(componentFactory('ds-step-base')) {
         const classes = classNames(baseClass, {
             [`${baseClass}--vertical`]: this.dsOrientation === 'vertical',
         });
-        return (h(Host, { key: '3cc4f0a49914d0d143fd786aae3d1e403e1f84c2', class: hostClasses }, h("div", { key: 'dd719ba02ec99f0c74aa785f4b5b5c9181a0c184', class: classes }, h("slot", { key: 'efe43588e563c4bf7a54c0abfa1fefe296f5d3b2', name: "bullet" }), h("slot", { key: 'bce9e362a7d400c87f23217aea6da514b030f60e', name: "content" }))));
+        return (h(Host, { key: '7d24bae0054e9c6e77e60c3178d4e47833bf6549', class: hostClasses }, h("div", { key: 'e1f3394d28a434258b90ec8b3355845656ac9d70', class: classes }, h("slot", { key: 'a2d132bb344e45a0e6a3a91006ffdf30cb6fde82', name: "bullet" }), h("slot", { key: '3b5beab02610c1e0fc854ffd95c93cbb139bca2a', name: "content" }))));
     }
     static get is() { return "ds-step-base"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-steps/ds-step-base/ds-step-bullet-base/ds-step-bullet-base.css

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-step-bullet-base__pA2cRq {
+.ds-step-bullet-base__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -14,14 +14,14 @@
   align-items: center;
   height: 100%;
 }
-.ds-step-bullet-base__pA2cRq--vertical {
+.ds-step-bullet-base__0apwgA--vertical {
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   width: auto;
   height: 100%;
 }
-.ds-step-bullet-base__pA2cRq__bullet {
+.ds-step-bullet-base__0apwgA__bullet {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -34,33 +34,33 @@
   font-size: var(--ds-fontSize-14);
   flex: 0 0 auto;
 }
-.ds-step-bullet-base__pA2cRq__bullet--small {
+.ds-step-bullet-base__0apwgA__bullet--small {
   width: 2rem;
   height: 1.5rem;
 }
-.ds-step-bullet-base__pA2cRq__bullet--small.ds-step-bullet-base__pA2cRq__bullet--vertical {
+.ds-step-bullet-base__0apwgA__bullet--small.ds-step-bullet-base__0apwgA__bullet--vertical {
   width: 1.5rem;
   height: 2rem;
 }
-.ds-step-bullet-base__pA2cRq__line {
+.ds-step-bullet-base__0apwgA__line {
   flex: 1 1 auto;
   min-width: 0;
   align-self: center;
   margin-inline: var(--ds-spacing-2xSmall);
 }
-.ds-step-bullet-base__pA2cRq__line--small {
+.ds-step-bullet-base__0apwgA__line--small {
   margin-inline: 0;
 }
-.ds-step-bullet-base__pA2cRq__line--vertical {
+.ds-step-bullet-base__0apwgA__line--vertical {
   margin-inline: 0;
   margin-block: var(--ds-spacing-2xSmall);
   height: auto;
   min-height: 2rem;
   flex: 1 1 auto;
 }
-.ds-step-bullet-base__pA2cRq__line--no-line.ds-step-bullet-base__pA2cRq__line--vertical {
+.ds-step-bullet-base__0apwgA__line--no-line.ds-step-bullet-base__0apwgA__line--vertical {
   min-height: 0;
 }
-.ds-step-bullet-base__pA2cRq__line--small.ds-step-bullet-base__pA2cRq__line--vertical {
+.ds-step-bullet-base__0apwgA__line--small.ds-step-bullet-base__0apwgA__line--vertical {
   margin-block: 0;
 }

package/dist/collection/components/01-base-components/ds-steps/ds-step-base/ds-step-bullet-base/ds-step-bullet-base.js

@@ -83,7 +83,7 @@ export class DsStepBulletBase extends Mixin(componentFactory('ds-step-bullet-bas
             backgroundColor: this.dsLineColour,
             [this.isVertical ? 'width' : 'height']: this.lineWidthVar,
         };
-        return (h("div", { key: 'be602b6df86662390f411363e62734ac706f675f', class: classes, "aria-hidden": "true" }, h("div", { key: 'a28492717b621d882114d6e6ed905729aaffae14', class: bulletClass, style: bulletStyle }, this.dsText, this.dsIcon && h(this.DsIcon, { key: '9b20fb80675c77bec29a5c0b93071abab6ade575', dsSize: this.iconSize, dsName: this.dsIcon, dsColour: this.dsIconColour })), this.dsLineWidth !== 'none' && h("div", { key: '2e8d6b5d14839aa52b690fcd901239938d5de484', class: lineClass, style: lineStyle })));
+        return (h("div", { key: 'f0518470e99f783748d52af6c7b8a8d1b3eebfa1', class: classes, "aria-hidden": "true" }, h("div", { key: '6c9c35efcf37561d49eaa5a6b1314bd93c90b64e', class: bulletClass, style: bulletStyle }, this.dsText, this.dsIcon && h(this.DsIcon, { key: '580c4688281f7beb1cb2c7ff893458c149cc629f', dsSize: this.iconSize, dsName: this.dsIcon, dsColour: this.dsIconColour })), this.dsLineWidth !== 'none' && h("div", { key: '73ae21d9738a43b227ad64a05028da1168a19399', class: lineClass, style: lineStyle })));
     }
     static get is() { return "ds-step-bullet-base"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-steps/ds-step-base/ds-step-content-base/ds-step-content-base.css

@@ -4,11 +4,11 @@
   display: block;
 }
 
-:host(.ds-step-content-base__pA2cRq__host--full-width) {
+:host(.ds-step-content-base__0apwgA__host--full-width) {
   width: 100%;
 }
 
-.ds-step-content-base__pA2cRq {
+.ds-step-content-base__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -20,22 +20,28 @@
   padding-block-end: 0;
   padding-inline: var(--ds-spacing-2xSmall) var(--ds-spacing-medium);
 }
-.ds-step-content-base__pA2cRq--full-width {
+.ds-step-content-base__0apwgA--full-width {
   width: 100%;
 }
-.ds-step-content-base__pA2cRq--vertical {
+.ds-step-content-base__0apwgA--vertical {
   padding-block-end: var(--ds-spacing-medium);
   padding-inline: 0;
 }
-.ds-step-content-base__pA2cRq__heading {
+.ds-step-content-base__0apwgA__heading:focus-visible {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
+.ds-step-content-base__0apwgA__heading {
   margin: 0;
+  width: fit-content;
 }
-.ds-step-content-base__pA2cRq__heading--vertical {
+.ds-step-content-base__0apwgA__heading--vertical {
   padding: calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall)) 0 0;
 }
-.ds-step-content-base__pA2cRq__content {
+.ds-step-content-base__0apwgA__content {
   color: var(--ds-textColor-secondary);
 }
-.ds-step-content-base__pA2cRq__visually-hidden {
+.ds-step-content-base__0apwgA__visually-hidden {
   display: contents;
 }

package/dist/collection/components/01-base-components/ds-steps/ds-step-base/ds-step-content-base/ds-step-content-base.js

@@ -7,6 +7,7 @@ export class DsStepContentBase extends Mixin(componentFactory('ds-step-content-b
     constructor() {
         super();
     }
+    headingElement;
     el;
     dsOrientation = 'vertical';
     dsHeading = '';
@@ -24,6 +25,9 @@ export class DsStepContentBase extends Mixin(componentFactory('ds-step-content-b
     get isVertical() {
         return this.dsOrientation === 'vertical';
     }
+    async setFocus() {
+        this.headingElement?.focus();
+    }
     render() {
         const baseClass = cx('ds-step-content-base');
         const hostClasses = classNames({
@@ -44,7 +48,7 @@ export class DsStepContentBase extends Mixin(componentFactory('ds-step-content-b
         const headingAriaAttributes = {
             ['aria-current']: this.dsAriaCurrent,
         };
-        return (h(Host, { key: '25ce47b304faf4d7f6c9266c666f6376c5e72ad5', class: hostClasses }, h("div", { key: 'cb46fb4984542d73958ef306367fbd2d5d2ae406', class: classes }, h("slot", { key: '5f43dc10d7bb320060221a3699d0ff51f3475fef', name: "heading" }), !!this.dsHeading && (h("span", { key: 'a1b7a1632f1d219b03b849da5b024976090fa7bd', class: headingClasses, style: headingStyles, ...headingAriaAttributes }, this.dsOrdinal !== undefined && (h(this.DsVisuallyHidden, { key: 'a1615288101594e4bc1a64b680d507a7b1bc97b2', class: visuallyHiddenClasses, dsTag: "span" }, this.dsOrdinal, ".\u00A0")), this.dsHeading, this.dsHiddenAssistiveText && (h(this.DsVisuallyHidden, { key: '2b1712946c341c141403790d54c7f458e0c5b1b4', class: visuallyHiddenClasses, dsTag: "span" }, "\u00A0", this.dsHiddenAssistiveText)))), h("div", { key: '5002686b0a706fe6275509c2f7242b9f955e3ef2', class: contentClasses }, h("slot", { key: 'f2b25c27fabf39b9e8adff2da33f24c508947a82', name: "content" })))));
+        return (h(Host, { key: '0bbe16201eb6997f7da48a1fbc98e4903cdf351c', class: hostClasses }, h("div", { key: '7bd5c1d39c88992550d5540f0fd4b90d30d43f9f', class: classes }, h("slot", { key: '0409129f52265ff641cf8430cc8fb1f0cda9853c', name: "heading" }), !!this.dsHeading && (h("span", { key: '849064921f73f3f492bf0385cac5bead8bbb8019', ref: el => (this.headingElement = el), class: headingClasses, style: headingStyles, tabIndex: -1, ...headingAriaAttributes }, this.dsOrdinal !== undefined && (h(this.DsVisuallyHidden, { key: '5a7bd50b8c64fb1289bc1c67af245698765065cc', class: visuallyHiddenClasses, dsTag: "span" }, this.dsOrdinal, ".\u00A0")), this.dsHeading, this.dsHiddenAssistiveText && (h(this.DsVisuallyHidden, { key: '2e5cb460b8ef1b34e900cda95e7cca0bf1062f39', class: visuallyHiddenClasses, dsTag: "span" }, "\u00A0", this.dsHiddenAssistiveText)))), h("div", { key: 'c8e3cb5c6e5be9e1ec50ccd1b55f19654055d706', class: contentClasses }, h("slot", { key: '4ad4792c4371b8b7d173445a7b3a6e9aeedfb751', name: "content" })))));
     }
     static get is() { return "ds-step-content-base"; }
     static get encapsulation() { return "scoped"; }
@@ -199,6 +203,27 @@ export class DsStepContentBase extends Mixin(componentFactory('ds-step-content-b
             }
         };
     }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus to the heading (`<span>`) element rendered inside the step content.\n\nHas no effect when using `<slot name=\"heading\">` to provide a custom heading element.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
 }
 declareComponentDependencies([h("ds-visually-hidden", null)]);

package/dist/collection/components/01-base-components/ds-steps/ds-steps.css

@@ -8,7 +8,7 @@
   display: contents;
 }
 
-.ds-steps__pA2cRq {
+.ds-steps__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -18,6 +18,6 @@
   list-style: none;
   flex-direction: row;
 }
-.ds-steps__pA2cRq--vertical {
+.ds-steps__0apwgA--vertical {
   flex-direction: column;
 }

package/dist/collection/components/01-base-components/ds-steps/ds-steps.js

@@ -31,7 +31,7 @@ export class DsSteps extends Mixin(componentFactory('ds-steps')) {
         const classes = classNames(baseClass, {
             [`${baseClass}--vertical`]: this.dsOrientation === 'vertical',
         });
-        return (h(Host, { key: 'e4a50c4727554978e3b57247fe885ff938633926', role: "list", class: classes }, h("slot", { key: '6e21c38a3f5425cb5635c677a52ad12e71121ea2' })));
+        return (h(Host, { key: 'ae688cd03d8063df07a7b16714fc269994a8cbef', role: "list", class: classes }, h("slot", { key: '28c52db2e91a8594c54099821f4d737845a8c72f' })));
     }
     static get is() { return "ds-steps"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-tabs/ds-tab/ds-tab.css

@@ -8,7 +8,7 @@
   display: contents;
 }
 
-.ds-tab__pA2cRq {
+.ds-tab__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -33,22 +33,22 @@
   cursor: default;
 }
 @media (min-width: 60rem) {
-  .ds-tab__pA2cRq {
+  .ds-tab__0apwgA {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-tab__pA2cRq--selected, .ds-tab__pA2cRq:hover:not(.ds-tab__pA2cRq--selected), .ds-tab__pA2cRq:active:not(.ds-tab__pA2cRq--selected) {
+.ds-tab__0apwgA--selected, .ds-tab__0apwgA:hover:not(.ds-tab__0apwgA--selected), .ds-tab__0apwgA:active:not(.ds-tab__0apwgA--selected) {
   color: var(--ds-textColor-default);
 }
-.ds-tab__pA2cRq--container:focus-visible {
+.ds-tab__0apwgA--container:focus-visible {
   box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
 }
-.ds-tab__pA2cRq--container.ds-tab__pA2cRq--selected {
+.ds-tab__0apwgA--container.ds-tab__0apwgA--selected {
   background-color: var(--ds-bgColor-white);
 }
-.ds-tab__pA2cRq--container.ds-tab__pA2cRq--selected::after {
+.ds-tab__0apwgA--container.ds-tab__0apwgA--selected::after {
   content: "";
   position: absolute;
   top: 0;
@@ -56,24 +56,24 @@
   right: 0;
   border-block-start: var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary);
 }
-.ds-tab__pA2cRq--container.ds-tab__pA2cRq--selected:not(:focus-visible)::before {
+.ds-tab__0apwgA--container.ds-tab__0apwgA--selected:not(:focus-visible)::before {
   content: "";
   position: absolute;
   inset: 0;
   border-inline: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
 }
-.ds-tab__pA2cRq--container:hover:not(.ds-tab__pA2cRq--selected) {
+.ds-tab__0apwgA--container:hover:not(.ds-tab__0apwgA--selected) {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-tab__pA2cRq--container:active:not(.ds-tab__pA2cRq--selected) {
+.ds-tab__0apwgA--container:active:not(.ds-tab__0apwgA--selected) {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-tab__pA2cRq--line:focus-visible .ds-tab__pA2cRq__content {
+.ds-tab__0apwgA--line:focus-visible .ds-tab__0apwgA__content {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-tab__pA2cRq--line.ds-tab__pA2cRq--selected::after {
+.ds-tab__0apwgA--line.ds-tab__0apwgA--selected::after {
   content: "";
   position: absolute;
   bottom: 0;
@@ -81,7 +81,7 @@
   right: 0;
   border-block-end: var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary);
 }
-.ds-tab__pA2cRq--line:hover:not(.ds-tab__pA2cRq--selected)::after {
+.ds-tab__0apwgA--line:hover:not(.ds-tab__0apwgA--selected)::after {
   content: "";
   position: absolute;
   bottom: 0;
@@ -89,7 +89,7 @@
   right: 0;
   border-block-end: var(--ds-borderWidth-thick) solid var(--ds-borderColor-default);
 }
-.ds-tab__pA2cRq--line:active:not(.ds-tab__pA2cRq--selected)::after {
+.ds-tab__0apwgA--line:active:not(.ds-tab__0apwgA--selected)::after {
   content: "";
   position: absolute;
   bottom: 0;
@@ -97,7 +97,7 @@
   right: 0;
   border-block-end: var(--ds-borderWidth-thick) solid var(--ds-borderColor-black);
 }
-.ds-tab__pA2cRq .ds-tab__pA2cRq__content {
+.ds-tab__0apwgA .ds-tab__0apwgA__content {
   position: relative;
   display: flex;
   flex-direction: row;

package/dist/collection/components/01-base-components/ds-tabs/ds-tab/ds-tab.js

@@ -105,7 +105,7 @@ export class DsTab extends Mixin(componentFactory('ds-tab'), tabsFactory) {
             ...(ariaLabel ? { dsAriaLabel: ariaLabel } : {}),
             ...(colour ? { dsColour: colour } : {}),
         });
-        return (h("div", { key: '43df10cb24a93e854ab7e8c3bb0b88c97f23cb50', ref: el => (this.tabElement = el), class: classes, role: "tab", "aria-controls": this.dsTabPanelId, "aria-selected": String(isSelected), tabIndex: isSelected ? 0 : -1 }, h("div", { key: '05657093b4ccd9efe7ca6b17d47828c6f90024e9', class: `${baseClass}__content` }, h("slot", { key: '21525ce4cad8bd98cf51e3c2127f3b3377ec17ea', name: "prefix", onSlotchange: this.checkPrefixSlot }, !this.hasPrefixSlot && this.dsIconStart && h(this.DsIcon, { key: 'ee5fba35d72533bd51ca49d145282e50e2578244', dsName: this.dsIconStart, ...iconProps(this.dsIconStartAriaLabel) })), h("slot", { key: '2a48ec40d1ead08e5e2123e794a57efa9162110d', name: "content", onSlotchange: this.checkContentSlot }, !this.hasContentSlot && h("span", { key: 'd11f324967e0d912a860ace3583bf94b70a61106' }, this.dsText)), h("slot", { key: '12ddec31a796d198199fb295984b431b194d8210', name: "suffix", onSlotchange: this.checkSuffixSlot }, !this.hasSuffixSlot && this.dsIconEnd && h(this.DsIcon, { key: '83df1f640e3373de23d979380a7a1e3f6757688d', dsName: this.dsIconEnd, ...iconProps(this.dsIconEndAriaLabel, this.iconColour) })))));
+        return (h("div", { key: 'c15bcb23b0ee262c01a832047beb28a30b3df629', ref: el => (this.tabElement = el), class: classes, role: "tab", "aria-controls": this.dsTabPanelId, "aria-selected": String(isSelected), tabIndex: isSelected ? 0 : -1 }, h("div", { key: '5a9e5df4a18abd14a44494f4b6062c80adca9a03', class: `${baseClass}__content` }, h("slot", { key: '7d7b5b16dd323b43b060ad58422dea26de7d8c01', name: "prefix", onSlotchange: this.checkPrefixSlot }, !this.hasPrefixSlot && this.dsIconStart && h(this.DsIcon, { key: '64dc3b4f5f03160542962d016f460fafb2d46fdc', dsName: this.dsIconStart, ...iconProps(this.dsIconStartAriaLabel) })), h("slot", { key: 'a3bc42e0b9b16231f9e9cf0eaf04cd9400d5b12b', name: "content", onSlotchange: this.checkContentSlot }, !this.hasContentSlot && h("span", { key: 'ae4069ce867afdc8eabef74c8f24eb4fd5c65ad8' }, this.dsText)), h("slot", { key: 'a6cad0d5b715f2cad9236526f92b84e561c02478', name: "suffix", onSlotchange: this.checkSuffixSlot }, !this.hasSuffixSlot && this.dsIconEnd && h(this.DsIcon, { key: 'a246b7acc42de18b010316a77449e55a1b9fe625', dsName: this.dsIconEnd, ...iconProps(this.dsIconEndAriaLabel, this.iconColour) })))));
     }
     static get is() { return "ds-tab"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-tabs/ds-tablist/ds-tablist.css

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-tablist__pA2cRq {
+.ds-tablist__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -12,7 +12,7 @@
   font-size: var(--ds-fontSize-16);
   position: relative;
 }
-.ds-tablist__pA2cRq .ds-tablist__pA2cRq__scrollable {
+.ds-tablist__0apwgA .ds-tablist__0apwgA__scrollable {
   display: flex;
   gap: var(--ds-spacing-2xSmall);
   overflow-x: auto;
@@ -20,17 +20,17 @@
   overscroll-behavior-x: contain;
   scrollbar-width: none;
 }
-.ds-tablist__pA2cRq .ds-tablist__pA2cRq__scrollable:focus, .ds-tablist__pA2cRq .ds-tablist__pA2cRq__scrollable:focus-visible, .ds-tablist__pA2cRq .ds-tablist__pA2cRq__scrollable:-moz-focusring {
+.ds-tablist__0apwgA .ds-tablist__0apwgA__scrollable:focus, .ds-tablist__0apwgA .ds-tablist__0apwgA__scrollable:focus-visible, .ds-tablist__0apwgA .ds-tablist__0apwgA__scrollable:-moz-focusring {
   outline: none;
   box-shadow: none;
 }
-.ds-tablist__pA2cRq .ds-tablist__pA2cRq__scrollable--container {
+.ds-tablist__0apwgA .ds-tablist__0apwgA__scrollable--container {
   background: linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) left/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) right/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) top/100% var(--ds-borderWidth-hairline) no-repeat, linear-gradient(var(--ds-bgColor-neutralLight), var(--ds-bgColor-neutralLight)) top/100% calc(100% - var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat;
 }
-.ds-tablist__pA2cRq .ds-tablist__pA2cRq__scrollable--line {
+.ds-tablist__0apwgA .ds-tablist__0apwgA__scrollable--line {
   background: linear-gradient(var(--ds-bgColor-transparent-onLight), var(--ds-bgColor-transparent-onLight)) top/100% calc(100% - 1 * var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat;
 }
-.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button {
+.ds-tablist__0apwgA .ds-tablist__0apwgA__button {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -39,21 +39,21 @@
   justify-content: center;
   align-items: center;
 }
-.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button--backward {
+.ds-tablist__0apwgA .ds-tablist__0apwgA__button--backward {
   left: 0;
 }
-.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button--forward {
+.ds-tablist__0apwgA .ds-tablist__0apwgA__button--forward {
   right: 0;
 }
-.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button--container {
+.ds-tablist__0apwgA .ds-tablist__0apwgA__button--container {
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button--line {
+.ds-tablist__0apwgA .ds-tablist__0apwgA__button--line {
   border-block-end: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button--container.ds-tablist__pA2cRq__button--backward::after {
+.ds-tablist__0apwgA .ds-tablist__0apwgA__button--container.ds-tablist__0apwgA__button--backward::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -61,7 +61,7 @@
   box-shadow: var(--ds-shadow-overlay);
   clip-path: inset(0 calc(-1 * var(--ds-spacing-small)) 0 0);
 }
-.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button--container.ds-tablist__pA2cRq__button--forward::after {
+.ds-tablist__0apwgA .ds-tablist__0apwgA__button--container.ds-tablist__0apwgA__button--forward::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -69,10 +69,10 @@
   box-shadow: var(--ds-shadow-overlay);
   clip-path: inset(0 0 0 calc(-1 * var(--ds-spacing-small)));
 }
-.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button[hidden] {
+.ds-tablist__0apwgA .ds-tablist__0apwgA__button[hidden] {
   display: none;
 }
-.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button__ds-button {
+.ds-tablist__0apwgA .ds-tablist__0apwgA__button__ds-button {
   width: 100%;
   height: 100%;
 }