q2-tecton-elements 1.67.2 → 1.68.0

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

@@ -65,6 +65,68 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-card-background: (<color>) Controls the background color of the card container.
+ * @prop --tct-card-backdrop-filter?: (*) Controls the optional backdrop-filter applied to the card container.
+ * @prop --tct-card-color: (<color>) Controls the text color of the card container (legacy alias).
+ * @prop --tct-card-font-color: (<color>) Controls the text color of the card container.
+ * @prop --tct-card-font-size: (<length-percentage>) Controls the font size of the card title text.
+ * @prop --tct-card-font-weight: (<number>) Controls the font weight of the card title text.
+ * @prop --tct-card-font-height: (<number> | <length-percentage>) Controls the line height of the card title and description text.
+ * @prop --tct-card-border-color?: (<color>) Controls the optional border color of the card container.
+ * @prop --tct-card-border-radius: (<length-percentage>) Controls the corner radius of the card container.
+ * @prop --tct-card-border-style: (<custom-ident>) Controls the border style of the card container.
+ * @prop --tct-card-border-width?: (<length>+) Controls the optional border width of the card container.
+ * @prop --tct-card-gap: (<length-percentage>) Controls the gap between the card avatar (if present) and its content.
+ * @prop --tct-card-content-gap: (<length-percentage>) Controls the gap between elements inside the card content area.
+ * @prop --tct-card-height: (<length-percentage>) Controls the height of the card container.
+ * @prop --tct-card-min-height: (<length-percentage>) Controls the minimum height of the card container.
+ * @prop --tct-card-max-height?: (<length-percentage>) Controls the optional maximum height of the card container.
+ * @prop --tct-card-overflow: (<custom-ident>) Controls the overflow behavior of the card container.
+ * @prop --tct-card-padding: (<length-percentage>+) Controls the inner padding of the card container.
+ * @prop --tct-card-avatar-size: (<length>) Controls the size of the avatar slot rendered inside the card.
+ * @prop --tct-card-description-font-size?: (<length-percentage>) Controls the optional font size of the card description text.
+ * @prop --tct-card-description-line-count: (<integer>) Controls the maximum number of lines for the card description before clamping.
+ * @prop --tct-card-title-line-count: (<integer>) Controls the maximum number of lines for the card title before clamping.
+ * @prop --tct-card-focus-visible-box-shadow: (*) Controls the box shadow applied to the clickable card when focused via keyboard.
+ * @prop --tct-card-static-background?: (<color>) Controls the optional background of the card container in its static appearance.
+ * @prop --tct-card-static-font-color: (<color>) Controls the text color of the card container in its static appearance.
+ * @prop --tct-card-bar-width: (<length>) Controls the width of the colored accent bar on the side of the card.
+ * @prop --tct-card-bar-color-primary: (<color>) Controls the color of the accent bar when color is primary.
+ * @prop --tct-card-bar-color-secondary: (<color>) Controls the color of the accent bar when color is secondary.
+ * @prop --tct-card-bar-color-tertiary: (<color>) Controls the color of the accent bar when color is tertiary.
+ * @prop --tct-card-bar-color-info: (<color>) Controls the color of the accent bar when color is info.
+ * @prop --tct-card-bar-color-success: (<color>) Controls the color of the accent bar when color is success.
+ * @prop --tct-card-bar-color-warning: (<color>) Controls the color of the accent bar when color is warning.
+ * @prop --tct-card-bar-color-alert: (<color>) Controls the color of the accent bar when color is alert.
+ * @prop --tct-card-bar-color-accent-1: (<color>) Controls the color of the accent bar when color is accent-1.
+ * @prop --tct-card-bar-color-accent-2: (<color>) Controls the color of the accent bar when color is accent-2.
+ * @prop --tct-card-bar-color-accent-3: (<color>) Controls the color of the accent bar when color is accent-3.
+ * @prop --tct-card-bar-color-accent-4: (<color>) Controls the color of the accent bar when color is accent-4.
+ * @prop --tct-card-bar-color-accent-5: (<color>) Controls the color of the accent bar when color is accent-5.
+ * @prop --tct-card-bar-color-accent-6: (<color>) Controls the color of the accent bar when color is accent-6.
+ * @prop --tct-card-bar-color-accent-7: (<color>) Controls the color of the accent bar when color is accent-7.
+ * @prop --tct-card-bar-color-accent-8: (<color>) Controls the color of the accent bar when color is accent-8.
+ * @prop --tct-card-bar-color-accent-9: (<color>) Controls the color of the accent bar when color is accent-9.
+ * @prop --tct-card-bar-color-accent-10: (<color>) Controls the color of the accent bar when color is accent-10.
+ * @prop --tct-card-bar-color-accent-11: (<color>) Controls the color of the accent bar when color is accent-11.
+ * @prop --tct-card-bar-color-accent-12: (<color>) Controls the color of the accent bar when color is accent-12.
+ * @prop --tct-card-elevation-1-box-shadow: (*) Controls the box shadow of the card in elevation level 1.
+ * @prop --tct-card-elevation-1-hover-box-shadow: (*) Controls the box shadow of the clickable card on hover in elevation level 1.
+ * @prop --tct-card-elevation-1-active-box-shadow: (*) Controls the box shadow of the clickable card when active in elevation level 1.
+ * @prop --tct-card-elevation-2-box-shadow: (*) Controls the box shadow of the card in elevation level 2.
+ * @prop --tct-card-elevation-2-hover-box-shadow: (*) Controls the box shadow of the clickable card on hover in elevation level 2.
+ * @prop --tct-card-elevation-2-active-box-shadow: (*) Controls the box shadow of the clickable card when active in elevation level 2.
+ * @prop --tct-card-elevation-3-box-shadow: (*) Controls the box shadow of the card in elevation level 3.
+ * @prop --tct-card-elevation-3-hover-box-shadow: (*) Controls the box shadow of the clickable card on hover in elevation level 3.
+ * @prop --tct-card-elevation-3-active-box-shadow: (*) Controls the box shadow of the clickable card when active in elevation level 3.
+ * @prop --tct-card-elevation-4-box-shadow: (*) Controls the box shadow of the card in elevation level 4.
+ * @prop --tct-card-elevation-4-hover-box-shadow: (*) Controls the box shadow of the clickable card on hover in elevation level 4.
+ * @prop --tct-card-elevation-4-active-box-shadow: (*) Controls the box shadow of the clickable card when active in elevation level 4.
+ * @prop --tct-card-elevation-5-box-shadow: (*) Controls the box shadow of the card in elevation level 5.
+ * @prop --tct-card-elevation-5-hover-box-shadow: (*) Controls the box shadow of the clickable card on hover in elevation level 5.
+ * @prop --tct-card-elevation-5-active-box-shadow: (*) Controls the box shadow of the clickable card when active in elevation level 5.
+ */
 :host {
   display: block;
 }

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

