q2-tecton-elements 1.67.2 → 1.68.0

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

@@ -65,6 +65,134 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-checkbox-margin: (<length-percentage>+) Controls the outer margin of the checkbox host.
+ * @prop --tct-checkbox-margin-top?: (<length-percentage>) Controls the optional top margin of the checkbox host when --tct-checkbox-margin is not set.
+ * @prop --tct-checkbox-margin-bottom?: (<length-percentage>) Controls the optional bottom margin of the checkbox host when --tct-checkbox-margin is not set.
+ * @prop --tct-checkbox-padding: (<length-percentage>+) Controls the inner padding of the checkbox host.
+ * @prop --tct-checkbox-size: (<length>) Controls the size of the checkbox control (icon).
+ * @prop --tct-checkbox-gap: (<length-percentage>+) Controls the gap between the checkbox control and its label/description.
+ * @prop --tct-checkbox-tween: (*) Controls the transition timing of checkbox state changes.
+ * @prop --tct-checkbox-disabled-opacity: (<number>) Controls the opacity of the checkbox when disabled.
+ * @prop --tct-checkbox-box-shadow?: (*) Controls the optional box shadow of the checkbox control in its default state.
+ * @prop --tct-checkbox-outer-border-radius: (<length-percentage>) Controls the corner radius of the checkbox control.
+ * @prop --tct-checkbox-outer-fill-color: (<color>) Controls the fill color of the checkbox control in its default state.
+ * @prop --tct-checkbox-outer-stroke-color: (<color>) Controls the stroke color of the checkbox control in its default state.
+ * @prop --tct-checkbox-outer-stroke-width: (<number>) Controls the stroke width of the checkbox control.
+ * @prop --tct-checkbox-stroke-width?: (<number>) Controls the optional text stroke width of the label in the default state.
+ * @prop --tct-checkbox-check-stroke-width: (<number>) Controls the stroke width of the checkmark.
+ * @prop --tct-checkbox-indeterminate-stroke-width: (<number>) Controls the stroke width of the indeterminate-state mark.
+ * @prop --tct-checkbox-bold-fallback-stroke-width: (<length>) Controls the fallback text stroke width applied when bold-emphasized states are active.
+ * @prop --tct-checkbox-active-stroke-width?: (<number>) Controls the optional text stroke width of the label when active.
+ * @prop --tct-checkbox-hover-stroke-width?: (<number>) Controls the optional text stroke width of the label when hovered.
+ * @prop --tct-checkbox-focused-stroke-width?: (<number>) Controls the optional text stroke width of the label when focused.
+ * @prop --tct-checkbox-checked-stroke-width: (<length>) Controls the text stroke width of the label when checked.
+ * @prop --tct-checkbox-checked-active-stroke-width?: (<number>) Controls the optional text stroke width of the label when checked and active.
+ * @prop --tct-checkbox-checked-hover-stroke-width: (<length>) Controls the text stroke width of the label when checked and hovered.
+ * @prop --tct-checkbox-checked-focused-stroke-width: (<length>) Controls the text stroke width of the label when checked and focused.
+ * @prop --tct-checkbox-checked-fill-color: (<color>) Controls the fill color of the checkbox control when checked.
+ * @prop --tct-checkbox-checked-stroke-color: (<color>) Controls the checkmark stroke color when checked.
+ * @prop --tct-checkbox-checked-outer-stroke-color: (<color>) Controls the outer stroke color of the checkbox control when checked.
+ * @prop --tct-checkbox-hover-outer-stroke-color: (<color>) Controls the outer stroke color of the checkbox control when hovered.
+ * @prop --tct-checkbox-hover-outer-fill-color: (<color>) Controls the outer fill color of the checkbox control when hovered.
+ * @prop --tct-checkbox-hover-box-shadow?: (*) Controls the optional box shadow of the checkbox control when hovered.
+ * @prop --tct-checkbox-focused-outer-stroke-color: (<color>) Controls the outer stroke color of the checkbox control when focused.
+ * @prop --tct-checkbox-focused-outer-fill-color: (<color>) Controls the outer fill color of the checkbox control when focused.
+ * @prop --tct-checkbox-focused-box-shadow: (*) Controls the box shadow of the checkbox control when focused.
+ * @prop --tct-checkbox-error-outer-stroke-color: (<color>) Controls the outer stroke color of the checkbox control in the error state.
+ * @prop --tct-checkbox-error-outer-fill-color: (<color>) Controls the outer fill color of the checkbox control in the error state.
+ * @prop --tct-checkbox-error-box-shadow?: (*) Controls the optional box shadow of the checkbox control in the error state.
+ * @prop --tct-checkbox-error-checked-outer-fill-color?: (<color>) Controls the optional outer fill color of the checkbox control when checked and in the error state.
+ * @prop --tct-checkbox-error-checkmark-stroke-color: (<color>) Controls the checkmark stroke color in the error state.
+ * @prop --tct-checkbox-error-checkmark-stroke-width: (<number>) Controls the checkmark stroke width in the error state.
+ * @prop --tct-checkbox-error-hover-outer-stroke-color: (<color>) Controls the outer stroke color when hovered in the error state.
+ * @prop --tct-checkbox-error-hover-outer-fill-color: (<color>) Controls the outer fill color when hovered in the error state.
+ * @prop --tct-checkbox-error-hover-box-shadow: (*) Controls the box shadow when hovered in the error state.
+ * @prop --tct-checkbox-error-hover-stroke-width?: (<number>) Controls the optional label text stroke width when hovered in the error state.
+ * @prop --tct-checkbox-error-focused-outer-stroke-color: (<color>) Controls the outer stroke color when focused in the error state.
+ * @prop --tct-checkbox-error-focused-outer-fill-color: (<color>) Controls the outer fill color when focused in the error state.
+ * @prop --tct-checkbox-error-focused-box-shadow: (*) Controls the box shadow when focused in the error state.
+ * @prop --tct-checkbox-error-focused-stroke-width?: (<number>) Controls the optional label text stroke width when focused in the error state.
+ * @prop --tct-checkbox-error-active-stroke-width?: (<number>) Controls the optional label text stroke width when active in the error state.
+ * @prop --tct-checkbox-error-label-active-color?: (<color>) Controls the optional label text color when active in the error state.
+ * @prop --tct-checkbox-checked-error-hover-stroke-width?: (<number>) Controls the optional label text stroke width when checked, hovered, and in the error state.
+ * @prop --tct-checkbox-checked-error-focused-stroke-width?: (<number>) Controls the optional label text stroke width when checked, focused, and in the error state.
+ * @prop --tct-checkbox-checked-error-active-stroke-width?: (<number>) Controls the optional label text stroke width when checked, active, and in the error state.
+ * @prop --tct-checkbox-checked-error-label-hover-color?: (<color>) Controls the optional label text color when checked, hovered, and in the error state.
+ * @prop --tct-checkbox-checked-error-label-active-color?: (<color>) Controls the optional label text color when checked, active, and in the error state.
+ * @prop --tct-checkbox-checked-error-description-hover-color?: (<color>) Controls the optional description color when checked, hovered, and in the error state.
+ * @prop --tct-checkbox-checked-error-description-hover-stroke-width?: (<number>) Controls the optional description text stroke width when checked, hovered, and in the error state.
+ * @prop --tct-checkbox-checked-error-description-active-color?: (<color>) Controls the optional description color when checked, active, and in the error state.
+ * @prop --tct-checkbox-checked-error-description-active-stroke-width?: (<number>) Controls the optional description text stroke width when checked, active, and in the error state.
+ * @prop --tct-checkbox-error-description-active-color?: (<color>) Controls the optional description color when active in the error state.
+ * @prop --tct-checkbox-error-description-active-stroke-width?: (<number>) Controls the optional description text stroke width when active in the error state.
+ * @prop --tct-checkbox-label-color?: (<color>) Controls the optional label text color in the default state.
+ * @prop --tct-checkbox-label-font-size?: (<length-percentage>) Controls the optional font size of the checkbox label.
+ * @prop --tct-checkbox-label-line-height: (<number> | <length-percentage>) Controls the line height of the checkbox label.
+ * @prop --tct-checkbox-label-hyphens: (<custom-ident>) Controls the hyphens behavior of the checkbox label.
+ * @prop --tct-checkbox-label-word-break: (<custom-ident>) Controls the word-break behavior of the checkbox label.
+ * @prop --tct-checkbox-label-word-wrap: (<custom-ident>) Controls the word-wrap behavior of the checkbox label.
+ * @prop --tct-checkbox-label-hover-color?: (<color>) Controls the optional label text color when hovered.
+ * @prop --tct-checkbox-label-active-color?: (<color>) Controls the optional label text color when active.
+ * @prop --tct-checkbox-checked-label-hover-color?: (<color>) Controls the optional label text color when checked and hovered.
+ * @prop --tct-checkbox-checked-label-active-color?: (<color>) Controls the optional label text color when checked and active.
+ * @prop --tct-checkbox-description-font-weight: (<number>) Controls the font weight of the checkbox description.
+ * @prop --tct-checkbox-description-stroke-width: (<length>) Controls the description text stroke width in the default state.
+ * @prop --tct-checkbox-description-hover-color?: (<color>) Controls the optional description color when hovered.
+ * @prop --tct-checkbox-description-hover-stroke-width: (<length>) Controls the description text stroke width when hovered.
+ * @prop --tct-checkbox-hover-description-font-weight: (<number>) Controls the description font weight when hovered.
+ * @prop --tct-checkbox-description-active-color?: (<color>) Controls the optional description color when active.
+ * @prop --tct-checkbox-description-active-stroke-width?: (<number>) Controls the optional description text stroke width when active.
+ * @prop --tct-checkbox-description-focused-stroke-width: (<length>) Controls the description text stroke width when focused.
+ * @prop --tct-checkbox-checked-description-hover-color?: (<color>) Controls the optional description color when checked and hovered.
+ * @prop --tct-checkbox-checked-description-hover-stroke-width?: (<number>) Controls the optional description text stroke width when checked and hovered.
+ * @prop --tct-checkbox-checked-description-active-color?: (<color>) Controls the optional description color when checked and active.
+ * @prop --tct-checkbox-checked-description-active-stroke-width?: (<number>) Controls the optional description text stroke width when checked and active.
+ * @prop --tct-checkbox-animation-duration: (<time>) Controls the duration of the checkmark draw animation.
+ * @prop --tct-checkbox-animation-timing-function: (*) Controls the timing function of the checkmark draw animation.
+ * @prop --tct-checkbox-animation-fill-mode: (<custom-ident>) Controls the animation-fill-mode of the checkmark draw animation.
+ * @prop --tct-checkbox-favorite-stroke-color: (<color>) Controls the icon stroke color when type is favorite, in the default state.
+ * @prop --tct-checkbox-favorite-stroke-width: (<number>) Controls the icon stroke width when type is favorite, in the default state.
+ * @prop --tct-checkbox-favorite-fill-color: (<color>) Controls the icon fill color when type is favorite.
+ * @prop --tct-checkbox-favorite-hover-stroke-color: (<color>) Controls the icon stroke color when type is favorite, on hover.
+ * @prop --tct-checkbox-favorite-hover-stroke-width: (<number>) Controls the icon stroke width when type is favorite, on hover.
+ * @prop --tct-checkbox-favorite-focused-stroke-color: (<color>) Controls the icon stroke color when type is favorite, on focus.
+ * @prop --tct-checkbox-favorite-checked-stroke-color: (<color>) Controls the icon stroke color when type is favorite and checked.
+ * @prop --tct-checkbox-favorite-checked-fill-color: (<color>) Controls the icon fill color when type is favorite and checked.
+ * @prop --tct-checkbox-favorite-checked-hover-stroke-color: (<color>) Controls the icon stroke color when type is favorite, checked, and hovered.
+ * @prop --tct-checkbox-favorite-checked-focused-stroke-color: (<color>) Controls the icon stroke color when type is favorite, checked, and focused.
+ * @prop --tct-checkbox-favorite-error-stroke-color: (<color>) Controls the icon stroke color when type is favorite and in the error state.
+ * @prop --tct-checkbox-toggle-width: (<length>) Controls the width of the toggle control when type is toggle.
+ * @prop --tct-checkbox-toggle-color: (<color>) Controls the toggle indicator color when type is toggle, in the default state.
+ * @prop --tct-checkbox-toggle-icon-stroke-width: (<number>) Controls the icon stroke width inside the toggle.
+ * @prop --tct-checkbox-toggle-track-color?: (<color>) Controls the optional track outline color when type is toggle, in the default state.
+ * @prop --tct-checkbox-toggle-track-fill?: (<color>) Controls the optional track fill when type is toggle, in the default state.
+ * @prop --tct-checkbox-toggle-track-box-shadow: (*) Controls the box shadow of the toggle track in the default state.
+ * @prop --tct-checkbox-toggle-active-color: (<color>) Controls the toggle indicator color when active.
+ * @prop --tct-checkbox-toggle-active-fill: (<color>) Controls the toggle indicator fill when active.
+ * @prop --tct-checkbox-toggle-active-track-color: (<color>) Controls the toggle track color when active.
+ * @prop --tct-checkbox-toggle-active-track-fill: (<color>) Controls the toggle track fill when active.
+ * @prop --tct-checkbox-toggle-hover-circle-color: (<color>) Controls the toggle indicator (circle) color on hover when not checked.
+ * @prop --tct-checkbox-toggle-hover-track-box-shadow: (*) Controls the box shadow of the toggle track on hover.
+ * @prop --tct-checkbox-toggle-hover-track-color: (<color>) Controls the toggle track outline color on hover.
+ * @prop --tct-checkbox-toggle-hover-track-fill: (<color>) Controls the toggle track fill on hover.
+ * @prop --tct-checkbox-toggle-checked-circle-color: (<color>) Controls the toggle indicator (circle) color when checked.
+ * @prop --tct-checkbox-toggle-checked-track-color: (<color>) Controls the toggle track color when checked.
+ * @prop --tct-checkbox-toggle-checked-hover-track-color: (<color>) Controls the toggle track color when checked and hovered.
+ * @prop --tct-checkbox-toggle-checked-active-track-color: (<color>) Controls the toggle track color when checked and active.
+ * @prop --tct-checkbox-toggle-error-color: (<color>) Controls the toggle indicator color in the error state.
+ * @prop --tct-checkbox-toggle-error-active-color: (<color>) Controls the toggle indicator color when active in the error state.
+ * @prop --tct-checkbox-toggle-error-active-track-color: (<color>) Controls the toggle track color when active in the error state.
+ * @prop --tct-checkbox-toggle-error-active-track-fill: (<color>) Controls the toggle track fill when active in the error state.
+ * @prop --tct-checkbox-toggle-error-hover-color: (<color>) Controls the toggle indicator color when hovered in the error state.
+ * @prop --tct-checkbox-toggle-error-hover-track-color: (<color>) Controls the toggle track color when hovered in the error state.
+ * @prop --tct-checkbox-toggle-error-hover-track-fill: (<color>) Controls the toggle track fill when hovered in the error state.
+ * @prop --tct-checkbox-toggle-error-track-color: (<color>) Controls the toggle track color in the error state.
+ * @prop --tct-checkbox-toggle-error-track-fill: (<color>) Controls the toggle track fill in the error state.
+ * @prop --tct-checkbox-toggle-checked-error-track-color: (<color>) Controls the toggle track color when checked in the error state.
+ * @prop --tct-checkbox-toggle-checked-error-hover-track-color: (<color>) Controls the toggle track color when checked, hovered, and in the error state.
+ * @prop --tct-checkbox-toggle-checked-error-active-track-color: (<color>) Controls the toggle track color when checked, active, and in the error state.
+ */
 :host {
   --comp-checkbox-padding: var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, 8px)) 0);
   display: block;

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

