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

package/dist/esm/ds-spinner.entry.js

@@ -1,12 +1,12 @@
-import { M as Mixin, r as registerInstance, e as getElement, h } from './index-CGO6i46S.js';
+import { M as Mixin, r as registerInstance, e as getElement, h } from './index-DHrlezow.js';
 import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-Dzq9qJk7.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
-import { c as cx } from './cx-WIIvD8un.js';
-import { c as componentFactory } from './componentFactory-BbacL2PN.js';
-import './store-a5NsO1Yj.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-D5pGK2ZH.js';
+import { c as cx } from './cx-CbD7OdM5.js';
+import { c as componentFactory } from './componentFactory-DRKnB2By.js';
+import './store-DYWVDmmN.js';
 
-const dsSpinnerCss = () => `.ds-font{}.ds-font-heading{font-family:var(--ds-fontFamily-heading)}.ds-font-body{font-family:var(--ds-fontFamily-body)}.ds-font{}.ds-font-regular{font-weight:var(--ds-fontWeight-regular)}.ds-font-semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font-semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font-bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking-xs{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking-sm{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking-md{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking-lg{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking-xl{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading-sm{line-height:var(--ds-lineHeight-small)}.ds-leading-md{line-height:var(--ds-lineHeight-medium)}.ds-leading-lg{line-height:var(--ds-lineHeight-large)}.ds-leading-xl{line-height:var(--ds-lineHeight-xLarge)}.ds-width-md{font-stretch:var(--ds-fontWidth-normal)}.ds-width-sm{font-stretch:var(--ds-fontWidth-condense)}.ds-number-proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph-16{margin-bottom:var(--ds-marginBottom, 16px)}.ds-paragraph-20{margin-bottom:var(--ds-marginBottom, 20px)}.ds-paragraph-width-optimal{max-width:var(--ds-paragraphWidth-optimal)}.ds-list-spacing{gap:4px}.ds-text-color-default{color:var(--ds-textColor-default)}.ds-text{}.ds-text-regular-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text{}.ds-text-semibold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text{}.ds-text-bold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-spinner__WN0Emr{display:inline-block}.ds-spinner__WN0Emr:has(.ds-spinner__WN0Emr__text){display:inline-flex;align-items:center;gap:calc(var(--spinner-size) / 2)}.ds-spinner__WN0Emr{}.ds-spinner__WN0Emr--small{padding:1.5px}.ds-spinner__WN0Emr--medium{padding:3px}.ds-spinner__WN0Emr--large{padding:3px}.ds-spinner__WN0Emr--xLarge{padding:5.5px}.ds-spinner__WN0Emr--2xLarge{padding:5.5px}.ds-spinner__WN0Emr--custom{padding:calc(var(--spinner-size) / 8)}.ds-spinner__WN0Emr{}.ds-spinner__WN0Emr--below{flex-direction:column;align-items:center}.ds-spinner__WN0Emr--right{flex-direction:row;align-items:center}.ds-spinner__WN0Emr__spinner{width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border-radius:50%;border:calc(var(--spinner-size, 24px) / 6) solid var(--ds-borderColor-disabled-onLight);position:relative;display:flex;align-items:center;justify-content:center}.ds-spinner__WN0Emr__text{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body)}.ds-spinner__WN0Emr__text--white{color:var(--ds-textColor-white)}.ds-spinner__WN0Emr__segment{display:block;position:absolute;width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border:calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);border-radius:50%;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__WN0Emr__segment--1{animation-delay:-0.3s}.ds-spinner__WN0Emr__segment--2{animation-delay:-0.2s}.ds-spinner__WN0Emr__segment--3{animation-delay:-0.1s}@keyframes ds-spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ds-spinner__WN0Emr__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__WN0Emr__segment--1{animation-delay:-0.6s}.ds-spinner__WN0Emr__segment--2{animation-delay:-0.4s}.ds-spinner__WN0Emr__segment--3{animation-delay:-0.2s}}`;
+const dsSpinnerCss = () => `.ds-font{}.ds-font-heading{font-family:var(--ds-fontFamily-heading)}.ds-font-body{font-family:var(--ds-fontFamily-body)}.ds-font{}.ds-font-regular{font-weight:var(--ds-fontWeight-regular)}.ds-font-semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font-semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font-bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking-xs{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking-sm{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking-md{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking-lg{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking-xl{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading-sm{line-height:var(--ds-lineHeight-small)}.ds-leading-md{line-height:var(--ds-lineHeight-medium)}.ds-leading-lg{line-height:var(--ds-lineHeight-large)}.ds-leading-xl{line-height:var(--ds-lineHeight-xLarge)}.ds-width-md{font-stretch:var(--ds-fontWidth-normal)}.ds-width-sm{font-stretch:var(--ds-fontWidth-condense)}.ds-number-proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph-16{margin-bottom:var(--ds-marginBottom, 16px)}.ds-paragraph-20{margin-bottom:var(--ds-marginBottom, 20px)}.ds-paragraph-width-optimal{max-width:var(--ds-paragraphWidth-optimal)}.ds-list-spacing{gap:4px}.ds-text-color-default{color:var(--ds-textColor-default)}.ds-text{}.ds-text-regular-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text{}.ds-text-semibold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text{}.ds-text-bold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-spinner__pA2cRq{display:inline-block}.ds-spinner__pA2cRq:has(.ds-spinner__pA2cRq__text){display:inline-flex;align-items:center;gap:calc(var(--spinner-size) / 2)}.ds-spinner__pA2cRq{}.ds-spinner__pA2cRq--small{padding:1.5px}.ds-spinner__pA2cRq--medium{padding:3px}.ds-spinner__pA2cRq--large{padding:3px}.ds-spinner__pA2cRq--xLarge{padding:5.5px}.ds-spinner__pA2cRq--2xLarge{padding:5.5px}.ds-spinner__pA2cRq--custom{padding:calc(var(--spinner-size) / 8)}.ds-spinner__pA2cRq{}.ds-spinner__pA2cRq--below{flex-direction:column;align-items:center}.ds-spinner__pA2cRq--right{flex-direction:row;align-items:center}.ds-spinner__pA2cRq__spinner{width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border-radius:50%;border:calc(var(--spinner-size, 24px) / 6) solid var(--ds-borderColor-disabled-onLight);position:relative;display:flex;align-items:center;justify-content:center}.ds-spinner__pA2cRq__text{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body)}.ds-spinner__pA2cRq__text--white{color:var(--ds-textColor-white)}.ds-spinner__pA2cRq__segment{display:block;position:absolute;width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border:calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);border-radius:50%;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{animation-delay:-0.3s}.ds-spinner__pA2cRq__segment--2{animation-delay:-0.2s}.ds-spinner__pA2cRq__segment--3{animation-delay:-0.1s}@keyframes ds-spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ds-spinner__pA2cRq__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__pA2cRq__segment--1{animation-delay:-0.6s}.ds-spinner__pA2cRq__segment--2{animation-delay:-0.4s}.ds-spinner__pA2cRq__segment--3{animation-delay:-0.2s}}`;
 
 const SPINNER_SIZES = {
     'small': 10,
@@ -67,11 +67,11 @@ const DsSpinner = class 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: '22d731a3381debe084f5caabf7f4f62f50c4caf4', role: this.dsUseRoleAlert ? 'alert' : undefined, "aria-live": this.dsUseAriaLive ? 'polite' : undefined, class: classes, style: {
+        return (h("div", { key: 'a33343e541291ea9ba854634c3f26a1853cfa64f', 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: '0e415eeb1da1e4cce51c5fe6c8e212d6b4c3fe7f', class: `${baseClass}__spinner` }, h("div", { key: 'f427fc3b0ee1a7f00014bc8f720710392bd1ffda', class: segmentClasses(1) }), h("div", { key: '796c7e0d493f524df33dd2995c7cd0b863a98499', class: segmentClasses(2) }), h("div", { key: 'e2959d5b0d51e0463fcf9659e6d4090bba44f2ac', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: '3fdb1904b5edfc746ae25e7d2dcb4dd5cd9d6b7a' }, h("span", { key: '458410c6e7d5ef61f206993f44a842210de48838' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: 'e6f7214438611d6d944882c39d3ff7687331bb53', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
+            }, ...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))));
     }
 };
 declareComponentDependencies([h("ds-visually-hidden", null)]);