@@ -0,0 +1,72 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const DESC = 'This is your card description which can be up to two lines long.';
+const SHORT_DESC = 'This is your card description';
+const VARIANTS = [
+    {
+        name: 'default',
+        html: `<q2-card title="Card Title" description="${DESC}" avatar-icon="document"></q2-card>`,
+    },
+    {
+        name: 'no-icon',
+        html: `<q2-card title="Card Title" description="${DESC}"></q2-card>`,
+    },
+    {
+        name: 'non-clickable',
+        html: `<q2-card title="Card Title" description="${DESC}" avatar-icon="document" type="non-clickable"></q2-card>`,
+    },
+    {
+        name: 'static',
+        html: `<q2-card title="Card Title" description="${DESC}" is-static="true" avatar-icon="document"></q2-card>`,
+    },
+    {
+        name: 'with-bar',
+        html: `<q2-card title="Card Title" description="${DESC}" bar="primary" avatar-icon="document"></q2-card>`,
+    },
+    {
+        name: 'elevation-1',
+        html: `<q2-card title="Card Title" description="${SHORT_DESC}" elevation="1" avatar-icon="document"></q2-card>`,
+    },
+    {
+        name: 'elevation-2',
+        html: `<q2-card title="Card Title" description="${SHORT_DESC}" elevation="2" avatar-icon="document"></q2-card>`,
+    },
+    {
+        name: 'elevation-3',
+        html: `<q2-card title="Card Title" description="${SHORT_DESC}" elevation="3" avatar-icon="document"></q2-card>`,
+    },
+    {
+        name: 'elevation-4',
+        html: `<q2-card title="Card Title" description="${SHORT_DESC}" elevation="4" avatar-icon="document"></q2-card>`,
+    },
+    {
+        name: 'elevation-5',
+        html: `<q2-card title="Card Title" description="${SHORT_DESC}" elevation="5" avatar-icon="document"></q2-card>`,
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-card--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-card--${variant.name}--resting--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-card--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-card--${variant.name}--focus--${theme}.png`);
+    });
+};
+const DEFAULT_VARIANT = VARIANTS[0];
+test.describe('q2-card — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+    for (const theme of THEMES) {
+        focusCase(DEFAULT_VARIANT, theme);
+    }
+});
+//# sourceMappingURL=q2-card-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-card-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-card/test/q2-card-test.vr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAS,MAAM,gCAAgC,CAAC;AAE1E,MAAM,IAAI,GAAG,kEAAkE,CAAC;AAChF,MAAM,UAAU,GAAG,+BAA+B,CAAC;AAInD,MAAM,QAAQ,GAAc;IACxB;QACI,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,4CAA4C,IAAI,qCAAqC;KAC9F;IACD;QACI,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,4CAA4C,IAAI,cAAc;KACvE;IACD;QACI,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,4CAA4C,IAAI,0DAA0D;KACnH;IACD;QACI,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,4CAA4C,IAAI,sDAAsD;KAC/G;IACD;QACI,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,4CAA4C,IAAI,mDAAmD;KAC5G;IACD;QACI,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,4CAA4C,UAAU,mDAAmD;KAClH;IACD;QACI,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,4CAA4C,UAAU,mDAAmD;KAClH;IACD;QACI,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,4CAA4C,UAAU,mDAAmD;KAClH;IACD;QACI,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,4CAA4C,UAAU,mDAAmD;KAClH;IACD;QACI,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,4CAA4C,UAAU,mDAAmD;KAClH;CACJ,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAE,KAAY,EAAE,EAAE;IACnD,IAAI,CAAC,YAAY,OAAO,CAAC,IAAI,eAAe,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACpE,MAAM,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QAC/C,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,YAAY,OAAO,CAAC,IAAI,cAAc,KAAK,MAAM,CAAC,CAAC;IAC3F,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,OAAgB,EAAE,KAAY,EAAE,EAAE;IACjD,IAAI,CAAC,YAAY,OAAO,CAAC,IAAI,aAAa,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClE,MAAM,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QAC/C,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,YAAY,OAAO,CAAC,IAAI,YAAY,KAAK,MAAM,CAAC,CAAC;IACzF,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AAEpC,IAAI,CAAC,QAAQ,CAAC,6BAA6B,EAAE,GAAG,EAAE;IAC9C,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;QAC7B,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YACzB,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAChC,CAAC;IACL,CAAC;IACD,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QACzB,SAAS,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;IACtC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\nconst DESC = 'This is your card description which can be up to two lines long.';\nconst SHORT_DESC = 'This is your card description';\n\ntype Variant = { name: string; html: string };\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'default',\n        html: `<q2-card title=\"Card Title\" description=\"${DESC}\" avatar-icon=\"document\"></q2-card>`,\n    },\n    {\n        name: 'no-icon',\n        html: `<q2-card title=\"Card Title\" description=\"${DESC}\"></q2-card>`,\n    },\n    {\n        name: 'non-clickable',\n        html: `<q2-card title=\"Card Title\" description=\"${DESC}\" avatar-icon=\"document\" type=\"non-clickable\"></q2-card>`,\n    },\n    {\n        name: 'static',\n        html: `<q2-card title=\"Card Title\" description=\"${DESC}\" is-static=\"true\" avatar-icon=\"document\"></q2-card>`,\n    },\n    {\n        name: 'with-bar',\n        html: `<q2-card title=\"Card Title\" description=\"${DESC}\" bar=\"primary\" avatar-icon=\"document\"></q2-card>`,\n    },\n    {\n        name: 'elevation-1',\n        html: `<q2-card title=\"Card Title\" description=\"${SHORT_DESC}\" elevation=\"1\" avatar-icon=\"document\"></q2-card>`,\n    },\n    {\n        name: 'elevation-2',\n        html: `<q2-card title=\"Card Title\" description=\"${SHORT_DESC}\" elevation=\"2\" avatar-icon=\"document\"></q2-card>`,\n    },\n    {\n        name: 'elevation-3',\n        html: `<q2-card title=\"Card Title\" description=\"${SHORT_DESC}\" elevation=\"3\" avatar-icon=\"document\"></q2-card>`,\n    },\n    {\n        name: 'elevation-4',\n        html: `<q2-card title=\"Card Title\" description=\"${SHORT_DESC}\" elevation=\"4\" avatar-icon=\"document\"></q2-card>`,\n    },\n    {\n        name: 'elevation-5',\n        html: `<q2-card title=\"Card Title\" description=\"${SHORT_DESC}\" elevation=\"5\" avatar-icon=\"document\"></q2-card>`,\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-card--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-card--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-card--${variant.name}--focus — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await page.keyboard.press('Tab');\n        await expect(page).toHaveScreenshot(`q2-card--${variant.name}--focus--${theme}.png`);\n    });\n};\n\nconst DEFAULT_VARIANT = VARIANTS[0];\n\ntest.describe('q2-card — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n        }\n    }\n    for (const theme of THEMES) {\n        focusCase(DEFAULT_VARIANT, theme);\n    }\n});\n"]}

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