@@ -0,0 +1,69 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const VARIANTS = [
+    { name: 'default-unchecked', html: `<q2-checkbox label="Option"></q2-checkbox>` },
+    { name: 'default-checked', html: `<q2-checkbox label="Option" checked></q2-checkbox>` },
+    { name: 'default-indeterminate', html: `<q2-checkbox label="Option" indeterminate></q2-checkbox>` },
+    { name: 'default-disabled', html: `<q2-checkbox label="Option" disabled></q2-checkbox>` },
+    { name: 'default-disabled-checked', html: `<q2-checkbox label="Option" disabled checked></q2-checkbox>` },
+    { name: 'default-error', html: `<q2-checkbox label="Option" has-error></q2-checkbox>` },
+    { name: 'default-error-checked', html: `<q2-checkbox label="Option" has-error checked></q2-checkbox>` },
+    {
+        name: 'default-with-description',
+        html: `<q2-checkbox label="Option" description="Helper text"></q2-checkbox>`,
+    },
+    { name: 'toggle-unchecked', html: `<q2-checkbox type="toggle" label="Option"></q2-checkbox>` },
+    { name: 'toggle-checked', html: `<q2-checkbox type="toggle" label="Option" checked></q2-checkbox>` },
+    { name: 'toggle-disabled', html: `<q2-checkbox type="toggle" label="Option" disabled></q2-checkbox>` },
+    {
+        name: 'toggle-disabled-checked',
+        html: `<q2-checkbox type="toggle" label="Option" disabled checked></q2-checkbox>`,
+    },
+    { name: 'toggle-error', html: `<q2-checkbox type="toggle" label="Option" has-error></q2-checkbox>` },
+    { name: 'favorite-unchecked', html: `<q2-checkbox type="favorite" label="Option"></q2-checkbox>` },
+    { name: 'favorite-checked', html: `<q2-checkbox type="favorite" label="Option" checked></q2-checkbox>` },
+    { name: 'favorite-disabled', html: `<q2-checkbox type="favorite" label="Option" disabled></q2-checkbox>` },
+];
+const FOCUS_VARIANTS = new Set([
+    'default-unchecked',
+    'default-checked',
+    'default-error',
+    'toggle-unchecked',
+    'toggle-checked',
+    'favorite-unchecked',
+    'favorite-checked',
+]);
+const HOVER_VARIANTS = new Set(['default-unchecked']);
+const restingCase = (variant, theme) => {
+    test(`q2-checkbox--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-checkbox--${variant.name}--resting--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-checkbox--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-checkbox--${variant.name}--focus--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-checkbox--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.locator('q2-checkbox').hover();
+        await expect(page).toHaveScreenshot(`q2-checkbox--${variant.name}--hover--${theme}.png`);
+    });
+};
+test.describe('q2-checkbox — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+            if (FOCUS_VARIANTS.has(variant.name))
+                focusCase(variant, theme);
+            if (HOVER_VARIANTS.has(variant.name))
+                hoverCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-checkbox-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-checkbox-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-checkbox/test/q2-checkbox-test.vr.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype Variant = { name: string; html: string };\n\nconst VARIANTS: Variant[] = [\n    { name: 'default-unchecked', html: `<q2-checkbox label=\"Option\"></q2-checkbox>` },\n    { name: 'default-checked', html: `<q2-checkbox label=\"Option\" checked></q2-checkbox>` },\n    { name: 'default-indeterminate', html: `<q2-checkbox label=\"Option\" indeterminate></q2-checkbox>` },\n    { name: 'default-disabled', html: `<q2-checkbox label=\"Option\" disabled></q2-checkbox>` },\n    { name: 'default-disabled-checked', html: `<q2-checkbox label=\"Option\" disabled checked></q2-checkbox>` },\n    { name: 'default-error', html: `<q2-checkbox label=\"Option\" has-error></q2-checkbox>` },\n    { name: 'default-error-checked', html: `<q2-checkbox label=\"Option\" has-error checked></q2-checkbox>` },\n    {\n        name: 'default-with-description',\n        html: `<q2-checkbox label=\"Option\" description=\"Helper text\"></q2-checkbox>`,\n    },\n    { name: 'toggle-unchecked', html: `<q2-checkbox type=\"toggle\" label=\"Option\"></q2-checkbox>` },\n    { name: 'toggle-checked', html: `<q2-checkbox type=\"toggle\" label=\"Option\" checked></q2-checkbox>` },\n    { name: 'toggle-disabled', html: `<q2-checkbox type=\"toggle\" label=\"Option\" disabled></q2-checkbox>` },\n    {\n        name: 'toggle-disabled-checked',\n        html: `<q2-checkbox type=\"toggle\" label=\"Option\" disabled checked></q2-checkbox>`,\n    },\n    { name: 'toggle-error', html: `<q2-checkbox type=\"toggle\" label=\"Option\" has-error></q2-checkbox>` },\n    { name: 'favorite-unchecked', html: `<q2-checkbox type=\"favorite\" label=\"Option\"></q2-checkbox>` },\n    { name: 'favorite-checked', html: `<q2-checkbox type=\"favorite\" label=\"Option\" checked></q2-checkbox>` },\n    { name: 'favorite-disabled', html: `<q2-checkbox type=\"favorite\" label=\"Option\" disabled></q2-checkbox>` },\n];\n\nconst FOCUS_VARIANTS = new Set([\n    'default-unchecked',\n    'default-checked',\n    'default-error',\n    'toggle-unchecked',\n    'toggle-checked',\n    'favorite-unchecked',\n    'favorite-checked',\n]);\n\nconst HOVER_VARIANTS = new Set(['default-unchecked']);\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-checkbox--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-checkbox--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-checkbox--${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-checkbox--${variant.name}--focus--${theme}.png`);\n    });\n};\n\nconst hoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-checkbox--${variant.name}--hover — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await page.locator('q2-checkbox').hover();\n        await expect(page).toHaveScreenshot(`q2-checkbox--${variant.name}--hover--${theme}.png`);\n    });\n};\n\ntest.describe('q2-checkbox — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n            if (FOCUS_VARIANTS.has(variant.name)) focusCase(variant, theme);\n            if (HOVER_VARIANTS.has(variant.name)) hoverCase(variant, theme);\n        }\n    }\n});\n"]}

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

