@brandsync/wc 1.10.0 → 1.11.0

package/dist/collection/components/bs-cookie-consent/bs-cookie-consent.cmp.test.js

@@ -0,0 +1,217 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const sr = (root) => root.shadowRoot;
+const part = (root, p) => sr(root).querySelector(`[part~="${p}"]`);
+const text = (el) => (el?.textContent ?? '').trim();
+const wait = (ms) => new Promise(r => setTimeout(r, ms));
+describe('bs-cookie-consent', () => {
+    it('defaults to the banner, built on bs-card, with heading, text and the three actions', async () => {
+        const { root } = await render(h("bs-cookie-consent", null));
+        expect(root).toEqualAttribute('type', 'banner');
+        expect(part(root, 'container').tagName).toBe('BS-CARD');
+        expect(text(part(root, 'heading'))).toBe('Your cookie choices');
+        expect(text(part(root, 'customise'))).toBe('Customise');
+        expect(text(part(root, 'reject'))).toBe('Reject optional');
+        expect(text(part(root, 'accept'))).toBe('Accept all');
+    });
+    it('is a labelled region', async () => {
+        const { root } = await render(h("bs-cookie-consent", null));
+        expect(part(root, 'container')).toEqualAttribute('role', 'region');
+        expect(part(root, 'container')).toEqualAttribute('aria-labelledby', 'heading');
+        expect(sr(root).getElementById('heading')).not.toBeNull();
+    });
+    it('shows the policy link only when policyUrl is set', async () => {
+        const a = await render(h("bs-cookie-consent", null));
+        expect(part(a.root, 'policy')).toBeNull();
+        const b = await render(h("bs-cookie-consent", { policyUrl: "/cookies" }));
+        const link = part(b.root, 'policy');
+        expect(link.getAttribute('href')).toBe('/cookies');
+        expect(text(link)).toBe('Read the cookie policy');
+    });
+    it('renders the heading at the requested level, clamped to 1-6', async () => {
+        const tags = [];
+        for (const level of [1, 2, 3, 9]) {
+            const { root } = await render(h("bs-cookie-consent", { headingLevel: level }));
+            tags.push(part(root, 'heading').tagName);
+        }
+        expect(tags).toEqual(['H1', 'H2', 'H3', 'H6']);
+    });
+    it('gives Reject optional the same size as Accept all (fair choice)', async () => {
+        const { root } = await render(h("bs-cookie-consent", null));
+        const a = part(root, 'accept').getBoundingClientRect();
+        const r = part(root, 'reject').getBoundingClientRect();
+        expect(r.height).toBe(a.height);
+        expect(r.width).toBe(a.width);
+    });
+    describe('events', () => {
+        it('Accept all, Reject optional and Customise', async () => {
+            const { root, waitForChanges } = await render(h("bs-cookie-consent", null));
+            const events = [];
+            root.addEventListener('bsAccept', (e) => events.push(['accept', e.detail]));
+            root.addEventListener('bsReject', (e) => events.push(['reject', e.detail]));
+            root.addEventListener('bsCustomise', () => events.push('customise'));
+            part(root, 'customise').click();
+            part(root, 'reject').click();
+            part(root, 'accept').click();
+            await waitForChanges();
+            expect(events).toEqual([
+                'customise',
+                ['reject', { choices: { necessary: true, preferences: false, analytics: false, marketing: false } }],
+                ['accept', { choices: { necessary: true, preferences: true, analytics: true, marketing: true } }],
+            ]);
+        });
+    });
+    describe('banner responsiveness', () => {
+        const rects = async (width) => {
+            const { root } = await render(h("div", { style: { width: `${width}px` } }, h("bs-cookie-consent", null)));
+            await wait(100);
+            const el = root.querySelector('bs-cookie-consent');
+            return { content: part(el, 'heading').getBoundingClientRect(), accept: part(el, 'accept').getBoundingClientRect(), customise: part(el, 'customise').getBoundingClientRect() };
+        };
+        it('lays the actions out beside the copy in a wide container', async () => {
+            const r = await rects(1200);
+            expect(r.accept.top).toBeLessThan(r.content.bottom + 40);
+            expect(r.customise.left).toBeLessThan(r.accept.left);
+        });
+        it('stacks full-width buttons, Accept all first, in a narrow container', async () => {
+            const r = await rects(332);
+            expect(r.accept.top).toBeLessThan(r.customise.top);
+            expect(r.accept.width).toBeGreaterThan(280);
+        });
+    });
+    describe('card', () => {
+        it('is the compact form: 420px, header with tile, a divider and Customise on the left', async () => {
+            const { root: wrap } = await render(h("div", { style: { width: '800px' } }, h("bs-cookie-consent", { type: "card", policyUrl: "/c" })));
+            const root = wrap.querySelector('bs-cookie-consent');
+            expect(part(root, 'container').getBoundingClientRect().width).toBe(420);
+            expect(text(part(root, 'heading'))).toBe('Cookies on this site');
+            expect(part(root, 'art').size).toBe('md');
+            expect(part(root, 'customise').getBoundingClientRect().left).toBeLessThan(part(root, 'reject').getBoundingClientRect().left);
+        });
+    });
+    describe('preferences', () => {
+        const cats = (root) => Array.from(sr(root).querySelectorAll('[part~="category"]'));
+        it('is 560px wide with the four default categories, a close button and the three footer actions', async () => {
+            const { root: wrap } = await render(h("div", { style: { width: '800px' } }, h("bs-cookie-consent", { type: "preferences" })));
+            const root = wrap.querySelector('bs-cookie-consent');
+            expect(part(root, 'container').getBoundingClientRect().width).toBe(560);
+            expect(text(part(root, 'heading'))).toBe('Cookie preferences');
+            expect(cats(root).map(c => text(c.querySelector('.bs-cookie-consent__category-name')))).toEqual(['Strictly necessary', 'Preferences', 'Analytics', 'Marketing']);
+            expect(part(root, 'close')).not.toBeNull();
+            expect(text(part(root, 'reject'))).toBe('Reject optional');
+            expect(text(part(root, 'accept'))).toBe('Accept all');
+            expect(text(part(root, 'save'))).toBe('Save choices');
+        });
+        it('matches the Figma spacing: with a cookie list under every category and the first expanded, the dialog is 834px tall', async () => {
+            const three = ['a — one.', 'b — two.', 'c — three.'];
+            const { root: wrap } = await render(h("div", { style: { width: '800px' } }, h("bs-cookie-consent", { type: "preferences", categories: [
+                    { id: 'n', label: 'Strictly necessary', description: 'Needed for sign-in, security and to keep the service running. These cannot be turned off.', required: true, cookies: three },
+                    { id: 'p', label: 'Preferences', description: 'Remember your language, theme and table layouts on this device.', enabled: true, cookies: three },
+                    { id: 'a', label: 'Analytics', description: 'Help us understand which features are used so we can improve them. Data is anonymised.', cookies: three },
+                    { id: 'm', label: 'Marketing', description: 'Show relevant EG products on other websites.', cookies: three },
+                ] })));
+            const root = wrap.querySelector('bs-cookie-consent');
+            sr(root).querySelector('button.bs-cookie-consent__disclosure').click();
+            await wait(300);
+            expect(Math.abs(part(root, 'container').getBoundingClientRect().height - 834)).toBeLessThanOrEqual(1);
+            // Each divider is an 8px row with the 1px line centred in it.
+            expect(sr(root).querySelector('.bs-cookie-consent__rule').getBoundingClientRect().height).toBe(8);
+        });
+        it('shows "Always on" for required categories and a named switch for the rest', async () => {
+            const { root } = await render(h("bs-cookie-consent", { type: "preferences" }));
+            const [necessary, preferences] = cats(root);
+            expect(text(necessary.querySelector('bs-chip-informative'))).toBe('Always on');
+            expect(necessary.querySelector('bs-switch')).toBeNull();
+            const sw = preferences.querySelector('bs-switch');
+            expect(sw.ariaLabel).toBe('Preferences');
+            expect(sw.checked).toBe(true);
+            expect(cats(root)[2].querySelector('bs-switch').checked).toBe(false);
+        });
+        it('expands and collapses the cookie list, with aria-expanded', async () => {
+            const { root, waitForChanges } = await render(h("bs-cookie-consent", { type: "preferences" }));
+            const toggle = () => sr(root).querySelector('button.bs-cookie-consent__disclosure');
+            expect(text(toggle())).toBe('See 3 cookies');
+            expect(toggle()).toEqualAttribute('aria-expanded', 'false');
+            expect(sr(root).querySelector('ol')).toBeNull();
+            toggle().click();
+            await waitForChanges();
+            expect(toggle()).toEqualAttribute('aria-expanded', 'true');
+            expect(Array.from(sr(root).querySelectorAll('ol li')).map(text)).toHaveLength(3);
+            toggle().click();
+            await waitForChanges();
+            expect(sr(root).querySelector('ol')).toBeNull();
+        });
+        it('emits bsChoice when a switch is toggled, and bsSave with the current choices', async () => {
+            const { root, waitForChanges } = await render(h("bs-cookie-consent", { type: "preferences" }));
+            const events = [];
+            root.addEventListener('bsChoice', (e) => events.push(['choice', e.detail]));
+            root.addEventListener('bsSave', (e) => events.push(['save', e.detail]));
+            cats(root)[2].querySelector('bs-switch').dispatchEvent(new CustomEvent('bsChange', { detail: true }));
+            await waitForChanges();
+            part(root, 'save').click();
+            await waitForChanges();
+            expect(events).toEqual([
+                ['choice', { id: 'analytics', enabled: true }],
+                ['save', { choices: { necessary: true, preferences: true, analytics: true, marketing: false } }],
+            ]);
+        });
+        it('takes custom categories, with their cookies and initial state', async () => {
+            const { root } = await render(h("bs-cookie-consent", { type: "preferences", categories: [
+                    { id: 'necessary', label: 'Needed', required: true },
+                    { id: 'stats', label: 'Statistics', enabled: true, cookies: ['a', 'b'] },
+                ] }));
+            expect(cats(root)).toHaveLength(2);
+            expect(text(sr(root).querySelector('button.bs-cookie-consent__disclosure'))).toBe('See 2 cookies');
+            let detail;
+            root.addEventListener('bsSave', (e) => (detail = e.detail));
+            part(root, 'save').click();
+            expect(detail).toEqual({ choices: { necessary: true, stats: true } });
+        });
+        it('Accept all / Reject optional report the right choices for custom categories', async () => {
+            const { root } = await render(h("bs-cookie-consent", { type: "preferences", categories: [{ id: 'n', label: 'N', required: true }, { id: 'x', label: 'X' }] }));
+            const got = [];
+            root.addEventListener('bsAccept', (e) => got.push(e.detail));
+            root.addEventListener('bsReject', (e) => got.push(e.detail));
+            part(root, 'accept').click();
+            part(root, 'reject').click();
+            expect(got).toEqual([{ choices: { n: true, x: true } }, { choices: { n: true, x: false } }]);
+        });
+        it('emits bsClose', async () => {
+            const { root, waitForChanges } = await render(h("bs-cookie-consent", { type: "preferences" }));
+            let closed = 0;
+            root.addEventListener('bsClose', () => closed++);
+            part(root, 'close').click();
+            await waitForChanges();
+            expect(closed).toBe(1);
+        });
+        it('is a labelled group', async () => {
+            const { root } = await render(h("bs-cookie-consent", { type: "preferences" }));
+            expect(part(root, 'container')).toEqualAttribute('role', 'group');
+        });
+    });
+    describe('saved', () => {
+        it('is a snackbar with the message, a Change action and no close button', async () => {
+            const { root, waitForChanges } = await render(h("bs-cookie-consent", { type: "saved" }));
+            const bar = part(root, 'container');
+            expect(bar.tagName).toBe('BS-SNACKBAR');
+            expect(bar.textContent).toContain('Cookie choices saved');
+            expect(bar.shadowRoot.querySelector('[part="close"]')).toBeNull();
+            let managed = 0;
+            root.addEventListener('bsManage', () => managed++);
+            bar.shadowRoot.querySelector('[part="action"]').click();
+            await waitForChanges();
+            expect(managed).toBe(1);
+            expect(bar.shadowRoot.querySelector('[part="action"]').textContent).toContain('Change');
+            // Figma: 32px check icon, and a 44px Change action.
+            expect(bar.shadowRoot.querySelector('[part="icon"]').getBoundingClientRect().width).toBe(32);
+            expect(bar.shadowRoot.querySelector('[part="action"]').getBoundingClientRect().height).toBe(44);
+        });
+        it('is 660x64 with the message on one line, as in the Figma', async () => {
+            const { root: wrap } = await render(h("div", { style: { width: '700px' } }, h("bs-cookie-consent", { type: "saved", description: "Cookie choices saved. Change them any time under Settings \u203A Privacy." })));
+            await wait(200);
+            const bar = wrap.querySelector('bs-cookie-consent').shadowRoot.querySelector('[part="container"]');
+            const box = bar.getBoundingClientRect();
+            expect(box.width).toBe(660);
+            expect(box.height).toBe(64);
+        });
+    });
+});

