q2-tecton-elements 1.70.2 → 1.71.0

package/dist/collection/components/q2-relative-time/q2-relative-time.css

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 :host {
   display: inline;
 }

package/dist/collection/components/q2-relative-time/q2-relative-time.js

@@ -153,7 +153,7 @@ export class Q2RelativeTime {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: '0d8c6b23a5af08e1fbb7e8d5c48248bf6676427a' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: '48a6ad8165ea3380500edb280142a47e0a7a6848' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     static get is() { return "q2-relative-time"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-resize-observer/q2-resize-observer.css

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 :host(:not([hidden])) {
   display: block;
   width: 100%;

package/dist/collection/components/q2-resize-observer/q2-resize-observer.js

@@ -76,7 +76,7 @@ export class Q2ResizeObserver {
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: 'dbf5c5c896f9ab48a32ce58a4ffcf7bf287920e2', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: 'f5cc2cee6e979f047d3854d243ec3560ae5cb35d', onSlotchange: this.handleSlotChange });
     }
     static get is() { return "q2-resize-observer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-search/q2-search.css

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 .q2-element-dropdown {
   display: none;
   position: absolute;

package/dist/collection/components/q2-search/q2-search.js

@@ -762,7 +762,7 @@ export class Q2Search {
         return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: (_a = this.innerInputContainer) !== null && _a !== void 0 ? _a : undefined, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, align: useBlock ? undefined : this.popoverAlignment, block: useBlock }, h("div", { class: "popover-content", "data-loading": this.loading ? 'true' : 'false', "aria-busy": this.loading ? 'true' : null }, h("div", { class: "popover-top-container", hidden: !this.hasPopoverTop && !(this.multiple && this.showSelectedToggle), tabindex: "-1" }, h("slot", { name: "popover-top" }), !this.loading && this.renderMultiSelectHeader()), h("q2-option-list", { ref: el => (this.optionList = el), type: "listbox", id: this.optionListId, label: loc(this.listLabel), multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, showSelected: this.showSelected, customSearch: true, hidden: this.loading, onChange: (e) => e.stopPropagation(), onTctChange: this.onOptionListChange }, h("slot", null)), showEmpty && this.renderEmpty(), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" })), this.loading && (h("div", { class: "loading-overlay", "aria-hidden": "true" }, h("q2-loading", { type: "spinner" }))))));
     }
     render() {
-        return (h(Fragment, { key: '0686476c153375c6c3cca61cdeaf1267c5ca6b20' }, h("div", { key: 'f5ed583b8da30b2222dd4a466a37e1c10b589fa7', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: 'f1172a06706ea799f6020d21610004450e051d9a', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: '75675f105bd09279650e6aae6b869e0f3f99c270', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => loc(e))) ||
+        return (h(Fragment, { key: '7639a6dccbd55360c35c03c357fd64552dd9d2ba' }, h("div", { key: 'bf893491af923c9c2dc404a137df754297bd3ad5', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: '73e0045d7fc40c5d57fe26ed2993da24d5d42a04', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: '5328d7d706f2f8bf3e8433d90c32e51b6abf4122', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => loc(e))) ||
                 (this.invalid && ['tecton.element.search.invalid']) ||
                 [], ariaExpanded: this.isInputOnlyMode ? undefined : `${this.open}`, ariaControls: this.isInputOnlyMode ? undefined : this.optionListId, ariaHaspopup: this.isInputOnlyMode ? undefined : 'listbox', hideMessages: true, _role: this.isInputOnlyMode ? undefined : 'combobox', onTctInput: this.inputInputHandler, onInput: (e) => e.stopImmediatePropagation(), onChange: (e) => e.stopPropagation(), onTctChange: (e) => e.stopPropagation(), badgeValue: this.badgeValue }, this.renderCustomDisplay()), this.renderOptionsDropdown())));
     }

package/dist/collection/components/q2-section/q2-section.css

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 /**
  * @prop --tct-section-background: (<color>) Controls the background color of the section host.
  * @prop --tct-section-font-color: (<color>) Controls the text color of the section host.
@@ -153,7 +175,7 @@ header.has-header {
 
 .title {
   margin: var(--tct-section-title-margin, 0);
-  font-size: var(--tct-section-title-font-size, 20px);
+  font-size: var(--tct-section-title-font-size, var(--const-px-20, 20px));
   font-weight: var(--tct-section-title-font-weight, 600);
   text-transform: var(--tct-section-title-text-transform, none);
   letter-spacing: var(--tct-section-title-letter-spacing, inherit);

package/dist/collection/components/q2-section/q2-section.js

@@ -186,9 +186,9 @@ export class Q2Section {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: 'fef43a753a5f82554569f965bb88b70cbb24043e', class: "wrapper" }, h("header", { key: '3264ae1607e329fdf4564487ae89764b04e06048', class: hasHeader ? 'has-header' : '' }, h("div", { key: '4c8b304af8e393a1c9a0a971b4a2d5d8167e7457', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '8c5596a84ff08bab2f609a9015742537582281a9', class: "title" }, loc(this.label)), h("div", { key: 'f878fc2435f6b4cf0b74d50f8e139d18e68ffad0', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '7f90b9e6324506cdd8dc2e5c3f43ea089697c0eb', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '954e6e8b13a756ba6bb84fdcce993206240d48ca', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '9e6c325cd0c7240bc83caf003d982203e087f05c', type: "chevron-up" })))), h("div", { key: '492631bdd203cbf9c7803eb274b38759cc792691', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: '5dbed551d8571ef48b81fe7fc40b0c56db2d685a', class: "wrapper" }, h("header", { key: 'dfc3bc20a49856a2fcdee6b5cae1626e32ff5416', class: hasHeader ? 'has-header' : '' }, h("div", { key: 'b9073b701f1006f8048cac33b4cae9e44888c8e2', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: 'd701205c1808c6eaf2b7f3739c7488d934cf1cc0', class: "title" }, loc(this.label)), h("div", { key: '5428fcecafd6e84a884783c0cc1223cb91160f69', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'f7d873afc6f319c259e11db10e7cf2d3010ca3c6', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '6143342070b00156a36db039dee5e19a1a6cbe2f', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '297304e09f1b60c2a3e4d8146ff7b75f14d64e5c', type: "chevron-up" })))), h("div", { key: '3a78d8a8ffde28f5e006fd988f6d01463758c4c1', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: '25820c4723394811d1ee1c9ad14dfd915539dd84', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'c492a1211b2791974974cd370b67c992580b758c', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: '0c7019101641ae7d05772a9ec4e8c16ca40e1112', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '49a17e0cd8279255eec0dc2d7344dc0fa260dc46', ref: (el) => (this.contentSlot = el) })))));
     }
     static get is() { return "q2-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-section/test/q2-section-test.vr.js

@@ -1,6 +1,6 @@
 import { expect } from "@playwright/test";
 import { test } from "@stencil/playwright";
-import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
 const VARIANTS = [
     {
         name: 'default',
@@ -65,3 +65,13 @@ test.describe('q2-section — variants × themes', () => {
         }
     }
 });
+// 'default' renders the section title, exercising --tct-section-title-font-size.
+const DEFAULT_SECTION_VARIANT = VARIANTS.find(v => v.name === 'default');
+test.describe(`q2-section — scaled font size × themes`, () => {
+    for (const theme of THEMES) {
+        test(`q2-section--default--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+            await setupPage(page, DEFAULT_SECTION_VARIANT.html, { theme, fontSizePx: FONT_SCALE_PX });
+            await expect(page).toHaveScreenshot(`q2-section--default--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+    }
+});

package/dist/collection/components/q2-select/q2-select.css

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 .q2-element-dropdown {
   display: none;
   position: absolute;

package/dist/collection/components/q2-stepper/q2-stepper.css

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 /**
  * @prop --tct-stepper-min-height: (<length>) Controls the minimum height of each step list item.
  * @prop --tct-stepper-list-padding: (<length-percentage>+) Controls the inner padding of the step list.
@@ -106,17 +128,29 @@ button {
   position: relative;
 }
 
+.sr-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
 ul {
   --comp-bullet-background: var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));
   --comp-divider-color: var(--tct-stepper-bullet-active-divider-color, var(--comp-bullet-background));
   --comp-bullet-font-color: var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));
   --comp-bullet-size: var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));
   --comp-bullet-gap: var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));
-  --comp-bullet-font-size: var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));
+  --comp-bullet-font-size: var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, var(--const-px-16, 16px)));
   --comp-step-width: var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));
   --comp-step-gap: var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));
   --comp-btn-icon-size: var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));
-  --comp-btn-label-font-size: var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));
+  --comp-btn-label-font-size: var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, var(--const-px-16, 16px)));
   --comp-btn-icon-visibility: var(--tct-stepper-btn-icon-visibility, visible);
   --comp-tween: var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));
   overflow-x: auto;
@@ -276,7 +310,7 @@ li {
 
 .step-label {
   color: var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, inherit)));
-  font-size: var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));
+  font-size: var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, var(--const-px-12, 12px)))));
   line-height: var(--tct-stepper-label-line-height, 1.5em);
   text-overflow: ellipsis;
   overflow: hidden;
@@ -291,7 +325,7 @@ li {
 
 .step-description {
   color: var(--tct-stepper-description-color, var(--t-stepper-description-color, inherit));
-  font-size: var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));
+  font-size: var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, var(--const-px-12, 12px))));
   text-overflow: ellipsis;
   overflow: hidden;
   display: -webkit-box;

package/dist/collection/components/q2-stepper/q2-stepper.js

@@ -208,6 +208,11 @@ export class Q2Stepper {
         const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);
         return (_a = slot === null || slot === void 0 ? void 0 : slot.outerHTML) !== null && _a !== void 0 ? _a : loc(pane[slotName]);
     }
+    getStatusLabel(status) {
+        const statusKey = `tecton.element.stepper.status.${status}`;
+        const statusLabel = loc(statusKey);
+        return statusLabel === statusKey ? status : statusLabel;
+    }
     handleUndefinedStepProperties() {
         const { currentStep, lastEnabledStep } = this;
         if (currentStep && lastEnabledStep)
@@ -260,7 +265,16 @@ export class Q2Stepper {
         const isCurrentStep = stepNumber === currentStep;
         const labelId = !!label && `label-${id}`;
         const descriptionId = !!label && !!description && `description-${id}`;
-        const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);
+        const positionId = `position-${id}`;
+        const statusId = `status-${id}`;
+        const accessibleStatus = status === 'complete' || status === 'error' ? status : 'pending';
+        const positionLabel = loc('tecton.element.stepper.number', {
+            step: `${stepNumber}`,
+            total: `${stepCount}`,
+        });
+        const statusLabel = this.getStatusLabel(accessibleStatus);
+        const labelledBy = label ? `${positionId} ${labelId} ${statusId}` : undefined;
+        const btnLabel = label ? undefined : `${positionLabel}, ${statusLabel}`;
         let statusIcon;
         if (status === 'complete')
             statusIcon = 'success-filled';
@@ -274,14 +288,14 @@ export class Q2Stepper {
         if (isPaneDisabled)
             stepClasses.push('pane-disabled');
         const disabled = isLocked || stepNumber > lastEnabledStep;
-        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-disabled": disabled ? 'true' : undefined, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isPaneDisabled && !disabled && this.onStepClick(ev, stepNumber) }, h(Fragment, null, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), labelId && (h("div", { class: "step-label", id: labelId, innerHTML: sanitizeHTMLString(label) })), labelId && descriptionId && (h("div", { class: "step-description", id: descriptionId, innerHTML: sanitizeHTMLString(description) })))), stepIndex ? h("div", { class: "step-divider" }) : ''));
+        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelledBy, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-disabled": disabled ? 'true' : undefined, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isPaneDisabled && !disabled && this.onStepClick(ev, stepNumber) }, h(Fragment, null, label && (h(Fragment, null, h("span", { class: "sr-only", id: positionId }, positionLabel), h("span", { class: "sr-only", id: statusId }, statusLabel))), statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { "aria-hidden": "true", type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), labelId && (h("div", { class: "step-label", id: labelId, innerHTML: sanitizeHTMLString(label) })), labelId && descriptionId && (h("div", { class: "step-description", id: descriptionId, innerHTML: sanitizeHTMLString(description) })))), stepIndex ? h("div", { class: "step-divider" }) : ''));
     }
     render() {
         const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;
         const containerClasses = ['step-container'];
         if (scrollEnabled)
             containerClasses.push('has-scroll');
-        return (h(Fragment, { key: 'c1e21a36e0b2f684f4520b0f75f78affd73359bd' }, h("div", { key: '3791e857d27aa3fea928f663268f21270d499023', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: '19b689b2b56f52099f22f859264e33e16fd918bf' }, h("div", { key: '5b1b1e00034fa009c555924c2067fed6369740cb', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: 'b5de1b413f6c8ce006207926f26ae845594228eb', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: '832a97c5619cadb1167f6e1e7ecd94ab4f5f3cb1', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '3e53b2b2f19bbba59a37016b9cdf1a302b030b63', type: "chevron-left" })), h("q2-btn", { key: 'ffacbb0d2f9c15a503221a2dbc4662ba6f3c3272', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '2c60dc5392c9c9eec99dd24b229bbd1fa5e9587f', type: "chevron-right" })))), h("ul", { key: '25806a72f9f0cda2e032a81dbaac9f808be385c9', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '622b3ed56e3f66adc33bf197b7874a7b9bf8667f', role: "list" }, h("slot", { key: '73c4321743596227054e317c271bcc044179363b', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: 'cd7a09546e4b74cf98f5e27dbcf0efce71e02781' }, h("div", { key: 'aaa383584217da20fdd01174f4b136dfef0128b7', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: '6f7f38d768b274409606132cc62d36d48812f50c' }, h("div", { key: '98e26550803496a0edd0e7415b4ec9e16b501722', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: '58102ecd26dd3f6b36d530f36ecc109b287b4faa', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: 'a475ba4a846ea5cf93a5ca46422a5473e0d266bd', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'b040f724a926e5c07a81438e3586e0eb7a3c063b', type: "chevron-left" })), h("q2-btn", { key: '119dbcd49ce282cbccd58be097f8833e22df4fb4', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'c656a9493134eb6a4ea0a008ee94829fc708ecfe', type: "chevron-right" })))), h("ul", { key: '09e1472989c7c2e6c40504072bca2790865e013a', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '0b25c172d585892aa9e286dac6080ce2bbb80e1a', role: "list" }, h("slot", { key: '507375368c8e89a94f8af0a44bf4951fd14d7466', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-stepper/test/q2-stepper-test.vr.js

@@ -1,6 +1,6 @@
 import { expect } from "@playwright/test";
 import { test } from "@stencil/playwright";
-import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
 const PANE = (label, body = 'Pane content') => `
     <q2-stepper-pane label="${label}">${body}</q2-stepper-pane>
 `;
@@ -83,3 +83,14 @@ test.describe('q2-stepper — variants × themes', () => {
         }
     }
 });
+// 'with-descriptions' exercises --tct-stepper-btn-label-font-size (step bubble),
+// --tct-stepper-label-font-size (step label), and --tct-stepper-description-font-size.
+const WITH_DESCRIPTIONS_VARIANT = VARIANTS.find(v => v.name === 'with-descriptions');
+test.describe(`q2-stepper — scaled font size × themes`, () => {
+    for (const theme of THEMES) {
+        test(`q2-stepper--with-descriptions--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+            await setupPage(page, WITH_DESCRIPTIONS_VARIANT.html, { theme, fontSizePx: FONT_SCALE_PX });
+            await expect(page).toHaveScreenshot(`q2-stepper--with-descriptions--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+    }
+});

package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.css

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 :host {
   display: block;
   position: relative;

package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js

@@ -73,7 +73,7 @@ export class Q2StepperPane {
     // #region Render Methods
     render() {
         const { label, isActive } = this;
-        return (h(Host, { key: '3b4565db525ccee7c0fa7dbb155d2b96197ebfd7', role: "listitem" }, h(Fragment, { key: 'd54977f7e2b5e83df9dc5fd1a4e881226a9ab463' }, h("div", { key: '1b39fbbc1c1aed19e882179855cb5c7643404693', "aria-label": label && loc(label), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: 'bbda811a3730910b1fbd069d63ab42f8ee24a68a' })), h("div", { key: 'cd22f9a9c30eba355ba5595e9a761e7777bddd14', hidden: true }, h("slot", { key: 'd65e326d7e11e33a66ed9408229d14738ce2e4b6', name: "label", onSlotchange: () => this.contentChange.emit() }), h("slot", { key: 'fca4b7596a892a4e559cda731d30caaa19ad09e6', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: 'a48433438b8a98392d86450bccd3c71941e3d88b', name: "children" }))));
+        return (h(Host, { key: '7acf643f717380c37eb25334534afbca81ac8ab6', role: "listitem" }, h(Fragment, { key: '0241a9ad68973eea81c961070d6171dab3241f79' }, h("div", { key: '25e9a406b8c0672eec836920706d44ed53906e1d', "aria-label": label && loc(label), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: '00f456ab21d2ecf58946de5df397bb3c81c2a749' })), h("div", { key: 'bdac4c2caf9b9bf5a6280258475afa552e578e7e', hidden: true }, h("slot", { key: '2ede75ad70c10eda1f8c6de4556bccc9c66e8b97', name: "label", onSlotchange: () => this.contentChange.emit() }), h("slot", { key: '990f2d44a0f9cb0437b63f3570a94874752a94da', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: '1f12d65608f73a3737abb7f987cab300ec1c9856', name: "children" }))));
     }
     static get is() { return "q2-stepper-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.css

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 /**
  * @prop --tct-stepper-vertical-layout-gap: (<length-percentage>) Controls the gap between the step list and step content columns.
  * @prop --tct-stepper-vertical-list-width: (<length-percentage>) Controls the width of the step list column.
@@ -102,6 +124,18 @@ button {
   gap: var(--tct-stepper-vertical-layout-gap, var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px)));
 }
 
+.sr-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
 .step-label,
 .step-child-label {
   color: var(--comp-btn-label-color);
@@ -135,7 +169,7 @@ button {
 
 .step-description {
   color: var(--tct-stepper-vertical-description-color, var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, inherit)));
-  font-size: var(--tct-stepper-vertical-description-font-size, var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px))));
+  font-size: var(--tct-stepper-vertical-description-font-size, var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, var(--const-px-12, 12px)))));
   padding-bottom: 0.2em;
 }
 
@@ -144,7 +178,7 @@ ul {
   --comp-btn-icon-size: var(--comp-top-btn-icon-size);
   --comp-btn-icon-visibility: var(--tct-stepper-vertical-btn-icon-visibility, visible);
   --comp-btn-content-gap: var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px))));
-  --comp-btn-label-font-size: var(--tct-stepper-vertical-btn-label-font-size, var(--tct-advanced-stepper-btn-label-font-size, var(--t-advanced-stepper-btn-label-font-size, 16px)));
+  --comp-btn-label-font-size: var(--tct-stepper-vertical-btn-label-font-size, var(--tct-advanced-stepper-btn-label-font-size, var(--t-advanced-stepper-btn-label-font-size, var(--const-px-16, 16px))));
   --comp-btn-label-color: var(--tct-stepper-vertical-label-color, var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, inherit)));
   --comp-tween: var(--tct-stepper-vertical-tween, var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease))));
   --comp-bullet-bg: var(--tct-stepper-vertical-bullet-active-background, var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1))));
@@ -155,7 +189,7 @@ ul {
 ul ul {
   --comp-btn-icon-size: var(--tct-stepper-vertical-child-btn-icon-size, var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px)));
   --comp-btn-content-gap: var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px))));
-  --comp-btn-label-font-size: var(--tct-stepper-vertical-child-btn-label-font-size, var(--tct-advanced-stepper-child-btn-label-font-size, var(--t-advanced-stepper-child-btn-label-font-size, var(--app-font-size-small, 12px))));
+  --comp-btn-label-font-size: var(--tct-stepper-vertical-child-btn-label-font-size, var(--tct-advanced-stepper-child-btn-label-font-size, var(--t-advanced-stepper-child-btn-label-font-size, var(--app-font-size-small, var(--const-px-12, 12px)))));
 }
 ul ul[aria-hidden=true] {
   display: none;
@@ -200,7 +234,7 @@ ul ul[aria-hidden=true] {
 
 .step-btn {
   min-height: var(--tct-stepper-vertical-btn-height, var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px)));
-  font-size: var(--tct-stepper-vertical-btn-font-size, var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px)));
+  font-size: var(--tct-stepper-vertical-btn-font-size, var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, var(--const-px-16, 16px))));
   --comp-active-color: var(--comp-bullet-bg);
 }
 .step-btn.status-complete {
@@ -219,7 +253,7 @@ ul ul[aria-hidden=true] {
   --comp-active-color: var(--comp-bullet-bg);
   min-height: var(--tct-stepper-vertical-child-btn-height, var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px)));
   padding-left: var(--tct-stepper-vertical-child-btn-left-padding, var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px))));
-  font-size: var(--tct-stepper-vertical-child-btn-font-size, var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px)));
+  font-size: var(--tct-stepper-vertical-child-btn-font-size, var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, var(--const-px-12, 12px))));
   border-left-width: var(--tct-stepper-vertical-child-btn-left-border-width, var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px)));
   border-left-style: var(--tct-stepper-vertical-child-btn-left-border-style, var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid)));
   border-left-color: transparent;

package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js

@@ -182,6 +182,11 @@ export class Q2StepperVertical {
         const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);
         return (_a = slot === null || slot === void 0 ? void 0 : slot.outerHTML) !== null && _a !== void 0 ? _a : (pane[slotName] ? loc(pane[slotName]) : undefined);
     }
+    getStatusLabel(status) {
+        const statusKey = `tecton.element.stepper.status.${status}`;
+        const statusLabel = loc(statusKey);
+        return statusLabel === statusKey ? status : statusLabel;
+    }
     getStepId(currentStepId, goTo) {
         const allEnabledStepBtns = Array.from(this.hostElement.shadowRoot.querySelectorAll('ul:not([aria-hidden="true"]) > li > button:not([aria-disabled="true"])'));
         const currentStepIndex = allEnabledStepBtns.findIndex(btn => btn.getAttribute('id') === currentStepId);
@@ -251,14 +256,23 @@ export class Q2StepperVertical {
     }
     // #endregion
     // #region Render Methods
-    renderChildStepBtn(pane, index, children, parentLabel) {
+    renderChildStepBtn(pane, index, children) {
         const { currentStepId } = this;
         const { id, label, status, disabled: isPaneDisabled } = pane;
         const stepNumber = index + 1;
         const labelId = label && `label-${id}`;
         const isCurrentStep = id === currentStepId;
         const isLocked = status === 'locked';
-        const btnLabel = !label && loc('tecton.element.advancedStepper.childNumber', [`${stepNumber}`, `${children}`, parentLabel]);
+        const positionId = `position-${id}`;
+        const statusId = `status-${id}`;
+        const accessibleStatus = status === 'complete' || status === 'error' ? status : 'pending';
+        const positionLabel = loc('tecton.element.stepper.number', {
+            step: `${stepNumber}`,
+            total: `${children}`,
+        });
+        const statusLabel = this.getStatusLabel(accessibleStatus);
+        const labelledBy = label ? `${positionId} ${labelId} ${statusId}` : undefined;
+        const btnLabel = label ? undefined : `${positionLabel}, ${statusLabel}`;
         let statusIcon;
         if (status === 'error')
             statusIcon = 'warning-filled';
@@ -267,14 +281,14 @@ export class Q2StepperVertical {
             stepClasses.push(`status-${status}`);
         if (isPaneDisabled)
             stepClasses.push('pane-disabled');
-        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, statusIcon && (h("div", { class: "step-child-icon" }, h("q2-icon", { type: statusIcon }))), label && (h("div", { class: "step-child-label", id: labelId, innerHTML: sanitizeHTMLString(label) })))));
+        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelledBy, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, label && (h(Fragment, null, h("span", { class: "sr-only", id: positionId }, positionLabel), h("span", { class: "sr-only", id: statusId }, statusLabel))), statusIcon && (h("div", { class: "step-child-icon" }, h("q2-icon", { "aria-hidden": "true", type: statusIcon }))), label && (h("div", { class: "step-child-label", id: labelId, innerHTML: sanitizeHTMLString(label) })))));
     }
-    renderSpacer(pane, stepLabel, isExpanded, isLastStep) {
+    renderSpacer(pane, isExpanded, isLastStep) {
         const shouldRender = (isLastStep && !!pane.children.length) || !isLastStep;
         const spacerClasses = ['spacer'];
         if (!isLastStep)
             spacerClasses.push('has-sibling');
-        return (shouldRender && (h("div", { class: spacerClasses.join(' ') }, !!pane.children.length && (h("ul", { ref: el => isExpanded && (this.expandedStepChildrenList = el), "aria-hidden": `${!isExpanded}` }, pane.children.map((child, index, children) => this.renderChildStepBtn(child, index, children.length, stepLabel)))))));
+        return (shouldRender && (h("div", { class: spacerClasses.join(' ') }, !!pane.children.length && (h("ul", { ref: el => isExpanded && (this.expandedStepChildrenList = el), "aria-hidden": `${!isExpanded}` }, pane.children.map((child, index, children) => this.renderChildStepBtn(child, index, children.length)))))));
     }
     renderStepBtn(pane, index) {
         const { currentStepId, structuredPanes } = this;
@@ -286,7 +300,16 @@ export class Q2StepperVertical {
         const isLocked = status === 'locked';
         const stepLabel = label;
         const descriptionId = label && description && `description-${id}`;
-        const btnLabel = !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);
+        const positionId = `position-${id}`;
+        const statusId = `status-${id}`;
+        const accessibleStatus = status === 'complete' || status === 'error' ? status : 'pending';
+        const positionLabel = loc('tecton.element.stepper.number', {
+            step: `${stepNumber}`,
+            total: `${structuredPanes.length}`,
+        });
+        const statusLabel = this.getStatusLabel(accessibleStatus);
+        const labelledBy = label ? `${positionId} ${labelId} ${statusId}` : undefined;
+        const btnLabel = label ? undefined : `${positionLabel}, ${statusLabel}`;
         let statusIcon;
         if (status === 'complete')
             statusIcon = 'success-filled';
@@ -299,10 +322,10 @@ export class Q2StepperVertical {
             stepClasses.push('pane-disabled');
         const childIds = pane.children.map(child => child.id);
         const isExpanded = isCurrentStep || childIds.includes(currentStepId);
-        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId, innerHTML: sanitizeHTMLString(stepLabel) }), description && (h("div", { class: "step-description", id: descriptionId, innerHTML: sanitizeHTMLString(description) }))))), this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)));
+        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelledBy, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, label && (h(Fragment, null, h("span", { class: "sr-only", id: positionId }, positionLabel), h("span", { class: "sr-only", id: statusId }, statusLabel))), statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { "aria-hidden": "true", type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId, innerHTML: sanitizeHTMLString(stepLabel) }), description && (h("div", { class: "step-description", id: descriptionId, innerHTML: sanitizeHTMLString(description) }))))), this.renderSpacer(pane, isExpanded, isLastStep)));
     }
     render() {
-        return (h(Fragment, { key: '2771f649f3e5e8a37657d43678d83c67204ec466' }, h("ul", { key: 'f0909b76f95f6c3684a2cffa069d530be3d951ce', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: '747eedecf0c9774439eb6ccf60528a521eb78685', role: "list" }, h("slot", { key: 'db02fc51b4811f510761365667516ce985c212d8' }))));
+        return (h(Fragment, { key: 'eab8d8816aebfb5aa104a17b75dc0e8b4ed4ce68' }, h("ul", { key: 'f155624641313e8375e6ee448fed150ae0c62cf1', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: '1ff078e00dcb1e4c861bc691ccc31ec5c1436fac', role: "list" }, h("slot", { key: 'adf07ae0725ccc7c1ce149052f2325e6bfc01677' }))));
     }
     static get is() { return "q2-stepper-vertical"; }
     static get encapsulation() { return "shadow"; }