@beeq/core 1.12.4 → 1.13.0

package/dist/esm/bq-date-picker.entry.js

@@ -2,126 +2,957 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BSSRzVAz.js';
-import { i as isClient } from './isClient-B4sM1t6Z.js';
-import { f as formatDisplayValue, e as extractFocusedDate, g as getTodayISO, p as parseDateInput, t as toISODateString, u as updateFormValidity, c as clampDateToRange } from './form-DLjuE3KX.js';
+import { h, r as registerInstance, c as createEvent, a as getElement } from './index-BSSRzVAz.js';
+import { I as ISO_DATE_LOCALE, p as parseDateInput, t as toISODateString, f as formatDisplayValue, g as getTodayISO, u as updateFormValidity } from './form-DLjuE3KX.js';
 import { i as isNil } from './isNil-BcPwGxIn.js';
 import { i as isEventTargetChildOfElement } from './event-Dx-CEPSQ.js';
-import { i as isDefined } from './isDefined-DvmFa_bD.js';
 import { i as isHTMLElement } from './isHTMLElement-D1A0LpG_.js';
 import { v as validatePropValue } from './props-DbxZ8FhA.js';
 import { b as hasSlotContent } from './slot-uqkxeAeG.js';
+import { i as isDefined } from './isDefined-DvmFa_bD.js';
 import './isString-lysmVw2n.js';
 
+const INPUT_VALIDATION = ['error', 'none', 'success', 'warning'];
+
+const DAYS_OF_WEEK = [0, 1, 2, 3, 4, 5, 6];
 /** The type of the date picker */
 const DATE_PICKER_TYPE = ['single', 'multi', 'range'];
+/** The calendar view */
+const CALENDAR_VIEW = ['days', 'months', 'years'];
+/** Positioning strategy for the panel. */
+const FLOATING_STRATEGY = ['fixed', 'absolute'];
+/** Placement of the panel — mirrors `@floating-ui/dom` placements. */
+const FLOATING_PLACEMENT = [
+    'top',
+    'top-start',
+    'top-end',
+    'right',
+    'right-start',
+    'right-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'left',
+    'left-start',
+    'left-end',
+];
+/** How the next/previous buttons should step through months. */
+const MONTHS_PER_VIEW = ['single', 'months'];
+/**
+ * The precision of the value produced by the date picker.
+ * - `day`   → `YYYY-MM-DD` (default; drill-down to days)
+ * - `month` → `YYYY-MM`    (selection commits on the months view)
+ * - `year`  → `YYYY`       (selection commits on the years view)
+ */
+const DATE_PRECISION = ['day', 'month', 'year'];
 
 /** Default fallback input ID */
 const DEFAULT_INPUT_ID = 'date-picker';