package/dist/collection/components/bs-cookie-consent/bs-cookie-consent.css

@@ -0,0 +1,350 @@
+/**
+ * @prop --bs-cookie-consent-width: Width of the `card` (420px), `preferences` (560px) and `saved` (660px) forms. The `banner` always fills its container. Never wider than the container.
+ * @prop --bs-cookie-consent-bg: Card background. Aliased to --bs-paper-bg-base (the `bs-card` base surface).
+ * @prop --bs-cookie-consent-radius: Card corner radius. Aliased to --bs-border-radius-150 (12px).
+ * @prop --bs-cookie-consent-padding: Card padding. Aliased to --bs-spacing-200 (16px).
+ * @prop --bs-cookie-consent-shadow: Card shadow. 0 8px 8px --bs-elevation-higher (Figma).
+ * @prop --bs-cookie-consent-color: Heading colour. Aliased to --bs-text-default.
+ * @prop --bs-cookie-consent-color-secondary: Paragraph colour. Aliased to --bs-text-secondary.
+ * @prop --bs-cookie-consent-link: Policy link text colour. Aliased to --bs-text-link.
+ * @prop --bs-cookie-consent-link-underline: Policy link underline colour. Aliased to --bs-border-info.
+ * @prop --bs-cookie-consent-rule: Divider colour. Aliased to --bs-border-default.
+ * @prop --bs-cookie-consent-banner-breakpoint: Documentation only -- the `banner` stacks into a column below a container width of 720px (CSS can't read a custom property in a container query).
+ */
+:host {
+  display: block;
+  /* The banner reacts to its own width, not the viewport's: it may sit in a narrow panel. */
+  container-type: inline-size;
+  max-width: 100%;
+
+  --bs-cookie-consent-width: 420px;
+  --bs-cookie-consent-bg: var(--bs-paper-bg-base);
+  --bs-cookie-consent-radius: var(--bs-border-radius-150);
+  --bs-cookie-consent-padding: var(--bs-spacing-200);
+  --bs-cookie-consent-shadow: 0 8px 8px var(--bs-elevation-higher);
+  --bs-cookie-consent-color: var(--bs-text-default);
+  --bs-cookie-consent-color-secondary: var(--bs-text-secondary);
+  --bs-cookie-consent-link: var(--bs-text-link);
+  --bs-cookie-consent-link-underline: var(--bs-border-info);
+  --bs-cookie-consent-rule: var(--bs-border-default);
+}
+
+:host([type='card']) {
+  width: var(--bs-cookie-consent-width);
+}
+
+:host([type='preferences']) {
+  --bs-cookie-consent-width: 560px;
+  width: var(--bs-cookie-consent-width);
+}
+
+:host([type='saved']) {
+  --bs-cookie-consent-width: 660px;
+  width: var(--bs-cookie-consent-width);
+}
+
+/* bs-card supplies the surface; this only sets how it looks here. */
+.bs-cookie-consent--banner,
+.bs-cookie-consent--card,
+.bs-cookie-consent--preferences {
+  --bs-card-bg: var(--bs-cookie-consent-bg);
+  --bs-card-radius: var(--bs-cookie-consent-radius);
+  --bs-card-padding: var(--bs-cookie-consent-padding);
+  --bs-card-shadow: var(--bs-cookie-consent-shadow);
+  color: var(--bs-cookie-consent-color);
+}
+
+.bs-cookie-consent p {
+  margin: 0;
+}
+
+.bs-cookie-consent__glyph,
+::slotted([slot='icon']) {
+  width: var(--bs-cookie-consent-glyph-size, 24px);
+  height: var(--bs-cookie-consent-glyph-size, 24px);
+}
+
+bs-icon-tile[size='md'] {
+  --bs-cookie-consent-glyph-size: 16px;
+}
+
+.bs-cookie-consent__heading {
+  margin: 0;
+  font-size: var(--bs-font-size-2xl);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: 32px;
+}
+
+.bs-cookie-consent__description {
+  color: var(--bs-cookie-consent-color-secondary);
+  font-size: var(--bs-font-size-md);
+  line-height: 24px;
+}
+
+.bs-cookie-consent__policy {
+  align-self: flex-start;
+  border-bottom: 1px solid var(--bs-cookie-consent-link-underline);
+  color: var(--bs-cookie-consent-link);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+  text-decoration: none;
+}
+
+.bs-cookie-consent__policy:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 2px;
+}
+
+.bs-cookie-consent__rule {
+  height: 8px;
+  background: linear-gradient(var(--bs-cookie-consent-rule), var(--bs-cookie-consent-rule)) center / 100% 1px no-repeat;
+}
+
+.bs-cookie-consent__spacer {
+  flex: 1 1 0;
+}
+
+/* --- buttons -------------------------------------------------------------------------------- */
+.bs-cookie-consent__actions bs-button {
+  --bs-button-height-md: var(--bs-spacing-550);
+}
+
+.bs-cookie-consent__text-button {
+  --bs-button-subtle-color: var(--bs-text-action);
+}
+
+/* Figma gives the buttons fixed widths; minimums here, so a longer (translated) label can still grow. */
+.bs-cookie-consent__actions--banner bs-button {
+  min-width: 140px;
+}
+
+.bs-cookie-consent__actions bs-button[part='reject'] {
+  min-width: 140px;
+}
+
+.bs-cookie-consent__actions bs-button[part='accept'] {
+  min-width: 103px;
+}
+
+.bs-cookie-consent__actions--banner bs-button[part='accept'] {
+  min-width: 140px;
+}
+
+.bs-cookie-consent__actions bs-button[part='save'] {
+  min-width: 127px;
+}
+
+.bs-cookie-consent__actions bs-button[part='customise'] {
+  min-width: 109px;
+}
+
+.bs-cookie-consent__actions--banner bs-button[part='customise'] {
+  min-width: 140px;
+}
+
+/* --- banner --------------------------------------------------------------------------------- */
+.bs-cookie-consent__banner {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-200);
+}
+
+.bs-cookie-consent__banner-content {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--bs-spacing-200);
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+bs-icon-tile {
+  flex: none;
+}
+
+.bs-cookie-consent__copy {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--bs-spacing-100);
+  min-width: 0;
+}
+
+.bs-cookie-consent__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-cookie-consent__actions--banner {
+  flex: none;
+  justify-content: flex-end;
+}
+
+/* Narrow container: the actions drop under the copy, full width, Accept all first. */
+@container (max-width: 719px) {
+  .bs-cookie-consent__banner {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .bs-cookie-consent__banner-content {
+    flex-direction: column;
+    gap: var(--bs-spacing-150);
+  }
+
+  .bs-cookie-consent__actions--banner {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .bs-cookie-consent__actions--banner bs-button {
+    --bs-button-width: 100%;
+  }
+}
+
+/* --- card ----------------------------------------------------------------------------------- */
+.bs-cookie-consent__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-100);
+}
+
+/* Figma: the dialog's rows are 12px apart (spacing/150), and each divider is an 8px-tall row with a 1px
+   line centred in it -- so 12px of space, 4px of row, the line, 4px of row, 12px of space. */
+.bs-cookie-consent__prefs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-150);
+}
+
+.bs-cookie-consent__card .bs-cookie-consent__policy {
+  margin-bottom: 0;
+}
+
+.bs-cookie-consent__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.bs-cookie-consent--preferences .bs-cookie-consent__head {
+  gap: var(--bs-spacing-100);
+}
+
+.bs-cookie-consent__head .bs-cookie-consent__heading {
+  min-width: 0;
+}
+
+.bs-cookie-consent__head bs-icon-button svg {
+  width: 20px;
+  height: 20px;
+}
+
+.bs-cookie-consent__actions--card,
+.bs-cookie-consent__actions--prefs {
+  gap: var(--bs-spacing-100);
+}
+
+.bs-cookie-consent__actions--card {
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+/* --- preferences ---------------------------------------------------------------------------- */
+.bs-cookie-consent__category {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* Figma: only the first category (strictly necessary) has vertical padding. */
+.bs-cookie-consent__prefs > .bs-cookie-consent__description + .bs-cookie-consent__category {
+  padding: 6px 0;
+}
+
+.bs-cookie-consent__category-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-100);
+}
+
+/* Figma: a row with a switch is as tall as the 48px switch box; the "Always on" row isn't. */
+.bs-cookie-consent__category-head--switch {
+  min-height: 48px;
+}
+
+/* Figma: with a switch, the header row and the description sit flush (the 48px switch box already supplies the
+   air); the "Always on" category keeps its 6px gap. */
+.bs-cookie-consent__category-head--switch + .bs-cookie-consent__category-text {
+  margin-top: -6px;
+}
+
+.bs-cookie-consent__category-name {
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: 20px;
+}
+
+.bs-cookie-consent__category-text {
+  color: var(--bs-cookie-consent-color-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-cookie-consent__disclosure {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+  min-height: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--bs-text-action);
+  font-family: inherit;
+  font-size: var(--bs-font-size-md);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: 24px;
+  cursor: pointer;
+}
+
+.bs-cookie-consent__disclosure svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-cookie-consent__disclosure:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 2px;
+  border-radius: var(--bs-border-radius-50);
+}
+
+.bs-cookie-consent__cookie-list {
+  margin: 0;
+  padding-inline-start: 21px;
+  color: var(--bs-cookie-consent-color-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+/* --- saved ---------------------------------------------------------------------------------- */
+.bs-cookie-consent--saved {
+  display: block;
+  /* Figma: a 32px check circle (bs-snackbar's default is 24px), which makes the bar 64px tall. */
+  --bs-snackbar-icon-size: 32px;
+  /* Figma: the Change action sits right against the message with no gap, so the message gets the room it
+     needs to stay on one line. It keeps the snackbar's own 8px right padding so the button's hover/pressed
+     background doesn't touch the bar's edge. */
+  --bs-snackbar-gap: 0px;
+}
+
+/* Figma: the Change action is plain text in the snackbar's own text colour (white on the dark bar). The
+   outlined blue button bs-snackbar uses by default would be unreadable on it. */
+.bs-cookie-consent--saved::part(action) {
+  --bs-button-subtle-color: var(--bs-snackbar-text-default);
+  --bs-button-subtle-hover: color-mix(in srgb, var(--bs-snackbar-text-default) 16%, transparent);
+  --bs-button-subtle-pressed: color-mix(in srgb, var(--bs-snackbar-text-default) 24%, transparent);
+  /* Figma: the Change action is 44px high (bs-button's sm is 40px) and medium weight. */
+  --bs-button-height-sm: var(--bs-spacing-550);
+  --bs-button-padding-x-sm: var(--bs-spacing-200);
+}