@@ -66,23 +66,25 @@ button {
 }
 
 :host {
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-: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%;
@@ -90,13 +92,45 @@ button {
   --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),
@@ -118,6 +152,33 @@ button {
   --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.
+   */
+}
+
+:host {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
 }
 
 :host([inline]) {

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

@@ -0,0 +1,152 @@
+import { readFileSync } from "fs";
+import { join } from "path";
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+// Inline FI logo as a data URI so the test stays hermetic — `setContent` runs
+// against `about:blank`, so relative paths from the .html playground would not
+// resolve here.
+const FI_LOGO_SVG = readFileSync(join(__dirname, '../test-assets/fi-logos/fi-logo-pillar-bank-white.svg'), 'utf8');
+const FI_LOGO = `data:image/svg+xml;base64,${Buffer.from(FI_LOGO_SVG).toString('base64')}`;
+const HOLDER = 'William Adama';
+const NUMBER = '4321';
+const EXP = '2028-09';
+// Establish a stable card width so size-threshold variants are deterministic.
+// 400px puts horizontal cards into the "large" bucket (matches the .html playground).
+const W = (px) => `style="--tct-card-image-width: ${px}px"`;
+const W_LG = W(400);
+const W_VERT = `style="--tct-card-image-width: 250px"`;
+const VARIANTS = [
+    {
+        name: 'default',
+        html: `<q2-card-image background="primary" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,
+    },
+    {
+        name: 'vertical',
+        html: `<q2-card-image orientation="vertical" background="primary" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_VERT}></q2-card-image>`,
+    },
+    {
+        name: 'bg-secondary',
+        html: `<q2-card-image background="secondary" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="visa" card-type="debit" ${W_LG}></q2-card-image>`,
+    },
+    {
+        name: 'bg-tertiary',
+        html: `<q2-card-image background="tertiary" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,
+    },
+    {
+        name: 'bg-gradient-overlay-dot',
+        html: `<q2-card-image background="gradient" overlay="dot" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,
+    },
+    {
+        name: 'vendor-visa-atm',
+        html: `<q2-card-image background="primary" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="visa" card-type="atm" ${W_LG}></q2-card-image>`,
+    },
+    {
+        name: 'vendor-color-white',
+        html: `<q2-card-image background="primary" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" vendor-color="white" ${W_LG}></q2-card-image>`,
+    },
+    {
+        name: 'vendor-color-black',
+        html: `<q2-card-image background="tertiary" fi-logo="${FI_LOGO}" chip="silver" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="visa" vendor-color="black" card-type="debit" card-type-color="black" ${W_LG}></q2-card-image>`,
+    },
+    {
+        name: 'chip-silver',
+        html: `<q2-card-image background="primary" fi-logo="${FI_LOGO}" chip="silver" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="visa" card-type="debit" ${W_LG}></q2-card-image>`,
+    },
+    {
+        name: 'status-digital',
+        html: `<q2-card-image background="primary" card-status="digital" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,
+    },
+    {
+        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-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>`,
+    },
+    {
+        name: 'status-locked',
+        html: `<q2-card-image background="primary" card-status="locked" disabled fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,
+    },
+    {
+        name: 'status-damaged',
+        html: `<q2-card-image background="primary" card-status="damaged" disabled fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,
+    },
+    {
+        name: 'status-lost-or-stolen',
+        html: `<q2-card-image background="primary" card-status="lost or stolen" disabled fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,
+    },
+    {
+        name: 'status-text-override',
+        html: `<q2-card-image background="primary" card-status="locked" status-text-override="CUSTOM" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,
+    },
+    {
+        name: 'clickable',
+        html: `<q2-card-image background="primary" clickable="true" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,
+    },
+    {
+        name: 'with-action',
+        html: `<q2-card-image background="primary" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}><q2-dropdown slot="action" icon="options"><q2-dropdown-item>View details</q2-dropdown-item><q2-dropdown-item>Lock card</q2-dropdown-item></q2-dropdown></q2-card-image>`,
+    },
+    {
+        name: 'no-card-holder-label',
+        html: `<q2-card-image background="primary" card-holder-label="false" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,
+    },
+    {
+        name: 'no-expiration-date-label',
+        html: `<q2-card-image background="primary" expiration-date-label="false" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,
+    },
+    {
+        name: 'size-medium',
+        html: `<q2-card-image background="primary" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W(280)}></q2-card-image>`,
+    },
+    {
+        name: 'size-small',
+        html: `<q2-card-image background="primary" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W(160)}></q2-card-image>`,
+    },
+    {
+        name: 'size-tiny',
+        html: `<q2-card-image background="primary" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W(80)}></q2-card-image>`,
+    },
+    {
+        name: 'vertical-with-action-status',
+        html: `<q2-card-image orientation="vertical" background="primary" card-status="enabled" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_VERT}><q2-dropdown slot="action" icon="options"><q2-dropdown-item>View details</q2-dropdown-item></q2-dropdown></q2-card-image>`,
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-card-image--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-card-image--${variant.name}--resting--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-card-image--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.locator('q2-card-image').hover();
+        await expect(page).toHaveScreenshot(`q2-card-image--${variant.name}--hover--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-card-image--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.keyboard.press('Tab');
+        // Some themes animate the q2-btn focus ring on Tab; wait for it to settle
+        // before snapshotting so the baseline is reproducible.
+        await page.waitForTimeout(300);
+        await expect(page).toHaveScreenshot(`q2-card-image--${variant.name}--focus--${theme}.png`);
+    });
+};
+const CLICKABLE_VARIANT = VARIANTS.find(v => v.name === 'clickable');
+test.describe('q2-card-image — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+    for (const theme of THEMES) {
+        hoverCase(CLICKABLE_VARIANT, theme);
+        focusCase(CLICKABLE_VARIANT, theme);
+    }
+});
+//# sourceMappingURL=q2-card-image-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-card-image-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-card-image/test/q2-card-image-test.vr.ts"],"names":[],"mappings":"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","sourcesContent":["import { readFileSync } from 'fs';\nimport { join } from 'path';\nimport { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\n// Inline FI logo as a data URI so the test stays hermetic — `setContent` runs\n// against `about:blank`, so relative paths from the .html playground would not\n// resolve here.\nconst FI_LOGO_SVG = readFileSync(join(__dirname, '../test-assets/fi-logos/fi-logo-pillar-bank-white.svg'), 'utf8');\nconst FI_LOGO = `data:image/svg+xml;base64,${Buffer.from(FI_LOGO_SVG).toString('base64')}`;\n\nconst HOLDER = 'William Adama';\nconst NUMBER = '4321';\nconst EXP = '2028-09';\n\n// Establish a stable card width so size-threshold variants are deterministic.\n// 400px puts horizontal cards into the \"large\" bucket (matches the .html playground).\nconst W = (px: number) => `style=\"--tct-card-image-width: ${px}px\"`;\nconst W_LG = W(400);\nconst W_VERT = `style=\"--tct-card-image-width: 250px\"`;\n\ntype Variant = { name: string; html: string };\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'default',\n        html: `<q2-card-image background=\"primary\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'vertical',\n        html: `<q2-card-image orientation=\"vertical\" background=\"primary\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W_VERT}></q2-card-image>`,\n    },\n    {\n        name: 'bg-secondary',\n        html: `<q2-card-image background=\"secondary\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"visa\" card-type=\"debit\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'bg-tertiary',\n        html: `<q2-card-image background=\"tertiary\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'bg-gradient-overlay-dot',\n        html: `<q2-card-image background=\"gradient\" overlay=\"dot\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'vendor-visa-atm',\n        html: `<q2-card-image background=\"primary\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"visa\" card-type=\"atm\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'vendor-color-white',\n        html: `<q2-card-image background=\"primary\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" vendor-color=\"white\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'vendor-color-black',\n        html: `<q2-card-image background=\"tertiary\" fi-logo=\"${FI_LOGO}\" chip=\"silver\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"visa\" vendor-color=\"black\" card-type=\"debit\" card-type-color=\"black\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'chip-silver',\n        html: `<q2-card-image background=\"primary\" fi-logo=\"${FI_LOGO}\" chip=\"silver\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"visa\" card-type=\"debit\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'status-digital',\n        html: `<q2-card-image background=\"primary\" card-status=\"digital\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'status-enabled',\n        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>`,\n    },\n    {\n        name: 'status-disabled',\n        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>`,\n    },\n    {\n        name: 'status-locked',\n        html: `<q2-card-image background=\"primary\" card-status=\"locked\" disabled fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'status-damaged',\n        html: `<q2-card-image background=\"primary\" card-status=\"damaged\" disabled fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'status-lost-or-stolen',\n        html: `<q2-card-image background=\"primary\" card-status=\"lost or stolen\" disabled fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'status-text-override',\n        html: `<q2-card-image background=\"primary\" card-status=\"locked\" status-text-override=\"CUSTOM\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'clickable',\n        html: `<q2-card-image background=\"primary\" clickable=\"true\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'with-action',\n        html: `<q2-card-image background=\"primary\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W_LG}><q2-dropdown slot=\"action\" icon=\"options\"><q2-dropdown-item>View details</q2-dropdown-item><q2-dropdown-item>Lock card</q2-dropdown-item></q2-dropdown></q2-card-image>`,\n    },\n    {\n        name: 'no-card-holder-label',\n        html: `<q2-card-image background=\"primary\" card-holder-label=\"false\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'no-expiration-date-label',\n        html: `<q2-card-image background=\"primary\" expiration-date-label=\"false\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W_LG}></q2-card-image>`,\n    },\n    {\n        name: 'size-medium',\n        html: `<q2-card-image background=\"primary\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W(280)}></q2-card-image>`,\n    },\n    {\n        name: 'size-small',\n        html: `<q2-card-image background=\"primary\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W(160)}></q2-card-image>`,\n    },\n    {\n        name: 'size-tiny',\n        html: `<q2-card-image background=\"primary\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W(80)}></q2-card-image>`,\n    },\n    {\n        name: 'vertical-with-action-status',\n        html: `<q2-card-image orientation=\"vertical\" background=\"primary\" card-status=\"enabled\" fi-logo=\"${FI_LOGO}\" chip=\"gold\" card-number=\"${NUMBER}\" expiration-date=\"${EXP}\" card-holder=\"${HOLDER}\" vendor=\"mastercard\" ${W_VERT}><q2-dropdown slot=\"action\" icon=\"options\"><q2-dropdown-item>View details</q2-dropdown-item></q2-dropdown></q2-card-image>`,\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-card-image--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-card-image--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst hoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-card-image--${variant.name}--hover — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await page.locator('q2-card-image').hover();\n        await expect(page).toHaveScreenshot(`q2-card-image--${variant.name}--hover--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-card-image--${variant.name}--focus — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await page.keyboard.press('Tab');\n        // Some themes animate the q2-btn focus ring on Tab; wait for it to settle\n        // before snapshotting so the baseline is reproducible.\n        await page.waitForTimeout(300);\n        await expect(page).toHaveScreenshot(`q2-card-image--${variant.name}--focus--${theme}.png`);\n    });\n};\n\nconst CLICKABLE_VARIANT = VARIANTS.find(v => v.name === 'clickable')!;\n\ntest.describe('q2-card-image — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n        }\n    }\n    for (const theme of THEMES) {\n        hoverCase(CLICKABLE_VARIANT, theme);\n        focusCase(CLICKABLE_VARIANT, theme);\n    }\n});\n"]}

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

