q2-tecton-elements 1.71.2 → 1.72.0

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

@@ -10,6 +10,18 @@ const RESTING_VARIANTS = [
         name: 'default',
         html: `<q2-calendar label="My calendar" placeholder="My date"></q2-calendar>`,
     },
+    {
+        name: 'letter-spacing-override',
+        html: `<style>
+                q2-calendar {
+                    --tct-input-label-letter-spacing: initial;
+                    letter-spacing: 0.12em !important;
+                }
+            </style>
+            <div style="width: 220px">
+                <q2-calendar label="Scheduled transfer processing date" placeholder="My date" optional></q2-calendar>
+            </div>`,
+    },
     {
         name: 'typeable',
         html: `<q2-calendar label="My calendar" placeholder="My date" typeable></q2-calendar>`,
@@ -104,6 +116,9 @@ const openPopoverViaKeyboard = async (page) => {
     await page.keyboard.press('Tab');
     await page.keyboard.press(' ');
     await waitForDayCell(page, '2026-05-17');
+    // Two rAFs: nested q2-btn/q2-icon renders finish in the first frame; the second
+    // frame ensures the layout from those nested renders is committed before the screenshot.
+    await page.evaluate(() => new Promise(r => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
 };
 const expandedDefaultCase = (variant, theme) => {
     test(`q2-calendar--${variant.name}--expanded-default — ${theme}`, async ({ page }) => {
@@ -147,8 +162,14 @@ const dayHoverCase = (variant, theme) => {
         // the rect manually. Also blur the input so the today cell's keyboard
         // focus ring isn't present in the snapshot.
         await page.evaluate(() => { var _a; return (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur(); });
-        await page.locator('td[data-date="2026-05-22"]').hover();
-        await page.waitForTimeout(50);
+        const hoveredDay = page.locator('td[data-date="2026-05-22"]');
+        await hoveredDay.hover();
+        await page.waitForFunction(() => {
+            var _a, _b;
+            const calendar = document.querySelector('q2-calendar');
+            return (_b = (_a = calendar === null || calendar === void 0 ? void 0 : calendar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('td[data-date="2026-05-22"]')) === null || _b === void 0 ? void 0 : _b.matches(':hover');
+        });
+        await page.evaluate(() => new Promise(r => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
         await expect(page).toHaveScreenshot(`q2-calendar--${variant.name}--day-hover--${theme}.png`);
     });
 };

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

@@ -24,6 +24,10 @@ const VARIANTS = [
         name: 'with-bar',
         html: `<q2-card title="Card Title" description="${DESC}" bar="primary" avatar-icon="document"></q2-card>`,
     },
+    {
+        name: 'with-action-icon',
+        html: `<q2-card><q2-item><q2-icon slot="decorator" type="document"></q2-icon><div slot="header">Card Title</div><div slot="body">${SHORT_DESC}</div><q2-icon slot="action" type="chevron-right"></q2-icon></q2-item></q2-card>`,
+    },
     {
         name: 'elevation-1',
         html: `<q2-card title="Card Title" description="${SHORT_DESC}" elevation="1" avatar-icon="document"></q2-card>`,

package/dist/collection/components/q2-card-image/q2-card-image.css

@@ -87,109 +87,57 @@ button {
     }
   }
 }
-:host {
-  /**
-   * @prop --tct-card-image-base-blur: (<length>) Controls the blur radius applied to the base card image layer.
-   * @prop --tct-card-image-primary-color: (<color>) Controls the background color of the base layer when bg-primary is applied.
-   * @prop --tct-card-image-secondary-color: (<color>) Controls the background color of the base layer when bg-secondary is applied.
-   * @prop --tct-card-image-tertiary-color: (<color>) Controls the background color of the base layer when bg-tertiary is applied.
-   */
-  --tct-card-image-base-blur: 0px;
-  --tct-card-image-primary-color: var(--t-primary, #5446a4);
-  --tct-card-image-secondary-color: var(--t-secondary, #2a7de1);
-  --tct-card-image-tertiary-color: var(--t-tertiary, #6b7280);
-  /**
-   * @prop --tct-card-image-base-gradient-deg: (<angle>) Controls the angle of the base layer gradient.
-   * @prop --tct-card-image-base-gradient-left-color: (<color>) Controls the left color stop of the base layer gradient.
-   * @prop --tct-card-image-base-gradient-left-stop: (<percentage>) Controls the position of the left color stop of the base layer gradient.
-   * @prop --tct-card-image-base-gradient-middle-color: (<color>) Controls the middle color stop of the base layer gradient.
-   * @prop --tct-card-image-base-gradient-middle-stop: (<percentage>) Controls the position of the middle color stop of the base layer gradient.
-   * @prop --tct-card-image-base-gradient-right-color: (<color>) Controls the right color stop of the base layer gradient.
-   * @prop --tct-card-image-base-gradient-right-stop: (<percentage>) Controls the position of the right color stop of the base layer gradient.
-   */
-  --tct-card-image-base-gradient-deg: 110.95deg;
-  --tct-card-image-base-gradient-left-color: var(--t-gray-2, #1a1a1a);
-  --tct-card-image-base-gradient-left-stop: 0.54%;
-  --tct-card-image-base-gradient-middle-color: var(--t-gray-11, #cccccc);
-  --tct-card-image-base-gradient-middle-stop: 60.22%;
-  --tct-card-image-base-gradient-right-color: var(--t-gray-2, #1a1a1a);
-  --tct-card-image-base-gradient-right-stop: 100%;
-  /**
-   * @prop --tct-card-image-overlay-opacity: (<number>) Controls the opacity of the overlay layer.
-   * @prop --tct-card-image-overlay-mix-blend-mode: (<custom-ident>) Controls the mix-blend-mode of the dot-pattern overlay.
-   */
-  --tct-card-image-overlay-opacity: 1;
-  --tct-card-image-overlay-mix-blend-mode: normal;
-  /**
-   * @prop --tct-card-image-dot-size: (<length>) Controls the size of dots in the dot-pattern overlay.
-   * @prop --tct-card-image-dot-spacing: (<length>) Controls the spacing between dots in the dot-pattern overlay.
-   * @prop --tct-card-image-dot-color: (<color>) Controls the color of dots in the dot-pattern overlay.
-   */
-  --tct-card-image-dot-size: 0.5px;
-  --tct-card-image-dot-spacing: 2px;
-  --tct-card-image-dot-color: rgba(128, 128, 128, 0.5);
-  /**
-   * @prop --tct-card-image-font-color: (<color>) Controls the text color of the card number, holder, and other card details.
-   * @prop --tct-card-image-text-shadow: (*) Controls the text shadow of the card number, holder, and other card details.
-   */
-  --tct-card-image-font-color: var(--t-base, #fff);
-  --tct-card-image-text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);
-  /**
-   * @prop --tct-card-image-status-box-shadow: (*) Controls the box shadow of the status banner that straddles the top edge of the card.
-   * @prop --tct-card-image-status-background-digital: (<color>) Controls the background color of the status banner when status is digital.
-   * @prop --tct-card-image-status-color-digital: (<color>) Controls the text color of the status banner when status is digital.
-   * @prop --tct-card-image-status-background-enabled: (<color>) Controls the background color of the status banner when status is enabled.
-   * @prop --tct-card-image-status-color-enabled: (<color>) Controls the text color of the status banner when status is enabled.
-   * @prop --tct-card-image-status-background-disabled: (<color>) Controls the background color of the status banner when status is disabled.
-   * @prop --tct-card-image-status-color-disabled: (<color>) Controls the text color of the status banner when status is disabled.
-   * @prop --tct-card-image-status-background-locked: (<color>) Controls the background color of the status banner when status is locked.
-   * @prop --tct-card-image-status-color-locked: (<color>) Controls the text color of the status banner when status is locked.
-   * @prop --tct-card-image-status-background-damaged: (<color>) Controls the background color of the status banner when status is damaged.
-   * @prop --tct-card-image-status-color-damaged: (<color>) Controls the text color of the status banner when status is damaged.
-   * @prop --tct-card-image-status-background-lost: (<color>) Controls the background color of the status banner when status is lost.
-   * @prop --tct-card-image-status-color-lost: (<color>) Controls the text color of the status banner when status is lost.
-   * @prop --tct-card-image-status-background-stolen: (<color>) Controls the background color of the status banner when status is stolen.
-   * @prop --tct-card-image-status-color-stolen: (<color>) Controls the text color of the status banner when status is stolen.
-   * @prop --tct-card-image-status-background-lost-or-stolen: (<color>) Controls the background color of the status banner when status is lost-or-stolen.
-   * @prop --tct-card-image-status-color-lost-or-stolen: (<color>) Controls the text color of the status banner when status is lost-or-stolen.
-   */
-  --tct-card-image-status-box-shadow: var(
-      --app-shadow-3,
-      0px 0px 2px rgba(0, 0, 0, 0.12),
-      0px 8px 16px rgba(0, 0, 0, 0.14)
-  );
-  --tct-card-image-status-background-digital: var(--tct-black, #000);
-  --tct-card-image-status-color-digital: var(--tct-white, #fff);
-  --tct-card-image-status-background-enabled: var(--tct-stoplight-info, #0079c1);
-  --tct-card-image-status-color-enabled: var(--tct-white, #fff);
-  --tct-card-image-status-background-disabled: var(--tct-stoplight-alert, #d20a0a);
-  --tct-card-image-status-color-disabled: var(--tct-white, #fff);
-  --tct-card-image-status-background-locked: var(--tct-stoplight-alert, #d20a0a);
-  --tct-card-image-status-color-locked: var(--tct-white, #fff);
-  --tct-card-image-status-background-damaged: var(--tct-stoplight-warning, #c35500);
-  --tct-card-image-status-color-damaged: var(--tct-white, #fff);
-  --tct-card-image-status-background-lost: var(--tct-stoplight-warning, #c35500);
-  --tct-card-image-status-color-lost: var(--tct-white, #fff);
-  --tct-card-image-status-background-stolen: var(--tct-stoplight-warning, #c35500);
-  --tct-card-image-status-color-stolen: var(--tct-white, #fff);
-  --tct-card-image-status-background-lost-or-stolen: var(--tct-stoplight-warning, #c35500);
-  --tct-card-image-status-color-lost-or-stolen: var(--tct-white, #fff);
-  /**
-   * @prop --tct-card-image-disabled-opacity: (<number>) Controls the opacity of the card image container when disabled.
-   * @prop --tct-card-image-max-width: (<length-percentage>) Controls the maximum width of the card image container.
-   * @prop --tct-card-image-min-width: (<length>) Controls the minimum width of the card image container.
-   * @prop --tct-card-image-width?: (<length-percentage>) Controls the optional explicit width of the card image container.
-   * @prop --tct-card-image-base-url?: (<image>) Controls the optional background image of the base layer when bg-custom is applied.
-   * @prop --tct-card-image-overlay-url?: (<image>) Controls the optional background image of the overlay layer when bg-custom is applied.
-   * @prop --tct-card-image-fi-logo: (<image>) Controls the financial-institution logo image rendered on the card.
-   * @prop --tct-card-image-logo-padding: (<length-percentage>+) Controls the inner padding around the financial-institution logo.
-   * @prop --tct-card-image-type-color: (<color>) Controls the text color of the card vendor type label.
-   * @prop --tct-card-image-type-font-size: (<length-percentage>) Controls the font size of the card vendor type label.
-   * @prop --tct-card-image-type-margin-bottom: (<length-percentage>) Controls the bottom margin of the card vendor type label.
-   * @prop --tct-card-image-type-margin-right: (<length-percentage>) Controls the right margin of the card vendor type label.
-   */
-}
-
+/**
+ * @prop --tct-card-image-base-blur: (<length>) Controls the blur radius applied to the base card image layer.
+ * @prop --tct-card-image-primary-color: (<color>) Controls the background color of the base layer when bg-primary is applied.
+ * @prop --tct-card-image-secondary-color: (<color>) Controls the background color of the base layer when bg-secondary is applied.
+ * @prop --tct-card-image-tertiary-color: (<color>) Controls the background color of the base layer when bg-tertiary is applied.
+ * @prop --tct-card-image-base-gradient-deg: (<angle>) Controls the angle of the base layer gradient.
+ * @prop --tct-card-image-base-gradient-left-color: (<color>) Controls the left color stop of the base layer gradient.
+ * @prop --tct-card-image-base-gradient-left-stop: (<percentage>) Controls the position of the left color stop of the base layer gradient.
+ * @prop --tct-card-image-base-gradient-middle-color: (<color>) Controls the middle color stop of the base layer gradient.
+ * @prop --tct-card-image-base-gradient-middle-stop: (<percentage>) Controls the position of the middle color stop of the base layer gradient.
+ * @prop --tct-card-image-base-gradient-right-color: (<color>) Controls the right color stop of the base layer gradient.
+ * @prop --tct-card-image-base-gradient-right-stop: (<percentage>) Controls the position of the right color stop of the base layer gradient.
+ * @prop --tct-card-image-overlay-opacity: (<number>) Controls the opacity of the overlay layer.
+ * @prop --tct-card-image-overlay-mix-blend-mode: (<custom-ident>) Controls the mix-blend-mode of the dot-pattern overlay.
+ * @prop --tct-card-image-dot-size: (<length>) Controls the size of dots in the dot-pattern overlay.
+ * @prop --tct-card-image-dot-spacing: (<length>) Controls the spacing between dots in the dot-pattern overlay.
+ * @prop --tct-card-image-dot-color: (<color>) Controls the color of dots in the dot-pattern overlay.
+ * @prop --tct-card-image-font-color: (<color>) Controls the text color of the card number, holder, and other card details.
+ * @prop --tct-card-image-text-shadow: (*) Controls the text shadow of the card number, holder, and other card details.
+ * @prop --tct-card-image-status-box-shadow: (*) Controls the box shadow of the status banner that straddles the top edge of the card.
+ * @prop --tct-card-image-status-background-digital: (<color>) Controls the background color of the status banner when status is digital.
+ * @prop --tct-card-image-status-color-digital: (<color>) Controls the text color of the status banner when status is digital.
+ * @prop --tct-card-image-status-background-enabled: (<color>) Controls the background color of the status banner when status is enabled.
+ * @prop --tct-card-image-status-color-enabled: (<color>) Controls the text color of the status banner when status is enabled.
+ * @prop --tct-card-image-status-background-new: (<color>) Controls the background color of the status banner when status is new.
+ * @prop --tct-card-image-status-color-new: (<color>) Controls the text color of the status banner when status is new.
+ * @prop --tct-card-image-status-background-disabled: (<color>) Controls the background color of the status banner when status is disabled.
+ * @prop --tct-card-image-status-color-disabled: (<color>) Controls the text color of the status banner when status is disabled.
+ * @prop --tct-card-image-status-background-locked: (<color>) Controls the background color of the status banner when status is locked.
+ * @prop --tct-card-image-status-color-locked: (<color>) Controls the text color of the status banner when status is locked.
+ * @prop --tct-card-image-status-background-damaged: (<color>) Controls the background color of the status banner when status is damaged.
+ * @prop --tct-card-image-status-color-damaged: (<color>) Controls the text color of the status banner when status is damaged.
+ * @prop --tct-card-image-status-background-lost: (<color>) Controls the background color of the status banner when status is lost.
+ * @prop --tct-card-image-status-color-lost: (<color>) Controls the text color of the status banner when status is lost.
+ * @prop --tct-card-image-status-background-stolen: (<color>) Controls the background color of the status banner when status is stolen.
+ * @prop --tct-card-image-status-color-stolen: (<color>) Controls the text color of the status banner when status is stolen.
+ * @prop --tct-card-image-status-background-lost-or-stolen: (<color>) Controls the background color of the status banner when status is lost-or-stolen.
+ * @prop --tct-card-image-status-color-lost-or-stolen: (<color>) Controls the text color of the status banner when status is lost-or-stolen.
+ * @prop --tct-card-image-disabled-opacity: (<number>) Controls the opacity of the card image container when disabled.
+ * @prop --tct-card-image-max-width: (<length-percentage>) Controls the maximum width of the card image container.
+ * @prop --tct-card-image-min-width: (<length>) Controls the minimum width of the card image container.
+ * @prop --tct-card-image-width?: (<length-percentage>) Controls the optional explicit width of the card image container.
+ * @prop --tct-card-image-base-url?: (<image>) Controls the optional background image of the base layer when bg-custom is applied.
+ * @prop --tct-card-image-overlay-url?: (<image>) Controls the optional background image of the overlay layer when bg-custom is applied.
+ * @prop --tct-card-image-fi-logo: (<image>) Controls the financial-institution logo image rendered on the card.
+ * @prop --tct-card-image-logo-padding: (<length-percentage>+) Controls the inner padding around the financial-institution logo.
+ * @prop --tct-card-image-type-color: (<color>) Controls the text color of the card vendor type label.
+ * @prop --tct-card-image-type-font-size: (<length-percentage>) Controls the font size of the card vendor type label.
+ * @prop --tct-card-image-type-margin-bottom: (<length-percentage>) Controls the bottom margin of the card vendor type label.
+ * @prop --tct-card-image-type-margin-right: (<length-percentage>) Controls the right margin of the card vendor type label.
+ */
 :host {
   display: flex;
   flex-direction: column;
@@ -248,6 +196,7 @@ button {
 }
 
 .card-wrapper > q2-btn {
+  --tct-btn-default-double-focus-visible-ring: var(--comp-aesthetic-btn-focus-ring, none);
   --const-double-focus-ring: none;
   --tct-btn-min-height-medium: 0;
   --tct-btn-padding-size-medium: 0;
@@ -259,6 +208,7 @@ button {
 .card-wrapper {
   position: relative;
   max-width: 100%;
+  --comp-aesthetic-btn-focus-ring: var(--tct-btn-default-double-focus-visible-ring);
 }
 
 .card-action {
@@ -316,33 +266,33 @@ button {
 
 .card-image {
   z-index: 1;
-  filter: blur(var(--tct-card-image-base-blur));
+  filter: blur(var(--tct-card-image-base-blur, 0px));
 }
 
 .card-image-overlay {
   z-index: 2;
-  opacity: var(--tct-card-image-overlay-opacity);
+  opacity: var(--tct-card-image-overlay-opacity, 1);
 }
 
 .card-image.bg-primary {
-  background-color: var(--tct-card-image-primary-color);
+  background-color: var(--tct-card-image-primary-color, var(--t-primary, #5446a4));
 }
 .card-image.bg-secondary {
-  background-color: var(--tct-card-image-secondary-color);
+  background-color: var(--tct-card-image-secondary-color, var(--t-secondary, #2a7de1));
 }
 .card-image.bg-tertiary {
-  background-color: var(--tct-card-image-tertiary-color);
+  background-color: var(--tct-card-image-tertiary-color, var(--t-tertiary, #6b7280));
 }
 
 .card-image.bg-gradient {
-  background: linear-gradient(var(--tct-card-image-base-gradient-deg), var(--tct-card-image-base-gradient-left-color) var(--tct-card-image-base-gradient-left-stop), var(--tct-card-image-base-gradient-middle-color) var(--tct-card-image-base-gradient-middle-stop), var(--tct-card-image-base-gradient-right-color) var(--tct-card-image-base-gradient-right-stop));
+  background: linear-gradient(var(--tct-card-image-base-gradient-deg, 110.95deg), var(--tct-card-image-base-gradient-left-color, var(--t-gray-2, #1a1a1a)) var(--tct-card-image-base-gradient-left-stop, 0.54%), var(--tct-card-image-base-gradient-middle-color, var(--t-gray-11, #cccccc)) var(--tct-card-image-base-gradient-middle-stop, 60.22%), var(--tct-card-image-base-gradient-right-color, var(--t-gray-2, #1a1a1a)) var(--tct-card-image-base-gradient-right-stop, 100%));
 }
 
 .card-image-overlay.bg-dot {
-  background-image: radial-gradient(circle, var(--tct-card-image-dot-color) var(--tct-card-image-dot-size), transparent var(--tct-card-image-dot-size));
-  background-size: var(--tct-card-image-dot-spacing) var(--tct-card-image-dot-spacing);
-  mix-blend-mode: var(--tct-card-image-overlay-mix-blend-mode);
-  opacity: var(--tct-card-image-overlay-opacity);
+  background-image: radial-gradient(circle, var(--tct-card-image-dot-color, rgba(128, 128, 128, 0.5)) var(--tct-card-image-dot-size, 0.5px), transparent var(--tct-card-image-dot-size, 0.5px));
+  background-size: var(--tct-card-image-dot-spacing, 2px) var(--tct-card-image-dot-spacing, 2px);
+  mix-blend-mode: var(--tct-card-image-overlay-mix-blend-mode, normal);
+  opacity: var(--tct-card-image-overlay-opacity, 1);
 }
 
 .card-image.bg-custom {
@@ -368,7 +318,7 @@ button {
   padding: 0 12px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 5px/5px;
-  box-shadow: var(--tct-card-image-status-box-shadow);
+  box-shadow: var(--tct-card-image-status-box-shadow, var(--app-shadow-3));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -389,43 +339,48 @@ button {
 }
 
 .card-status-banner.status-enabled {
-  background-color: var(--tct-card-image-status-background-enabled);
-  color: var(--tct-card-image-status-color-enabled);
+  background-color: var(--tct-card-image-status-background-enabled, var(--const-stoplight-success, #0e8a00));
+  color: var(--tct-card-image-status-color-enabled, var(--tct-white, #fff));
+}
+
+.card-status-banner.status-new {
+  background-color: var(--tct-card-image-status-background-new, var(--const-stoplight-info, #0079c1));
+  color: var(--tct-card-image-status-color-new, var(--tct-white, #fff));
 }
 
 .card-status-banner.status-disabled {
-  background-color: var(--tct-card-image-status-background-disabled);
-  color: var(--tct-card-image-status-color-disabled);
+  background-color: var(--tct-card-image-status-background-disabled, var(--const-stoplight-alert, #d20a0a));
+  color: var(--tct-card-image-status-color-disabled, var(--tct-white, #fff));
 }
 
 .card-status-banner.status-locked {
-  background-color: var(--tct-card-image-status-background-locked);
-  color: var(--tct-card-image-status-color-locked);
+  background-color: var(--tct-card-image-status-background-locked, var(--const-stoplight-alert, #d20a0a));
+  color: var(--tct-card-image-status-color-locked, var(--tct-white, #fff));
 }
 
 .card-status-banner.status-damaged {
-  background-color: var(--tct-card-image-status-background-damaged);
-  color: var(--tct-card-image-status-color-damaged);
+  background-color: var(--tct-card-image-status-background-damaged, var(--const-stoplight-warning, #c35500));
+  color: var(--tct-card-image-status-color-damaged, var(--tct-white, #fff));
 }
 
 .card-status-banner.status-lost {
-  background-color: var(--tct-card-image-status-background-lost);
-  color: var(--tct-card-image-status-color-lost);
+  background-color: var(--tct-card-image-status-background-lost, var(--const-stoplight-warning, #c35500));
+  color: var(--tct-card-image-status-color-lost, var(--tct-white, #fff));
 }
 
 .card-status-banner.status-stolen {
-  background-color: var(--tct-card-image-status-background-stolen);
-  color: var(--tct-card-image-status-color-stolen);
+  background-color: var(--tct-card-image-status-background-stolen, var(--const-stoplight-warning, #c35500));
+  color: var(--tct-card-image-status-color-stolen, var(--tct-white, #fff));
 }
 
 .card-status-banner.status-lost-or-stolen {
-  background-color: var(--tct-card-image-status-background-lost-or-stolen);
-  color: var(--tct-card-image-status-color-lost-or-stolen);
+  background-color: var(--tct-card-image-status-background-lost-or-stolen, var(--const-stoplight-warning, #c35500));
+  color: var(--tct-card-image-status-color-lost-or-stolen, var(--tct-white, #fff));
 }
 
 .card-status-banner.status-digital {
-  background-color: var(--tct-card-image-status-background-digital);
-  color: var(--tct-card-image-status-color-digital);
+  background-color: var(--tct-card-image-status-background-digital, var(--tct-black, #000));
+  color: var(--tct-card-image-status-color-digital, var(--tct-white, #fff));
 }
 
 .card-details-wrapper {
@@ -439,12 +394,12 @@ button {
 }
 
 .card-text {
-  color: var(--tct-card-image-font-color);
+  color: var(--tct-card-image-font-color, var(--t-base, #fff));
   font-family: "Open Sans", Arial, sans-serif;
   font-weight: 600;
   line-height: 1;
   letter-spacing: 1.55px;
-  text-shadow: var(--tct-card-image-text-shadow);
+  text-shadow: var(--tct-card-image-text-shadow, 0px 0px 1px rgba(0, 0, 0, 0.85));
   text-transform: uppercase;
   white-space: nowrap;
   overflow: hidden;
@@ -530,7 +485,7 @@ button {
 
 .horizontal-card-type {
   font-size: var(--tct-card-image-type-font-size, 4cqw);
-  color: var(--tct-card-image-type-color, var(--tct-card-image-font-color));
+  color: var(--tct-card-image-type-color, var(--tct-card-image-font-color, var(--t-base, #fff)));
   margin-right: var(--tct-card-image-type-margin-right, 4.15cqw);
   margin-bottom: var(--tct-card-image-type-margin-bottom, -10.1cqw);
 }
@@ -685,7 +640,7 @@ button {
 .vertical-card-type {
   font-size: var(--tct-card-image-type-font-size, 6.4cqw);
   padding-bottom: 2cqw;
-  color: var(--tct-card-image-type-color, var(--tct-card-image-font-color));
+  color: var(--tct-card-image-type-color, var(--tct-card-image-font-color, var(--t-base, #fff)));
   margin-right: var(--tct-card-image-type-margin-right, 3cqw);
   margin-bottom: var(--tct-card-image-type-margin-bottom, -19cqw);
 }

package/dist/collection/components/q2-card-image/q2-card-image.js

@@ -369,11 +369,11 @@ export class Q2CardImage {
     render() {
         const cardContent = this.clickable ? (h("q2-btn", { block: true, disabled: this.disabled, label: this.tctAriaLabel, hideLabel: true, onClick: this.handleCardClick }, this.renderCardContent())) : (this.renderCardContent());
         const showBanner = !!this.cardStatus && this.size === 'large';
-        return (h(Host, { key: '4425c2f04d081d93b56ed67f00b949c8143d0046', class: {
+        return (h(Host, { key: 'f9fef10f67ab8b4b5a7908afbe82db955bd6c6ed', class: {
                 [`${this.orientation}`]: true,
                 'has-action': this.hasActionSlotContent,
                 'has-banner': showBanner,
-            } }, this.renderStatusBanner(), h("div", { key: '1d264f88e00805b9153a7ac59f4ea367bf28dc3f', class: "card-wrapper" }, cardContent, this.renderAction())));
+            } }, this.renderStatusBanner(), h("div", { key: '2c14cd32230baa1ef4c4300d3d5485b24cce674e', class: "card-wrapper" }, cardContent, this.renderAction())));
     }
     static get is() { return "q2-card-image"; }
     static get encapsulation() { return "shadow"; }
@@ -472,8 +472,8 @@ export class Q2CardImage {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'digital' | 'enabled' | 'disabled' | 'locked' | 'damaged' | 'lost' | 'stolen' | 'lost or stolen'",
-                    "resolved": "\"damaged\" | \"digital\" | \"disabled\" | \"enabled\" | \"locked\" | \"lost or stolen\" | \"lost\" | \"stolen\"",
+                    "original": "| 'digital'\n        | 'enabled'\n        | 'new'\n        | 'disabled'\n        | 'locked'\n        | 'damaged'\n        | 'lost'\n        | 'stolen'\n        | 'lost or stolen'",
+                    "resolved": "\"damaged\" | \"digital\" | \"disabled\" | \"enabled\" | \"locked\" | \"lost or stolen\" | \"lost\" | \"new\" | \"stolen\"",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/q2-card-image/test/q2-card-image-test.vr.js

@@ -61,6 +61,10 @@ const VARIANTS = [
         name: 'status-enabled',
         html: `<q2-card-image background="primary" card-status="enabled" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,
     },
+    {
+        name: 'status-new',
+        html: `<q2-card-image background="primary" card-status="new" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,
+    },
     {
         name: 'status-disabled',
         html: `<q2-card-image background="primary" card-status="disabled" disabled fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,

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

@@ -62,8 +62,21 @@ const FOCUS_VARIANT = {
     name: 'with-arrows',
     html: carousel('show-navigation-arrows'),
 };
+// frameless-panes variants that are non-deterministic due to the ResizeObserver race
+// in q2-carousel's schedulePaneHeightSync. Post-hydration aesthetic injection changes
+// CSS custom properties that affect pane content height, which fires ResizeObserver and
+// schedules a 1-rAF pane-sync callback. That callback can land after setupPage's rAF
+// wait resolves, producing different screenshots each run. Themes with larger font
+// overrides (default-2026: 14px via --app-font-size; minimalist: similar) are most
+// susceptible. Other themes happen to produce stable output at the same font metrics
+// as base-theme defaults, so only these two are non-deterministic in practice.
+const FRAMELESS_FLAKY_THEMES = new Set(['default-2026', 'minimalist']);
 const restingCase = (variant, theme) => {
     test(`q2-carousel--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        if (variant.name === 'frameless-panes' && FRAMELESS_FLAKY_THEMES.has(theme)) {
+            test.skip();
+            return;
+        }
         await setupPage(page, variant.html, { theme, setupLoc: true });
         await expect(page).toHaveScreenshot(`q2-carousel--${variant.name}--resting--${theme}.png`);
     });

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

@@ -405,7 +405,7 @@ label {
   transition: fill var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease));
 }
 :host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon {
-  stroke: var(--comp-checkbox-checked-fill-color, var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))));
+  stroke: var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-checked-fill-color, var(--comp-checkbox-outer-stroke-color))));
 }
 :host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon rect {
   fill: var(--comp-checkbox-checked-fill-color);
@@ -421,7 +421,7 @@ label {
   fill: var(--tct-checkbox-error-checked-outer-fill-color);
 }
 :host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon {
-  stroke: var(--comp-checkbox-checked-fill-color, var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))));
+  stroke: var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-checked-fill-color, var(--comp-checkbox-outer-stroke-color))));
 }
 :host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon rect {
   fill: var(--comp-checkbox-checked-fill-color);

package/dist/collection/components/q2-checkbox-group/q2-checkbox-group.css

@@ -102,6 +102,7 @@ button {
  * @prop --tct-checkbox-group-label-font-size?: (<length-percentage>) Controls the optional font size of the checkbox-group label.
  * @prop --tct-checkbox-group-label-font-weight: (<number>) Controls the font weight of the checkbox-group label.
  * @prop --tct-checkbox-group-label-letter-spacing?: (<length>) Controls the optional letter spacing of the checkbox-group label.
+ * @prop --tct-checkbox-group-label-line-height?: (<length-percentage>) Controls the optional line height of the checkbox-group label.
  * @prop --tct-checkbox-group-label-text-transform?: (<custom-ident>) Controls the optional text transform of the checkbox-group label.
  * @prop --tct-checkbox-group-label-optional-color: (<color>) Controls the text color of the "(optional)" indicator next to the label.
  * @prop --tct-checkbox-group-label-optional-font-size: (<length-percentage>) Controls the font size of the "(optional)" indicator next to the label.
@@ -131,6 +132,7 @@ fieldset {
   font-weight: var(--tct-checkbox-group-label-font-weight, 600);
   text-transform: var(--tct-checkbox-group-label-text-transform, none);
   letter-spacing: var(--tct-checkbox-group-label-letter-spacing, inherit);
+  line-height: var(--tct-checkbox-group-label-line-height, inherit);
 }
 .label-row q2-icon {
   grid-area: icon;

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

@@ -1,4 +1,5 @@
 /**
+ * @prop --tct-context-close-icon-size: (<length>) Controls the size of the close icon in the affordance slot.
  * @prop --tct-context-background: (<color>) Controls the background color of the context container.
  * @prop --tct-context-color: (<color>) Controls the text color propagated to context items.
  * @prop --tct-context-backdrop-filter?: (*) Controls the optional backdrop-filter applied to the context container.
@@ -71,6 +72,10 @@
   --tct-btn-icon-border-radius: var(--app-border-radius-1, 4px);
 }
 
+::slotted(q2-btn[data-context-close-affordance]) {
+  --tct-icon-size: var(--tct-context-close-icon-size, var(--const-px-18, 18px));
+}
+
 ::slotted(q2-link) {
   --tct-link-border-radius: var(--app-border-radius-1, 4px);
   --tct-icon-stroke-primary: var(--t-primary, #6a4a9e);

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

@@ -77,6 +77,7 @@ export class Q2Context {
                 return;
             }
             if (el.tagName === 'Q2-BTN') {
+                el.toggleAttribute('data-context-close-affordance', !!el.querySelector('q2-icon[type="close"]'));
                 if (!el.getAttribute('label'))
                     el.setAttribute('label', 'Dismiss');
                 if (!el.getAttribute('hide-label'))
@@ -129,7 +130,7 @@ export class Q2Context {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'e5721a07d072dc6fa3db22edfd50c5787946ff9a', class: "context-wrapper" }, h("q2-item", { key: 'f7591f8009e1f28d3e0fffb57dc280bd53a5cafe', class: "context-item" }, this.hasDecoratorSlotContent && (h("slot", { key: '74215ffc70d4a19a00c921869391843539f28a6a', name: "decorator", slot: "decorator" })), h("div", { key: 'c1f51789a6cdbe7a12a055da39e2a3747639aff3', class: "context-body", slot: "body" }, h("slot", { key: 'a3d4fc206925aa9f23bba1d785b2df9b74cef2a5', name: "header" }), h("slot", { key: '5e4bd0a3f595c52b1a8d60ff2a06b4333919719f', name: "description" })), this.hasAffordanceSlotContent && (h("slot", { key: '26891e4fd22716ff431df7c98814d3086fa7a48e', name: "affordance", slot: "action" }))), this.separator && (h("div", { key: '6f5102f66edfa4bdc043e4907d09e22d70218b7d', class: "separator", role: "separator" })), this.hasActionGroupSlotContent && (h("q2-action-group", { key: 'a01f3f19278f94ec67fa21a34a5f8d26823a1000', class: "action-group", orientation: "horizontal" }, h("slot", { key: '86051221e06ac1c4b68bf31228f68724e67474e0', name: "action-group" }))), this.hasFooterSlotContent && h("slot", { key: 'f12d517e123e1cc7ef3c85fb53e5d227a82f3132', name: "footer" })));
+        return (h("div", { key: 'f374309924fd5e690d548eb1961a337066e5bb6e', class: "context-wrapper" }, h("q2-item", { key: 'fcc7e1727a9948303c5598a7e080e6b3a5b57368', class: "context-item" }, this.hasDecoratorSlotContent && (h("slot", { key: '8f8395c6c3df2da953cb8b7868238d8ee9709c8d', name: "decorator", slot: "decorator" })), h("div", { key: '7ea4462759c16557a9291fb5ef230636e92fc6c0', class: "context-body", slot: "body" }, h("slot", { key: 'b8888346dc535230477f7f651ab2114acdf2e9ff', name: "header" }), h("slot", { key: 'f85503068547d65927f4132b5e1799a448565fbf', name: "description" })), this.hasAffordanceSlotContent && (h("slot", { key: '4c6f68576515e7650eebe5bf78776f4fecd3b6f2', name: "affordance", slot: "action" }))), this.separator && (h("div", { key: 'e07f5aa2aeb1ae8f90981cc9ff7d5da9eee407b0', class: "separator", role: "separator" })), this.hasActionGroupSlotContent && (h("q2-action-group", { key: '769c7039bd48521c47bac4e4ff7165dd24b72035', class: "action-group", orientation: "horizontal" }, h("slot", { key: 'da7598f9660d358dc4b568816c9883c6451b3156', name: "action-group" }))), this.hasFooterSlotContent && h("slot", { key: '6666dc5ab9f56284774be17ccba02fa605325ac4', name: "footer" })));
     }
     static get is() { return "q2-context"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,6 +27,15 @@ const VARIANTS = [
             <q2-btn slot="affordance" hide-label label="Dismiss"><q2-icon type="close"></q2-icon></q2-btn>
         </q2-context>`,
     },
+    {
+        name: 'with-non-close-affordance',
+        html: `<q2-context>
+            <q2-icon slot="decorator" type="lightbulb"></q2-icon>
+            <h4 slot="header">Application Status</h4>
+            <p slot="description">A brief description of what's happening.</p>
+            <q2-btn slot="affordance" hide-label label="Edit"><q2-icon type="pencil"></q2-icon></q2-btn>
+        </q2-context>`,
+    },
     {
         name: 'with-action-group',
         html: `<q2-context>
@@ -82,7 +91,8 @@ const VARIANTS = [
 const restingCase = (variant, theme) => {
     test(`q2-context--${variant.name}--resting — ${theme}`, async ({ page }) => {
         await setupPage(page, variant.html, { theme });
-        await expect(page).toHaveScreenshot(`q2-context--${variant.name}--resting--${theme}.png`);
+        const maxDiffPixels = variant.name === 'separator' && theme === 'glassmorphism' ? 3 : 0;
+        await expect(page).toHaveScreenshot(`q2-context--${variant.name}--resting--${theme}.png`, { maxDiffPixels });
     });
 };
 test.describe('q2-context — variants × themes', () => {

package/dist/collection/components/q2-data-table/q2-data-table.css

@@ -111,6 +111,7 @@ button {
  * @prop --tct-data-table-header-font-size: (<length-percentage>) Controls the font size of data table header cells.
  * @prop --tct-data-table-header-font-weight: (<number>) Controls the font weight of data table header cells.
  * @prop --tct-data-table-header-sortable-icon-size: (<length>) Controls the size of the sort-indicator icon in sortable headers.
+ * @prop --tct-data-table-action-icon-size: (<length>) Controls the size of expandable-row and dropdown action icons.
  * @prop --tct-data-table-header-sorted-font-weight: (<number>) Controls the font weight applied to a sorted header column.
  * @prop --tct-data-table-sticky-header-background: (<color>) Controls the background color of the data table header when sticky.
  * @prop --tct-data-table-sticky-header-top?: (<length-percentage>) Controls the optional top offset of the sticky header.
@@ -425,11 +426,13 @@ td.clamped div {
   -webkit-box-orient: vertical;
 }
 td.expandable-row-control-column {
+  --tct-icon-size: var(--tct-data-table-action-icon-size, var(--const-px-18, 18px));
   --tct-btn-icon-hover-bg: transparent;
   padding: var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 5px));
   text-align: center;
 }
 td.dropdown-column {
+  --tct-icon-size: var(--tct-data-table-action-icon-size, var(--const-px-18, 18px));
   padding: var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));
   text-align: center;
 }

package/dist/collection/components/q2-data-table/test/q2-data-table-test.vr.js

@@ -44,6 +44,11 @@ const VARIANTS = [
     { name: 'empty', attrs: '', emptyRows: true },
     { name: 'hide-caption', attrs: 'hide-caption' },
     { name: 'combo-stripe-border-shadow', attrs: 'striped bordered shadowed density="compact"' },
+    {
+        name: 'dropdown-action',
+        attrs: '',
+        slotContent: '<q2-dropdown slot="row-1-dropdown" type="icon" icon="options" label="More actions" hide-label><q2-option value="view">View details</q2-option></q2-dropdown>',
+    },
     {
         name: 'status-rows',
         attrs: '',

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

@@ -88,6 +88,7 @@ button {
   }
 }
 /**
+ * @prop --tct-dropdown-icon-size: (<length>) Controls the size of the dropdown icon.
  * @prop --tct-dropdown-content-padding?: (<length-percentage>+) Controls the optional padding around the dropdown popover content.
  * @prop --tct-dropdown-popover-top-slot-padding: (<length-percentage>+) Controls the inner padding of the dropdown's popover-top slot.
  * @prop --tct-dropdown-popover-bottom-slot-padding: (<length-percentage>+) Controls the inner padding of the dropdown's popover-bottom slot.
@@ -122,6 +123,7 @@ button {
 q2-icon {
   pointer-events: none;
   margin-block: -100px;
+  --tct-icon-size: var(--tct-dropdown-icon-size, var(--const-px-18, 18px));
 }
 
 click-elsewhere {