@uh-design-system/component-library 1.6.0 → 1.7.0-rc.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-DvpMvX1M.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 { c as cx } from './cx-BrOdPf9x.js';
+import { c as componentFactory } from './componentFactory-BFyiMxsr.js';
+import './store-c20XLOUp.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__oJU1eo{display:inline-block}.ds-spinner__oJU1eo:has(.ds-spinner__oJU1eo__text){display:inline-flex;align-items:center;gap:calc(var(--spinner-size) / 2)}.ds-spinner__oJU1eo{}.ds-spinner__oJU1eo--small{padding:1.5px}.ds-spinner__oJU1eo--medium{padding:3px}.ds-spinner__oJU1eo--large{padding:3px}.ds-spinner__oJU1eo--xLarge{padding:5.5px}.ds-spinner__oJU1eo--2xLarge{padding:5.5px}.ds-spinner__oJU1eo--custom{padding:calc(var(--spinner-size) / 8)}.ds-spinner__oJU1eo{}.ds-spinner__oJU1eo--below{flex-direction:column;align-items:center}.ds-spinner__oJU1eo--right{flex-direction:row;align-items:center}.ds-spinner__oJU1eo__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__oJU1eo__text{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body)}.ds-spinner__oJU1eo__text--white{color:var(--ds-textColor-white)}.ds-spinner__oJU1eo__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__oJU1eo__segment--1{animation-delay:-0.3s}.ds-spinner__oJU1eo__segment--2{animation-delay:-0.2s}.ds-spinner__oJU1eo__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__oJU1eo__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__oJU1eo__segment--1{animation-delay:-0.6s}.ds-spinner__oJU1eo__segment--2{animation-delay:-0.4s}.ds-spinner__oJU1eo__segment--3{animation-delay:-0.2s}}`;
 
 const SPINNER_SIZES = {
     'small': 10,

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-DvpMvX1M.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { c as cx } from './cx-BrOdPf9x.js';
+import { c as componentFactory } from './componentFactory-BFyiMxsr.js';
+import './utils-CRB48Q9-.js';
+import './store-c20XLOUp.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__oJU1eo__host--full-width.sc-ds-step-base-h{flex:1}.ds-step-base__oJU1eo.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__oJU1eo--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: '702427499d88dc226b042bf108784317d44fec82', class: hostClasses }, h("div", { key: 'bff29411a1d598a0379ed46505d2ae1f067a8087', class: classes }, h("slot", { key: '1c41190c0002d2c56acef366611ef641f9f83da3', name: "bullet" }), h("slot", { key: '671405e298b9cbb25915c4d084fcac48ada22dc7', 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-DvpMvX1M.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { c as cx } from './cx-BrOdPf9x.js';
+import { c as componentFactory } from './componentFactory-BFyiMxsr.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import './store-c20XLOUp.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__oJU1eo.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__oJU1eo--vertical.sc-ds-step-bullet-base{flex-direction:column;align-items:center;justify-content:flex-start;width:auto;height:100%}.ds-step-bullet-base__oJU1eo__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__oJU1eo__bullet--small.sc-ds-step-bullet-base{width:2rem;height:1.5rem}.ds-step-bullet-base__oJU1eo__bullet--small.ds-step-bullet-base__oJU1eo__bullet--vertical.sc-ds-step-bullet-base{width:1.5rem;height:2rem}.ds-step-bullet-base__oJU1eo__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__oJU1eo__line--small.sc-ds-step-bullet-base{margin-inline:0}.ds-step-bullet-base__oJU1eo__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__oJU1eo__line--no-line.ds-step-bullet-base__oJU1eo__line--vertical.sc-ds-step-bullet-base{min-height:0}.ds-step-bullet-base__oJU1eo__line--small.ds-step-bullet-base__oJU1eo__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: 'ab693e813640c737467eeec36915bb942480b266', class: classes, "aria-hidden": "true" }, h("div", { key: 'dfb3bc6a41186ed711b43390b06124a2161ff8c4', class: bulletClass, style: bulletStyle }, this.dsText, this.dsIcon && h(this.DsIcon, { key: '2ce405fc278a00d0015c0519da4023c6bfeb769a', dsSize: this.iconSize, dsName: this.dsIcon, dsColour: this.dsIconColour })), this.dsLineWidth !== 'none' && h("div", { key: '16d995f7424b4c3076885da142dd2915c5755ba5', 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-DvpMvX1M.js';
+import { c as componentFactory } from './componentFactory-BFyiMxsr.js';
+import { s as stepFactory } from './stepFactory-BsW62oAL.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import './store-c20XLOUp.js';
+import './stepContext-BRxngxAe.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: '10dbf01b6c20369865b1ff0e7b50bfdc0ceac609', ...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-DvpMvX1M.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { c as cx } from './cx-BrOdPf9x.js';
+import { c as componentFactory } from './componentFactory-BFyiMxsr.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import './store-c20XLOUp.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__oJU1eo__host--full-width.sc-ds-step-content-base-h{width:100%}.ds-step-content-base__oJU1eo.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__oJU1eo--full-width.sc-ds-step-content-base{width:100%}.ds-step-content-base__oJU1eo--vertical.sc-ds-step-content-base{padding-block-end:var(--ds-spacing-medium);padding-inline:0}.ds-step-content-base__oJU1eo__heading.sc-ds-step-content-base{margin:0}.ds-step-content-base__oJU1eo__heading--vertical.sc-ds-step-content-base{padding:calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall)) 0 0}.ds-step-content-base__oJU1eo__content.sc-ds-step-content-base{color:var(--ds-textColor-secondary)}.ds-step-content-base__oJU1eo__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: 'a4b578452c6444484dbb2326663d59d6fec4756f', class: hostClasses }, h("div", { key: '6b542f4eb6467fc80c2c4cbea46916d44c5f59d5', class: classes }, h("slot", { key: 'fd2996c183ef30c17232da6eb957b19135a3fe32', name: "heading" }), !!this.dsHeading && (h("span", { key: '405501ecc67437587c9019a778a67c47b2f3f072', class: headingClasses, style: headingStyles, ...headingAriaAttributes }, this.dsOrdinal !== undefined && (h(this.DsVisuallyHidden, { key: '39a4ed9be7972e255d3b5d77b15ace717b9c9c0b', class: visuallyHiddenClasses, dsTag: "span" }, this.dsOrdinal, ".\u00A0")), this.dsHeading, this.dsHiddenAssistiveText && (h(this.DsVisuallyHidden, { key: '3763f20e05886bc920bbda5d015267d8d14f9488', class: visuallyHiddenClasses, dsTag: "span" }, "\u00A0", this.dsHiddenAssistiveText)))), h("div", { key: '5fa8d2cdaa1cb9a8594ca71916124f5e767e7aeb', class: contentClasses }, h("slot", { key: '5d4f89328a536aff75a628f60d94a5ab1d7e0d21', 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-DvpMvX1M.js';
+import { c as componentFactory } from './componentFactory-BFyiMxsr.js';
+import { s as stepFactory } from './stepFactory-BsW62oAL.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { g as getLanguage } from './store-c20XLOUp.js';
+import './stepContext-BRxngxAe.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: '307466ac884abff2e2860aae11e6ce236d5344b0', 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: '8cb2226ff31aad295d0cc7499b75e1bd43149f1d', name: "heading", slot: "heading" }), h("slot", { key: '4f2d80c4ddfe7879079f007d052a71aad7f2cedb', 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-DvpMvX1M.js';
+import { c as componentFactory } from './componentFactory-BFyiMxsr.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { s as storeStepContext, p as provideStepContext } from './stepContext-BRxngxAe.js';
+import { c as consumeStepsContext, C as CONTEXT_UPDATE_EVENT } from './stepsContext-Bw7HdEoF.js';
+import './store-c20XLOUp.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: '9343852bcdb6f739259ad61ba394db7cad2462f7', role: "listitem" }, h(this.DsStepBase, { key: '7f0691a155739762fd9a798024946b7ed7023b6c', dsOrientation: this.resolvedOrientation, dsFullWidth: this.dsFullWidth }, h("slot", { key: 'f5014bd51c19af8eb9e57600dcf8bd814e4c33ff', name: "bullet" }), h("slot", { key: '4f87280400f455f724d2cc6dddffefe9aa5ccf53', 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-DvpMvX1M.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { c as cx } from './cx-BrOdPf9x.js';
+import { c as componentFactory } from './componentFactory-BFyiMxsr.js';
+import { s as storeStepsContext, p as provideStepsContext } from './stepsContext-Bw7HdEoF.js';
+import './utils-CRB48Q9-.js';
+import './store-c20XLOUp.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__oJU1eo.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__oJU1eo--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: '3607f477d5cb05de497036610fb33c4cbde4d675', role: "list", class: classes }, h("slot", { key: '2812a57c0e4bda2061fd4ba2cd476e3b1fe17c76' })));
+    }
+};
+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-DvpMvX1M.js';
+import { d as defaultLanguage, i as initialize, s as setLanguage, g as getLanguage } from './store-c20XLOUp.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-DvpMvX1M.js';
+import { c as cx } from './cx-BrOdPf9x.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 tabsFactory } from './tabsFactory-CPzY2Z2V.js';
 import { g as getIconColourVariable } from './iconList-y2yISPfD.js';
-import { c as componentFactory } from './componentFactory-BbacL2PN.js';
+import { c as componentFactory } from './componentFactory-BFyiMxsr.js';
 import './tabsContext-BIhOkMrs.js';
-import './store-a5NsO1Yj.js';
+import './store-c20XLOUp.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__oJU1eo.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__oJU1eo.sc-ds-tab{font-size:var(--ds-fontSize-18)}}.ds-tab__oJU1eo--selected.sc-ds-tab,.ds-tab__oJU1eo.sc-ds-tab:hover:not(.ds-tab__oJU1eo--selected),.ds-tab__oJU1eo.sc-ds-tab:active:not(.ds-tab__oJU1eo--selected){color:var(--ds-textColor-default)}.ds-tab__oJU1eo--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__oJU1eo--container.ds-tab__oJU1eo--selected.sc-ds-tab{background-color:var(--ds-bgColor-white)}.ds-tab__oJU1eo--container.ds-tab__oJU1eo--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__oJU1eo--container.ds-tab__oJU1eo--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__oJU1eo--container.sc-ds-tab:hover:not(.ds-tab__oJU1eo--selected){background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-tab__oJU1eo--container.sc-ds-tab:active:not(.ds-tab__oJU1eo--selected){background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-tab__oJU1eo--line.sc-ds-tab:focus-visible .ds-tab__oJU1eo__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__oJU1eo--line.ds-tab__oJU1eo--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__oJU1eo--line.sc-ds-tab:hover:not(.ds-tab__oJU1eo--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__oJU1eo--line.sc-ds-tab:active:not(.ds-tab__oJU1eo--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__oJU1eo.sc-ds-tab .ds-tab__oJU1eo__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) {

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

@@ -1,13 +1,13 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-CGO6i46S.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-DvpMvX1M.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { c as cx } from './cx-WIIvD8un.js';
+import { c as cx } from './cx-BrOdPf9x.js';
 import { t as transformTagName, m as throttle, a as ifDefined, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
-import { t as tabsFactory } from './tabsFactory-DMKi3aFP.js';
-import { c as componentFactory } from './componentFactory-BbacL2PN.js';
+import { t as tabsFactory } from './tabsFactory-CPzY2Z2V.js';
+import { c as componentFactory } from './componentFactory-BFyiMxsr.js';
 import './tabsContext-BIhOkMrs.js';
-import './store-a5NsO1Yj.js';
+import './store-c20XLOUp.js';
 
-const dsTablistCss = () => `.ds-no-style-leak.sc-ds-tablist *.sc-ds-tablist{all:unset;box-sizing:border-box;display:block}.ds-tablist__WN0Emr.sc-ds-tablist{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative}.ds-tablist__WN0Emr.sc-ds-tablist .ds-tablist__WN0Emr__scrollable.sc-ds-tablist{display:flex;gap:var(--ds-spacing-2xSmall);overflow-x:auto;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}.ds-tablist__WN0Emr.sc-ds-tablist .ds-tablist__WN0Emr__scrollable.sc-ds-tablist:focus,.ds-tablist__WN0Emr.sc-ds-tablist .ds-tablist__WN0Emr__scrollable.sc-ds-tablist:focus-visible,.ds-tablist__WN0Emr.sc-ds-tablist .ds-tablist__WN0Emr__scrollable.sc-ds-tablist:-moz-focusring{outline:none;box-shadow:none}.ds-tablist__WN0Emr.sc-ds-tablist .ds-tablist__WN0Emr__scrollable--container.sc-ds-tablist{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__WN0Emr.sc-ds-tablist .ds-tablist__WN0Emr__scrollable--line.sc-ds-tablist{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__WN0Emr.sc-ds-tablist .ds-tablist__WN0Emr__button.sc-ds-tablist{position:absolute;top:0;bottom:0;display:flex;aspect-ratio:1;justify-content:center;align-items:center}.ds-tablist__WN0Emr.sc-ds-tablist .ds-tablist__WN0Emr__button--backward.sc-ds-tablist{left:0}.ds-tablist__WN0Emr.sc-ds-tablist .ds-tablist__WN0Emr__button--forward.sc-ds-tablist{right:0}.ds-tablist__WN0Emr.sc-ds-tablist .ds-tablist__WN0Emr__button--container.sc-ds-tablist{border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-neutralLight)}.ds-tablist__WN0Emr.sc-ds-tablist .ds-tablist__WN0Emr__button--line.sc-ds-tablist{border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white)}.ds-tablist__WN0Emr.sc-ds-tablist .ds-tablist__WN0Emr__button--container.ds-tablist__WN0Emr__button--backward.sc-ds-tablist::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 calc(-1 * var(--ds-spacing-small)) 0 0)}.ds-tablist__WN0Emr.sc-ds-tablist .ds-tablist__WN0Emr__button--container.ds-tablist__WN0Emr__button--forward.sc-ds-tablist::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 0 0 calc(-1 * var(--ds-spacing-small)))}.ds-tablist__WN0Emr.sc-ds-tablist .ds-tablist__WN0Emr__button[hidden].sc-ds-tablist{display:none}.ds-tablist__WN0Emr.sc-ds-tablist .ds-tablist__WN0Emr__button__ds-button.sc-ds-tablist{width:100%;height:100%}`;
+const dsTablistCss = () => `.ds-no-style-leak.sc-ds-tablist *.sc-ds-tablist{all:unset;box-sizing:border-box;display:block}.ds-tablist__oJU1eo.sc-ds-tablist{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative}.ds-tablist__oJU1eo.sc-ds-tablist .ds-tablist__oJU1eo__scrollable.sc-ds-tablist{display:flex;gap:var(--ds-spacing-2xSmall);overflow-x:auto;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}.ds-tablist__oJU1eo.sc-ds-tablist .ds-tablist__oJU1eo__scrollable.sc-ds-tablist:focus,.ds-tablist__oJU1eo.sc-ds-tablist .ds-tablist__oJU1eo__scrollable.sc-ds-tablist:focus-visible,.ds-tablist__oJU1eo.sc-ds-tablist .ds-tablist__oJU1eo__scrollable.sc-ds-tablist:-moz-focusring{outline:none;box-shadow:none}.ds-tablist__oJU1eo.sc-ds-tablist .ds-tablist__oJU1eo__scrollable--container.sc-ds-tablist{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__oJU1eo.sc-ds-tablist .ds-tablist__oJU1eo__scrollable--line.sc-ds-tablist{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__oJU1eo.sc-ds-tablist .ds-tablist__oJU1eo__button.sc-ds-tablist{position:absolute;top:0;bottom:0;display:flex;aspect-ratio:1;justify-content:center;align-items:center}.ds-tablist__oJU1eo.sc-ds-tablist .ds-tablist__oJU1eo__button--backward.sc-ds-tablist{left:0}.ds-tablist__oJU1eo.sc-ds-tablist .ds-tablist__oJU1eo__button--forward.sc-ds-tablist{right:0}.ds-tablist__oJU1eo.sc-ds-tablist .ds-tablist__oJU1eo__button--container.sc-ds-tablist{border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-neutralLight)}.ds-tablist__oJU1eo.sc-ds-tablist .ds-tablist__oJU1eo__button--line.sc-ds-tablist{border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white)}.ds-tablist__oJU1eo.sc-ds-tablist .ds-tablist__oJU1eo__button--container.ds-tablist__oJU1eo__button--backward.sc-ds-tablist::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 calc(-1 * var(--ds-spacing-small)) 0 0)}.ds-tablist__oJU1eo.sc-ds-tablist .ds-tablist__oJU1eo__button--container.ds-tablist__oJU1eo__button--forward.sc-ds-tablist::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 0 0 calc(-1 * var(--ds-spacing-small)))}.ds-tablist__oJU1eo.sc-ds-tablist .ds-tablist__oJU1eo__button[hidden].sc-ds-tablist{display:none}.ds-tablist__oJU1eo.sc-ds-tablist .ds-tablist__oJU1eo__button__ds-button.sc-ds-tablist{width:100%;height:100%}`;
 
 const DsTablist = class extends Mixin(componentFactory('ds-tablist'), tabsFactory) {
     constructor(hostRef) {