package/dist/esm/ds-step-base.entry.js

@@ -0,0 +1,31 @@
+import { M as Mixin, r as registerInstance, e as getElement, h, H as Host } from './index-DHrlezow.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { c as cx } from './cx-CbD7OdM5.js';
+import { c as componentFactory } from './componentFactory-DRKnB2By.js';
+import './utils-D5pGK2ZH.js';
+import './store-DYWVDmmN.js';
+
+const dsStepBaseCss = () => `.ds-no-style-leak.sc-ds-step-base *.sc-ds-step-base{all:unset;box-sizing:border-box;display:block}.ds-step-base__pA2cRq__host--full-width.sc-ds-step-base-h{flex:1}.ds-step-base__pA2cRq.sc-ds-step-base{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:flex;flex-direction:column;align-items:stretch;gap:var(--ds-spacing-xSmall)}.ds-step-base__pA2cRq--vertical.sc-ds-step-base{flex-direction:row}`;
+
+const DsStepBase = class extends Mixin(componentFactory('ds-step-base')) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    dsOrientation = 'vertical';
+    dsFullWidth = false;
+    render() {
+        const baseClass = cx('ds-step-base');
+        const hostClasses = classNames(`${baseClass}__host`, {
+            [`${baseClass}__host--full-width`]: this.dsFullWidth,
+        });
+        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" }))));
+    }
+};
+DsStepBase.style = dsStepBaseCss();
+
+export { DsStepBase as ds_step_base };

