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

package/dist/_chunk/Tabs.jsx

@@ -1,248 +1,205 @@
+/*
+* 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/TabsPicker.tsx
+/*
+* 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/Tabs.tsx
 import { t as mergeStyles } from "./runtime.jsx";
-import { useProviderProps, useTheme } from "../provider/index.jsx";
+import { a as useProviderProps } from "./provider.jsx";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "./spectrum-context.jsx";
 import { centerBaseline } from "../icon/center-baseline.jsx";
 import { t as IconContext } from "./spectrum-icon.jsx";
 import { NotificationBadgeContext } from "../notificationbadge/index.jsx";
-import { c as TextContext } from "./text.jsx";
+import { c as TextContext$1 } from "./text.jsx";
 import { o as menuItemCheckmark, p as menuItemLabel, r as menuItem, u as menuItemIcon } from "./s2-menu-styles.jsx";
+import { Popover as Popover$1 } from "../popover/index.jsx";
 import { t as Checkmark } from "./Checkmark.jsx";
 import { t as Chevron } from "./Chevron.jsx";
-import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, splitProps, useContext } from "solid-js";
-import { createFocusRing, createTabPanel } from "@proyecto-viviana/solidaria";
-import { Collection, Popover, Select, SelectContext, SelectListBox, SelectOption, SelectTrigger, SelectValue, SelectionIndicator, Tab, TabList, TabPanels, Tabs, TabsStateContext } from "@proyecto-viviana/solidaria-components";
+import { For, Show, createContext, createEffect, createMemo, createSignal, createTrackedEffect, createUniqueId, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+import { Collection, Select, SelectContext, SelectListBox, SelectOption, SelectTrigger, SelectValue, SelectionIndicator, Tab, TabList, TabPanels, Tabs, TabsStateContext, dataAttr } from "@proyecto-viviana/solidaria-components";
+import { createFocusRing, createTabPanel, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
 //#region src/tabs/TabsPicker.tsx
-const tabsPickerRoot = " sc151";
+const tabsPickerRoot = " sc17";
 const tabsPickerButton = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " zXcEWr151";
-	rules += " yXcEWr151";
-	rules += " BXcEWr151";
-	rules += " AXcEWr151";
-	if (props.size === "XL") rules += " Nl151";
-	else if (props.size === "L") rules += " Nj151";
-	else if (props.size === "S") rules += " Nf151";
-	else if (props.size === "XS") rules += " Ne151";
-	else rules += " Nk151";
-	if (props.isQuiet) rules += " _qd151";
-	else rules += " _qtb151";
-	if (props.size === "XL") rules += " -Anxdcc-Zt151";
-	else if (props.size === "L") rules += " -Anxdcc-ZStdtne151";
-	else if (props.size === "S") rules += " -Anxdcc-Zr151";
-	else rules += " -Anxdcc-Z3fn9H151";
-	rules += " __v6TNLWb151";
-	rules += " _Pc151";
-	rules += " uxe7h4151";
-	rules += " -_6BNtrc-c151";
-	rules += " vx151";
-	rules += " xb151";
-	rules += " _xa151";
-	rules += " _Fd151";
-	rules += " _FnuYUweb151";
-	if (props.isDisabled) rules += " pUvnvv151";
-	else if (props.isPressed) rules += " pMwyHo151";
-	else if (props.isFocusVisible) rules += " pMwyHo151";
-	else if (props.isHovered) rules += " pMwyHo151";
-	else rules += " pHKLAu151";
-	rules += " sd151";
-	rules += " _Wd151";
-	rules += " _je151";
-	rules += " oa151";
-	rules += " na151";
-	rules += " ka151";
-	rules += " ja151";
-	rules += " eb151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	rules += " qc151";
-	rules += " qsd151";
-	rules += " SMBFGYc151";
-	rules += " RfBFGYc151";
-	rules += " g9151";
-	rules += " Ln151";
-	rules += " __ca151";
-	if (props.density === "compact") rules += " Fx151";
-	else rules += " Fz151";
-	rules += " _oa151";
-	rules += " -S_-Sd151";
-	rules += " -R_-Rd151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " zXcEWr17";
+	rules += " yXcEWr17";
+	rules += " BXcEWr17";
+	rules += " AXcEWr17";
+	if (props.size === "XL") rules += " Nl17";
+	else if (props.size === "L") rules += " Nj17";
+	else if (props.size === "S") rules += " Nf17";
+	else if (props.size === "XS") rules += " Ne17";
+	else rules += " Nk17";
+	if (props.isQuiet) rules += " _qd17";
+	else rules += " _qtb17";
+	if (props.size === "XL") rules += " -Anxdcc-Zt17";
+	else if (props.size === "L") rules += " -Anxdcc-ZStdtne17";
+	else if (props.size === "S") rules += " -Anxdcc-Zr17";
+	else rules += " -Anxdcc-Z3fn9H17";
+	rules += " __v6TNLWb17";
+	rules += " _Pc17";
+	rules += " uxe7h417";
+	rules += " -_6BNtrc-c17";
+	rules += " vx17";
+	rules += " xb17";
+	rules += " _xa17";
+	rules += " _Fd17";
+	rules += " _FnuYUweb17";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	else if (props.isPressed) rules += " pBJTC6c17";
+	else if (props.isFocusVisible) rules += " pBJTC6c17";
+	else if (props.isHovered) rules += " pBJTC6c17";
+	else rules += " pmiKvLd17";
+	rules += " sd17";
+	rules += " _Wd17";
+	rules += " _je17";
+	rules += " oa17";
+	rules += " na17";
+	rules += " ka17";
+	rules += " ja17";
+	rules += " eb17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	rules += " qc17";
+	rules += " qsd17";
+	rules += " SMBFGYc17";
+	rules += " RfBFGYc17";
+	rules += " g917";
+	rules += " Ln17";
+	rules += " __ca17";
+	if (props.density === "compact") rules += " Fx17";
+	else rules += " Fz17";
+	rules += " _oa17";
+	rules += " -S_-Sd17";
+	rules += " -R_-Rd17";
 	return rules;
 };
-const tabsPickerValue = " _ua151 _Nc151 Pc151 _Yb151 _7c151 sd151 eb151 Fb151";
+const tabsPickerValue = " _ua17 _Nc17 Pc17 _Yb17 _7c17 sd17 eb17 Fb17";
 const tabsPickerValueText = function anonymous(props) {
 	let rules = " ";
-	if (props.labelBehavior === "hide") rules += " sk151";
-	else rules += " sb151";
-	rules += " _ub151";
-	rules += " _Nc151";
-	rules += " Pc151";
-	rules += " _Yb151";
-	rules += " _7c151";
+	if (props.labelBehavior === "hide") rules += " sk17";
+	else rules += " sb17";
+	rules += " _ub17";
+	rules += " _Nc17";
+	rules += " Pc17";
+	rules += " _Yb17";
+	rules += " _7c17";
 	return rules;
 };
-const tabsPickerChevron = " _va151 _Sd151 -_8sjo0b-t5ZbAob151";
+const tabsPickerChevron = " _va17 _Sd17 -_8sjo0b-t5ZbAob17";
 const tabsPickerMenu = function anonymous(props) {
 	let rules = " ";
-	rules += " _Le151";
-	rules += " se151";
-	rules += " Deb5jcb151";
-	rules += " _oa151";
-	rules += " Za151";
-	rules += " K40ub4c151";
-	rules += " _Na151";
-	rules += " Pa151";
-	rules += " Tt151";
-	rules += " Qt151";
-	rules += " St151";
-	rules += " Rt151";
-	rules += " uk151";
-	rules += " ucJ9TBTb151";
-	rules += " ud3Euai151";
-	rules += " uea151";
-	rules += " ugb151";
-	rules += " uhd151";
-	rules += " uje151";
-	rules += " u2NhKxcl151";
-	rules += " uic151";
+	rules += " _Le17";
+	rules += " se17";
+	rules += " Deb5jcb17";
+	rules += " _oa17";
+	rules += " Za17";
+	rules += " K40ub4c17";
+	rules += " _Na17";
+	rules += " Pa17";
+	rules += " Tt17";
+	rules += " Qt17";
+	rules += " St17";
+	rules += " Rt17";
+	rules += " uk17";
+	rules += " ucJ9TBTb17";
+	rules += " ud3Euai17";
+	rules += " uea17";
+	rules += " ugb17";
+	rules += " uhd17";
+	rules += " uje17";
+	rules += " u2NhKxcl17";
+	rules += " uic17";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
-	rules += " Jy151";
-	rules += " Gy151";
-	rules += " Iy151";
-	rules += " Hy151";
-	rules += " _Gc151";
+	rules += " Jy17";
+	rules += " Gy17";
+	rules += " Iy17";
+	rules += " Hy17";
+	rules += " _Gc17";
 	return rules;
 };
-const tabsPickerPopover = function anonymous(props) {
-	let rules = " ";
-	if (props.colorScheme === "dark") rules += " -ICUGx-_pa151";
-	else if (props.colorScheme === "light") rules += " -ICUGx-_pb151";
-	else if (props.colorScheme === "light dark") rules += " -ICUGx-_pc151";
-	rules += " _pK8eoyd151";
-	if (props.colorScheme === "dark") rules += " -NvXmrd-_ZLmU151";
-	else if (props.colorScheme === "light") rules += " -NvXmrd-_ZN8Gi4c151";
-	else if (props.colorScheme === "light dark") {
-		rules += " -NvXmrd-_ZN8Gi4c151";
-		rules += " -NvXmrd-D1v0V_ZLmU151";
-	}
-	if (props.colorScheme === "dark") rules += " -j9blY-_ZN8Gi4c151";
-	else if (props.colorScheme === "light") rules += " -j9blY-_ZLmU151";
-	else if (props.colorScheme === "light dark") {
-		rules += " -j9blY-_ZLmU151";
-		rules += " -j9blY-D1v0V_ZN8Gi4c151";
-	}
-	rules += " -Ovbhqd-g9ORGnd151";
-	rules += " -Ovbhqd-lga151";
-	rules += " gEzkoQe151";
-	rules += " -Jvcevd-Nbc1hc151";
-	rules += " _nfRoCnb151";
-	rules += " oY4qurc151";
-	rules += " nY4qurc151";
-	rules += " kY4qurc151";
-	rules += " jY4qurc151";
-	rules += " sd151";
-	rules += " Td151";
-	rules += " Qd151";
-	rules += " Sd151";
-	rules += " Rd151";
-	rules += " Ma151";
-	rules += " _Ne151";
-	rules += " Pe151";
-	rules += " _oa151";
-	rules += " _Bb151";
-	rules += " _Lf151";
-	rules += " _Mb151";
-	rules += " OLNnmzc151";
-	rules += " Ola151";
-	return rules;
-};
-const tabsPickerFrame = " sd151 Za151 Fb151";
+const tabsPickerMenuWidth = " Nh17 ZbWuche17";
+const tabsPickerFrame = " sd17 Za17 Fb17";
 const tabsPickerLine = function anonymous(props) {
 	let rules = " ";
-	if (props.isDisabled) rules += " gkDWoNd151";
-	else rules += " gHKLAu151";
-	if (props.isDisabled) rules += " gld151";
-	else rules += " gle151";
-	rules += " FLvNfn151";
-	rules += " _je151";
-	rules += " og151";
-	rules += " ng151";
-	rules += " kg151";
-	rules += " jg151";
-	rules += " Jk7Otrc151";
-	rules += " Xa151";
-	rules += " _2b151";
+	if (props.isDisabled) rules += " gLX7Xt17";
+	else rules += " gmiKvLd17";
+	if (props.isDisabled) rules += " gld17";
+	else rules += " gle17";
+	rules += " FLvNfn17";
+	rules += " _je17";
+	rules += " og17";
+	rules += " ng17";
+	rules += " kg17";
+	rules += " jg17";
+	rules += " Jk7Otrc17";
+	rules += " Xa17";
+	rules += " _2b17";
 	return rules;
 };
 const tabsPickerIconCenterWrapper = function anonymous(props) {
 	let rules = " ";
-	rules += " sd151";
-	rules += " z2U5Crc151";
-	rules += " y2U5Crc151";
-	rules += " B2U5Crc151";
-	rules += " A2U5Crc151";
-	if (props.labelBehavior === "hide") rules += " S1DOfn151";
+	rules += " sd17";
+	rules += " z2U5Crc17";
+	rules += " y2U5Crc17";
+	rules += " B2U5Crc17";
+	rules += " A2U5Crc17";
+	if (props.labelBehavior === "hide") rules += " S1DOfn17";
 	return rules;
 };
 function selectedText(item) {
 	return item?.textValue ?? "";
 }
 function TabsPickerPopover(props) {
-	const theme = useTheme();
 	const selectContext = useContext(SelectContext);
 	const triggerRef = () => selectContext?.triggerRef?.() ?? selectContext?.rootRef?.()?.querySelector("button[aria-haspopup='listbox']") ?? null;
-	const [triggerWidth, setTriggerWidth] = createSignal();
-	const updateTriggerWidth = () => {
-		const trigger = triggerRef();
-		setTriggerWidth(trigger ? `${trigger.getBoundingClientRect().width}px` : void 0);
-	};
-	createEffect(() => {
-		const trigger = triggerRef();
-		if (!trigger) {
-			setTriggerWidth(void 0);
-			return;
-		}
-		updateTriggerWidth();
-		if (typeof ResizeObserver === "undefined") return;
-		const observer = new ResizeObserver(updateTriggerWidth);
-		observer.observe(trigger);
-		onCleanup(() => observer.disconnect());
-	});
-	const width = () => triggerWidth() ? `calc(${triggerWidth()} - 24px)` : void 0;
-	return <Popover trigger="Select" triggerRef={triggerRef} isOpen={selectContext?.isOpen?.() ?? false} onOpenChange={(open) => {
+	return <Popover$1 hideArrow trigger="Select" triggerRef={triggerRef} isOpen={selectContext?.isOpen?.() ?? false} onOpenChange={(open) => {
 		if (!open) selectContext?.state?.close?.();
-	}} placement="bottom start" offset={6} crossOffset={-12} shouldFlip autoFocus={false} class={(renderProps) => tabsPickerPopover({
-		...renderProps,
-		colorScheme: theme.colorScheme,
-		isArrowShown: false,
-		isSubmenu: false
-	})} style={() => ({
-		minWidth: "192px",
-		width: width()
-	})}>
+	}} placement="bottom start" offset={6} crossOffset={-12} shouldFlip autoFocus={false} styles={tabsPickerMenuWidth}>
       <div class={tabsPickerFrame}>{props.children}</div>
-    </Popover>;
+    </Popover$1>;
 }
 function TabsPickerOption(props) {
 	const [local, headlessProps] = splitProps(props, ["children"]);
@@ -264,8 +221,8 @@ function TabsPickerOption(props) {
 		isLink: false
 	});
 	return <SelectOption {...headlessProps} class={optionClass}>
-      {(renderProps) => <IconContext.Provider value={iconContextValue}>
-          <TextContext.Provider value={textContextValue}>
+      {(renderProps) => <IconContext value={iconContextValue}>
+          <TextContext$1 value={textContextValue}>
             <Checkmark size="M" class={menuItemCheckmark({
 		isSelected: renderProps.isSelected,
 		isDisabled: renderProps.isDisabled
@@ -275,8 +232,8 @@ function TabsPickerOption(props) {
                 {local.children}
               </span>
             </Show>
-          </TextContext.Provider>
-        </IconContext.Provider>}
+          </TextContext$1>
+        </IconContext>}
     </SelectOption>;
 }
 function TabsPicker(props) {
@@ -334,70 +291,103 @@ const InternalTabsContext = createContext({
 });
 const tabsRoot = function anonymous(props) {
 	let rules = " ";
-	rules += " _Pc151";
-	rules += " sd151";
-	rules += " _va151";
-	if (props.orientation === "vertical") rules += " _tc151";
-	else if (props.orientation === "horizontal") rules += " _ta151";
-	rules += " uxe7h4151";
-	rules += " -_6BNtrc-c151";
-	rules += " vx151";
-	rules += " xb151";
-	rules += " _xa151";
-	rules += " _Fd151";
-	rules += " _FnuYUweb151";
-	rules += " pHKLAu151";
+	rules += " _Pc17";
+	rules += " sd17";
+	rules += " _va17";
+	if (props.orientation === "vertical") rules += " _tc17";
+	else if (props.orientation === "horizontal") rules += " _ta17";
+	rules += " uxe7h417";
+	rules += " -_6BNtrc-c17";
+	rules += " vx17";
+	rules += " xb17";
+	rules += " _xa17";
+	rules += " _Fd17";
+	rules += " _FnuYUweb17";
+	rules += " pmiKvLd17";
 	return rules;
 };
 const tabList = function anonymous(props) {
 	let rules = " ";
-	rules += " sd151";
-	if (props.orientation === "vertical") rules += " _ta151";
-	else if (props.orientation === "horizontal") rules += " _tc151";
-	rules += " _va151";
-	if (props.variant === "pill") rules += " Uh151";
+	rules += " sd17";
+	if (props.orientation === "vertical") rules += " _ta17";
+	else if (props.orientation === "horizontal") rules += " _tc17";
+	rules += " _va17";
+	if (props.variant === "terminal") rules += " UT4Nfn17";
+	else if (props.variant === "pill") rules += " Uh17";
 	else if (props.variant === "line") {
-		if (props.orientation === "vertical") rules += " U1DOfn151";
+		if (props.orientation === "vertical") rules += " U1DOfn17";
 		else if (props.orientation === "horizontal") {
-			if (props.density === "regular") rules += " Up151";
-			else if (props.density === "compact") rules += " Uj151";
+			if (props.density === "regular") rules += " Up17";
+			else if (props.density === "compact") rules += " Uj17";
 			else if (props.isLabelHidden) {}
 		}
 	}
-	if (props.variant === "pill") rules += " qh151";
+	if (props.variant === "terminal") rules += " qT4Nfn17";
+	else if (props.variant === "pill") rules += " qh17";
 	else if (props.variant === "line") {
-		if (props.orientation === "vertical") rules += " q1DOfn151";
+		if (props.orientation === "vertical") rules += " q1DOfn17";
 		else if (props.orientation === "horizontal") {
-			if (props.density === "regular") rules += " qp151";
-			else if (props.density === "compact") rules += " qj151";
+			if (props.density === "regular") rules += " qp17";
+			else if (props.density === "compact") rules += " qj17";
 			else if (props.isLabelHidden) {}
 		}
 	}
-	if (props.orientation === "vertical") rules += " Hz151";
-	rules += " Nq151";
-	if (props.variant === "pill") rules += " _Cd151";
-	if (props.variant === "pill") rules += " gNU7lMd151";
-	if (props.variant === "pill") rules += " -Jvcevd-xkGPz151";
-	if (props.variant === "pill") rules += " _kb151";
-	if (props.variant === "pill") rules += " hb151";
-	if (props.variant === "pill") rules += " mb151";
-	if (props.variant === "pill") rules += " lb151";
-	if (props.variant === "pill") rules += " _jf151";
-	if (props.variant === "pill") rules += " irHHOgb151";
-	if (props.variant === "pill") rules += " og151";
-	if (props.variant === "pill") rules += " ng151";
-	if (props.variant === "pill") rules += " kg151";
-	if (props.variant === "pill") rules += " jg151";
-	if (props.variant === "pill") rules += " _nfRoCnb151";
-	if (props.variant === "pill") rules += " Tt151";
-	if (props.variant === "pill") rules += " Qt151";
-	if (props.variant === "pill") rules += " SIWpurc151";
-	if (props.variant === "pill") rules += " RIWpurc151";
+	if (props.orientation === "vertical") rules += " Hz17";
+	rules += " Nq17";
+	if (props.variant === "pill") rules += " _Cd17";
+	if (props.variant === "pill") rules += " gNU7lMd17";
+	if (props.variant === "pill") rules += " -Jvcevd-xkGPz17";
+	if (props.variant === "pill") rules += " _kb17";
+	if (props.variant === "pill") rules += " hb17";
+	if (props.variant === "pill") rules += " mb17";
+	if (props.variant === "pill") rules += " lb17";
+	if (props.variant === "pill") rules += " _jf17";
+	if (props.variant === "pill") rules += " irHHOgb17";
+	if (props.variant === "pill") rules += " og17";
+	if (props.variant === "pill") rules += " ng17";
+	if (props.variant === "pill") rules += " kg17";
+	if (props.variant === "pill") rules += " jg17";
+	if (props.variant === "pill") rules += " _nPP9Zse17";
+	if (props.variant === "pill") rules += " Tt17";
+	if (props.variant === "pill") rules += " Qt17";
+	if (props.variant === "pill") rules += " SIWpurc17";
+	if (props.variant === "pill") rules += " RIWpurc17";
 	return rules;
 };
-const tabListWrapper = " _Pc151 Na151 _va151 _ua151";
-const hiddenTabListFrame = " _Pa151 Wr151 _Ar151 ZK151 _6b151 _Ne151 Pe151 _Ia151 _Ob151";
-const hiddenTabList = " _6b151 _Ne151 Pe151 _Ia151";
+const tabListWrapper = function anonymous(props) {
+	let rules = " ";
+	rules += " _Pc17";
+	rules += " Na17";
+	rules += " _va17";
+	rules += " _ua17";
+	if (props.variant === "terminal") rules += " sd17";
+	if (props.variant === "terminal") rules += " eb17";
+	if (props.variant === "terminal") rules += " gHPXipd17";
+	if (props.variant === "terminal") {
+		rules += " _iRvAxPd17";
+		rules += " _ilc17";
+	}
+	if (props.variant === "terminal") rules += " __mh0dLcd17";
+	if (props.variant === "terminal") rules += " _kb17";
+	if (props.variant === "terminal") rules += " hb17";
+	if (props.variant === "terminal") rules += " mb17";
+	if (props.variant === "terminal") rules += " lb17";
+	if (props.variant === "terminal") rules += " _jf17";
+	if (props.variant === "terminal") rules += " iAv83Hb17";
+	if (props.variant === "terminal") rules += " ob17";
+	if (props.variant === "terminal") rules += " nb17";
+	if (props.variant === "terminal") rules += " kb17";
+	if (props.variant === "terminal") rules += " jb17";
+	if (props.variant === "terminal") rules += " _nbkwzSb17";
+	if (props.variant === "terminal") rules += " Tp17";
+	if (props.variant === "terminal") rules += " Qp17";
+	if (props.variant === "terminal") rules += " Sp17";
+	if (props.variant === "terminal") rules += " Rp17";
+	return rules;
+};
+const tabListTrailing = " IM17 _va17 uxe7h417 vcstVsc17 _FWDMfn17 phuSu117 St17 Rt17 _7c17";
+const hiddenTabListFrame = " _Pa17 Wr17 _Ar17 ZK17 _6b17 _Ne17 Pe17 _Ia17 _Ob17";
+const hiddenTabList = " _6b17 _Ne17 Pe17 _Ia17";
 const tabsOverflowGateStyles = (scopeId) => `
 .solidaria-Tabs[data-tabs-overflow-scope="${scopeId}"][data-tabs-overflow-state="menu"]
   [data-tabs-overflow-owner="${scopeId}"] > .solidaria-Tabs-overflowTabList {
@@ -413,165 +403,195 @@ const tabsOverflowTabListClass = "solidaria-Tabs-overflowTabList";
 const tabsOverflowMenuClass = "solidaria-Tabs-overflowMenu";
 const tabsMenuWrapper = function anonymous(props) {
 	let rules = " ";
-	rules += " sd151";
-	rules += " _va151";
-	rules += " eb151";
-	if (props.density === "regular") rules += " Fz151";
-	else if (props.density === "compact") rules += " Fx151";
+	rules += " sd17";
+	rules += " _va17";
+	rules += " eb17";
+	if (props.density === "regular") rules += " Fz17";
+	else if (props.density === "compact") rules += " Fx17";
 	return rules;
 };
 const tab = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " _Pc151";
-	rules += " sd151";
-	rules += " eb151";
-	if (props.variant === "pill") rules += " _ta151";
-	if (props.variant === "pill") rules += " _Ca151";
-	if (props.variant === "pill") rules += " Nrav34c151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " _Pc17";
+	rules += " sd17";
+	rules += " eb17";
+	if (props.variant === "pill") rules += " _ta17";
+	if (props.variant === "pill") rules += " _Ca17";
+	if (props.variant === "pill") rules += " Nrav34c17";
 	if (props.orientation === "horizontal") {
 		if (props.variant === "line") {
-			if (props.density === "regular") rules += " Fz151";
-			else if (props.density === "compact") rules += " Fx151";
+			if (props.density === "regular") rules += " Fz17";
+			else if (props.density === "compact") rules += " Fx17";
 		}
 	}
-	if (props.orientation === "vertical") rules += " Mi151";
-	if (props.orientation === "vertical") rules += " SIWpurc151";
-	else if (props.isLabelHidden) rules += " S1DOfn151";
-	if (props.orientation === "vertical") rules += " RIWpurc151";
-	else if (props.isLabelHidden) rules += " R1DOfn151";
-	rules += " of151";
-	rules += " nf151";
-	rules += " kf151";
-	rules += " jf151";
-	if (props.variant === "pill") rules += " UkNNfn151";
+	if (props.orientation === "vertical") rules += " Mi17";
+	if (props.variant === "terminal") rules += " SY4qurc17";
+	else if (props.orientation === "vertical") rules += " SIWpurc17";
+	else if (props.isLabelHidden) rules += " S1DOfn17";
+	if (props.variant === "terminal") rules += " RY4qurc17";
+	else if (props.orientation === "vertical") rules += " RIWpurc17";
+	else if (props.isLabelHidden) rules += " R1DOfn17";
+	if (props.variant === "terminal") rules += " T1DOfn17";
+	if (props.variant === "terminal") rules += " Q1DOfn17";
+	if (props.variant === "terminal") rules += " osmOfn17";
+	else rules += " of17";
+	if (props.variant === "terminal") rules += " nsmOfn17";
+	else rules += " nf17";
+	if (props.variant === "terminal") rules += " ksmOfn17";
+	else rules += " kf17";
+	if (props.variant === "terminal") rules += " jsmOfn17";
+	else rules += " jf17";
+	if (props.variant === "terminal") rules += " _kb17";
+	if (props.variant === "terminal") rules += " hb17";
+	if (props.variant === "terminal") rules += " mb17";
+	if (props.variant === "terminal") rules += " lb17";
+	if (props.variant === "terminal") rules += " _jf17";
+	if (props.variant === "terminal") {
+		if (props.isSelected) rules += " i3hLXWc17";
+		else rules += " iA17";
+	}
+	if (props.variant === "terminal") {
+		if (props.isSelected) rules += " gZuYZFe17";
+		else if (props.isHovered) rules += " gvHkjsd17";
+		else rules += " g917";
+	}
+	if (props.variant === "pill") rules += " UkNNfn17";
 	else {
-		rules += " Uc151";
-		rules += " Usd151";
+		rules += " Uc17";
+		rules += " Usd17";
 	}
-	if (props.variant === "pill") rules += " qkNNfn151";
+	if (props.variant === "pill") rules += " qkNNfn17";
 	else {
-		rules += " qc151";
-		rules += " qsd151";
+		rules += " qc17";
+		rules += " qsd17";
 	}
-	if (props.isDisabled) rules += " pUvnvv151";
-	else if (props.isSelected) if (props.isPressed) rules += " pOzYCcc151";
-	else if (props.isFocusVisible) rules += " pOzYCcc151";
-	else if (props.isHovered) rules += " pOzYCcc151";
-	else rules += " p5dxOg151";
-	else if (props.isPressed) rules += " pQKeKoe151";
-	else if (props.isFocusVisible) rules += " pQKeKoe151";
-	else if (props.isHovered) rules += " pQKeKoe151";
-	else rules += " pUUi0Fe151";
-	if (props.isDisabled) rules += " plc151";
-	else if (props.isSelected) rules += " pld151";
-	rules += " ri151";
-	rules += " _Xa151";
-	rules += " _va151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	rules += " __ca151";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	else if (props.variant === "terminal") {
+		if (props.isSelected) rules += " pmiKvLd17";
+		else rules += " phuSu117";
+	} else if (props.isSelected) {
+		if (props.isPressed) rules += " p7mEcOd17";
+		else if (props.isFocusVisible) rules += " p7mEcOd17";
+		else if (props.isHovered) rules += " p7mEcOd17";
+		else rules += " pwOLUue17";
+	} else if (props.isPressed) rules += " pX85CBd17";
+	else if (props.isFocusVisible) rules += " pX85CBd17";
+	else if (props.isHovered) rules += " pX85CBd17";
+	else rules += " pLw1gcc17";
+	if (props.isDisabled) rules += " plc17";
+	else if (props.isSelected) rules += " pld17";
+	rules += " ri17";
+	rules += " _Xa17";
+	rules += " _va17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	rules += " __ca17";
 	return rules;
 };
 const tabText = function anonymous(props) {
 	let rules = " ";
-	rules += " _Jb151";
-	if (props.isLabelHidden) rules += " sk151";
-	if (props.orientation === "vertical") rules += " vQvqurc151";
-	else if (props.variant === "pill") rules += " vIWpurc151";
+	rules += " _Jb17";
+	if (props.isLabelHidden) rules += " sk17";
+	if (props.orientation === "vertical") rules += " vQvqurc17";
+	else if (props.variant === "terminal") rules += " vcstVsc17";
+	else if (props.variant === "pill") rules += " vIWpurc17";
 	if (props.orientation === "vertical") {
-		rules += " xg151";
-		rules += " _xa151";
+		rules += " xg17";
+		rules += " _xa17";
+	} else if (props.variant === "terminal") {
+		rules += " xg17";
+		rules += " _xa17";
 	} else if (props.variant === "pill") {
-		rules += " xd151";
-		rules += " _xa151";
-		rules += " xX0cczbc151";
-		rules += " _xX0cczba151";
+		rules += " xd17";
+		rules += " _xa17";
+		rules += " xX0cczbc17";
+		rules += " _xX0cczba17";
 	}
-	if (props.variant === "pill") rules += " -sKUDed-iH4cn151";
-	if (props.variant === "pill") rules += " _FWDMfn151";
+	if (props.variant === "pill") rules += " -sKUDed-iH4cn17";
+	if (props.variant === "pill") rules += " _FWDMfn17";
 	return rules;
 };
 const tabIndicator = function anonymous(props) {
 	let rules = " ";
-	rules += " _Pa151";
-	rules += " _Ob151";
-	if (props.isDisabled) rules += " gkDWoNd151";
-	else rules += " gdeCgNc151";
-	if (props.isDisabled) rules += " gld151";
-	else rules += " gle151";
-	rules += " og151";
-	rules += " ng151";
-	rules += " kg151";
-	rules += " jg151";
-	rules += " _qg151";
-	rules += " YIRyJjb151";
-	rules += " Ydklsgce151";
-	rules += " Xc151";
-	rules += " _2a151";
-	if (props.orientation === "vertical") rules += " _lK151";
-	else if (props.orientation === "horizontal") rules += " _lr151";
-	if (props.orientation === "vertical") rules += " Wr151";
-	else if (props.orientation === "horizontal") rules += " WL151";
-	if (props.orientation === "vertical") rules += " _Ea151";
-	else if (props.orientation === "horizontal") rules += " _Er151";
-	if (props.orientation === "vertical") rules += " _RK151";
-	else if (props.orientation === "horizontal") rules += " _Rr151";
-	if (props.orientation === "vertical") rules += " Zf151";
-	else if (props.orientation === "horizontal") rules += " Za151";
-	if (props.orientation === "vertical") rules += " Fb151";
-	else if (props.orientation === "horizontal") rules += " FlAZvq151";
+	rules += " _Pa17";
+	rules += " _Ob17";
+	if (props.isDisabled) rules += " gLX7Xt17";
+	else rules += " gpC4Gxe17";
+	if (props.isDisabled) rules += " gld17";
+	else rules += " gle17";
+	rules += " og17";
+	rules += " ng17";
+	rules += " kg17";
+	rules += " jg17";
+	rules += " _qg17";
+	rules += " YIRyJjb17";
+	rules += " Ydklsgce17";
+	rules += " Xc17";
+	rules += " _2a17";
+	if (props.orientation === "vertical") rules += " _lK17";
+	else if (props.orientation === "horizontal") rules += " _lr17";
+	if (props.orientation === "vertical") rules += " Wr17";
+	else if (props.orientation === "horizontal") rules += " WL17";
+	if (props.orientation === "vertical") rules += " _Ea17";
+	else if (props.orientation === "horizontal") rules += " _Er17";
+	if (props.orientation === "vertical") rules += " _RK17";
+	else if (props.orientation === "horizontal") rules += " _Rr17";
+	if (props.orientation === "vertical") rules += " Zf17";
+	else if (props.orientation === "horizontal") rules += " Za17";
+	if (props.orientation === "vertical") rules += " Fb17";
+	else if (props.orientation === "horizontal") rules += " FlAZvq17";
 	return rules;
 };
 const tabCaret = function anonymous(props) {
 	let rules = " ";
-	rules += " _Ja151";
-	rules += " _va151";
-	rules += " Zk151";
-	rules += " uxe7h4151";
-	rules += " vQvqurc151";
-	rules += " xg151";
-	rules += " _xa151";
-	rules += " _FWDMfn151";
-	if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " p5dxOg151";
-	if (props.isDisabled) rules += " plc151";
-	else rules += " pld151";
-	if (props.isSelected) rules += " _Ib151";
-	else if (props.isHovered) rules += " _Itvfurc151";
-	else rules += " _Ia151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
+	rules += " _Ja17";
+	rules += " _va17";
+	rules += " Zk17";
+	rules += " uxe7h417";
+	rules += " vQvqurc17";
+	rules += " xg17";
+	rules += " _xa17";
+	rules += " _FWDMfn17";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	else rules += " pwOLUue17";
+	if (props.isDisabled) rules += " plc17";
+	else rules += " pld17";
+	if (props.isSelected) rules += " _Ib17";
+	else if (props.isHovered) rules += " _Itvfurc17";
+	else rules += " _Ia17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
 	return rules;
 };
-const tabBadgeStyles = " _J3mU151 IM151";
-const tabPanels = " Na151 Ma151";
+const tabBadgeStyles = " _J3mU17 IM17";
+const tabPanels = " Na17 Ma17";
 const tabPanel = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " pHKLAu151";
-	rules += " Na151";
-	rules += " Ma151";
-	rules += " _ub151";
-	if (props.isInert) rules += " sk151";
-	else rules += " sb151";
-	rules += " Js151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " pmiKvLd17";
+	rules += " Na17";
+	rules += " Ma17";
+	rules += " _ub17";
+	if (props.isInert) rules += " sk17";
+	else rules += " sb17";
+	rules += " Js17";
 	return rules;
 };
-const iconStyles = " sb151 _va151 -_8sjo0b-t5ZbAob151";
-const iconRenderStyles = " _Ja151";
+const iconStyles = " sb17 _va17 -_8sjo0b-t5ZbAob17";
+const iconRenderStyles = " _Ja17";
 function requireTabsLabel(props) {
 	if (!props["aria-label"] && !props["aria-labelledby"]) throw new Error("Tabs requires either an aria-label or aria-labelledby prop.");
 }
@@ -584,8 +604,17 @@ function resolveChildAccessor(value) {
 * Tabs organize related content into sections where one panel is visible at a time.
 */ function Tabs$1(props) {
 	const providerProps = useProviderProps(props);
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
 	const contextProps = getSlottedContextProps(useContext(TabsContext), props.slot);
-	const [local, labelProps, headlessProps] = splitProps(mergeProps(providerProps, contextProps ?? {}, props), [
+	const merged = mergeProps$1(flags, contextProps ?? {}, props);
+	const [local, labelProps, headlessProps] = splitProps(merged, [
 		"children",
 		"density",
 		"labelBehavior",
@@ -601,7 +630,7 @@ function resolveChildAccessor(value) {
 	const labelBehavior = () => local.labelBehavior ?? "show";
 	const variant = () => local.variant ?? "line";
 	const orientation = () => headlessProps.orientation ?? "horizontal";
-	const [showTabs, setShowTabsSignal] = createSignal(true);
+	const [showTabs, setShowTabsSignal] = createSignal(true, { ownedWrite: true });
 	const menuId = createUniqueId();
 	const menuButtonId = `${menuId}-button`;
 	const menuValueId = `${menuId}-value`;
@@ -629,7 +658,7 @@ function resolveChildAccessor(value) {
 		},
 		showTabs,
 		setShowTabs(value) {
-			setShowTabsSignal(orientation() === "vertical" || variant() === "pill" ? true : value);
+			setShowTabsSignal(orientation() === "vertical" || variant() === "pill" || variant() === "terminal" ? true : value);
 		},
 		menuId,
 		menuButtonId,
@@ -647,15 +676,15 @@ function resolveChildAccessor(value) {
 		}), mergedStyles())
 	].filter(Boolean).join(" ");
 	requireTabsLabel(labelProps);
-	createEffect(() => {
-		if (orientation() === "vertical" || variant() === "pill") setShowTabsSignal(true);
+	createEffect(() => orientation() === "vertical" || variant() === "pill" || variant() === "terminal", (forceShow) => {
+		if (forceShow) setShowTabsSignal(true);
 	});
-	return <InternalTabsContext.Provider value={internalContext}>
+	return <InternalTabsContext value={internalContext}>
       <Tabs {...headlessProps} ref={(element) => assignRef(element)} slot={local.slot ?? void 0} class={className} style={mergedUnsafeStyle()} data-density={density()} data-label-behavior={labelBehavior()} data-variant={variant()} data-tabs-overflow-scope={menuId} data-tabs-overflow-state={showTabs() ? "tabs" : "menu"}>
         <style>{tabsOverflowGateStyles(menuId)}</style>
         {local.children}
       </Tabs>
-    </InternalTabsContext.Provider>;
+    </InternalTabsContext>;
 }
 /**
 * A TabList contains the tabs for a Tabs group.
@@ -670,7 +699,8 @@ function resolveChildAccessor(value) {
 		"UNSAFE_className",
 		"UNSAFE_style",
 		"class",
-		"slot"
+		"slot",
+		"trailing"
 	]);
 	const className = (isHidden = false) => (renderProps) => [
 		"solidaria-TabList",
@@ -758,25 +788,26 @@ function resolveChildAccessor(value) {
 		queueMicrotask(updateOverflow);
 		window.requestAnimationFrame(updateOverflow);
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
 		context.orientation;
 		context.density;
 		context.labelBehavior;
 		queueOverflowUpdate();
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
 		context.showTabs();
 		queueOverflowUpdate();
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const items = collectionItems();
 		if (items.length > 0) setCachedItems(items);
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
 		measuringItems();
 		queueOverflowUpdate();
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const wrapper = wrapperRef();
 		queueOverflowUpdate();
 		if (!wrapper || typeof ResizeObserver === "undefined") return;
@@ -786,16 +817,23 @@ function resolveChildAccessor(value) {
 		const list = measurementListElement();
 		if (list) observer.observe(list);
 		window.addEventListener("resize", queueOverflowUpdate);
-		onCleanup(() => observer.disconnect());
-		onCleanup(() => window.removeEventListener("resize", queueOverflowUpdate));
+		_s2Cleanups.push(() => observer.disconnect());
+		_s2Cleanups.push(() => window.removeEventListener("resize", queueOverflowUpdate));
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
 		(typeof document === "undefined" ? void 0 : document.fonts)?.ready.then(queueOverflowUpdate);
 	});
 	return <div ref={(element) => {
 		wrapperElement = element;
 		setWrapperRef(element);
-	}} class={tabListWrapper} data-tabs-overflow-owner={context.menuId}>
+	}} class={tabListWrapper({
+		orientation: context.orientation,
+		density: context.density,
+		variant: context.variant
+	})} data-tabs-overflow-owner={context.menuId}>
       <div class={hiddenTabListFrame} aria-hidden="true" inert>
         <div class={measurementListClass()} style={local.UNSAFE_style} data-tabs-measure-list>
           <For each={measuringItems()}>
@@ -815,6 +853,12 @@ function resolveChildAccessor(value) {
       <TabList {...headlessProps} aria-label={headlessProps["aria-label"] ?? context.ariaLabel} aria-labelledby={headlessProps["aria-labelledby"] ?? context.ariaLabelledBy} slot={local.slot ?? void 0} class={className(false)} style={local.UNSAFE_style}>
         {local.children}
       </TabList>
+      {(() => {
+		const trailing = local.trailing;
+		return trailing ? <div class={tabListTrailing} data-rsp-slot="trailing">
+            {trailing}
+          </div> : null;
+	})()}
       <TabsMenu items={pickerItems()} disabledKeys={disabledKeys()} />
     </div>;
 }
@@ -889,7 +933,7 @@ function TabsMenu(props) {
         </span> : value;
 		}
 		return <>
-        <Show when={context.orientation !== "vertical" && context.variant !== "pill"}>
+        <Show when={context.orientation !== "vertical" && context.variant !== "pill" && context.variant !== "terminal"}>
           <SelectionIndicator class={tabIndicator({
 			orientation: context.orientation,
 			density: context.density,
@@ -908,13 +952,13 @@ function TabsMenu(props) {
             {">"}
           </span>
         </Show>
-        <IconContext.Provider value={iconContextValue}>
-          <TextContext.Provider value={textContextValue}>
-            <NotificationBadgeContext.Provider value={badgeContextValue}>
+        <IconContext value={iconContextValue}>
+          <TextContext$1 value={textContextValue}>
+            <NotificationBadgeContext value={badgeContextValue}>
               <ResolvedTabContent />
-            </NotificationBadgeContext.Provider>
-          </TextContext.Provider>
-        </IconContext.Provider>
+            </NotificationBadgeContext>
+          </TextContext$1>
+        </IconContext>
       </>;
 	}
 	return <Tab {...headlessProps} aria-labelledby={[labelHidden() ? contentId : void 0, headlessProps["aria-labelledby"]].filter(Boolean).join(" ") || void 0} slot={local.slot ?? void 0} class={className} style={local.UNSAFE_style}>
@@ -947,6 +991,7 @@ function TabsMenu(props) {
 */ function TabPanel(props) {
 	const context = useContext(InternalTabsContext);
 	const state = useContext(TabsStateContext);
+	const [panelRef, setPanelRef] = createSignal();
 	const [local, headlessProps] = splitProps(props, [
 		"children",
 		"styles",
@@ -957,7 +1002,7 @@ function TabsMenu(props) {
 		"shouldForceMount"
 	]);
 	const ariaProps = headlessProps;
-	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;
@@ -1008,7 +1053,7 @@ function TabsMenu(props) {
 	const menuLabelledBy = () => [context.menuButtonId, context.menuValueId].filter(Boolean).join(" ") || void 0;
 	const hasTabPanelSemantics = () => context.showTabs() && !isInert();
 	return <Show when={shouldRender()}>
-      <div id={hasTabPanelSemantics() ? tabPanelProps.id : void 0} role={context.showTabs() ? isInert() ? void 0 : tabPanelProps.role : "group"} aria-labelledby={context.showTabs() ? hasTabPanelSemantics() ? tabPanelProps["aria-labelledby"] : void 0 : menuLabelledBy()} aria-label={hasTabPanelSemantics() ? tabPanelProps["aria-label"] : void 0} aria-describedby={hasTabPanelSemantics() ? tabPanelProps["aria-describedby"] : void 0} tabIndex={context.showTabs() && isInert() ? void 0 : tabPanelProps.tabIndex} slot={local.slot ?? void 0} class={className(activeRenderProps())} style={local.UNSAFE_style} onFocus={focusProps.onFocus} onBlur={focusProps.onBlur} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} inert={context.showTabs() && isInert() ? true : void 0} data-inert={context.showTabs() && isInert() ? true : void 0} data-entering={context.showTabs() && isEntering() ? true : void 0} data-exiting={context.showTabs() && isExiting() ? true : void 0} hidden={context.showTabs() && ariaProps.id !== void 0 && !isSelected() && !local.shouldForceMount ? true : void 0}>
+      <div ref={setPanelRef} id={hasTabPanelSemantics() ? tabPanelProps.id : void 0} role={context.showTabs() ? isInert() ? void 0 : tabPanelProps.role : "group"} aria-labelledby={context.showTabs() ? hasTabPanelSemantics() ? tabPanelProps["aria-labelledby"] : void 0 : menuLabelledBy()} aria-label={hasTabPanelSemantics() ? tabPanelProps["aria-label"] : void 0} aria-describedby={hasTabPanelSemantics() ? tabPanelProps["aria-describedby"] : void 0} tabindex={context.showTabs() && isInert() ? void 0 : tabPanelProps.tabIndex} slot={local.slot ?? void 0} class={className(activeRenderProps())} style={local.UNSAFE_style} onFocus={focusProps.onFocus} onBlur={focusProps.onBlur} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible())} inert={context.showTabs() && isInert() ? true : void 0} data-inert={dataAttr(context.showTabs() && isInert())} data-entering={dataAttr(context.showTabs() && isEntering())} data-exiting={dataAttr(context.showTabs() && isExiting())} hidden={context.showTabs() && ariaProps.id !== void 0 && !isSelected() && !local.shouldForceMount ? true : void 0}>
         {renderedChildren()}
       </div>
     </Show>;