q2-tecton-elements 1.70.1 → 1.71.0

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"; }

package/dist/collection/components/q2-stepper-vertical/test/q2-stepper-vertical-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 DEFAULT_PANES = `
     <q2-stepper-pane label="Step 1" id="step-1">Pane content</q2-stepper-pane>
     <q2-stepper-pane label="Step 2" id="step-2">Pane content</q2-stepper-pane>
@@ -94,3 +94,18 @@ test.describe('q2-stepper-vertical — variants × themes', () => {
         }
     }
 });
+// 'with-children' exercises --tct-stepper-vertical-btn-font-size,
+// --tct-stepper-vertical-btn-label-font-size, --tct-stepper-vertical-child-btn-font-size,
+// and --tct-stepper-vertical-child-btn-label-font-size (top-level + nested step buttons).
+// 'with-descriptions' exercises --tct-stepper-vertical-description-font-size.
+const SV_FONT_SCALE_VARIANTS = VARIANTS.filter(v => v.name === 'with-children' || v.name === 'with-descriptions');
+test.describe(`q2-stepper-vertical — scaled font size × themes`, () => {
+    for (const variant of SV_FONT_SCALE_VARIANTS) {
+        for (const theme of THEMES) {
+            test(`q2-stepper-vertical--${variant.name}--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, variant.html, { theme, fontSizePx: FONT_SCALE_PX });
+                await expect(page).toHaveScreenshot(`q2-stepper-vertical--${variant.name}--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
+        }
+    }
+});

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

@@ -1,19 +1,27 @@
 /**
- * @prop --tct-surface-background-default: (<color>) Background color when background="default". Defaults to --t-base.
- * @prop --tct-surface-background-primary: (<color>) Background color when background="primary". Defaults to --t-primary.
- * @prop --tct-surface-background-secondary: (<color>) Background color when background="secondary". Defaults to --t-secondary.
- * @prop --tct-surface-background-tertiary: (<color>) Background color when background="tertiary". Defaults to --t-tertiary.
- * @prop --tct-surface-hover-background: (<color>) Hover background when clickable and no background is set. Defaults to --t-base-hover.
- * @prop --tct-surface-primary-hover-background: (<color>) Hover background when clickable and background="primary". Defaults to --t-primary-l2.
- * @prop --tct-surface-secondary-hover-background: (<color>) Hover background when clickable and background="secondary". Defaults to --t-secondary-l2.
- * @prop --tct-surface-tertiary-hover-background: (<color>) Hover background when clickable and background="tertiary". Defaults to --t-tertiary-l2.
+ * @prop --tct-surface-default-background: (<color>) Background color when background="default". Defaults to --t-base.
+ * @prop --tct-surface-primary-background: (<color>) Background color when background="primary". Defaults to --t-primary.
+ * @prop --tct-surface-secondary-background: (<color>) Background color when background="secondary". Defaults to --t-secondary.
+ * @prop --tct-surface-tertiary-background: (<color>) Background color when background="tertiary". Defaults to --t-tertiary.
+ * @prop --tct-surface-gray-background: (<color>) Background color when background="gray". Defaults to --t-base-gray1.
+ * @prop --tct-surface-default-hover-background: (<color>) Hover background when clickable and background="default" (or unset). Defaults to --t-base-primary1.
+ * @prop --tct-surface-primary-hover-background: (<color>) Hover background when clickable and background="primary". Defaults to --t-primary-d2.
+ * @prop --tct-surface-secondary-hover-background: (<color>) Hover background when clickable and background="secondary". Defaults to --t-secondary-d2.
+ * @prop --tct-surface-tertiary-hover-background: (<color>) Hover background when clickable and background="tertiary". Defaults to --t-tertiary-d2.
+ * @prop --tct-surface-gray-hover-background: (<color>) Hover background when clickable and background="gray". Defaults to --t-base-primary1 (matches --tct-surface-default-hover-background).
+ * @prop --tct-surface-default-active-background: (<color>) Active/pressed background when clickable and background="default" (or unset). Defaults to --t-base-primary2.
+ * @prop --tct-surface-primary-active-background: (<color>) Active/pressed background when clickable and background="primary". Defaults to --t-primary-d3.
+ * @prop --tct-surface-secondary-active-background: (<color>) Active/pressed background when clickable and background="secondary". Defaults to --t-secondary-d3.
+ * @prop --tct-surface-tertiary-active-background: (<color>) Active/pressed background when clickable and background="tertiary". Defaults to --t-tertiary-d3.
+ * @prop --tct-surface-gray-active-background: (<color>) Active/pressed background when clickable and background="gray". Defaults to --t-base-primary2 (matches --tct-surface-default-active-background).
  * @prop --tct-surface-primary-font-color: (<color>) Text color when background="primary". Defaults to --t-primary-text.
  * @prop --tct-surface-secondary-font-color: (<color>) Text color when background="secondary". Defaults to --t-secondary-text.
  * @prop --tct-surface-tertiary-font-color: (<color>) Text color when background="tertiary". Defaults to --t-tertiary-text.
- * @prop --tct-surface-border-color: (<color>) Border color when border="default". Defaults to --t-gray-12.
+ * @prop --tct-surface-default-border-color: (<color>) Border color when border="default". Defaults to --t-gray-12.
  * @prop --tct-surface-primary-border-color: (<color>) Border color when border="primary". Defaults to --t-primary.
  * @prop --tct-surface-secondary-border-color: (<color>) Border color when border="secondary" . Defaults to --t-secondary.
  * @prop --tct-surface-tertiary-border-color: (<color>) Border color when border="tertiary". Defaults to --t-tertiary.
+ * @prop --tct-surface-gray-border-color: (<color>) Border color when border="gray". Defaults to --t-gray-8.
  * @prop --tct-surface-border-radius-1: (<length>) Corner radius at radius=1. Defaults to --app-border-radius-1 (4px).
  * @prop --tct-surface-border-radius-2: (<length>) Corner radius at radius=2. Defaults to --app-border-radius-2 (8px).
  * @prop --tct-surface-border-radius-3: (<length>) Corner radius at radius=3. Defaults to --app-border-radius-3 (12px).
@@ -41,8 +49,8 @@
  */
 :host {
   --comp-surface-bg: transparent;
-  --comp-surface-hover-background: var(--tct-surface-hover-background, var(--t-base-hover, #f2f2f2));
-  --comp-surface-border-color: var(--tct-surface-border-color, var(--t-gray-12, #d9d9d9));
+  --comp-surface-hover-background: var(--tct-surface-default-hover-background, var(--t-base-primary1, #f2f2f2));
+  --comp-surface-border-color: var(--tct-surface-default-border-color, var(--t-gray-12, #d9d9d9));
   --comp-surface-animation-duration: var(--tct-surface-animation-duration, 1s);
   --comp-surface-gradient-direction: var(--tct-surface-background-gradient-direction, to right bottom);
   --comp-surface-radius: 0px;
@@ -119,30 +127,42 @@
   border-radius: var(--comp-surface-radius);
 }
 
-:host([background=default]) {
-  --comp-surface-bg: var(--tct-surface-background-default, var(--t-base, #ffffff));
-  --comp-surface-hover-background: var(--tct-surface-hover-background, var(--t-base-hover, #f2f2f2));
+:host([background=default]),
+:host([clickable]:not([clickable=false]):not([background])) {
+  --comp-surface-bg: var(--tct-surface-default-background, var(--t-base, #ffffff));
+  --comp-surface-hover-background: var(--tct-surface-default-hover-background, var(--t-base-primary1, #f2f2f2));
+  --comp-surface-active-background: var(--tct-surface-default-active-background, var(--t-base-primary2, #e6e6e6));
 }
 
 :host([background=primary]) {
-  --comp-surface-bg: var(--tct-surface-background-primary, var(--t-primary, #6a4a9e));
-  --comp-surface-hover-background: var(--tct-surface-primary-hover-background, var(--t-primary-l2, #7d5ab8));
+  --comp-surface-bg: var(--tct-surface-primary-background, var(--t-primary, #6a4a9e));
+  --comp-surface-hover-background: var(--tct-surface-primary-hover-background, var(--t-primary-d2, #533978));
+  --comp-surface-active-background: var(--tct-surface-primary-active-background, var(--t-primary-d3, #3d2a58));
   color: var(--tct-surface-primary-font-color, var(--t-primary-text, #ffffff));
 }
 
 :host([background=secondary]) {
-  --comp-surface-bg: var(--tct-surface-background-secondary, var(--t-secondary, #b3c2cc));
-  --comp-surface-hover-background: var(--tct-surface-secondary-hover-background, var(--t-secondary-l2, #c2cfd8));
+  --comp-surface-bg: var(--tct-surface-secondary-background, var(--t-secondary, #b3c2cc));
+  --comp-surface-hover-background: var(--tct-surface-secondary-hover-background, var(--t-secondary-d2, #8fa1ac));
+  --comp-surface-active-background: var(--tct-surface-secondary-active-background, var(--t-secondary-d3, #6b7d88));
   color: var(--tct-surface-secondary-font-color, var(--t-secondary-text, #1a1a1a));
 }
 
 :host([background=tertiary]) {
-  --comp-surface-bg: var(--tct-surface-background-tertiary, var(--t-tertiary, #e8f5fc));
-  --comp-surface-hover-background: var(--tct-surface-tertiary-hover-background, var(--t-tertiary-l2, #edf7fd));
+  --comp-surface-bg: var(--tct-surface-tertiary-background, var(--t-tertiary, #e8f5fc));
+  --comp-surface-hover-background: var(--tct-surface-tertiary-hover-background, var(--t-tertiary-d2, #b8dcef));
+  --comp-surface-active-background: var(--tct-surface-tertiary-active-background, var(--t-tertiary-d3, #88c4e2));
   color: var(--tct-surface-tertiary-font-color, var(--t-tertiary-text, #1a1a1a));
 }
 
-:host([background]) .container {
+:host([background=gray]) {
+  --comp-surface-bg: var(--tct-surface-gray-background, var(--t-base-gray1, #f4f4f4));
+  --comp-surface-hover-background: var(--tct-surface-gray-hover-background, var(--t-base-primary1, #f2f2f2));
+  --comp-surface-active-background: var(--tct-surface-gray-active-background, var(--t-base-primary2, #e6e6e6));
+}
+
+:host([background]) .container,
+:host([clickable]:not([clickable=false]):not([background])) .container {
   background: var(--comp-surface-bg);
 }
 
@@ -166,6 +186,10 @@
   border-color: var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc));
 }
 
+:host([border=gray]) .container {
+  border-color: var(--tct-surface-gray-border-color, var(--t-gray-8, #808080));
+}
+
 :host([border-gradient]) {
   padding: 2px;
 }
@@ -177,7 +201,7 @@
 }
 
 :host([border-gradient]:not([background])) {
-  --comp-surface-bg: var(--tct-surface-background-default, var(--t-base, #ffffff));
+  --comp-surface-bg: var(--tct-surface-default-background, var(--t-base, #ffffff));
 }
 :host([border-gradient]:not([background])) .container {
   background: var(--comp-surface-bg);
@@ -185,7 +209,7 @@
 
 :host([border-gradient]:not([border])),
 :host([border-gradient][border=default]) {
-  background: linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-border-color, var(--t-gray-12, #d9d9d9)), white 40%), var(--tct-surface-border-color, var(--t-gray-12, #d9d9d9)));
+  background: linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-default-border-color, var(--t-gray-12, #d9d9d9)), white 40%), var(--tct-surface-default-border-color, var(--t-gray-12, #d9d9d9)));
 }
 
 :host([border-gradient][border=primary]) {
@@ -200,6 +224,10 @@
   background: linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)), white 40%), var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)));
 }
 
+:host([border-gradient][border=gray]) {
+  background: linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-gray-border-color, var(--t-gray-8, #808080)), white 40%), var(--tct-surface-gray-border-color, var(--t-gray-8, #808080)));
+}
+
 :host([inset=compact]) .container {
   padding: var(--tct-surface-inset-compact, var(--app-scale-1x, 5px));
 }
@@ -244,31 +272,34 @@
   padding-block: var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px));
 }
 
-:host([clickable]) {
+:host([clickable]:not([clickable=false])) {
   cursor: pointer;
 }
-:host([clickable]):hover .container {
+:host([clickable]:not([clickable=false])) .container:hover {
   background: var(--comp-surface-hover-background);
 }
-:host([clickable])[elevation="0"]:hover .container, :host([clickable]):not([elevation]):hover .container {
+:host([clickable]:not([clickable=false])) .container:active {
+  background: var(--comp-surface-active-background, var(--comp-surface-hover-background));
+}
+:host([clickable]:not([clickable=false]))[elevation="0"]:hover .container, :host([clickable]:not([clickable=false])):not([elevation]):hover .container {
   box-shadow: var(--tct-surface-elevation-hover-0-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));
 }
-:host([clickable])[elevation="1"]:hover .container {
+:host([clickable]:not([clickable=false]))[elevation="1"]:hover .container {
   box-shadow: var(--tct-surface-elevation-hover-1-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));
 }
-:host([clickable])[elevation="2"]:hover .container {
+:host([clickable]:not([clickable=false]))[elevation="2"]:hover .container {
   box-shadow: var(--tct-surface-elevation-hover-2-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)));
 }
-:host([clickable])[elevation="3"]:hover .container {
+:host([clickable]:not([clickable=false]))[elevation="3"]:hover .container {
   box-shadow: var(--tct-surface-elevation-hover-3-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)));
 }
-:host([clickable])[elevation="4"]:hover .container {
+:host([clickable]:not([clickable=false]))[elevation="4"]:hover .container {
   box-shadow: var(--tct-surface-elevation-hover-4-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)));
 }
-:host([clickable])[elevation="5"]:hover .container {
+:host([clickable]:not([clickable=false]))[elevation="5"]:hover .container {
   box-shadow: var(--tct-surface-elevation-hover-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)));
 }
-:host([clickable]) .container:focus-visible {
+:host([clickable]:not([clickable=false])) .container:focus-visible {
   outline: none;
   box-shadow: var(--tct-surface-focus-visible-box-shadow, var(--const-double-focus-ring, 0 0 0 2px var(--t-base), 0 0 0 4px var(--const-focus-color), 0 0 0 6px var(--t-base)));
 }
@@ -345,4 +376,12 @@
 
 :host(.q2-surface-animate-tada) {
   animation: q2-surface-tada var(--comp-surface-animation-duration) both;
+}
+
+::slotted(:is(h1, h2, h3, h4):first-child) {
+  margin-top: 0 !important;
+}
+
+::slotted(:is(q2-action-group):last-child) {
+  margin-bottom: 0 !important;
 }

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

@@ -61,7 +61,7 @@ export class Q2Surface {
      * @param animation The animation to play. Defaults to `'pulse'`.
      * @returns A Promise that resolves when the animation finishes or is cancelled.
      */
-    async animate(animation = 'pulse') {
+    async triggerAnimation(animation = 'pulse') {
         var _a;
         (_a = this._cancelAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
         return new Promise(resolve => {
@@ -84,7 +84,7 @@ export class Q2Surface {
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: '235f94ccfb0eb7167079e8e25ee78d652999f8e8' }, h("div", { key: 'b01d6e71bb4b8f1f583c63910d4b1eca757572dd', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("slot", { key: '591dc9fcb51d6f238a6186f047661020be9ea800' }))));
+        return (h(Host, { key: '992667ac1d625dff77a01d06d058865f99d8d190' }, h("div", { key: 'd58162c346c58a2cc21a4334c08b6cc4a53ed2e0', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("slot", { key: 'b70930390799484c71da93d1f801ecc681d168c6' }))));
     }
     static get is() { return "q2-surface"; }
     static get encapsulation() { return "shadow"; }
@@ -104,8 +104,8 @@ export class Q2Surface {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'primary' | 'secondary' | 'tertiary'",
-                    "resolved": "\"default\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "original": "'default' | 'primary' | 'secondary' | 'tertiary' | 'gray'",
+                    "resolved": "\"default\" | \"gray\" | \"primary\" | \"secondary\" | \"tertiary\"",
                     "references": {}
                 },
                 "required": false,
@@ -146,8 +146,8 @@ export class Q2Surface {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'primary' | 'secondary' | 'tertiary'",
-                    "resolved": "\"default\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "original": "'default' | 'primary' | 'secondary' | 'tertiary' | 'gray'",
+                    "resolved": "\"default\" | \"gray\" | \"primary\" | \"secondary\" | \"tertiary\"",
                     "references": {}
                 },
                 "required": false,
@@ -333,7 +333,7 @@ export class Q2Surface {
     }
     static get methods() {
         return {
-            "animate": {
+            "triggerAnimation": {
                 "complexType": {
                     "signature": "(animation?: \"bounce\" | \"flash\" | \"pulse\" | \"tada\") => Promise<void>",
                     "parameters": [{

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

@@ -12,16 +12,41 @@ const VARIANTS = [
         html: `<q2-surface background="primary" inset="normal"></q2-surface>`,
         states: ['resting'],
     },
+    {
+        name: 'background-primary-clickable',
+        html: `<q2-surface background="primary" clickable inset="normal" radius="2"></q2-surface>`,
+        states: ['hover', 'active'],
+    },
     {
         name: 'background-secondary',
         html: `<q2-surface background="secondary" inset="normal"></q2-surface>`,
         states: ['resting'],
     },
+    {
+        name: 'background-secondary-clickable',
+        html: `<q2-surface background="secondary" clickable inset="normal" radius="2"></q2-surface>`,
+        states: ['hover', 'active'],
+    },
     {
         name: 'background-tertiary',
         html: `<q2-surface background="tertiary" inset="normal"></q2-surface>`,
         states: ['resting'],
     },
+    {
+        name: 'background-tertiary-clickable',
+        html: `<q2-surface background="tertiary" clickable inset="normal" radius="2"></q2-surface>`,
+        states: ['hover', 'active'],
+    },
+    {
+        name: 'background-gray',
+        html: `<q2-surface background="gray" inset="normal"></q2-surface>`,
+        states: ['resting'],
+    },
+    {
+        name: 'background-gray-clickable',
+        html: `<q2-surface background="gray" clickable inset="normal" radius="2"></q2-surface>`,
+        states: ['resting', 'hover', 'active'],
+    },
     {
         name: 'background-gradient-primary',
         html: `<q2-surface background="primary" background-gradient inset="normal" radius="2"></q2-surface>`,
@@ -47,16 +72,45 @@ const VARIANTS = [
         html: `<q2-surface border="tertiary" inset="normal"></q2-surface>`,
         states: ['resting'],
     },
+    {
+        name: 'border-gray',
+        html: `<q2-surface border="gray" inset="normal"></q2-surface>`,
+        states: ['resting'],
+    },
     {
         name: 'border-gradient-primary',
         html: `<q2-surface border="primary" border-gradient inset="normal" radius="2"></q2-surface>`,
         states: ['resting'],
     },
+    {
+        name: 'border-gradient-gray',
+        html: `<q2-surface border="gray" border-gradient inset="normal" radius="2"></q2-surface>`,
+        states: ['resting'],
+    },
     {
         name: 'clickable',
         html: `<q2-surface clickable border="default" radius="2" inset="normal"></q2-surface>`,
         states: ['resting', 'hover', 'focus', 'active'],
     },
+    {
+        name: 'slotted-first-heading',
+        html: `<q2-surface border="default" inset="normal" radius="2">
+            <h2>Slotted heading</h2>
+            <p>Body copy beneath the heading.</p>
+        </q2-surface>`,
+        states: ['resting'],
+    },
+    {
+        name: 'slotted-last-action-group',
+        html: `<q2-surface border="default" inset="normal" radius="2">
+            <p>Body copy above the action group.</p>
+            <q2-action-group>
+                <q2-btn intent="workflow-primary">Confirm</q2-btn>
+                <q2-btn intent="workflow-secondary">Cancel</q2-btn>
+            </q2-action-group>
+        </q2-surface>`,
+        states: ['resting'],
+    },
 ];
 const restingCase = (variant, theme) => {
     test(`q2-surface--${variant.name}--resting — ${theme}`, async ({ page }) => {

package/dist/collection/components/q2-tab-container/q2-tab-container.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-tab-container-padding: (<length-percentage>+) Controls the inner padding of the tab container list.
  * @prop --tct-tab-container-margin?: (<length-percentage>+) Controls the optional outer margin of the tab container list.
@@ -72,7 +94,7 @@ button {
  * @prop --tct-tab-container-border-style: (<custom-ident>) Controls the bottom border style of the tab container list.
  * @prop --tct-tab-container-border-color: (<color>) Controls the bottom border color of the tab container list.
  * @prop --tct-tab-container-content-padding: (<length-percentage>+) Controls the inner padding of the tab content area.
- * @prop --tct-tab-container-content-backgrond?: (<color>) Controls the optional background color of the tab content area.
+ * @prop --tct-tab-container-content-background?: (<color>) Controls the optional background color of the tab content area.
  * @prop --tct-tab-content-padding: (<length-percentage>+) Controls the inner padding of the tab content area when --tct-tab-container-content-padding is not set.
  * @prop --tct-tab-focus-visible-box-shadow: (*) Controls the box shadow of a tab button when focused via keyboard.
  * @prop --tct-tab-gap: (<length-percentage>) Controls the gap between adjacent tab buttons.
@@ -102,6 +124,12 @@ button {
  * @prop --tct-tab-section-padding: (<length-percentage>+) Controls the inner padding of tab buttons when type="section".
  * @prop --tct-tab-section-font-size: (<length-percentage>) Controls the font size of tab buttons when type="section".
  * @prop --tct-tab-section-line-height: (<number> | <length-percentage>) Controls the line height of tab buttons when type="section".
+ * @prop --tct-tab-container-width: (<length-percentage>) Controls the width of the tab strip when orientation="vertical". Defaults to `200px`.
+ * @prop --tct-tab-active-indicator-width: (<length>) Controls the width of the active-tab indicator on the leading edge when orientation="vertical". Defaults to `3px`.
+ * @prop --tct-tab-badge-gap?: (<length-percentage>) Controls the optional gap between the label and badge within a tab button when orientation="vertical".
+ * @prop --tct-vertical-tab-container-padding?: (<length-percentage>+) Controls the inner padding of the tab container list when orientation="vertical". Defaults to `0`.
+ * @prop --tct-vertical-tab-border-radius?: (<length-percentage>) Controls the optional corner radius of tab buttons when orientation="vertical". Defaults to `0`.
+ * @prop --tct-vertical-tab-container-content-padding?: (<length-percentage>+) Controls the inner padding of the tab content area when orientation="vertical".
  */
 :host {
   display: block;
@@ -162,15 +190,15 @@ li button {
   text-decoration: var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));
   padding: var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));
   color: var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));
-  font-size: var(--tct-tab-font-size, var(--t-tab-font-size, 17px));
-  line-height: var(--tct-tab-line-height, 20px);
+  font-size: var(--tct-tab-font-size, var(--t-tab-font-size, var(--const-px-17, 17px)));
+  line-height: var(--tct-tab-line-height, var(--const-px-20, 20px));
   display: block;
   transition: background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs);
 }
 :host([type=section]) li button {
   --comp-tab-section-padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));
-  font-size: var(--tct-tab-section-font-size, 14px);
-  line-height: var(--tct-tab-section-line-height, 18px);
+  font-size: var(--tct-tab-section-font-size, var(--const-px-14, 14px));
+  line-height: var(--tct-tab-section-line-height, var(--const-px-18, 18px));
   padding: var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)));
 }
 li button:focus-visible {
@@ -206,7 +234,7 @@ li button[aria-selected=true] {
 .tab-content {
   --comp-tab-content-padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;
   padding: var(--tct-tab-container-content-padding, var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding))));
-  background: var(--tct-tab-container-content-backgrond, none);
+  background: var(--tct-tab-container-content-background, none);
 }
 .tab-content:focus {
   outline: none;
@@ -263,4 +291,82 @@ li button[aria-selected=true] {
 .tab-pane-badge q2-badge {
   margin-left: 5px;
   margin-right: 5px;
+}
+
+@media screen and (min-width: 768px) {
+  :host([orientation=vertical]) {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+  }
+  :host([orientation=vertical]) .tab-container {
+    width: var(--tct-tab-container-width, 200px);
+    flex-shrink: 0;
+  }
+  :host([orientation=vertical]) .tab-content {
+    --comp-vertical-tab-content-padding: 0 var(--tct-scale-2, var(--app-scale-2x, 10px));
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: var(--tct-vertical-tab-container-content-padding, var(--tct-vertical-tab-content-padding, var(--t-vertical-tab-content-padding, var(--comp-vertical-tab-content-padding))));
+  }
+  :host([orientation=vertical]) ul {
+    padding: var(--tct-vertical-tab-container-padding, 0);
+    flex-direction: column;
+    align-items: stretch;
+    overflow-y: auto;
+    overflow-x: visible;
+    border-bottom-width: 0;
+    border-right-width: var(--tct-tab-container-border-width, 1px);
+    border-right-style: var(--tct-tab-container-border-style, solid);
+    border-right-color: var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));
+    height: 100%;
+  }
+  :host([orientation=vertical]) li {
+    border-left-width: var(--tct-tab-active-indicator-width, 3px);
+    border-left-style: solid;
+    border-left-color: transparent;
+    transition: border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs);
+  }
+  :host([orientation=vertical]) li:has(button[aria-selected=true]) {
+    color: var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));
+    border-left-color: var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor));
+  }
+  :host([orientation=vertical]) li button {
+    border-width: 0;
+    text-align: start;
+    border-radius: var(--tct-vertical-tab-border-radius, 0);
+  }
+  :host([orientation=vertical]) .tab-pane-badge {
+    justify-content: flex-start;
+    gap: var(--tct-tab-badge-gap, var(--tct-scale-1, var(--app-scale-1x, 5px)));
+  }
+  :host([orientation=vertical]) .gradient-left {
+    right: 0;
+    width: 100%;
+    height: 44px;
+    background-image: linear-gradient(to top, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);
+  }
+  :host([orientation=vertical]) .gradient-right {
+    bottom: 0;
+    top: auto;
+    left: 0;
+    width: 100%;
+    height: 44px;
+    background-image: linear-gradient(to bottom, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);
+  }
+  :host([orientation=vertical]) .btn-left {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  :host([orientation=vertical]) .btn-right {
+    bottom: 0;
+    top: auto;
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+  }
+  :host([orientation=vertical][color=alt]) li:has(button[aria-selected=true]) {
+    color: var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit));
+  }
 }