package/dist/esm/ds-step-bullet-base.entry.js

@@ -0,0 +1,97 @@
+import { M as Mixin, r as registerInstance, e as getElement, h } from './index-DHrlezow.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { c as cx } from './cx-CbD7OdM5.js';
+import { c as componentFactory } from './componentFactory-DRKnB2By.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-D5pGK2ZH.js';
+import './store-DYWVDmmN.js';
+
+const dsStepBulletBaseCss = () => `.ds-no-style-leak.sc-ds-step-bullet-base *.sc-ds-step-bullet-base{all:unset;box-sizing:border-box;display:block}.ds-step-bullet-base__pA2cRq.sc-ds-step-bullet-base{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:flex;align-items:center;height:100%}.ds-step-bullet-base__pA2cRq--vertical.sc-ds-step-bullet-base{flex-direction:column;align-items:center;justify-content:flex-start;width:auto;height:100%}.ds-step-bullet-base__pA2cRq__bullet.sc-ds-step-bullet-base{display:flex;align-items:center;justify-content:center;border-radius:50%;border-style:solid;border-width:0;width:2rem;height:2rem;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);flex:0 0 auto}.ds-step-bullet-base__pA2cRq__bullet--small.sc-ds-step-bullet-base{width:2rem;height:1.5rem}.ds-step-bullet-base__pA2cRq__bullet--small.ds-step-bullet-base__pA2cRq__bullet--vertical.sc-ds-step-bullet-base{width:1.5rem;height:2rem}.ds-step-bullet-base__pA2cRq__line.sc-ds-step-bullet-base{flex:1 1 auto;min-width:0;align-self:center;margin-inline:var(--ds-spacing-2xSmall)}.ds-step-bullet-base__pA2cRq__line--small.sc-ds-step-bullet-base{margin-inline:0}.ds-step-bullet-base__pA2cRq__line--vertical.sc-ds-step-bullet-base{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.sc-ds-step-bullet-base{min-height:0}.ds-step-bullet-base__pA2cRq__line--small.ds-step-bullet-base__pA2cRq__line--vertical.sc-ds-step-bullet-base{margin-block:0}`;
+
+const DsStepBulletBase = class extends Mixin(componentFactory('ds-step-bullet-base')) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    dsOrientation = 'vertical';
+    dsSize = 'medium';
+    dsFillColour;
+    dsBorderColour;
+    dsBorderWidth = 'none';
+    dsLineColour;
+    dsLineWidth = 'none';
+    dsIcon;
+    dsIconColour;
+    dsText;
+    dsTextColour;
+    get DsIcon() {
+        return transformTagName('ds-icon', 'ds-step-bullet-base', this.el);
+    }
+    get isSmall() {
+        return this.dsSize === 'small';
+    }
+    get bulletFillColour() {
+        if (this.isSmall) {
+            return 'var(--ds-bgColor-transparent-onLight)';
+        }
+        return this.dsFillColour;
+    }
+    get bulletBorderColour() {
+        if (this.isSmall) {
+            return 'var(--ds-borderColor-transparent)';
+        }
+        return this.dsBorderColour;
+    }
+    get bulletBorderWidth() {
+        if (this.dsBorderWidth === 'none' || this.isSmall) {
+            return 'var(--ds-borderWidth-none)';
+        }
+        return `var(--ds-borderWidth-${this.dsBorderWidth})`;
+    }
+    get noLine() {
+        return this.dsLineWidth === 'none';
+    }
+    get lineWidthVar() {
+        return `var(--ds-borderWidth-${this.dsLineWidth})`;
+    }
+    get isVertical() {
+        return this.dsOrientation === 'vertical';
+    }
+    get iconSize() {
+        return this.isSmall ? '1.5rem' : '1.125rem';
+    }
+    render() {
+        const baseClass = cx('ds-step-bullet-base');
+        const classes = classNames(baseClass, {
+            [`${baseClass}--with-icon`]: this.dsIcon,
+            [`${baseClass}--small`]: this.isSmall,
+            [`${baseClass}--line-width-${this.dsLineWidth}`]: !this.noLine,
+            [`${baseClass}--vertical`]: this.isVertical,
+        });
+        const bulletClass = classNames(`${baseClass}__bullet`, {
+            [`${baseClass}__bullet--with-icon`]: this.dsIcon,
+            [`${baseClass}__bullet--small`]: this.isSmall,
+            [`${baseClass}__bullet--vertical`]: this.isVertical,
+        });
+        const bulletStyle = {
+            backgroundColor: this.bulletFillColour,
+            borderColor: this.bulletBorderColour,
+            borderWidth: this.bulletBorderWidth,
+            color: this.dsTextColour,
+        };
+        const lineClass = classNames(`${baseClass}__line`, {
+            [`${baseClass}__line--vertical`]: this.isVertical,
+            [`${baseClass}__line--small`]: this.isSmall,
+            [`${baseClass}__line--none`]: this.noLine,
+        });
+        const lineStyle = {
+            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 })));
+    }
+};
+declareComponentDependencies([h("ds-icon", { dsName: "" })]);
+DsStepBulletBase.style = dsStepBulletBaseCss();
+
+export { DsStepBulletBase as ds_step_bullet_base };

