@brandsync/wc 1.9.0 → 1.11.0

package/dist/collection/components/bs-cookie-consent/bs-cookie-consent.stories.js

@@ -0,0 +1,103 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription, propDescription } from "../../stories-utils";
+const PREFERENCE_CATEGORIES = [
+    {
+        id: 'necessary',
+        label: 'Strictly necessary',
+        description: 'Needed for sign-in, security and to keep the service running. These cannot be turned off.',
+        required: true,
+        cookies: [
+            'Session cookie — keeps you signed in as you move between pages.',
+            'Security cookie — helps prevent fraud and unauthorized access.',
+            'Consent cookie — remembers your cookie consent choices.',
+        ],
+    },
+    {
+        id: 'preferences',
+        label: 'Preferences',
+        description: 'Remember your language, theme and table layouts on this device.',
+        enabled: true,
+        cookies: ['Language cookie — remembers your language.', 'Theme cookie — remembers light or dark mode.', 'Layout cookie — remembers your table columns.'],
+    },
+    {
+        id: 'analytics',
+        label: 'Analytics',
+        description: 'Help us understand which features are used so we can improve them. Data is anonymised.',
+        cookies: ['Usage cookie — counts visits to each page.', 'Feature cookie — records which features are used.', 'Performance cookie — measures how fast pages load.'],
+    },
+    {
+        id: 'marketing',
+        label: 'Marketing',
+        description: 'Show relevant EG products on other websites.',
+        cookies: ['Campaign cookie — links a visit to a campaign.', 'Audience cookie — groups visitors by interest.', 'Retargeting cookie — shows our ads elsewhere.'],
+    },
+];
+const meta = {
+    title: 'Components/bs-cookie-consent',
+    parameters: { docs: { description: { component: componentDescription('bs-cookie-consent') } } },
+    decorators: [story => html `<div style="padding: 16px; background: var(--bs-color-neutral-container);">${story()}</div>`],
+    render: args => html `
+    <bs-cookie-consent
+      type=${args.type}
+      heading=${ifDefined(args.heading || undefined)}
+      description=${ifDefined(args.description || undefined)}
+      policy-url=${ifDefined(args.policyUrl || undefined)}
+      .categories=${PREFERENCE_CATEGORIES}
+      @bsAccept=${(ev) => console.log('bsAccept', ev.detail)}
+      @bsReject=${(ev) => console.log('bsReject', ev.detail)}
+      @bsCustomise=${() => console.log('bsCustomise')}
+      @bsSave=${(ev) => console.log('bsSave', ev.detail)}
+      @bsChoice=${(ev) => console.log('bsChoice', ev.detail)}
+      @bsClose=${() => console.log('bsClose')}
+      @bsManage=${() => console.log('bsManage')}
+    ></bs-cookie-consent>
+  `,
+    argTypes: {
+        type: { control: 'inline-radio', options: ['banner', 'card', 'preferences', 'saved'], description: propDescription('bs-cookie-consent', 'type') },
+        heading: { control: 'text', description: propDescription('bs-cookie-consent', 'heading') },
+        description: { control: 'text', description: propDescription('bs-cookie-consent', 'description') },
+        policyUrl: { control: 'text', description: propDescription('bs-cookie-consent', 'policyUrl') },
+    },
+    args: { type: 'banner', heading: '', description: '', policyUrl: '#cookie-policy' },
+};
+export default meta;
+export const Banner = {};
+export const BannerNarrow = {
+    name: 'Banner (narrow container)',
+    render: args => html `
+    <div style="width: 332px;">
+      <bs-cookie-consent type="banner" policy-url=${args.policyUrl}></bs-cookie-consent>
+    </div>
+  `,
+};
+export const CompactCard = {
+    name: 'Compact card',
+    args: { type: 'card' },
+};
+export const PreferencesDialog = {
+    name: 'Preferences dialog',
+    args: { type: 'preferences' },
+};
+export const SavedConfirmation = {
+    name: 'Saved confirmation',
+    args: { type: 'saved' },
+};
+// The flow: banner -> Customise -> preferences -> Save -> saved confirmation -> Change -> preferences.
+export const Flow = {
+    render: () => html `
+    <div id="flow">
+      <bs-cookie-consent
+        type="banner"
+        policy-url="#cookie-policy"
+        .categories=${PREFERENCE_CATEGORIES}
+        @bsCustomise=${(e) => (e.currentTarget.setAttribute('type', 'preferences'))}
+        @bsAccept=${(e) => (e.currentTarget.setAttribute('type', 'saved'))}
+        @bsReject=${(e) => (e.currentTarget.setAttribute('type', 'saved'))}
+        @bsSave=${(e) => (e.currentTarget.setAttribute('type', 'saved'))}
+        @bsClose=${(e) => (e.currentTarget.setAttribute('type', 'banner'))}
+        @bsManage=${(e) => (e.currentTarget.setAttribute('type', 'preferences'))}
+      ></bs-cookie-consent>
+    </div>
+  `,
+};

