@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/actionbar/index.js

@@ -1,133 +1,155 @@
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionBar.tsx
 import { mergeStyles } from "../style/runtime.js";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.js";
 import { ActionButtonGroup } from "../actionbuttongroup/index.js";
 import { t as s2IntlStrings } from "../_chunk/intl.js";
-import { className, createComponent, effect, getNextElement, getNextMarker, insert, mergeProps, template } from "solid-js/web";
-import { Show, createContext, createEffect, createMemo, createSignal, mergeProps as mergeProps$1, onCleanup, onMount, splitProps, useContext } from "solid-js";
-import { FocusScope, createStringFormatter } from "@proyecto-viviana/solidaria";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, mergeProps, readShallow, scope, template } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, createSignal, flush, onCleanup, onSettled, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { ActionBar as ActionBar$1, ActionBarContainer as ActionBarContainer$1, Button, useActionBarContext } from "@proyecto-viviana/solidaria-components";
+import { FocusScope, createStringFormatter, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
 //#region src/actionbar/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<svg xmlns=http://www.w3.org/2000/svg width=12 height=12 viewBox="0 0 12 12"class=" Zj151 Fk151"><path fill="var(--iconPrimary, #222)"d="m7.342 6 3.396-3.396a.95.95 0 1 0-1.342-1.342L6 4.658 2.604 1.262a.95.95 0 1 0-1.343 1.342L4.659 6 1.262 9.396a.95.95 0 1 0 1.343 1.342L6 7.342l3.396 3.396a.946.946 0 0 0 1.342.001.95.95 0 0 0 0-1.343z">`), _tmpl$2 = /*#__PURE__*/ template(`<div class=" _Jb151 IM151">`), _tmpl$3 = /*#__PURE__*/ template(`<div class=" _Ja151 sd151 eb151 Ub151 qb151"><!$><!/><span>`);
+var _tmpl$ = /* @__PURE__ */ template(`<svg width=12 height=12 viewBox="0 0 12 12"class=" Zj17 Fk17"><path fill="var(--iconPrimary, #222)"d="m7.342 6 3.396-3.396a.95.95 0 1 0-1.342-1.342L6 4.658 2.604 1.262a.95.95 0 1 0-1.343 1.342L4.659 6 1.262 9.396a.95.95 0 1 0 1.343 1.342L6 7.342l3.396 3.396a.946.946 0 0 0 1.342.001.95.95 0 0 0 0-1.343z">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div class=" _Jb17 IM17">`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div class=" _Ja17 sd17 eb17 Ub17 qb17"><!$><!/><span>`);
 const ACTION_BAR_EXIT_DURATION = 200;
 const actionBarStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " oQvqurc151";
-	rules += " nQvqurc151";
-	rules += " kQvqurc151";
-	rules += " jQvqurc151";
-	if (props.isEmphasized) rules += " -Ovbhqd-gHKLAu151";
-	else rules += " -Ovbhqd-g9ORGnd151";
-	rules += " gEzkoQe151";
-	rules += " -Jvcevd-Nbc1hc151";
-	rules += " _nfRoCnb151";
-	rules += " _oa151";
-	rules += " _Lf151";
-	rules += " _Mb151";
-	if (props.isEmphasized) rules += " Oj151";
-	else rules += " OLNnmzc151";
-	rules += " Ola151";
-	rules += " St151";
-	rules += " Rt151";
-	rules += " Te151";
-	rules += " Qe151";
-	rules += " sd151";
-	rules += " Ul151";
-	rules += " ql151";
-	rules += " eb151";
-	if (props.isInContainer) rules += " _Pa151";
-	rules += " _lr151";
-	rules += " _AI151";
-	rules += " -F3Iohc-_zI151";
-	if (props.isInContainer) rules += " Zd151";
-	else rules += " Za151";
-	rules += " IM151";
-	rules += " HM151";
-	rules += " Ll151";
-	rules += " Yg151";
-	rules += " Xc151";
-	rules += " _2b151";
+	rules += " oQvqurc17";
+	rules += " nQvqurc17";
+	rules += " kQvqurc17";
+	rules += " jQvqurc17";
+	if (props.isEmphasized) rules += " -Ovbhqd-gmiKvLd17";
+	else rules += " -Ovbhqd-gHPXipd17";
+	rules += " gEzkoQe17";
+	if (props.isEmphasized) rules += " _ic17";
+	else rules += " _iRvAxPd17";
+	rules += " _ilc17";
+	rules += " __mh0dLcd17";
+	rules += " _nbkwzSb17";
+	rules += " _oa17";
+	rules += " _Lf17";
+	rules += " _Mb17";
+	if (props.isEmphasized) rules += " Oj17";
+	else rules += " OAv83Hb17";
+	rules += " Ola17";
+	rules += " St17";
+	rules += " Rt17";
+	rules += " Te17";
+	rules += " Qe17";
+	rules += " sd17";
+	rules += " Ul17";
+	rules += " ql17";
+	rules += " eb17";
+	if (props.isInContainer) rules += " _Pa17";
+	rules += " _lr17";
+	rules += " _AI17";
+	rules += " -F3Iohc-_zI17";
+	if (props.isInContainer) rules += " Zd17";
+	else rules += " Za17";
+	rules += " IM17";
+	rules += " HM17";
+	rules += " Ll17";
+	rules += " Yg17";
+	rules += " Xc17";
+	rules += " _2b17";
 	if (props.isExiting) {
-		rules += " -_8PloMd-t151";
-		rules += " __Ya151";
+		rules += " -_8PloMd-t17";
+		rules += " __Ya17";
 	} else if (props.isEntering) {
-		rules += " -_8PloMd-t151";
-		rules += " __Ya151";
+		rules += " -_8PloMd-t17";
+		rules += " __Ya17";
 	} else {
-		rules += " -_8PloMd-q151";
-		rules += " __Ya151";
+		rules += " -_8PloMd-q17";
+		rules += " __Ya17";
 	}
 	return rules;
 };
 const selectionCountStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " uxe7h4151";
-	rules += " -_6BNtrc-c151";
-	rules += " vx151";
-	rules += " xb151";
-	rules += " _xa151";
-	rules += " _Fd151";
-	rules += " _FnuYUweb151";
-	if (props.isEmphasized) rules += " pLZZSrd151";
-	else rules += " pHKLAu151";
+	rules += " uxe7h417";
+	rules += " -_6BNtrc-c17";
+	rules += " vx17";
+	rules += " xb17";
+	rules += " _xa17";
+	rules += " _Fd17";
+	rules += " _FnuYUweb17";
+	if (props.isEmphasized) rules += " p4T7hrb17";
+	else rules += " pmiKvLd17";
 	return rules;
 };
 const closeButtonStyles = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	if (props.isStaticColor) rules += " Oe151";
-	else rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	if (props.staticColor === "white") rules += " -Ovbhqd-gcwrnr151";
-	else if (props.staticColor === "black") rules += " -Ovbhqd-g4hn3s151";
-	rules += " sd151";
-	rules += " eb151";
-	rules += " _Ca151";
-	if (props.size === "XL") rules += " ZF151";
-	else if (props.size === "L") rules += " Zw151";
-	else if (props.size === "S") rules += " Zo151";
-	else if (props.size === "XS") rules += " Zm151";
-	else rules += " ZC151";
-	if (props.size === "XL") rules += " Fz151";
-	else if (props.size === "L") rules += " Fv151";
-	else if (props.size === "S") rules += " Fp151";
-	else if (props.size === "XS") rules += " Fn151";
-	else rules += " Fx151";
-	rules += " _va151";
-	rules += " og151";
-	rules += " ng151";
-	rules += " kg151";
-	rules += " jg151";
-	rules += " Td151";
-	rules += " Qd151";
-	rules += " Sd151";
-	rules += " Rd151";
-	rules += " _je151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.isPressed) if (props.isStaticColor) rules += " gg151";
-	else rules += " gG1H3ce151";
-	else if (props.isFocusVisible) if (props.isStaticColor) rules += " gg151";
-	else rules += " gG1H3ce151";
-	else if (props.isHovered) if (props.isStaticColor) rules += " gg151";
-	else rules += " gG1H3ce151";
-	else rules += " g9151";
-	if (props.isStaticColor) if (props.isDisabled) rules += " -_8sjo0b-pi151";
-	else if (props.isPressed) rules += " -_8sjo0b-pk151";
-	else if (props.isFocusVisible) rules += " -_8sjo0b-pk151";
-	else if (props.isHovered) rules += " -_8sjo0b-pk151";
-	else rules += " -_8sjo0b-pj151";
-	else if (props.isDisabled) rules += " -_8sjo0b-pUvnvv151";
-	else if (props.isPressed) rules += " -_8sjo0b-pMwyHo151";
-	else if (props.isFocusVisible) rules += " -_8sjo0b-pMwyHo151";
-	else if (props.isHovered) rules += " -_8sjo0b-pMwyHo151";
-	else rules += " -_8sjo0b-pHKLAu151";
-	if (props.isDisabled) rules += " -_8sjo0b-lpc151";
-	else rules += " -_8sjo0b-lpb151";
-	rules += " __ca151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	if (props.isStaticColor) rules += " Oe17";
+	else rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	if (props.staticColor === "white") rules += " -Ovbhqd-gcwrnr17";
+	else if (props.staticColor === "black") rules += " -Ovbhqd-g4hn3s17";
+	rules += " sd17";
+	rules += " eb17";
+	rules += " _Ca17";
+	if (props.size === "XL") rules += " ZF17";
+	else if (props.size === "L") rules += " Zw17";
+	else if (props.size === "S") rules += " Zo17";
+	else if (props.size === "XS") rules += " Zm17";
+	else rules += " ZC17";
+	if (props.size === "XL") rules += " Fz17";
+	else if (props.size === "L") rules += " Fv17";
+	else if (props.size === "S") rules += " Fp17";
+	else if (props.size === "XS") rules += " Fn17";
+	else rules += " Fx17";
+	rules += " _va17";
+	rules += " og17";
+	rules += " ng17";
+	rules += " kg17";
+	rules += " jg17";
+	rules += " Td17";
+	rules += " Qd17";
+	rules += " Sd17";
+	rules += " Rd17";
+	rules += " _je17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.isPressed) {
+		if (props.isStaticColor) rules += " gg17";
+		else rules += " g8DRfdc17";
+	} else if (props.isFocusVisible) {
+		if (props.isStaticColor) rules += " gg17";
+		else rules += " g8DRfdc17";
+	} else if (props.isHovered) {
+		if (props.isStaticColor) rules += " gg17";
+		else rules += " g8DRfdc17";
+	} else rules += " g917";
+	if (props.isStaticColor) {
+		if (props.isDisabled) rules += " -_8sjo0b-pi17";
+		else if (props.isPressed) rules += " -_8sjo0b-pk17";
+		else if (props.isFocusVisible) rules += " -_8sjo0b-pk17";
+		else if (props.isHovered) rules += " -_8sjo0b-pk17";
+		else rules += " -_8sjo0b-pj17";
+	} else if (props.isDisabled) rules += " -_8sjo0b-p8H6Pad17";
+	else if (props.isPressed) rules += " -_8sjo0b-pBJTC6c17";
+	else if (props.isFocusVisible) rules += " -_8sjo0b-pBJTC6c17";
+	else if (props.isHovered) rules += " -_8sjo0b-pBJTC6c17";
+	else rules += " -_8sjo0b-pmiKvLd17";
+	if (props.isDisabled) rules += " -_8sjo0b-lpc17";
+	else rules += " -_8sjo0b-lpb17";
+	rules += " __ca17";
 	return rules;
 };
 function ActionBarCloseIcon() {
@@ -174,7 +196,7 @@ function createActionBarContainer(props) {
 	return {
 		selectedKeys,
 		onSelectionChange: setSelectedKeys,
-		actionBar: () => createComponent(ActionBarContext.Provider, {
+		actionBar: () => createComponent(ActionBarContext, {
 			value: actionBarContext,
 			get children() {
 				return props.renderActionBar?.(selectedKeys());
@@ -204,18 +226,17 @@ function getBarClassName(renderProps, contextUnsafeClassName, propUnsafeClassNam
 }
 function countMessage(formatter, count) {
 	if (count === "all") return formatter.format("actionbar.selectedAll");
-	const message = formatter.format("actionbar.selected", { count });
-	return message.includes("{count}") ? message.replace("{count}", String(count)) : message;
+	return formatter.format("actionbar.selected", { count });
 }
 function ActionBarCloseButton(props) {
 	const ctx = useActionBarContext();
 	const staticColorValue = () => props.isEmphasized ? "auto" : void 0;
 	return createComponent(Button, {
-		get ["aria-label"]() {
+		get "aria-label"() {
 			return props["aria-label"];
 		},
 		onPress: () => ctx?.onClearSelection?.(),
-		"class": (renderProps) => closeButtonStyles({
+		class: (renderProps) => closeButtonStyles({
 			...renderProps,
 			staticColor: staticColorValue(),
 			isStaticColor: !!staticColorValue()
@@ -227,7 +248,8 @@ function ActionBarCloseButton(props) {
 }
 function ActionBar(props) {
 	const contextProps = getSlottedContextProps(useContext(ActionBarContext), props.slot);
-	const [local, headlessProps] = splitProps(mergeProps$1(contextProps ?? {}, props), [
+	const merged = mergeProps$2(contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(merged, [
 		"class",
 		"children",
 		"isEmphasized",
@@ -238,11 +260,11 @@ function ActionBar(props) {
 		"ref",
 		"scrollRef"
 	]);
-	const [scrollbarWidth, setScrollbarWidth] = createSignal(0);
-	const [isRendered, setIsRendered] = createSignal((headlessProps.selectedItemCount ?? 0) !== 0);
-	const [isEntering, setIsEntering] = createSignal(false);
-	const [isExiting, setIsExiting] = createSignal(false);
-	const [lastCount, setLastCount] = createSignal(headlessProps.selectedItemCount ?? 0);
+	const [scrollbarWidth, setScrollbarWidth] = createSignal(0, { ownedWrite: true });
+	const [isRendered, setIsRendered] = createSignal((headlessProps.selectedItemCount ?? 0) !== 0, { ownedWrite: true });
+	const [isEntering, setIsEntering] = createSignal(false, { ownedWrite: true });
+	const [isExiting, setIsExiting] = createSignal(false, { ownedWrite: true });
+	const [lastCount, setLastCount] = createSignal(headlessProps.selectedItemCount ?? 0, { ownedWrite: true });
 	let exitTimeout;
 	let enterFrame;
 	const scrollElement = () => getScrollElement(local.scrollRef);
@@ -265,11 +287,19 @@ function ActionBar(props) {
 		const element = scrollElement();
 		setScrollbarWidth(element ? element.offsetWidth - element.clientWidth : 0);
 	};
-	createEffect(updateScrollbarWidth);
+	createEffect(() => scrollElement(), () => {
+		updateScrollbarWidth();
+	});
 	createEffect(() => {
 		const count = selectedItemCount();
-		const open = count !== 0;
-		if (count === "all" || count > 0) setLastCount(count);
+		return {
+			count,
+			open: count !== 0,
+			rendered: isRendered(),
+			hasScrollRef: !!local.scrollRef
+		};
+	}, ({ count, open, rendered, hasScrollRef }) => {
+		if (count === "all" || typeof count === "number" && count > 0) setLastCount(count);
 		if (exitTimeout) {
 			clearTimeout(exitTimeout);
 			exitTimeout = void 0;
@@ -277,7 +307,7 @@ function ActionBar(props) {
 		if (open) {
 			setIsRendered(true);
 			setIsExiting(false);
-			if (local.scrollRef) {
+			if (hasScrollRef) {
 				setIsEntering(true);
 				if (typeof requestAnimationFrame !== "undefined") {
 					if (enterFrame != null) cancelAnimationFrame(enterFrame);
@@ -290,11 +320,11 @@ function ActionBar(props) {
 			return;
 		}
 		setIsEntering(false);
-		if (!isRendered()) {
+		if (!rendered) {
 			setIsExiting(false);
 			return;
 		}
-		if (!local.scrollRef) {
+		if (!hasScrollRef) {
 			setIsRendered(false);
 			setIsExiting(false);
 			return;
@@ -304,15 +334,24 @@ function ActionBar(props) {
 			exitTimeout = void 0;
 			setIsRendered(false);
 			setIsExiting(false);
+			try {
+				flush();
+			} catch {}
 		}, ACTION_BAR_EXIT_DURATION);
+		return () => {
+			if (exitTimeout) {
+				clearTimeout(exitTimeout);
+				exitTimeout = void 0;
+			}
+		};
 	});
-	onMount(() => {
+	onSettled(() => {
 		updateScrollbarWidth();
 		const element = scrollElement();
 		if (!element || typeof ResizeObserver === "undefined") return;
 		const observer = new ResizeObserver(updateScrollbarWidth);
 		observer.observe(element);
-		onCleanup(() => observer.disconnect());
+		return () => observer.disconnect();
 	});
 	onCleanup(() => {
 		if (exitTimeout) clearTimeout(exitTimeout);
@@ -344,7 +383,7 @@ function ActionBar(props) {
 						get slot() {
 							return local.slot ?? void 0;
 						},
-						"class": (rp) => getBarClassName(rp, contextProps?.UNSAFE_className, props.UNSAFE_className, contextProps?.class, props.class, local.isEmphasized, !!local.scrollRef, isEntering(), isExiting(), mergedStyles()),
+						class: (rp) => getBarClassName(rp, contextProps?.UNSAFE_className, props.UNSAFE_className, contextProps?.class, props.class, local.isEmphasized, !!local.scrollRef, isEntering(), isExiting(), mergedStyles()),
 						style: () => rootStyle(),
 						get children() {
 							return [(() => {
@@ -354,7 +393,7 @@ function ActionBar(props) {
 										return local.isEmphasized ? "auto" : void 0;
 									},
 									isQuiet: true,
-									get ["aria-label"]() {
+									get "aria-label"() {
 										return actionGroupLabel();
 									},
 									get children() {
@@ -363,17 +402,24 @@ function ActionBar(props) {
 								}));
 								return _el$2;
 							})(), (() => {
-								var _el$3 = getNextElement(_tmpl$3), _el$5 = _el$3.firstChild, [_el$6, _co$] = getNextMarker(_el$5.nextSibling), _el$4 = _el$6.nextSibling;
+								var _el$3 = getNextElement(_tmpl$3);
+								var _el$4 = _el$3.firstChild;
+								var [_el$5, _el$6] = getNextMarker(_el$4.nextSibling);
+								var _el$7 = _el$5.nextSibling;
 								insert(_el$3, createComponent(ActionBarCloseButton, {
 									get isEmphasized() {
 										return local.isEmphasized;
 									},
-									get ["aria-label"]() {
+									get "aria-label"() {
 										return clearSelectionLabel();
 									}
-								}), _el$6, _co$);
-								insert(_el$4, selectionLabel);
-								effect(() => className(_el$4, selectionCountStyles({ isEmphasized: local.isEmphasized })));
+								}), _el$5, _el$6);
+								insert(_el$7, scope(() => {
+									return selectionLabel();
+								}));
+								effect(() => readShallow(selectionCountStyles({ isEmphasized: local.isEmphasized })), (_v$, _$p) => {
+									className(_el$7, _v$, _$p);
+								});
 								return _el$3;
 							})()];
 						}
@@ -385,7 +431,7 @@ function ActionBar(props) {
 }
 function ActionBarContainer(props) {
 	return createComponent(ActionBarContainer$1, {
-		get ["class"]() {
+		get "class"() {
 			return ["vui-action-bar-container", props.class].filter(Boolean).join(" ");
 		},
 		get children() {

package/dist/actionbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/actionbar/index.tsx"],"sourcesContent":["import {\n  type JSX,\n  Show,\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport {\n  ActionBar as HeadlessActionBar,\n  ActionBarContainer as HeadlessActionBarContainer,\n  Button as HeadlessButton,\n  type ActionBarRenderProps,\n  type ButtonRenderProps,\n  useActionBarContext,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { FocusScope, createStringFormatter } from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, lightDark, style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport { controlSize, staticColor } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { ActionButtonGroup } from \"../actionbuttongroup\";\nimport { s2IntlStrings } from \"../intl\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport type { StaticColor } from \"../button/types\";\n\ntype ScrollRef = { current?: HTMLElement | null } | HTMLElement | undefined;\ntype SelectedItemCount = number | \"all\";\ntype ActionBarAnimationState = {\n  isEmphasized?: boolean;\n  isInContainer?: boolean;\n  isEntering?: boolean;\n  isExiting?: boolean;\n};\ntype ActionBarCloseButtonState = ButtonRenderProps & {\n  staticColor?: StaticColor;\n  isStaticColor: boolean;\n};\n\nconst ACTION_BAR_EXIT_DURATION = 200;\n\nconst actionBarStyles = style<ActionBarAnimationState>({\n  borderRadius: \"card\",\n  \"--s2-container-bg\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"elevated\",\n      isEmphasized: \"neutral\",\n    },\n  },\n  backgroundColor: \"--s2-container-bg\",\n  // Glasselated: frost the scene behind the surface — the container bg is the\n  // translucent `--surface-card`; the blur is what makes it read as glass.\n  backdropFilter: \"var(--blur-card)\",\n  boxShadow: \"elevated\",\n  boxSizing: \"border-box\",\n  outlineStyle: \"solid\",\n  outlineWidth: 1,\n  outlineColor: {\n    default: lightDark(\"transparent-white-25\", \"gray-200\"),\n    isEmphasized: \"transparent\",\n    forcedColors: \"ButtonBorder\",\n  },\n  paddingX: 8,\n  paddingY: 12,\n  display: \"flex\",\n  gap: 16,\n  alignItems: \"center\",\n  position: {\n    isInContainer: \"absolute\",\n  },\n  bottom: 0,\n  insetStart: 8,\n  \"--insetEnd\": {\n    type: \"insetEnd\",\n    value: 8,\n  },\n  width: {\n    default: \"full\",\n    isInContainer: \"auto\",\n  },\n  marginX: \"auto\",\n  maxWidth: 960,\n  transition: \"transform\",\n  transitionDuration: 200,\n  translateY: {\n    default: -8,\n    isEntering: \"full\",\n    isExiting: \"full\",\n  },\n});\n\nconst actionsWrapperStyles = style({\n  order: 1,\n  marginStart: \"auto\",\n});\n\nconst selectionWrapperStyles = style({\n  order: 0,\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n});\n\nconst selectionCountStyles = style<{ isEmphasized?: boolean }>({\n  font: \"ui\",\n  color: {\n    default: \"neutral\",\n    isEmphasized: \"gray-25\",\n  },\n});\n\nconst closeButtonHoverBackground = {\n  default: \"gray-200\",\n  isStaticColor: \"transparent-overlay-200\",\n} as const;\n\nconst closeButtonStyles = style<ActionBarCloseButtonState>({\n  ...focusRing(),\n  ...staticColor(),\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  size: controlSize(),\n  flexShrink: 0,\n  borderRadius: \"full\",\n  padding: 0,\n  borderStyle: \"none\",\n  transition: \"default\",\n  backgroundColor: {\n    default: \"transparent\",\n    isHovered: closeButtonHoverBackground,\n    isFocusVisible: closeButtonHoverBackground,\n    isPressed: closeButtonHoverBackground,\n  },\n  \"--iconPrimary\": {\n    type: \"color\",\n    value: {\n      default: baseColor(\"neutral\"),\n      isDisabled: \"disabled\",\n      isStaticColor: {\n        default: baseColor(\"transparent-overlay-800\"),\n        isDisabled: \"transparent-overlay-400\",\n      },\n      forcedColors: {\n        default: \"ButtonText\",\n        isDisabled: \"GrayText\",\n      },\n    },\n  },\n  outlineColor: {\n    default: \"focus-ring\",\n    isStaticColor: \"transparent-overlay-1000\",\n    forcedColors: \"Highlight\",\n  },\n  disableTapHighlight: true,\n});\n\nconst closeIconStyles = style({\n  size: 12,\n});\n\nfunction ActionBarCloseIcon(): JSX.Element {\n  // Faithful to S2's `CloseButton` (CloseButton.mjs), which renders the\n  // `Cross` UI-icon: a bare `<svg>` with NO `aria-hidden` (the ui-icon path\n  // does not run the `createIcon` factory that would set it). Chromium exposes\n  // a bare `<svg>` as `role=\"img\"`, so it surfaces as an `img` child of the\n  // clear button in the accessibility tree — the port must NOT mark it hidden.\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 12 12\"\n      class={closeIconStyles}\n    >\n      <path\n        fill=\"var(--iconPrimary, #222)\"\n        d=\"m7.342 6 3.396-3.396a.95.95 0 1 0-1.342-1.342L6 4.658 2.604 1.262a.95.95 0 1 0-1.343 1.342L4.659 6 1.262 9.396a.95.95 0 1 0 1.343 1.342L6 7.342l3.396 3.396a.946.946 0 0 0 1.342.001.95.95 0 0 0 0-1.343z\"\n      />\n    </svg>\n  );\n}\n\nexport interface ActionBarProps extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\"\n> {\n  /** The number of selected items. ActionBar is hidden when 0. */\n  selectedItemCount?: number | \"all\";\n  /** Whether the ActionBar should be displayed with an emphasized style. */\n  isEmphasized?: boolean;\n  /** Callback when the clear button is pressed. */\n  onClearSelection?: () => void;\n  /** Callback when an action is triggered. */\n  onAction?: (key: Key) => void;\n  /** The action buttons to display. */\n  children?: JSX.Element;\n  /** A ref to the scrollable element the ActionBar appears above. */\n  scrollRef?: ScrollRef;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString | (() => StyleString | undefined);\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Accessible label for the action bar. @default 'Actions' */\n  \"aria-label\"?: string;\n  /** Identifies the element (or elements) that labels the action bar. */\n  \"aria-labelledby\"?: string;\n  /** Optional keydown handler for the action bar root. */\n  onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;\n  slot?: string | null;\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface ActionBarContainerProps {\n  children?: JSX.Element;\n  class?: string;\n}\n\nexport type ActionBarSelectedKeys = \"all\" | Set<Key>;\n\nexport interface ActionBarContainerStateProps {\n  selectedKeys?: \"all\" | Iterable<Key>;\n  defaultSelectedKeys?: \"all\" | Iterable<Key>;\n  onSelectionChange?: (keys: ActionBarSelectedKeys) => void;\n  renderActionBar?: (selectedKeys: ActionBarSelectedKeys) => JSX.Element;\n  scrollRef?: ScrollRef;\n}\n\nexport interface ActionBarContainerState {\n  selectedKeys: () => ActionBarSelectedKeys;\n  onSelectionChange: (keys: \"all\" | Iterable<Key>) => void;\n  actionBar: () => JSX.Element;\n  actionBarHeight: () => number;\n}\n\nexport const ActionBarContext = createContext<SpectrumContextValue<ActionBarProps>>(null);\n\nfunction normalizeSelectedKeys(keys: \"all\" | Iterable<Key> | undefined): ActionBarSelectedKeys {\n  return keys === \"all\" ? \"all\" : new Set(keys ?? []);\n}\n\nfunction copySelectedKeys(keys: ActionBarSelectedKeys): ActionBarSelectedKeys {\n  return keys === \"all\" ? \"all\" : new Set(keys);\n}\n\nfunction getScrollElement(scrollRef: ScrollRef): HTMLElement | null {\n  if (!scrollRef) {\n    return null;\n  }\n\n  if (typeof HTMLElement !== \"undefined\" && scrollRef instanceof HTMLElement) {\n    return scrollRef;\n  }\n\n  return \"current\" in scrollRef ? (scrollRef.current ?? null) : null;\n}\n\nexport function createActionBarContainer(\n  props: ActionBarContainerStateProps,\n): ActionBarContainerState {\n  const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] =\n    createSignal<ActionBarSelectedKeys>(normalizeSelectedKeys(props.defaultSelectedKeys));\n  const [actionBarHeight, setActionBarHeight] = createSignal(0);\n\n  const selectedKeys = createMemo<ActionBarSelectedKeys>(() =>\n    props.selectedKeys !== undefined\n      ? normalizeSelectedKeys(props.selectedKeys)\n      : uncontrolledSelectedKeys(),\n  );\n  const selectedItemCount = createMemo<SelectedItemCount>(() => {\n    const keys = selectedKeys();\n    return keys === \"all\" ? \"all\" : keys.size;\n  });\n  const setSelectedKeys = (keys: \"all\" | Iterable<Key>) => {\n    const normalized = normalizeSelectedKeys(keys);\n\n    if (props.selectedKeys === undefined) {\n      setUncontrolledSelectedKeys(normalized);\n    }\n\n    props.onSelectionChange?.(copySelectedKeys(normalized));\n  };\n  const actionBarRef = (element: HTMLDivElement) => {\n    setActionBarHeight(element ? element.offsetHeight + 8 : 0);\n  };\n  const actionBarContext: SpectrumContextValue<ActionBarProps> = {\n    ref: actionBarRef,\n    get scrollRef() {\n      return props.scrollRef;\n    },\n    get selectedItemCount() {\n      return selectedItemCount();\n    },\n    onClearSelection: () => setSelectedKeys(new Set()),\n  };\n\n  return {\n    selectedKeys,\n    onSelectionChange: setSelectedKeys,\n    actionBar: () => (\n      <ActionBarContext.Provider value={actionBarContext}>\n        {props.renderActionBar?.(selectedKeys())}\n      </ActionBarContext.Provider>\n    ),\n    actionBarHeight,\n  };\n}\n\nfunction getBarClassName(\n  renderProps: ActionBarRenderProps,\n  contextUnsafeClassName?: string,\n  propUnsafeClassName?: string,\n  contextClassName?: string,\n  propClassName?: string,\n  isEmphasized?: boolean,\n  isInContainer?: boolean,\n  isEntering?: boolean,\n  isExiting?: boolean,\n  styles?: StyleString,\n): string {\n  return [\n    \"vui-action-bar\",\n    isEmphasized ? \"vui-action-bar--emphasized\" : \"\",\n    isInContainer ? \"vui-action-bar--in-container\" : \"\",\n    isEntering ? \"vui-action-bar--entering\" : \"\",\n    isExiting ? \"vui-action-bar--exiting\" : \"\",\n    contextUnsafeClassName ?? \"\",\n    propUnsafeClassName ?? \"\",\n    contextClassName ?? \"\",\n    propClassName ?? \"\",\n    mergeStyles(\n      actionBarStyles({\n        isEmphasized,\n        isInContainer,\n        isEntering,\n        isExiting,\n      }),\n      styles,\n    ),\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction countMessage(\n  formatter: ReturnType<ReturnType<typeof createStringFormatter>>,\n  count: SelectedItemCount,\n): string {\n  if (count === \"all\") {\n    return formatter.format(\"actionbar.selectedAll\");\n  }\n\n  const message = formatter.format(\"actionbar.selected\", { count });\n  return message.includes(\"{count}\") ? message.replace(\"{count}\", String(count)) : message;\n}\n\nfunction ActionBarCloseButton(props: {\n  isEmphasized?: boolean;\n  \"aria-label\": string;\n}): JSX.Element {\n  const ctx = useActionBarContext();\n  const staticColorValue = () => (props.isEmphasized ? \"auto\" : undefined);\n\n  return (\n    <HeadlessButton\n      aria-label={props[\"aria-label\"]}\n      onPress={() => ctx?.onClearSelection?.()}\n      class={(renderProps: ButtonRenderProps) =>\n        closeButtonStyles({\n          ...renderProps,\n          staticColor: staticColorValue(),\n          isStaticColor: !!staticColorValue(),\n        })\n      }\n    >\n      <ActionBarCloseIcon />\n    </HeadlessButton>\n  );\n}\n\nexport function ActionBar(props: ActionBarProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ActionBarContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"isEmphasized\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"slot\",\n    \"ref\",\n    \"scrollRef\",\n  ]);\n  const [scrollbarWidth, setScrollbarWidth] = createSignal(0);\n  const [isRendered, setIsRendered] = createSignal((headlessProps.selectedItemCount ?? 0) !== 0);\n  const [isEntering, setIsEntering] = createSignal(false);\n  const [isExiting, setIsExiting] = createSignal(false);\n  const [lastCount, setLastCount] = createSignal<SelectedItemCount>(\n    headlessProps.selectedItemCount ?? 0,\n  );\n  let exitTimeout: ReturnType<typeof setTimeout> | undefined;\n  let enterFrame: number | undefined;\n\n  const scrollElement = () => getScrollElement(local.scrollRef);\n  const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n  const selectedItemCount = () => headlessProps.selectedItemCount ?? 0;\n  const isOpen = () => selectedItemCount() !== 0;\n  const renderedCount = () => (isOpen() ? selectedItemCount() : lastCount());\n  const selectedItemCountForHeadless = () => (isRendered() ? renderedCount() : 0);\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const actionBarRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref,\n  );\n  const rootStyle = (): JSX.CSSProperties => {\n    const unsafeStyle = mergedUnsafeStyle();\n    const containerStyle = {\n      \"inset-inline-end\": `calc(var(--insetEnd, 8px) + ${scrollbarWidth()}px)`,\n    } satisfies JSX.CSSProperties;\n\n    return { ...containerStyle, ...unsafeStyle };\n  };\n  const updateScrollbarWidth = () => {\n    const element = scrollElement();\n    setScrollbarWidth(element ? element.offsetWidth - element.clientWidth : 0);\n  };\n\n  createEffect(updateScrollbarWidth);\n  createEffect(() => {\n    const count = selectedItemCount();\n    const open = count !== 0;\n\n    if (count === \"all\" || count > 0) {\n      setLastCount(count);\n    }\n\n    if (exitTimeout) {\n      clearTimeout(exitTimeout);\n      exitTimeout = undefined;\n    }\n\n    if (open) {\n      setIsRendered(true);\n      setIsExiting(false);\n\n      if (local.scrollRef) {\n        setIsEntering(true);\n        if (typeof requestAnimationFrame !== \"undefined\") {\n          if (enterFrame != null) {\n            cancelAnimationFrame(enterFrame);\n          }\n          enterFrame = requestAnimationFrame(() => {\n            enterFrame = undefined;\n            setIsEntering(false);\n          });\n        } else {\n          setTimeout(() => setIsEntering(false), 0);\n        }\n      } else {\n        setIsEntering(false);\n      }\n      return;\n    }\n\n    setIsEntering(false);\n    if (!isRendered()) {\n      setIsExiting(false);\n      return;\n    }\n\n    if (!local.scrollRef) {\n      setIsRendered(false);\n      setIsExiting(false);\n      return;\n    }\n\n    setIsExiting(true);\n    exitTimeout = setTimeout(() => {\n      exitTimeout = undefined;\n      setIsRendered(false);\n      setIsExiting(false);\n    }, ACTION_BAR_EXIT_DURATION);\n  });\n  onMount(() => {\n    updateScrollbarWidth();\n    const element = scrollElement();\n    if (!element || typeof ResizeObserver === \"undefined\") {\n      return;\n    }\n\n    const observer = new ResizeObserver(updateScrollbarWidth);\n    observer.observe(element);\n    onCleanup(() => observer.disconnect());\n  });\n  onCleanup(() => {\n    if (exitTimeout) {\n      clearTimeout(exitTimeout);\n    }\n    if (enterFrame != null && typeof cancelAnimationFrame !== \"undefined\") {\n      cancelAnimationFrame(enterFrame);\n    }\n  });\n\n  const actionGroupLabel = createMemo(() => stringFormatter().format(\"actionbar.actions\"));\n  const actionsAvailableLabel = createMemo(() =>\n    stringFormatter().format(\"actionbar.actionsAvailable\"),\n  );\n  const clearSelectionLabel = createMemo(() =>\n    stringFormatter().format(\"actionbar.clearSelection\"),\n  );\n  const selectionLabel = createMemo(() => countMessage(stringFormatter(), renderedCount()));\n\n  return (\n    <Show when={isRendered()}>\n      <FocusScope restoreFocus>\n        <HeadlessActionBar\n          {...headlessProps}\n          selectedItemCount={selectedItemCountForHeadless()}\n          onClearSelection={headlessProps.onClearSelection}\n          actionsAvailableMessage={actionsAvailableLabel()}\n          ref={actionBarRef}\n          slot={local.slot ?? undefined}\n          class={(rp: ActionBarRenderProps) =>\n            getBarClassName(\n              rp,\n              contextProps?.UNSAFE_className,\n              props.UNSAFE_className,\n              contextProps?.class,\n              props.class,\n              local.isEmphasized,\n              !!local.scrollRef,\n              isEntering(),\n              isExiting(),\n              mergedStyles(),\n            )\n          }\n          style={() => rootStyle()}\n        >\n          {/*\n            Actions FIRST in DOM order, selection SECOND — faithful to S2\n            `ActionBar` (ActionBar.tsx:200-231): the actions wrapper is written\n            before the selection wrapper, and CSS `order` (`order:1` actions,\n            `order:0` selection) swaps their VISUAL order so the selection reads\n            on the leading side while the sole `toolbar` (the ActionButtonGroup)\n            stays first in the accessibility tree. This is what makes the clear\n            button + count text OUTSIDE siblings of the toolbar rather than the\n            first entries under it.\n          */}\n          <div class={actionsWrapperStyles}>\n            <ActionButtonGroup\n              staticColor={local.isEmphasized ? \"auto\" : undefined}\n              isQuiet\n              aria-label={actionGroupLabel()}\n            >\n              {local.children}\n            </ActionButtonGroup>\n          </div>\n          <div class={selectionWrapperStyles}>\n            <ActionBarCloseButton\n              isEmphasized={local.isEmphasized}\n              aria-label={clearSelectionLabel()}\n            />\n            <span class={selectionCountStyles({ isEmphasized: local.isEmphasized })}>\n              {selectionLabel()}\n            </span>\n          </div>\n        </HeadlessActionBar>\n      </FocusScope>\n    </Show>\n  );\n}\n\nexport function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {\n  return (\n    <HeadlessActionBarContainer\n      class={[\"vui-action-bar-container\", props.class].filter(Boolean).join(\" \")}\n    >\n      {props.children}\n    </HeadlessActionBarContainer>\n  );\n}\n"],"mappings":";;;;;;;;;;AAoDA,MAAM,2BAA2B;AAEjC,MAAM,kBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DN,MAAM,uBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;AAaN,MAAM,oBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CN,SAAS,qBAA0B;CAMjC,OAAA,eAAA,MAAA;AAcF;AA0DA,MAAa,mBAAmB,cAAoD,IAAA;AAEpF,SAAS,sBAAsB,MAA0C;CACvE,OAAO,SAAS,QAAQ,QAAQ,IAAI,IAAI,QAAQ,CAAA,CAAE;AACpD;AAEA,SAAS,iBAAiB,MAA8B;CACtD,OAAO,SAAS,QAAQ,QAAQ,IAAI,IAAI,IAAA;AAC1C;AAEA,SAAS,iBAAiB,WAAyC;CACjE,IAAI,CAAC,WACH,OAAO;CAGT,IAAI,OAAO,gBAAgB,eAAe,qBAAqB,aAC7D,OAAO;CAGT,OAAO,aAAa,YAAa,UAAU,WAAW,OAAQ;AAChE;AAEA,SAAgB,yBACd,OACC;CACD,MAAM,CAAC,0BAA0B,+BAC/B,aAAoC,sBAAsB,MAAM,mBAAmB,CAAA;CACrF,MAAM,CAAC,iBAAiB,sBAAsB,aAAa,CAAA;CAE3D,MAAM,eAAe,iBACnB,MAAM,iBAAiB,KAAA,IACnB,sBAAsB,MAAM,YAAY,IACxC,yBAAA,CAAA;CAEN,MAAM,oBAAoB,iBAA8B;EACtD,MAAM,OAAO,aAAA;EACb,OAAO,SAAS,QAAQ,QAAQ,KAAK;CACvC,CAAA;CACA,MAAM,mBAAmB,SAAuB;EAC9C,MAAM,aAAa,sBAAsB,IAAA;EAEzC,IAAI,MAAM,iBAAiB,KAAA,GACzB,4BAA4B,UAAA;EAG9B,MAAM,oBAAoB,iBAAiB,UAAA,CAAA;CAC7C;CACA,MAAM,gBAAgB,YAAS;EAC7B,mBAAmB,UAAU,QAAQ,eAAe,IAAI,CAAA;CAC1D;CACA,MAAM,mBAAyD;EAC7D,KAAK;EACL,IAAI,YAAY;GACd,OAAO,MAAM;EACf;EACA,IAAI,oBAAoB;GACtB,OAAO,kBAAA;EACT;EACA,wBAAwB,gCAAgB,IAAI,IAAA,CAAA;CAC9C;CAEA,OAAO;EACL;EACA,mBAAmB;EACnB,iBAAW,gBACR,iBAAiB,UAAA;GAAS,OAAO;GAAA,IAAA,WAAA;IAAA,OAC/B,MAAM,kBAAkB,aAAA,CAAA;GAAA;EAAA,CAAA;EAG7B;CACF;AACF;AAEA,SAAS,gBACP,aACA,wBACA,qBACA,kBACA,eACA,cACA,eACA,YACA,WACA,QACO;CACP,OAAO;EACL;EACA,eAAe,+BAA+B;EAC9C,gBAAgB,iCAAiC;EACjD,aAAa,6BAA6B;EAC1C,YAAY,4BAA4B;EACxC,0BAA0B;EAC1B,uBAAuB;EACvB,oBAAoB;EACpB,iBAAiB;EACjB,YACE,gBAAgB;GACd;GACA;GACA;GACA;EACF,CAAA,GACA,MAAA;CAAA,EAGD,OAAO,OAAA,EACP,KAAK,GAAA;AACV;AAEA,SAAS,aACP,WACA,OACO;CACP,IAAI,UAAU,OACZ,OAAO,UAAU,OAAO,uBAAA;CAG1B,MAAM,UAAU,UAAU,OAAO,sBAAsB,EAAE,MAAM,CAAA;CAC/D,OAAO,QAAQ,SAAS,SAAA,IAAa,QAAQ,QAAQ,WAAW,OAAO,KAAA,CAAA,IAAU;AACnF;AAEA,SAAS,qBAAqB,OAGtB;CACN,MAAM,MAAM,oBAAA;CACZ,MAAM,yBAA0B,MAAM,eAAe,SAAS,KAAA;CAE9D,OAAA,gBACG,QAAA;EAAA,KAAA,gBAAA;GAAA,OACa,MAAM;EAAa;EAC/B,eAAe,KAAK,mBAAA;EAAA,UACZ,gBACN,kBAAkB;GAChB,GAAG;GACH,aAAa,iBAAA;GACb,eAAe,CAAC,CAAC,iBAAA;EACnB,CAAA;EAAA,IAAA,WAAA;GAAA,OAAA,gBAGD,oBAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAGP;AAEA,SAAgB,UAAU,OAA4B;CACpD,MAAM,eAAe,uBAAuB,WAAW,gBAAA,GAAmB,MAAM,IAAI;CAEpF,MAAM,CAAC,OAAO,iBAAiB,WADhB,aAAW,gBAAgB,CAAC,GAAG,KACJ,GAAQ;EAChD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAA,CACD;CACD,MAAM,CAAC,gBAAgB,qBAAqB,aAAa,CAAA;CACzD,MAAM,CAAC,YAAY,iBAAiB,cAAc,cAAc,qBAAqB,OAAO,CAAA;CAC5F,MAAM,CAAC,YAAY,iBAAiB,aAAa,KAAA;CACjD,MAAM,CAAC,WAAW,gBAAgB,aAAa,KAAA;CAC/C,MAAM,CAAC,WAAW,gBAAgB,aAChC,cAAc,qBAAqB,CAAA;CAErC,IAAI;CACJ,IAAI;CAEJ,MAAM,sBAAsB,iBAAiB,MAAM,SAAS;CAC5D,MAAM,kBAAkB,sBAAsB,eAAe,oBAAA;CAC7D,MAAM,0BAA0B,cAAc,qBAAqB;CACnE,MAAM,eAAe,kBAAA,MAAwB;CAC7C,MAAM,sBAAuB,OAAA,IAAW,kBAAA,IAAsB,UAAA;CAC9D,MAAM,qCAAsC,WAAA,IAAe,cAAA,IAAkB;CAC7E,MAAM,qBAAqB,mBAAmB,cAAc,QAAQ,MAAM,MAAM;CAChF,MAAM,0BACJ,wBAAwB,cAAc,cAAc,MAAM,YAAY;CACxE,MAAM,eAAe,iBAClB,cAA2D,KAC5D,MAAM,GAAG;CAEX,MAAM,kBAAoB;EACxB,MAAM,cAAc,kBAAA;EAKpB,OAAO;GAHL,oBAAoB,+BAA+B,eAAA,EAAA;GAGzB,GAAG;EAAY;CAC7C;CACA,MAAM,6BAAuB;EAC3B,MAAM,UAAU,cAAA;EAChB,kBAAkB,UAAU,QAAQ,cAAc,QAAQ,cAAc,CAAA;CAC1E;CAEA,aAAa,oBAAA;CACb,mBAAa;EACX,MAAM,QAAQ,kBAAA;EACd,MAAM,OAAO,UAAU;EAEvB,IAAI,UAAU,SAAS,QAAQ,GAC7B,aAAa,KAAA;EAGf,IAAI,aAAa;GACf,aAAa,WAAA;GACb,cAAc,KAAA;EAChB;EAEA,IAAI,MAAM;GACR,cAAc,IAAA;GACd,aAAa,KAAA;GAEb,IAAI,MAAM,WAAW;IACnB,cAAc,IAAA;IACd,IAAI,OAAO,0BAA0B,aAAa;KAChD,IAAI,cAAc,MAChB,qBAAqB,UAAA;KAEvB,aAAa,4BAAsB;MACjC,aAAa,KAAA;MACb,cAAc,KAAA;KAChB,CAAA;IACF,OACE,iBAAiB,cAAc,KAAA,GAAQ,CAAA;GAE3C,OACE,cAAc,KAAA;GAEhB;EACF;EAEA,cAAc,KAAA;EACd,IAAI,CAAC,WAAA,GAAc;GACjB,aAAa,KAAA;GACb;EACF;EAEA,IAAI,CAAC,MAAM,WAAW;GACpB,cAAc,KAAA;GACd,aAAa,KAAA;GACb;EACF;EAEA,aAAa,IAAA;EACb,cAAc,iBAAW;GACvB,cAAc,KAAA;GACd,cAAc,KAAA;GACd,aAAa,KAAA;EACf,GAAG,wBAAA;CACL,CAAA;CACA,cAAQ;EACN,qBAAA;EACA,MAAM,UAAU,cAAA;EAChB,IAAI,CAAC,WAAW,OAAO,mBAAmB,aACxC;EAGF,MAAM,WAAW,IAAI,eAAe,oBAAA;EACpC,SAAS,QAAQ,OAAA;EACjB,gBAAgB,SAAS,WAAU,CAAA;CACrC,CAAA;CACA,gBAAU;EACR,IAAI,aACF,aAAa,WAAA;EAEf,IAAI,cAAc,QAAQ,OAAO,yBAAyB,aACxD,qBAAqB,UAAA;CAEzB,CAAA;CAEA,MAAM,mBAAmB,iBAAiB,gBAAA,EAAkB,OAAO,mBAAA,CAAA;CACnE,MAAM,wBAAwB,iBAC5B,gBAAA,EAAkB,OAAO,4BAAA,CAAA;CAE3B,MAAM,sBAAsB,iBAC1B,gBAAA,EAAkB,OAAO,0BAAA,CAAA;CAE3B,MAAM,iBAAiB,iBAAiB,aAAa,gBAAA,GAAmB,cAAA,CAAA,CAAA;CAExE,OAAA,gBACG,MAAA;EAAA,IAAK,OAAA;GAAA,OAAM,WAAA;EAAA;EAAA,IAAA,WAAA;GAAA,OAAA,gBACT,YAAA;IAAW,cAAA;IAAA,IAAA,WAAA;KAAA,OAAA,gBACT,aAAA,WACK,eAAa;MAAA,IACjB,oBAAA;OAAA,OAAmB,6BAAA;MAAA;MAAA,IACnB,mBAAA;OAAA,OAAkB,cAAc;MAAgB;MAAA,IAChD,0BAAA;OAAA,OAAyB,sBAAA;MAAA;MAAA,KACpB;MAAA,IACL,OAAA;OAAA,OAAM,MAAM,QAAQ,KAAA;MAAA;MAAA,UACZ,OACN,gBACE,IACA,cAAc,kBACd,MAAM,kBACN,cAAc,OACd,MAAM,OACN,MAAM,cACN,CAAC,CAAC,MAAM,WACR,WAAA,GACA,UAAA,GACA,aAAA,CAAA;MAGJ,aAAa,UAAA;MAAA,IAAA,WAAA;OAAA,OAAA,QAAA;QAAA,IAAA,QAAA,eAAA,OAAA;QAAA,OAAA,OAAA,gBAaV,mBAAA;SAAA,IACC,cAAA;UAAA,OAAa,MAAM,eAAe,SAAS,KAAA;SAAA;SAC3C,SAAA;SAAA,KAAA,gBAAA;UAAA,OACY,iBAAA;SAAA;SAAA,IAAA,WAAA;UAAA,OAEX,MAAM;SAAQ;QAAA,CAAA,CAAA;QAAA,OAAA;OAAA,GAAA,UAAA;QAAA,IAAA,QAAA,eAAA,OAAA,GAAA,QAAA,MAAA,YAAA,CAAA,OAAA,QAAA,cAAA,MAAA,WAAA,GAAA,QAAA,MAAA;QAAA,OAAA,OAAA,gBAIhB,sBAAA;SAAA,IACC,eAAA;UAAA,OAAc,MAAM;SAAY;SAAA,KAAA,gBAAA;UAAA,OACpB,oBAAA;SAAA;QAAA,CAAA,GAAA,OAAA,IAAA;QAAA,OAAA,OAGX,cAAA;QAAA,aAAA,UAAA,OADU,qBAAqB,EAAE,cAAc,MAAM,aAAa,CAAA,CAAA,CAAA;QAAA,OAAA;OAAA,GAAA,CAAA;MAAA;KAAA,CAAA,CAAA;IAAA;GAAA,CAAA;EAAA;CAAA,CAAA;AAQjF;AAEA,SAAgB,mBAAmB,OAAqC;CACtE,OAAA,gBACG,sBAAA;EAAA,KAAA,WAAA;GAAA,OACQ,CAAC,4BAA4B,MAAM,KAAK,EAAE,OAAO,OAAA,EAAS,KAAK,GAAA;EAAA;EAAA,IAAA,WAAA;GAAA,OAErE,MAAM;EAAQ;CAAA,CAAA;AAGrB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/actionbar/index.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionBar.tsx\n\n// Port of packages/@react-spectrum/s2/src/ActionBar.tsx.\n\nimport {\n  Show,\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  flush,\n  onCleanup,\n  onSettled,\n  useContext,\n} from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  ActionBar as HeadlessActionBar,\n  ActionBarContainer as HeadlessActionBarContainer,\n  Button as HeadlessButton,\n  type ActionBarRenderProps,\n  type ButtonRenderProps,\n  useActionBarContext,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { mergeProps, FocusScope, createStringFormatter } from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport { controlSize, staticColor } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { ActionButtonGroup } from \"../actionbuttongroup\";\nimport { s2IntlStrings } from \"../intl\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport type { StaticColor } from \"../button/types\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\ntype ScrollRef = { current?: HTMLElement | null } | HTMLElement | undefined;\ntype SelectedItemCount = number | \"all\";\ntype ActionBarAnimationState = {\n  isEmphasized?: boolean;\n  isInContainer?: boolean;\n  isEntering?: boolean;\n  isExiting?: boolean;\n};\ntype ActionBarCloseButtonState = ButtonRenderProps & {\n  staticColor?: StaticColor;\n  isStaticColor: boolean;\n};\n\nconst ACTION_BAR_EXIT_DURATION = 200;\n\nconst actionBarStyles = style<ActionBarAnimationState>({\n  borderRadius: \"card\",\n  \"--s2-container-bg\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"well\",\n      isEmphasized: \"neutral\",\n    },\n  },\n  backgroundColor: \"--s2-container-bg\",\n  // Glasselated: the action bar is a COMMAND STRIP, so it takes the matte\n  // treatment the terminal Tabs strip and the Toolbar take — an opaque well\n  // under the register's dither, hairline `--well-border`, control rim. It is\n  // explicitly NOT glass: the handoff's wells are \"never glass\", and a bar that\n  // frosts the selection it is acting on makes that selection unreadable.\n  backgroundImage: {\n    default: \"[repeating-conic-gradient(var(--well-scan) 0% 25%, transparent 0% 50%)]\",\n    isEmphasized: \"none\",\n    forcedColors: \"none\",\n  },\n  backgroundSize: \"[var(--dither-tile) var(--dither-tile)]\",\n  boxShadow: \"edge-glass\",\n  boxSizing: \"border-box\",\n  outlineStyle: \"solid\",\n  outlineWidth: 1,\n  outlineColor: {\n    default: \"well-border\",\n    isEmphasized: \"transparent\",\n    forcedColors: \"ButtonBorder\",\n  },\n  paddingX: 8,\n  paddingY: 12,\n  display: \"flex\",\n  gap: 16,\n  alignItems: \"center\",\n  position: {\n    isInContainer: \"absolute\",\n  },\n  bottom: 0,\n  insetStart: 8,\n  \"--insetEnd\": {\n    type: \"insetEnd\",\n    value: 8,\n  },\n  width: {\n    default: \"full\",\n    isInContainer: \"auto\",\n  },\n  marginX: \"auto\",\n  maxWidth: 960,\n  transition: \"transform\",\n  transitionDuration: 200,\n  translateY: {\n    default: -8,\n    isEntering: \"full\",\n    isExiting: \"full\",\n  },\n});\n\nconst actionsWrapperStyles = style({\n  order: 1,\n  marginStart: \"auto\",\n});\n\nconst selectionWrapperStyles = style({\n  order: 0,\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n});\n\nconst selectionCountStyles = style<{ isEmphasized?: boolean }>({\n  font: \"ui\",\n  color: {\n    default: \"neutral\",\n    isEmphasized: \"gray-25\",\n  },\n});\n\nconst closeButtonHoverBackground = {\n  default: \"gray-200\",\n  isStaticColor: \"transparent-overlay-200\",\n} as const;\n\nconst closeButtonStyles = style<ActionBarCloseButtonState>({\n  ...focusRing(),\n  ...staticColor(),\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  size: controlSize(),\n  flexShrink: 0,\n  borderRadius: \"full\",\n  padding: 0,\n  borderStyle: \"none\",\n  transition: \"default\",\n  backgroundColor: {\n    default: \"transparent\",\n    isHovered: closeButtonHoverBackground,\n    isFocusVisible: closeButtonHoverBackground,\n    isPressed: closeButtonHoverBackground,\n  },\n  \"--iconPrimary\": {\n    type: \"color\",\n    value: {\n      default: baseColor(\"neutral\"),\n      isDisabled: \"disabled\",\n      isStaticColor: {\n        default: baseColor(\"transparent-overlay-800\"),\n        isDisabled: \"transparent-overlay-400\",\n      },\n      forcedColors: {\n        default: \"ButtonText\",\n        isDisabled: \"GrayText\",\n      },\n    },\n  },\n  outlineColor: {\n    default: \"focus-ring\",\n    isStaticColor: \"transparent-overlay-1000\",\n    forcedColors: \"Highlight\",\n  },\n  disableTapHighlight: true,\n});\n\nconst closeIconStyles = style({\n  size: 12,\n});\n\nfunction ActionBarCloseIcon(): JSX.Element {\n  // Faithful to S2's `CloseButton` (CloseButton.mjs), which renders the\n  // `Cross` UI-icon: a bare `<svg>` with NO `aria-hidden` (the ui-icon path\n  // does not run the `createIcon` factory that would set it). Chromium exposes\n  // a bare `<svg>` as `role=\"img\"`, so it surfaces as an `img` child of the\n  // clear button in the accessibility tree — the port must NOT mark it hidden.\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 12 12\"\n      class={closeIconStyles}\n    >\n      <path\n        fill=\"var(--iconPrimary, #222)\"\n        d=\"m7.342 6 3.396-3.396a.95.95 0 1 0-1.342-1.342L6 4.658 2.604 1.262a.95.95 0 1 0-1.343 1.342L4.659 6 1.262 9.396a.95.95 0 1 0 1.343 1.342L6 7.342l3.396 3.396a.946.946 0 0 0 1.342.001.95.95 0 0 0 0-1.343z\"\n      />\n    </svg>\n  );\n}\n\nexport interface ActionBarProps extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\"\n> {\n  /** The number of selected items. ActionBar is hidden when 0. */\n  selectedItemCount?: number | \"all\";\n  /** Whether the ActionBar should be displayed with an emphasized style. */\n  isEmphasized?: boolean;\n  /** Callback when the clear button is pressed. */\n  onClearSelection?: () => void;\n  /** Callback when an action is triggered. */\n  onAction?: (key: Key) => void;\n  /** The action buttons to display. */\n  children?: JSX.Element;\n  /** A ref to the scrollable element the ActionBar appears above. */\n  scrollRef?: ScrollRef;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString | (() => StyleString | undefined);\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Accessible label for the action bar. @default 'Actions' */\n  \"aria-label\"?: string;\n  /** Identifies the element (or elements) that labels the action bar. */\n  \"aria-labelledby\"?: string;\n  /** Optional keydown handler for the action bar root. */\n  onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;\n  slot?: string | null;\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface ActionBarContainerProps {\n  children?: JSX.Element;\n  class?: string;\n}\n\nexport type ActionBarSelectedKeys = \"all\" | Set<Key>;\n\nexport interface ActionBarContainerStateProps {\n  selectedKeys?: \"all\" | Iterable<Key>;\n  defaultSelectedKeys?: \"all\" | Iterable<Key>;\n  onSelectionChange?: (keys: ActionBarSelectedKeys) => void;\n  renderActionBar?: (selectedKeys: ActionBarSelectedKeys) => JSX.Element;\n  scrollRef?: ScrollRef;\n}\n\nexport interface ActionBarContainerState {\n  selectedKeys: () => ActionBarSelectedKeys;\n  onSelectionChange: (keys: \"all\" | Iterable<Key>) => void;\n  actionBar: () => JSX.Element;\n  actionBarHeight: () => number;\n}\n\nexport const ActionBarContext = createContext<SpectrumContextValue<ActionBarProps>>(null);\n\nfunction normalizeSelectedKeys(keys: \"all\" | Iterable<Key> | undefined): ActionBarSelectedKeys {\n  return keys === \"all\" ? \"all\" : new Set(keys ?? []);\n}\n\nfunction copySelectedKeys(keys: ActionBarSelectedKeys): ActionBarSelectedKeys {\n  return keys === \"all\" ? \"all\" : new Set(keys);\n}\n\nfunction getScrollElement(scrollRef: ScrollRef): HTMLElement | null {\n  if (!scrollRef) {\n    return null;\n  }\n\n  if (typeof HTMLElement !== \"undefined\" && scrollRef instanceof HTMLElement) {\n    return scrollRef;\n  }\n\n  return \"current\" in scrollRef ? (scrollRef.current ?? null) : null;\n}\n\nexport function createActionBarContainer(\n  props: ActionBarContainerStateProps,\n): ActionBarContainerState {\n  const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] =\n    createSignal<ActionBarSelectedKeys>(normalizeSelectedKeys(props.defaultSelectedKeys));\n  const [actionBarHeight, setActionBarHeight] = createSignal(0);\n\n  const selectedKeys = createMemo<ActionBarSelectedKeys>(() =>\n    props.selectedKeys !== undefined\n      ? normalizeSelectedKeys(props.selectedKeys)\n      : uncontrolledSelectedKeys(),\n  );\n  const selectedItemCount = createMemo<SelectedItemCount>(() => {\n    const keys = selectedKeys();\n    return keys === \"all\" ? \"all\" : keys.size;\n  });\n  const setSelectedKeys = (keys: \"all\" | Iterable<Key>) => {\n    const normalized = normalizeSelectedKeys(keys);\n\n    if (props.selectedKeys === undefined) {\n      setUncontrolledSelectedKeys(normalized);\n    }\n\n    props.onSelectionChange?.(copySelectedKeys(normalized));\n  };\n  const actionBarRef = (element: HTMLDivElement) => {\n    setActionBarHeight(element ? element.offsetHeight + 8 : 0);\n  };\n  const actionBarContext: SpectrumContextValue<ActionBarProps> = {\n    ref: actionBarRef,\n    get scrollRef() {\n      return props.scrollRef;\n    },\n    get selectedItemCount() {\n      return selectedItemCount();\n    },\n    onClearSelection: () => setSelectedKeys(new Set()),\n  };\n\n  return {\n    selectedKeys,\n    onSelectionChange: setSelectedKeys,\n    actionBar: () => (\n      <ActionBarContext value={actionBarContext}>\n        {props.renderActionBar?.(selectedKeys())}\n      </ActionBarContext>\n    ),\n    actionBarHeight,\n  };\n}\n\nfunction getBarClassName(\n  renderProps: ActionBarRenderProps,\n  contextUnsafeClassName?: string,\n  propUnsafeClassName?: string,\n  contextClassName?: string,\n  propClassName?: string,\n  isEmphasized?: boolean,\n  isInContainer?: boolean,\n  isEntering?: boolean,\n  isExiting?: boolean,\n  styles?: StyleString,\n): string {\n  return [\n    \"vui-action-bar\",\n    isEmphasized ? \"vui-action-bar--emphasized\" : \"\",\n    isInContainer ? \"vui-action-bar--in-container\" : \"\",\n    isEntering ? \"vui-action-bar--entering\" : \"\",\n    isExiting ? \"vui-action-bar--exiting\" : \"\",\n    contextUnsafeClassName ?? \"\",\n    propUnsafeClassName ?? \"\",\n    contextClassName ?? \"\",\n    propClassName ?? \"\",\n    mergeStyles(\n      actionBarStyles({\n        isEmphasized,\n        isInContainer,\n        isEntering,\n        isExiting,\n      }),\n      styles,\n    ),\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction countMessage(\n  formatter: ReturnType<ReturnType<typeof createStringFormatter>>,\n  count: SelectedItemCount,\n): string {\n  if (count === \"all\") {\n    return formatter.format(\"actionbar.selectedAll\");\n  }\n\n  return formatter.format(\"actionbar.selected\", { count });\n}\n\nfunction ActionBarCloseButton(props: {\n  isEmphasized?: boolean;\n  \"aria-label\": string;\n}): JSX.Element {\n  const ctx = useActionBarContext();\n  const staticColorValue = () => (props.isEmphasized ? \"auto\" : undefined);\n\n  return (\n    <HeadlessButton\n      aria-label={props[\"aria-label\"]}\n      onPress={() => ctx?.onClearSelection?.()}\n      class={(renderProps: ButtonRenderProps) =>\n        closeButtonStyles({\n          ...renderProps,\n          staticColor: staticColorValue(),\n          isStaticColor: !!staticColorValue(),\n        })\n      }\n    >\n      <ActionBarCloseIcon />\n    </HeadlessButton>\n  );\n}\n\nexport function ActionBar(props: ActionBarProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ActionBarContext), props.slot);\n  const merged = mergeProps<ActionBarProps>(contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"isEmphasized\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"slot\",\n    \"ref\",\n    \"scrollRef\",\n  ]);\n  const [scrollbarWidth, setScrollbarWidth] = createSignal(0, { ownedWrite: true });\n  const [isRendered, setIsRendered] = createSignal((headlessProps.selectedItemCount ?? 0) !== 0, {\n    ownedWrite: true,\n  });\n  const [isEntering, setIsEntering] = createSignal(false, { ownedWrite: true });\n  const [isExiting, setIsExiting] = createSignal(false, { ownedWrite: true });\n  const [lastCount, setLastCount] = createSignal<SelectedItemCount>(\n    headlessProps.selectedItemCount ?? 0,\n    { ownedWrite: true },\n  );\n  let exitTimeout: ReturnType<typeof setTimeout> | undefined;\n  let enterFrame: number | undefined;\n\n  const scrollElement = () => getScrollElement(local.scrollRef);\n  const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n  const selectedItemCount = () => headlessProps.selectedItemCount ?? 0;\n  const isOpen = () => selectedItemCount() !== 0;\n  const renderedCount = () => (isOpen() ? selectedItemCount() : lastCount());\n  const selectedItemCountForHeadless = () => (isRendered() ? renderedCount() : 0);\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const actionBarRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref,\n  );\n  const rootStyle = (): JSX.CSSProperties => {\n    const unsafeStyle = mergedUnsafeStyle();\n    const containerStyle = {\n      \"inset-inline-end\": `calc(var(--insetEnd, 8px) + ${scrollbarWidth()}px)`,\n    } satisfies JSX.CSSProperties;\n\n    return { ...containerStyle, ...unsafeStyle };\n  };\n  const updateScrollbarWidth = () => {\n    const element = scrollElement();\n    setScrollbarWidth(element ? element.offsetWidth - element.clientWidth : 0);\n  };\n\n  createEffect(\n    () => scrollElement(),\n    () => {\n      updateScrollbarWidth();\n    },\n  );\n  createEffect(\n    () => {\n      const count = selectedItemCount();\n      return {\n        count,\n        open: count !== 0,\n        rendered: isRendered(),\n        hasScrollRef: !!local.scrollRef,\n      };\n    },\n    ({ count, open, rendered, hasScrollRef }) => {\n      if (count === \"all\" || (typeof count === \"number\" && count > 0)) {\n        setLastCount(count);\n      }\n\n      if (exitTimeout) {\n        clearTimeout(exitTimeout);\n        exitTimeout = undefined;\n      }\n\n      if (open) {\n        setIsRendered(true);\n        setIsExiting(false);\n\n        if (hasScrollRef) {\n          setIsEntering(true);\n          if (typeof requestAnimationFrame !== \"undefined\") {\n            if (enterFrame != null) {\n              cancelAnimationFrame(enterFrame);\n            }\n            enterFrame = requestAnimationFrame(() => {\n              enterFrame = undefined;\n              setIsEntering(false);\n            });\n          } else {\n            setTimeout(() => setIsEntering(false), 0);\n          }\n        } else {\n          setIsEntering(false);\n        }\n        return;\n      }\n\n      setIsEntering(false);\n      if (!rendered) {\n        setIsExiting(false);\n        return;\n      }\n\n      if (!hasScrollRef) {\n        setIsRendered(false);\n        setIsExiting(false);\n        return;\n      }\n\n      setIsExiting(true);\n      exitTimeout = setTimeout(() => {\n        exitTimeout = undefined;\n        setIsRendered(false);\n        setIsExiting(false);\n        try {\n          flush();\n        } catch {\n          /* forbidden in apply */\n        }\n      }, ACTION_BAR_EXIT_DURATION);\n      return () => {\n        if (exitTimeout) {\n          clearTimeout(exitTimeout);\n          exitTimeout = undefined;\n        }\n      };\n    },\n  );\n  onSettled(() => {\n    updateScrollbarWidth();\n    const element = scrollElement();\n    if (!element || typeof ResizeObserver === \"undefined\") {\n      return;\n    }\n\n    const observer = new ResizeObserver(updateScrollbarWidth);\n    observer.observe(element);\n    return () => observer.disconnect();\n  });\n  onCleanup(() => {\n    if (exitTimeout) {\n      clearTimeout(exitTimeout);\n    }\n    if (enterFrame != null && typeof cancelAnimationFrame !== \"undefined\") {\n      cancelAnimationFrame(enterFrame);\n    }\n  });\n\n  const actionGroupLabel = createMemo(() => stringFormatter().format(\"actionbar.actions\"));\n  const actionsAvailableLabel = createMemo(() =>\n    stringFormatter().format(\"actionbar.actionsAvailable\"),\n  );\n  const clearSelectionLabel = createMemo(() =>\n    stringFormatter().format(\"actionbar.clearSelection\"),\n  );\n  const selectionLabel = createMemo(() => countMessage(stringFormatter(), renderedCount()));\n\n  return (\n    <Show when={isRendered()}>\n      <FocusScope restoreFocus>\n        <HeadlessActionBar\n          {...headlessProps}\n          selectedItemCount={selectedItemCountForHeadless()}\n          onClearSelection={headlessProps.onClearSelection}\n          actionsAvailableMessage={actionsAvailableLabel()}\n          ref={actionBarRef}\n          slot={local.slot ?? undefined}\n          class={(rp: ActionBarRenderProps) =>\n            getBarClassName(\n              rp,\n              contextProps?.UNSAFE_className,\n              props.UNSAFE_className,\n              contextProps?.class,\n              props.class,\n              local.isEmphasized,\n              !!local.scrollRef,\n              isEntering(),\n              isExiting(),\n              mergedStyles(),\n            )\n          }\n          style={() => rootStyle()}\n        >\n          {/*\n            Actions FIRST in DOM order, selection SECOND — faithful to S2\n            `ActionBar` (ActionBar.tsx:200-231): the actions wrapper is written\n            before the selection wrapper, and CSS `order` (`order:1` actions,\n            `order:0` selection) swaps their VISUAL order so the selection reads\n            on the leading side while the sole `toolbar` (the ActionButtonGroup)\n            stays first in the accessibility tree. This is what makes the clear\n            button + count text OUTSIDE siblings of the toolbar rather than the\n            first entries under it.\n          */}\n          <div class={actionsWrapperStyles}>\n            <ActionButtonGroup\n              staticColor={local.isEmphasized ? \"auto\" : undefined}\n              isQuiet\n              aria-label={actionGroupLabel()}\n            >\n              {local.children}\n            </ActionButtonGroup>\n          </div>\n          <div class={selectionWrapperStyles}>\n            <ActionBarCloseButton\n              isEmphasized={local.isEmphasized}\n              aria-label={clearSelectionLabel()}\n            />\n            <span class={selectionCountStyles({ isEmphasized: local.isEmphasized })}>\n              {selectionLabel()}\n            </span>\n          </div>\n        </HeadlessActionBar>\n      </FocusScope>\n    </Show>\n  );\n}\n\nexport function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {\n  return (\n    <HeadlessActionBarContainer\n      class={[\"vui-action-bar-container\", props.class].filter(Boolean).join(\" \")}\n    >\n      {props.children}\n    </HeadlessActionBarContainer>\n  );\n}\n"],"mappings":"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"}