@multiplatform.one/components 6.6.0 → 7.0.0

package/src/layouts/sidebar.tsx

@@ -1,11 +1,17 @@
 import {
+  ensureFocusVisibleRing,
+  ensureKeyboardModalityTracking,
+  getGroupPosition,
   hairline,
   hairlineWidth,
+  stackRadiusProps,
   useReadableTextOn,
   useResolvedKnobs,
+  wasKeyboardFocus,
 } from "@multiplatform.one/theme";
 import type React from "react";
-import { Group, Label, ListItem, ScrollView, Separator, Text, YStack, isWeb } from "tamagui";
+import { Fragment, useId, useState } from "react";
+import { Label, ScrollView, Separator, Text, XStack, YStack, isWeb } from "tamagui";
 import { componentColors } from "../componentColors";
 
 export interface SidebarSection {
@@ -31,10 +37,17 @@ export interface SidebarItem {
 export interface SidebarProps {
   sections: SidebarSection[];
   width?: number;
+  /** Accessible name for the navigation landmark. */
+  "aria-label"?: string;
 }
 
-export function Sidebar({ sections, width = 250 }: SidebarProps) {
+export function Sidebar({
+  sections,
+  width = 250,
+  "aria-label": ariaLabel = "Sidebar",
+}: SidebarProps) {
   const { knobProps } = useResolvedKnobs();
+  const headingId = useId();
   // UX-P02 / Axiom 15: the active row paints `$accentBackground`, so its label
   // and count must sit on the accent fill with a luminance-computed foreground
   // (paper/ink whichever reads) — the scheme `$color` ink measured 2.59:1 on
@@ -44,13 +57,25 @@ export function Sidebar({ sections, width = 250 }: SidebarProps) {
   // token); the container contributes none, so row highlights and separators
   // run edge-to-edge across the panel.
   const rowPad = knobProps.panelPadding.padding;
+  // LC-71: Tamagui maps `focusVisibleStyle` onto mouse :focus; track keyboard
+  // modality and paint the inset ring ourselves (ToggleGroup precedent).
+  const [kbFocusKey, setKbFocusKey] = useState<string | null>(null);
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
+
   return (
     <YStack
+      role="navigation"
+      aria-label={ariaLabel}
       width={width}
+      flex={1}
+      alignSelf="stretch"
+      height="100%"
+      minHeight={0}
+      // SF-CARD fill without a four-side control border (R-NONE). The end
+      // hairline is the panel divider (Axiom 15), stretched to the rail height.
+      {...knobProps.surface}
+      borderWidth={0}
       borderColor="$borderColor"
-      // Logical end edge so the divider mirrors in RTL; tamagui
-      // borderEndWidth does not compile to working CSS on web (SB-M-1215).
-      // Hairline: panel edge is a divider, not a control border (Axiom 15).
       {...(isWeb
         ? {
             borderInlineEndWidth: hairlineWidth,
@@ -59,95 +84,163 @@ export function Sidebar({ sections, width = 250 }: SidebarProps) {
           }
         : { borderEndWidth: hairlineWidth })}
     >
-      <ScrollView>
+      <ScrollView flex={1}>
         <YStack {...knobProps.panelPadding} paddingHorizontal={0} {...knobProps.gapLg}>
-          {sections.map((section, sectionIdx) => (
-            <YStack key={section.title ?? sectionIdx} {...knobProps.gap}>
-              {section.title ? (
-                <Label
-                  size={knobProps.sizeToken}
-                  fontSize="$2"
-                  fontWeight="600"
-                  textTransform="uppercase"
-                  color={componentColors.text.muted}
-                  // Align with row text (LC-02): the inset rides as MARGIN so
-                  // the caption's box starts at the shared row text edge —
-                  // padding-based insets left the box at the panel edge, which
-                  // is the exact anti-pattern the rule's origin fixed. Drop the
-                  // size-derived control height — a section caption should not
-                  // consume a 44px row.
-                  paddingHorizontal={0}
-                  marginHorizontal={rowPad}
-                  height="auto"
-                  lineHeight="$1"
-                >
-                  {section.title}
-                </Label>
-              ) : null}
+          {sections.map((section, sectionIdx) => {
+            const titleId = section.title ? `${headingId}-${sectionIdx}` : undefined;
+            return (
+              <YStack
+                key={section.title ?? sectionIdx}
+                role="group"
+                aria-labelledby={titleId}
+                {...knobProps.gap}
+                width="100%"
+              >
+                {section.title ? (
+                  <Label
+                    id={titleId}
+                    size={knobProps.sizeToken}
+                    fontSize="$2"
+                    fontWeight="600"
+                    textTransform="uppercase"
+                    color={componentColors.text.muted}
+                    // Align with row text (LC-02): the inset rides as MARGIN so
+                    // the caption's box starts at the shared row text edge —
+                    // padding-based insets left the box at the panel edge, which
+                    // is the exact anti-pattern the rule's origin fixed. Drop the
+                    // size-derived control height — a section caption should not
+                    // consume a 44px row.
+                    paddingHorizontal={0}
+                    marginHorizontal={rowPad}
+                    height="auto"
+                    lineHeight="$1"
+                  >
+                    {section.title}
+                  </Label>
+                ) : null}
 
-              {/* Section group seam follows the radius knob (radius channel
-                  only): tamagui Group's built-in $4 default held a 9px arc
-                  at borderRadius:none (UX-P06 "Sidebar GroupFrames br=9"). */}
-              <Group borderRadius={knobProps.borderRadius.borderRadius}>
-                {section.items.map((item, itemIdx) => (
-                  <Group.Item key={item.label}>
-                    {itemIdx > 0 && <Separator {...hairline.line} />}
-                    <ListItem
-                      title={item.label}
-                      subTitle={item.subTitle}
-                      icon={item.icon as any}
-                      iconAfter={
-                        item.count !== undefined ? (
-                          <Text
-                            color={item.active && onAccent ? onAccent : componentColors.text.muted}
-                            fontSize="$2"
-                          >
-                            ({item.count})
-                          </Text>
-                        ) : undefined
-                      }
-                      size={knobProps.sizeToken}
-                      // SP-EDGE: the row owns its inset (space knob), on top
-                      // of a full-panel-width frame.
-                      paddingHorizontal={rowPad}
-                      // Item rows are R-SCALE (spec Sidebar): the hover /
-                      // active row surface rounds with the radius knob.
-                      borderRadius={knobProps.borderRadius.borderRadius}
-                      theme={item.active ? "active" : undefined}
-                      backgroundColor={item.active ? "$accentBackground" : "transparent"}
-                      // Label rides the accent fill: luminance-computed fg
-                      // (ListItem shares `color` with its title via context).
-                      {...(item.active && onAccent ? { color: onAccent } : undefined)}
-                      hoverStyle={{ backgroundColor: componentColors.surface.background }}
-                      pressStyle={{ backgroundColor: componentColors.interactive.background }}
-                      cursor={item.onPress ? "pointer" : "default"}
-                      onPress={item.onPress}
-                      {...(item.onPress
-                        ? {
-                            role: "button" as const,
-                            tabIndex: 0,
-                            focusVisibleStyle: {
-                              outlineColor: "$outlineColor",
-                              outlineWidth: 2,
-                              outlineStyle: "solid" as const,
-                              outlineOffset: -2,
-                            },
-                            onKeyDown: ((e: React.KeyboardEvent) => {
-                              if (e.key === "Enter" || e.key === " ") {
-                                e.preventDefault();
-                                item.onPress?.();
+                <YStack width="100%">
+                  {section.items.map((item, itemIdx) => {
+                    const position = getGroupPosition(itemIdx, section.items.length);
+                    const corners = stackRadiusProps(position, knobProps.borderRadius.borderRadius);
+                    const itemKey = `${sectionIdx}:${String(item.value ?? item.label)}`;
+                    const ink = item.active && onAccent ? onAccent : componentColors.text.primary;
+                    const metaInk = item.active && onAccent ? onAccent : componentColors.text.muted;
+                    const kbFocused = kbFocusKey === itemKey;
+                    const pressable = Boolean(item.onPress);
+                    const kbRing = kbFocused
+                      ? ensureFocusVisibleRing({
+                          outlineOffset: -2,
+                          outlineColor: item.active && onAccent ? onAccent : "$outlineColor",
+                        })
+                      : null;
+                    return (
+                      <Fragment key={itemKey}>
+                        {itemIdx > 0 ? (
+                          <Separator width="100%" alignSelf="stretch" {...hairline.line} />
+                        ) : null}
+                        <XStack
+                          data-group-position={position}
+                          data-sidebar-row="true"
+                          data-active={item.active ? true : undefined}
+                          aria-current={item.active ? "page" : undefined}
+                          alignItems="center"
+                          width="100%"
+                          alignSelf="stretch"
+                          minHeight={knobProps.sizeToken as any}
+                          paddingHorizontal={rowPad}
+                          overflow="hidden"
+                          {...knobProps.gap}
+                          {...corners}
+                          backgroundColor={item.active ? "$accentBackground" : "transparent"}
+                          hoverStyle={{
+                            backgroundColor: item.active
+                              ? "$accentBackground"
+                              : componentColors.surface.background,
+                            ...corners,
+                          }}
+                          pressStyle={{
+                            backgroundColor: item.active
+                              ? "$accentBackground"
+                              : componentColors.interactive.background,
+                            ...corners,
+                          }}
+                          cursor={pressable ? "pointer" : "default"}
+                          userSelect="none"
+                          onPress={item.onPress}
+                          {...(knobProps.transition
+                            ? { transition: knobProps.transition }
+                            : undefined)}
+                          {...(pressable
+                            ? {
+                                role: "button" as const,
+                                tabIndex: 0,
+                                outlineWidth: 0,
+                                focusStyle: { outlineWidth: 0 },
+                                // LC-71: rest and mouse-focus paint no ring.
+                                // Keyboard-origin ring also rides focusVisibleStyle
+                                // so Tamagui cannot zero outlineWidth on :focus-visible.
+                                focusVisibleStyle: kbRing ?? { outlineWidth: 0 },
+                                ...(kbRing ?? { outlineWidth: 0 }),
+                                onFocus: () => {
+                                  if (wasKeyboardFocus()) setKbFocusKey(itemKey);
+                                },
+                                onBlur: () => {
+                                  setKbFocusKey((prev) => (prev === itemKey ? null : prev));
+                                },
+                                onKeyDown: ((e: React.KeyboardEvent) => {
+                                  if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    item.onPress?.();
+                                  }
+                                }) as unknown as () => void,
                               }
-                            }) as unknown as () => void,
-                          }
-                        : undefined)}
-                    />
-                  </Group.Item>
-                ))}
-              </Group>
-
-              {sectionIdx < sections.length - 1 && <Separator {...hairline.line} />}
-            </YStack>
-          ))}
+                            : undefined)}
+                        >
+                          {item.icon ? (
+                            // `color` sets the icon's inherited color; Tamagui
+                            // forwards it at runtime but the RN-flavored View
+                            // prop type omits it (house Record cast).
+                            <YStack
+                              flexShrink={0}
+                              {...({ color: metaInk } as Record<string, unknown>)}
+                            >
+                              {item.icon}
+                            </YStack>
+                          ) : null}
+                          <YStack flex={1} minWidth={0} justifyContent="center">
+                            <Text
+                              {...knobProps.body}
+                              color={ink}
+                              fontWeight={item.active ? "600" : "400"}
+                              numberOfLines={1}
+                            >
+                              {item.label}
+                            </Text>
+                            {item.subTitle ? (
+                              <Text
+                                {...knobProps.body}
+                                color={metaInk}
+                                fontSize="$2"
+                                numberOfLines={1}
+                              >
+                                {item.subTitle}
+                              </Text>
+                            ) : null}
+                          </YStack>
+                          {item.count !== undefined ? (
+                            <Text color={metaInk} fontSize="$2" flexShrink={0}>
+                              ({item.count})
+                            </Text>
+                          ) : null}
+                        </XStack>
+                      </Fragment>
+                    );
+                  })}
+                </YStack>
+              </YStack>
+            );
+          })}
         </YStack>
       </ScrollView>
     </YStack>

package/src/layouts/tags-trigger.spec.tsx

@@ -1,11 +1,11 @@
 // Regression test for the Tags "Add Tag" trigger scale (post Tags→Chip
 // consolidation): the trigger previously rendered as a Tamagui Button whose
-// size token sets a fixed field height ($4 → 44px) — 2x the content-driven
-// Chip pill (22px). The visual pill shares ChipFrame/ChipText, so its
-// padding/font atomic classes must match the pills exactly and it must not
-// carry a fixed height class. Since the D-02 press-floor rollout the
-// interactive trigger is a transparent wrapper floored at 44px (house
-// pressTarget* channel); the chip-scale pill nests inside it.
+// size token set a fixed field height ($4 → 44px) — 2x the Chip pill. The
+// visual pill shares ChipFrame/ChipText, so its padding/font/height atomic
+// classes must match the pills exactly (LC-65 size recipe). Since the D-02
+// press-floor rollout the interactive trigger is a transparent wrapper
+// floored at 44px via the house pressTarget* channel; the chip-scale pill
+// nests inside it.
 // jsdom's getComputedStyle cannot cascade Tamagui's class-based CSS, so this
 // asserts on the atomic classes (same approach as timeline-radius.spec.tsx).
 import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
@@ -56,12 +56,12 @@ describe("Tags Add Tag trigger (chip-scale)", () => {
     expect(classesByPrefix(pill, paddingPrefixes)).toEqual(classesByPrefix(chip, paddingPrefixes));
   });
 
-  it("trigger pill has no fixed height class (content-driven like the chip)", () => {
+  it("trigger pill height class matches the chip pill (size recipe)", () => {
     renderTags();
     const chip = chipFrameOf(screen.getByText("urgent"));
     const pill = triggerPillOf(screen.getByLabelText("Add Tag"));
     expect(classesByPrefix(pill, ["_h-"])).toEqual(classesByPrefix(chip, ["_h-"]));
-    expect(classesByPrefix(pill, ["_h-"])).toEqual([]);
+    expect(classesByPrefix(pill, ["_h-"]).length).toBeGreaterThan(0);
   });
 
   it("trigger wrapper carries the D-02 44px press-floor (minHeight class)", () => {