package/dist/esm/ds-step-bullet.entry.js

@@ -0,0 +1,125 @@
+import { M as Mixin, r as registerInstance, e as getElement, h } from './index-DHrlezow.js';
+import { c as componentFactory } from './componentFactory-DRKnB2By.js';
+import { s as stepFactory } from './stepFactory-CGyfuf-C.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-D5pGK2ZH.js';
+import './store-DYWVDmmN.js';
+import './stepContext-CEXwfMEs.js';
+
+const dsStepBulletCss = () => `.sc-ds-step-bullet-h{display:contents}`;
+
+const DsStepBullet = class extends Mixin(componentFactory('ds-step-bullet'), stepFactory) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    dsSize = 'medium';
+    dsShowLine = true;
+    get DsStep() {
+        return transformTagName('ds-step', 'ds-step-bullet', this.el);
+    }
+    get DsStepBulletBase() {
+        return transformTagName('ds-step-bullet-base', 'ds-step-bullet', this.el);
+    }
+    get ordinal() {
+        return this.context?.ordinal ?? 1;
+    }
+    get orientation() {
+        return this.context?.orientation ?? 'vertical';
+    }
+    get phase() {
+        return this.context?.phase ?? 'static';
+    }
+    get isSmall() {
+        return this.dsSize === 'small';
+    }
+    get text() {
+        return this.ordinal.toString();
+    }
+    get sharedProps() {
+        return {
+            dsOrientation: this.orientation,
+            dsSize: this.dsSize,
+        };
+    }
+    get lineProps() {
+        const baseLineProps = this.dsShowLine ? { dsLineWidth: 'hairline' } : { dsLineWidth: 'none' };
+        switch (this.phase) {
+            case 'incomplete':
+            case 'current':
+                return {
+                    ...baseLineProps,
+                    ...(this.dsShowLine && { dsLineColour: 'var(--ds-borderColor-light)' }),
+                };
+            case 'complete':
+            case 'static':
+            default:
+                return {
+                    ...baseLineProps,
+                    ...(this.dsShowLine && { dsLineColour: 'var(--ds-borderColor-primary)' }),
+                    ...(this.dsShowLine && { dsLineWidth: 'thin' }),
+                };
+        }
+    }
+    get sizeProps() {
+        switch (this.phase) {
+            case 'incomplete':
+                return this.isSmall
+                    ? {
+                        dsIcon: 'fiber_manual_record',
+                        dsIconColour: 'neutral',
+                        dsBorderWidth: 'none',
+                    }
+                    : {
+                        dsText: this.text,
+                        dsTextColour: 'var(--ds-textColor-secondary)',
+                        dsFillColour: 'var(--ds-bgColor-white)',
+                        dsBorderColour: 'var(--ds-borderColor-default)',
+                        dsBorderWidth: 'thin',
+                    };
+            case 'complete':
+                return this.isSmall
+                    ? {
+                        dsIcon: 'check_circle_fill',
+                        dsIconColour: 'primary',
+                        dsBorderWidth: 'none',
+                    }
+                    : {
+                        dsIcon: 'check',
+                        dsIconColour: 'primary',
+                        dsFillColour: 'var(--ds-bgColor-secondary-hover)',
+                        dsBorderColour: 'var(--ds-borderColor-primary)',
+                        dsBorderWidth: 'thin',
+                    };
+            case 'current':
+            case 'static':
+            default:
+                return this.isSmall
+                    ? {
+                        dsIcon: 'fiber_manual_record_fill',
+                        dsIconColour: 'primary',
+                        dsBorderWidth: 'none',
+                    }
+                    : {
+                        dsText: this.text,
+                        dsTextColour: 'var(--ds-textColor-white)',
+                        dsFillColour: 'var(--ds-bgColor-primary)',
+                        dsBorderWidth: 'none',
+                    };
+        }
+    }
+    get bulletProps() {
+        return {
+            ...this.sharedProps,
+            ...this.lineProps,
+            ...this.sizeProps,
+        };
+    }
+    render() {
+        return h(this.DsStepBulletBase, { key: 'a62501301642df7c2aed85a005db622ad8bb226a', ...this.bulletProps });
+    }
+};
+declareComponentDependencies([h("ds-step-bullet-base", null)]);
+DsStepBullet.style = dsStepBulletCss();
+
+export { DsStepBullet as ds_step_bullet };

