@peax/consent-banner-react 0.1.0 → 0.2.0

package/README.md

@@ -41,29 +41,32 @@ export function CookieBanner({ initialPreferences, onCommit }: Props) {
   }
 
   return (
-    <>
-      <button type="button" onClick={() => setOpen(true)}>Cookie choices</button>
-      <Banner
-        isOpen={open}
-        cookiePolicyUrl="/cookies"
-        preferencesContent={Object.fromEntries(
-          Object.entries(preferences).map(([id, checked]) => [id, { checked }]),
-        )}
-        onMsg={msg => {
-          switch (msg.type) {
-            case 'on_accept_all':
-              commit({ essential: true, analytics: true, marketing: true })
-              break
-            case 'on_reject_all':
-              commit({ essential: true, analytics: false, marketing: false })
-              break
-            case 'on_apply_preferences':
-              commit(msg.preferences)
-              break
-          }
-        }}
-      />
-    </>
+    <Banner
+      isOpen={open}
+      cookiePolicyUrl="/cookies"
+      preferencesContent={Object.fromEntries(
+        Object.entries(preferences).map(([id, checked]) => [id, { checked }]),
+      )}
+      onMsg={msg => {
+        switch (msg.type) {
+          case 'on_accept_all':
+            commit({ essential: true, analytics: true, marketing: true })
+            break
+          case 'on_reject_all':
+            commit({ essential: true, analytics: false, marketing: false })
+            break
+          case 'on_apply_preferences':
+            commit(msg.preferences)
+            break
+          case 'on_open_preferences':
+            if (msg.source === 'floating-button') setOpen(true)
+            break
+          case 'on_close_preferences':
+            if (msg.source === 'floating-button') setOpen(false)
+            break
+        }
+      }}
+    />
   )
 }
 ```
@@ -73,13 +76,13 @@ export function CookieBanner({ initialPreferences, onCommit }: Props) {
 1. Restore saved consent before initializing this wrapper; keep server and client initial props consistent.
 2. Keep optional services blocked until the relevant consent is granted. Save and enforce decisions in `onCommit`, including later revocation.
 3. Adapt the Accept/Reject maps if you change the selected categories or their behavior.
-4. Keep the banner mounted and change `isOpen` to play its exit animation. The “Cookie choices” button above reopens it.
+4. Keep the banner mounted and set `isOpen={false}` to dismiss it immediately. The floating cookie button requests a direct opening of preferences through `onMsg`.
 
 The banner manages UI and temporary drafts. It does not store consent, load trackers, or depend on `@peax/consent-core`.
 
 ## Props
 
-All `BannerProps` fields are optional. **`isOpen` defaults to `false`**, so pass it to display the banner.
+All `BannerProps` fields are optional, but `floatingButtonPosition` requires `showFloatingButton: true`. **`isOpen` defaults to `false`**, so pass it to display the banner.
 
 ### Visibility and layout
 
@@ -87,7 +90,9 @@ All `BannerProps` fields are optional. **`isOpen` defaults to `false`**, so pass
 | --- | --- | --- |
 | `isOpen` | `false` | Show or hide the banner |
 | `variant` | `'compact'` | `'compact'` or `'stacked'` |
-| `showCustomizePreferences` | `true` | Show the preferences trigger, whether icon or text |
+| `showCustomizePreferences` | `true` | Show the preferences trigger inside the collapsed banner |
+| `showFloatingButton` | `true` | Show a floating cookie button while the banner is closed; set to `false` to hide it |
+| `floatingButtonPosition` | Inherited | `'left'` or `'right'`; inherits `position`, with center/omitted falling back to right; requires `showFloatingButton: true` |
 | `hasAcceptRejectEqualWeight` | `false` | Give Accept and Reject the same secondary button appearance |
 | `position` | `'right'` | `'left'`, `'center'`, or `'right'` |
 | `slideFrom` | `'bottom'` | Bottom, or the matching side for left/right positioning |
@@ -122,11 +127,23 @@ All interactions use `onMsg`. The three decision events leave the banner open un
 | `on_reject_all` | None | Reject optional categories, save, enforce, and close |
 | `on_apply_preferences` | `preferences: Record<string, boolean>` | Save and enforce the supplied selection, then close |
 | `on_change_preference` | `sectionId`, `checked` | Observe a draft edit; do not treat it as applied consent |
-| `on_open_preferences` | None | Notification; the panel opens internally |
-| `on_close_preferences` | None | Notification; Close/Escape discards drafts and returns to the banner |
+| `on_open_preferences` | `source: 'banner' \| 'floating-button'` | Banner navigation opens internally; floating requests need the application to set `isOpen={true}` |
+| `on_close_preferences` | `source: 'banner' \| 'floating-button'` | Banner navigation returns to the collapsed banner immediately; floating sessions need the application to set `isOpen={false}` |
 
 Apply includes every selected section ID, including disabled sections. Closing preferences never grants consent. External closure through `isOpen={false}` resets the draft without emitting `on_close_preferences`.
 
+## Floating cookie button
+
+The floating cookie button is enabled by default. Set `showFloatingButton={false}` to hide it. It appears when `isOpen` is false and the panel is removed, including on an initially closed banner. It remains hidden while an open banner is waiting for `appearanceDelay`. React does not infer consent status; your application can control whether the button is enabled.
+
+`floatingButtonPosition` overrides the banner's placement. Without it, left stays left, right stays right, and center or omitted placement resolves to right. The TypeScript union permits an explicit floating position only with `showFloatingButton: true`.
+
+Clicking emits `on_open_preferences` with `source: 'floating-button'`; set `isOpen` to true to open preferences directly beside the button. That session keeps the side captured on activation. Close/Escape emits the matching close request; set `isOpen` to false to discard drafts and return to the button. Until your application accepts either request, visibility stays unchanged. Apply retains its normal save-and-close integration. Disabling the floating button cancels a pending opening without closing an active panel.
+
+`showCustomizePreferences` independently controls the collapsed banner's trigger. The floating control uses `customizePreferencesLabel` as its accessible name, with localized fallback for blank labels. Focus returns to the floating button when it was inside the dismissed panel; focus moved elsewhere is respected.
+
+The control is 48px square by default and grows with control/icon tokens. It uses `--pxc-radius-xl`: zero makes a square, the standard value rounds the corners, and a full-radius value makes a circle. Existing theme colors, focus styles, spacing, safe-area insets, and `--pxc-z-index` apply.
+
 ## Preferences
 
 Select IDs, then override only the fields you need:
@@ -170,7 +187,7 @@ In compact mode, actions adapt to their actual label widths:
 | Only decisions fit together | Reject + Accept, then Customize preferences |
 | Decisions need separate rows | Accept → Reject → Customize preferences |
 
-Both variants support wrapping labels and scrolling on short viewports. Preferences opens the same nonmodal panel, with a scrolling body and fixed header/footer. Close/Escape restores focus to the visible trigger.
+Both variants support wrapping labels and scrolling on short viewports. Preferences opens the same nonmodal panel, with a scrolling body and fixed header/footer. Close/Escape returns banner-opened preferences to the collapsed banner immediately and restores its trigger. Floating-opened preferences request external closure through `isOpen={false}`, restoring the floating trigger when enabled. Neither path has an exit animation; opening retains its existing motion.
 
 Keyboard order follows visual order where `reading-flow` is supported; otherwise compact controls retain Accept → Reject → Preferences DOM order. The preferences panel does not trap focus.
 

package/dist/index.d.ts

@@ -4,8 +4,8 @@ import { NamedExoticComponent } from 'react';
 
 export declare const Banner: NamedExoticComponent<BannerProps>;
 
-export declare type BannerMsg = {
-    type: 'on_accept_all' | 'on_reject_all' | 'on_open_preferences' | 'on_close_preferences';
+export declare type BannerMsg = PreferencesNavigationMsg | {
+    type: 'on_accept_all' | 'on_reject_all';
 } | {
     type: 'on_apply_preferences';
     preferences: Record<string, boolean>;
@@ -15,7 +15,7 @@ export declare type BannerMsg = {
     checked: boolean;
 };
 
-export declare type BannerProps = Placement & {
+export declare type BannerProps = Placement & FloatingButtonProps & {
     isOpen?: boolean;
     appearanceDelay?: number;
     hasAcceptRejectEqualWeight?: boolean;
@@ -32,6 +32,16 @@ export declare type BannerProps = Placement & {
     onMsg?: (msg: BannerMsg) => void;
 };
 
+declare type FloatingButtonPosition = 'left' | 'right';
+
+declare type FloatingButtonProps = {
+    showFloatingButton?: false;
+    floatingButtonPosition?: never;
+} | {
+    showFloatingButton: true;
+    floatingButtonPosition?: FloatingButtonPosition;
+};
+
 declare type Placement = {
     position?: 'right';
     slideFrom?: 'bottom' | 'right';
@@ -43,6 +53,11 @@ declare type Placement = {
     slideFrom?: 'bottom';
 };
 
+declare type PreferencesNavigationMsg = {
+    type: 'on_open_preferences' | 'on_close_preferences';
+    source: Source;
+};
+
 export declare type PreferencesSection = Readonly<{
     title?: string;
     text?: string;
@@ -52,4 +67,6 @@ export declare type PreferencesSection = Readonly<{
 
 export declare type PreferencesSectionId = BuiltInPreferencesSectionId | (string & Record<never, never>);
 
+declare type Source = 'banner' | 'floating-button';
+
 export { }

package/dist/index.js

@@ -1,95 +1,121 @@
 import e from "clsx";
 import { getMessages as t, getPreferencesMessages as n, parseMessage as r, resolveLocale as i } from "@peax/consent-banner-locales";
 import { forwardRef as a, memo as o, useCallback as s, useEffect as c, useId as l, useMemo as u, useRef as d, useState as f } from "react";
-import { AnimatePresence as p, LazyMotion as m, domAnimation as h, useIsPresent as g, useReducedMotion as _ } from "framer-motion";
-import * as v from "framer-motion/m";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-import { ScrollArea as S } from "@base-ui/react/scroll-area";
+import { AnimatePresence as p, LazyMotion as m, domAnimation as h, useIsPresent as g, usePresenceData as _, useReducedMotion as v } from "framer-motion";
+import * as y from "framer-motion/m";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
 import { Button as C } from "@base-ui/react/button";
-import { Switch as w } from "@base-ui/react/switch";
-//#region src/utils/notReachable.ts
-function T(e, t = { throwError: !0 }) {
-	let n = `Should not be reached ${e}`;
-	if (t.throwError) throw Error(n);
+import { ScrollArea as w } from "@base-ui/react/scroll-area";
+import { Switch as T } from "@base-ui/react/switch";
+//#region src/hooks/usePreferencesView.ts
+function E({ isOpen: e, showFloatingButton: t, showCustomizePreferences: n, floatingPosition: r, onMsg: i }) {
+	let [a, o] = f(null), [l, u] = f(!1), p = d(null);
+	return c(() => {
+		e || o(null), (e || !t) && (p.current = null);
+	}, [e, t]), {
+		view: a,
+		hasPanel: l,
+		setHasPanel: u,
+		triggerRef: s((e) => {
+			if (!e) return;
+			let t = p.current;
+			p.current = null, t && (document.activeElement === t || document.activeElement === document.body) && e.focus();
+		}, []),
+		onExitFocus: s(() => (t && (p.current = document.activeElement), t), [t]),
+		openPreferences: (e) => {
+			o(e === "banner" ? { source: e } : {
+				source: e,
+				position: r
+			}), i?.({
+				type: "on_open_preferences",
+				source: e
+			});
+		},
+		closePreferences: () => {
+			a && (a.source === "banner" && (p.current = n ? document.activeElement : null, o(null)), i?.({
+				type: "on_close_preferences",
+				source: a.source
+			}));
+		}
+	};
 }
 //#endregion
 //#region src/components/Container/ContainerWrapper.tsx
-var E = ({ position: t, slideFrom: n, children: r }) => {
-	let i = g(), a = _(), o = d(null), s = d(null);
-	c(() => {
-		let e = o.current;
+var D = ({ position: t, slideFrom: n, onPresenceChange: r, children: i }) => {
+	let a = g(), o = _(), s = v(), l = d(null), u = d(null);
+	c(() => (r?.(!0), () => r?.(!1)), [r]), c(() => {
+		let e = l.current;
 		if (e) {
-			if (i) {
+			if (a) {
 				e.removeAttribute("inert");
 				let t = document.activeElement;
-				t instanceof HTMLElement && !e.contains(t) && (s.current = t);
+				t instanceof HTMLElement && !e.contains(t) && (u.current = t);
 				return;
 			}
-			if (e.contains(document.activeElement)) {
-				let e = s.current;
+			if (e.contains(document.activeElement) && !o?.()) {
+				let e = u.current;
 				e?.isConnected && e.focus({ preventScroll: !0 });
 			}
 			e.setAttribute("inert", "");
 		}
-	}, [i]);
-	let l = n === t ? n : "bottom", u = { transform: a ? "none" : l === "bottom" ? "translateY(100%)" : `translateX(${l === "left" ? "-100%" : "100%"})` };
-	return /* @__PURE__ */ b(v.div, {
-		ref: o,
-		exit: u,
-		initial: u,
+	}, [a, o]);
+	let f = n === t ? n : "bottom", p = { transform: s ? "none" : f === "bottom" ? "translateY(100%)" : `translateX(${f === "left" ? "-100%" : "100%"})` };
+	return /* @__PURE__ */ x(y.div, {
+		ref: l,
+		exit: { transform: "none" },
+		initial: p,
 		animate: { transform: "none" },
-		"aria-hidden": !i || void 0,
-		"data-state": i ? "open" : "closing",
+		"aria-hidden": !a || void 0,
+		"data-state": a ? "open" : "closing",
 		className: e("pxc-wrapper", `pxc-wrapper--${t}`),
 		transition: {
-			duration: a ? 0 : i ? .36 : .28,
-			ease: i ? [
+			duration: a && !s ? .36 : 0,
+			ease: [
 				.16,
 				1,
 				.3,
 				1
-			] : [
-				.4,
-				0,
-				.2,
-				1
 			]
 		},
-		children: r
+		children: i
 	});
-}, D = a(function({ isOpen: t = !0, appearanceDelay: n = 0, position: r = "right", slideFrom: i = "bottom", className: a, children: o, actions: s, ...l }, u) {
-	let d = Number.isFinite(n) ? Math.max(0, n) : 0, [g, _] = f(d === 0);
+}, O = a(function({ isOpen: t = !0, appearanceDelay: n = 0, position: r = "right", slideFrom: i = "bottom", onPresenceChange: a, onExitFocus: o, className: s, children: l, actions: u, ...d }, g) {
+	let _ = Number.isFinite(n) ? Math.max(0, n) : 0, [v, y] = f(_ === 0);
 	return c(() => {
-		if (g || !t) return;
-		let e = window.setTimeout(() => _(!0), d);
+		if (v || !t) return;
+		let e = window.setTimeout(() => y(!0), _);
 		return () => window.clearTimeout(e);
 	}, [
-		d,
+		_,
 		t,
-		g
-	]), /* @__PURE__ */ b(m, {
+		v
+	]), /* @__PURE__ */ x(m, {
 		features: h,
 		strict: !0,
-		children: /* @__PURE__ */ b(p, { children: t && g && /* @__PURE__ */ b(E, {
-			position: r,
-			slideFrom: i,
-			children: /* @__PURE__ */ b("div", {
-				ref: u,
-				className: e("pxc-container", s != null && "pxc-container--with-actions", a),
-				...l,
-				children: s == null ? o : /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", {
-					className: "pxc-container__content",
-					"data-container-content": !0,
-					children: o
-				}), /* @__PURE__ */ b("div", {
-					className: "pxc-container__actions",
-					"data-container-actions": !0,
-					children: s
-				})] })
-			})
-		}, "container") })
+		children: /* @__PURE__ */ x(p, {
+			custom: o,
+			children: t && v && /* @__PURE__ */ x(D, {
+				position: r,
+				slideFrom: i,
+				onPresenceChange: a,
+				children: /* @__PURE__ */ x("div", {
+					ref: g,
+					className: e("pxc-container", u != null && "pxc-container--with-actions", s),
+					...d,
+					children: u == null ? l : /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("div", {
+						className: "pxc-container__content",
+						"data-container-content": !0,
+						children: l
+					}), /* @__PURE__ */ x("div", {
+						className: "pxc-container__actions",
+						"data-container-actions": !0,
+						children: u
+					})] })
+				})
+			}, "container")
+		})
 	});
-}), O = () => /* @__PURE__ */ x("svg", {
+}), k = () => /* @__PURE__ */ S("svg", {
 	width: "24",
 	height: "24",
 	viewBox: "0 0 24 24",
@@ -102,14 +128,14 @@ var E = ({ position: t, slideFrom: n, children: r }) => {
 	"aria-hidden": "true",
 	focusable: "false",
 	children: [
-		/* @__PURE__ */ b("path", { d: "M11 17H11.01" }),
-		/* @__PURE__ */ b("path", { d: "M12.025 2.61499C12.054 2.29199 11.82 1.98399 11.496 1.99999C9.02138 2.12561 6.68155 3.16546 4.92997 4.91799C3.0533 6.79479 1.99905 9.34023 1.99915 11.9943C1.99924 14.6484 3.05367 17.1938 4.93047 19.0705C6.80728 20.9472 9.35272 22.0014 12.0068 22.0013C14.6609 22.0012 17.2063 20.9468 19.083 19.07C20.8344 17.3179 21.8732 14.9782 21.998 12.504C22.014 12.181 21.707 11.947 21.384 11.977C20.8082 12.0311 20.2276 11.9597 19.6821 11.7677C19.1366 11.5757 18.6392 11.2678 18.2242 10.865C17.8092 10.4623 17.4864 9.97436 17.2782 9.43485C17.07 8.89535 16.9812 8.31711 17.018 7.73999C17.0244 7.63881 17.0093 7.53742 16.9734 7.44257C16.9376 7.34773 16.882 7.26161 16.8103 7.18997C16.7385 7.11833 16.6523 7.06281 16.5574 7.02712C16.4626 6.99143 16.3611 6.97638 16.26 6.98299C15.6828 7.01952 15.1046 6.93048 14.5652 6.72199C14.0258 6.51351 13.538 6.19054 13.1355 5.77535C12.7329 5.36015 12.4252 4.86261 12.2335 4.31701C12.0417 3.77141 11.9706 3.19073 12.025 2.61499Z" }),
-		/* @__PURE__ */ b("path", { d: "M12 12H12.01" }),
-		/* @__PURE__ */ b("path", { d: "M16 16H16.01" }),
-		/* @__PURE__ */ b("path", { d: "M7 14H7.01" }),
-		/* @__PURE__ */ b("path", { d: "M9 8H9.01" })
+		/* @__PURE__ */ x("path", { d: "M11 17H11.01" }),
+		/* @__PURE__ */ x("path", { d: "M12.025 2.61499C12.054 2.29199 11.82 1.98399 11.496 1.99999C9.02138 2.12561 6.68155 3.16546 4.92997 4.91799C3.0533 6.79479 1.99905 9.34023 1.99915 11.9943C1.99924 14.6484 3.05367 17.1938 4.93047 19.0705C6.80728 20.9472 9.35272 22.0014 12.0068 22.0013C14.6609 22.0012 17.2063 20.9468 19.083 19.07C20.8344 17.3179 21.8732 14.9782 21.998 12.504C22.014 12.181 21.707 11.947 21.384 11.977C20.8082 12.0311 20.2276 11.9597 19.6821 11.7677C19.1366 11.5757 18.6392 11.2678 18.2242 10.865C17.8092 10.4623 17.4864 9.97436 17.2782 9.43485C17.07 8.89535 16.9812 8.31711 17.018 7.73999C17.0244 7.63881 17.0093 7.53742 16.9734 7.44257C16.9376 7.34773 16.882 7.26161 16.8103 7.18997C16.7385 7.11833 16.6523 7.06281 16.5574 7.02712C16.4626 6.99143 16.3611 6.97638 16.26 6.98299C15.6828 7.01952 15.1046 6.93048 14.5652 6.72199C14.0258 6.51351 13.538 6.19054 13.1355 5.77535C12.7329 5.36015 12.4252 4.86261 12.2335 4.31701C12.0417 3.77141 11.9706 3.19073 12.025 2.61499Z" }),
+		/* @__PURE__ */ x("path", { d: "M12 12H12.01" }),
+		/* @__PURE__ */ x("path", { d: "M16 16H16.01" }),
+		/* @__PURE__ */ x("path", { d: "M7 14H7.01" }),
+		/* @__PURE__ */ x("path", { d: "M9 8H9.01" })
 	]
-}), k = () => /* @__PURE__ */ x("svg", {
+}), A = () => /* @__PURE__ */ S("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "24",
 	height: "24",
@@ -122,23 +148,40 @@ var E = ({ position: t, slideFrom: n, children: r }) => {
 	"aria-hidden": "true",
 	focusable: "false",
 	children: [
-		/* @__PURE__ */ b("path", { d: "M14 17H5" }),
-		/* @__PURE__ */ b("path", { d: "M19 7h-9" }),
-		/* @__PURE__ */ b("circle", {
+		/* @__PURE__ */ x("path", { d: "M14 17H5" }),
+		/* @__PURE__ */ x("path", { d: "M19 7h-9" }),
+		/* @__PURE__ */ x("circle", {
 			cx: "17",
 			cy: "17",
 			r: "3"
 		}),
-		/* @__PURE__ */ b("circle", {
+		/* @__PURE__ */ x("circle", {
 			cx: "7",
 			cy: "7",
 			r: "3"
 		})
 	]
-}), A = () => /* @__PURE__ */ b("div", {
+}), j = a(function({ variant: t, className: n, children: r, ...i }, a) {
+	return /* @__PURE__ */ x(C, {
+		ref: a,
+		className: (r) => e("pxc-button", `pxc-button--${t}`, typeof n == "function" ? n(r) : n),
+		...i,
+		focusableWhenDisabled: !1,
+		children: r
+	});
+}), M = a(function({ label: e, position: t, onMsg: n }, r) {
+	return /* @__PURE__ */ x(j, {
+		ref: r,
+		variant: "iconed",
+		className: `pxc-floating-button pxc-floating-button--${t}`,
+		"aria-label": e,
+		onClick: () => n({ type: "on_open_preferences" }),
+		children: /* @__PURE__ */ x(k, {})
+	});
+}), N = () => /* @__PURE__ */ x("div", {
 	className: "pxc-lead-icon",
-	children: /* @__PURE__ */ b(O, {})
-}), j = () => /* @__PURE__ */ b("svg", {
+	children: /* @__PURE__ */ x(k, {})
+}), P = () => /* @__PURE__ */ x("svg", {
 	viewBox: "0 0 24 24",
 	fill: "none",
 	stroke: "currentColor",
@@ -146,42 +189,43 @@ var E = ({ position: t, slideFrom: n, children: r }) => {
 	strokeLinecap: "round",
 	"aria-hidden": "true",
 	focusable: "false",
-	children: /* @__PURE__ */ b("path", { d: "m6 6 12 12M6 18 18 6" })
-}), M = a(function({ variant: t, className: n, children: r, ...i }, a) {
-	return /* @__PURE__ */ b(C, {
-		ref: a,
-		className: (r) => e("pxc-button", `pxc-button--${t}`, typeof n == "function" ? n(r) : n),
-		...i,
-		focusableWhenDisabled: !1,
-		children: r
-	});
-}), N = (e) => {
+	children: /* @__PURE__ */ x("path", { d: "m6 6 12 12M6 18 18 6" })
+});
+//#endregion
+//#region src/utils/notReachable.ts
+function F(e, t = { throwError: !0 }) {
+	let n = `Should not be reached ${e}`;
+	if (t.throwError) throw Error(n);
+}
+//#endregion
+//#region src/components/Text/RichText.tsx
+var I = (e) => {
 	if (e?.trim()) try {
 		let t = new URL(e, "https://consent.invalid");
 		return t.protocol === "http:" || t.protocol === "https:" ? e : void 0;
 	} catch {
 		return;
 	}
-}, P = ({ message: e, links: t }) => u(() => r(e, Object.keys(t)), [e, t]).map((e) => {
+}, L = ({ message: e, links: t }) => u(() => r(e, Object.keys(t)), [e, t]).map((e) => {
 	if (e.type === "text") return e.value;
-	let n = N(t[e.name]);
-	return n && e.value.trim() ? /* @__PURE__ */ b("a", {
+	let n = I(t[e.name]);
+	return n && e.value.trim() ? /* @__PURE__ */ x("a", {
 		className: "pxc-link",
 		href: n,
 		children: e.value
 	}, e.offset) : e.value;
-}), F = ({ section: e, checked: t, links: n, onMsg: r }) => {
+}), R = ({ section: e, checked: t, links: n, onMsg: r }) => {
 	let i = l();
-	return /* @__PURE__ */ x("section", {
+	return /* @__PURE__ */ S("section", {
 		className: "pxc-preferences__section",
 		"aria-labelledby": `${i}-title`,
-		children: [/* @__PURE__ */ x("div", {
+		children: [/* @__PURE__ */ S("div", {
 			className: "pxc-preferences__section-heading",
-			children: [/* @__PURE__ */ b("h4", {
+			children: [/* @__PURE__ */ x("h4", {
 				id: `${i}-title`,
 				className: "pxc-text--h4",
 				children: e.title
-			}), /* @__PURE__ */ b(w.Root, {
+			}), /* @__PURE__ */ x(T.Root, {
 				className: "pxc-switch",
 				checked: t,
 				disabled: e.disabled ?? !1,
@@ -192,60 +236,60 @@ var E = ({ position: t, slideFrom: n, children: r }) => {
 					sectionId: e.id,
 					checked: t
 				}),
-				children: /* @__PURE__ */ b(w.Thumb, { className: "pxc-switch__thumb" })
+				children: /* @__PURE__ */ x(T.Thumb, { className: "pxc-switch__thumb" })
 			})]
-		}), e.text && /* @__PURE__ */ b("p", {
+		}), e.text && /* @__PURE__ */ x("p", {
 			id: `${i}-text`,
 			className: "pxc-text--paragraph pxc-preferences__description",
-			children: /* @__PURE__ */ b(P, {
+			children: /* @__PURE__ */ x(L, {
 				message: e.text,
 				links: n
 			})
 		})]
 	});
-}, I = ({ sections: e, content: t, links: n, onMsg: r }) => {
+}, z = ({ sections: e, content: t, links: n, onMsg: r }) => {
 	let i = l(), a = d(null), [o, s] = f(() => new Map(e.map((e) => [e.id, e.checked]))), u = new Map(e.map((e) => [e.id, e.disabled ? e.checked : o.get(e.id) ?? e.checked]));
 	(o.size !== u.size || [...u].some(([e, t]) => o.get(e) !== t)) && s(u), c(() => {
 		a.current?.focus({ preventScroll: !0 });
 	}, []);
-	let p = N(n.cookiePolicy);
-	return /* @__PURE__ */ x("section", {
+	let p = I(n.cookiePolicy);
+	return /* @__PURE__ */ S("section", {
 		className: "pxc-preferences",
 		"aria-labelledby": i,
 		onKeyDown: (e) => {
 			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), r({ type: "on_close_preferences" }));
 		},
 		children: [
-			/* @__PURE__ */ x("header", {
+			/* @__PURE__ */ S("header", {
 				className: "pxc-preferences__header",
-				children: [/* @__PURE__ */ b("h3", {
+				children: [/* @__PURE__ */ x("h3", {
 					id: i,
 					ref: a,
 					tabIndex: -1,
 					className: "pxc-text--h3",
 					children: t.preferencesTitle
-				}), /* @__PURE__ */ b(M, {
+				}), /* @__PURE__ */ x(j, {
 					variant: "iconed",
 					"aria-label": t.closePreferencesLabel,
 					onClick: () => r({ type: "on_close_preferences" }),
-					children: /* @__PURE__ */ b(j, {})
+					children: /* @__PURE__ */ x(P, {})
 				})]
 			}),
-			/* @__PURE__ */ x(S.Root, {
+			/* @__PURE__ */ S(w.Root, {
 				className: "pxc-preferences__scroll-area",
-				children: [/* @__PURE__ */ b(S.Viewport, {
+				children: [/* @__PURE__ */ x(w.Viewport, {
 					className: "pxc-preferences__body",
 					role: "group",
 					"aria-labelledby": i,
-					children: /* @__PURE__ */ x(S.Content, {
+					children: /* @__PURE__ */ S(w.Content, {
 						className: "pxc-preferences__content",
-						children: [t.preferencesText && /* @__PURE__ */ b("p", {
+						children: [t.preferencesText && /* @__PURE__ */ x("p", {
 							className: "pxc-text--paragraph pxc-preferences__introduction",
-							children: /* @__PURE__ */ b(P, {
+							children: /* @__PURE__ */ x(L, {
 								message: t.preferencesText,
 								links: n
 							})
-						}), e.map((e) => /* @__PURE__ */ b(F, {
+						}), e.map((e) => /* @__PURE__ */ x(R, {
 							section: e,
 							checked: u.get(e.id) ?? e.checked,
 							links: n,
@@ -254,45 +298,45 @@ var E = ({ position: t, slideFrom: n, children: r }) => {
 									case "on_change_preference":
 										s((t) => new Map(t).set(e.sectionId, e.checked)), r(e);
 										break;
-									default: T(e.type);
+									default: F(e.type);
 								}
 							}
 						}, e.id))]
 					})
-				}), /* @__PURE__ */ b(S.Scrollbar, {
+				}), /* @__PURE__ */ x(w.Scrollbar, {
 					className: "pxc-preferences__scrollbar",
-					children: /* @__PURE__ */ b(S.Thumb, {
+					children: /* @__PURE__ */ x(w.Thumb, {
 						className: "pxc-preferences__scroll-thumb",
-						children: /* @__PURE__ */ b("span", { className: "pxc-preferences__scroll-indicator" })
+						children: /* @__PURE__ */ x("span", { className: "pxc-preferences__scroll-indicator" })
 					})
 				})]
 			}),
-			/* @__PURE__ */ x("footer", {
+			/* @__PURE__ */ S("footer", {
 				className: "pxc-preferences__footer",
-				children: [/* @__PURE__ */ b(M, {
+				children: [/* @__PURE__ */ x(j, {
 					variant: "primary",
 					onClick: () => r({
 						type: "on_apply_preferences",
 						preferences: Object.fromEntries(u)
 					}),
 					children: t.applyPreferencesLabel
-				}), p ? /* @__PURE__ */ b("a", {
+				}), p ? /* @__PURE__ */ x("a", {
 					className: "pxc-link pxc-preferences__policy",
 					href: p,
 					children: t.cookiePolicyLabel
-				}) : /* @__PURE__ */ b("span", {
+				}) : /* @__PURE__ */ x("span", {
 					className: "pxc-preferences__policy",
 					children: t.cookiePolicyLabel
 				})]
 			})
 		]
 	});
-}, L = [
+}, B = [
 	"essential",
 	"analytics",
 	"marketing"
 ];
-function R(e, t, n) {
+function V(e, t, n) {
 	let r = new Map(Object.entries(n));
 	return [...new Set(e.filter((e) => e.trim()))].map((e) => {
 		let n = r.get(e), i = t && Object.hasOwn(t, e) ? t[e] : void 0;
@@ -307,127 +351,116 @@ function R(e, t, n) {
 }
 //#endregion
 //#region src/components/Text/Text.tsx
-var z = ({ variant: e, tag: t, children: n }) => {
+var H = ({ variant: e, tag: t, children: n }) => {
 	switch (e) {
-		case "label": return /* @__PURE__ */ b(t, {
+		case "label": return /* @__PURE__ */ x(t, {
 			className: "pxc-text--label",
 			children: n
 		});
-		case "heading": return /* @__PURE__ */ b(t, {
+		case "heading": return /* @__PURE__ */ x(t, {
 			className: `pxc-text--${t}`,
 			children: n
 		});
-		case "paragraph": return /* @__PURE__ */ b("p", {
+		case "paragraph": return /* @__PURE__ */ x("p", {
 			className: "pxc-text--paragraph",
 			children: n
 		});
-		default: return T(e);
+		default: return F(e);
 	}
-}, B = ({ variant: e, content: t, equalWeight: n, showCustomizePreferences: r, preferencesRef: i, onMsg: a }) => /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ x("div", {
+}, U = ({ variant: e, content: t, equalWeight: n, showCustomizePreferences: r, preferencesRef: i, onMsg: a }) => /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ S("div", {
 	className: "pxc-banner__choices",
-	children: [/* @__PURE__ */ b(M, {
+	children: [/* @__PURE__ */ x(j, {
 		variant: n ? "secondary" : "primary",
 		onClick: () => a({ type: "on_accept_all" }),
 		children: t.acceptAllLabel
-	}), /* @__PURE__ */ b(M, {
+	}), /* @__PURE__ */ x(j, {
 		variant: "secondary",
 		onClick: () => a({ type: "on_reject_all" }),
 		children: t.rejectAllLabel
 	})]
-}), r && /* @__PURE__ */ b("div", {
+}), r && /* @__PURE__ */ x("div", {
 	className: "pxc-banner__preferences",
-	children: /* @__PURE__ */ b(M, {
+	children: /* @__PURE__ */ x(j, {
 		ref: i,
 		variant: "inline",
 		className: e === "compact" ? "pxc-button--iconed" : void 0,
 		"aria-label": t.customizePreferencesLabel,
 		onClick: () => a({ type: "on_open_preferences" }),
-		children: e === "compact" ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(k, {}), /* @__PURE__ */ b("span", { children: t.customizePreferencesLabel })] }) : t.customizePreferencesLabel
+		children: e === "compact" ? /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(A, {}), /* @__PURE__ */ x("span", { children: t.customizePreferencesLabel })] }) : t.customizePreferencesLabel
 	})
-})] }), V = o(function({ bannerContent: r, cookiePolicyUrl: a, isOpen: o = !1, appearanceDelay: l = 0, preferencesSections: p = L, preferencesContent: m, hasAcceptRejectEqualWeight: h = !1, showCustomizePreferences: g = !0, variant: _ = "compact", theme: v = "auto", locale: S = "en", onMsg: C, className: w, style: E, ...O }) {
-	let k = i(S), j = t(k), M = Object.fromEntries(Object.entries(r ?? {}).filter(([, e]) => e != null)), N = {
-		...j,
-		...M
-	}, F = u(() => ({ cookiePolicy: a }), [a]), V = u(() => R(p, m, n(k)), [
-		p,
-		m,
-		k
-	]), [H, U] = f(!1), W = d(!1), G = s((e) => {
-		e && W.current && (W.current = !1, e.focus());
-	}, []);
-	c(() => {
-		o || (W.current = !1, U(!1));
-	}, [o]);
-	let K = () => {
-		U(!0), C?.({ type: "on_open_preferences" });
-	}, q = () => {
-		W.current = g, U(!1), C?.({ type: "on_close_preferences" });
+})] }), W = o(function({ bannerContent: r, cookiePolicyUrl: a, isOpen: o = !1, appearanceDelay: s = 0, preferencesSections: c = B, preferencesContent: l, hasAcceptRejectEqualWeight: d = !1, showCustomizePreferences: f = !0, showFloatingButton: p = !0, floatingButtonPosition: m, variant: h = "compact", theme: g = "auto", locale: _ = "en", onMsg: v, className: y, style: C, ...w }) {
+	let T = i(_), D = t(T), k = Object.fromEntries(Object.entries(r ?? {}).filter(([, e]) => e != null)), A = {
+		...D,
+		...k
+	}, j = u(() => ({ cookiePolicy: a }), [a]), P = u(() => V(c, l, n(T)), [
+		c,
+		l,
+		T
+	]), F = m ?? (w.position === "left" ? "left" : "right"), I = E({
+		isOpen: o,
+		showFloatingButton: p,
+		showCustomizePreferences: f,
+		floatingPosition: F,
+		onMsg: v
+	}), R = I.view !== null, W = I.view?.source === "floating-button" ? {
+		...w,
+		position: I.view.position,
+		slideFrom: "bottom"
+	} : w, G = (e) => {
+		if (e.type === "on_open_preferences") return I.openPreferences("banner");
+		if (e.type === "on_close_preferences") return I.closePreferences();
+		v?.(e);
 	};
-	return /* @__PURE__ */ b("div", {
-		"data-theme": v,
-		"data-banner-variant": _,
-		className: e("pxc", w),
+	return /* @__PURE__ */ S("div", {
+		"data-theme": g,
+		"data-banner-variant": h,
+		className: e("pxc", y),
 		style: {
 			fontFamily: "var(--pxc-font-family)",
-			...E
+			...C
 		},
-		lang: k,
-		children: /* @__PURE__ */ b(D, {
-			...O,
-			isOpen: !!o,
-			appearanceDelay: l,
-			className: H ? "pxc-container--preferences" : void 0,
-			actions: H ? null : /* @__PURE__ */ b(B, {
-				variant: _,
-				content: N,
-				equalWeight: h,
-				showCustomizePreferences: g,
-				preferencesRef: G,
-				onMsg: (e) => {
-					switch (e.type) {
-						case "on_open_preferences":
-							K();
-							break;
-						case "on_accept_all":
-						case "on_reject_all":
-							C?.(e);
-							break;
-						default: T(e.type);
-					}
-				}
+		lang: T,
+		children: [/* @__PURE__ */ x(O, {
+			...W,
+			isOpen: o,
+			onExitFocus: I.onExitFocus,
+			onPresenceChange: I.setHasPanel,
+			appearanceDelay: s,
+			className: R ? "pxc-container--preferences" : void 0,
+			actions: R ? null : /* @__PURE__ */ x(U, {
+				variant: h,
+				content: A,
+				equalWeight: d,
+				showCustomizePreferences: f,
+				preferencesRef: I.triggerRef,
+				onMsg: G
 			}),
-			children: H ? /* @__PURE__ */ b(I, {
-				links: F,
-				content: N,
-				sections: V,
-				onMsg: (e) => {
-					switch (e.type) {
-						case "on_close_preferences":
-							q();
-							break;
-						case "on_apply_preferences":
-						case "on_change_preference":
-							C?.(e);
-							break;
-						default: T(e);
-					}
-				}
-			}) : /* @__PURE__ */ x(y, { children: [_ === "stacked" ? /* @__PURE__ */ x("div", {
+			children: R ? /* @__PURE__ */ x(z, {
+				links: j,
+				content: A,
+				sections: P,
+				onMsg: G
+			}) : /* @__PURE__ */ S(b, { children: [h === "stacked" ? /* @__PURE__ */ S("div", {
 				className: "pxc-banner__heading",
-				children: [/* @__PURE__ */ b(A, {}), /* @__PURE__ */ b(z, {
+				children: [/* @__PURE__ */ x(N, {}), /* @__PURE__ */ x(H, {
 					variant: "heading",
 					tag: "h3",
-					children: N.title
+					children: A.title
 				})]
-			}) : /* @__PURE__ */ b(A, {}), /* @__PURE__ */ b(z, {
+			}) : /* @__PURE__ */ x(N, {}), /* @__PURE__ */ x(H, {
 				variant: "paragraph",
-				children: /* @__PURE__ */ b(P, {
-					message: N.collapsedText,
-					links: F
+				children: /* @__PURE__ */ x(L, {
+					message: A.collapsedText,
+					links: j
 				})
 			})] })
-		})
+		}), p && !o && !I.hasPanel && /* @__PURE__ */ x(M, {
+			ref: I.triggerRef,
+			position: F,
+			label: A.customizePreferencesLabel.trim() || D.customizePreferencesLabel,
+			onMsg: () => I.openPreferences("floating-button")
+		})]
 	});
 });
 //#endregion
-export { V as Banner };
+export { W as Banner };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peax/consent-banner-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Accessible React bindings and components for Peax Consent.",
   "keywords": [
     "consent-management",
@@ -54,8 +54,8 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
-    "@peax/consent-banner-locales": "^0.1.0",
-    "@peax/consent-banner-theme": "^0.1.0",
+    "@peax/consent-banner-locales": "^0.2.0",
+    "@peax/consent-banner-theme": "^0.2.0",
     "clsx": "^2.1.1",
     "framer-motion": "^13.1.1"
   },