@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/Tabs.js

@@ -1,9 +1,22 @@
-import { filterDOMProps, useRenderProps } from "./utils.js";
+/*
+* Copyright 2022 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-aria-components/src/Tabs.tsx
+import { ariaTrueFalse, attrTrue, dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
 import { SharedElementTransition } from "./SharedElementTransition.js";
 import { SelectionIndicator, SelectionIndicatorContext } from "./SelectionIndicator.js";
-import { addEventListener, className, createComponent, delegateEvents, effect, getNextElement, insert, memo, mergeProps, runHydrationEvents, setAttribute, setProperty, spread, style, template, use } from "solid-js/web";
-import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { addEvent, className, createComponent, delegateEvents, effect, getNextElement, insert, readShallow, ref, runHydrationEvents, scope, setAttribute, spread, style, template } from "@solidjs/web";
+import { For, Show, createContext, createEffect, createMemo, createSignal, createTrackedEffect, onCleanup, useContext } from "solid-js";
 import { createFocusRing, createHover, createTab, createTabList, createTabPanel } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createTabListState } from "@proyecto-viviana/solid-stately";
 //#region src/Tabs.tsx
 /**
@@ -12,8 +25,10 @@ import { createTabListState } from "@proyecto-viviana/solid-stately";
 * A pre-wired headless tabs component that combines state + aria hooks.
 * Port of react-aria-components/src/Tabs.tsx
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<div class=solidaria-TabList role=tablist>`), _tmpl$3 = /*#__PURE__*/ template(`<div class=solidaria-Tab role=tab>`);
-function assignRef(ref, element) {
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div class=solidaria-TabList role=tablist>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div class=solidaria-Tab role=tab>`);
+function assignRef$1(ref, element) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(element);
 	else if (typeof ref === "object" && "current" in ref) ref.current = element;
@@ -51,8 +66,8 @@ function Tabs(props) {
 		"keyboardActivation",
 		"orientation"
 	]);
-	const [tabListItems, setTabListItems] = createSignal(void 0);
-	const [registeredTabs, setRegisteredTabs] = createSignal([]);
+	const [tabListItems, setTabListItems] = createSignal(void 0, { ownedWrite: true });
+	const [registeredTabs, setRegisteredTabs] = createSignal([], { ownedWrite: true });
 	const effectiveItems = createMemo(() => {
 		if (stateProps.items) return stateProps.items;
 		if (tabListItems()) return tabListItems() ?? [];
@@ -111,46 +126,49 @@ function Tabs(props) {
 		defaultClassName: "solidaria-Tabs"
 	}, renderValues);
 	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
-	const contextValue = {
-		state,
-		items: effectiveItems,
-		setTabListItems(items) {
-			setTabListItems(() => items);
-		},
-		registerTab(tab) {
-			setRegisteredTabs((current) => {
-				const next = current.filter((item) => item.id !== tab.id);
-				next.push(tab);
-				return next;
-			});
+	return createComponent(TabsContext, {
+		value: {
+			state,
+			items: effectiveItems,
+			setTabListItems(items) {
+				setTabListItems(() => items);
+			},
+			registerTab(tab) {
+				setRegisteredTabs((current) => {
+					const next = current.filter((item) => item.id !== tab.id);
+					next.push(tab);
+					return next;
+				});
+			},
+			unregisterTab(id) {
+				setRegisteredTabs((current) => current.filter((item) => item.id !== id));
+			}
 		},
-		unregisterTab(id) {
-			setRegisteredTabs((current) => current.filter((item) => item.id !== id));
-		}
-	};
-	return createComponent(TabsContext.Provider, {
-		value: contextValue,
 		get children() {
-			return createComponent(TabsStateContext.Provider, {
+			return createComponent(TabsStateContext, {
 				value: state,
 				get children() {
 					var _el$ = getNextElement(_tmpl$);
-					use((element) => assignRef(local.ref, element), _el$);
-					spread(_el$, mergeProps(domProps, {
-						get ["class"]() {
+					ref(() => {
+						return (element) => assignRef$1(local.ref, element);
+					}, _el$);
+					spread(_el$, [domProps, {
+						get "class"() {
 							return renderProps.class();
 						},
 						get style() {
 							return renderProps.style();
 						},
-						get ["data-orientation"]() {
+						get "data-orientation"() {
 							return state.orientation();
 						},
-						get ["data-disabled"]() {
-							return state.isDisabled() || void 0;
+						get "data-disabled"() {
+							return dataAttr(state.isDisabled());
 						}
-					}), false, true);
-					insert(_el$, () => props.children);
+					}], true);
+					insert(_el$, scope(() => {
+						return props.children;
+					}));
 					runHydrationEvents();
 					return _el$;
 				}
@@ -167,53 +185,24 @@ function TabList(props) {
 		"style",
 		"slot"
 	], ["items"]);
-	return createComponent(Show, {
-		when: useContext(TabsContext),
-		get fallback() {
-			return getNextElement(_tmpl$2);
-		},
-		children: (ctx) => createComponent(TabListInner, {
-			get context() {
-				return ctx();
-			},
-			local,
-			get items() {
-				return collectionProps.items;
-			},
-			ariaProps,
-			get children() {
-				return props.children;
-			}
-		})
-	});
-}
-/** Inner TabList component that has access to context */
-function TabListInner(props) {
-	const state = props.context.state;
-	const items = props.context.items;
-	const renderItem = createMemo(() => {
-		if (typeof props.children !== "function") return;
-		if (props.children.length === 0 && props.items === void 0) return;
-		return props.children;
-	});
-	const renderedChildren = createMemo(() => {
-		if (renderItem() || typeof props.children !== "function") return props.children;
-		return props.children();
-	});
-	createEffect(() => {
-		props.context.setTabListItems(props.items);
+	const context = useContext(TabsContext);
+	if (!context) return getNextElement(_tmpl$2);
+	const state = context.state;
+	const items = context.items;
+	createEffect(() => collectionProps.items, (items) => {
+		context.setTabListItems(items);
 	});
 	onCleanup(() => {
-		props.context.setTabListItems(void 0);
+		context.setTabListItems(void 0);
 	});
-	const { tabListProps } = createTabList(props.ariaProps, state);
+	const { tabListProps } = createTabList(ariaProps, state);
 	const renderValues = createMemo(() => ({
 		orientation: state.orientation(),
 		isDisabled: state.isDisabled()
 	}));
 	const renderProps = useRenderProps({
-		class: props.local.class,
-		style: props.local.style,
+		class: local.class,
+		style: local.style,
 		defaultClassName: "solidaria-TabList"
 	}, renderValues);
 	const handleKeyDown = (e) => {
@@ -225,48 +214,50 @@ function TabListInner(props) {
 	const handleBlur = (e) => {
 		tabListProps.onFocusOut(e);
 	};
-	return (() => {
-		var _el$3 = getNextElement(_tmpl$);
-		_el$3.$$focusout = handleBlur;
-		_el$3.$$focusin = handleFocus;
-		_el$3.$$keydown = handleKeyDown;
-		insert(_el$3, (() => {
-			var _c$ = memo(() => !!renderItem());
-			return () => _c$() ? createComponent(SharedElementTransition, { get children() {
-				return createComponent(For, {
-					get each() {
-						return props.items ?? items();
-					},
-					children: (item) => renderItem()?.(item)
-				});
-			} }) : renderedChildren();
-		})());
-		effect((_p$) => {
-			var _v$ = tabListProps.role, _v$2 = tabListProps["aria-orientation"], _v$3 = tabListProps["aria-label"], _v$4 = tabListProps["aria-labelledby"], _v$5 = tabListProps["aria-describedby"], _v$6 = renderProps.class(), _v$7 = renderProps.style(), _v$8 = state.orientation(), _v$9 = state.isDisabled() || void 0;
-			_v$ !== _p$.e && setAttribute(_el$3, "role", _p$.e = _v$);
-			_v$2 !== _p$.t && setAttribute(_el$3, "aria-orientation", _p$.t = _v$2);
-			_v$3 !== _p$.a && setAttribute(_el$3, "aria-label", _p$.a = _v$3);
-			_v$4 !== _p$.o && setAttribute(_el$3, "aria-labelledby", _p$.o = _v$4);
-			_v$5 !== _p$.i && setAttribute(_el$3, "aria-describedby", _p$.i = _v$5);
-			_v$6 !== _p$.n && className(_el$3, _p$.n = _v$6);
-			_p$.s = style(_el$3, _v$7, _p$.s);
-			_v$8 !== _p$.h && setAttribute(_el$3, "data-orientation", _p$.h = _v$8);
-			_v$9 !== _p$.r && setAttribute(_el$3, "data-disabled", _p$.r = _v$9);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0,
-			i: void 0,
-			n: void 0,
-			s: void 0,
-			h: void 0,
-			r: void 0
-		});
-		runHydrationEvents();
-		return _el$3;
-	})();
+	const renderChildren = () => {
+		const children = props.children;
+		if (typeof children === "function" && children.length > 0) return createComponent(SharedElementTransition, { get children() {
+			return createComponent(For, {
+				get each() {
+					return collectionProps.items ?? items();
+				},
+				children: (item) => children(item)
+			});
+		} });
+		return children;
+	};
+	var _el$3 = getNextElement(_tmpl$);
+	_el$3._$$focusout = handleBlur;
+	_el$3._$$focusin = handleFocus;
+	_el$3._$$keydown = handleKeyDown;
+	insert(_el$3, scope(() => {
+		return renderChildren();
+	}));
+	effect(() => {
+		return {
+			e: tabListProps.role,
+			t: tabListProps["aria-orientation"],
+			a: tabListProps["aria-label"],
+			o: tabListProps["aria-labelledby"],
+			i: tabListProps["aria-describedby"],
+			n: readShallow(renderProps.class()),
+			s: readShallow(renderProps.style()),
+			h: state.orientation(),
+			r: dataAttr(state.isDisabled())
+		};
+	}, ({ e, t, a, o, i, n, s, h, r }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$3, "role", e);
+		t !== _p$?.t && setAttribute(_el$3, "aria-orientation", t);
+		a !== _p$?.a && setAttribute(_el$3, "aria-label", a);
+		o !== _p$?.o && setAttribute(_el$3, "aria-labelledby", o);
+		i !== _p$?.i && setAttribute(_el$3, "aria-describedby", i);
+		className(_el$3, n, _p$?.n);
+		style(_el$3, s, _p$?.s);
+		h !== _p$?.h && setAttribute(_el$3, "data-orientation", h);
+		r !== _p$?.r && setAttribute(_el$3, "data-disabled", r);
+	});
+	runHydrationEvents();
+	return _el$3;
 }
 /**
 * A Tab represents an individual tab in a TabList.
@@ -280,53 +271,34 @@ function Tab(props) {
 	]);
 	const context = useContext(TabsStateContext);
 	const tabsContext = useContext(TabsContext);
-	return createComponent(Show, {
-		when: context,
-		get fallback() {
-			return getNextElement(_tmpl$3);
-		},
-		children: (state) => createComponent(TabInner, {
-			get state() {
-				return state();
-			},
-			tabsContext,
-			local,
-			ariaProps,
-			get children() {
-				return props.children;
-			}
-		})
-	});
-}
-/** Inner Tab component that has access to context */
-function TabInner(props) {
-	let tabRef;
+	if (!context) return getNextElement(_tmpl$3);
+	const [tabRef, setTabRef] = createSignal(null);
 	const textValue = () => {
-		if (props.ariaProps["aria-label"]) return props.ariaProps["aria-label"];
+		if (ariaProps["aria-label"]) return ariaProps["aria-label"];
 		return typeof props.children === "string" ? props.children : void 0;
 	};
-	createEffect(() => {
-		props.tabsContext?.registerTab({
-			id: props.local.id,
-			textValue: textValue(),
-			isDisabled: props.ariaProps.isDisabled
-		});
+	createEffect(() => ({
+		id: local.id,
+		textValue: textValue(),
+		isDisabled: ariaProps.isDisabled
+	}), (tab) => {
+		tabsContext?.registerTab(tab);
 	});
 	onCleanup(() => {
-		props.tabsContext?.unregisterTab(props.local.id);
+		tabsContext?.unregisterTab(local.id);
 	});
 	const tabAria = createTab({
-		key: props.local.id,
+		key: local.id,
 		get isDisabled() {
-			return props.ariaProps.isDisabled;
+			return ariaProps.isDisabled;
 		},
 		get "aria-label"() {
-			return props.ariaProps["aria-label"];
+			return ariaProps["aria-label"];
 		},
 		get "aria-labelledby"() {
-			return props.ariaProps["aria-labelledby"];
+			return ariaProps["aria-labelledby"];
 		}
-	}, props.state, () => tabRef ?? null);
+	}, context, tabRef);
 	const { isHovered, hoverProps } = createHover({ get isDisabled() {
 		return tabAria.isDisabled();
 	} });
@@ -342,96 +314,101 @@ function TabInner(props) {
 		get children() {
 			return props.children;
 		},
-		class: props.local.class,
-		style: props.local.style,
+		class: local.class,
+		style: local.style,
 		defaultClassName: "solidaria-Tab"
 	}, renderValues);
 	const selectionIndicatorContext = createMemo(() => ({ isSelected: tabAria.isSelected }));
-	return createComponent(SelectionIndicatorContext.Provider, {
+	var _el$5 = getNextElement(_tmpl$);
+	ref(() => {
+		return setTabRef;
+	}, _el$5);
+	spread(_el$5, [
+		{
+			get id() {
+				return tabAria.tabProps.id;
+			},
+			get role() {
+				return tabAria.tabProps.role;
+			},
+			get "aria-selected"() {
+				return ariaTrueFalse(tabAria.isSelected());
+			},
+			get "aria-disabled"() {
+				return attrTrue(tabAria.isDisabled());
+			},
+			get "aria-controls"() {
+				return tabAria.isSelected() ? tabAria.tabProps["aria-controls"] : void 0;
+			},
+			get "aria-label"() {
+				return tabAria.tabProps["aria-label"];
+			},
+			get "aria-labelledby"() {
+				return tabAria.tabProps["aria-labelledby"];
+			},
+			get tabindex() {
+				return tabAria.tabProps.tabIndex;
+			},
+			get "class"() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get onKeyDown() {
+				return tabAria.tabProps.onKeyDown;
+			},
+			get onMouseDown() {
+				return tabAria.tabProps.onMouseDown;
+			},
+			get onPointerDown() {
+				return tabAria.tabProps.onPointerDown;
+			},
+			get onClick() {
+				return tabAria.tabProps.onClick;
+			},
+			get onFocus() {
+				return tabAria.tabProps.onFocus;
+			},
+			get onFocusIn() {
+				return tabAria.tabProps.onFocusIn;
+			},
+			get onBlur() {
+				return tabAria.tabProps.onBlur;
+			}
+		},
+		hoverProps,
+		{
+			get "data-selected"() {
+				return dataAttr(tabAria.isSelected());
+			},
+			get "data-focused"() {
+				return dataAttr(tabAria.isFocused());
+			},
+			get "data-focus-visible"() {
+				return dataAttr(tabAria.isFocusVisible());
+			},
+			get "data-pressed"() {
+				return dataAttr(tabAria.isPressed());
+			},
+			get "data-hovered"() {
+				return dataAttr(isHovered());
+			},
+			get "data-disabled"() {
+				return dataAttr(tabAria.isDisabled());
+			}
+		}
+	], true);
+	insert(_el$5, createComponent(SelectionIndicatorContext, {
 		get value() {
 			return selectionIndicatorContext();
 		},
 		get children() {
-			var _el$5 = getNextElement(_tmpl$);
-			var _ref$ = tabRef;
-			typeof _ref$ === "function" ? use(_ref$, _el$5) : tabRef = _el$5;
-			spread(_el$5, mergeProps({
-				get id() {
-					return tabAria.tabProps.id;
-				},
-				get role() {
-					return tabAria.tabProps.role;
-				},
-				get ["aria-selected"]() {
-					return tabAria.isSelected();
-				},
-				get ["aria-disabled"]() {
-					return tabAria.isDisabled() || void 0;
-				},
-				get ["aria-controls"]() {
-					return memo(() => !!tabAria.isSelected())() ? tabAria.tabProps["aria-controls"] : void 0;
-				},
-				get ["aria-label"]() {
-					return tabAria.tabProps["aria-label"];
-				},
-				get ["aria-labelledby"]() {
-					return tabAria.tabProps["aria-labelledby"];
-				},
-				get tabIndex() {
-					return tabAria.tabProps.tabIndex;
-				},
-				get ["class"]() {
-					return renderProps.class();
-				},
-				get style() {
-					return renderProps.style();
-				},
-				get onKeyDown() {
-					return tabAria.tabProps.onKeyDown;
-				},
-				get onMouseDown() {
-					return tabAria.tabProps.onMouseDown;
-				},
-				get onPointerDown() {
-					return tabAria.tabProps.onPointerDown;
-				},
-				get onClick() {
-					return tabAria.tabProps.onClick;
-				},
-				get onFocus() {
-					return tabAria.tabProps.onFocus;
-				},
-				get onFocusIn() {
-					return tabAria.tabProps.onFocusIn;
-				},
-				get onBlur() {
-					return tabAria.tabProps.onBlur;
-				}
-			}, hoverProps, {
-				get ["data-selected"]() {
-					return tabAria.isSelected() || void 0;
-				},
-				get ["data-focused"]() {
-					return tabAria.isFocused() || void 0;
-				},
-				get ["data-focus-visible"]() {
-					return tabAria.isFocusVisible() || void 0;
-				},
-				get ["data-pressed"]() {
-					return tabAria.isPressed() || void 0;
-				},
-				get ["data-hovered"]() {
-					return isHovered() || void 0;
-				},
-				get ["data-disabled"]() {
-					return tabAria.isDisabled() || void 0;
-				}
-			}), false, true);
-			insert(_el$5, () => renderProps.renderChildrenStable());
-			runHydrationEvents();
-			return _el$5;
+			return renderProps.renderChildrenStable();
 		}
-	});
+	}));
+	runHydrationEvents();
+	return _el$5;
 }
 /**
 * Groups multiple TabPanel elements.
@@ -445,12 +422,12 @@ function TabPanels(props) {
 	]);
 	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
 	const state = useContext(TabsStateContext);
-	let ref;
+	let ref$1;
 	let previousSelectedKey = void 0;
 	const [panelSize, setPanelSize] = createSignal({});
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const selectedKey = state?.selectedKey() ?? null;
-		if (!ref) {
+		if (!ref$1) {
 			previousSelectedKey = selectedKey;
 			return;
 		}
@@ -460,11 +437,11 @@ function TabPanels(props) {
 		}
 		if (previousSelectedKey === selectedKey) return;
 		previousSelectedKey = selectedKey;
-		const transition = window.getComputedStyle(ref).transition;
+		const transition = window.getComputedStyle(ref$1).transition;
 		const shouldMeasureWidth = /width|inline-size|all/.test(transition);
 		const shouldMeasureHeight = /height|block-size|all/.test(transition);
 		if (!shouldMeasureWidth && !shouldMeasureHeight) return;
-		const selectedPanel = ref.querySelector("[role=\"tabpanel\"]:not([hidden])");
+		const selectedPanel = ref$1.querySelector("[role=\"tabpanel\"]:not([hidden])");
 		if (!selectedPanel) return;
 		setPanelSize({
 			width: shouldMeasureWidth ? `${selectedPanel.offsetWidth}px` : void 0,
@@ -476,23 +453,25 @@ function TabPanels(props) {
 		...panelSize().width ? { "--tab-panel-width": panelSize().width } : {},
 		...panelSize().height ? { "--tab-panel-height": panelSize().height } : {}
 	});
-	return (() => {
-		var _el$6 = getNextElement(_tmpl$);
-		use((el) => {
-			ref = el;
-		}, _el$6);
-		spread(_el$6, mergeProps(domProps, {
-			get ["class"]() {
-				return local.class ?? "solidaria-TabPanels";
-			},
-			get style() {
-				return mergedStyle();
-			}
-		}), false, true);
-		insert(_el$6, () => local.children);
-		runHydrationEvents();
-		return _el$6;
-	})();
+	var _el$6 = getNextElement(_tmpl$);
+	ref(() => {
+		return (el) => {
+			ref$1 = el;
+		};
+	}, _el$6);
+	spread(_el$6, [domProps, {
+		get "class"() {
+			return local.class ?? "solidaria-TabPanels";
+		},
+		get style() {
+			return mergedStyle();
+		}
+	}], true);
+	insert(_el$6, scope(() => {
+		return local.children;
+	}));
+	runHydrationEvents();
+	return _el$6;
 }
 /**
 * A TabPanel displays the content for a selected Tab.
@@ -504,8 +483,9 @@ function TabPanel(props) {
 		"slot",
 		"shouldForceMount"
 	]);
+	const [panelRef, setPanelRef] = createSignal();
 	const state = useContext(TabsStateContext);
-	const { tabPanelProps, isSelected } = createTabPanel(ariaProps, state);
+	const { tabPanelProps, isSelected } = createTabPanel(ariaProps, state, panelRef);
 	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 	const isInert = () => Boolean(local.shouldForceMount && ariaProps.id !== void 0 && !isSelected());
 	const isEntering = () => false;
@@ -538,45 +518,50 @@ function TabPanel(props) {
 		},
 		get children() {
 			var _el$7 = getNextElement(_tmpl$);
-			addEventListener(_el$7, "blur", focusProps.onBlur);
-			addEventListener(_el$7, "focus", focusProps.onFocus);
-			insert(_el$7, () => renderProps.renderChildren());
-			effect((_p$) => {
-				var _v$0 = tabPanelProps.id, _v$1 = tabPanelProps.role, _v$10 = tabPanelProps["aria-labelledby"], _v$11 = tabPanelProps["aria-label"], _v$12 = tabPanelProps["aria-describedby"], _v$13 = tabPanelProps.tabIndex, _v$14 = renderProps.class(), _v$15 = renderProps.style(), _v$16 = isSelected() || void 0, _v$17 = isFocused() || void 0, _v$18 = isFocusVisible() || void 0, _v$19 = isInert() ? true : void 0, _v$20 = isInert() || void 0, _v$21 = isEntering() || void 0, _v$22 = isExiting() || void 0, _v$23 = ariaProps.id !== void 0 && !isSelected() && !local.shouldForceMount ? true : void 0;
-				_v$0 !== _p$.e && setAttribute(_el$7, "id", _p$.e = _v$0);
-				_v$1 !== _p$.t && setAttribute(_el$7, "role", _p$.t = _v$1);
-				_v$10 !== _p$.a && setAttribute(_el$7, "aria-labelledby", _p$.a = _v$10);
-				_v$11 !== _p$.o && setAttribute(_el$7, "aria-label", _p$.o = _v$11);
-				_v$12 !== _p$.i && setAttribute(_el$7, "aria-describedby", _p$.i = _v$12);
-				_v$13 !== _p$.n && setAttribute(_el$7, "tabindex", _p$.n = _v$13);
-				_v$14 !== _p$.s && className(_el$7, _p$.s = _v$14);
-				_p$.h = style(_el$7, _v$15, _p$.h);
-				_v$16 !== _p$.r && setAttribute(_el$7, "data-selected", _p$.r = _v$16);
-				_v$17 !== _p$.d && setAttribute(_el$7, "data-focused", _p$.d = _v$17);
-				_v$18 !== _p$.l && setAttribute(_el$7, "data-focus-visible", _p$.l = _v$18);
-				_v$19 !== _p$.u && setProperty(_el$7, "inert", _p$.u = _v$19);
-				_v$20 !== _p$.c && setAttribute(_el$7, "data-inert", _p$.c = _v$20);
-				_v$21 !== _p$.w && setAttribute(_el$7, "data-entering", _p$.w = _v$21);
-				_v$22 !== _p$.m && setAttribute(_el$7, "data-exiting", _p$.m = _v$22);
-				_v$23 !== _p$.f && setProperty(_el$7, "hidden", _p$.f = _v$23);
-				return _p$;
-			}, {
-				e: void 0,
-				t: void 0,
-				a: void 0,
-				o: void 0,
-				i: void 0,
-				n: void 0,
-				s: void 0,
-				h: void 0,
-				r: void 0,
-				d: void 0,
-				l: void 0,
-				u: void 0,
-				c: void 0,
-				w: void 0,
-				m: void 0,
-				f: void 0
+			addEvent(_el$7, "blur", focusProps.onBlur);
+			addEvent(_el$7, "focus", focusProps.onFocus);
+			ref(() => {
+				return setPanelRef;
+			}, _el$7);
+			insert(_el$7, scope(() => {
+				return renderProps.renderChildren();
+			}));
+			effect(() => {
+				return {
+					e: tabPanelProps.id,
+					t: tabPanelProps.role,
+					a: tabPanelProps["aria-labelledby"],
+					o: tabPanelProps["aria-label"],
+					i: tabPanelProps["aria-describedby"],
+					n: tabPanelProps.tabIndex,
+					s: readShallow(renderProps.class()),
+					h: readShallow(renderProps.style()),
+					r: dataAttr(isSelected()),
+					d: dataAttr(isFocused()),
+					l: dataAttr(isFocusVisible()),
+					u: isInert() ? true : void 0,
+					c: dataAttr(isInert()),
+					w: dataAttr(isEntering()),
+					m: dataAttr(isExiting()),
+					f: ariaProps.id !== void 0 && !isSelected() && !local.shouldForceMount ? true : void 0
+				};
+			}, ({ e, t, a, o, i, n, s, h, r, d, l, u, c, w, m, f }, _p$) => {
+				e !== _p$?.e && setAttribute(_el$7, "id", e);
+				t !== _p$?.t && setAttribute(_el$7, "role", t);
+				a !== _p$?.a && setAttribute(_el$7, "aria-labelledby", a);
+				o !== _p$?.o && setAttribute(_el$7, "aria-label", o);
+				i !== _p$?.i && setAttribute(_el$7, "aria-describedby", i);
+				n !== _p$?.n && setAttribute(_el$7, "tabindex", n);
+				className(_el$7, s, _p$?.s);
+				style(_el$7, h, _p$?.h);
+				r !== _p$?.r && setAttribute(_el$7, "data-selected", r);
+				d !== _p$?.d && setAttribute(_el$7, "data-focused", d);
+				l !== _p$?.l && setAttribute(_el$7, "data-focus-visible", l);
+				u !== _p$?.u && setAttribute(_el$7, "inert", u);
+				c !== _p$?.c && setAttribute(_el$7, "data-inert", c);
+				w !== _p$?.w && setAttribute(_el$7, "data-entering", w);
+				m !== _p$?.m && setAttribute(_el$7, "data-exiting", m);
+				f !== _p$?.f && setAttribute(_el$7, "hidden", f);
 			});
 			return _el$7;
 		}