package/dist/esm/ds-step-content-base.entry.js

@@ -0,0 +1,58 @@
+import { M as Mixin, r as registerInstance, e as getElement, h, H as Host } from './index-DHrlezow.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { c as cx } from './cx-CbD7OdM5.js';
+import { c as componentFactory } from './componentFactory-DRKnB2By.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-D5pGK2ZH.js';
+import './store-DYWVDmmN.js';
+
+const dsStepContentBaseCss = () => `.ds-no-style-leak.sc-ds-step-content-base *.sc-ds-step-content-base{all:unset;box-sizing:border-box;display:block}.ds-step-content-base__pA2cRq__host--full-width.sc-ds-step-content-base-h{width:100%}.ds-step-content-base__pA2cRq.sc-ds-step-content-base{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:flex;flex-direction:column;gap:var(--ds-spacing-xSmall);padding-block-end:0;padding-inline:var(--ds-spacing-2xSmall) var(--ds-spacing-medium)}.ds-step-content-base__pA2cRq--full-width.sc-ds-step-content-base{width:100%}.ds-step-content-base__pA2cRq--vertical.sc-ds-step-content-base{padding-block-end:var(--ds-spacing-medium);padding-inline:0}.ds-step-content-base__pA2cRq__heading.sc-ds-step-content-base{margin:0}.ds-step-content-base__pA2cRq__heading--vertical.sc-ds-step-content-base{padding:calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall)) 0 0}.ds-step-content-base__pA2cRq__content.sc-ds-step-content-base{color:var(--ds-textColor-secondary)}.ds-step-content-base__pA2cRq__visually-hidden.sc-ds-step-content-base{display:contents}`;
+
+const DsStepContentBase = class extends Mixin(componentFactory('ds-step-content-base')) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    dsOrientation = 'vertical';
+    dsHeading = '';
+    dsHeadingColour;
+    dsOrdinal;
+    dsHiddenAssistiveText;
+    dsFullWidth = false;
+    dsAriaCurrent = undefined;
+    get DsStep() {
+        return transformTagName('ds-step', 'ds-step-content-base', this.el);
+    }
+    get DsVisuallyHidden() {
+        return transformTagName('ds-visually-hidden', 'ds-step-content-base', this.el);
+    }
+    get isVertical() {
+        return this.dsOrientation === 'vertical';
+    }
+    render() {
+        const baseClass = cx('ds-step-content-base');
+        const hostClasses = classNames({
+            [`${baseClass}__host--full-width`]: this.dsFullWidth,
+        });
+        const classes = classNames(baseClass, {
+            [`${baseClass}--vertical`]: this.isVertical,
+            [`${baseClass}--full-width`]: this.dsFullWidth,
+        });
+        const headingClasses = classNames(`${baseClass}__heading`, 'ds-heading-xs', {
+            [`${baseClass}__heading--vertical`]: this.isVertical,
+        });
+        const headingStyles = {
+            ...(this.dsHeadingColour && { color: this.dsHeadingColour }),
+        };
+        const contentClasses = classNames(`${baseClass}__content`, 'ds-bodytext-md', {});
+        const visuallyHiddenClasses = classNames(`${baseClass}__visually-hidden`);
+        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" })))));
+    }
+};
+declareComponentDependencies([h("ds-visually-hidden", null)]);
+DsStepContentBase.style = dsStepContentBaseCss();
+
+export { DsStepContentBase as ds_step_content_base };

package/dist/esm/ds-step-content.entry.js

@@ -0,0 +1,64 @@
+import { M as Mixin, r as registerInstance, e as getElement, h } from './index-DHrlezow.js';
+import { c as componentFactory } from './componentFactory-DRKnB2By.js';
+import { s as stepFactory } from './stepFactory-CGyfuf-C.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-D5pGK2ZH.js';
+import { g as getLanguage } from './store-DYWVDmmN.js';
+import './stepContext-CEXwfMEs.js';
+
+const dsStepContentCss = () => `.sc-ds-step-content-h{display:contents}`;
+
+const DsStepContent = class extends Mixin(componentFactory('ds-step-content'), stepFactory) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    dsHeading = '';
+    dsFullWidth = false;
+    get DsStepContentBase() {
+        return transformTagName('ds-step-content-base', 'ds-step-content', this.el);
+    }
+    get ordinal() {
+        return this.context?.ordinal ?? 1;
+    }
+    get orientation() {
+        return this.context?.orientation ?? 'vertical';
+    }
+    get phase() {
+        return this.context?.phase ?? 'static';
+    }
+    get stepCompleted() {
+        switch (getLanguage()) {
+            case 'fi':
+                return '(vaihe suoritettu)';
+            case 'sv':
+                return '(steg slutfört)';
+            case 'en':
+            default:
+                return '(step completed)';
+        }
+    }
+    get isCompleted() {
+        return this.phase === 'complete';
+    }
+    get isVertical() {
+        return this.orientation === 'vertical';
+    }
+    get headingColour() {
+        switch (this.phase) {
+            case 'incomplete':
+                return 'var(--ds-textColor-secondary)';
+            case 'current':
+            case 'complete':
+            default:
+                return 'var(--ds-textColor-default)';
+        }
+    }
+    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" })));
+    }
+};
+declareComponentDependencies([h("ds-step-content-base", null)]);
+DsStepContent.style = dsStepContentCss();
+
+export { DsStepContent as ds_step_content };

