@brandsync/wc 1.10.0 → 1.12.0

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

@@ -0,0 +1,668 @@
+import { h } from "@stencil/core";
+/**
+ * A cookie consent prompt in four forms, matching the Figma "Cookie consent" component:
+ *
+ * - `banner` -- a wide bar: icon, heading, text, policy link, and Customise / Reject optional / Accept
+ *   all. Stacks into a column on narrow containers (its own width, not the viewport's).
+ * - `card` -- the compact version of the same question, in a card.
+ * - `preferences` -- the detailed dialog: one row per cookie category with a switch (strictly
+ *   necessary is "Always on"), an expandable list of the cookies in each, and Reject optional /
+ *   Accept all / Save choices.
+ * - `saved` -- a dark confirmation bar ("Cookie choices saved") with a Change action.
+ *
+ * The component only collects the choice. It doesn't set, read or delete cookies, remember that the
+ * user answered, or decide when to show itself: your app does that from the events, and swaps `type`
+ * (e.g. `banner` -> `preferences` on `bsCustomise`, `preferences` -> `saved` on `bsSave`).
+ *
+ * **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions),
+ * `bs-switch` (the category switches), `bs-chip-informative` (the "Always on" badge), `bs-icon-button`
+ * (the close button), `bs-snackbar` (the saved confirmation).
+ *
+ * ## When to use
+ * - Asking for consent to optional cookies or similar tracking, as the law of your market requires.
+ *
+ * ## When not to use
+ * - Telling people about necessary cookies only -- that needs no consent prompt.
+ *
+ * ## Fair choice
+ * "Reject optional" has the same prominence as "Accept all" (same size, both always visible). Keep it
+ * that way: a prompt that makes refusing harder than accepting isn't valid consent in most places.
+ *
+ * @slot icon - Replaces the cookie glyph in the icon tile. Draw it with `currentColor`.
+ * @part container - The card (or the snackbar, for `saved`).
+ * @part art - The icon tile.
+ * @part heading - The heading.
+ * @part description - The paragraph under it.
+ * @part policy - The cookie policy link.
+ * @part actions - The row of consent buttons.
+ * @part customise - The Customise button.
+ * @part reject - The Reject optional button.
+ * @part accept - The Accept all button.
+ * @part save - The Save choices button (`preferences`).
+ * @part close - The close button (`preferences`).
+ * @part category - Each cookie category (`preferences`).
+ * @part switch - Each category's switch (`preferences`).
+ */
+export class BsCookieConsent {
+    /** Which form: `banner`, `card`, `preferences` or `saved`. */
+    type = 'banner';
+    /** Heading. Defaults per `type`. */
+    heading;
+    /** HTML heading level, 1-6. */
+    headingLevel = 2;
+    /** Paragraph under the heading (the message, for `saved`). Defaults per `type`. */
+    description;
+    /** URL of your cookie policy. The "Read the cookie policy" link is only shown when this is set. */
+    policyUrl;
+    /** Text of the policy link. */
+    policyLabel = 'Read the cookie policy';
+    /** Label of the Customise button. */
+    customiseLabel = 'Customise';
+    /** Label of the Reject optional button. */
+    rejectLabel = 'Reject optional';
+    /** Label of the Accept all button. */
+    acceptLabel = 'Accept all';
+    /** Label of the Save choices button (`preferences`). */
+    saveLabel = 'Save choices';
+    /** Label of the action on the confirmation (`saved`). */
+    changeLabel = 'Change';
+    /** Text of the badge on required categories (`preferences`). */
+    alwaysOnLabel = 'Always on';
+    /** Label of a category's disclosure; `{count}` is replaced by the number of cookies. */
+    seeCookiesLabel = 'See {count} cookies';
+    /** Accessible name of the close button (`preferences`). */
+    closeLabel = 'Close';
+    /** The categories in the preferences dialog (`preferences`): `[{ id, label, description?, required?,
+     * enabled?, cookies? }]`. Defaults to Strictly necessary, Preferences, Analytics and Marketing. Must
+     * be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule. */
+    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 },
+        { id: 'analytics', label: 'Analytics', description: 'Help us understand which features are used so we can improve them. Data is anonymised.' },
+        { id: 'marketing', label: 'Marketing', description: 'Show relevant products on other websites.' },
+    ];
+    /** Fires when Accept all is pressed. `{ choices }` has every category on. */
+    bsAccept;
+    /** Fires when Reject optional is pressed. `{ choices }` has only the required categories on. */
+    bsReject;
+    /** Fires when Customise is pressed -- show the `preferences` form. */
+    bsCustomise;
+    /** Fires when Save choices is pressed (`preferences`), with the current switches. */
+    bsSave;
+    /** Fires when a category switch is toggled (`preferences`). */
+    bsChoice;
+    /** Fires when the close button is pressed (`preferences`). */
+    bsClose;
+    /** Fires when the action on the confirmation is pressed (`saved`) -- reopen the preferences. */
+    bsManage;
+    /** Current switch state per category id. */
+    choices = {};
+    /** Which category disclosures are open. */
+    open = {};
+    componentWillLoad() {
+        this.resetChoices();
+    }
+    onCategoriesChange() {
+        this.resetChoices();
+    }
+    resetChoices() {
+        const next = {};
+        (this.categories ?? []).forEach(c => (next[c.id] = !!c.required || !!c.enabled));
+        this.choices = next;
+    }
+    all(value) {
+        const out = {};
+        (this.categories ?? []).forEach(c => (out[c.id] = value === 'required' ? !!c.required : value));
+        return out;
+    }
+    get defaults() {
+        return DEFAULTS[this.type] ?? DEFAULTS.banner;
+    }
+    // --- rendering ---------------------------------------------------------------------------
+    heading_(text) {
+        const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 2));
+        return h(`h${level}`, { part: 'heading', id: 'heading', class: { 'bs-cookie-consent__heading': true } }, text);
+    }
+    policy() {
+        if (!this.policyUrl)
+            return null;
+        return (h("a", { part: "policy", class: "bs-cookie-consent__policy", href: this.policyUrl }, this.policyLabel));
+    }
+    customise() {
+        return (h("bs-button", { part: "customise", class: "bs-cookie-consent__text-button", variant: "subtle", onClick: () => this.bsCustomise.emit() }, this.customiseLabel));
+    }
+    reject(variant = 'outlined') {
+        return (h("bs-button", { part: "reject", variant: variant, onClick: () => this.bsReject.emit({ choices: this.all('required') }) }, this.rejectLabel));
+    }
+    accept(variant = 'primary') {
+        return (h("bs-button", { part: "accept", variant: variant, onClick: () => this.bsAccept.emit({ choices: this.all(true) }) }, this.acceptLabel));
+    }
+    renderBanner(d) {
+        return (h("bs-card", { part: "container", class: "bs-cookie-consent bs-cookie-consent--banner", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { class: "bs-cookie-consent__banner" }, h("div", { class: "bs-cookie-consent__banner-content" }, h("bs-icon-tile", { part: "art", size: "lg" }, h("slot", { name: "icon" }, h(CookieIcon, null))), h("div", { class: "bs-cookie-consent__copy" }, this.heading_(this.heading ?? d.heading), h("p", { part: "description", class: "bs-cookie-consent__description" }, this.description ?? d.description), this.policy())), h("div", { part: "actions", class: "bs-cookie-consent__actions bs-cookie-consent__actions--banner" }, this.customise(), this.reject(), this.accept()))));
+    }
+    renderCard(d) {
+        return (h("bs-card", { part: "container", class: "bs-cookie-consent bs-cookie-consent--card", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { class: "bs-cookie-consent__card" }, h("div", { class: "bs-cookie-consent__head" }, h("bs-icon-tile", { part: "art", size: "md" }, h("slot", { name: "icon" }, h(CookieIcon, null))), this.heading_(this.heading ?? d.heading)), h("p", { part: "description", class: "bs-cookie-consent__description" }, this.description ?? d.description), this.policy(), h("div", { class: "bs-cookie-consent__rule" }), h("div", { part: "actions", class: "bs-cookie-consent__actions bs-cookie-consent__actions--card" }, this.customise(), h("span", { class: "bs-cookie-consent__spacer" }), this.reject(), this.accept()))));
+    }
+    renderCategory(c, last) {
+        const expanded = !!this.open[c.id];
+        const count = c.cookies?.length ?? 0;
+        const listId = `cookies-${c.id}`;
+        return [
+            h("div", { part: "category", class: "bs-cookie-consent__category" }, h("div", { class: { 'bs-cookie-consent__category-head': true, 'bs-cookie-consent__category-head--switch': !c.required } }, h("span", { class: "bs-cookie-consent__category-name" }, c.label), c.required ? (h("bs-chip-informative", { size: "sm", color: "neutral" }, this.alwaysOnLabel)) : (h("bs-switch", { part: "switch", size: "md", ariaLabel: c.label, checked: !!this.choices[c.id], onBsChange: (ev) => {
+                    this.choices = { ...this.choices, [c.id]: ev.detail };
+                    this.bsChoice.emit({ id: c.id, enabled: ev.detail });
+                } }))), c.description && h("p", { class: "bs-cookie-consent__category-text" }, c.description), count > 0 && (h("div", { class: "bs-cookie-consent__details" }, h("button", { type: "button", class: "bs-cookie-consent__disclosure", "aria-expanded": String(expanded), "aria-controls": listId, onClick: () => (this.open = { ...this.open, [c.id]: !expanded }) }, h("span", null, this.seeCookiesLabel.replace('{count}', String(count))), h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: expanded ? 'M6 15L12 9L18 15' : 'M6 9L12 15L18 9' }))), expanded && (h("ol", { id: listId, class: "bs-cookie-consent__cookie-list" }, c.cookies.map(text => (h("li", null, text)))))))),
+            !last && h("div", { class: "bs-cookie-consent__rule" }),
+        ];
+    }
+    renderPreferences(d) {
+        const cats = this.categories ?? [];
+        return (h("bs-card", { part: "container", class: "bs-cookie-consent bs-cookie-consent--preferences", surface: "base", role: "group", "aria-labelledby": "heading" }, h("div", { class: "bs-cookie-consent__prefs" }, h("div", { class: "bs-cookie-consent__head" }, h("bs-icon-tile", { part: "art", size: "md" }, h("slot", { name: "icon" }, h(CookieIcon, null))), this.heading_(this.heading ?? d.heading), h("span", { class: "bs-cookie-consent__spacer" }), h("bs-icon-button", { part: "close", variant: "subtle", size: "md", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { d: "M5 5L15 15M15 5L5 15" })))), h("p", { part: "description", class: "bs-cookie-consent__description" }, this.description ?? d.description), cats.map((c, i) => this.renderCategory(c, i === cats.length - 1)), h("div", { class: "bs-cookie-consent__rule" }), h("div", { part: "actions", class: "bs-cookie-consent__actions bs-cookie-consent__actions--prefs" }, this.reject(), this.accept('outlined'), h("span", { class: "bs-cookie-consent__spacer" }), h("bs-button", { part: "save", variant: "primary", onClick: () => this.bsSave.emit({ choices: { ...this.choices } }) }, this.saveLabel)))));
+    }
+    renderSaved(d) {
+        return (h("bs-snackbar", { part: "container", class: "bs-cookie-consent bs-cookie-consent--saved", actionLabel: this.changeLabel, actionVariant: "subtle", hideClose: true, onBsAction: () => this.bsManage.emit() }, this.description ?? d.description));
+    }
+    render() {
+        const d = this.defaults;
+        switch (this.type) {
+            case 'card':
+                return this.renderCard(d);
+            case 'preferences':
+                return this.renderPreferences(d);
+            case 'saved':
+                return this.renderSaved(d);
+            default:
+                return this.renderBanner(d);
+        }
+    }
+    static get is() { return "bs-cookie-consent"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-cookie-consent.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-cookie-consent.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsCookieConsentType",
+                    "resolved": "\"banner\" | \"card\" | \"preferences\" | \"saved\"",
+                    "references": {
+                        "BsCookieConsentType": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-cookie-consent/bs-cookie-consent.tsx",
+                            "id": "src/components/bs-cookie-consent/bs-cookie-consent.tsx::BsCookieConsentType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which form: `banner`, `card`, `preferences` or `saved`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'banner'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading. Defaults per `type`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "headingLevel": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML heading level, 1-6."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-level",
+                "defaultValue": "2"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Paragraph under the heading (the message, for `saved`). Defaults per `type`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "policyUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of your cookie policy. The \"Read the cookie policy\" link is only shown when this is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "policy-url"
+            },
+            "policyLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the policy link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "policy-label",
+                "defaultValue": "'Read the cookie policy'"
+            },
+            "customiseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the Customise button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "customise-label",
+                "defaultValue": "'Customise'"
+            },
+            "rejectLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the Reject optional button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reject-label",
+                "defaultValue": "'Reject optional'"
+            },
+            "acceptLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the Accept all button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept-label",
+                "defaultValue": "'Accept all'"
+            },
+            "saveLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the Save choices button (`preferences`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "save-label",
+                "defaultValue": "'Save choices'"
+            },
+            "changeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the action on the confirmation (`saved`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "change-label",
+                "defaultValue": "'Change'"
+            },
+            "alwaysOnLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the badge on required categories (`preferences`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "always-on-label",
+                "defaultValue": "'Always on'"
+            },
+            "seeCookiesLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of a category's disclosure; `{count}` is replaced by the number of cookies."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "see-cookies-label",
+                "defaultValue": "'See {count} cookies'"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the close button (`preferences`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Close'"
+            },
+            "categories": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsCookieCategory[]",
+                    "resolved": "BsCookieCategory[]",
+                    "references": {
+                        "BsCookieCategory": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-cookie-consent/bs-cookie-consent.tsx",
+                            "id": "src/components/bs-cookie-consent/bs-cookie-consent.tsx::BsCookieCategory"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The categories in the preferences dialog (`preferences`): `[{ id, label, description?, required?,\nenabled?, cookies? }]`. Defaults to Strictly necessary, Preferences, Analytics and Marketing. Must\nbe set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\n    {\n      id: 'necessary',\n      label: 'Strictly necessary',\n      description: 'Needed for sign-in, security and to keep the service running. These cannot be turned off.',\n      required: true,\n      cookies: [\n        'Session cookie \u2014 keeps you signed in as you move between pages.',\n        'Security cookie \u2014 helps prevent fraud and unauthorized access.',\n        'Consent cookie \u2014 remembers your cookie consent choices.',\n      ],\n    },\n    { id: 'preferences', label: 'Preferences', description: 'Remember your language, theme and table layouts on this device.', enabled: true },\n    { id: 'analytics', label: 'Analytics', description: 'Help us understand which features are used so we can improve them. Data is anonymised.' },\n    { id: 'marketing', label: 'Marketing', description: 'Show relevant products on other websites.' },\n  ]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "choices": {},
+            "open": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsAccept",
+                "name": "bsAccept",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when Accept all is pressed. `{ choices }` has every category on."
+                },
+                "complexType": {
+                    "original": "{ choices: BsCookieChoices }",
+                    "resolved": "{ choices: BsCookieChoices; }",
+                    "references": {
+                        "BsCookieChoices": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-cookie-consent/bs-cookie-consent.tsx",
+                            "id": "src/components/bs-cookie-consent/bs-cookie-consent.tsx::BsCookieChoices"
+                        }
+                    }
+                }
+            }, {
+                "method": "bsReject",
+                "name": "bsReject",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when Reject optional is pressed. `{ choices }` has only the required categories on."
+                },
+                "complexType": {
+                    "original": "{ choices: BsCookieChoices }",
+                    "resolved": "{ choices: BsCookieChoices; }",
+                    "references": {
+                        "BsCookieChoices": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-cookie-consent/bs-cookie-consent.tsx",
+                            "id": "src/components/bs-cookie-consent/bs-cookie-consent.tsx::BsCookieChoices"
+                        }
+                    }
+                }
+            }, {
+                "method": "bsCustomise",
+                "name": "bsCustomise",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when Customise is pressed -- show the `preferences` form."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsSave",
+                "name": "bsSave",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when Save choices is pressed (`preferences`), with the current switches."
+                },
+                "complexType": {
+                    "original": "{ choices: BsCookieChoices }",
+                    "resolved": "{ choices: BsCookieChoices; }",
+                    "references": {
+                        "BsCookieChoices": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-cookie-consent/bs-cookie-consent.tsx",
+                            "id": "src/components/bs-cookie-consent/bs-cookie-consent.tsx::BsCookieChoices"
+                        }
+                    }
+                }
+            }, {
+                "method": "bsChoice",
+                "name": "bsChoice",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a category switch is toggled (`preferences`)."
+                },
+                "complexType": {
+                    "original": "{ id: string; enabled: boolean }",
+                    "resolved": "{ id: string; enabled: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "bsClose",
+                "name": "bsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the close button is pressed (`preferences`)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsManage",
+                "name": "bsManage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the action on the confirmation is pressed (`saved`) -- reopen the preferences."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "categories",
+                "methodName": "onCategoriesChange"
+            }];
+    }
+}
+const CookieIcon = () => (h("svg", { class: "bs-cookie-consent__glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M20.5 12.5A8.5 8.5 0 1 1 11.5 3.5A3.2 3.2 0 0 0 15 7A3.2 3.2 0 0 0 18.5 9.5A3 3 0 0 0 20.5 12.5Z" }), h("path", { d: "M9 9V9.01" }), h("path", { d: "M8.5 14.5V14.51" }), h("path", { d: "M13 13V13.01" }), h("path", { d: "M14 17V17.01" })));
+const DEFAULTS = {
+    banner: {
+        heading: 'Your cookie choices',
+        description: 'We use necessary cookies to keep you signed in and secure. With your permission we also use cookies to remember your preferences and to understand how this service is used.',
+    },
+    card: {
+        heading: 'Cookies on this site',
+        description: 'We use necessary cookies to keep you signed in. May we also use optional cookies for preferences and analytics?',
+    },
+    preferences: {
+        heading: 'Cookie preferences',
+        description: 'Choose which optional cookies we may use. You can change this at any time in your privacy settings.',
+    },
+    saved: {
+        heading: '',
+        description: 'Cookie choices saved. You can change them any time in your privacy settings.',
+    },
+};