@@ -65,6 +65,27 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-checkbox-group-margin: (<length-percentage>+) Controls the outer margin of the checkbox-group host.
+ * @prop --tct-checkbox-group-margin-top: (<length-percentage>) Controls the top margin of the checkbox-group host when --tct-checkbox-group-margin is not set.
+ * @prop --tct-checkbox-group-margin-bottom: (<length-percentage>) Controls the bottom margin of the checkbox-group host when --tct-checkbox-group-margin is not set.
+ * @prop --tct-checkbox-group-fieldset-padding?: (<length-percentage>+) Controls the optional inner padding of the checkbox-group fieldset.
+ * @prop --tct-checkbox-group-container-margin: (<length-percentage>+) Controls the margin around the checkbox-group slot container.
+ * @prop --tct-checkbox-group-container-padding: (<length-percentage>+) Controls the inner padding of the checkbox-group slot container.
+ * @prop --tct-checkbox-group-border-radius: (<length-percentage>) Controls the corner radius of the checkbox-group slot container.
+ * @prop --tct-checkbox-group-border-width: (<length>+) Controls the border width of the checkbox-group slot container.
+ * @prop --tct-checkbox-group-error-border-color: (<color>) Controls the border color of the checkbox-group slot container in the error state.
+ * @prop --tct-checkbox-group-label-column-gap: (<length-percentage>) Controls the column gap between the checkbox-group label text and trailing icon.
+ * @prop --tct-checkbox-group-label-font-color?: (<color>) Controls the optional text color of the checkbox-group label.
+ * @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-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.
+ * @prop --tct-checkbox-group-label-optional-font-weight: (<number>) Controls the font weight of the "(optional)" indicator next to the label.
+ * @prop --tct-checkbox-group-label-optional-margin-left: (<length-percentage>) Controls the left margin of the "(optional)" indicator next to the label.
+ */
 :host {
   --comp-default-checkbox-group-margin: var(--tct-checkbox-group-margin-top, var(--t-checkbox-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-checkbox-group-margin-bottom, var(--t-checkbox-group-margin-bottom, var(--app-scale-5x, 25px)));
   display: block;

package/dist/collection/components/q2-checkbox-group/test/q2-checkbox-group-test.vr.js

@@ -0,0 +1,61 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const STANDARD_CHILDREN = `
+    <q2-checkbox label="Option 1" value="opt-1"></q2-checkbox>
+    <q2-checkbox label="Option 2" value="opt-2"></q2-checkbox>
+    <q2-checkbox label="Option 3" value="opt-3"></q2-checkbox>
+`;
+const TOGGLE_CHILDREN = `
+    <q2-checkbox type="toggle" alignment="left" label="Option 1" value="opt-1"></q2-checkbox>
+    <q2-checkbox type="toggle" alignment="left" label="Option 2" value="opt-2"></q2-checkbox>
+    <q2-checkbox type="toggle" alignment="left" label="Option 3" value="opt-3"></q2-checkbox>
+`;
+const VARIANTS = [
+    {
+        name: 'default',
+        html: `<q2-checkbox-group label="My Group">${STANDARD_CHILDREN}</q2-checkbox-group>`,
+    },
+    {
+        name: 'optional',
+        html: `<q2-checkbox-group label="My Group" optional>${STANDARD_CHILDREN}</q2-checkbox-group>`,
+    },
+    {
+        name: 'error',
+        html: `<q2-checkbox-group label="My Group" has-error>${STANDARD_CHILDREN}</q2-checkbox-group>`,
+    },
+    {
+        name: 'disabled',
+        html: `<q2-checkbox-group label="My Group" disabled>${STANDARD_CHILDREN}</q2-checkbox-group>`,
+    },
+    {
+        name: 'readonly',
+        html: `<q2-checkbox-group label="My Group" readonly>${STANDARD_CHILDREN}</q2-checkbox-group>`,
+    },
+    {
+        name: 'error-disabled',
+        html: `<q2-checkbox-group label="My Group" has-error disabled>${STANDARD_CHILDREN}</q2-checkbox-group>`,
+    },
+    {
+        name: 'hide-label',
+        html: `<q2-checkbox-group label="My Group" hide-label>${STANDARD_CHILDREN}</q2-checkbox-group>`,
+    },
+    {
+        name: 'toggle-group',
+        html: `<q2-checkbox-group label="My Group">${TOGGLE_CHILDREN}</q2-checkbox-group>`,
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-checkbox-group--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-checkbox-group--${variant.name}--resting--${theme}.png`);
+    });
+};
+test.describe('q2-checkbox-group — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-checkbox-group-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-checkbox-group-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-checkbox-group/test/q2-checkbox-group-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,iBAAiB,GAAG;;;;CAIzB,CAAC;AAEF,MAAM,eAAe,GAAG;;;;CAIvB,CAAC;AAIF,MAAM,QAAQ,GAAc;IACxB;QACI,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,uCAAuC,iBAAiB,sBAAsB;KACvF;IACD;QACI,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,gDAAgD,iBAAiB,sBAAsB;KAChG;IACD;QACI,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,iDAAiD,iBAAiB,sBAAsB;KACjG;IACD;QACI,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,gDAAgD,iBAAiB,sBAAsB;KAChG;IACD;QACI,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,gDAAgD,iBAAiB,sBAAsB;KAChG;IACD;QACI,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,0DAA0D,iBAAiB,sBAAsB;KAC1G;IACD;QACI,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,kDAAkD,iBAAiB,sBAAsB;KAClG;IACD;QACI,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,uCAAuC,eAAe,sBAAsB;KACrF;CACJ,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAE,KAAY,EAAE,EAAE;IACnD,IAAI,CAAC,sBAAsB,OAAO,CAAC,IAAI,eAAe,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC9E,MAAM,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QAC/C,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,sBAAsB,OAAO,CAAC,IAAI,cAAc,KAAK,MAAM,CAAC,CAAC;IACrG,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,uCAAuC,EAAE,GAAG,EAAE;IACxD,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;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 STANDARD_CHILDREN = `\n    <q2-checkbox label=\"Option 1\" value=\"opt-1\"></q2-checkbox>\n    <q2-checkbox label=\"Option 2\" value=\"opt-2\"></q2-checkbox>\n    <q2-checkbox label=\"Option 3\" value=\"opt-3\"></q2-checkbox>\n`;\n\nconst TOGGLE_CHILDREN = `\n    <q2-checkbox type=\"toggle\" alignment=\"left\" label=\"Option 1\" value=\"opt-1\"></q2-checkbox>\n    <q2-checkbox type=\"toggle\" alignment=\"left\" label=\"Option 2\" value=\"opt-2\"></q2-checkbox>\n    <q2-checkbox type=\"toggle\" alignment=\"left\" label=\"Option 3\" value=\"opt-3\"></q2-checkbox>\n`;\n\ntype Variant = { name: string; html: string };\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'default',\n        html: `<q2-checkbox-group label=\"My Group\">${STANDARD_CHILDREN}</q2-checkbox-group>`,\n    },\n    {\n        name: 'optional',\n        html: `<q2-checkbox-group label=\"My Group\" optional>${STANDARD_CHILDREN}</q2-checkbox-group>`,\n    },\n    {\n        name: 'error',\n        html: `<q2-checkbox-group label=\"My Group\" has-error>${STANDARD_CHILDREN}</q2-checkbox-group>`,\n    },\n    {\n        name: 'disabled',\n        html: `<q2-checkbox-group label=\"My Group\" disabled>${STANDARD_CHILDREN}</q2-checkbox-group>`,\n    },\n    {\n        name: 'readonly',\n        html: `<q2-checkbox-group label=\"My Group\" readonly>${STANDARD_CHILDREN}</q2-checkbox-group>`,\n    },\n    {\n        name: 'error-disabled',\n        html: `<q2-checkbox-group label=\"My Group\" has-error disabled>${STANDARD_CHILDREN}</q2-checkbox-group>`,\n    },\n    {\n        name: 'hide-label',\n        html: `<q2-checkbox-group label=\"My Group\" hide-label>${STANDARD_CHILDREN}</q2-checkbox-group>`,\n    },\n    {\n        name: 'toggle-group',\n        html: `<q2-checkbox-group label=\"My Group\">${TOGGLE_CHILDREN}</q2-checkbox-group>`,\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-checkbox-group--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-checkbox-group--${variant.name}--resting--${theme}.png`);\n    });\n};\n\ntest.describe('q2-checkbox-group — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n        }\n    }\n});\n"]}

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

@@ -1,3 +1,18 @@
+/**
+ * @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.
+ * @prop --tct-context-border-color?: (<color>) Controls the optional border color of the context container.
+ * @prop --tct-context-border-radius: (<length-percentage>) Controls the corner radius of the context container.
+ * @prop --tct-context-border-style: (<custom-ident>) Controls the border style of the context container.
+ * @prop --tct-context-border-width?: (<length>) Controls the optional border width of the context container.
+ * @prop --tct-context-box-shadow?: (*) Controls the optional box shadow of the context container.
+ * @prop --tct-context-gap: (<length-percentage>) Controls the gap between items within the context wrapper.
+ * @prop --tct-context-padding: (<length-percentage>+) Controls the inner padding of the context container.
+ * @prop --tct-context-separator-color: (<color>) Controls the color of the separator between context sections.
+ * @prop --tct-context-separator-margin?: (<length-percentage>+) Controls the optional margin around the context separator.
+ * @prop --tct-context-width?: (<length-percentage>) Controls the optional explicit width of the context container.
+ */
 * {
   box-sizing: border-box;
 }
@@ -7,6 +22,7 @@
 }
 
 :host {
+  --tct-item-body-color: var(--tct-context-color, var(--tct-text));
   display: block;
   background: var(--tct-context-background, var(--t-tertiary, #e8f5fc));
   box-shadow: var(--tct-context-box-shadow, none);

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

@@ -0,0 +1,95 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const FOOTER_HTML = `<div slot="footer" style="height: 10px; background-color: #e0e0e0; border-radius: 5px; overflow: hidden;"><div style="width: 30%; height: 100%; background-color: #4caf50; border-radius: 5px;"></div></div>`;
+const VARIANTS = [
+    {
+        name: 'header-description',
+        html: `<q2-context>
+            <h4 slot="header">Application Status</h4>
+            <p slot="description">A brief description of what's happening.</p>
+        </q2-context>`,
+    },
+    {
+        name: 'with-decorator',
+        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-context>`,
+    },
+    {
+        name: 'with-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="Dismiss"><q2-icon type="close"></q2-icon></q2-btn>
+        </q2-context>`,
+    },
+    {
+        name: 'with-action-group',
+        html: `<q2-context>
+            <q2-icon slot="decorator" type="money-time"></q2-icon>
+            <h4 slot="header">Application Status</h4>
+            <p slot="description">A brief description of what's happening.</p>
+            <q2-btn slot="action-group" intent="neutral" size="small">Confirm</q2-btn>
+            <q2-btn slot="action-group" intent="workflow-escape" size="small">Go Back</q2-btn>
+        </q2-context>`,
+    },
+    {
+        name: 'with-footer',
+        html: `<q2-context>
+            <q2-icon slot="decorator" type="money-time"></q2-icon>
+            <h4 slot="header">Application Status</h4>
+            <p slot="description">A brief description of what's happening.</p>
+            ${FOOTER_HTML}
+        </q2-context>`,
+    },
+    {
+        name: 'all-slots',
+        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="Dismiss"><q2-icon type="close"></q2-icon></q2-btn>
+            <q2-btn slot="action-group" intent="neutral" size="small">Confirm</q2-btn>
+            <q2-btn slot="action-group" intent="workflow-escape" size="small">Go Back</q2-btn>
+            ${FOOTER_HTML}
+        </q2-context>`,
+    },
+    {
+        name: 'separator',
+        html: `<q2-context separator>
+            <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="Dismiss"><q2-icon type="close"></q2-icon></q2-btn>
+            <q2-btn slot="action-group" intent="neutral" size="small">Confirm</q2-btn>
+            <q2-btn slot="action-group" intent="workflow-escape" size="small">Go Back</q2-btn>
+            ${FOOTER_HTML}
+        </q2-context>`,
+    },
+    {
+        name: 'avatar-decorator',
+        html: `<q2-context>
+            <q2-avatar slot="decorator"></q2-avatar>
+            <h4 slot="header">Your Loan Officer</h4>
+            <p slot="description">Meet your loan officer who will guide you through the process.</p>
+        </q2-context>`,
+    },
+];
+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`);
+    });
+};
+test.describe('q2-context — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-context-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-context-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-context/test/q2-context-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,WAAW,GAAG,8MAA8M,CAAC;AAInO,MAAM,QAAQ,GAAc;IACxB;QACI,IAAI,EAAE,oBAAoB;QAC1B,IAAI,EAAE;;;sBAGQ;KACjB;IACD;QACI,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE;;;;sBAIQ;KACjB;IACD;QACI,IAAI,EAAE,iBAAiB;QACvB,IAAI,EAAE;;;;;sBAKQ;KACjB;IACD;QACI,IAAI,EAAE,mBAAmB;QACzB,IAAI,EAAE;;;;;;sBAMQ;KACjB;IACD;QACI,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE;;;;cAIA,WAAW;sBACH;KACjB;IACD;QACI,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE;;;;;;;cAOA,WAAW;sBACH;KACjB;IACD;QACI,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE;;;;;;;cAOA,WAAW;sBACH;KACjB;IACD;QACI,IAAI,EAAE,kBAAkB;QACxB,IAAI,EAAE;;;;sBAIQ;KACjB;CACJ,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAE,KAAY,EAAE,EAAE;IACnD,IAAI,CAAC,eAAe,OAAO,CAAC,IAAI,eAAe,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACvE,MAAM,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QAC/C,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,eAAe,OAAO,CAAC,IAAI,cAAc,KAAK,MAAM,CAAC,CAAC;IAC9F,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,gCAAgC,EAAE,GAAG,EAAE;IACjD,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;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 FOOTER_HTML = `<div slot=\"footer\" style=\"height: 10px; background-color: #e0e0e0; border-radius: 5px; overflow: hidden;\"><div style=\"width: 30%; height: 100%; background-color: #4caf50; border-radius: 5px;\"></div></div>`;\n\ntype Variant = { name: string; html: string };\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'header-description',\n        html: `<q2-context>\n            <h4 slot=\"header\">Application Status</h4>\n            <p slot=\"description\">A brief description of what's happening.</p>\n        </q2-context>`,\n    },\n    {\n        name: 'with-decorator',\n        html: `<q2-context>\n            <q2-icon slot=\"decorator\" type=\"lightbulb\"></q2-icon>\n            <h4 slot=\"header\">Application Status</h4>\n            <p slot=\"description\">A brief description of what's happening.</p>\n        </q2-context>`,\n    },\n    {\n        name: 'with-affordance',\n        html: `<q2-context>\n            <q2-icon slot=\"decorator\" type=\"lightbulb\"></q2-icon>\n            <h4 slot=\"header\">Application Status</h4>\n            <p slot=\"description\">A brief description of what's happening.</p>\n            <q2-btn slot=\"affordance\" hide-label label=\"Dismiss\"><q2-icon type=\"close\"></q2-icon></q2-btn>\n        </q2-context>`,\n    },\n    {\n        name: 'with-action-group',\n        html: `<q2-context>\n            <q2-icon slot=\"decorator\" type=\"money-time\"></q2-icon>\n            <h4 slot=\"header\">Application Status</h4>\n            <p slot=\"description\">A brief description of what's happening.</p>\n            <q2-btn slot=\"action-group\" intent=\"neutral\" size=\"small\">Confirm</q2-btn>\n            <q2-btn slot=\"action-group\" intent=\"workflow-escape\" size=\"small\">Go Back</q2-btn>\n        </q2-context>`,\n    },\n    {\n        name: 'with-footer',\n        html: `<q2-context>\n            <q2-icon slot=\"decorator\" type=\"money-time\"></q2-icon>\n            <h4 slot=\"header\">Application Status</h4>\n            <p slot=\"description\">A brief description of what's happening.</p>\n            ${FOOTER_HTML}\n        </q2-context>`,\n    },\n    {\n        name: 'all-slots',\n        html: `<q2-context>\n            <q2-icon slot=\"decorator\" type=\"lightbulb\"></q2-icon>\n            <h4 slot=\"header\">Application Status</h4>\n            <p slot=\"description\">A brief description of what's happening.</p>\n            <q2-btn slot=\"affordance\" hide-label label=\"Dismiss\"><q2-icon type=\"close\"></q2-icon></q2-btn>\n            <q2-btn slot=\"action-group\" intent=\"neutral\" size=\"small\">Confirm</q2-btn>\n            <q2-btn slot=\"action-group\" intent=\"workflow-escape\" size=\"small\">Go Back</q2-btn>\n            ${FOOTER_HTML}\n        </q2-context>`,\n    },\n    {\n        name: 'separator',\n        html: `<q2-context separator>\n            <q2-icon slot=\"decorator\" type=\"lightbulb\"></q2-icon>\n            <h4 slot=\"header\">Application Status</h4>\n            <p slot=\"description\">A brief description of what's happening.</p>\n            <q2-btn slot=\"affordance\" hide-label label=\"Dismiss\"><q2-icon type=\"close\"></q2-icon></q2-btn>\n            <q2-btn slot=\"action-group\" intent=\"neutral\" size=\"small\">Confirm</q2-btn>\n            <q2-btn slot=\"action-group\" intent=\"workflow-escape\" size=\"small\">Go Back</q2-btn>\n            ${FOOTER_HTML}\n        </q2-context>`,\n    },\n    {\n        name: 'avatar-decorator',\n        html: `<q2-context>\n            <q2-avatar slot=\"decorator\"></q2-avatar>\n            <h4 slot=\"header\">Your Loan Officer</h4>\n            <p slot=\"description\">Meet your loan officer who will guide you through the process.</p>\n        </q2-context>`,\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-context--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-context--${variant.name}--resting--${theme}.png`);\n    });\n};\n\ntest.describe('q2-context — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n        }\n    }\n});\n"]}

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

@@ -65,6 +65,37 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-currency-color: (<color>) Controls the base text color of the currency value.
+ * @prop --tct-currency-font-size?: (<length-percentage>) Controls the optional font size of the currency value.
+ * @prop --tct-currency-font-weight?: (<number>) Controls the optional font weight of the currency value.
+ * @prop --tct-currency-positive-color: (<color>) Controls the text color of the currency value when positive.
+ * @prop --tct-currency-negative-color: (<color>) Controls the text color of the currency value when negative.
+ * @prop --tct-currency-debit-positive-color: (<color>) Controls the text color of a positive debit currency value.
+ * @prop --tct-currency-debit-negative-color: (<color>) Controls the text color of a negative debit currency value.
+ * @prop --tct-currency-credit-positive-color: (<color>) Controls the text color of a positive credit currency value.
+ * @prop --tct-currency-credit-negative-color: (<color>) Controls the text color of a negative credit currency value.
+ * @prop --tct-currency-masked-positive-background: (*) Controls the background fill (color or gradient) of the masked positive currency value.
+ * @prop --tct-currency-masked-negative-background: (*) Controls the background fill (color or gradient) of the masked negative currency value.
+ * @prop --tct-currency-small-color?: (<color>) Controls the optional text color of the currency value in the small size.
+ * @prop --tct-currency-small-font-size: (<length-percentage>) Controls the font size of the currency value in the small size.
+ * @prop --tct-currency-small-font-weight: (<number>) Controls the font weight of the currency value in the small size.
+ * @prop --tct-currency-small-superscript-color?: (<color>) Controls the optional text color of the superscript portion in the small size.
+ * @prop --tct-currency-small-superscript-font-size: (<length-percentage>) Controls the font size of the superscript portion in the small size.
+ * @prop --tct-currency-small-superscript-font-weight: (<number>) Controls the font weight of the superscript portion in the small size.
+ * @prop --tct-currency-medium-color?: (<color>) Controls the optional text color of the currency value in the medium size.
+ * @prop --tct-currency-medium-font-size: (<length-percentage>) Controls the font size of the currency value in the medium size.
+ * @prop --tct-currency-medium-font-weight: (<number>) Controls the font weight of the currency value in the medium size.
+ * @prop --tct-currency-medium-superscript-color?: (<color>) Controls the optional text color of the superscript portion in the medium size.
+ * @prop --tct-currency-medium-superscript-font-size: (<length-percentage>) Controls the font size of the superscript portion in the medium size.
+ * @prop --tct-currency-medium-superscript-font-weight: (<number>) Controls the font weight of the superscript portion in the medium size.
+ * @prop --tct-currency-large-color?: (<color>) Controls the optional text color of the currency value in the large size.
+ * @prop --tct-currency-large-font-size: (<length-percentage>) Controls the font size of the currency value in the large size.
+ * @prop --tct-currency-large-font-weight: (<number>) Controls the font weight of the currency value in the large size.
+ * @prop --tct-currency-large-superscript-color?: (<color>) Controls the optional text color of the superscript portion in the large size.
+ * @prop --tct-currency-large-superscript-font-size: (<length-percentage>) Controls the font size of the superscript portion in the large size.
+ * @prop --tct-currency-large-superscript-font-weight: (<number>) Controls the font weight of the superscript portion in the large size.
+ */
 :host {
   display: inline-block;
 }

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 /**
  * @name Currency
  * @category Text
@@ -35,8 +35,7 @@ export class Q2Currency {
      * @testOnly
      */
     async displayedMessageValue() {
-        const currency = this.hostElement.shadowRoot.querySelector('[test-id="q2CurrencyInner"]');
-        return (currency === null || currency === void 0 ? void 0 : currency.getAttribute('aria-label')) || '';
+        return this.hostElement.getAttribute('aria-label') || '';
     }
     // #endregion
     // #region Watchers
@@ -141,7 +140,7 @@ export class Q2Currency {
     // #region Render Methods
     render() {
         const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, signDisplay, isNegativeAmount, } = this;
-        return (h("div", { key: 'a600525cc214be0a670d8faa90c22583bb142a5a', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '40a2b4736c8afc5b7939391fe90600d79d584c66' }, '('), hasPlusMinusSign && h("span", { key: '6f5755d3e4681168e523c9549a0fa2ce60ad49fc' }, plusMinusSign), currencyIsFront && h("span", { key: '006b2ab6a62e7f1f5bf413ce767763d1c8b6fa57', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '96b0d7262fa2bcf8b9039fba828d937e88c0fc00' }, amountCore), h("span", { key: 'fa848c80fe88cff6de78a1386c4473413f0cda18', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '0a39e489c17f33846af1587603a2e9ae21bd5f78', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '9e088b3f70a82bb7bb0ab1d8a59e1eadd837178a' }, ')')));
+        return (h(Host, { key: 'ef34175a8e5490734fff3dea6315012cff694ffa', "aria-label": readableCurrency }, h("div", { key: '68bbd6aeec8220bba221b5b0d8fccf2500c9b2c0', "test-id": "q2CurrencyInner", class: currencyClasses }, signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '0beac730d59b4241acc7514b7107116531665894' }, '('), hasPlusMinusSign && h("span", { key: '382819a090c7b64fbd6396dad59ef1599dafac64' }, plusMinusSign), currencyIsFront && (h("span", { key: '3537b66c817af1a9de2eb1f05b4e6a2e2f6a2355', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)), h("span", { key: '3cbf46fc1608be20c15d5b46fd7cc5da99954081' }, amountCore), h("span", { key: '2df7ac4a43fedc127d02eaea6aa96b6d4d8b107f', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && (h("span", { key: '5ad6317c0a36f7a5fef10f1ea83ac8fc667571e5', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)), signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '0356a4cf07928a11fa2226f40115159b63c2daf9' }, ')'))));
     }
     static get is() { return "q2-currency"; }
     static get encapsulation() { return "shadow"; }