package/dist/esm/ds-step.entry.js

@@ -0,0 +1,74 @@
+import { r as registerInstance, M as Mixin, e as getElement, h, H as Host } from './index-DHrlezow.js';
+import { c as componentFactory } from './componentFactory-DRKnB2By.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-D5pGK2ZH.js';
+import { s as storeStepContext, p as provideStepContext } from './stepContext-CEXwfMEs.js';
+import { c as consumeStepsContext, C as CONTEXT_UPDATE_EVENT } from './stepsContext-DP0UZ9LR.js';
+import './store-DYWVDmmN.js';
+
+const stepsFactory = (Base) => {
+    const BaseSteps = class extends Base {
+        constructor(hostRef) {
+            super();
+            registerInstance(this, hostRef);
+        }
+        stepsContext;
+        contextUpdateHandler = (event) => {
+            const customEvent = event;
+            this.stepsContext = customEvent.detail;
+        };
+        connectedCallback() {
+            this.stepsContext = consumeStepsContext(this.el) || undefined;
+            this.el.addEventListener(CONTEXT_UPDATE_EVENT, this.contextUpdateHandler);
+        }
+        disconnectedCallback() {
+            this.el.removeEventListener(CONTEXT_UPDATE_EVENT, this.contextUpdateHandler);
+        }
+    };
+    return BaseSteps;
+};
+
+const dsStepCss = () => `.sc-ds-step-h{display:contents}`;
+
+const DsStep = class extends Mixin(componentFactory('ds-step'), stepsFactory) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    dsOrientation;
+    dsPhase = 'static';
+    dsOrdinal;
+    dsFullWidth = false;
+    get DsStepBase() {
+        return transformTagName('ds-step-base', 'ds-step', this.el);
+    }
+    get resolvedOrientation() {
+        return this.dsOrientation ?? this.stepsContext?.orientation ?? 'vertical';
+    }
+    createContext = () => {
+        return {
+            orientation: this.resolvedOrientation,
+            phase: this.dsPhase,
+            ordinal: this.dsOrdinal,
+        };
+    };
+    storeContext = () => {
+        storeStepContext(this.el, this.createContext());
+    };
+    updateContext = () => {
+        provideStepContext(this.el, this.createContext());
+    };
+    componentWillLoad() {
+        this.storeContext();
+    }
+    componentDidUpdate() {
+        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" }))));
+    }
+};
+declareComponentDependencies([h("ds-step-base", null)]);
+DsStep.style = dsStepCss();
+
+export { DsStep as ds_step };

package/dist/esm/ds-steps.entry.js

@@ -0,0 +1,45 @@
+import { M as Mixin, r as registerInstance, e as getElement, h, H as Host } from './index-DHrlezow.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { c as cx } from './cx-CbD7OdM5.js';
+import { c as componentFactory } from './componentFactory-DRKnB2By.js';
+import { s as storeStepsContext, p as provideStepsContext } from './stepsContext-DP0UZ9LR.js';
+import './utils-D5pGK2ZH.js';
+import './store-DYWVDmmN.js';
+
+const dsStepsCss = () => `.ds-no-style-leak.sc-ds-steps *.sc-ds-steps{all:unset;box-sizing:border-box;display:block}.sc-ds-steps-h{display:contents}.ds-steps__pA2cRq.sc-ds-steps{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:flex;list-style:none;flex-direction:row}.ds-steps__pA2cRq--vertical.sc-ds-steps{flex-direction:column}`;
+
+const DsSteps = class extends Mixin(componentFactory('ds-steps')) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    dsOrientation = 'vertical';
+    createContext = () => {
+        return {
+            orientation: this.dsOrientation,
+        };
+    };
+    storeContext = () => {
+        storeStepsContext(this.el, this.createContext());
+    };
+    updateContext = () => {
+        provideStepsContext(this.el, this.createContext());
+    };
+    componentWillLoad() {
+        this.storeContext();
+    }
+    componentDidUpdate() {
+        this.updateContext();
+    }
+    render() {
+        const baseClass = cx('ds-steps');
+        const classes = classNames(baseClass, {
+            [`${baseClass}--vertical`]: this.dsOrientation === 'vertical',
+        });
+        return (h(Host, { key: 'e4a50c4727554978e3b57247fe885ff938633926', role: "list", class: classes }, h("slot", { key: '6e21c38a3f5425cb5635c677a52ad12e71121ea2' })));
+    }
+};
+DsSteps.style = dsStepsCss();
+
+export { DsSteps as ds_steps };