@@ -65,6 +65,40 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-carousel-background: (<color>) Controls the background color of the insufficient-pane feedback container.
+ * @prop --tct-carousel-gap: (<length-percentage>) Controls the gap between the carousel content row and the pagination row.
+ * @prop --tct-carousel-container-padding: (<length-percentage>+) Controls the inner padding of the swiper container in the default display.
+ * @prop --tct-carousel-frameless-container-padding?: (<length-percentage>+) Controls the optional inner padding of the swiper container in the frameless display.
+ * @prop --tct-carousel-full-width-container-padding: (<length-percentage>+) Controls the inner padding of the swiper container in the full-width display.
+ * @prop --tct-carousel-neighbor-pane-scale: (<number>) Controls the scale factor applied to non-active panes in the content-peek display.
+ * @prop --tct-carousel-edge-fade-color: (<color>) Controls the fade gradient color at the left and right edges of the carousel.
+ * @prop --tct-carousel-edge-fade-width: (<length>) Controls the width of the fade gradient at the left and right edges of the carousel.
+ * @prop --tct-carousel-control-gap: (<length-percentage>) Controls the gap between elements in the carousel's center control tray.
+ * @prop --tct-carousel-pagination-height: (<length>) Controls the height of the pagination indicator row.
+ * @prop --tct-carousel-pagination-gap: (<length-percentage>) Controls the gap between pagination indicators in autoplay mode.
+ * @prop --tct-carousel-pagination-center-tray-margin: (<length-percentage>+) Controls the horizontal margin of the carousel's center control tray.
+ * @prop --tct-carousel-indicator-size: (<length>) Controls the size of inactive page indicators.
+ * @prop --tct-carousel-indicator-active: (<color>) Controls the background color of the active page indicator.
+ * @prop --tct-carousel-indicator-active-width: (<length>) Controls the width of the active page indicator.
+ * @prop --tct-carousel-indicator-inactive: (<color>) Controls the background color of inactive page indicators in autoplay mode.
+ * @prop --tct-carousel-page-indicator-inactive-color: (<color>) Controls the background color of inactive page indicators in the default mode.
+ * @prop --tct-carousel-page-indicator-height: (<length>) Controls the height of page indicators in autoplay mode.
+ * @prop --tct-carousel-page-indicator-width: (<length>) Controls the width of page indicators in autoplay mode.
+ * @prop --tct-carousel-page-transition-duration: (<time>) Controls the transition duration of page indicator animations.
+ * @prop --tct-carousel-active-page-border-radius: (<length-percentage>) Controls the corner radius of page indicators.
+ * @prop --tct-carousel-active-page-border-radius-pseudo: (<length-percentage>) Controls the corner radius of the active page indicator's autoplay progress overlay.
+ * @prop --tct-carousel-floating-nav-arrow-height: (<length>) Controls the height of the floating navigation arrows.
+ * @prop --tct-carousel-navigation-arrow-opacity: (<number>) Controls the opacity of the navigation arrows.
+ * @prop --tct-carousel-arrow-background: (<color>) Controls the background color of the navigation arrow buttons.
+ * @prop --tct-carousel-arrow-hover-background: (<color>) Controls the background color of the navigation arrow buttons on hover and focus.
+ * @prop --tct-carousel-arrow-font-color: (<color>) Controls the color of the icon inside the navigation arrow buttons.
+ * @prop --tct-carousel-btn-icon-stroke-secondary: (<color>) Controls the secondary stroke color of the navigation arrow icon.
+ * @prop --tct-carousel-autoplay-hover-background: (<color>) Controls the background color of the autoplay toggle button on hover and focus.
+ * @prop --tct-carousel-autoplay-icon-color: (<color>) Controls the color of the autoplay toggle button icon.
+ * @prop --tct-carousel-autoplay-icon-height: (<length>) Controls the height of the autoplay toggle button icon.
+ * @prop --tct-carousel-autoplay-icon-width: (<length>) Controls the width of the autoplay toggle button icon.
+ */
 q2-carousel {
   display: grid;
   grid-template-rows: repeat(2, auto);
@@ -128,7 +162,7 @@ q2-carousel {
   justify-content: center;
 }
 .q2-carousel-pagination-navigation-wrapper.center-space .q2-carousel-control-center-tray {
-  margin: var(--tct-carouse-pagination-center-tray-margin, 0 24px);
+  margin: var(--tct-carousel-pagination-center-tray-margin, 0 24px);
 }
 
 .q2-carousel-floating-arrow-wrapper {
@@ -164,19 +198,27 @@ q2-carousel {
   align-content: center;
   justify-content: center;
   gap: 0.5rem;
+  --comp-carousel-page-transition-duration: var(--tct-carousel-page-transition-duration, 0.3s);
 }
 .q2-carousel-pagination .q2-carousel-page-indicator {
   display: inline-block;
-  height: var(--tct-carousel-page-indicator-size, 8px);
-  width: var(--tct-carousel-page-indicator-size, 8px);
-  border-radius: 50%;
+  height: var(--tct-carousel-indicator-size, 8px);
+  width: var(--tct-carousel-indicator-size, 8px);
+  border-radius: var(--tct-carousel-active-page-border-radius, 4px);
   background-color: var(--tct-carousel-page-indicator-inactive-color, var(--t-gray11, #CCCCCC));
   padding: 0;
   border: 0;
-  transition: var(--tct-carouse-pagination-transition, all 0.5s);
+  transition: width 0.3s ease, background-color 0.3s ease 0.3s;
+  transition-duration: var(--comp-carousel-page-transition-duration);
 }
-.q2-carousel-pagination .q2-carousel-page-indicator:hover, .q2-carousel-pagination .q2-carousel-page-indicator.active-page {
-  display: inline-block;
+.q2-carousel-pagination .q2-carousel-page-indicator:hover {
+  background-color: var(--tct-carousel-indicator-active, var(--t-primary, #6A4A9E));
+  transition: background-color 0.3s ease;
+  transition-duration: var(--comp-carousel-page-transition-duration);
+}
+.q2-carousel-pagination .q2-carousel-page-indicator.active-page {
+  width: var(--tct-carousel-indicator-active-width, 24px);
+  border-radius: var(--tct-carousel-active-page-border-radius, 4px);
   background-color: var(--tct-carousel-indicator-active, var(--t-primary, #6A4A9E));
 }
 .q2-carousel-pagination.dynamic .q2-carousel-page-indicator {
@@ -202,10 +244,11 @@ q2-carousel {
 .q2-carousel-pagination.autoplay .q2-carousel-page-indicator {
   height: var(--tct-carousel-page-indicator-height, 8px);
   width: var(--tct-carousel-page-indicator-width, 8px);
-  transition: none;
+  transition: width 0.3s ease;
+  transition-duration: var(--comp-carousel-page-transition-duration);
 }
 .q2-carousel-pagination.autoplay .q2-carousel-page-indicator.active-page {
-  width: var(--tct-carousel-active-page-indicator-width, 24px);
+  width: var(--tct-carousel-indicator-active-width, 24px);
   border-radius: var(--tct-carousel-active-page-border-radius, 4px);
   background-color: var(--tct-carousel-indicator-inactive, var(--t-gray11, #CCCCCC));
   position: relative;
@@ -232,8 +275,30 @@ q2-carousel {
     transform: scaleX(1);
   }
 }
-.q2-carousel-swiper-container {
+.q2-carousel-section-wrapper {
+  position: relative;
   grid-row: 1;
+  overflow: hidden;
+}
+
+.q2-carousel-edge-fade {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--tct-carousel-edge-fade-width, 64px);
+  z-index: 10;
+  pointer-events: none;
+}
+.q2-carousel-edge-fade-left {
+  left: 0;
+  background: linear-gradient(to right, var(--tct-carousel-edge-fade-color, #FFFFFF), transparent);
+}
+.q2-carousel-edge-fade-right {
+  right: 0;
+  background: linear-gradient(to left, var(--tct-carousel-edge-fade-color, #FFFFFF), transparent);
+}
+
+.q2-carousel-swiper-container {
   /** CONTENT PEEKING **/
 }
 .q2-carousel-swiper-container .swiper-wrapper {
@@ -275,11 +340,11 @@ q2-carousel {
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background-color: var(--tct-carousel-navigation-arrow-background-color, var(--t-primary, #6A4A9E));
+  background-color: var(--tct-carousel-arrow-background, var(--t-primary, #6A4A9E));
   transition: background-color var(--t-tween-time-in-2, 200ms) var(--t-tween-ease-inout, cubic-bezier(0.4, 0, 0.2, 1));
 }
 .q2-carousel-navigation-button:hover::before, .q2-carousel-navigation-button:focus-visible::before {
-  background-color: var(--tct-carousel-btn-hover-background, var(--t-primary-d1, #5F438E));
+  background-color: var(--tct-carousel-arrow-hover-background, var(--t-primary-d1, #5F438E));
 }
 .q2-carousel-navigation-button:focus-visible {
   outline: none;
@@ -291,7 +356,7 @@ q2-carousel {
 .q2-carousel-navigation-button q2-icon {
   position: relative;
   --tct-icon-size: 16px;
-  --tct-icon-stroke-primary: var(--tct-carousel-btn-icon-stroke-primary, var(--t-base));
+  --tct-icon-stroke-primary: var(--tct-carousel-arrow-font-color, var(--t-base, #FFFFFF));
   --tct-icon-stroke-secondary: var(--tct-carousel-btn-icon-stroke-secondary, var(--app-gray, #747474));
 }