@proyecto-viviana/ui 0.5.0 → 0.6.0

package/src/tabs/index.tsx

@@ -0,0 +1,1368 @@
+import {
+  createContext,
+  createEffect,
+  createMemo,
+  createSignal,
+  createUniqueId,
+  For,
+  mergeProps,
+  onCleanup,
+  Show,
+  splitProps,
+  useContext,
+  type JSX,
+} from "solid-js";
+import {
+  createFocusRing,
+  createTabPanel,
+  type AriaTabPanelProps,
+} from "@proyecto-viviana/solidaria";
+import {
+  SelectionIndicator,
+  Tab as HeadlessTab,
+  TabList as HeadlessTabList,
+  TabPanels as HeadlessTabPanels,
+  Tabs as HeadlessTabs,
+  TabsStateContext as HeadlessTabsStateContext,
+  type TabListProps as HeadlessTabListProps,
+  type TabListRenderProps,
+  type TabPanelProps as HeadlessTabPanelProps,
+  type TabPanelRenderProps,
+  type TabPanelsProps as HeadlessTabPanelsProps,
+  type TabProps as HeadlessTabProps,
+  type TabRenderProps,
+  type TabsProps as HeadlessTabsProps,
+  type TabsRenderProps,
+} from "@proyecto-viviana/solidaria-components";
+import type {
+  CollectionNode,
+  Key,
+  KeyboardActivation,
+  TabListState,
+  TabOrientation,
+} from "@proyecto-viviana/solid-stately";
+import type { StyleString } from "../style";
+import { baseColor, focusRing, style } from "../style" with { type: "macro" };
+import { mergeStyles } from "../style/runtime";
+import { IconContext } from "../icon/spectrum-icon";
+import { centerBaseline } from "../icon/center-baseline";
+import { useProviderProps } from "../provider";
+import {
+  getSlottedContextProps,
+  mergeContextRefs,
+  mergeContextStyles,
+  mergeContextUnsafeStyle,
+  type RefLike,
+  type SpectrumContextValue,
+} from "../button/spectrum-context";
+import { TextContext } from "../text";
+import { NotificationBadgeContext } from "../notificationbadge";
+import { TabsPicker, type TabsPickerItem } from "./TabsPicker";
+
+export type TabsDensity = "compact" | "regular";
+export type TabsLabelBehavior = "show" | "hide";
+/* Glasselated: the register draws two tab forms (TerminalGlassLab.tsx:568-609) —
+ * the default line strip, and the mobile tab bar: a 999px glass pill
+ * (`--surface-panel` under `--blur-panel`, `--edge-glass` rim) whose slots stack
+ * a pixel icon over a micro label, spread space-around. `pill` is that form; it
+ * is horizontal-only and never collapses into the overflow picker (it IS the
+ * small-screen form). */
+export type TabsVariant = "line" | "pill";
+
+export interface TabsProps<T> extends Omit<
+  HeadlessTabsProps<T>,
+  "children" | "class" | "style" | "slot" | "ref"
+> {
+  /** The tabs and panels to render. */
+  children?: JSX.Element;
+  /** Compact reduces tab height and inter-item spacing. */
+  density?: TabsDensity;
+  /** Whether text labels are visually shown. */
+  labelBehavior?: TabsLabelBehavior;
+  /**
+   * Visual form of the tab strip. `line` is the default underlined strip;
+   * `pill` is the register's glass tab bar — stacked icon-over-label slots in a
+   * full-radius glass capsule. `pill` is horizontal-only and never collapses
+   * into the overflow picker.
+   */
+  variant?: TabsVariant;
+  /** Accessible label for the tab list. Required when aria-labelledby is not provided. */
+  "aria-label"?: string;
+  /** Id of the element labeling the tab list. Required when aria-label is not provided. */
+  "aria-labelledby"?: string;
+  /** Spectrum-defined generated classes. */
+  styles?: StyleString;
+  /** Additional CSS class name. Use only as a last resort. */
+  UNSAFE_className?: string;
+  /** Additional inline styles. Use only as a last resort. */
+  UNSAFE_style?: JSX.CSSProperties;
+  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */
+  class?: string;
+  /** Slot name when used in a Spectrum context. */
+  slot?: string | null;
+  /** Ref for the root tabs element. */
+  ref?: RefLike<HTMLDivElement>;
+}
+
+export interface TabListProps<T> extends Omit<
+  HeadlessTabListProps<T>,
+  "children" | "class" | "style" | "slot"
+> {
+  /** Static tabs or a render function for collection items. */
+  children?: JSX.Element | ((item: T) => JSX.Element);
+  /** Spectrum-defined generated classes. */
+  styles?: StyleString;
+  /** Additional CSS class name. Use only as a last resort. */
+  UNSAFE_className?: string;
+  /** Additional inline styles. Use only as a last resort. */
+  UNSAFE_style?: JSX.CSSProperties;
+  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */
+  class?: string;
+  /** Slot name when used in a Spectrum context. */
+  slot?: string | null;
+}
+
+export interface TabProps extends Omit<HeadlessTabProps, "children" | "class" | "style" | "slot"> {
+  /** The tab contents. */
+  children?: JSX.Element | ((renderProps: TabRenderProps) => JSX.Element);
+  /** Spectrum-defined generated classes. */
+  styles?: StyleString;
+  /** Additional CSS class name. Use only as a last resort. */
+  UNSAFE_className?: string;
+  /** Additional inline styles. Use only as a last resort. */
+  UNSAFE_style?: JSX.CSSProperties;
+  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */
+  class?: string;
+  /** Slot name when used in a Spectrum context. */
+  slot?: string | null;
+}
+
+export interface TabPanelProps extends Omit<
+  HeadlessTabPanelProps,
+  "children" | "class" | "style" | "slot"
+> {
+  /** The panel contents. */
+  children?: JSX.Element | ((renderProps: TabPanelRenderProps) => JSX.Element);
+  /** Spectrum-defined generated classes. */
+  styles?: StyleString;
+  /** Additional CSS class name. Use only as a last resort. */
+  UNSAFE_className?: string;
+  /** Additional inline styles. Use only as a last resort. */
+  UNSAFE_style?: JSX.CSSProperties;
+  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */
+  class?: string;
+  /** Slot name when used in a Spectrum context. */
+  slot?: string | null;
+}
+
+export interface TabPanelsProps extends Omit<HeadlessTabPanelsProps, "class" | "style" | "slot"> {
+  /** Spectrum-defined generated classes. */
+  styles?: StyleString;
+  /** Additional CSS class name. Use only as a last resort. */
+  UNSAFE_className?: string;
+  /** Additional inline styles. Use only as a last resort. */
+  UNSAFE_style?: JSX.CSSProperties;
+  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */
+  class?: string;
+  /** Slot name when used in a Spectrum context. */
+  slot?: string | null;
+}
+
+export const TabsContext = createContext<SpectrumContextValue<TabsProps<unknown>>>(null);
+
+interface InternalTabsContextValue {
+  readonly density: TabsDensity;
+  readonly labelBehavior: TabsLabelBehavior;
+  readonly orientation: TabOrientation;
+  readonly variant: TabsVariant;
+  readonly ariaLabel: string | undefined;
+  readonly ariaLabelledBy: string | undefined;
+  readonly showTabs: () => boolean;
+  readonly setShowTabs: (value: boolean) => void;
+  readonly menuId: string;
+  readonly menuButtonId: string;
+  readonly menuValueId: string;
+}
+
+const InternalTabsContext = createContext<InternalTabsContextValue>({
+  density: "regular",
+  labelBehavior: "show",
+  orientation: "horizontal",
+  variant: "line",
+  ariaLabel: undefined,
+  ariaLabelledBy: undefined,
+  showTabs: () => true,
+  setShowTabs: () => undefined,
+  menuId: "",
+  menuButtonId: "",
+  menuValueId: "",
+});
+
+interface TabsStyleState {
+  orientation: TabOrientation;
+  density: TabsDensity;
+  variant?: TabsVariant;
+  isDisabled?: boolean;
+  isLabelHidden?: boolean;
+  isSelected?: boolean;
+  isInert?: boolean;
+  isHovered?: boolean;
+  isPressed?: boolean;
+  isFocusVisible?: boolean;
+}
+
+interface TabCollectionItem {
+  key: Key;
+  textValue: string;
+  isDisabled?: boolean;
+}
+
+const tabsRoot = style<TabsStyleState>({
+  position: "relative",
+  display: "flex",
+  flexShrink: 0,
+  flexDirection: {
+    orientation: {
+      horizontal: "column",
+      vertical: "row",
+    },
+  },
+  font: "ui",
+  /* Glasselated: tabs are navigation, and every nav row the handoff draws is mono
+   * (TerminalGlassLab.tsx:598). `font: "ui"` above still owns the size ramp; this
+   * only repoints the family, which is why it comes after. */
+  fontFamily: "code",
+});
+
+const tabList = style<TabsStyleState>({
+  display: "flex",
+  flexDirection: {
+    orientation: {
+      horizontal: "row",
+      vertical: "column",
+    },
+  },
+  flexShrink: 0,
+  gap: {
+    variant: {
+      line: {
+        orientation: {
+          horizontal: {
+            isLabelHidden: {
+              density: {
+                compact: 16,
+                regular: 24,
+              },
+            },
+            density: {
+              compact: 24,
+              regular: 32,
+            },
+          },
+          /* Glasselated: the rail spaces its rows a fixed 6px apart
+           * (TerminalGlassLab.tsx:521). */
+          vertical: "[6px]",
+        },
+      },
+      /* Pill slots are spread by space-around alone; any gap minimum would
+       * overflow a width-capped bar. */
+      pill: 0,
+    },
+  },
+  marginEnd: {
+    orientation: {
+      vertical: 20,
+    },
+  },
+  minWidth: "min",
+  /* Glasselated pill form: the register's mobile tab bar — slots spread
+   * space-around inside a full-radius glass capsule (`--surface-panel` under
+   * `--blur-panel`, hairline border, `--edge-glass` rim;
+   * TerminalGlassLab.tsx:568-577). */
+  justifyContent: {
+    variant: {
+      pill: "space-around",
+    },
+  },
+  backgroundColor: {
+    variant: {
+      pill: "layer-1",
+    },
+  },
+  backdropFilter: {
+    variant: {
+      pill: "var(--blur-panel)",
+    },
+  },
+  borderWidth: {
+    variant: {
+      pill: 1,
+    },
+  },
+  borderStyle: {
+    variant: {
+      pill: "solid",
+    },
+  },
+  borderColor: {
+    variant: {
+      pill: "border-subtle",
+    },
+  },
+  borderRadius: {
+    variant: {
+      pill: "full",
+    },
+  },
+  boxShadow: {
+    variant: {
+      /* The capsule is glass over the page, so it takes the softened surface rim —
+       * the control rim would ring the whole bar in white on a dark backdrop. */
+      pill: "edge-glass-surface",
+    },
+  },
+  paddingY: {
+    variant: {
+      pill: "[8px]",
+    },
+  },
+  paddingX: {
+    variant: {
+      pill: "[10px]",
+    },
+  },
+});
+
+const tabListWrapper = style({
+  position: "relative",
+  minWidth: 0,
+  flexShrink: 0,
+  flexGrow: 0,
+});
+
+const hiddenTabListFrame = style({
+  position: "absolute",
+  top: 0,
+  insetStart: 0,
+  width: "max",
+  visibility: "hidden",
+  overflow: "visible",
+  opacity: 0,
+  pointerEvents: "none",
+});
+
+const hiddenTabList = style({
+  visibility: "hidden",
+  overflow: "visible",
+  opacity: 0,
+});
+
+const tabsOverflowGateStyles = (scopeId: string) => `
+.solidaria-Tabs[data-tabs-overflow-scope="${scopeId}"][data-tabs-overflow-state="menu"]
+  [data-tabs-overflow-owner="${scopeId}"] > .solidaria-Tabs-overflowTabList {
+  display: none !important;
+}
+
+.solidaria-Tabs[data-tabs-overflow-scope="${scopeId}"][data-tabs-overflow-state="tabs"]
+  [data-tabs-overflow-owner="${scopeId}"] > .solidaria-Tabs-overflowMenu {
+  display: none !important;
+}
+`;
+
+const tabsOverflowTabListClass = "solidaria-Tabs-overflowTabList";
+const tabsOverflowMenuClass = "solidaria-Tabs-overflowMenu";
+
+const tabsMenuWrapper = style<TabsStyleState>({
+  display: "flex",
+  flexShrink: 0,
+  alignItems: "center",
+  height: {
+    density: {
+      compact: 32,
+      regular: 48,
+    },
+  },
+});
+
+const tab = style<TabsStyleState>({
+  ...focusRing(),
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  /* Glasselated pill slots stack a pixel icon over a micro label
+   * (TerminalGlassLab.tsx:597-607): column flow, 3px stack gap, 52px slot
+   * floor, natural height inside the capsule's own padding. */
+  flexDirection: {
+    variant: {
+      pill: "column",
+    },
+  },
+  justifyContent: {
+    variant: {
+      pill: "center",
+    },
+  },
+  minWidth: {
+    variant: {
+      pill: 52,
+    },
+  },
+  height: {
+    orientation: {
+      horizontal: {
+        variant: {
+          line: {
+            density: {
+              compact: 32,
+              regular: 48,
+            },
+          },
+        },
+      },
+    },
+  },
+  /* Glasselated: rail rows sit tight — the handoff draws ~31px rows (7px
+   * vertical padding around a 12px mono label, TerminalGlassLab.tsx:594);
+   * 32px is that look on the interactive-target floor. Density carries no
+   * vertical meaning — the rail is the rail. */
+  minHeight: {
+    orientation: {
+      vertical: 32,
+    },
+  },
+  paddingX: {
+    isLabelHidden: "[6px]",
+    orientation: {
+      /* Glasselated rail rows inset 10px (`.tgl-nav` padding,
+       * TerminalGlassLab.tsx:594). */
+      vertical: "[10px]",
+    },
+  },
+  borderRadius: "row",
+  gap: {
+    default: "text-to-visual",
+    variant: {
+      pill: "[3px]",
+    },
+  },
+  color: {
+    default: baseColor("neutral-subdued"),
+    isSelected: baseColor("accent"),
+    isDisabled: "disabled",
+    forcedColors: {
+      isSelected: "Highlight",
+      isDisabled: "GrayText",
+    },
+  },
+  cursor: "default",
+  textDecoration: "none",
+  flexShrink: 0,
+  transition: "default",
+  disableTapHighlight: true,
+});
+
+const tabText = style<TabsStyleState>({
+  order: 1,
+  display: {
+    isLabelHidden: "none",
+  },
+  /* Glasselated: pill slots caption their icon in the register's micro role
+   * (mono 10px/700, +0.1em tracking — TerminalGlassLab.tsx:600-607, the same
+   * metrics as typeRoles.micro); rail rows label in mono 12px/600
+   * (`.tgl-label`, glasselated.css:541). The family is already mono via the
+   * root's fontFamily repoint. */
+  fontSize: {
+    variant: {
+      pill: "[10px]",
+    },
+    orientation: {
+      vertical: "[12px]",
+    },
+  },
+  fontWeight: {
+    variant: {
+      pill: "bold",
+    },
+    orientation: {
+      vertical: "semi-bold",
+    },
+  },
+  letterSpacing: {
+    variant: {
+      pill: "0.1em",
+    },
+  },
+  lineHeight: {
+    variant: {
+      pill: "[1.2]",
+    },
+  },
+});
+
+const tabIndicator = style<TabsStyleState>({
+  position: "absolute",
+  pointerEvents: "none",
+  backgroundColor: {
+    default: "accent",
+    isDisabled: "disabled",
+    forcedColors: {
+      default: "Highlight",
+      isDisabled: "GrayText",
+    },
+  },
+  borderRadius: "full",
+  contain: "strict",
+  transition: {
+    default: "[translate,width,height]",
+    "@media (prefers-reduced-motion: reduce)": "none",
+  },
+  transitionDuration: 200,
+  transitionTimingFunction: "out",
+  bottom: {
+    orientation: {
+      horizontal: 0,
+      vertical: "auto",
+    },
+  },
+  top: {
+    orientation: {
+      horizontal: "auto",
+      vertical: 0,
+    },
+  },
+  left: {
+    orientation: {
+      horizontal: 0,
+      vertical: -12,
+    },
+  },
+  right: {
+    orientation: {
+      horizontal: 0,
+      vertical: "auto",
+    },
+  },
+  width: {
+    orientation: {
+      horizontal: "full",
+      vertical: 2,
+    },
+  },
+  height: {
+    orientation: {
+      horizontal: 2,
+      vertical: "full",
+    },
+  },
+});
+
+/* Glasselated: vertical tabs render the register's rail rows — each leads with
+ * a mono ">" caret that rests invisible, ghosts in on row hover (0.55) and pins
+ * solid on the active row (glasselated.css:441-462). The caret is the rail's
+ * selection affordance; the sliding SelectionIndicator is suppressed for
+ * vertical strips (and for the pill bar, where color alone marks the slot). */
+const tabCaret = style<TabsStyleState>({
+  order: 0,
+  flexShrink: 0,
+  width: 14,
+  fontFamily: "code",
+  fontSize: "[12px]",
+  fontWeight: "semi-bold",
+  lineHeight: "[1.2]",
+  color: {
+    default: "accent",
+    isDisabled: "disabled",
+    forcedColors: {
+      default: "Highlight",
+      isDisabled: "GrayText",
+    },
+  },
+  opacity: {
+    default: 0,
+    isHovered: 0.55,
+    isSelected: 1,
+  },
+  transition: "default",
+});
+
+/* Glasselated rail rows park their count pill flush right (`margin-left: auto`
+ * on the badge, TerminalGlassLab.tsx:527); order 2 keeps it after icon (0) and
+ * label (1) regardless of authoring order. */
+const tabBadgeStyles = style({
+  order: 2,
+  marginStart: "auto",
+});
+
+const tabPanels = style({
+  minWidth: 0,
+  minHeight: 0,
+});
+
+const tabPanel = style<TabsStyleState>({
+  ...focusRing(),
+  color: "gray-800",
+  minWidth: 0,
+  minHeight: 0,
+  flexGrow: 1,
+  display: {
+    default: "block",
+    isInert: "none",
+  },
+  marginTop: 4,
+});
+
+const iconStyles = style({
+  display: "block",
+  flexShrink: 0,
+  "--iconPrimary": {
+    type: "fill",
+    value: "currentColor",
+  },
+});
+
+const iconRenderStyles = style({
+  order: 0,
+});
+
+function requireTabsLabel(props: { "aria-label"?: string; "aria-labelledby"?: string }): void {
+  if (!props["aria-label"] && !props["aria-labelledby"]) {
+    throw new Error("Tabs requires either an aria-label or aria-labelledby prop.");
+  }
+}
+
+function resolveChildAccessor(value: unknown): JSX.Element {
+  let next = value;
+  while (typeof next === "function" && (next as (...args: unknown[]) => unknown).length === 0) {
+    next = (next as () => unknown)();
+  }
+
+  return Array.isArray(next)
+    ? (next.map((child) => resolveChildAccessor(child)) as unknown as JSX.Element)
+    : (next as JSX.Element);
+}
+
+/**
+ * Tabs organize related content into sections where one panel is visible at a time.
+ */
+export function Tabs<T>(props: TabsProps<T>): JSX.Element {
+  const providerProps = useProviderProps(props);
+  const contextProps = getSlottedContextProps(useContext(TabsContext), props.slot);
+  const merged = mergeProps(providerProps, contextProps ?? {}, props) as TabsProps<T>;
+  const [local, labelProps, headlessProps] = splitProps(
+    merged,
+    [
+      "children",
+      "density",
+      "labelBehavior",
+      "variant",
+      "styles",
+      "UNSAFE_className",
+      "UNSAFE_style",
+      "class",
+      "slot",
+      "ref",
+    ],
+    ["aria-label", "aria-labelledby"],
+  );
+  const density = () => local.density ?? "regular";
+  const labelBehavior = () => local.labelBehavior ?? "show";
+  const variant = () => local.variant ?? "line";
+  const orientation = () => headlessProps.orientation ?? "horizontal";
+  const [showTabs, setShowTabsSignal] = createSignal(true);
+  const menuId = createUniqueId();
+  const menuButtonId = `${menuId}-button`;
+  const menuValueId = `${menuId}-value`;
+  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+  const mergedUnsafeStyle = () =>
+    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+  const assignRef = mergeContextRefs(
+    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,
+    props.ref,
+  );
+  const internalContext: InternalTabsContextValue = {
+    get density() {
+      return density();
+    },
+    get labelBehavior() {
+      return labelBehavior();
+    },
+    get orientation() {
+      return orientation();
+    },
+    get variant() {
+      return variant();
+    },
+    get ariaLabel() {
+      return labelProps["aria-label"];
+    },
+    get ariaLabelledBy() {
+      return labelProps["aria-labelledby"];
+    },
+    showTabs,
+    setShowTabs(value) {
+      // The pill bar IS the small-screen form — it never collapses into the menu.
+      setShowTabsSignal(orientation() === "vertical" || variant() === "pill" ? true : value);
+    },
+    menuId,
+    menuButtonId,
+    menuValueId,
+  };
+  const className = (renderProps: TabsRenderProps) =>
+    [
+      "solidaria-Tabs",
+      contextProps?.UNSAFE_className,
+      props.UNSAFE_className,
+      props.class,
+      mergeStyles(
+        tabsRoot({
+          orientation: renderProps.orientation,
+          density: density(),
+          isDisabled: renderProps.isDisabled,
+        }),
+        mergedStyles(),
+      ),
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+  requireTabsLabel(labelProps);
+  createEffect(() => {
+    if (orientation() === "vertical" || variant() === "pill") {
+      setShowTabsSignal(true);
+    }
+  });
+
+  return (
+    <InternalTabsContext.Provider value={internalContext}>
+      <HeadlessTabs
+        {...headlessProps}
+        ref={(element) => assignRef(element)}
+        slot={local.slot ?? undefined}
+        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}
+      </HeadlessTabs>
+    </InternalTabsContext.Provider>
+  );
+}
+
+/**
+ * A TabList contains the tabs for a Tabs group.
+ */
+export function TabList<T>(props: TabListProps<T>): JSX.Element {
+  const context = useContext(InternalTabsContext);
+  const state = useContext(HeadlessTabsStateContext) as TabListState<unknown> | null;
+  let wrapperElement: HTMLDivElement | undefined;
+  const [wrapperRef, setWrapperRef] = createSignal<HTMLDivElement>();
+  const [local, headlessProps] = splitProps(props, [
+    "children",
+    "styles",
+    "UNSAFE_className",
+    "UNSAFE_style",
+    "class",
+    "slot",
+  ]);
+  const className =
+    (isHidden = false) =>
+    (renderProps: TabListRenderProps) =>
+      [
+        "solidaria-TabList",
+        isHidden ? undefined : tabsOverflowTabListClass,
+        local.UNSAFE_className,
+        local.class,
+        mergeStyles(
+          tabList({
+            orientation: renderProps.orientation,
+            density: context.density,
+            variant: context.variant,
+            isDisabled: renderProps.isDisabled,
+            isLabelHidden: context.labelBehavior === "hide",
+          }),
+          isHidden ? hiddenTabList : undefined,
+          local.styles,
+        ),
+      ]
+        .filter(Boolean)
+        .join(" ");
+  const collectionItems = createMemo<TabCollectionItem[]>(() => {
+    const collection = state?.collection();
+    if (!collection) {
+      return [];
+    }
+
+    return Array.from(collection as Iterable<CollectionNode<unknown>>)
+      .filter((item) => item.type === "item")
+      .map((item) => ({
+        key: item.key,
+        textValue: item.textValue ?? String(item.key),
+        isDisabled: item.isDisabled,
+      }));
+  });
+  const [cachedItems, setCachedItems] = createSignal<TabCollectionItem[]>([]);
+  const measuringItems = createMemo<TabCollectionItem[]>(() => {
+    const items = collectionItems();
+    return items.length > 0 ? items : cachedItems();
+  });
+  const pickerItems = createMemo<TabsPickerItem[]>(() =>
+    measuringItems().map((item) => ({
+      id: item.key,
+      textValue: item.textValue,
+      label: item.textValue,
+      isDisabled: Boolean(item.isDisabled || state?.isKeyDisabled(item.key)),
+    })),
+  );
+  const disabledKeys = createMemo(() => {
+    const result = new Set<Key>(state?.disabledKeys() ?? []);
+    for (const item of pickerItems()) {
+      if (item.isDisabled) {
+        result.add(item.id);
+      }
+    }
+
+    return result;
+  });
+  const measurementListClass = () =>
+    [
+      "solidaria-TabList",
+      local.UNSAFE_className,
+      local.class,
+      mergeStyles(
+        tabList({
+          orientation: context.orientation,
+          density: context.density,
+          variant: context.variant,
+          isDisabled: state?.isDisabled() ?? false,
+          isLabelHidden: context.labelBehavior === "hide",
+        }),
+        hiddenTabList,
+        local.styles,
+      ),
+    ]
+      .filter(Boolean)
+      .join(" ");
+  // The hidden measurement copies exist only to size the overflow-collapse
+  // calculation. Upstream's HiddenTabs renders each with `className({size,
+  // density})` (Tabs.tsx HiddenTabs) — i.e. NO isSelected/isDisabled, so the
+  // measurement copy never takes selection/disabled color state. Those variants
+  // affect color only, never width; passing them here makes the measurement copy
+  // of the selected tab flip color on selection and, because `tab` carries an
+  // unconditional `transition: default`, emit a phantom transition that doubles
+  // the real selection-indicator motion. Mirror upstream and pass only the
+  // width-relevant variants.
+  const measurementTabClass = () =>
+    [
+      "solidaria-Tab",
+      tab({
+        orientation: context.orientation,
+        density: context.density,
+        variant: context.variant,
+        isLabelHidden: context.labelBehavior === "hide",
+      }),
+    ]
+      .filter(Boolean)
+      .join(" ");
+  const tabListElement = () => {
+    const wrapper = wrapperElement;
+    if (!wrapper) {
+      return null;
+    }
+
+    return context.showTabs()
+      ? wrapper.querySelector<HTMLElement>('[role="tablist"]')
+      : wrapper.querySelector<HTMLElement>("[data-tabs-measure-list]");
+  };
+  const measurementListElement = () =>
+    wrapperElement?.querySelector<HTMLElement>("[data-tabs-measure-list]") ?? null;
+  const updateOverflow = () => {
+    if (context.orientation === "vertical" || context.variant === "pill") {
+      context.setShowTabs(true);
+      return;
+    }
+
+    const wrapper = wrapperElement;
+    const list = tabListElement();
+    if (!wrapper || !list) {
+      return;
+    }
+
+    const tabs = list.querySelectorAll<HTMLElement>('[role="tab"], [data-tabs-measure-tab]');
+    const lastTab = tabs[tabs.length - 1];
+    if (!lastTab) {
+      if (context.showTabs()) {
+        context.setShowTabs(true);
+      }
+      return;
+    }
+
+    const wrapperRect = wrapper.getBoundingClientRect();
+    const lastTabRect = lastTab.getBoundingClientRect();
+    const direction =
+      typeof window === "undefined" ? "ltr" : window.getComputedStyle(wrapper).direction;
+    const fits =
+      direction === "rtl"
+        ? lastTabRect.left >= wrapperRect.left
+        : lastTabRect.right <= wrapperRect.right;
+    context.setShowTabs(fits);
+  };
+  const queueOverflowUpdate = () => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    queueMicrotask(updateOverflow);
+    window.requestAnimationFrame(updateOverflow);
+  };
+
+  createEffect(() => {
+    context.orientation;
+    context.density;
+    context.labelBehavior;
+    queueOverflowUpdate();
+  });
+
+  createEffect(() => {
+    context.showTabs();
+    queueOverflowUpdate();
+  });
+
+  createEffect(() => {
+    const items = collectionItems();
+    if (items.length > 0) {
+      setCachedItems(items);
+    }
+  });
+
+  createEffect(() => {
+    measuringItems();
+    queueOverflowUpdate();
+  });
+
+  createEffect(() => {
+    const wrapper = wrapperRef();
+    queueOverflowUpdate();
+    if (!wrapper || typeof ResizeObserver === "undefined") {
+      return;
+    }
+
+    const observer = new ResizeObserver(queueOverflowUpdate);
+    observer.observe(wrapper);
+    if (wrapper.parentElement) {
+      observer.observe(wrapper.parentElement);
+    }
+    const list = measurementListElement();
+    if (list) {
+      observer.observe(list);
+    }
+    window.addEventListener("resize", queueOverflowUpdate);
+    onCleanup(() => observer.disconnect());
+    onCleanup(() => window.removeEventListener("resize", queueOverflowUpdate));
+  });
+
+  createEffect(() => {
+    const fonts = typeof document === "undefined" ? undefined : document.fonts;
+    fonts?.ready.then(queueOverflowUpdate);
+  });
+
+  return (
+    <div
+      ref={(element) => {
+        wrapperElement = element;
+        setWrapperRef(element);
+      }}
+      class={tabListWrapper}
+      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()}>
+            {(item) => (
+              <div class={measurementTabClass()} data-tabs-measure-tab>
+                <span
+                  class={tabText({
+                    orientation: context.orientation,
+                    density: context.density,
+                    variant: context.variant,
+                    isLabelHidden: context.labelBehavior === "hide",
+                  })}
+                  data-rsp-slot="text"
+                >
+                  {item.textValue}
+                </span>
+              </div>
+            )}
+          </For>
+        </div>
+      </div>
+      <HeadlessTabList
+        {...headlessProps}
+        aria-label={headlessProps["aria-label"] ?? context.ariaLabel}
+        aria-labelledby={headlessProps["aria-labelledby"] ?? context.ariaLabelledBy}
+        slot={local.slot ?? undefined}
+        class={className(false)}
+        style={local.UNSAFE_style}
+      >
+        {local.children}
+      </HeadlessTabList>
+      <TabsMenu items={pickerItems()} disabledKeys={disabledKeys()} />
+    </div>
+  );
+}
+
+function TabsMenu(props: { items: TabsPickerItem[]; disabledKeys: Set<Key> }): JSX.Element {
+  const context = useContext(InternalTabsContext);
+  const state = useContext(HeadlessTabsStateContext) as TabListState<unknown> | null;
+  const allKeysDisabled = () =>
+    props.items.length > 0 && props.items.every((item) => props.disabledKeys.has(item.id));
+  const isDisabled = () => Boolean(state?.isDisabled() || allKeysDisabled());
+
+  return (
+    <div
+      class={[
+        tabsOverflowMenuClass,
+        tabsMenuWrapper({
+          orientation: context.orientation,
+          density: context.density,
+        }),
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <TabsPicker
+        id={context.menuId}
+        valueId={context.menuValueId}
+        aria-label={context.ariaLabel}
+        aria-labelledby={context.ariaLabelledBy}
+        density={context.density}
+        labelBehavior={context.labelBehavior}
+        items={props.items}
+        disabledKeys={props.disabledKeys}
+        selectedKey={state?.selectedKey() ?? null}
+        isDisabled={isDisabled()}
+        onSelectionChange={(key) => {
+          if (key != null) {
+            state?.setSelectedKey(key);
+          }
+        }}
+      />
+    </div>
+  );
+}
+
+/**
+ * A Tab represents a selectable section in a Tabs group.
+ */
+export function Tab(props: TabProps): JSX.Element {
+  const context = useContext(InternalTabsContext);
+  const contentId = createUniqueId();
+  const [local, headlessProps] = splitProps(props, [
+    "children",
+    "styles",
+    "UNSAFE_className",
+    "UNSAFE_style",
+    "class",
+    "slot",
+  ]);
+  const labelHidden = () => context.labelBehavior === "hide";
+  const textStyleState = () => ({
+    orientation: context.orientation,
+    density: context.density,
+    variant: context.variant,
+    isLabelHidden: labelHidden(),
+  });
+  const className = (renderProps: TabRenderProps) =>
+    [
+      "solidaria-Tab",
+      local.UNSAFE_className,
+      local.class,
+      mergeStyles(
+        tab({
+          ...renderProps,
+          orientation: context.orientation,
+          density: context.density,
+          variant: context.variant,
+          isLabelHidden: labelHidden(),
+        }),
+        local.styles,
+      ),
+    ]
+      .filter(Boolean)
+      .join(" ");
+  const textContextValue = {
+    id: contentId,
+    get styles() {
+      return tabText(textStyleState()) as StyleString;
+    },
+    "data-rsp-slot": "text",
+  };
+  const iconContextValue = {
+    slot: "icon",
+    render: centerBaseline({ slot: "icon", styles: iconRenderStyles }),
+    styles: iconStyles,
+  };
+  // Glasselated rail rows carry a count pill (<NotificationBadge value={n} />):
+  // slot it after icon and label and park it flush right.
+  const badgeContextValue = {
+    styles: tabBadgeStyles as StyleString,
+  };
+
+  function TabContent(renderProps: TabRenderProps): JSX.Element {
+    function ResolvedTabContent(): JSX.Element {
+      // Read `local.children` exactly once. On the server every access to a props-children
+      // getter re-instantiates any component it holds (e.g. <Text>), whereas the client
+      // memoizes after the first read. Reading twice (a render-prop probe plus the value) makes
+      // the server emit one extra element than the client, desynchronizing Solid's hydration-key
+      // counter and aborting hydration for the entire route. One read keeps both sides equal.
+      const rawChildren = local.children;
+      const isRenderProp =
+        typeof rawChildren === "function" &&
+        (rawChildren as (...args: unknown[]) => JSX.Element).length > 0;
+      const contentValue = isRenderProp
+        ? (rawChildren as (renderProps: TabRenderProps) => JSX.Element)(renderProps)
+        : rawChildren;
+      const value = resolveChildAccessor(contentValue);
+
+      return typeof value === "string" ? (
+        <span id={contentId} class={tabText(textStyleState())} data-rsp-slot="text">
+          {value}
+        </span>
+      ) : (
+        value
+      );
+    }
+
+    return (
+      <>
+        <Show when={context.orientation !== "vertical" && context.variant !== "pill"}>
+          <SelectionIndicator
+            class={tabIndicator({
+              orientation: context.orientation,
+              density: context.density,
+              isDisabled: renderProps.isDisabled,
+            })}
+            data-rsp-slot="selection-indicator"
+          />
+        </Show>
+        <Show when={context.orientation === "vertical" && context.variant === "line"}>
+          <span
+            aria-hidden="true"
+            data-rsp-slot="tab-caret"
+            class={tabCaret({
+              orientation: context.orientation,
+              density: context.density,
+              variant: context.variant,
+              isDisabled: renderProps.isDisabled,
+              isHovered: renderProps.isHovered,
+              isSelected: renderProps.isSelected,
+            })}
+          >
+            {">"}
+          </span>
+        </Show>
+        <IconContext.Provider value={iconContextValue}>
+          <TextContext.Provider value={textContextValue}>
+            <NotificationBadgeContext.Provider value={badgeContextValue}>
+              <ResolvedTabContent />
+            </NotificationBadgeContext.Provider>
+          </TextContext.Provider>
+        </IconContext.Provider>
+      </>
+    );
+  }
+
+  return (
+    <HeadlessTab
+      {...headlessProps}
+      aria-labelledby={
+        [labelHidden() ? contentId : undefined, headlessProps["aria-labelledby"]]
+          .filter(Boolean)
+          .join(" ") || undefined
+      }
+      slot={local.slot ?? undefined}
+      class={className}
+      style={local.UNSAFE_style}
+    >
+      {(renderProps) => <TabContent {...renderProps} />}
+    </HeadlessTab>
+  );
+}
+
+/**
+ * A TabPanels groups TabPanel elements for compatibility with older composition.
+ */
+export function TabPanels(props: TabPanelsProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, [
+    "children",
+    "styles",
+    "UNSAFE_className",
+    "UNSAFE_style",
+    "class",
+    "slot",
+  ]);
+  const className = () =>
+    [
+      "solidaria-TabPanels",
+      local.UNSAFE_className,
+      local.class,
+      mergeStyles(tabPanels, local.styles),
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+  return (
+    <HeadlessTabPanels
+      {...headlessProps}
+      slot={local.slot ?? undefined}
+      class={className()}
+      style={local.UNSAFE_style}
+    >
+      {local.children}
+    </HeadlessTabPanels>
+  );
+}
+
+/**
+ * A TabPanel contains the content associated with a Tab.
+ */
+export function TabPanel(props: TabPanelProps): JSX.Element {
+  const context = useContext(InternalTabsContext);
+  const state = useContext(HeadlessTabsStateContext);
+  const [local, headlessProps] = splitProps(props, [
+    "children",
+    "styles",
+    "UNSAFE_className",
+    "UNSAFE_style",
+    "class",
+    "slot",
+    "shouldForceMount",
+  ]);
+  const ariaProps = headlessProps as AriaTabPanelProps;
+  const { tabPanelProps, isSelected } = createTabPanel<unknown>(ariaProps, state);
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+  const isInert = () =>
+    Boolean(local.shouldForceMount && ariaProps.id !== undefined && !isSelected());
+  const isEntering = () => false;
+  const isExiting = () => false;
+  const className = (renderProps: TabPanelRenderProps) =>
+    [
+      "solidaria-TabPanel",
+      local.UNSAFE_className,
+      local.class,
+      mergeStyles(
+        tabPanel({
+          ...renderProps,
+          orientation: context.orientation,
+          density: context.density,
+        }),
+        local.styles,
+      ),
+    ]
+      .filter(Boolean)
+      .join(" ");
+  const renderValues = createMemo<TabPanelRenderProps>(() => ({
+    isSelected: isSelected(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isInert: isInert(),
+    isEntering: isEntering(),
+    isExiting: isExiting(),
+    state,
+  }));
+  const collapsedRenderProps = createMemo<TabPanelRenderProps>(() => ({
+    isSelected: true,
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isInert: false,
+    isEntering: false,
+    isExiting: false,
+    state,
+  }));
+  const activeRenderProps = () => (context.showTabs() ? renderValues() : collapsedRenderProps());
+  const shouldRenderCollapsedPanel = () => {
+    if (ariaProps.id === undefined) {
+      return state ? state.selectedKey() !== null : true;
+    }
+
+    return state?.selectedKey() === ariaProps.id;
+  };
+  const shouldRender = () => {
+    if (!context.showTabs()) {
+      return shouldRenderCollapsedPanel();
+    }
+    if (local.shouldForceMount) {
+      return true;
+    }
+    if (ariaProps.id === undefined) {
+      return state ? state.selectedKey() !== null : true;
+    }
+
+    return isSelected();
+  };
+  const renderedChildren = () => {
+    // Read `local.children` once per evaluation — see the note in Tab's ResolvedTabContent:
+    // a repeated props-children read re-instantiates child components on the server only and
+    // breaks hydration-key parity.
+    const rawChildren = local.children;
+    return typeof rawChildren === "function"
+      ? (rawChildren as (renderProps: TabPanelRenderProps) => JSX.Element)(activeRenderProps())
+      : rawChildren;
+  };
+  const menuLabelledBy = () =>
+    [context.menuButtonId, context.menuValueId].filter(Boolean).join(" ") || undefined;
+  const hasTabPanelSemantics = () => context.showTabs() && !isInert();
+
+  return (
+    <Show when={shouldRender()}>
+      <div
+        id={hasTabPanelSemantics() ? tabPanelProps.id : undefined}
+        role={context.showTabs() ? (isInert() ? undefined : tabPanelProps.role) : "group"}
+        aria-labelledby={
+          context.showTabs()
+            ? hasTabPanelSemantics()
+              ? tabPanelProps["aria-labelledby"]
+              : undefined
+            : menuLabelledBy()
+        }
+        aria-label={hasTabPanelSemantics() ? tabPanelProps["aria-label"] : undefined}
+        aria-describedby={hasTabPanelSemantics() ? tabPanelProps["aria-describedby"] : undefined}
+        tabIndex={context.showTabs() && isInert() ? undefined : tabPanelProps.tabIndex}
+        slot={local.slot ?? undefined}
+        class={className(activeRenderProps())}
+        style={local.UNSAFE_style}
+        onFocus={focusProps.onFocus}
+        onBlur={focusProps.onBlur}
+        data-focused={isFocused() || undefined}
+        data-focus-visible={isFocusVisible() || undefined}
+        inert={context.showTabs() && isInert() ? true : undefined}
+        data-inert={context.showTabs() && isInert() ? true : undefined}
+        data-entering={context.showTabs() && isEntering() ? true : undefined}
+        data-exiting={context.showTabs() && isExiting() ? true : undefined}
+        hidden={
+          context.showTabs() &&
+          ariaProps.id !== undefined &&
+          !isSelected() &&
+          !local.shouldForceMount
+            ? true
+            : undefined
+        }
+      >
+        {renderedChildren()}
+      </div>
+    </Show>
+  );
+}
+
+Tabs.List = TabList;
+Tabs.Tab = Tab;
+Tabs.Panels = TabPanels;
+Tabs.Panel = TabPanel;
+
+export { Collection } from "@proyecto-viviana/solidaria-components";
+export { Text } from "../text";
+export type { Key, KeyboardActivation, TabOrientation };