package/dist/esm/ds-store.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent } from './index-CGO6i46S.js';
-import { d as defaultLanguage, i as initialize, s as setLanguage, g as getLanguage } from './store-a5NsO1Yj.js';
+import { r as registerInstance, c as createEvent } from './index-DHrlezow.js';
+import { d as defaultLanguage, i as initialize, s as setLanguage, g as getLanguage } from './store-DYWVDmmN.js';
 
 const DsStore = class {
     constructor(hostRef) {

package/dist/esm/ds-tab.entry.js

@@ -1,14 +1,14 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-CGO6i46S.js';
-import { c as cx } from './cx-WIIvD8un.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-DHrlezow.js';
+import { c as cx } from './cx-CbD7OdM5.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
-import { t as tabsFactory } from './tabsFactory-DMKi3aFP.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-D5pGK2ZH.js';
+import { t as tabsFactory } from './tabsFactory-DFPib_cF.js';
 import { g as getIconColourVariable } from './iconList-y2yISPfD.js';
-import { c as componentFactory } from './componentFactory-BbacL2PN.js';
-import './tabsContext-BIhOkMrs.js';
-import './store-a5NsO1Yj.js';
+import { c as componentFactory } from './componentFactory-DRKnB2By.js';
+import './tabsContext-CqIzy1-v.js';
+import './store-DYWVDmmN.js';
 
-const dsTabCss = () => `.ds-no-style-leak.sc-ds-tab *.sc-ds-tab{all:unset;box-sizing:border-box;display:block}.sc-ds-tab-h{display:contents}.ds-tab__WN0Emr.sc-ds-tab{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative;display:inline-flex;flex-direction:row;flex-shrink:0;min-width:44px;min-height:44px;padding:var(--ds-spacing-xSmall);background-color:var(--ds-bgColor-transparent-onLight);color:var(--ds-textColor-secondary);font-variant-numeric:lining-nums proportional-nums;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-style:normal;font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);cursor:default}@media (min-width: 60rem){.ds-tab__WN0Emr.sc-ds-tab{font-size:var(--ds-fontSize-18)}}.ds-tab__WN0Emr--selected.sc-ds-tab,.ds-tab__WN0Emr.sc-ds-tab:hover:not(.ds-tab__WN0Emr--selected),.ds-tab__WN0Emr.sc-ds-tab:active:not(.ds-tab__WN0Emr--selected){color:var(--ds-textColor-default)}.ds-tab__WN0Emr--container.sc-ds-tab: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__WN0Emr--container.ds-tab__WN0Emr--selected.sc-ds-tab{background-color:var(--ds-bgColor-white)}.ds-tab__WN0Emr--container.ds-tab__WN0Emr--selected.sc-ds-tab::after{content:"";position:absolute;top:0;left:0;right:0;border-block-start:var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary)}.ds-tab__WN0Emr--container.ds-tab__WN0Emr--selected.sc-ds-tab:not(:focus-visible)::before{content:"";position:absolute;inset:0;border-inline:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default)}.ds-tab__WN0Emr--container.sc-ds-tab:hover:not(.ds-tab__WN0Emr--selected){background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-tab__WN0Emr--container.sc-ds-tab:active:not(.ds-tab__WN0Emr--selected){background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-tab__WN0Emr--line.sc-ds-tab:focus-visible .ds-tab__WN0Emr__content.sc-ds-tab{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__WN0Emr--line.ds-tab__WN0Emr--selected.sc-ds-tab::after{content:"";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary)}.ds-tab__WN0Emr--line.sc-ds-tab:hover:not(.ds-tab__WN0Emr--selected)::after{content:"";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-default)}.ds-tab__WN0Emr--line.sc-ds-tab:active:not(.ds-tab__WN0Emr--selected)::after{content:"";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-black)}.ds-tab__WN0Emr.sc-ds-tab .ds-tab__WN0Emr__content.sc-ds-tab{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--ds-spacing-2xSmall)}`;
+const dsTabCss = () => `.ds-no-style-leak.sc-ds-tab *.sc-ds-tab{all:unset;box-sizing:border-box;display:block}.sc-ds-tab-h{display:contents}.ds-tab__pA2cRq.sc-ds-tab{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative;display:inline-flex;flex-direction:row;flex-shrink:0;min-width:44px;min-height:44px;padding:var(--ds-spacing-xSmall);background-color:var(--ds-bgColor-transparent-onLight);color:var(--ds-textColor-secondary);font-variant-numeric:lining-nums proportional-nums;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-style:normal;font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);cursor:default}@media (min-width: 60rem){.ds-tab__pA2cRq.sc-ds-tab{font-size:var(--ds-fontSize-18)}}.ds-tab__pA2cRq--selected.sc-ds-tab,.ds-tab__pA2cRq.sc-ds-tab:hover:not(.ds-tab__pA2cRq--selected),.ds-tab__pA2cRq.sc-ds-tab:active:not(.ds-tab__pA2cRq--selected){color:var(--ds-textColor-default)}.ds-tab__pA2cRq--container.sc-ds-tab: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.sc-ds-tab{background-color:var(--ds-bgColor-white)}.ds-tab__pA2cRq--container.ds-tab__pA2cRq--selected.sc-ds-tab::after{content:"";position:absolute;top:0;left:0;right:0;border-block-start:var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary)}.ds-tab__pA2cRq--container.ds-tab__pA2cRq--selected.sc-ds-tab:not(:focus-visible)::before{content:"";position:absolute;inset:0;border-inline:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default)}.ds-tab__pA2cRq--container.sc-ds-tab:hover:not(.ds-tab__pA2cRq--selected){background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-tab__pA2cRq--container.sc-ds-tab:active:not(.ds-tab__pA2cRq--selected){background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-tab__pA2cRq--line.sc-ds-tab:focus-visible .ds-tab__pA2cRq__content.sc-ds-tab{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.sc-ds-tab::after{content:"";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary)}.ds-tab__pA2cRq--line.sc-ds-tab:hover:not(.ds-tab__pA2cRq--selected)::after{content:"";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-default)}.ds-tab__pA2cRq--line.sc-ds-tab:active:not(.ds-tab__pA2cRq--selected)::after{content:"";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-black)}.ds-tab__pA2cRq.sc-ds-tab .ds-tab__pA2cRq__content.sc-ds-tab{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--ds-spacing-2xSmall)}`;
 
 const DsTab = class extends Mixin(componentFactory('ds-tab'), tabsFactory) {
     constructor(hostRef) {
@@ -26,7 +26,9 @@ const DsTab = class extends Mixin(componentFactory('ds-tab'), tabsFactory) {
     dsTabPanelId;
     dsText;
     dsIconStart;
+    dsIconStartAriaLabel;
     dsIconEnd;
+    dsIconEndAriaLabel;
     dsIconEndColour;
     hasPrefixSlot = false;
     hasContentSlot = false;
@@ -106,7 +108,12 @@ const DsTab = class extends Mixin(componentFactory('ds-tab'), tabsFactory) {
             [`${baseClass}--line`]: this.context?.variant === 'line',
             [`${baseClass}--selected`]: isSelected,
         });
-        return (h("div", { key: '0a6c6d728f3cd2a94607841b48bbe3175ce8eb9c', ref: el => (this.tabElement = el), class: classes, role: "tab", "aria-controls": this.dsTabPanelId, "aria-selected": String(isSelected), tabIndex: isSelected ? 0 : -1 }, h("div", { key: '74dda6d84b96ba52bd27d7d26981dd0ac6aefa8d', class: `${baseClass}__content` }, h("slot", { key: 'd86cfa386a03900c9fc4ef8d8742b06ddbe1b894', name: "prefix", onSlotchange: this.checkPrefixSlot }, !this.hasPrefixSlot && this.dsIconStart && h(this.DsIcon, { key: '8fefb92b506fdb891d0ae2e0b09e9e88ca3c3781', dsName: this.dsIconStart })), h("slot", { key: 'bfac3a742edef0839bfc7e4d172fc4c494ead1f2', name: "content", onSlotchange: this.checkContentSlot }, !this.hasContentSlot && h("span", { key: '59accad649404c11f74b4883e3296286871cb323' }, this.dsText)), h("slot", { key: 'b3816680181748f8a3726066657ae832eb2698e4', name: "suffix", onSlotchange: this.checkSuffixSlot }, !this.hasSuffixSlot && this.dsIconEnd && h(this.DsIcon, { key: '4a1c073f90003442bd88aaa1ec4bb77925ea5aed', dsName: this.dsIconEnd, dsColour: this.iconColour })))));
+        const iconProps = (ariaLabel, colour) => ({
+            dsAriaHidden: !ariaLabel,
+            ...(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) })))));
     }
 };
 declareComponentDependencies([h("ds-icon", { dsName: "" })]);