-/** Calendar month shadow DOM parts for common elements */
-const CALENDAR_COMMON_EXPORT_PARTS = 'calendar__heading,calendar__table,calendar__tr,calendar__head,calendar__week,calendar__th,calendar__td';
-/** Calendar month shadow DOM parts for button elements */
-const CALENDAR_BUTTON_EXPORT_PARTS = 'calendar__button,calendar__day,calendar__selected,calendar__today,calendar__disallowed,calendar__outside,calendar__range-start,calendar__range-end,calendar__range-inner';
-/** Combined export parts for calendar-month component */
-const CALENDAR_MONTH_EXPORT_PARTS = `${CALENDAR_COMMON_EXPORT_PARTS},${CALENDAR_BUTTON_EXPORT_PARTS}`;
-/** Export parts for the calendar container component (calendar-date, calendar-range, calendar-multi) */
-const CALENDAR_CONTAINER_EXPORT_PARTS = 'container:calendar__container,header:calendar__header,button:calendar__button,previous:calendar__previous,next:calendar__next,disabled:calendar__disabled,heading:calendar__heading';
-/** Maps picker type to Cally component tag name */
-const CALENDAR_TYPE_MAP = {
-    single: 'calendar-date',
-    multi: 'calendar-multi',
-    range: 'calendar-range',
+/** Default aria labels used by the calendar navigation */
+const DEFAULT_ARIA_LABELS = {
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    previousYear: 'Previous year',
+    nextYear: 'Next year',
+    previousDecade: 'Previous decade',
+    nextDecade: 'Next decade',
+    chooseMonth: 'Choose month',
+    chooseYear: 'Choose year',
+    chooseDate: 'Choose date',
+};
+/**
+ * Shadow DOM parts exposed by the component.
+ * Kept as a single list so it is easy to audit against the JSDoc @part list.
+ */
+const CALENDAR_PARTS = {
+    base: 'base',
+    label: 'label',
+    control: 'control',
+    prefix: 'prefix',
+    suffix: 'suffix',
+    input: 'input',
+    clearBtn: 'clear-btn',
+    button: 'button',
+    container: 'calendar__container',
+    header: 'calendar__header',
+    heading: 'calendar__heading',
+    previous: 'calendar__previous',
+    next: 'calendar__next',
+    table: 'calendar__table',
+    head: 'calendar__head',
+    tr: 'calendar__tr',
+    th: 'calendar__th',
+    week: 'calendar__week',
+    td: 'calendar__td',
+    day: 'calendar__day',
+    today: 'calendar__today',
+    selected: 'calendar__selected',
+    outside: 'calendar__outside',
+    disallowed: 'calendar__disallowed',
+    disabled: 'calendar__disabled',
+    rangeStart: 'calendar__range-start',
+    rangeEnd: 'calendar__range-end',
+    rangeInner: 'calendar__range-inner',
+    months: 'calendar__months',
+    month: 'calendar__month',
+    monthSelected: 'calendar__month-selected',
+    years: 'calendar__years',
+    year: 'calendar__year',
+    yearSelected: 'calendar__year-selected',
+    calendarTrigger: 'calendar-trigger',
+};
+/** Number of years shown in the decade view grid. Uses 12 to fill a 3x4 grid. */
+const DECADE_GRID_SIZE = 12;
+/**
+ * Maximum number of month panels rendered side-by-side. Range pickers only
+ * benefit from up to 2 panels — beyond that the popover overflows most
+ * viewports and roving keyboard navigation becomes confusing.
+ */
+const MAX_MONTHS_PER_VIEW = 2;
+
+/**
+ * Bounds predicates for the calendar.
+ *
+ * `min` and `max` may be at any wire precision (`YYYY`, `YYYY-MM`, or
+ * `YYYY-MM-DD`); internal cell values are always full `YYYY-MM-DD` strings.
+ * All predicates are pure and rely on lexicographic comparison, which is
+ * safe for ISO 8601 dates.
+ */
+/**
+ * Extract the `YYYY` prefix (as a number) from a bound string.
+ * Returns `null` if the string does not begin with a 4-digit year.
+ */
+const boundYear = (iso) => {
+    if (!iso)
+        return null;
+    const match = /^(\d{4})/.exec(iso);
+    return match ? Number(match[1]) : null;
+};
+/**
+ * Extract `{ year, month }` (month is 0-based) from a bound string. Falls
+ * back to `null` when the string doesn't contain a `YYYY-MM` prefix.
+ */
+const boundYearMonth = (iso) => {
+    if (!iso)
+        return null;
+    const match = /^(\d{4})-(\d{2})/.exec(iso);
+    if (!match)
+        return null;
+    const month = Number(match[2]) - 1;
+    if (month < 0 || month > 11)
+        return null;
+    return { year: Number(match[1]), month };
+};
+/**
+ * Whether a given year is within the (inclusive) `min`/`max` range.
+ * A year cell is considered in-range when any day inside that year is
+ * still selectable — i.e. we compare on the year prefix only, ignoring
+ * the month/day components of `min` / `max`.
+ */
+const isYearWithinBounds = (year, min, max) => {
+    const minYear = boundYear(min);
+    const maxYear = boundYear(max);
+    if (minYear !== null && year < minYear)
+        return false;
+    if (maxYear !== null && year > maxYear)
+        return false;
+    return true;
+};
+/**
+ * Whether a `(year, month)` pair sits at-or-after the given lower bound.
+ * A `null`/`undefined` bound is treated as "no lower bound".
+ */
+const monthAtOrAfter = (year, month, bound) => {
+    const ym = boundYearMonth(bound);
+    if (ym)
+        return year > ym.year || (year === ym.year && month >= ym.month);
+    const y = boundYear(bound);
+    return y === null || year >= y;
+};
+/** Whether a `(year, month)` pair sits at-or-before the given upper bound. */
+const monthAtOrBefore = (year, month, bound) => {
+    const ym = boundYearMonth(bound);
+    if (ym)
+        return year < ym.year || (year === ym.year && month <= ym.month);
+    const y = boundYear(bound);
+    return y === null || year <= y;
+};
+/**
+ * Whether a given `(year, month)` pair is within the (inclusive) `min`/`max`
+ * range. A month cell is considered in-range when any day inside that month
+ * would still satisfy the bounds — we compare on the year-month prefix and
+ * ignore the day component of `min` / `max`.
+ */
+const isMonthWithinBounds = (year, month, min, max) => monthAtOrAfter(year, month, min) && monthAtOrBefore(year, month, max);
+/**
+ * Pad a bound string up to full `YYYY-MM-DD` length so it can be lexically
+ * compared with a full ISO date. `min` widens down (missing pieces become
+ * `-01`), `max` widens up (missing month → `-12`, missing day → last day of
+ * that month, honoring leap years).
+ */
+const padBound = (iso, kind) => {
+    if (!iso)
+        return null;
+    const yearMatch = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/.exec(iso);
+    if (!yearMatch)
+        return null;
+    const year = yearMatch[1];
+    const month = yearMatch[2] ?? (kind === 'min' ? '01' : '12');
+    const day = yearMatch[3] ??
+        (kind === 'min' ? '01' : String(new Date(Number(year), Number(month), 0).getDate()).padStart(2, '0'));
+    return `${year}-${month}-${day}`;
 };
 
 /* -------------------------------------------------------------------------- */
-/*                         Cally Library loader helper                        */
+/*                                Date parsing                                */
 /* -------------------------------------------------------------------------- */
-const CALLY_SCRIPT_ATTRIBUTE = 'data-cally-library';
-//❗ Make sure to update the version here when the library releases a new version
-const CALLY_LIB_VERSION = '0.9.0';
-/**
- * ❗ Make sure to update the hash here if the `CALLY_LIB_VERSION` is updated
- * This hash is used to ensure the integrity of the library when loading it
- * from a CDN.
- * @see https://developer.mozilla.org/en-US/docs/Web/Security/Defenses/Subresource_Integrity#tools_for_generating_sri_hashes
- */
-const CALLY_LIB_HASH = 'sha384-pM/XA9cWLgX65JRL+wCO7uw2DIwVqcK1WlITykq2OZYbP5vuMspYj0K29Ka6UyFU';
-let isLibraryLoaded = false;
-let loadingPromise = null;
-/**
- * Helper function to load a script with given configuration
- * @param {Object} config - Script configuration
- * @param {string} config.type - The type of the script
- * @param {string} config.src - The source URL of the script
- * @param {Record<string, string>} [config.attributes] - Additional attributes to set on the script element
- * @returns Promise that resolves when the script is loaded
- * @throws {Error} If the script fails to load
- */
-const loadScript = ({ type, src, attributes = {} }) => {
-    return new Promise((resolve, reject) => {
-        const script = document.createElement('script');
-        script.type = type;
-        script.src = src;
-        script.onload = () => resolve();
-        script.onerror = (error) => reject(new Error(`Failed to load script: ${src}, ${error instanceof Error ? error.message : 'Unknown error'}`));
-        Object.entries(attributes).forEach(([key, value]) => {
-            script.setAttribute(key, value);
+/**
+ * Parse an ISO 8601 date string (`YYYY-MM-DD`) into a local-time `Date`.
+ * Returns `null` when the string is missing or invalid.
+ */
+const parseISO = (iso) => {
+    if (!iso || !/^\d{4}-\d{2}-\d{2}$/.test(iso))
+        return null;
+    const [y, m, d] = iso.split('-').map(Number);
+    const date = new Date(y, m - 1, d);
+    if (date.getFullYear() !== y || date.getMonth() !== m - 1 || date.getDate() !== d)
+        return null;
+    return date;
+};
+/**
+ * Convert a `Date` to `YYYY-MM-DD` in local time.
+ */
+const toISO = (date) => date.toLocaleDateString(ISO_DATE_LOCALE);
+/**
+ * Whether the ISO string is a valid `YYYY-MM-DD` date (round-trips through
+ * `parseISO`). Convenience predicate for input filtering.
+ */
+const isValidISO = (iso) => parseISO(iso) !== null;
+const startOfMonth = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+const endOfMonth = (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0);
+const addDays = (date, amount) => {
+    const next = new Date(date);
+    next.setDate(next.getDate() + amount);
+    return next;
+};
+const addMonths = (date, amount) => {
+    const next = new Date(date.getFullYear(), date.getMonth() + amount, 1);
+    // Preserve the day when possible.
+    const day = Math.min(date.getDate(), endOfMonth(next).getDate());
+    next.setDate(day);
+    return next;
+};
+const addYears = (date, amount) => {
+    const next = new Date(date);
+    next.setFullYear(next.getFullYear() + amount);
+    return next;
+};
+/* -------------------------------------------------------------------------- */
+/*                                Comparators                                 */
+/* -------------------------------------------------------------------------- */
+const isSameDay = (a, b) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+/** ISO-string based comparison; safe for `YYYY-MM-DD`. */
+const compareISO = (a, b) => {
+    if (a === b)
+        return 0;
+    return a < b ? -1 : 1;
+};
+/**
+ * Build a 6x7 matrix for the given month starting on `firstDayOfWeek`.
+ * The matrix always has 42 cells so the calendar keeps a stable height.
+ *
+ * @param anchor         Any date within the target month.
+ * @param firstDayOfWeek 0 = Sunday, 1 = Monday, ...
+ */
+const buildMonthMatrix = (anchor, firstDayOfWeek) => {
+    const start = startOfMonth(anchor);
+    const offset = (start.getDay() - firstDayOfWeek + 7) % 7;
+    const gridStart = addDays(start, -offset);
+    const cells = [];
+    for (let i = 0; i < 42; i++) {
+        const date = addDays(gridStart, i);
+        cells.push({
+            date,
+            iso: toISO(date),
+            outside: date.getMonth() !== anchor.getMonth(),
         });
-        document.head.appendChild(script);
-    });
+    }
+    const rows = [];
+    for (let r = 0; r < 6; r++)
+        rows.push(cells.slice(r * 7, r * 7 + 7));
+    return rows;
 };
+/* -------------------------------------------------------------------------- */
+/*                                Decade grid                                 */
+/* -------------------------------------------------------------------------- */
 /**
- * Checks if the Cally library is already loaded in the document
- * @returns {boolean} True if the library is loaded
+ * Given any year, return the anchor year of the decade grid.
+ *
+ * The reference image shows a grid like `2016 – 2027` containing the current
+ * year (`2026`). We anchor the grid so the "round" decade start (e.g. 2020,
+ * 2010, ...) appears at index 1 - i.e. one extra year before the decade and
+ * one extra year after, filling the 3x4 grid cleanly.
  */
-const isCallyLibraryLoaded = () => {
-    // This might be a bit redundant, but it's a sanity check to ensure the library is actually loaded
-    return isLibraryLoaded || document.querySelector(`script[${CALLY_SCRIPT_ATTRIBUTE}]`) !== null;
+const getDecadeStart = (year) => Math.floor(year / 10) * 10 - 1;
+/**
+ * Clamp a `Date` between an optional min and max. Bounds may be at any
+ * ISO precision (`YYYY`, `YYYY-MM`, `YYYY-MM-DD`) and are padded to the
+ * widest matching day before comparing (`min` → first day, `max` → last day).
+ */
+const clampDate = (date, minISO, maxISO) => {
+    const min = parseISO(padBound(minISO, 'min'));
+    const max = parseISO(padBound(maxISO, 'max'));
+    if (min && date < min)
+        return min;
+    if (max && date > max)
+        return max;
+    return date;
+};
+/** Whether the given `Date` is within `[min, max]` ISO bounds (inclusive). */
+const isWithinBounds = (date, minISO, maxISO) => {
+    const iso = toISO(date);
+    const minPadded = padBound(minISO, 'min');
+    const maxPadded = padBound(maxISO, 'max');
+    if (minPadded && iso < minPadded)
+        return false;
+    if (maxPadded && iso > maxPadded)
+        return false;
+    return true;
 };
+/** Sort two ISO strings and return `[start, end]`. */
+const sortRange = (a, b) => (a <= b ? [a, b] : [b, a]);
+
 /**
- * Loads the Cally library for the date picker component.
- * Uses a singleton promise pattern to prevent race conditions when multiple
- * date picker components attempt to load the library simultaneously.
+ * Cached `Intl.DateTimeFormat` factories.
  *
- * @throws {Error} If the library fails to load
- * @return {Promise<void>}
- */
-const loadCallyLibrary = () => {
-    // Already loaded, return immediately
-    if (isLibraryLoaded)
-        return Promise.resolve();
-    // If a load is already in progress, wait for it to complete
-    if (loadingPromise !== null)
-        return loadingPromise;
-    // Check if script already exists in DOM (e.g., from a previous session or external source)
-    if (document.querySelector(`script[${CALLY_SCRIPT_ATTRIBUTE}]`) !== null) {
-        isLibraryLoaded = true;
-        return Promise.resolve();
-    }
-    // Start loading and store the promise so concurrent calls can await it
-    loadingPromise = loadScript({
-        type: 'module',
-        src: `https://unpkg.com/cally@${CALLY_LIB_VERSION}/dist/cally.js`,
-        attributes: {
-            [CALLY_SCRIPT_ATTRIBUTE]: '',
-            crossOrigin: 'anonymous',
-            integrity: CALLY_LIB_HASH,
-        },
-    })
-        .then(() => {
-        isLibraryLoaded = true;
-    })
-        .catch((error) => {
-        // Reset the promise so future attempts can retry
-        loadingPromise = null;
-        isLibraryLoaded = false;
-        throw new Error(`Failed to load the cally library: ${error instanceof Error ? error.message : 'Unknown error'}`);
+ * The Intl API is powerful but relatively expensive to instantiate. Since the
+ * calendar re-renders on every user interaction we keep a small LRU-ish cache
+ * keyed by locale + option shape.
+ */
+const cache = new Map();
+/** Prevents unbounded growth in long-running apps. */
+const CACHE_MAX_SIZE = 64;
+const cacheKey = (locale, options) => {
+    const localeKey = typeof locale === 'string' ? locale : JSON.stringify(locale ?? '');
+    return `${localeKey}|${JSON.stringify(options)}`;
+};
+const getFormatter = (locale, options) => {
+    const key = cacheKey(locale, options);
+    let formatter = cache.get(key);
+    if (!formatter) {
+        formatter = new Intl.DateTimeFormat(locale, options);
+        cache.set(key, formatter);
+        if (cache.size > CACHE_MAX_SIZE) {
+            const firstKey = cache.keys().next().value;
+            if (firstKey !== undefined)
+                cache.delete(firstKey);
+        }
+    }
+    return formatter;
+};
+/**
+ * Format a month, e.g. "January 2026" or "Jan".
+ */
+const formatMonth = (date, locale, monthStyle = 'long', includeYear = true) => getFormatter(locale, {
+    month: monthStyle,
+    ...(includeYear ? { year: 'numeric' } : {}),
+}).format(date);
+/**
+ * Format a year, e.g. "2026".
+ */
+const formatYear = (date, locale) => getFormatter(locale, { year: 'numeric' }).format(date);
+/**
+ * Returns the weekday names for the given locale ordered from `firstDayOfWeek`.
+ *
+ * @param locale        The locale used for formatting.
+ * @param firstDayOfWeek The first day of the week (0 = Sunday, 1 = Monday, ...).
+ * @param style         Weekday style (long, short, narrow).
+ * @returns             An array of `{short, long}` names in display order.
+ */
+const getWeekdayNames = (locale, firstDayOfWeek, style = 'short') => {
+    const shortFormatter = getFormatter(locale, { weekday: style });
+    const longFormatter = getFormatter(locale, { weekday: 'long' });
+    // Any known Sunday works as the anchor date. 2024-01-07 is a Sunday.
+    const anchor = new Date(2024, 0, 7);
+    return Array.from({ length: 7 }, (_, i) => {
+        const dayIndex = (firstDayOfWeek + i) % 7;
+        const day = new Date(anchor);
+        day.setDate(anchor.getDate() + dayIndex);
+        return { short: shortFormatter.format(day), long: longFormatter.format(day) };
     });
-    return loadingPromise;
+};
+/**
+ * Returns the localized month names.
+ *
+ * @param locale The locale used for formatting.
+ * @param style  Month style (long, short, narrow).
+ */
+const getMonthNames = (locale, style = 'short') => {
+    const formatter = getFormatter(locale, { month: style });
+    return Array.from({ length: 12 }, (_, month) => formatter.format(new Date(2024, month, 1)));
 };
 
-const bqDatePickerCss = () => `.border-spacing-0,calendar-month::part(table){--tw-border-spacing-x:0;--tw-border-spacing-y:0}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{text-size-adjust:none;font-family:var(--bq-font-family);font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);line-height:var(--bq-font-line-height--regular);min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:where(:root){--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:"Outfit",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq:not([bq-mode]),.light,:root:not([bq-theme]):not([bq-mode]),:root[bq-theme=beeq]:not([bq-mode]),[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}:where(.endava),:where([bq-theme=endava]){--bq-font-family:"Poppins",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,.endava:not([bq-mode]),[bq-theme=endava]:not([bq-mode]),[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.pointer-events-none{pointer-events:none}.me-\\[--bq-date-picker--gap\\]{margin-inline-end:var(--bq-date-picker--gap)}.ms-\\[--bq-date-picker--gap\\]{margin-inline-start:var(--bq-date-picker--gap)}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.size-\\[--bq-date-picker--day-size\\]{height:var(--bq-date-picker--day-size);width:var(--bq-date-picker--day-size)}.flex-auto{flex:1 1 auto}.flex-grow{flex-grow:1}.border-spacing-0{--tw-border-spacing-x:0px;--tw-border-spacing-y:0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.cursor-inherit{cursor:inherit}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-\\[--bq-date-picker--gap\\]{gap:var(--bq-date-picker--gap)}.gap-s{gap:var(--bq-spacing-s)}.rounded-\\[--bq-date-picker--border-radius\\]{border-radius:var(--bq-date-picker--border-radius)}.rounded-none{border-radius:var(--bq-radius--none)}.rounded-s{border-radius:var(--bq-radius--s)}.rounded-ee-none{border-end-end-radius:var(--bq-radius--none)}.rounded-es-none{border-end-start-radius:var(--bq-radius--none)}.rounded-se-none{border-start-end-radius:var(--bq-radius--none)}.rounded-ss-none{border-start-start-radius:var(--bq-radius--none)}.border-0{border-width:0}.border-\\[length\\:--bq-date-picker--border-width\\]{border-width:var(--bq-date-picker--border-width)}.border-\\[length\\:--bq-date-picker--currentDate-border-width\\]{border-width:var(--bq-date-picker--currentDate-border-width)}.border-none{border-style:none}.border-\\[color\\:--bq-date-picker--border-color\\]{border-color:var(--bq-date-picker--border-color)}.border-\\[color\\:--bq-date-picker--currentDate-border-color\\]{border-color:var(--bq-date-picker--currentDate-border-color)}.border-\\[color\\:--bq-focus\\]{border-color:var(--bq-focus)}.border-danger{border-color:var(--bq-stroke--danger)}.border-success{border-color:var(--bq-stroke--success)}.border-warning{border-color:var(--bq-stroke--warning)}.bg-\\[--bq-date-picker--background-color\\]{background-color:var(--bq-date-picker--background-color)}.bg-\\[--bq-date-picker--range-background-color\\]{background-color:var(--bq-date-picker--range-background-color)}.bg-\\[--bq-date-picker--range-inner-background-color\\]{background-color:var(--bq-date-picker--range-inner-background-color)}.bg-inherit{background-color:inherit}.bg-transparent{background-color:transparent}.pe-\\[--bq-date-picker--padding-end\\]{padding-inline-end:var(--bq-date-picker--padding-end)}.ps-\\[--bq-date-picker--padding-start\\]{padding-inline-start:var(--bq-date-picker--padding-start)}.font-default{font-family:var(--bq-font-family)}.font-inherit{font-family:inherit}.text-\\[length\\:--bq-date-picker--label-text-size\\]{font-size:var(--bq-date-picker--label-text-size)}.text-\\[length\\:--bq-date-picker--text-size\\]{font-size:var(--bq-date-picker--text-size)}.text-\\[length\\:_inherit\\],.text-\\[length\\:inherit\\]{font-size:inherit}.text-\\[color\\:--bq-date-picker--label-text-color\\]{color:var(--bq-date-picker--label-text-color)}.text-\\[color\\:--bq-date-picker--text-color\\]{color:var(--bq-date-picker--text-color)}.text-alt{color:var(--bq-text--alt)}.text-primary{color:var(--bq-text--primary)}.text-secondary{color:var(--bq-text--secondary)}.opacity-100{opacity:1}.opacity-60{opacity:.6}.transition-\\[border-color\\2c box-shadow\\]{transition-duration:.15s;transition-property:border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.border-active-danger{border-color:color-mix(in srgb,var(--bq-stroke--danger),var(--bq-active) 20%)}.border-active-success{border-color:color-mix(in srgb,var(--bq-stroke--success),var(--bq-active) 20%)}.border-active-warning{border-color:color-mix(in srgb,var(--bq-stroke--warning),var(--bq-active) 20%)}.is-full{inline-size:100%}.min-is-0{min-inline-size:0}.p-b-0{padding-block:0}.p-b-\\[--bq-date-picker--paddingY\\]{padding-block:var(--bq-date-picker--paddingY)}.p-b-xs2{padding-block:var(--bq-spacing-xs2)}.p-i-0{padding-inline:0}.p-i-xs{padding-inline:var(--bq-spacing-xs)}.m-b-0{margin-block:0}.m-be-\\[--bq-date-picker--label-margin-bottom\\]{margin-block-end:var(--bq-date-picker--label-margin-bottom)}.m-i-0{margin-inline:0}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-date-picker--background-color:var(--bq-ui--primary);--bq-date-picker--border-color:var(--bq-stroke--tertiary);--bq-date-picker--border-radius:var(--bq-radius--s);--bq-date-picker--border-style:solid;--bq-date-picker--border-width:var(--bq-stroke-s);--bq-date-picker--currentDate-border-color:var(--bq-stroke--brand);--bq-date-picker--currentDate-border-width:var(--bq-stroke-m);--bq-date-picker--day-size:2.25rem;--bq-date-picker--gap:var(--bq-spacing-xs);--bq-date-picker--icon-size:24px;--bq-date-picker--label-margin-bottom:var(--bq-spacing-xs);--bq-date-picker--label-text-color:var(--bq-text--primary);--bq-date-picker--label-text-size:var(--bq-font-size--s);--bq-date-picker--padding-end:var(--bq-spacing-m);--bq-date-picker--padding-start:var(--bq-spacing-m);--bq-date-picker--paddingY:var(--bq-spacing-s);--bq-date-picker--range-background-color:var(--bq-ui--brand);--bq-date-picker--range-inner-background-color:var(--bq-ui--brand-alt);--bq-date-picker--text-color:var(--bq-text--primary);--bq-date-picker--text-placeholder-color:var(--bq-text--secondary);--bq-date-picker--text-size:var(--bq-font-size--m);display:block;inline-size:100%}.bq-date-picker__label{align-items:center;color:var(--bq-date-picker--label-text-color);display:flex;flex-grow:1;font-size:var(--bq-date-picker--label-text-size);gap:var(--bq-date-picker--gap);margin-block-end:var(--bq-date-picker--label-margin-bottom)}.bq-date-picker__control{align-items:center;border-color:var(--bq-date-picker--border-color);border-radius:var(--bq-date-picker--border-radius);border-style:var(--bq-date-picker--border-style);border-width:var(--bq-date-picker--border-width);color:var(--bq-date-picker--text-color);display:flex;font-size:var(--bq-date-picker--text-size);inline-size:100%;padding-block:var(--bq-date-picker--paddingY);padding-inline-end:var(--bq-date-picker--padding-end);padding-inline-start:var(--bq-date-picker--padding-start);transition-duration:.15s;transition-property:border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);user-select:none}.bq-date-picker__control::placeholder{color:var(--bq-date-picker--text-placeholder-color)}.bq-date-picker__control:hover:not(.disabled):not(:focus-within){border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}.bq-date-picker__control:not(.disabled):focus-within{--bq-ring-width:1px;--bq-ring-offset-width:0;border-color:var(--bq-focus);outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.bq-date-picker__control:not(.disabled):focus-within .bq-date-picker__control--clear,.bq-date-picker__control:not(.disabled):hover .bq-date-picker__control--clear{display:inline-block}.bq-date-picker__control.disabled{cursor:not-allowed;opacity:.6}.bq-date-picker__control.validation-error{border-color:var(--bq-stroke--danger)}.bq-date-picker__control.validation-error:hover:not(.disabled):not(:focus-within){border-color:color-mix(in srgb,var(--bq-stroke--danger),var(--bq-hover) 20%)}.bq-date-picker__control.validation-error:not(.disabled):focus-within{--bq-ring-color-focus:var(--bq-stroke--danger);border-color:color-mix(in srgb,var(--bq-stroke--danger),var(--bq-active) 20%)}.bq-date-picker__control.validation-success{border-color:var(--bq-stroke--success)}.bq-date-picker__control.validation-success:hover:not(.disabled):not(:focus-within){border-color:color-mix(in srgb,var(--bq-stroke--success),var(--bq-hover) 20%)}.bq-date-picker__control.validation-success:not(.disabled):focus-within{--bq-ring-color-focus:var(--bq-stroke--success);border-color:color-mix(in srgb,var(--bq-stroke--success),var(--bq-active) 20%)}.bq-date-picker__control.validation-warning{border-color:var(--bq-stroke--warning)}.bq-date-picker__control.validation-warning:hover:not(.disabled):not(:focus-within){border-color:color-mix(in srgb,var(--bq-stroke--warning),var(--bq-hover) 20%)}.bq-date-picker__control.validation-warning:not(.disabled):focus-within{--bq-ring-color-focus:var(--bq-stroke--warning);border-color:color-mix(in srgb,var(--bq-stroke--warning),var(--bq-active) 20%)}.bq-date-picker__control--input{appearance:none;background-color:inherit;border-style:none;color:inherit;cursor:inherit;flex:1 1 auto;font-family:inherit;font-size:inherit;margin-block:0;margin-inline:0;min-inline-size:0;padding-block:0;padding-inline:0;user-select:none}.bq-date-picker__control--input:focus{outline:2px solid transparent;outline-offset:2px}.bq-date-picker__control--input:focus-visible{outline:2px solid transparent;outline-offset:2px}.bq-date-picker__control--clear::part(button){--bq-ring-width:initial;--bq-ring-offset-width:initial;--bq-ring-color-focus:initial}.bq-date-picker__control--prefix,.bq-date-picker__control--suffix{align-items:center;color:var(--bq-date-picker--text-color);display:flex;pointer-events:none}.bq-date-picker__control--prefix{margin-inline-end:var(--bq-date-picker--gap)}.bq-date-picker__control--suffix{margin-inline-start:var(--bq-date-picker--gap)}calendar-date::part(header),calendar-multi::part(header),calendar-range::part(header){gap:var(--bq-spacing-s);justify-content:center}calendar-date::part(heading),calendar-multi::part(heading),calendar-range::part(heading){padding-block:var(--bq-spacing-xs2);padding-inline:var(--bq-spacing-xs)}calendar-date::part(button),calendar-multi::part(button),calendar-range::part(button){background-color:transparent;border-radius:var(--bq-radius--s);border-width:0;padding-block:var(--bq-spacing-xs2);padding-inline:var(--bq-spacing-xs2);transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}calendar-date::part(button):focus-visible,calendar-multi::part(button):focus-visible,calendar-range::part(button):focus-visible{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}calendar-date::part(button):hover,calendar-multi::part(button):hover,calendar-range::part(button):hover{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}calendar-date::part(container),calendar-multi::part(container),calendar-range::part(container){background-color:var(--bq-date-picker--background-color);padding-block:0;padding-inline:0}calendar-month{--color-accent:var(--bq-ui--brand)}calendar-month::part(button){align-items:center;background-color:transparent;border-radius:var(--bq-radius--s);color:var(--bq-text--primary);display:flex;font-family:var(--bq-font-family);height:var(--bq-date-picker--day-size);justify-content:center;padding-block:0;padding-inline:0;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--bq-date-picker--day-size)}calendar-month::part(button):focus-visible{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}calendar-month::part(button):hover:enabled{background-color:color-mix(in srgb,var(--bq-background--secondary),var(--bq-hover) 20%)}calendar-month::part(button):disabled{cursor:not-allowed}calendar-month::part(button day disallowed){background-color:transparent!important;cursor:not-allowed!important}calendar-month::part(button day selected){background-color:var(--bq-date-picker--range-background-color);border-radius:var(--bq-radius--s);color:var(--bq-text--alt)}calendar-month::part(button day selected):hover:enabled{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-hover) 20%)}calendar-month::part(button day selected range-inner){background-color:var(--bq-date-picker--range-inner-background-color);border-radius:var(--bq-radius--none);color:var(--bq-text--primary)}calendar-month::part(button day selected range-inner):hover{color:var(--bq-text--alt)}calendar-month::part(button day outside){color:var(--bq-text--secondary);cursor:pointer;opacity:1}calendar-month::part(today){border-color:var(--bq-date-picker--currentDate-border-color);border-radius:var(--bq-radius--s);border-style:var(--bq-date-picker--border-style);border-width:var(--bq-date-picker--currentDate-border-width)}calendar-month::part(today selected){color:var(--bq-text--alt)}calendar-month::part(today selected range-inner){color:var(--bq-text--primary)}calendar-month::part(today range-inner){border-radius:var(--bq-radius--none)}calendar-month::part(today range-start){border-end-start-radius:var(--bq-radius--none);border-radius:var(--bq-radius--s)}calendar-month::part(today range-end){border-end-end-radius:var(--bq-radius--none);border-radius:var(--bq-radius--s)}calendar-month::part(range-start){border-end-end-radius:var(--bq-radius--none);border-start-end-radius:var(--bq-radius--none)}calendar-month::part(range-end){border-end-start-radius:var(--bq-radius--none);border-start-start-radius:var(--bq-radius--none)}calendar-month::part(range-start range-end){border-radius:var(--bq-radius--s)}calendar-month::part(table){--tw-border-spacing-x:0px;--tw-border-spacing-y:0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);font-size:inherit}.focus-visible\\:focus:focus-visible{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.placeholder\\:text-\\[color\\:--bq-date-picker--text-placeholder-color\\]::placeholder{color:var(--bq-date-picker--text-placeholder-color)}.hover\\:text-alt:hover{color:var(--bq-text--alt)}.hover\\:bg-hover-ui-primary:hover{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.enabled\\:hover\\:bg-hover-secondary:hover:enabled{background-color:color-mix(in srgb,var(--bq-background--secondary),var(--bq-hover) 20%)}.enabled\\:hover\\:bg-hover-ui-brand:hover:enabled{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-hover) 20%)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.grid{display:grid}.\\!hidden{display:none!important}.hidden{display:none}.flex-wrap{flex-wrap:wrap}.gap-\\[--bq-spacing-m\\]{gap:var(--bq-spacing-m)}@media (min-width:640px){.sm\\:block{display:block}}.\\[\\&\\:\\:part\\(button\\)\\]\\:border-none::part(button){border-style:none}.\\[\\&\\:\\:part\\(button\\)\\]\\:p-0::part(button){padding:0}.\\[\\&\\:\\:part\\(panel\\)\\]\\:p-m::part(panel){padding:var(--bq-spacing-m)}.\\[\\&\\:\\:part\\(panel\\)\\]\\:is-auto::part(panel){inline-size:auto}.absolute{position:absolute}.relative{position:relative}.inline{display:inline}.text-\\[--bq-icon--color\\]{color:var(--bq-icon--color)}.bs-\\[--bq-icon--size\\]{block-size:var(--bq-icon--size)}.is-\\[--bq-icon--size\\]{inline-size:var(--bq-icon--size)}`;
+/* -------------------------------------------------------------------------- */
+/*                          Wire format parse/serialize                       */
+/* -------------------------------------------------------------------------- */
+/**
+ * Regex matching the wire-format ISO shape for each precision.
+ * The internal selection is always `YYYY-MM-DD`; these only apply at the
+ * public value boundary.
+ */
+const PRECISION_ISO_REGEX = {
+    day: /^\d{4}-\d{2}-\d{2}$/,
+    month: /^\d{4}-\d{2}$/,
+    year: /^\d{4}$/,
+};
+/** Expand a wire-format token to a full `YYYY-MM-DD` ISO date. */
+const expandToken = (token, precision) => {
+    if (precision === 'month')
+        return `${token}-01`;
+    if (precision === 'year')
+        return `${token}-01-01`;
+    return token;
+};
+/** Truncate a full `YYYY-MM-DD` ISO date to the wire-format for the precision. */
+const truncateISO = (iso, precision) => {
+    if (precision === 'month')
+        return iso.slice(0, 7);
+    if (precision === 'year')
+        return iso.slice(0, 4);
+    return iso;
+};
+/**
+ * Whether the token matches the precision-specific shape *and* is a real date.
+ * For month/year we still expand to a full ISO date so `2026-13` / `2026-02-30`
+ * style errors are caught by `isValidISO`.
+ */
+const isValidToken = (token, precision) => {
+    if (!PRECISION_ISO_REGEX[precision].test(token))
+        return false;
+    return isValidISO(expandToken(token, precision));
+};
+/**
+ * Parse a raw `value` string into an internal `TSelection` array.
+ *
+ * Wire format:
+ * - single: `YYYY-MM-DD` (or `YYYY-MM` / `YYYY` at coarser precision)
+ * - multi:  space-separated tokens
+ * - range:  `<start>/<end>`
+ *
+ * Internally the selection is always stored as full `YYYY-MM-DD` — month
+ * precision expands to the first day of the month; year precision to Jan 1st.
+ *
+ * Invalid tokens (malformed strings, impossible dates like `2026-99-99`,
+ * non-ISO input) are silently discarded — the returned selection is
+ * guaranteed to contain only valid ISO-8601 dates.
+ */
+const parseValue = (value, type, precision = 'day') => {
+    if (!value)
+        return [];
+    const trimmed = value.trim();
+    if (!trimmed)
+        return [];
+    if (type === 'range') {
+        const parts = trimmed
+            .split('/')
+            .filter((token) => isValidToken(token, precision))
+            .map((token) => expandToken(token, precision));
+        if (parts.length === 0)
+            return [];
+        if (parts.length === 1)
+            return [parts[0]];
+        const [start, end] = sortRange(parts[0], parts[1]);
+        return [start, end];
+    }
+    if (type === 'multi') {
+        const valid = trimmed
+            .split(/\s+/)
+            .filter((token) => isValidToken(token, precision))
+            .map((token) => expandToken(token, precision));
+        return Array.from(new Set(valid)).sort(compareISO);
+    }
+    return isValidToken(trimmed, precision) ? [expandToken(trimmed, precision)] : [];
+};
+/**
+ * Serialize an internal `TSelection` array back to the wire format.
+ * Truncates each entry to the precision's ISO shape.
+ */
+const serializeValue = (selection, type, precision = 'day') => {
+    if (!selection.length)
+        return '';
+    const format = (iso) => truncateISO(iso, precision);
+    if (type === 'range') {
+        if (selection.length < 2)
+            return format(selection[0] ?? '');
+        const [start, end] = sortRange(selection[0], selection[1]);
+        return `${format(start)}/${format(end)}`;
+    }
+    if (type === 'multi') {
+        return Array.from(new Set(selection.map(format)))
+            .sort(compareISO)
+            .join(' ');
+    }
+    return format(selection[0]);
+};
+/* -------------------------------------------------------------------------- */
+/*                                Predicates                                  */
+/* -------------------------------------------------------------------------- */
+/** Whether the given ISO day is included in the selection. */
+const isSelected = (iso, selection, type) => {
+    if (!selection.length)
+        return false;
+    if (type === 'range') {
+        if (selection.length < 2)
+            return iso === selection[0];
+        const [start, end] = selection;
+        return iso >= start && iso <= end;
+    }
+    return selection.includes(iso);
+};
+/** Whether the ISO day is the start of a range selection. */
+const isRangeStart = (iso, selection, type) => type === 'range' && selection.length === 2 && iso === selection[0];
+/** Whether the ISO day is the end of a range selection. */
+const isRangeEnd = (iso, selection, type) => type === 'range' && selection.length === 2 && iso === selection[1];
+/** Whether the ISO day sits strictly inside the range (not start/end). */
+const isRangeInner = (iso, selection, type) => {
+    if (type !== 'range' || selection.length < 2)
+        return false;
+    const [start, end] = selection;
+    return iso > start && iso < end;
+};
+/* -------------------------------------------------------------------------- */
+/*                               Selection ops                                */
+/* -------------------------------------------------------------------------- */
+/**
+ * Apply a click on `iso` and return the next selection.
+ *
+ * - single: always replace.
+ * - multi:  toggle (add if missing, remove if present).
+ * - range:  if there is no start OR a full range exists, start a new range;
+ *           otherwise complete the range (auto-sorted).
+ */
+const applySelection = (iso, selection, type) => {
+    if (type === 'single')
+        return [iso];
+    if (type === 'multi') {
+        return selection.includes(iso) ? selection.filter((v) => v !== iso) : [...selection, iso].sort(compareISO);
+    }
+    // range
+    if (selection.length === 0 || selection.length === 2)
+        return [iso];
+    const [start, end] = sortRange(selection[0], iso);
+    return [start, end];
+};
+/**
+ * Build the highlighted range while the user is hovering with an in-progress
+ * range selection (`tentative` = the pending start).
+ */
+const buildTentativeRange = (tentative, hovered) => {
+    if (!tentative || !hovered)
+        return [];
+    const [start, end] = sortRange(tentative, hovered);
+    return [start, end];
+};
+
+const buildCellPartList = (state) => {
+    const parts = [CALENDAR_PARTS.day];
+    if (state.selected)
+        parts.push(CALENDAR_PARTS.selected);
+    if (state.isToday)
+        parts.push(CALENDAR_PARTS.today);
+    if (state.outside)
+        parts.push(CALENDAR_PARTS.outside);
+    if (state.disallowed)
+        parts.push(CALENDAR_PARTS.disallowed);
+    if (state.outOfBounds)
+        parts.push(CALENDAR_PARTS.disabled);
+    if (state.rangeStart)
+        parts.push(CALENDAR_PARTS.rangeStart);
+    if (state.rangeEnd)
+        parts.push(CALENDAR_PARTS.rangeEnd);
+    if (state.rangeInner)
+        parts.push(CALENDAR_PARTS.rangeInner);
+    return parts.join(' ');
+};
+const computeCellState = (cell, ctx) => {
+    const disallowed = ctx.isDateDisallowed?.(cell.date) ?? false;
+    const outOfBounds = !isWithinBounds(cell.date, ctx.minISO, ctx.maxISO);
+    return {
+        outside: cell.outside,
+        disallowed,
+        outOfBounds,
+        disabled: disallowed || outOfBounds,
+        selected: isSelected(cell.iso, ctx.effectiveSelection, ctx.type),
+        rangeStart: isRangeStart(cell.iso, ctx.effectiveSelection, ctx.type),
+        rangeEnd: isRangeEnd(cell.iso, ctx.effectiveSelection, ctx.type),
+        rangeInner: isRangeInner(cell.iso, ctx.effectiveSelection, ctx.type),
+        isToday: isSameDay(cell.date, ctx.today),
+        isFocused: cell.iso === ctx.focusedISO,
+        buttonHidden: cell.outside && !ctx.showOutsideDays,
+    };
+};
+const renderCell = (cell, state, cb) => (h("td", { key: cell.iso, "aria-selected": state.selected ? 'true' : undefined, class: "bq-date-picker__td", part: CALENDAR_PARTS.td,
+    // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: WAI-ARIA date-picker grid pattern.
+    role: "gridcell", tabIndex: -1 }, h("button", { "aria-current": state.isToday ? 'date' : undefined, "aria-disabled": state.disabled ? 'true' : undefined, class: {
+        'bq-date-picker__day': true,
+        'is-selected': state.selected,
+        'is-today': state.isToday,
+        'is-outside': state.outside,
+        'is-disallowed': state.disallowed,
+        'is-out-of-bounds': state.outOfBounds,
+        'is-range-start': state.rangeStart,
+        'is-range-end': state.rangeEnd,
+        'is-range-inner': state.rangeInner,
+        'is-hidden': state.buttonHidden,
+    }, "data-iso": cell.iso, onClick: (ev) => !state.disabled && cb.onDaySelect(cell.iso, ev), onFocus: () => cb.onDayFocus(cell.iso), onMouseEnter: () => cb.onDayHover(cell.iso), onMouseLeave: () => cb.onDayHover(undefined), part: `${CALENDAR_PARTS.button} ${buildCellPartList(state)}`, tabIndex: state.isFocused ? 0 : -1, type: "button" }, cell.date.getDate())));
+/**
+ * Day-level calendar view — weekday row + 6x7 grid.
+ *
+ * The grid is a `<table role="grid">` so it is announced correctly by screen
+ * readers, and it uses a roving tabindex so only the "focused" day is in the
+ * tab order. Keyboard nav is delegated to the host via `onGridKeyDown`.
+ */
+const CalendarDayView = (props) => {
+    const { viewDate, selection, tentativeRange, focusedISO, type, locale, firstDayOfWeek, showOutsideDays, minISO, maxISO, isDateDisallowed, onDaySelect, onDayHover, onDayFocus, onGridKeyDown, } = props;
+    const weekdays = getWeekdayNames(locale, firstDayOfWeek, 'short');
+    const rows = buildMonthMatrix(viewDate, firstDayOfWeek);
+    const today = new Date();
+    // Localized "Month Year" label used to name the grid for screen readers,
+    // e.g. "July 2026". Always computed so the grid is named even when the
+    // visible heading is rendered outside this component.
+    const gridLabel = formatMonth(viewDate, locale, 'long', true);
+    // The effective selection includes the tentative range so hover states
+    // preview correctly during range selection.
+    const effectiveSelection = type === 'range' && tentativeRange.length === 2 ? tentativeRange : selection;
+    return (h("div", { class: "bq-date-picker__day-view" }, h("table", { "aria-label": gridLabel, class: "bq-date-picker__table", onKeyDown: onGridKeyDown, part: CALENDAR_PARTS.table,
+        // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: WAI-ARIA date-picker grid pattern.
+        role: "grid" }, h("thead", { part: CALENDAR_PARTS.head }, h("tr", { part: CALENDAR_PARTS.tr }, weekdays.map((wd) => (h("th", { key: wd.long, abbr: wd.long, class: "bq-date-picker__th", part: CALENDAR_PARTS.th, scope: "col" }, wd.short))))), h("tbody", null, rows.map((row) => (h("tr", { key: row[0].iso, class: "bq-date-picker__week", part: `${CALENDAR_PARTS.tr} ${CALENDAR_PARTS.week}` }, row.map((cell) => {
+        const state = computeCellState(cell, {
+            effectiveSelection,
+            type,
+            today,
+            focusedISO,
+            minISO,
+            maxISO,
+            isDateDisallowed,
+            showOutsideDays,
+        });
+        return renderCell(cell, state, { onDaySelect, onDayHover, onDayFocus });
+    }))))))));
+};
+
+/**
+ * Calendar header — previous / title / next.
+ *
+ * The header is rendered once per calendar panel. It exposes the standard
+ * `calendar__header`, `calendar__previous`, `calendar__heading`, and
+ * `calendar__next` shadow parts so consumers can theme any button.
+ */
+const CalendarHeader = ({ view, label, previousLabel, nextLabel, titleLabel, previousDisabled = false, nextDisabled = false, titleInteractive = true, onPrevious, onNext, onTitleClick, }) => (h("div", { class: "bq-date-picker__header", part: CALENDAR_PARTS.header }, h("bq-button", { appearance: "text", border: "s", class: "bq-date-picker__nav-button", disabled: previousDisabled, label: previousLabel, onlyIcon: true, onBqClick: onPrevious, part: `${CALENDAR_PARTS.button} ${CALENDAR_PARTS.previous}`, size: "small", type: "button" }, h("bq-icon", { "aria-hidden": "true", class: "bq-date-picker__nav-icon", name: "caret-left" })), h("bq-button", { appearance: "text", "aria-live": "polite", border: "s", class: {
+        'bq-date-picker__heading': true,
+        'bq-date-picker__heading--static': !titleInteractive,
+    }, "data-view": view, disabled: !titleInteractive, label: titleLabel, onBqClick: onTitleClick, part: CALENDAR_PARTS.heading, size: "small", type: "button", block: true }, label), h("bq-button", { appearance: "text", border: "s", class: "bq-date-picker__nav-button", disabled: nextDisabled, label: nextLabel, onlyIcon: true, onBqClick: onNext, part: `${CALENDAR_PARTS.button} ${CALENDAR_PARTS.next}`, size: "small", type: "button" }, h("bq-icon", { "aria-hidden": "true", class: "bq-date-picker__nav-icon", name: "caret-right" }))));
+
+/** ISO used to compare a month cell against the internal selection. */
+const monthCellISO = (year, month) => `${year}-${String(month + 1).padStart(2, '0')}-01`;
+const buildMonthParts = (state) => {
+    const parts = [CALENDAR_PARTS.month];
+    if (state.selected)
+        parts.push(CALENDAR_PARTS.monthSelected);
+    if (state.rangeStart)
+        parts.push(CALENDAR_PARTS.rangeStart);
+    if (state.rangeEnd)
+        parts.push(CALENDAR_PARTS.rangeEnd);
+    if (state.rangeInner)
+        parts.push(CALENDAR_PARTS.rangeInner);
+    if (state.disabled)
+        parts.push(CALENDAR_PARTS.disabled);
+    return parts.join(' ');
+};
+const buildMonthCellState = (year, month, focusedMonth, minISO, maxISO, selection, type) => {
+    const iso = monthCellISO(year, month);
+    const disabled = !isMonthWithinBounds(year, month, minISO, maxISO);
+    return {
+        iso,
+        disabled,
+        selected: isSelected(iso, selection, type),
+        rangeStart: isRangeStart(iso, selection, type),
+        rangeEnd: isRangeEnd(iso, selection, type),
+        rangeInner: isRangeInner(iso, selection, type),
+        isFocused: focusedMonth === month,
+    };
+};
+const chunkMonths = (months, columns) => {
+    const rows = [];
+    for (let month = 0; month < months.length; month += columns) {
+        rows.push(months.slice(month, month + columns).map((name, offset) => ({ month: month + offset, name })));
+    }
+    return rows;
+};
+const renderMonthCell = ({ month, name, state, onMonthSelect, onMonthFocus, onMonthHover }) => (
+// biome-ignore lint/a11y/useFocusableInteractive: gridcell is a structural ARIA container; focus is managed by the child <button> via roving tabindex
+h("div", { "aria-selected": state.selected ? 'true' : undefined, class: "bq-date-picker__month-gridcell", role: "gridcell", key: month }, h("button", { "aria-disabled": state.disabled ? 'true' : undefined, class: {
+        'bq-date-picker__month-cell': true,
+        'is-selected': state.selected,
+        'is-range-start': state.rangeStart,
+        'is-range-end': state.rangeEnd,
+        'is-range-inner': state.rangeInner,
+        'is-out-of-bounds': state.disabled,
+    }, "data-month": month, disabled: state.disabled, onClick: (ev) => !state.disabled && onMonthSelect(month, ev), onFocus: () => onMonthFocus(month), onMouseEnter: () => onMonthHover(state.iso), onMouseLeave: () => onMonthHover(undefined), part: `${CALENDAR_PARTS.button} ${buildMonthParts(state)}`, tabIndex: state.isFocused ? 0 : -1, type: "button" }, name)));
+/**
+ * Month picker — 12 buttons in a 3×4 grid.
+ */
+const CalendarMonthView = ({ year, focusedMonth, locale, minISO, maxISO, selection, tentativeRange, type, onMonthSelect, onMonthFocus, onMonthHover, onGridKeyDown, gridColumns, }) => {
+    const months = getMonthNames(locale, 'short');
+    const effectiveSelection = type === 'range' && tentativeRange.length === 2 ? tentativeRange : selection;
+    const rows = chunkMonths(months, gridColumns);
+    return (h("div", { class: "bq-date-picker__months", "data-grid-columns": String(gridColumns), onKeyDown: onGridKeyDown, part: CALENDAR_PARTS.months, role: "grid", tabIndex: -1 }, rows.map((row) => (
+    // biome-ignore lint/a11y/useFocusableInteractive: gridcell is a structural ARIA container; focus is managed by the child <button> via roving tabindex
+    h("div", { class: "bq-date-picker__month-row", role: "row", key: `month-row-${row.map(({ month }) => month).join('-')}` }, row.map(({ month, name }) => {
+        const state = buildMonthCellState(year, month, focusedMonth, minISO, maxISO, effectiveSelection, type);
+        return renderMonthCell({ month, name, state, onMonthSelect, onMonthFocus, onMonthHover });
+    }))))));
+};
+
+/** ISO used to compare a year cell against the internal selection. */
+const yearCellISO = (year) => `${year}-01-01`;
+const buildYearParts = (state) => {
+    const parts = [CALENDAR_PARTS.year];
+    if (state.selected)
+        parts.push(CALENDAR_PARTS.yearSelected);
+    if (state.rangeStart)
+        parts.push(CALENDAR_PARTS.rangeStart);
+    if (state.rangeEnd)
+        parts.push(CALENDAR_PARTS.rangeEnd);
+    if (state.rangeInner)
+        parts.push(CALENDAR_PARTS.rangeInner);
+    if (state.disabled)
+        parts.push(CALENDAR_PARTS.disabled);
+    return parts.join(' ');
+};
+const buildYearCellState = (year, focusedYear, minISO, maxISO, selection, type) => {
+    const iso = yearCellISO(year);
+    const disabled = !isYearWithinBounds(year, minISO, maxISO);
+    return {
+        iso,
+        disabled,
+        selected: isSelected(iso, selection, type),
+        rangeStart: isRangeStart(iso, selection, type),
+        rangeEnd: isRangeEnd(iso, selection, type),
+        rangeInner: isRangeInner(iso, selection, type),
+        isFocused: focusedYear === year,
+    };
+};
+const chunkYears = (years, columns) => {
+    const rows = [];
+    for (let index = 0; index < years.length; index += columns) {
+        rows.push(years.slice(index, index + columns));
+    }
+    return rows;
+};
+const renderYearCell = ({ year, state, onYearSelect, onYearFocus, onYearHover }) => (
+// biome-ignore lint/a11y/useFocusableInteractive: gridcell is a structural ARIA container; focus is managed by the child <button> via roving tabindex
+h("div", { "aria-selected": state.selected ? 'true' : undefined, class: "bq-date-picker__year-gridcell", key: year, role: "gridcell" }, h("button", { "aria-disabled": state.disabled ? 'true' : undefined, class: {
+        'bq-date-picker__year-cell': true,
+        'is-selected': state.selected,
+        'is-range-start': state.rangeStart,
+        'is-range-end': state.rangeEnd,
+        'is-range-inner': state.rangeInner,
+        'is-out-of-bounds': state.disabled,
+    }, "data-year": year, disabled: state.disabled, onClick: (ev) => !state.disabled && onYearSelect(year, ev), onFocus: () => onYearFocus(year), onMouseEnter: () => onYearHover(state.iso), onMouseLeave: () => onYearHover(undefined), part: `${CALENDAR_PARTS.button} ${buildYearParts(state)}`, tabIndex: state.isFocused ? 0 : -1, type: "button" }, year)));
+/**
+ * Year picker — 12 buttons for a decade grid.
+ */
+const CalendarYearView = ({ years, focusedYear, minISO, maxISO, selection, tentativeRange, type, onYearSelect, onYearFocus, onYearHover, onGridKeyDown, gridColumns, }) => {
+    const effectiveSelection = type === 'range' && tentativeRange.length === 2 ? tentativeRange : selection;
+    const rows = chunkYears(years, gridColumns);
+    return (h("div", { class: "bq-date-picker__years", "data-grid-columns": String(gridColumns), onKeyDown: onGridKeyDown, part: CALENDAR_PARTS.years, role: "grid", tabIndex: -1 }, rows.map((row) => (
+    // biome-ignore lint/a11y/useFocusableInteractive: gridcell is a structural ARIA container; focus is managed by the child <button> via roving tabindex
+    h("div", { class: "bq-date-picker__year-row", key: `year-row-${row.join('-')}`, role: "row" }, row.map((year) => {
+        const state = buildYearCellState(year, focusedYear, minISO, maxISO, effectiveSelection, type);
+        return renderYearCell({ year, state, onYearSelect, onYearFocus, onYearHover });
+    }))))));
+};
+
+/**
+ * Precision-aware, bounds-aware parser for the trigger input field.
+ * Returns the parsed date as a wire-format string at the configured
+ * precision, clamped against `min`/`max`, or `{ invalid: true }` on failure.
+ */
+const parseTypedInput = (text, locale, precision, min, max, isDateDisallowed) => {
+    const trimmed = text.trim();
+    if (!trimmed)
+        return { value: undefined };
+    const parsed = parseDateInput(trimmed, locale);
+    if (!parsed || isDateDisallowed?.(parsed))
+        return { invalid: true };
+    const iso = clampISO(toISODateString(parsed), min, max);
+    return { value: serializeValue([iso], 'single', precision) };
+};
+/**
+ * Lexically clamp a full `YYYY-MM-DD` ISO date to precision-padded bounds.
+ * Coarser bounds (`YYYY`, `YYYY-MM`) are padded to the widest matching day
+ * before comparing.
+ */
+const clampISO = (iso, min, max) => {
+    const paddedMin = padBound(min, 'min');
+    const paddedMax = padBound(max, 'max');
+    if (paddedMin && iso < paddedMin)
+        return paddedMin;
+    if (paddedMax && iso > paddedMax)
+        return paddedMax;
+    return iso;
+};
 
+/**
+ * Builds the label shown in the calendar header title button.
+ *
+ * - `days`: localized "Month Year" for a single panel, or "StartYear – EndYear"
+ *   when several months are visible at once.
+ * - `months`: the localized year currently in focus.
+ * - `years`: the closed range spanning the visible decade.
+ */
+const getHeaderLabel = ({ view, viewDate, focusedYear, decadeStart, monthCount, locale, }) => {
+    if (view === 'days') {
+        if (monthCount > 1) {
+            const first = startOfMonth(viewDate);
+            const last = startOfMonth(addMonths(viewDate, monthCount - 1));
+            const startYear = formatYear(first, locale);
+            const endYear = formatYear(last, locale);
+            return startYear === endYear ? startYear : `${startYear} – ${endYear}`;
+        }
+        return formatMonth(viewDate, locale, 'long', true);
+    }
+    if (view === 'months') {
+        return formatYear(new Date(focusedYear, 0, 1), locale);
+    }
+    const end = decadeStart + DECADE_GRID_SIZE - 1;
+    return `${decadeStart} – ${end}`;
+};
+/**
+ * Aria label announcing what clicking the title switches to.
+ * Views cycle days → months → years → back to the base view (days for
+ * `precision="day"`, months for `precision="month"`).
+ */
+const getHeaderTitleLabel = (view, precision = 'day') => {
+    if (view === 'days')
+        return DEFAULT_ARIA_LABELS.chooseMonth;
+    if (view === 'months')
+        return DEFAULT_ARIA_LABELS.chooseYear;
+    return precision === 'month' ? DEFAULT_ARIA_LABELS.chooseMonth : DEFAULT_ARIA_LABELS.chooseDate;
+};
+/** Aria label for the "previous" navigation button, per view. */
+const getPreviousLabel = (view) => {
+    if (view === 'days')
+        return DEFAULT_ARIA_LABELS.previousMonth;
+    if (view === 'months')
+        return DEFAULT_ARIA_LABELS.previousYear;
+    return DEFAULT_ARIA_LABELS.previousDecade;
+};
+/** Aria label for the "next" navigation button, per view. */
+const getNextLabel = (view) => {
+    if (view === 'days')
+        return DEFAULT_ARIA_LABELS.nextMonth;
+    if (view === 'months')
+        return DEFAULT_ARIA_LABELS.nextYear;
+    return DEFAULT_ARIA_LABELS.nextDecade;
+};
+
+/**
+ * Advances a focused month cursor by `delta` months, carrying over to the
+ * previous or next year as needed. Pure — accepts and returns primitives so
+ * it can be unit-tested and reused by keyboard handlers.
+ */
+const advanceFocusedMonth = (focusedMonth, focusedYear, delta) => {
+    let month = focusedMonth + delta;
+    let year = focusedYear;
+    while (month < 0) {
+        month += 12;
+        year -= 1;
+    }
+    while (month > 11) {
+        month -= 12;
+        year += 1;
+    }
+    return { month, year };
+};
+/**
+ * Advances a focused year cursor by `delta` years, sliding the visible
+ * decade grid so the focused year always stays in view.
+ */
+const advanceFocusedYear = (focusedYear, decadeStart, delta) => {
+    const year = focusedYear + delta;
+    let nextDecadeStart = decadeStart;
+    if (year < decadeStart) {
+        nextDecadeStart = decadeStart - DECADE_GRID_SIZE;
+    }
+    else if (year > decadeStart + DECADE_GRID_SIZE - 1) {
+        nextDecadeStart = decadeStart + DECADE_GRID_SIZE;
+    }
+    return { year, decadeStart: nextDecadeStart };
+};
+/**
+ * Number of columns used to render the months/years grids. The grids widen
+ * from 3 → 4 columns when multiple months are visible, so vertical arrow
+ * navigation stride must match.
+ */
+const getGridColumns = (monthCount) => (monthCount > 1 ? 4 : 3);
+
+/**
+ * Normalizes a raw public `value` string against the current picker `type`
+ * and `precision`.
+ *
+ * Runs the value through `parseValue`/`serializeValue` so any invalid ISO
+ * tokens are dropped before the value ever reaches the form, the display
+ * input, or the visible selection. Returns `undefined` when normalization
+ * leaves an empty string, so callers can distinguish "no value" from "empty
+ * string value".
+ */
+const normalizeValue = (raw, type, precision = 'day') => {
+    const serialized = serializeValue(parseValue(raw, type, precision), type, precision);
+    return serialized === '' ? undefined : serialized;
+};
+/** Whether a value string is present and non-empty — used to drive UI affordances. */
+const computeHasValue = (value) => isDefined(value) && `${value}`.length > 0;
+/**
+ * Formats the current value for display in the trigger input. Thin wrapper
+ * around `formatDisplayValue` that accepts `undefined` and coerces to an
+ * empty string, so callers don't have to repeat the null check.
+ *
+ * Precision-agnostic: internally the selection is stored as full ISO dates
+ * (the first day of the month / January 1st for coarser precisions), so
+ * `Intl.DateTimeFormat(locale, formatOptions)` produces the right label
+ * whether the user asked for `{ year: 'numeric' }` or `{ dateStyle: 'full' }`.
+ */
+const computeDisplayDate = (value, type, locale, formatOptions, precision = 'day') => {
+    // Expand precision-truncated wire values back to full ISO so
+    // `formatDisplayValue` (which expects YYYY-MM-DD) can parse them.
+    const expanded = serializeValue(parseValue(value ?? '', type, precision), type, 'day');
+    return formatDisplayValue(expanded, type, locale, formatOptions);
+};
+/**
+ * Default `Intl.DateTimeFormat` options per precision.
+ * Applied when the consumer hasn't explicitly overridden `formatOptions`, so
+ * a `precision="month"` picker doesn't show "1 May 2026".
+ */
+const DEFAULT_FORMAT_OPTIONS_BY_PRECISION = {
+    day: { day: 'numeric', month: 'short', year: 'numeric' },
+    month: { month: 'long', year: 'numeric' },
+    year: { year: 'numeric' },
+};
+
+const bqDatePickerCss = () => `.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{text-size-adjust:none;font-family:var(--bq-font-family);font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);line-height:var(--bq-font-line-height--regular);min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:where(:root){--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:"Outfit",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq:not([bq-mode]),.light,:root:not([bq-theme]):not([bq-mode]),:root[bq-theme=beeq]:not([bq-mode]),[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}:where(.endava),:where([bq-theme=endava]){--bq-font-family:"Poppins",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,.endava:not([bq-mode]),[bq-theme=endava]:not([bq-mode]),[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.block{display:block}.flex{display:flex}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-date-picker--background-color:var(--bq-ui--primary);--bq-date-picker--border-color:var(--bq-stroke--tertiary);--bq-date-picker--border-color-disabled:var(--bq-stroke--secondary);--bq-date-picker--border-color-focus:var(--bq-stroke--brand);--bq-date-picker--border-radius:var(--bq-radius--s);--bq-date-picker--border-style:solid;--bq-date-picker--border-width:1px;--bq-date-picker--currentDate-border-color:var(--bq-stroke--brand);--bq-date-picker--currentDate-border-width:2px;--bq-date-picker--day-size:2.25rem;--bq-date-picker--gap:var(--bq-spacing-xs);--bq-date-picker--header-title-color:var(--bq-text--primary);--bq-date-picker--icon-size:1.5rem;--bq-date-picker--label-margin-bottom:var(--bq-spacing-xs);--bq-date-picker--label-text-color:var(--bq-text--primary);--bq-date-picker--label-text-size:0.875rem;--bq-date-picker--padding-end:var(--bq-spacing-m);--bq-date-picker--padding-start:var(--bq-spacing-m);--bq-date-picker--paddingY:var(--bq-spacing-s);--bq-date-picker--range-background-color:var(--bq-ui--brand);--bq-date-picker--range-inner-background-color:var(--bq-ui--brand-alt);--bq-date-picker--row-gap:0.125rem;--bq-date-picker--text-color:var(--bq-text--primary);--bq-date-picker--text-placeholder-color:var(--bq-text--secondary);--bq-date-picker--text-size:1rem;--bq-date-picker--view-cell-background-hover:var(--bq-ui--secondary);--bq-date-picker--view-cell-background-selected:var(--bq-ui--brand);--bq-date-picker--view-cell-height:2.75rem;--bq-date-picker--view-cell-radius:0.5rem;--bq-date-picker--view-cell-text-selected:var(--bq-text--alt);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;inline-size:100%}.bq-date-picker__label.is-hidden,.bq-date-picker__prefix.is-hidden{display:none}.bq-date-picker__label{-webkit-box-align:center;-ms-flex-align:center;-webkit-margin-after:var(--bq-date-picker--label-margin-bottom);align-items:center;color:var(--bq-date-picker--label-text-color);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:var(--bq-date-picker--label-text-size);gap:var(--bq-date-picker--gap);margin-block-end:var(--bq-date-picker--label-margin-bottom)}.bq-date-picker__dropdown{display:block;inline-size:100%}.bq-date-picker__dropdown::part(panel){--bq-panel--width:max-content;block-size:auto;inline-size:-webkit-max-content;inline-size:-moz-max-content;inline-size:max-content;max-inline-size:min(100vw - 2rem,100vw);padding:1rem}.bq-date-picker__control{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--bq-date-picker--background-color);border:var(--bq-date-picker--border-width) var(--bq-date-picker--border-style) var(--bq-date-picker--border-color);border-radius:var(--bq-date-picker--border-radius);color:var(--bq-date-picker--text-color);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:var(--bq-date-picker--text-size);inline-size:100%;padding-block:var(--bq-date-picker--paddingY);padding-inline:var(--bq-date-picker--padding-start) var(--bq-date-picker--padding-end);-webkit-transition:border-color .15s ease,-webkit-box-shadow .15s ease;transition:border-color .15s ease,-webkit-box-shadow .15s ease;transition:border-color .15s ease,box-shadow .15s ease;transition:border-color .15s ease,box-shadow .15s ease,-webkit-box-shadow .15s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bq-date-picker__control:not(.is-disabled,:focus-within,.is-open):hover{border-color:color-mix(in srgb,var(--bq-date-picker--border-color-focus),var(--bq-hover) 20%)}.bq-date-picker__control:not(.is-disabled):is(:focus-within,.is-open){--bq-ring-width:1px;--bq-ring-offset-width:0;--bq-ring-color-focus:var(--bq-focus);border-color:var(--bq-focus);outline:var(--bq-ring-width) solid var(--bq-ring-color-focus);outline-offset:var(--bq-ring-offset-width)}.bq-date-picker__control.is-disabled{--bq-date-picker--border-color:var(--bq-date-picker--border-color-disabled);cursor:not-allowed;opacity:.6}.bq-date-picker__control.validation-error,.bq-date-picker__control.validation-success,.bq-date-picker__control.validation-warning{--bq-date-picker--border-color:var(--bq-date-picker--validation-color)}.bq-date-picker__control.validation-error:not(.is-disabled,:focus-within,.is-open):hover,.bq-date-picker__control.validation-success:not(.is-disabled,:focus-within,.is-open):hover,.bq-date-picker__control.validation-warning:not(.is-disabled,:focus-within,.is-open):hover{border-color:color-mix(in srgb,var(--bq-date-picker--validation-color),var(--bq-hover) 20%)}.bq-date-picker__control.validation-error:not(.is-disabled):is(:focus-within,.is-open),.bq-date-picker__control.validation-success:not(.is-disabled):is(:focus-within,.is-open),.bq-date-picker__control.validation-warning:not(.is-disabled):is(:focus-within,.is-open){--bq-ring-color-focus:var(--bq-date-picker--validation-color);border-color:color-mix(in srgb,var(--bq-date-picker--validation-color),var(--bq-active) 20%)}.bq-date-picker__control.validation-error{--bq-date-picker--validation-color:var(--bq-stroke--danger)}.bq-date-picker__control.validation-success{--bq-date-picker--validation-color:var(--bq-stroke--success)}.bq-date-picker__control.validation-warning{--bq-date-picker--validation-color:var(--bq-stroke--warning)}.bq-date-picker__input{-webkit-box-flex:1;background:transparent;border:none;color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;font:inherit;font-size:inherit;margin:0;min-inline-size:0;padding:0}.bq-date-picker__input::-webkit-input-placeholder{color:var(--bq-date-picker--text-placeholder-color)}.bq-date-picker__input::-moz-placeholder{color:var(--bq-date-picker--text-placeholder-color)}.bq-date-picker__input:-ms-input-placeholder{color:var(--bq-date-picker--text-placeholder-color)}.bq-date-picker__input::-ms-input-placeholder{color:var(--bq-date-picker--text-placeholder-color)}.bq-date-picker__input::placeholder{color:var(--bq-date-picker--text-placeholder-color)}.bq-date-picker__input:focus,.bq-date-picker__input:focus-visible{outline:none}.bq-date-picker__prefix{-webkit-box-align:center;-ms-flex-align:center;-webkit-margin-end:var(--bq-date-picker--gap);align-items:center;color:var(--bq-date-picker--text-color);margin-inline-end:var(--bq-date-picker--gap);pointer-events:none}.bq-date-picker__prefix,.bq-date-picker__prefix bq-icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.bq-date-picker__prefix bq-icon{font-size:var(--bq-date-picker--icon-size)}.bq-date-picker__calendar-trigger,.bq-date-picker__clear{-webkit-margin-start:var(--bq-date-picker--gap);margin-inline-start:var(--bq-date-picker--gap)}.bq-date-picker__calendar-trigger::part(button),.bq-date-picker__clear::part(button){--bq-ring-width:initial;--bq-ring-offset-width:initial;border:none;padding:0}.bq-date-picker__calendar-trigger bq-icon,.bq-date-picker__clear bq-icon{display:-webkit-box;display:-ms-flexbox;display:flex}.bq-date-picker__clear{display:none}.bq-date-picker__control:is(:hover,:focus-within,.is-open):not(.is-disabled) .bq-date-picker__clear{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.bq-date-picker__calendar-trigger{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.bq-date-picker__calendar{-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--bq-date-picker--background-color);color:var(--bq-date-picker--text-color);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:.75rem;min-inline-size:17.5rem}.bq-date-picker__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:grid;gap:.25rem;grid-template-columns:auto 1fr auto}.bq-date-picker__nav-button::part(button){block-size:2rem;inline-size:2rem}.bq-date-picker__heading::part(button){font-weight:600}.bq-date-picker__heading--static{pointer-events:none}.bq-date-picker__panels{-webkit-box-orient:horizontal;-webkit-box-align:start;-ms-flex-align:start;-webkit-box-pack:center;-ms-flex-pack:center;align-items:flex-start;-ms-flex-flow:row wrap;flex-flow:row wrap;gap:1rem;justify-content:center}.bq-date-picker__panel,.bq-date-picker__panels{-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex}.bq-date-picker__panel{-webkit-box-orient:vertical;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-direction:column;flex-direction:column;gap:.5rem}.bq-date-picker__month-label{color:var(--bq-date-picker--header-title-color);font-weight:600;text-align:center}@media (width <= 40rem){.bq-date-picker__panels{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}}.bq-date-picker__table{border-collapse:collapse;border-spacing:0;font-size:inherit;inline-size:100%}.bq-date-picker__th{color:var(--bq-date-picker--text-placeholder-color);font-size:.75rem;font-weight:500;padding-block:.25rem;text-align:center;text-transform:uppercase}.bq-date-picker__td{padding:0;padding-block:var(--bq-date-picker--row-gap);text-align:center}.bq-date-picker__day{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:transparent;block-size:var(--bq-date-picker--day-size);border:none;border-radius:var(--bq-date-picker--view-cell-radius);color:inherit;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font:inherit;inline-size:var(--bq-date-picker--day-size);justify-content:center;padding:0;-webkit-transition:background-color .15s ease,color .15s ease;transition:background-color .15s ease,color .15s ease}.bq-date-picker__day:hover:not([aria-disabled=true],.is-selected){background-color:var(--bq-date-picker--view-cell-background-hover)}.bq-date-picker__day:focus-visible{outline:2px solid var(--bq-date-picker--border-color-focus);outline-offset:-2px}.bq-date-picker__day.is-disallowed,.bq-date-picker__day.is-out-of-bounds,.bq-date-picker__day[aria-disabled=true]{cursor:not-allowed;opacity:.35}.bq-date-picker__day.is-outside{color:var(--bq-date-picker--text-placeholder-color)}.bq-date-picker__day.is-hidden{pointer-events:none;visibility:hidden}.bq-date-picker__day.is-today:not(.is-selected){border:var(--bq-date-picker--currentDate-border-width) var(--bq-date-picker--border-style) var(--bq-date-picker--currentDate-border-color)}.bq-date-picker__day.is-selected{color:var(--bq-date-picker--view-cell-text-selected)}.bq-date-picker__day.is-selected,.bq-date-picker__day.is-selected:hover:not([aria-disabled=true]){background-color:var(--bq-date-picker--view-cell-background-selected)}.bq-date-picker__day.is-range-inner{background-color:var(--bq-date-picker--range-inner-background-color);border-radius:0;color:var(--bq-date-picker--text-color)}.bq-date-picker__day.is-range-start{border-end-end-radius:0;border-start-end-radius:0}.bq-date-picker__day.is-range-end,.bq-date-picker__day.is-range-start{background-color:var(--bq-date-picker--range-background-color);color:var(--bq-date-picker--view-cell-text-selected)}.bq-date-picker__day.is-range-end{border-end-start-radius:0;border-start-start-radius:0}.bq-date-picker__day.is-range-start.is-range-end{border-radius:var(--bq-date-picker--view-cell-radius)}.bq-date-picker__view{min-inline-size:calc(var(--bq-date-picker--panel-count, 1)*var(--bq-date-picker--day-size)*7 + max(0,var(--bq-date-picker--panel-count, 1) - 1)*1rem)}.bq-date-picker__months,.bq-date-picker__years{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:.5rem;padding-block:.5rem}.bq-date-picker__month-row,.bq-date-picker__year-row{display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr)}.bq-date-picker__months[data-grid-columns="4"] .bq-date-picker__month-row,.bq-date-picker__years[data-grid-columns="4"] .bq-date-picker__year-row{grid-template-columns:repeat(4,1fr)}.bq-date-picker__month-gridcell,.bq-date-picker__year-gridcell{min-inline-size:0}@media (width <= 40rem){.bq-date-picker__view{min-inline-size:auto}}.bq-date-picker__month-cell,.bq-date-picker__year-cell{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:transparent;block-size:var(--bq-date-picker--view-cell-height);border:none;border-radius:var(--bq-date-picker--view-cell-radius);color:inherit;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font:inherit;inline-size:100%;justify-content:center;padding-block:.5rem;padding-inline:.5rem;-webkit-transition:background-color .15s ease,color .15s ease;transition:background-color .15s ease,color .15s ease}.bq-date-picker__month-cell:hover:not(:disabled,.is-selected),.bq-date-picker__year-cell:hover:not(:disabled,.is-selected){background-color:var(--bq-date-picker--view-cell-background-hover)}.bq-date-picker__month-cell:focus-visible,.bq-date-picker__year-cell:focus-visible{outline:2px solid var(--bq-date-picker--border-color-focus);outline-offset:1px}.bq-date-picker__month-cell.is-selected,.bq-date-picker__year-cell.is-selected{background-color:var(--bq-date-picker--view-cell-background-selected);color:var(--bq-date-picker--view-cell-text-selected)}.bq-date-picker__month-cell.is-range-inner,.bq-date-picker__year-cell.is-range-inner{background-color:var(--bq-date-picker--range-inner-background-color);color:var(--bq-date-picker--text-color)}.bq-date-picker__month-cell.is-out-of-bounds,.bq-date-picker__month-cell:disabled,.bq-date-picker__year-cell.is-out-of-bounds,.bq-date-picker__year-cell:disabled{cursor:not-allowed;opacity:.35}@media (prefers-reduced-motion:reduce){.bq-date-picker__control,.bq-date-picker__day,.bq-date-picker__month-cell,.bq-date-picker__year-cell{-webkit-transition:none;transition:none}}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.table{display:table}.grid{display:grid}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.ms-\\[--bq-date-picker--gap\\]{margin-inline-start:var(--bq-date-picker--gap)}.\\!hidden{display:none!important}.hidden{display:none}.\\[\\&\\:\\:part\\(button\\)\\]\\:border-none::part(button){border-style:none}.\\[\\&\\:\\:part\\(button\\)\\]\\:p-0::part(button){padding:0}`;
+
+/** Compose the default constraint-validation message for a set of flags. */
+const defaultValidityMessage = (flags) => {
+    if (flags.badInput)
+        return 'Please, input or select a valid date';
+    if (flags.rangeUnderflow && flags.rangeOverflow)
+        return 'Selected value is outside the allowed range';
+    if (flags.rangeUnderflow)
+        return 'Selected value is before the minimum';
+    return 'Selected value is after the maximum';
+};
 const BqDatePicker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -129,6 +960,7 @@ const BqDatePicker = class {
         this.bqChange = createEvent(this, "bqChange");
         this.bqClear = createEvent(this, "bqClear");
         this.bqFocus = createEvent(this, "bqFocus");
+        this.bqViewChange = createEvent(this, "bqViewChange");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -139,12 +971,24 @@ const BqDatePicker = class {
     }
     // Own Properties
     // ====================
-    callyElem;
+    /**
+     * Memoized parsed selection. Key encodes both `value` and `type` so cache
+     * misses invalidate correctly. Value derives from `value`; not promoted to
+     * `@State()` to preserve a single source of truth.
+     */
+    cachedSelection;
+    /** Sticky flag: last typed input couldn't be parsed. Cleared on next successful commit or `clear()`. */
+    hasBadInput = false;
+    /** Initial `value` captured at load time, restored on form reset. */
+    initialValue;
     inputElem;
-    isInternalUpdate = false;
+    /** Set while `commitSelection` writes back to `this.value`. */
+    isCommittingSelection = false;
     labelElem;
+    /** Pending requestAnimationFrame id used by `focusButton`. */
+    pendingFocusRAF;
     prefixElem;
-    suffixElem;
+    triggerBtnElem;
     // Reference to host HTML element
     // ===================================
     internals;
@@ -152,158 +996,275 @@ const BqDatePicker = class {
     // State() variables
     // Inlined decorator, alphabetical order
     // =======================================
-    isCallyLoaded = false;
-    focusedDate;
+    decadeStart = getDecadeStart(new Date().getFullYear());
     displayDate;
+    focusedISO = getTodayISO();
+    focusedMonth = new Date().getMonth();
+    focusedYear = new Date().getFullYear();
+    hasConstraintError = false;
     hasLabel = false;
     hasPrefix = false;
-    hasRangeEnd = false;
-    hasSuffix = false;
     hasValue = false;
+    tentativeHover;
+    view = 'days';
+    viewDate = new Date();
     // Public Property API
     // ========================
-    /** If `true`, the Date picker input will be focused on component render */
-    autofocus;
-    /** The clear button aria label */
+    /** If `true`, the Date picker input will be focused on component render. */
+    autofocus = false;
+    /** The clear button aria label. */
     clearButtonLabel = 'Clear value';
-    /** If `true`, the clear button won't be displayed */
+    /** The aria-label for the calendar trigger button. */
+    calendarButtonLabel = 'Open calendar';
+    /** If `true`, the clear button won't be displayed. */
     disableClear = false;
-    /**
-     * Indicates whether the Date picker input is disabled or not.
-     * If `true`, the Date picker is disabled and cannot be interacted with.
-     */
+    /** Indicates whether the Date picker input is disabled or not. */
     disabled = false;
-    /** Represents the distance (gutter or margin) between the Date picker panel and the input element. */
+    /** Distance (gutter) between the Date picker panel and the input element. */
     distance = 8;
-    /** The first day of the week, where Sunday is 0, Monday is 1, etc */
+    /** The first day of the week, where Sunday is 0, Monday is 1, etc. */
     firstDayOfWeek = 1;
-    /** The options to use when formatting the displayed value.
-     * Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
+    /**
+     * Options used when formatting the displayed value.
+     *
+     * When omitted, sensible defaults are picked based on `precision`:
+     * - `day`   → `{ day: 'numeric', month: 'short', year: 'numeric' }`
+     * - `month` → `{ month: 'long', year: 'numeric' }`
+     * - `year`  → `{ year: 'numeric' }`
      */
-    formatOptions = {
-        day: 'numeric',
-        month: 'short',
-        year: 'numeric',
-    };
-    /** The ID of the form that the Date picker input belongs to. */
+    formatOptions;
+    /** The ID of the form the input belongs to. */
     form;
-    /** The native form validation message (mandatory if `required` is set) */
+    /** Native form validation message (mandatory if `required` is set). */
     formValidationMessage;
-    /** A function that takes a date and returns true if the date should not be selectable */
+    /** The view opened first when the panel becomes visible. */
+    initialView = 'days';
+    /** Predicate that marks specific dates as unselectable. */
     isDateDisallowed;
-    /** The locale for formatting dates. If not set, will use the browser's locale.
-     * Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument
-     */
+    /** Locale used for formatting dates. */
     locale = 'en-GB';
-    /** The latest date that can be selected */
+    /** Latest date that can be selected (ISO). */
     max;
-    /** The earliest date that can be selected */
+    /** Earliest date that can be selected (ISO). */
     min;
-    /** Number of months to show when range is `true` */
-    months;
     /**
-     * Specifies how the next/previous buttons should navigate the calendar.
-     * - single: The buttons will navigate by a single month at a time.
-     * - months: The buttons will navigate by the number of months displayed per view.
+     * Number of months to show side by side (range / multi). Capped at 2.
+     * Larger values are silently clamped to keep the popover from overflowing
+     * the viewport and to preserve keyboard navigation semantics.
+     */
+    months = 1;
+    /**
+     * How the next/previous buttons should navigate the calendar.
+     * - single: navigate one month at a time.
+     * - months: navigate by the number of months displayed.
      */
     monthsPerView = 'single';
     /** The Date picker input name. */
     name;
-    /** If `true`, the Date picker panel will be visible. */
+    /** If `true`, the panel is visible. */
     open = false;
-    /** When set, it will override the height of the Date picker panel. */
+    /** Overrides the height of the Date picker panel. */
     panelHeight = 'auto';
-    /** The Date picker input placeholder text value */
+    /** Placeholder text shown when no value is selected. */
     placeholder;
-    /** Position of the Date picker panel */
+    /** Position of the Date picker panel. */
     placement = 'bottom-end';
-    /** Indicates whether or not the Date picker input is required to be filled out before submitting the form. */
-    required;
-    /** Represents the skidding between the Date picker panel and the input element. */
+    /**
+     * Precision of the value produced by the picker.
+     *
+     * - `day`   → `YYYY-MM-DD` (default). Standard drill-down.
+     * - `month` → `YYYY-MM`. Selection commits on the months view; no days view.
+     * - `year`  → `YYYY`. Selection commits on the years view; no months/days view.
+     *
+     * When precision is coarser than day, `initialView` is forced to match and
+     * the header title cycles through the views available for that precision.
+     */
+    precision = 'day';
+    /** Whether a value must be selected before submitting the form. */
+    required = false;
+    /** Skidding between the panel and the input element. */
     skidding = 0;
-    /** Whether to show days outside the month */
+    /** Whether to render days outside the current month. */
     showOutsideDays = false;
-    /** Defines the strategy to position the Date picker panel */
+    /** Positioning strategy for the panel. */
     strategy = 'fixed';
-    /** The date that is tentatively selected e.g. the start of a range selection  */
-    tentative;
-    /** It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection */
+    /**
+     * Selection type.
+     * - `single`: single date.
+     * - `multi`: multiple discrete dates.
+     * - `range`: contiguous range.
+     */
     type = 'single';
+    /** Validation state applied to the input. */
+    validationStatus = 'none';
     /**
-     * The validation status of the Select input.
+     * Currently selected value, in the precision-aware wire format:
+     * - `precision="day"`   → tokens are `YYYY-MM-DD`
+     * - `precision="month"` → tokens are `YYYY-MM`
+     * - `precision="year"`  → tokens are `YYYY`
      *
-     * @remarks
-     * This property is used to indicate the validation status of the select input. It can be set to one of the following values:
-     * - `'none'`: No validation status is set.
-     * - `'error'`: The input has a validation error.
-     * - `'warning'`: The input has a validation warning.
-     * - `'success'`: The input has passed validation.
+     * How multiple tokens are combined depends on `type`:
+     * - `single` → a single token (e.g. `"2025-05-15"`, `"2025-05"`, `"2025"`)
+     * - `range`  → `"start/end"` — two tokens joined with `/`
+     * - `multi`  → space-separated tokens (e.g. `"2025-05-15 2025-05-20"`)
      */
-    validationStatus = 'none';
-    /** The select input value represents the currently selected date or range and can be used to reset the field to a previous value.
-     * All dates are expected in ISO-8601 format (YYYY-MM-DD). */
     value;
     // Prop lifecycle events
     // =======================
     handleValueChange(newValue, oldValue) {
         if (newValue === oldValue)
             return;
-        const { formatOptions, internals, isCallyLoaded, locale, type } = this;
-        if (!isCallyLoaded)
+        // Normalize invalid tokens before propagating to the form or the UI so
+        // consumers can't submit an invalid wire value while the display shows
+        // nothing. If normalization rewrote the value, reflect it back on the
+        // prop and let the follow-up watcher tick handle the normalized string.
+        const normalized = normalizeValue(newValue, this.type, this.precision);
+        if (normalized !== newValue) {
+            this.value = normalized;
             return;
-        internals.setFormValue(!isNil(newValue) ? `${newValue}` : undefined);
-        this.updateFormValidity();
-        this.hasValue = isDefined(newValue);
-        this.displayDate = formatDisplayValue(newValue, type, locale, formatOptions);
-        this.setFocusedDate();
+        }
+        this.hasBadInput = false;
+        this.syncDerivedFromValue();
+        if (this.isCommittingSelection)
+            return;
+        this.syncViewToValue();
+    }
+    handleFormattingChange() {
+        // Re-format the display without re-parsing the wire value.
+        this.hasValue = computeHasValue(this.value);
+        this.displayDate = computeDisplayDate(this.value, this.type, this.locale, this.effectiveFormatOptions, this.precision);
+    }
+    handleTypeChange() {
+        // `type` affects wire-format parsing, display formatting, and validity.
+        // Re-normalize the current value against the new type; if that rewrites
+        // the value, the `value` watcher takes over. Otherwise refresh derived
+        // state and re-sync the visible calendar range.
+        const normalized = normalizeValue(this.value, this.type, this.precision);
+        if (normalized !== this.value) {
+            this.value = normalized;
+            return;
+        }
+        this.syncDerivedFromValue();
+        this.syncViewToValue();
+    }
+    handlePrecisionChange() {
+        validatePropValue(DATE_PRECISION, 'day', this.el, 'precision');
+        // Precision affects both wire format and default view. Force the calendar
+        // to open on the matching view and re-normalize the current value so
+        // trailing day/month segments are dropped or padded consistently.
+        this.view = this.precisionToView(this.precision);
+        const normalized = normalizeValue(this.value, this.type, this.precision);
+        if (normalized !== this.value) {
+            this.value = normalized;
+            return;
+        }
+        this.syncDerivedFromValue();
+        this.syncViewToValue();
+    }
+    handleBoundsChange() {
+        this.syncValidity();
+        this.syncViewToValue();
+    }
+    handleRequiredChange() {
+        this.syncValidity();
     }
     checkPropValues() {
         validatePropValue(DATE_PICKER_TYPE, 'single', this.el, 'type');
+        validatePropValue(CALENDAR_VIEW, 'days', this.el, 'initialView');
+        validatePropValue(DATE_PRECISION, 'day', this.el, 'precision');
+        validatePropValue(MONTHS_PER_VIEW, 'single', this.el, 'monthsPerView');
+        validatePropValue(FLOATING_STRATEGY, 'fixed', this.el, 'strategy');
+        validatePropValue(FLOATING_PLACEMENT, 'bottom-end', this.el, 'placement');
+        validatePropValue(INPUT_VALIDATION, 'none', this.el, 'validationStatus');
+        validatePropValue(DAYS_OF_WEEK, 1, this.el, 'firstDayOfWeek');
+    }
+    handleMonthsChange() {
+        // Clamp `months` to an integer in [1, MAX_MONTHS_PER_VIEW]. Non-single
+        // pickers may show 1..MAX side-by-side; single pickers ignore the value
+        // in `getMonthCount()`, so we still clamp defensively to keep the prop
+        // reflected value predictable.
+        const clamped = this.clampMonths(this.months);
+        if (clamped !== this.months)
+            this.months = clamped;
+    }
+    handleOpen(open) {
+        if (!open) {
+            this.tentativeHover = undefined;
+            // Return focus to the calendar trigger button after closing the panel,
+            // so keyboard users don't lose their position in the document.
+            requestAnimationFrame(() => this.triggerBtnElem?.shadowRoot?.querySelector('button')?.focus());
+            return;
+        }
+        // Precision locks the initial view; otherwise honor the consumer-provided one.
+        this.view = this.precision === 'day' ? this.initialView : this.precisionToView(this.precision);
+        this.syncViewToValue();
+        // Move keyboard focus into the calendar so screen-reader / keyboard users
+        // land on the focused day (or the equivalent focused cell for
+        // months/years views). Non-modal popup: focus is *moved*, not trapped.
+        this.focusActiveCell();
+    }
+    handleViewChange(next, prev) {
+        if (next === prev)
+            return;
+        this.bqViewChange.emit({ view: next, el: this.el });
     }
     // Events section
     // Requires JSDocs for public API documentation
     // ==============================================
-    /** Callback handler emitted when the input loses focus */
+    /** Callback handler emitted when the input loses focus. */
     bqBlur;
     /**
-     * Callback handler emitted when the input value has changed and the input loses focus.
-     * This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.
+     * Callback handler emitted when the input value changes.
      */
     bqChange;
-    /** Callback handler emitted when the input value has been cleared */
+    /** Callback handler emitted when the value is cleared. */
     bqClear;
-    /** Callback handler emitted when the input has received focus */
+    /** Callback handler emitted when the input receives focus. */
     bqFocus;
+    /**
+     * Callback handler emitted when the internal calendar view changes
+     * (e.g. from `days` to `months`, or from `years` back to `days`).
+     */
+    bqViewChange;
     // Component lifecycle events
     // Ordered by their natural call order
     // =====================================
-    async componentWillLoad() {
-        if (!isClient() || this.isCallyLoaded)
-            return;
-        try {
-            await loadCallyLibrary();
-            this.isCallyLoaded = isCallyLibraryLoaded();
-        }
-        catch (error) {
-            console.error(error);
-        }
+    componentWillLoad() {
+        this.initialValue = this.value;
+        // Precision locks the initial view when set. Otherwise honor `initialView`.
+        // When the picker is rendered with `open` already true, `handleOpen` never
+        // fires — apply the preference here so the initial paint respects it.
+        this.view = this.precision === 'day' ? this.initialView : this.precisionToView(this.precision);
+        this.checkPropValues();
+        this.handleMonthsChange();
+        this.syncViewToValue();
     }
     componentDidLoad() {
         this.handleSlotChange();
         this.handleValueChange(this.value, undefined);
+        if (this.autofocus)
+            this.inputElem?.focus();
+        // `@Watch('open')` doesn't run for the initial prop value, so pickers
+        // rendered with `open` never move focus into the calendar. Do it here.
+        if (this.open)
+            this.focusActiveCell();
     }
-    componentDidRender() {
-        if (this.isInternalUpdate) {
-            this.isInternalUpdate = false;
+    disconnectedCallback() {
+        if (this.pendingFocusRAF !== undefined) {
+            cancelAnimationFrame(this.pendingFocusRAF);
+            this.pendingFocusRAF = undefined;
         }
     }
     formAssociatedCallback() {
-        this.updateFormValidity();
+        this.syncValidity();
     }
     formResetCallback() {
-        if (isNil(this.value))
+        // Native form reset should restore the value the field had when the form
+        // was first parsed, not blank it. The `value` watcher takes care of
+        // syncing derived state, form value, and validity.
+        if (this.value === this.initialValue)
             return;
-        this.clear();
+        this.value = this.initialValue;
     }
     // Listeners
     // ==============
@@ -315,15 +1276,6 @@ const BqDatePicker = class {
             return;
         this.open = open;
     }
-    handleClickOutside(ev) {
-        const { open, type, hasRangeEnd } = this;
-        if (!open || type !== 'range' || ev.button !== 0)
-            return;
-        if (isEventTargetChildOfElement(ev, this.el) || hasRangeEnd)
-            return;
-        this.tentative = undefined;
-        this.hasRangeEnd = false;
-    }
     // Public methods API
     // These methods are exposed on the host element.
     // Always use two lines.
@@ -331,255 +1283,631 @@ const BqDatePicker = class {
     // Requires JSDocs for public API documentation.
     // ===============================================
     /**
-     * Clears the selected value.
-     * @returns {Promise<void>}
+     * Clears the selected value and any pending validation state (bad input,
+     * bounds overflow). Emits `bqClear`. No-op when the component is disabled.
+     *
+     * @returns A promise that resolves once the value has been cleared.
      */
     async clear() {
         if (this.disabled)
             return;
-        this.value = undefined;
-        this.internals.setFormValue(undefined);
+        this.clearValue();
         this.bqClear.emit(this.el);
     }
     // Local methods
     // Internal business logic.
     // These methods cannot be called from the host element.
     // =======================================================
-    /**
-     * Handles the blur event for the date picker input.
-     * @returns {void}
-     */
     handleBlur = () => {
         if (this.disabled)
             return;
         this.bqBlur.emit(this.el);
     };
-    /**
-     * Handles the focus event for the date picker input.
-     * @returns {void}
-     */
     handleFocus = () => {
         if (this.disabled)
             return;
         this.bqFocus.emit(this.el);
     };
-    /**
-     * Updates the focused date in the calendar component.
-     * Falls back to today's date if no value is set.
-     * @returns {void}
-     */
-    setFocusedDate = () => {
-        const { callyElem, isCallyLoaded, value } = this;
-        if (!callyElem || !isCallyLoaded)
-            return;
-        const nextFocused = value ? extractFocusedDate(value) : getTodayISO();
-        if (this.focusedDate === nextFocused)
-            return;
-        this.focusedDate = nextFocused;
-        if (callyElem.focusedDate !== this.focusedDate) {
-            // We need to set the focused date in the calendar component via a ref
-            // because it doesn't work when passed as a prop (the Cally element does not re-render)
-            callyElem.focusedDate = this.focusedDate;
-        }
-    };
-    /**
-     * Handles user input changes with locale-aware date parsing.
-     * Validates against disallowed dates and min/max constraints.
-     * @param {Event} ev - The change event.
-     * @returns {void}
-     */
-    handleChange = (ev) => {
+    handleInputChange = (ev) => {
         if (this.disabled || !isHTMLElement(ev.target, 'input'))
             return;
         const inputValue = ev.target.value.trim();
         if (!inputValue) {
+            this.hasBadInput = false;
             this.clearValue();
             this.bqChange.emit({ value: this.value, el: this.el });
             return;
         }
-        // Try to parse as date with locale awareness
-        const dateValue = parseDateInput(inputValue, this.locale);
-        if (!dateValue) {
-            // Invalid date: don't update component value to avoid side effects
-            this.internals.setFormValue(undefined);
-            this.updateFormValidity();
-            this.bqChange.emit({ value: inputValue, el: this.el });
+        const parsed = parseTypedInput(inputValue, this.locale, this.precision, this.min, this.max, this.isDateDisallowed);
+        if (parsed.invalid || parsed.value == null) {
+            // Flag as `badInput` and emit `undefined` — never propagate the raw
+            // typed string, which would break the precision-aware wire contract.
+            this.hasBadInput = true;
+            this.internals.setFormValue(null);
+            this.syncValidity();
+            this.bqChange.emit({ value: undefined, el: this.el });
             return;
         }
-        // Check if date is disallowed
-        if (this.isDateDisallowed?.(dateValue)) {
-            this.internals.setFormValue(undefined);
-            this.updateFormValidity();
-            this.bqChange.emit({ value: inputValue, el: this.el });
-            return;
-        }
-        // Valid date: normalize to ISO format and clamp to range if needed
-        // Note: clamping is done based on string comparison of ISO dates and only when min/max are set
-        let isoDate = toISODateString(dateValue);
-        isoDate = clampDateToRange(isoDate, this.min, this.max);
-        this.value = isoDate;
-        this.displayDate = formatDisplayValue(isoDate, this.type, this.locale, this.formatOptions);
-        this.internals.setFormValue(isoDate);
-        this.updateFormValidity();
+        this.hasBadInput = false;
+        this.value = parsed.value;
         this.bqChange.emit({ value: this.value, el: this.el });
     };
-    /**
-     * Handles the change event when the user selects a date in the calendar component.
-     * @param {Event} ev - The change event.
-     * @returns {void}
-     */
-    handleCalendarChange = (ev) => {
-        if (this.isInternalUpdate)
-            return;
-        const shouldStayOpen = this.type === 'multi';
-        const value = ev.target.value;
-        if (this.value === value) {
-            this.open = shouldStayOpen;
-            return;
-        }
-        this.isInternalUpdate = true;
-        this.value = value;
-        this.displayDate = formatDisplayValue(value, this.type, this.locale, this.formatOptions);
-        this.inputElem.value = this.displayDate;
-        this.inputElem.focus();
-        this.internals.setFormValue(value);
-        this.bqChange.emit({ value: this.value, el: this.el });
-        this.open = shouldStayOpen;
-    };
-    /**
-     * Handles the range start event when the user starts selecting a date range
-     * @param {CustomEvent} ev - The range start event.
-     * @returns {void}
-     */
-    handleCalendarRangeStart = (ev) => {
-        this.hasRangeEnd = false;
-        this.tentative = ev.detail;
-    };
-    /**
-     * Handles the range end event when the user finishes selecting a date range
-     * @returns {void}
-     */
-    handleCalendarRangeEnd = () => {
-        this.hasRangeEnd = true;
-    };
-    /**
-     * Handles the clear click event when the user clicks the clear button
-     * @param {CustomEvent} ev - The clear click event.
-     * @returns {void}
-     */
     handleClearClick = (ev) => {
         if (this.disabled)
             return;
-        this.inputElem.value = '';
+        if (this.inputElem)
+            this.inputElem.value = '';
         this.clearValue();
-        this.hasRangeEnd = false;
         this.bqClear.emit(this.el);
         this.bqChange.emit({ value: this.value, el: this.el });
-        this.inputElem.focus();
+        this.inputElem?.focus();
         ev.stopPropagation();
     };
+    /** Toggles the calendar panel open/closed when the trigger button is activated. */
+    handleTriggerClick = () => {
+        if (this.disabled)
+            return;
+        this.open = !this.open;
+    };
     /**
-     * Clears the value of the date picker input.
-     * @returns {void}
+     * Handles keyboard shortcuts on the text input.
+     * - `ArrowDown` / `Alt+ArrowDown` → open panel and focus active cell.
+     * - `Escape` → close panel (focus stays on input).
      */
+    handleInputKeyDown = (ev) => {
+        if (this.disabled)
+            return;
+        if (ev.key === 'ArrowDown') {
+            ev.preventDefault();
+            if (!this.open)
+                this.open = true;
+        }
+        else if (ev.key === 'Escape' && this.open) {
+            ev.preventDefault();
+            this.open = false;
+        }
+    };
     clearValue = () => {
         this.value = undefined;
         this.displayDate = undefined;
-        this.internals.setFormValue(undefined);
+        this.hasBadInput = false;
+        this.internals.setFormValue(null);
+        this.tentativeHover = undefined;
+    };
+    handleSlotChange = () => {
+        this.hasLabel = this.labelElem ? hasSlotContent(this.labelElem) : false;
+        this.hasPrefix = this.prefixElem ? hasSlotContent(this.prefixElem) : false;
+    };
+    updateFormValidity = () => {
+        updateFormValidity({
+            internals: this.internals,
+            required: this.required,
+            value: this.value,
+            inputElem: this.inputElem,
+            validationMessage: this.formValidationMessage,
+            defaultMessage: 'Please, input or select a valid date',
+        });
     };
     /**
-     * Handles the slot change event when the slots content changes
-     * @returns {void}
+     * Recompute all state derived from the public `value` (form value,
+     * `hasValue`, formatted display). Called from `value` and any prop that
+     * affects display formatting (`type`, `locale`, `formatOptions`).
      */
-    handleSlotChange = () => {
-        this.hasLabel = hasSlotContent(this.labelElem);
-        this.hasPrefix = hasSlotContent(this.prefixElem);
-        this.hasSuffix = hasSlotContent(this.suffixElem);
+    syncDerivedFromValue = () => {
+        const current = this.value;
+        this.internals.setFormValue(!isNil(current) ? `${current}` : null);
+        this.syncValidity();
+        this.hasValue = computeHasValue(current);
+        this.displayDate = computeDisplayDate(current, this.type, this.locale, this.effectiveFormatOptions, this.precision);
     };
     /**
-     * Generates a calendar month element
-     * @param {number} offset - The offset of the calendar month.
-     * @param {string} className - The class name of the calendar month.
-     * @returns {JSX.Element | null} The calendar month element.
+     * Runs the full form-validity pipeline in a consistent order: `required`
+     * → bounds → `badInput`. Multiple failing constraints are unioned into a
+     * single `setValidity` call.
      */
-    generateCalendarMonth = (offset, className = '') => {
-        if (!this.isCallyLoaded)
-            return null;
-        return h("calendar-month", { class: className, exportparts: CALENDAR_MONTH_EXPORT_PARTS, offset: offset });
+    syncValidity = () => {
+        if (!this.internals)
+            return;
+        this.updateFormValidity();
+        const boundsFlags = this.computeBoundsValidityFlags();
+        const flags = { ...boundsFlags };
+        if (this.hasBadInput)
+            flags.badInput = true;
+        const hasCustomConstraintError = Object.keys(flags).length > 0;
+        if (!hasCustomConstraintError) {
+            this.hasConstraintError = !this.internals.validity.valid;
+            return;
+        }
+        const message = this.formValidationMessage ?? defaultValidityMessage(flags);
+        this.internals.states.delete('valid');
+        this.internals.states.add('invalid');
+        this.internals.setValidity(flags, message, this.inputElem);
+        this.hasConstraintError = true;
+    };
+    /** Returns `rangeUnderflow` / `rangeOverflow` flags for the current selection. */
+    computeBoundsValidityFlags = () => {
+        if (!this.min && !this.max)
+            return {};
+        const selection = parseValue(this.value, this.type, this.precision);
+        if (selection.length === 0)
+            return {};
+        const paddedMin = padBound(this.min, 'min');
+        const paddedMax = padBound(this.max, 'max');
+        let rangeUnderflow = false;
+        let rangeOverflow = false;
+        for (const iso of selection) {
+            if (paddedMin && iso < paddedMin)
+                rangeUnderflow = true;
+            if (paddedMax && iso > paddedMax)
+                rangeOverflow = true;
+        }
+        if (!rangeUnderflow && !rangeOverflow)
+            return {};
+        return { rangeUnderflow, rangeOverflow };
+    };
+    clampMonths = (value) => {
+        const rounded = Math.floor(Number(value));
+        if (!Number.isFinite(rounded) || rounded < 1)
+            return 1;
+        return Math.min(rounded, MAX_MONTHS_PER_VIEW);
     };
     /**
-     * Generates an array of Elements representing the calendar months.
+     * Align the internal `viewDate` / `focused*` state with the current value.
+     * Called when the panel opens and whenever an *external* prop change
+     * invalidates the current view (value, type, precision, min/max). Internal
+     * commits skip this via `isCommittingSelection` so the user's navigated
+     * year isn't clobbered by a subsequent multi/range selection.
      *
-     * If the type of the date picker is 'range' or 'multi' and the number of months is specified,
-     * it generates an array of calendar months with the specified length. Each month will have an offset
-     * and a class name based on its position in the array. The offset is used to determine the month to display,
-     * and the class name is used for responsive design.
-     *
-     * If the type of the date picker is not 'range' or 'multi', or if the number of months is not specified,
-     * it generates an array with a single calendar month.
-     *
-     * @returns {JSX.Element[]} An array of elements representing the calendar months.
+     * Uses `parseValue` (precision-aware, always returns full ISO dates) rather
+     * than a raw `YYYY-MM-DD` regex so that month/year wire values like
+     * `"2025-05"` or `"2025"` land on the right cell instead of falling back
+     * to today.
+     */
+    syncViewToValue = () => {
+        const parsed = parseValue(this.value, this.type, this.precision);
+        const focusISO = parsed[0] ?? getTodayISO();
+        const focus = parseISO(focusISO) ?? new Date();
+        const bounded = clampDate(focus, this.min, this.max);
+        this.focusedISO = toISO(bounded);
+        this.viewDate = startOfMonth(bounded);
+        this.focusedMonth = bounded.getMonth();
+        this.focusedYear = bounded.getFullYear();
+        this.decadeStart = getDecadeStart(bounded.getFullYear());
+    };
+    get selection() {
+        const key = `${this.type}|${this.precision}|${this.value ?? ''}`;
+        if (this.cachedSelection?.key === key)
+            return this.cachedSelection.value;
+        const parsed = parseValue(this.value, this.type, this.precision);
+        this.cachedSelection = { key, value: parsed };
+        return parsed;
+    }
+    /**
+     * Effective `Intl.DateTimeFormatOptions` — user-provided when set, otherwise
+     * the precision-appropriate default. Prevents a `month` picker from
+     * accidentally rendering "1 May 2026" when the consumer just sets
+     * `precision="month"` without overriding `formatOptions`.
      */
-    generateCalendarMonths = () => {
-        if (!this.isCallyLoaded)
+    get effectiveFormatOptions() {
+        return this.formatOptions ?? DEFAULT_FORMAT_OPTIONS_BY_PRECISION[this.precision];
+    }
+    /** Map a precision value to the calendar view that commits selections. */
+    precisionToView = (precision) => {
+        if (precision === 'month')
+            return 'months';
+        if (precision === 'year')
+            return 'years';
+        return 'days';
+    };
+    get tentativeRange() {
+        if (this.type !== 'range')
             return [];
-        if (this.type === 'range' || (this.type === 'multi' && this.months)) {
-            return Array.from({ length: this.months }, (_, i) => {
-                const offset = i > 0 ? i : undefined;
-                const className = offset ? 'hidden sm:block' : '';
-                return this.generateCalendarMonth(offset, className);
-            });
+        const parsed = this.selection;
+        // While the user is completing a range (one endpoint chosen) show the
+        // hover preview between that endpoint and the current hovered day.
+        if (parsed.length === 1)
+            return buildTentativeRange(parsed[0], this.tentativeHover);
+        return [];
+    }
+    /* --------------------------- View transitions -------------------------- */
+    /**
+     * Return the date that view transitions (days ⇄ months ⇄ years) should
+     * center the focus on.
+     *
+     * Priority:
+     * 1. First entry of the current selection — for `range` this is the start
+     *    date (selection is sorted on parse), for `multi` it is the earliest.
+     * 2. Otherwise the currently displayed `viewDate` (i.e. the month/year the
+     *    user has navigated to with prev/next).
+     */
+    getViewFocusReference = () => {
+        const [first] = this.selection;
+        if (first) {
+            const parsed = parseISO(first);
+            if (parsed)
+                return parsed;
+        }
+        return this.viewDate;
+    };
+    handleHeaderTitleClick = () => {
+        if (this.precision === 'year')
+            return;
+        if (this.view === 'days') {
+            const ref = this.getViewFocusReference();
+            this.focusedMonth = ref.getMonth();
+            this.focusedYear = ref.getFullYear();
+            this.view = 'months';
+            this.focusActiveCell();
+            return;
+        }
+        if (this.view === 'months') {
+            const ref = this.getViewFocusReference();
+            this.focusedYear = ref.getFullYear();
+            this.decadeStart = getDecadeStart(ref.getFullYear());
+            this.view = 'years';
+            this.focusActiveCell();
+            return;
+        }
+        // years view → cycle back to the base view for the current precision
+        this.view = this.precisionToView(this.precision);
+        this.focusActiveCell();
+    };
+    handleHeaderPrev = () => {
+        if (this.view === 'days') {
+            const step = this.monthsPerView === 'months' ? Math.max(1, this.months) : 1;
+            this.viewDate = addMonths(this.viewDate, -step);
+            this.focusedISO = toISO(clampDate(startOfMonth(this.viewDate), this.min, this.max));
+        }
+        else if (this.view === 'months') {
+            this.focusedYear = this.focusedYear - 1;
+        }
+        else {
+            this.decadeStart = this.decadeStart - DECADE_GRID_SIZE;
+        }
+    };
+    handleHeaderNext = () => {
+        if (this.view === 'days') {
+            const step = this.monthsPerView === 'months' ? Math.max(1, this.months) : 1;
+            this.viewDate = addMonths(this.viewDate, step);
+            this.focusedISO = toISO(clampDate(startOfMonth(this.viewDate), this.min, this.max));
+        }
+        else if (this.view === 'months') {
+            this.focusedYear = this.focusedYear + 1;
+        }
+        else {
+            this.decadeStart = this.decadeStart + DECADE_GRID_SIZE;
         }
-        return [this.generateCalendarMonth()];
+    };
+    handleMonthSelect = (month) => {
+        // When precision is `month`, selecting a month commits the value instead
+        // of drilling to the days view. Gate the commit on bounds so keyboard
+        // Enter/Space cannot bypass the click-path disabled check.
+        if (this.precision === 'month') {
+            if (!isMonthWithinBounds(this.focusedYear, month, this.min, this.max))
+                return;
+            this.focusedMonth = month;
+            this.viewDate = new Date(this.focusedYear, month, 1);
+            this.commitSelection(toISO(new Date(this.focusedYear, month, 1)));
+            return;
+        }
+        this.viewDate = new Date(this.focusedYear, month, 1);
+        this.focusedMonth = month;
+        // Preserve day-of-month from the current focus (value or today), clamped
+        // to the last day of the destination month and to min/max bounds.
+        const nextFocus = clampDate(new Date(this.focusedYear, month, Math.min(new Date(this.focusedISO).getDate() || 1, endOfMonth(this.viewDate).getDate())), this.min, this.max);
+        this.focusedISO = toISO(nextFocus);
+        this.view = 'days';
+        this.focusActiveCell();
+    };
+    handleYearSelect = (year) => {
+        // When precision is `year`, selecting a year commits the value instead
+        // of drilling to the months view. Gate the commit on bounds so keyboard
+        // Enter/Space cannot bypass the click-path disabled check.
+        if (this.precision === 'year') {
+            if (!isYearWithinBounds(year, this.min, this.max))
+                return;
+            this.focusedYear = year;
+            this.viewDate = new Date(year, 0, 1);
+            this.commitSelection(toISO(new Date(year, 0, 1)));
+            return;
+        }
+        this.focusedYear = year;
+        this.viewDate = new Date(year, this.focusedMonth, 1);
+        this.view = 'months';
+        this.focusActiveCell();
+    };
+    /* ---------------------------- Day selection ---------------------------- */
+    handleDaySelect = (iso) => {
+        this.commitSelection(iso);
     };
     /**
-     * Updates the form validity of the date picker input.
-     * @returns {void}
+     * Shared commit path used by day / month / year selection. Keeps the
+     * selection logic (single/multi/range) and post-commit behaviour (event,
+     * open state, tentative hover, view sync) identical across precisions.
      */
-    updateFormValidity = () => {
-        const { formValidationMessage, internals, required, value, inputElem } = this;
-        updateFormValidity({
-            internals,
-            required,
-            value,
-            inputElem,
-            validationMessage: formValidationMessage,
-            defaultMessage: 'Please, input or select a valid date',
+    commitSelection = (iso) => {
+        const next = applySelection(iso, this.selection, this.type);
+        const shouldStayOpen = this.type === 'multi' || (this.type === 'range' && next.length === 1);
+        this.hasBadInput = false;
+        // Guard so `handleValueChange` doesn't re-sync the view back to `parsed[0]`
+        // (would jump multi/range pickers to the earliest selected date) or to
+        // today (when precision truncation leaves no full ISO to extract).
+        this.isCommittingSelection = true;
+        this.value = serializeValue(next, this.type, this.precision);
+        this.isCommittingSelection = false;
+        this.focusedISO = iso;
+        const parsedIso = parseISO(iso);
+        if (parsedIso) {
+            this.viewDate = startOfMonth(parsedIso);
+            this.focusedMonth = parsedIso.getMonth();
+            this.focusedYear = parsedIso.getFullYear();
+            if (this.precision !== 'year') {
+                this.decadeStart = getDecadeStart(parsedIso.getFullYear());
+            }
+        }
+        this.tentativeHover = this.type === 'range' && next.length === 1 ? iso : undefined;
+        this.bqChange.emit({ value: this.value, el: this.el });
+        this.open = shouldStayOpen;
+    };
+    handleDayHover = (iso) => {
+        if (this.type !== 'range')
+            return;
+        this.tentativeHover = iso;
+    };
+    handleDayFocus = (iso) => {
+        if (this.focusedISO === iso)
+            return;
+        this.focusedISO = iso;
+    };
+    /* ------------------------- Grid keyboard nav --------------------------- */
+    getRTLDirection = () => {
+        // Walk up through the composed tree so that dir="rtl" set on <html> or
+        // any ancestor is picked up, not just a direct attribute on the host.
+        const dir = this.el.closest('[dir]')?.dir ?? getComputedStyle(this.el).direction;
+        return dir === 'rtl' ? -1 : 1;
+    };
+    moveFocusedDay = (deltaDays) => {
+        const current = parseISO(this.focusedISO) ?? new Date();
+        const next = clampDate(addDays(current, deltaDays), this.min, this.max);
+        this.focusedISO = toISO(next);
+        if (next.getMonth() !== this.viewDate.getMonth() || next.getFullYear() !== this.viewDate.getFullYear()) {
+            this.viewDate = startOfMonth(next);
+        }
+        this.focusButton(`[data-iso="${this.focusedISO}"]`);
+    };
+    moveFocusedDayHome = () => {
+        const first = this.firstDayOfWeek ?? 1;
+        const dayOfWeek = parseISO(this.focusedISO)?.getDay() ?? 0;
+        this.moveFocusedDay(-((dayOfWeek - first + 7) % 7));
+    };
+    moveFocusedDayEnd = () => {
+        const first = this.firstDayOfWeek ?? 1;
+        const focus = parseISO(this.focusedISO) ?? new Date();
+        const rowIndex = (focus.getDay() - first + 7) % 7;
+        this.moveFocusedDay(6 - rowIndex);
+    };
+    pageFocusedMonth = (direction, byYear) => {
+        this.viewDate = byYear ? addYears(this.viewDate, direction) : addMonths(this.viewDate, direction);
+        this.focusedISO = toISO(clampDate(startOfMonth(this.viewDate), this.min, this.max));
+    };
+    selectFocusedDay = () => {
+        const iso = this.focusedISO;
+        const parsed = parseISO(iso);
+        if (parsed && isWithinBounds(parsed, this.min, this.max) && !this.isDateDisallowed?.(parsed)) {
+            this.handleDaySelect(iso);
+        }
+    };
+    handleDayGridKeyDown = (ev) => {
+        const rtl = this.getRTLDirection();
+        const handlers = {
+            ArrowLeft: () => this.moveFocusedDay(-1 * rtl),
+            ArrowRight: () => this.moveFocusedDay(1 * rtl),
+            ArrowUp: () => this.moveFocusedDay(-7),
+            ArrowDown: () => this.moveFocusedDay(7),
+            Home: () => this.moveFocusedDayHome(),
+            End: () => this.moveFocusedDayEnd(),
+            PageUp: () => this.pageFocusedMonth(-1, ev.shiftKey),
+            PageDown: () => this.pageFocusedMonth(1, ev.shiftKey),
+            Escape: () => {
+                this.open = false;
+                this.inputElem?.focus();
+            },
+            Enter: () => this.selectFocusedDay(),
+            ' ': () => this.selectFocusedDay(),
+        };
+        const handler = handlers[ev.key];
+        if (handler) {
+            ev.preventDefault();
+            handler();
+        }
+    };
+    getGridColumns = () => {
+        // Months/years grids visually expand from 3 to 4 columns in multi-panel
+        // mode. Keep arrow-key stride in sync so vertical navigation still lands
+        // on the row directly above/below the current cell.
+        return getGridColumns(this.getMonthCount());
+    };
+    handleMonthGridKeyDown = (ev) => {
+        const rtl = this.getRTLDirection();
+        const stride = this.getGridColumns();
+        const move = (delta) => {
+            const { month, year } = advanceFocusedMonth(this.focusedMonth, this.focusedYear, delta);
+            this.focusedMonth = month;
+            this.focusedYear = year;
+            this.focusButton(`[data-month="${month}"]`);
+        };
+        switch (ev.key) {
+            case 'ArrowLeft':
+                ev.preventDefault();
+                move(-1 * rtl);
+                return;
+            case 'ArrowRight':
+                ev.preventDefault();
+                move(1 * rtl);
+                return;
+            case 'ArrowUp':
+                ev.preventDefault();
+                move(-stride);
+                return;
+            case 'ArrowDown':
+                ev.preventDefault();
+                move(stride);
+                return;
+            case 'Enter':
+            case ' ':
+                ev.preventDefault();
+                this.handleMonthSelect(this.focusedMonth);
+                return;
+            case 'Escape':
+                ev.preventDefault();
+                this.view = 'days';
+        }
+    };
+    handleYearGridKeyDown = (ev) => {
+        const rtl = this.getRTLDirection();
+        const stride = this.getGridColumns();
+        const move = (delta) => {
+            const { year, decadeStart } = advanceFocusedYear(this.focusedYear, this.decadeStart, delta);
+            this.focusedYear = year;
+            this.decadeStart = decadeStart;
+            this.focusButton(`[data-year="${year}"]`);
+        };
+        switch (ev.key) {
+            case 'ArrowLeft':
+                ev.preventDefault();
+                move(-1 * rtl);
+                return;
+            case 'ArrowRight':
+                ev.preventDefault();
+                move(1 * rtl);
+                return;
+            case 'ArrowUp':
+                ev.preventDefault();
+                move(-stride);
+                return;
+            case 'ArrowDown':
+                ev.preventDefault();
+                move(stride);
+                return;
+            case 'Enter':
+            case ' ':
+                ev.preventDefault();
+                this.handleYearSelect(this.focusedYear);
+                return;
+            case 'Escape':
+                ev.preventDefault();
+                this.view = 'months';
+        }
+    };
+    focusButton = (selector) => {
+        // Cancel any prior pending focus request so rapid state changes don't
+        // race — only the latest target should win.
+        if (this.pendingFocusRAF !== undefined)
+            cancelAnimationFrame(this.pendingFocusRAF);
+        this.pendingFocusRAF = requestAnimationFrame(() => {
+            this.pendingFocusRAF = undefined;
+            const button = this.el.shadowRoot?.querySelector(selector);
+            button?.focus();
         });
     };
     /**
-     * Returns the Cally calendar component tag name based on the picker type.
-     * Maps 'single' → 'calendar-date', 'multi' → 'calendar-multi', 'range' → 'calendar-range'
-     *
-     * @returns The Cally calendar component tag name.
+     * Focus the currently active cell for the visible view. Called after the
+     * popup opens so keyboard users don't have to tab into the calendar.
      */
-    get calendarType() {
-        return CALENDAR_TYPE_MAP[this.type] ?? CALENDAR_TYPE_MAP.single;
-    }
+    focusActiveCell = () => {
+        if (this.view === 'months') {
+            this.focusButton(`[data-month="${this.focusedMonth}"]`);
+            return;
+        }
+        if (this.view === 'years') {
+            this.focusButton(`[data-year="${this.focusedYear}"]`);
+            return;
+        }
+        this.focusButton(`[data-iso="${this.focusedISO}"]`);
+    };
+    /* -------------------------- Header labels ------------------------------ */
+    getMonthCount = () => {
+        if (this.type === 'single')
+            return 1;
+        // `handleMonthsChange` clamps the prop on write, so here we just guard
+        // against the initial value before the first watcher tick.
+        return this.clampMonths(this.months);
+    };
+    getHeaderLabel = () => {
+        return getHeaderLabel({
+            view: this.view,
+            viewDate: this.viewDate,
+            focusedYear: this.focusedYear,
+            decadeStart: this.decadeStart,
+            monthCount: this.getMonthCount(),
+            locale: this.locale,
+        });
+    };
+    getHeaderTitleLabel = () => {
+        return getHeaderTitleLabel(this.view, this.precision);
+    };
+    getPreviousLabel = () => {
+        return getPreviousLabel(this.view);
+    };
+    getNextLabel = () => {
+        return getNextLabel(this.view);
+    };
+    renderDayPanels = () => {
+        const panels = [];
+        const monthCount = this.getMonthCount();
+        for (let i = 0; i < monthCount; i++) {
+            const anchor = addMonths(this.viewDate, i);
+            const anchorKey = toISO(startOfMonth(anchor));
+            panels.push(h("div", { key: anchorKey, class: {
+                    'bq-date-picker__panel': true,
+                    'bq-date-picker__panel--extra': i > 0,
+                } }, monthCount > 1 && (h("div", { class: "bq-date-picker__month-label", part: CALENDAR_PARTS.heading }, formatMonth(anchor, this.locale, 'long', true))), h(CalendarDayView, { viewDate: anchor, selection: this.selection, tentativeRange: this.tentativeRange, focusedISO: this.focusedISO, type: this.type, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek ?? 1, showOutsideDays: this.showOutsideDays, minISO: this.min, maxISO: this.max, isDateDisallowed: this.isDateDisallowed, onDaySelect: (iso) => this.handleDaySelect(iso), onDayHover: (iso) => this.handleDayHover(iso), onDayFocus: (iso) => this.handleDayFocus(iso), onGridKeyDown: this.handleDayGridKeyDown })));
+        }
+        return h("div", { class: "bq-date-picker__panels" }, panels);
+    };
+    renderMonthsView = () => {
+        const gridColumns = this.getGridColumns();
+        return (h(CalendarMonthView, { year: this.focusedYear, focusedMonth: this.focusedMonth, gridColumns: gridColumns, locale: this.locale, minISO: this.min, maxISO: this.max, selection: this.selection, tentativeRange: this.tentativeRange, type: this.type, onMonthSelect: (month) => this.handleMonthSelect(month), onMonthHover: (iso) => this.handleDayHover(iso), onMonthFocus: (month) => {
+                this.focusedMonth = month;
+            }, onGridKeyDown: this.handleMonthGridKeyDown }));
+    };
+    renderYearsView = () => {
+        const start = this.decadeStart;
+        const end = start + DECADE_GRID_SIZE - 1;
+        const years = Array.from({ length: DECADE_GRID_SIZE }, (_, i) => start + i);
+        const effectiveFocused = this.focusedYear >= start && this.focusedYear <= end ? this.focusedYear : start;
+        const gridColumns = this.getGridColumns();
+        return (h(CalendarYearView, { years: years, focusedYear: effectiveFocused, gridColumns: gridColumns, minISO: this.min, maxISO: this.max, selection: this.selection, tentativeRange: this.tentativeRange, type: this.type, onYearSelect: (year) => this.handleYearSelect(year), onYearHover: (iso) => this.handleDayHover(iso), onYearFocus: (year) => {
+                this.focusedYear = year;
+            }, onGridKeyDown: this.handleYearGridKeyDown }));
+    };
+    renderView = () => {
+        if (this.view === 'months')
+            return this.renderMonthsView();
+        if (this.view === 'years')
+            return this.renderYearsView();
+        return this.renderDayPanels();
+    };
     // render() function
     // Always the last one in the class.
     // ===================================
     render() {
-        const CallyCalendar = this.calendarType;
         const labelId = `bq-date-picker__label-${this.name || DEFAULT_INPUT_ID}`;
-        return (h("div", { key: 'd3bc7266653e663ceb7d09a7823bc3988ab94a39', class: "bq-date-picker", part: "base" }, h("label", { key: 'b36af597441d055958e36c0e3804cd7bcf25e820', "aria-labelledby": labelId, class: { 'bq-date-picker__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || DEFAULT_INPUT_ID, part: "label", ref: (labelElem) => {
+        const popupId = `bq-date-picker__popup-${this.name || DEFAULT_INPUT_ID}`;
+        return (h("div", { key: 'fbfb1d3294161587b4dc1097f472a7c56d42113d', class: "bq-date-picker", part: CALENDAR_PARTS.base }, h("label", { key: '653bbad6d53c67fac40fde49fe19eb53dd9058a3', class: { 'bq-date-picker__label': true, 'is-hidden': !this.hasLabel }, htmlFor: this.name || DEFAULT_INPUT_ID, part: CALENDAR_PARTS.label, ref: (labelElem) => {
                 this.labelElem = labelElem;
-            } }, h("slot", { key: '6a56eb52cf58f8aba43750a154cf8ed81f864960', id: labelId, name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: '1b2acccef5b1e12d3d3b4a239df4eda1f0df2e1f', class: "bq-date-picker__dropdown is-full [&::part(panel)]:is-auto [&::part(panel)]:p-m", disabled: this.disabled, distance: this.distance, exportparts: "panel", open: this.open, panelHeight: this.panelHeight, placement: this.placement, skidding: this.skidding, strategy: this.strategy }, h("div", { key: 'cbe0e797f421654c647ccf9539d515f1d9d6b515', class: {
+            } }, h("slot", { key: '07e94277fbaf22b70bdd99d07159d41890210aa4', id: labelId, name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: '41797796782799bb526b0f7848d13142824a6992', class: "bq-date-picker__dropdown", disabled: this.disabled, distance: this.distance, exportparts: "panel", open: this.open, panelHeight: this.panelHeight, placement: this.placement, skidding: this.skidding, strategy: this.strategy }, h("div", { key: '34a12c0fedb7ef5e0b01027d6880d76b98aba95c', class: {
                 'bq-date-picker__control': true,
                 [`validation-${this.validationStatus}`]: true,
-                disabled: this.disabled,
-            }, part: "control", slot: "trigger" }, h("span", { key: '8b9a4d62b9682a0b99d41aac5d6a0ef6e919e622', class: { 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }, part: "prefix", ref: (spanElem) => {
-                this.prefixElem = spanElem;
-            } }, h("slot", { key: '2cb3a8524d866c584a3cf5141acdb1ad92224e86', name: "prefix", onSlotchange: this.handleSlotChange })), h("input", { key: 'a2a3dc60a66e9bb5fea79d58ed5b92583f735f91', "aria-controls": `${this.name}`, "aria-describedby": this.hasLabel ? labelId : null, "aria-disabled": this.disabled ? 'true' : 'false', "aria-invalid": this.validationStatus === 'error' ? 'true' : 'false', "aria-haspopup": "dialog", autoCapitalize: "off", autoComplete: "off", class: "bq-date-picker__control--input", disabled: this.disabled, form: this.form, id: this.name || DEFAULT_INPUT_ID, name: this.name, onBlur: this.handleBlur, onChange: this.handleChange, onFocus: this.handleFocus, part: "input", placeholder: this.placeholder, readonly: this.type !== 'single', ref: (inputElem) => {
-                this.inputElem = inputElem;
-            }, required: this.required, spellcheck: false, type: "text", value: this.displayDate }), this.hasValue && !this.disabled && !this.disableClear && (
-        // The clear button will be visible as long as the input has a value
-        // and the parent group is hovered or has focus-within
-        h("bq-button", { key: 'd88805afb10746d198428dc0a6da5d550092bdff', appearance: "text", border: "s", class: "bq-date-picker__control--clear ms-[--bq-date-picker--gap] hidden [&::part(button)]:border-none [&::part(button)]:p-0", exportparts: "button", label: this.clearButtonLabel, onBqClick: this.handleClearClick, onlyIcon: true, part: "clear-btn", size: "small" }, h("slot", { key: '9e0440b32ae931bbaf731645dff13fa9522f9fa8', name: "clear-icon" }, h("bq-icon", { key: '48602de99d51ada0a61ee141276a54054e08264c', "aria-hidden": "true", class: "flex", name: "x-circle" })))), h("span", { key: 'f1d346f483c58d0dbd64cf83baf0ef9f018eb94e', class: "bq-date-picker__control--suffix", part: "suffix", ref: (spanElem) => {
-                this.suffixElem = spanElem;
-            } }, h("slot", { key: '5501e90797705d98883a0a9ec178ae21922407dd', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: '0a7e047ade9014cb9997a0ffcf47098bbe6160eb', class: "flex", name: "calendar-blank" })))), this.isCallyLoaded && (h(CallyCalendar, { key: 'cdbb9f9cb40d03b40f743d1086f9cc3c0055c233', "aria-labelledby": labelId, "aria-modal": "true", exportparts: CALENDAR_CONTAINER_EXPORT_PARTS, firstDayOfWeek: this.firstDayOfWeek, isDateDisallowed: this.isDateDisallowed, locale: this.locale, max: this.max, min: this.min, months: this.months, onChange: this.handleCalendarChange, onRangeend: this.handleCalendarRangeEnd, onRangestart: this.handleCalendarRangeStart, pageBy: this.monthsPerView, ref: (elem) => {
-                this.callyElem = elem;
-            }, role: "dialog", showOutsideDays: this.showOutsideDays, tentative: this.tentative, value: this.value }, h("bq-icon", { key: '4c10bc74c6e248f07b66fc4af28917a9b83bcc48', color: "text--primary", label: "Previous", name: "caret-left", slot: "previous" }), h("bq-icon", { key: '4f1875fa4e48db09e83ae5aa5c4c7ab0591cb2d4', color: "text--primary", label: "Next", name: "caret-right", slot: "next" }), h("div", { key: '92d856991700e38e8fbf383eae2b8d2c85d0faed', class: "flex flex-wrap justify-center gap-[--bq-spacing-m]" }, this.generateCalendarMonths()))))));
+                'is-disabled': !!this.disabled,
+                'is-open': !!this.open,
+            }, part: CALENDAR_PARTS.control, slot: "trigger" }, h("span", { key: '074fef90f99a4f04b9dcf93662f32474872fae8d', class: { 'bq-date-picker__prefix': true, 'is-hidden': !this.hasPrefix }, part: CALENDAR_PARTS.prefix, ref: (el) => {
+                this.prefixElem = el;
+            } }, h("slot", { key: '040653982a81730279c4115a19415b01dbc24930', name: "prefix", onSlotchange: this.handleSlotChange })), h("input", { key: 'a72cc21a3811e27890881cd6b24340f3014bd891', "aria-controls": popupId, "aria-disabled": this.disabled ? 'true' : 'false', "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "dialog", "aria-invalid": this.validationStatus === 'error' || this.hasConstraintError ? 'true' : 'false', "aria-labelledby": this.hasLabel ? labelId : undefined, autoCapitalize: "off", autoComplete: "off", class: "bq-date-picker__input", disabled: this.disabled, form: this.form, id: this.name || DEFAULT_INPUT_ID, name: this.name, onBlur: this.handleBlur, onChange: this.handleInputChange, onFocus: this.handleFocus, onKeyDown: this.handleInputKeyDown, part: CALENDAR_PARTS.input, placeholder: this.placeholder, readonly: this.type !== 'single', ref: (el) => {
+                this.inputElem = el;
+            }, required: this.required, role: "combobox", spellcheck: false, type: "text", value: this.displayDate }), this.hasValue && !this.disabled && !this.disableClear && (h("bq-button", { key: '4755ef5fd92ad15e4251e8e6b1a0c54fcab70211', appearance: "text", border: "xs", class: "bq-date-picker__clear", exportparts: "button", label: this.clearButtonLabel, onBqClick: this.handleClearClick, onlyIcon: true, part: CALENDAR_PARTS.clearBtn, size: "small" }, h("slot", { key: '3822545148e63e70ba3db113f68ef433f8cec557', name: "clear-icon" }, h("bq-icon", { key: '68fb241e92345c8ba00234a4549fde7596356244', "aria-hidden": "true", name: "x-circle" })))), h("bq-button", { key: 'a0d973454fe7a4a5176ec74cbfd4f53f8b5e502b', appearance: "text", border: "xs", class: "bq-date-picker__calendar-trigger", disabled: this.disabled, exportparts: "button", label: this.calendarButtonLabel, onClick: (ev) => ev.stopPropagation(), onBqClick: this.handleTriggerClick, onlyIcon: true, part: `${CALENDAR_PARTS.button} ${CALENDAR_PARTS.suffix} ${CALENDAR_PARTS.calendarTrigger}`, ref: (el) => {
+                this.triggerBtnElem = el;
+            }, size: "small" }, h("slot", { key: '232204777692c2fec6f341bb1839084aa0f333a3', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: '61a8deb36c0a991e7d3a9922150eeb1740494c7e', "aria-hidden": "true", name: "calendar-blank" })))), h("div", { key: 'f65869f887710ff537b00812aacf2bbd01ddeb3e', "aria-label": this.hasLabel ? undefined : 'Date picker', "aria-labelledby": this.hasLabel ? labelId : undefined, class: "bq-date-picker__calendar", id: popupId, part: CALENDAR_PARTS.container, role: "dialog", style: { '--bq-date-picker--panel-count': `${this.getMonthCount()}` } }, h(CalendarHeader, { key: 'a07e486177b1df9f477de1fe6c0c484356e0d6b9', view: this.view, label: this.getHeaderLabel(), previousLabel: this.getPreviousLabel(), nextLabel: this.getNextLabel(), titleLabel: this.getHeaderTitleLabel(), titleInteractive: this.precision !== 'year', onPrevious: () => this.handleHeaderPrev(), onNext: () => this.handleHeaderNext(), onTitleClick: () => this.handleHeaderTitleClick() }), h("div", { key: '00a0802e6eb76113fd68ee8852a98c762dc015bb', class: "bq-date-picker__view" }, this.renderView())))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
@@ -587,8 +1915,57 @@ const BqDatePicker = class {
         "value": [{
                 "handleValueChange": 0
             }],
+        "formatOptions": [{
+                "handleFormattingChange": 0
+            }],
+        "locale": [{
+                "handleFormattingChange": 0
+            }],
         "type": [{
+                "handleTypeChange": 0
+            }, {
+                "checkPropValues": 0
+            }],
+        "precision": [{
+                "handlePrecisionChange": 0
+            }, {
+                "checkPropValues": 0
+            }],
+        "max": [{
+                "handleBoundsChange": 0
+            }],
+        "min": [{
+                "handleBoundsChange": 0
+            }],
+        "required": [{
+                "handleRequiredChange": 0
+            }],
+        "firstDayOfWeek": [{
+                "checkPropValues": 0
+            }],
+        "initialView": [{
+                "checkPropValues": 0
+            }],
+        "monthsPerView": [{
+                "checkPropValues": 0
+            }],
+        "placement": [{
+                "checkPropValues": 0
+            }],
+        "strategy": [{
+                "checkPropValues": 0
+            }],
+        "validationStatus": [{
                 "checkPropValues": 0
+            }],
+        "months": [{
+                "handleMonthsChange": 0
+            }],
+        "open": [{
+                "handleOpen": 0
+            }],
+        "view": [{
+                "handleViewChange": 0
             }]
     }; }
 };