q2-tecton-elements 1.71.4 → 1.73.0

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

@@ -0,0 +1,111 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+// Fixed dates keep the regular variants deterministic. The today-specific variant
+// freezes the browser clock before hydration so its indicator is also deterministic.
+const SINGLE_VALUE = '2026-06-15';
+const RANGE_START = '2026-06-10';
+const RANGE_END = '2026-06-20';
+const HOVER_TARGET = '2026-06-25';
+const INVALID_RANGE_DATE = '2026-06-15';
+const FROZEN_TODAY = '2026-06-17';
+const FROZEN_TODAY_ISO = `${FROZEN_TODAY}T12:00:00`;
+const RESTING_VARIANTS = [
+    { name: 'single', html: `<q2-date-calendar value="${SINGLE_VALUE}"></q2-date-calendar>` },
+    {
+        name: 'range',
+        html: `<q2-date-calendar mode="range" range-start="${RANGE_START}" range-end="${RANGE_END}"></q2-date-calendar>`,
+    },
+    {
+        name: 'disclaimer',
+        html: `<q2-date-calendar value="${SINGLE_VALUE}" disclaimer="tecton.element.datePicker.disclaimer.localTimeZone"></q2-date-calendar>`,
+    },
+    {
+        name: 'disabled',
+        html: `<q2-date-calendar value="${SINGLE_VALUE}" disabled></q2-date-calendar>`,
+    },
+];
+const FOCUS_VARIANT = {
+    name: 'single',
+    html: `<q2-date-calendar value="${SINGLE_VALUE}"></q2-date-calendar>`,
+};
+const HOVER_DAY_VARIANTS = [
+    { name: 'single', html: `<q2-date-calendar value="${SINGLE_VALUE}"></q2-date-calendar>` },
+    {
+        name: 'range',
+        html: `<q2-date-calendar mode="range" range-start="${RANGE_START}" range-end="${RANGE_END}"></q2-date-calendar>`,
+    },
+];
+const INVALID_RANGE_VARIANT = {
+    name: 'range-invalid-confirm',
+    html: `<q2-date-calendar mode="range" range-start="${RANGE_START}" range-end="${RANGE_END}"></q2-date-calendar>`,
+};
+const TODAY_WITH_SELECTION_VARIANT = {
+    name: 'today-with-selection',
+    html: `<q2-date-calendar value="${SINGLE_VALUE}"></q2-date-calendar>`,
+};
+const restingCase = (variant, theme) => {
+    test(`q2-date-calendar--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await expect(page).toHaveScreenshot(`q2-date-calendar--${variant.name}--resting--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-date-calendar--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-date-calendar--${variant.name}--focus--${theme}.png`);
+    });
+};
+const hoverDayCase = (variant, theme) => {
+    test(`q2-date-calendar--${variant.name}--hover-day — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        const dayButton = page.locator(`q2-date-calendar button[data-date="${HOVER_TARGET}"]`);
+        await dayButton.waitFor({ state: 'visible' });
+        await dayButton.hover();
+        await expect(page).toHaveScreenshot(`q2-date-calendar--${variant.name}--hover-day--${theme}.png`);
+    });
+};
+const invalidRangeCase = (variant, theme) => {
+    test(`q2-date-calendar--${variant.name}--error — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await page.locator('q2-date-calendar').evaluate((element, invalidDate) => {
+            element.invalidDates = [invalidDate];
+        }, INVALID_RANGE_DATE);
+        await expect(page.locator(`q2-date-calendar button[data-date="${INVALID_RANGE_DATE}"]`)).toHaveClass(/is-disabled/);
+        await page.locator('q2-date-calendar .cal-footer-actions q2-btn[intent="workflow-primary"] button').click();
+        await expect(page.locator('q2-date-calendar .cal-footer-summary q2-message')).toHaveClass(/is-placeholder/);
+        await expect(page).toHaveScreenshot(`q2-date-calendar--${variant.name}--error--${theme}.png`);
+    });
+};
+const todayWithSelectionCase = (theme) => {
+    test(`q2-date-calendar--${TODAY_WITH_SELECTION_VARIANT.name}--resting — ${theme}`, async ({ page }) => {
+        await page.clock.install({ time: new Date(FROZEN_TODAY_ISO) });
+        await page.clock.setFixedTime(new Date(FROZEN_TODAY_ISO));
+        await setupPage(page, TODAY_WITH_SELECTION_VARIANT.html, { theme, setupLoc: true });
+        await expect(page.locator(`q2-date-calendar button[data-date="${FROZEN_TODAY}"]`)).toHaveClass(/is-today/);
+        await expect(page.locator(`q2-date-calendar button[data-date="${SINGLE_VALUE}"]`)).toHaveClass(/is-selected/);
+        await expect(page).toHaveScreenshot(`q2-date-calendar--${TODAY_WITH_SELECTION_VARIANT.name}--resting--${theme}.png`);
+    });
+};
+test.describe('q2-date-calendar — variants × themes', () => {
+    for (const variant of RESTING_VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+    for (const theme of THEMES) {
+        focusCase(FOCUS_VARIANT, theme);
+    }
+    for (const variant of HOVER_DAY_VARIANTS) {
+        for (const theme of THEMES) {
+            hoverDayCase(variant, theme);
+        }
+    }
+    for (const theme of THEMES) {
+        invalidRangeCase(INVALID_RANGE_VARIANT, theme);
+    }
+    for (const theme of THEMES) {
+        todayWithSelectionCase(theme);
+    }
+});

package/dist/collection/components/q2-date-picker/q2-date-picker.css

@@ -0,0 +1,138 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus-visible {
+  outline: none;
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  font-stretch: inherit;
+}
+
+:host(.sr),
+:host(.sr) button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.sr,
+.sr button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
+/**
+ * @prop --tct-date-picker-width: (<length-percentage>) Controls the desktop popup and embedded calendar width.
+ * @prop --tct-date-picker-border-radius: (<length-percentage>) Controls the popup corner radius.
+ * @prop --tct-date-picker-mobile-gutter: (<length-percentage>) Controls the inline gutter on each side of the mobile popup.
+ * @prop --tct-date-picker-mobile-max-width: (<length-percentage>) Controls the maximum mobile popup and embedded calendar width.
+ */
+:host {
+  --comp-date-picker-width: var(--tct-date-picker-width, var(--tct-date-calendar-width, 360px));
+  box-sizing: border-box;
+  display: block;
+}
+
+:host[hidden] {
+  display: none;
+}
+
+click-elsewhere,
+.date-picker-input {
+  display: block;
+  width: 100%;
+}
+
+q2-date-calendar {
+  --comp-date-calendar-width: var(--comp-date-picker-width);
+  display: block;
+  width: var(--comp-date-picker-width);
+}
+
+q2-date-calendar.is-action-sheet {
+  --comp-date-calendar-width: 100%;
+  width: 100%;
+}
+
+q2-popover {
+  --tct-popover-width: var(--comp-date-picker-width);
+  --tct-popover-border-radius: var(--tct-date-picker-border-radius, var(--tct-date-calendar-border-radius, var(--app-border-radius-1, 4px)));
+}
+
+@media (max-width: 768px) {
+  :host {
+    --comp-date-picker-width: min(
+        100%,
+        calc(
+            100vw - var(--tct-date-picker-mobile-gutter, var(--tct-date-calendar-mobile-gutter, 24px)) - var(--tct-date-picker-mobile-gutter, var(--tct-date-calendar-mobile-gutter, 24px))
+        ),
+        var(--tct-date-picker-mobile-max-width, var(--tct-date-calendar-mobile-max-width, 420px))
+    );
+  }
+}