package/dist/collection/components/bs-datepicker/bs-datepicker.cmp.test.js

@@ -0,0 +1,191 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const sr = (root) => root.shadowRoot;
+const days = (root) => Array.from(root.shadowRoot.querySelectorAll('[part~="day"]'));
+const day = (root, iso) => root.shadowRoot.querySelector(`[data-date="${iso}"]`);
+describe('bs-datepicker', () => {
+    it('renders a 6-row grid starting on Sunday, matching the Figma (September 2026)', async () => {
+        const { root } = await render(h("bs-datepicker", { value: "2026-09-16" }));
+        const cells = days(root);
+        expect(cells.length).toBe(42);
+        // Sept 1 2026 is a Tuesday, so the grid leads with Sunday 30 August.
+        expect(cells[0].dataset.date).toBe('2026-08-30');
+        expect(cells[41].dataset.date).toBe('2026-10-10');
+        const weekdays = Array.from(root.shadowRoot.querySelectorAll('[part="weekday"]')).map(e => e.textContent);
+        expect(weekdays).toEqual(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']);
+    });
+    it('can start the week on Monday', async () => {
+        const { root } = await render(h("bs-datepicker", { value: "2026-09-16", firstDayOfWeek: 1 }));
+        expect(days(root)[0].dataset.date).toBe('2026-08-31');
+        expect(root.shadowRoot.querySelector('[part="weekday"]').textContent).toBe('Mon');
+    });
+    it('shows the selected date in the title and marks it selected', async () => {
+        const { root } = await render(h("bs-datepicker", { value: "2026-09-16" }));
+        expect(root.shadowRoot.querySelector('[part="title"]').textContent).toBe('16 September 2026');
+        expect(day(root, '2026-09-16').getAttribute('part')).toContain('selected');
+    });
+    it('marks days from adjacent months as outside', async () => {
+        const { root } = await render(h("bs-datepicker", { value: "2026-09-16" }));
+        expect(day(root, '2026-08-31').getAttribute('part')).toContain('outside');
+        expect(day(root, '2026-09-01').getAttribute('part')).not.toContain('outside');
+    });
+    it('selects a day on click, updates value and emits bsChange', async () => {
+        const { root, waitForChanges } = await render(h("bs-datepicker", { value: "2026-09-16" }));
+        const events = [];
+        root.addEventListener('bsChange', (e) => events.push(e.detail));
+        day(root, '2026-09-20').click();
+        await waitForChanges();
+        expect(root.value).toBe('2026-09-20');
+        expect(events).toEqual([{ value: '2026-09-20' }]);
+    });
+    it('does not emit when value is set programmatically, and jumps to that month', async () => {
+        const { root, waitForChanges } = await render(h("bs-datepicker", { value: "2026-09-16" }));
+        let fired = 0;
+        root.addEventListener('bsChange', () => fired++);
+        root.value = '2027-01-05';
+        await waitForChanges();
+        expect(fired).toBe(0);
+        expect(day(root, '2027-01-05').getAttribute('part')).toContain('selected');
+    });
+    it('navigates months with the prev/next buttons', async () => {
+        const { root, waitForChanges } = await render(h("bs-datepicker", { value: "2026-09-16" }));
+        root.shadowRoot.querySelector('[part="next"]').click();
+        await waitForChanges();
+        expect(day(root, '2026-10-15')).not.toBeNull();
+        expect(day(root, '2026-10-15').getAttribute('part')).not.toContain('outside');
+        root.shadowRoot.querySelector('[part="prev"]').click();
+        root.shadowRoot.querySelector('[part="prev"]').click();
+        await waitForChanges();
+        expect(day(root, '2026-08-15').getAttribute('part')).not.toContain('outside');
+    });
+    it('disables days outside min/max and ignores clicks on them', async () => {
+        const { root, waitForChanges } = await render(h("bs-datepicker", { value: "2026-09-16", min: "2026-09-10", max: "2026-09-20" }));
+        expect(day(root, '2026-09-09')).toHaveAttribute('disabled');
+        expect(day(root, '2026-09-21')).toHaveAttribute('disabled');
+        expect(day(root, '2026-09-10')).not.toHaveAttribute('disabled');
+        day(root, '2026-09-09').click();
+        await waitForChanges();
+        expect(root.value).toBe('2026-09-16');
+    });
+    it('keeps a single tab stop (roving tabindex) and moves focus with the arrow keys', async () => {
+        const { root, waitForChanges } = await render(h("bs-datepicker", { value: "2026-09-16" }));
+        expect(days(root).filter(d => d.tabIndex === 0).map(d => d.dataset.date)).toEqual(['2026-09-16']);
+        day(root, '2026-09-16').dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+        await waitForChanges();
+        expect(days(root).filter(d => d.tabIndex === 0).map(d => d.dataset.date)).toEqual(['2026-09-23']);
+    });
+    it('PageDown moves a month and clamps the day (Jan 31 -> Feb 28)', async () => {
+        const { root, waitForChanges } = await render(h("bs-datepicker", { value: "2027-01-31" }));
+        day(root, '2027-01-31').dispatchEvent(new KeyboardEvent('keydown', { key: 'PageDown', bubbles: true }));
+        await waitForChanges();
+        expect(days(root).filter(d => d.tabIndex === 0).map(d => d.dataset.date)).toEqual(['2027-02-28']);
+    });
+    describe('month/year dropdowns', () => {
+        const triggers = (root) => root.shadowRoot.querySelectorAll('bs-input');
+        const items = (root) => Array.from(root.shadowRoot.querySelectorAll('[part="menu"] bs-menu-item'));
+        it('renders a dropdown trigger per field showing the current month and year', async () => {
+            const { root } = await render(h("bs-datepicker", { value: "2026-09-16" }));
+            const t = triggers(root);
+            expect(t.length).toBe(2);
+            expect(t[0].type).toBe('dropdown');
+            expect(t[0].value).toBe('September');
+            expect(t[1].value).toBe('2026');
+            expect(root.shadowRoot.querySelector('[part="menu"]')).toBeNull();
+        });
+        it('opens a list of all 12 months with a checkmark on the current one', async () => {
+            const { root, waitForChanges } = await render(h("bs-datepicker", { value: "2026-09-16" }));
+            triggers(root)[0].dispatchEvent(new CustomEvent('bsOpen', { detail: true }));
+            await waitForChanges();
+            const list = items(root);
+            expect(list.length).toBe(12);
+            const checked = list.filter(i => i.querySelector('svg'));
+            expect(checked.length).toBe(1);
+            expect(checked[0].textContent).toBe('September');
+        });
+        it('opens scrolled so the current month is in view (centred)', async () => {
+            const { root, waitForChanges } = await render(h("bs-datepicker", { value: "2026-09-16" }));
+            triggers(root)[0].dispatchEvent(new CustomEvent('bsOpen', { detail: true }));
+            await waitForChanges();
+            await new Promise(r => setTimeout(r, 300));
+            const menu = sr(root).querySelector('.bs-datepicker__menu');
+            expect(menu.scrollTop).toBeGreaterThan(100);
+        });
+        it('picking a month changes the displayed month and closes the list', async () => {
+            const { root, waitForChanges } = await render(h("bs-datepicker", { value: "2026-09-16" }));
+            triggers(root)[0].dispatchEvent(new CustomEvent('bsOpen', { detail: true }));
+            await waitForChanges();
+            items(root)[5].dispatchEvent(new CustomEvent('bsSelect'));
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[part="menu"]')).toBeNull();
+            expect(triggers(root)[0].value).toBe('June');
+            expect(day(root, '2026-06-15').getAttribute('part')).not.toContain('outside');
+            // Browsing doesn't change the selection.
+            expect(root.value).toBe('2026-09-16');
+        });
+        it('picking a year changes the displayed year', async () => {
+            const { root, waitForChanges } = await render(h("bs-datepicker", { value: "2026-09-16" }));
+            triggers(root)[1].dispatchEvent(new CustomEvent('bsOpen', { detail: true }));
+            await waitForChanges();
+            const target = items(root).find(i => i.textContent === '2028');
+            target.dispatchEvent(new CustomEvent('bsSelect'));
+            await waitForChanges();
+            expect(triggers(root)[1].value).toBe('2028');
+            expect(day(root, '2028-09-15')).not.toBeNull();
+        });
+        it('limits the year list to min/max', async () => {
+            const { root, waitForChanges } = await render(h("bs-datepicker", { value: "2026-09-16", min: "2025-01-01", max: "2027-12-31" }));
+            triggers(root)[1].dispatchEvent(new CustomEvent('bsOpen', { detail: true }));
+            await waitForChanges();
+            expect(items(root).map(i => i.textContent)).toEqual(['2025', '2026', '2027']);
+        });
+        it('closes on Escape', async () => {
+            const { root, waitForChanges } = await render(h("bs-datepicker", { value: "2026-09-16" }));
+            triggers(root)[0].dispatchEvent(new CustomEvent('bsOpen', { detail: true }));
+            await waitForChanges();
+            root.shadowRoot.querySelector('.bs-datepicker__dropdown').dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[part="menu"]')).toBeNull();
+        });
+    });
+    describe('range', () => {
+        it('renders start/end fields instead of dropdowns, and highlights the days between', async () => {
+            const { root } = await render(h("bs-datepicker", { range: true, start: "2026-09-11", end: "2026-09-16" }));
+            const fields = root.shadowRoot.querySelectorAll('bs-input');
+            expect(fields.length).toBe(2);
+            expect(fields[0].label).toBe('Start date');
+            expect(fields[0].value).toBe('11 Sept 2026');
+            const inRange = Array.from(root.shadowRoot.querySelectorAll('[part~="in-range"]')).map(e => e.dataset.date);
+            expect(inRange).toEqual(['2026-09-12', '2026-09-13', '2026-09-14', '2026-09-15']);
+            expect(day(root, '2026-09-11').getAttribute('part')).toContain('selected');
+            expect(day(root, '2026-09-16').getAttribute('part')).toContain('selected');
+        });
+        it('two clicks pick a range: first emits an open range, second completes it', async () => {
+            const { root, waitForChanges } = await render(h("bs-datepicker", { range: true, start: "2026-09-01", end: "2026-09-02" }));
+            const events = [];
+            root.addEventListener('bsChange', (e) => events.push(e.detail));
+            day(root, '2026-09-10').click();
+            await waitForChanges();
+            day(root, '2026-09-15').click();
+            await waitForChanges();
+            expect(events).toEqual([
+                { start: '2026-09-10', end: '' },
+                { start: '2026-09-10', end: '2026-09-15' },
+            ]);
+            expect(root.start).toBe('2026-09-10');
+            expect(root.end).toBe('2026-09-15');
+        });
+        it('a click before the start restarts the range instead of reversing it', async () => {
+            const { root, waitForChanges } = await render(h("bs-datepicker", { range: true, start: "2026-09-11" }));
+            day(root, '2026-09-05').click();
+            await waitForChanges();
+            expect(root.start).toBe('2026-09-05');
+            expect(root.end).toBe('');
+        });
+        it('a click after a completed range starts a new one', async () => {
+            const { root, waitForChanges } = await render(h("bs-datepicker", { range: true, start: "2026-09-11", end: "2026-09-16" }));
+            day(root, '2026-09-20').click();
+            await waitForChanges();
+            expect(root.start).toBe('2026-09-20');
+            expect(root.end).toBe('');
+        });
+    });
+});

package/dist/collection/components/bs-datepicker/bs-datepicker.css

@@ -0,0 +1,325 @@
+/**
+ * @prop --bs-datepicker-width: Width of the card. 364px, exact match to Figma.
+ * @prop --bs-datepicker-bg: Card background. Aliased to --bs-paper-bg-raised (the `bs-card` raised surface).
+ * @prop --bs-datepicker-radius: Card corner radius. Aliased to --bs-border-radius-150.
+ * @prop --bs-datepicker-padding: Card padding. Aliased to --bs-spacing-200.
+ * @prop --bs-datepicker-gap: Vertical gap between the header, nav and grid. Aliased to --bs-spacing-150.
+ * @prop --bs-datepicker-shadow: Card shadow. Aliased to --bs-shadow-md.
+ * @prop --bs-datepicker-menu-max-height: Max height of the month/year dropdown list before it scrolls. 280px.
+ * @prop --bs-datepicker-band-bridge: Horizontal overlap that joins adjacent range-band cells across the column gap. Aliased to --bs-spacing-50 (keep equal to the gap between days).
+ * @prop --bs-datepicker-day-size: Width/height of each day button. Aliased to --bs-spacing-550 (44px).
+ * @prop --bs-datepicker-day-radius: Corner radius of each day button. Aliased to --bs-border-radius-100.
+ * @prop --bs-datepicker-day-gap: Gap between day rows. Aliased to --bs-spacing-50.
+ * @prop --bs-datepicker-font-size: Day and title font size. Aliased to --bs-font-size-md.
+ * @prop --bs-datepicker-line-height: Day and title line height. Aliased to --bs-line-height-body-md.
+ * @prop --bs-datepicker-weekday-font-size: Weekday header font size. Aliased to --bs-font-size-sm.
+ * @prop --bs-datepicker-weekday-line-height: Weekday header line height. Aliased to --bs-line-height-body-sm.
+ * @prop --bs-datepicker-color: Day number color. Aliased to --bs-text-default.
+ * @prop --bs-datepicker-color-muted: Color of days from the adjacent months. Aliased to --bs-text-muted.
+ * @prop --bs-datepicker-color-weekday: Weekday header color. Aliased to --bs-text-secondary.
+ * @prop --bs-datepicker-color-disabled: Color of disabled days. Aliased to --bs-text-on-disabled.
+ * @prop --bs-datepicker-hover: Background of an unselected day on hover. Aliased to --bs-surface-hover.
+ * @prop --bs-datepicker-pressed: Background of an unselected day when pressed. Aliased to --bs-surface-pressed.
+ * @prop --bs-datepicker-focus-bg: Background of an unselected day when focused. Aliased to --bs-surface-focus.
+ * @prop --bs-datepicker-selected-bg: Background of a selected day. Aliased to --bs-color-primary-default.
+ * @prop --bs-datepicker-selected-bg-hover: Background of a selected day on hover. Aliased to --bs-color-primary-hover.
+ * @prop --bs-datepicker-selected-bg-pressed: Background of a selected day when pressed. Aliased to --bs-color-primary-pressed.
+ * @prop --bs-datepicker-selected-bg-focus: Background of a selected day when focused. Aliased to --bs-color-primary-focused.
+ * @prop --bs-datepicker-selected-bg-disabled: Background of a selected day when disabled. Aliased to --bs-surface-action-disabled.
+ * @prop --bs-datepicker-selected-color: Text color of a selected day. Aliased to --bs-text-on-action.
+ * @prop --bs-datepicker-range-bg: Background of the band between range start and end. Aliased to --bs-color-primary-container.
+ * @prop --bs-datepicker-today-border: Outline color marking today. Aliased to --bs-border-primary.
+ * @prop --bs-datepicker-focus-ring-color: Focus ring color. Aliased to --bs-border-neutral-focus.
+ */
+:host {
+  display: inline-block;
+
+  --bs-datepicker-width: 364px;
+  --bs-datepicker-bg: var(--bs-paper-bg-raised);
+  --bs-datepicker-radius: var(--bs-border-radius-150);
+  --bs-datepicker-padding: var(--bs-spacing-200);
+  --bs-datepicker-gap: var(--bs-spacing-150);
+  --bs-datepicker-shadow: var(--bs-shadow-md);
+
+  --bs-datepicker-menu-max-height: 280px;
+  --bs-datepicker-day-size: var(--bs-spacing-550);
+  --bs-datepicker-day-radius: var(--bs-border-radius-100);
+  --bs-datepicker-day-gap: var(--bs-spacing-50);
+  --bs-datepicker-band-bridge: var(--bs-spacing-50);
+
+  --bs-datepicker-font-size: var(--bs-font-size-md);
+  --bs-datepicker-line-height: var(--bs-line-height-body-md);
+  --bs-datepicker-weekday-font-size: var(--bs-font-size-sm);
+  --bs-datepicker-weekday-line-height: var(--bs-line-height-body-sm);
+
+  --bs-datepicker-color: var(--bs-text-default);
+  --bs-datepicker-color-muted: var(--bs-text-muted);
+  --bs-datepicker-color-weekday: var(--bs-text-secondary);
+  --bs-datepicker-color-disabled: var(--bs-text-on-disabled);
+
+  --bs-datepicker-hover: var(--bs-surface-hover);
+  --bs-datepicker-pressed: var(--bs-surface-pressed);
+  --bs-datepicker-focus-bg: var(--bs-surface-focus);
+  --bs-datepicker-selected-bg: var(--bs-color-primary-default);
+  --bs-datepicker-selected-bg-hover: var(--bs-color-primary-hover);
+  --bs-datepicker-selected-bg-pressed: var(--bs-color-primary-pressed);
+  --bs-datepicker-selected-bg-focus: var(--bs-color-primary-focused);
+  --bs-datepicker-selected-bg-disabled: var(--bs-surface-action-disabled);
+  --bs-datepicker-selected-color: var(--bs-text-on-action);
+  --bs-datepicker-range-bg: var(--bs-color-primary-container);
+  --bs-datepicker-today-border: var(--bs-border-primary);
+  --bs-datepicker-focus-ring-color: var(--bs-border-neutral-focus);
+}
+
+.bs-datepicker {
+  width: var(--bs-datepicker-width);
+  max-width: 100%;
+  color: var(--bs-datepicker-color);
+  font-size: var(--bs-datepicker-font-size);
+  /* bs-card supplies the surface. `visible` so the month/year list can hang over the edge. */
+  --bs-card-bg: var(--bs-datepicker-bg);
+  --bs-card-radius: var(--bs-datepicker-radius);
+  --bs-card-padding: var(--bs-datepicker-padding);
+  --bs-card-shadow: var(--bs-datepicker-shadow);
+  --bs-card-overflow: visible;
+}
+
+.bs-datepicker__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-datepicker-gap);
+}
+
+.bs-datepicker__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-datepicker__header--range > bs-input {
+  /* Figma: the Start/End date labels are 16px semibold (bs-input's own default is 14px medium). */
+  --bs-input-label-font-size: var(--bs-font-size-md);
+  --bs-input-label-font-weight: var(--bs-font-weight-semibold);
+  --bs-input-label-line-height: calc(var(--bs-line-height-body-md) * 1px);
+}
+
+.bs-datepicker__header > bs-input {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+/* The Figma design has no visible label on the month/year dropdowns; bs-input only names its
+   field through its label, so keep the label for assistive tech and hide it visually. */
+.bs-datepicker__select::part(label) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.bs-datepicker__dropdown {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.bs-datepicker__dropdown bs-input {
+  width: 100%;
+}
+
+/* The scroll box owns the shadow and rounding, so the inner list's own shadow is turned off
+   (it would be clipped by the scroll box anyway). */
+.bs-datepicker__menu {
+  position: absolute;
+  top: calc(100% + var(--bs-spacing-50));
+  inset-inline: 0;
+  z-index: 2;
+  max-height: var(--bs-datepicker-menu-max-height);
+  overflow-y: auto;
+  border-radius: var(--bs-border-radius-100);
+  background: var(--bs-surface-raised);
+  box-shadow: var(--bs-shadow-md);
+  --bs-menu-shadow: none;
+}
+
+.bs-datepicker__menu bs-menu-item {
+  --bs-menu-item-color: var(--bs-datepicker-color);
+}
+
+.bs-datepicker__menu bs-menu-item::part(label) {
+  flex: 1;
+  text-align: start;
+}
+
+.bs-datepicker__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-datepicker__option svg {
+  width: 20px;
+  height: 20px;
+  flex: none;
+}
+
+.bs-datepicker__nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bs-datepicker__title {
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: calc(var(--bs-datepicker-line-height) * 1px);
+}
+
+.bs-datepicker__nav-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bs-spacing-600);
+  height: var(--bs-spacing-600);
+  padding: 0;
+  border: none;
+  border-radius: var(--bs-datepicker-day-radius);
+  background: transparent;
+  color: var(--bs-icon-default);
+  cursor: pointer;
+}
+
+.bs-datepicker__nav-button svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-datepicker__nav-button:hover {
+  background: var(--bs-datepicker-hover);
+}
+
+.bs-datepicker__grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-datepicker-day-gap);
+}
+
+.bs-datepicker__row {
+  display: grid;
+  grid-template-columns: repeat(7, var(--bs-datepicker-day-size));
+  justify-content: space-between;
+}
+
+.bs-datepicker__weekday {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--bs-datepicker-day-size);
+  color: var(--bs-datepicker-color-weekday);
+  font-size: var(--bs-datepicker-weekday-font-size);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: calc(var(--bs-datepicker-weekday-line-height) * 1px);
+}
+
+.bs-datepicker__cell {
+  display: flex;
+  justify-content: center;
+}
+
+/* The range band is painted on the cells so it runs unbroken behind the in-between days; a
+   cell's shadow bridges the gap to the next in-range cell in the same week. The two end days are
+   not part of it (Figma), and its ends are rounded like a day button. */
+.bs-datepicker__cell--in-range {
+  background: var(--bs-datepicker-range-bg);
+  box-shadow: calc(var(--bs-datepicker-band-bridge) + 1px) 0 0 var(--bs-datepicker-range-bg);
+}
+
+.bs-datepicker__cell--band-start {
+  border-start-start-radius: var(--bs-datepicker-day-radius);
+  border-end-start-radius: var(--bs-datepicker-day-radius);
+}
+
+.bs-datepicker__cell--band-end {
+  border-start-end-radius: var(--bs-datepicker-day-radius);
+  border-end-end-radius: var(--bs-datepicker-day-radius);
+  box-shadow: none;
+}
+
+.bs-datepicker__day {
+  width: var(--bs-datepicker-day-size);
+  height: var(--bs-datepicker-day-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--bs-datepicker-day-radius);
+  background: transparent;
+  color: var(--bs-datepicker-color);
+  font-family: inherit;
+  font-size: var(--bs-datepicker-font-size);
+  line-height: calc(var(--bs-datepicker-line-height) * 1px);
+  cursor: pointer;
+}
+
+.bs-datepicker__day--outside {
+  color: var(--bs-datepicker-color-muted);
+}
+
+.bs-datepicker__day--today {
+  box-shadow: inset 0 0 0 1px var(--bs-datepicker-today-border);
+}
+
+.bs-datepicker__day:not(:disabled):hover {
+  background: var(--bs-datepicker-hover);
+}
+
+.bs-datepicker__day:not(:disabled):active {
+  background: var(--bs-datepicker-pressed);
+}
+
+/* An in-range day already sits on the range band; hovering it keeps that colour (Figma "In-range,
+   Hovered"). */
+.bs-datepicker__day--in-range:not(:disabled):hover,
+.bs-datepicker__day--in-range:not(:disabled):active {
+  background: var(--bs-datepicker-range-bg);
+}
+
+.bs-datepicker__day--selected,
+.bs-datepicker__day--selected.bs-datepicker__day--outside {
+  background: var(--bs-datepicker-selected-bg);
+  color: var(--bs-datepicker-selected-color);
+}
+
+.bs-datepicker__day--selected:not(:disabled):hover {
+  background: var(--bs-datepicker-selected-bg-hover);
+}
+
+.bs-datepicker__day--selected:not(:disabled):active {
+  background: var(--bs-datepicker-selected-bg-pressed);
+}
+
+.bs-datepicker__day:disabled {
+  color: var(--bs-datepicker-color-disabled);
+  cursor: not-allowed;
+}
+
+.bs-datepicker__day--selected:disabled {
+  background: var(--bs-datepicker-selected-bg-disabled);
+}
+
+/* Figma focus state: a state-colored fill plus a 2px ring sitting flush against the day's edge. */
+.bs-datepicker__day:focus-visible {
+  background: var(--bs-datepicker-focus-bg);
+  outline: 2px solid var(--bs-datepicker-focus-ring-color);
+  outline-offset: 0;
+}
+
+.bs-datepicker__day--selected:focus-visible {
+  background: var(--bs-datepicker-selected-bg-focus);
+}
+
+.bs-datepicker__nav-button:focus-visible {
+  outline: 2px solid var(--bs-datepicker-focus-ring-color);
+  outline-offset: 2px;
+}