pixelize-native-library 1.0.7 → 1.2.1

package/lib/module/modules/modal/Modal.js

@@ -6,6 +6,12 @@
  * backdrop scrim dismisses it on press; the panel sits on `bg.surface` with `theme.radii.lg` and
  * `theme.elevation.lg`, capped to one of three closed widths (`size`).
  *
+ * Motion split: RN's own `animationType` owns the SURFACE fade (in AND out, natively, with no JS
+ * timer), and the global motion system (`core/motion`) owns the panel's own entrance lift. The exit
+ * is deliberately left to the native transition — a JS-timed exit would have to keep the `<Modal>`
+ * mounted past `visible`, widening the window in which iOS drops a sibling `<Modal>` presented while
+ * this one is dismissing.
+ *
  * Fully controlled: the caller owns `visible` and reacts to `onRequestClose`, which fires from the
  * backdrop press, the Android hardware back button, and — via `onAccessibilityEscape` on the panel
  * — iOS VoiceOver's two-finger-Z escape gesture. (RN's `<Modal>` only fires `onRequestClose` from a
@@ -19,20 +25,30 @@
  * `renderWebPortal` instead — see `ModalPortalContext.ts` for why. Every other case (native, or web
  * with no provider — the default `ModalPortalContext` value is `null`) renders through RN's own
  * `<Modal>`, byte-identical to before this mechanism existed.
+ *
+ * Physical-keyboard support is scoped to exactly that portal branch. `react-native-web`'s own
+ * `<Modal>` already ships Escape, a Tab trap and focus restore (`ModalContent`/`ModalFocusTrap`),
+ * so the RNModal path below must stay untouched — wiring the hooks there too would give the page
+ * two Escape listeners and two competing traps. The portal branch renders no `<RNModal>` at all,
+ * which is where all three silently went missing.
  */
 
-import { memo, useContext } from "react";
-import { Modal as RNModal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
-import { useReducedMotion } from "../../core/a11y/index.js";
-import { useTheme } from "../../theme/index.js";
+import { memo, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Modal as RNModal, Platform, Pressable, StyleSheet, View } from "react-native";
+import { useDismissOnEscape, useFocusTrap } from "../../core/a11y/keyboard";
+import { MOTION_TRANSFORM, useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { withAlpha } from "../../core/gradient/index.js";
+import { elevation, floatingBackground, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { Heading } from "../text/index.js";
 import { ModalPortalContext } from "./ModalPortalContext.js";
 import { renderWebPortal } from "./renderWebPortal";
-import { modalOverlayStructure, modalPanelStructure, resolveModalAnimationType, resolveModalPanelColors } from "./Modal.variants.js";
+import { modalOverlayStructure, modalPanelStructure, resolveModalAnimationType } from "./Modal.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Decorative dismiss scrim behind the panel — a design constant, not a role token: it is neither
-// text nor an interactive boundary, so WCAG's contrast minimums don't apply to it. Same
-// justification as Button's PRESS_SCRIM_DARK/LIGHT and Select's BACKDROP_SCRIM.
-const MODAL_BACKDROP = "#00000080";
+// Decorative dismiss scrim, not a role token — same reasoning Button's PRESS_SCRIM and Select's
+// BACKDROP_SCRIM record. Opacity is the shared `scrimOpacity` knob, not a locally-guessed hex.
+const MODAL_BACKDROP = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
 export const Modal = /*#__PURE__*/memo(function Modal({
   visible,
   onRequestClose,
@@ -42,43 +58,121 @@ export const Modal = /*#__PURE__*/memo(function Modal({
   testID
 }) {
   const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const panelColors = resolveModalPanelColors(theme.colors);
+  const motion = useMotion();
   const portalContainer = useContext(ModalPortalContext);
+  const panelRef = useRef(null);
+  const portalled = Platform.OS === "web" && portalContainer != null;
+  useDismissOnEscape(portalled && visible, onRequestClose);
+  useFocusTrap(panelRef, portalled && visible);
+
+  // `mounted` only gates the web-portal render below — the RNModal branch keeps handing `visible`
+  // straight to RN's own <Modal>, which still owns that surface's native fade in and out.
+  const [mounted, setMounted] = useState(visible);
+  const mountedRef = useRef(mounted);
+  mountedRef.current = mounted;
+  const enter = useAnimatedValue(visible ? 1 : 0);
+  const running = useRef(null);
+  const unmountTimer = useRef(null);
+  useEffect(() => {
+    const clearUnmount = () => {
+      if (unmountTimer.current !== null) {
+        clearTimeout(unmountTimer.current);
+        unmountTimer.current = null;
+      }
+    };
+    running.current?.stop();
+    clearUnmount();
+    if (visible) {
+      setMounted(true);
+      if (!motion.enabled) {
+        enter.setValue(1);
+        return;
+      }
+      enter.setValue(0);
+      running.current = motion.timing(enter, 1, {
+        easing: "decelerate"
+      });
+      running.current.start();
+      return;
+    }
+    if (!mountedRef.current) return;
+    const exitMs = motion.duration("fast");
+    if (!motion.enabled || exitMs === 0) {
+      enter.setValue(0);
+      setMounted(false);
+      return;
+    }
+    running.current = motion.timing(enter, 0, {
+      duration: "fast",
+      easing: "accelerate"
+    });
+    running.current.start();
+    unmountTimer.current = setTimeout(() => {
+      unmountTimer.current = null;
+      setMounted(false);
+    }, exitMs);
+    return clearUnmount;
+  }, [visible, motion, enter]);
+  useEffect(() => () => {
+    running.current?.stop();
+    if (unmountTimer.current !== null) clearTimeout(unmountTimer.current);
+  }, []);
+  const floatingStyle = useMemo(() => {
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.lg);
+    void theme.elevatedSurfaces;
+    return {
+      backgroundColor: floatingBackground(theme, "lg"),
+      ...floatingSurfaceStyle(theme, "lg")
+    };
+  }, [theme]);
+  const panelStyle = useMemo(() => [modalPanelStructure(theme, {
+    size
+  }), floatingStyle, {
+    opacity: enter,
+    transform: [{
+      translateY: enter.interpolate({
+        inputRange: [0, 1],
+        outputRange: [motion.transform.offsetY, 0]
+      })
+    }]
+  }], [theme, size, floatingStyle, enter, motion.transform.offsetY]);
+  const backdropStyle = useMemo(() => [styles.backdrop, {
+    opacity: enter
+  }], [enter]);
+  const titleBlock = title !== undefined ? /*#__PURE__*/_jsx(Heading, {
+    variant: "h3",
+    style: {
+      marginBottom: theme.space[3]
+    },
+    children: title
+  }) : null;
   const overlay = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Pressable, {
       testID: testID ? `${testID}-backdrop` : undefined,
       accessible: false,
-      style: [StyleSheet.absoluteFill, {
-        backgroundColor: MODAL_BACKDROP
-      }],
-      onPress: onRequestClose
+      tabIndex: -1,
+      style: StyleSheet.absoluteFill,
+      onPress: onRequestClose,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: backdropStyle
+      })
     }), /*#__PURE__*/_jsx(View, {
       style: modalOverlayStructure(theme),
       pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsxs(View, {
+      children: /*#__PURE__*/_jsxs(Animated.View, {
+        ref: panelRef,
         testID: testID ? `${testID}-panel` : undefined,
         accessibilityViewIsModal: true,
         onAccessibilityEscape: onRequestClose,
-        style: [modalPanelStructure(theme, {
-          size
-        }), {
-          backgroundColor: panelColors.background
-        }],
-        children: [title !== undefined && /*#__PURE__*/_jsx(Text, {
-          accessibilityRole: "header",
-          style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-            fontSize: theme.fontSizes.lg,
-            color: panelColors.title,
-            marginBottom: theme.space[3]
-          }],
-          children: title
-        }), children]
+        style: panelStyle,
+        children: [titleBlock, children]
       })
     })]
   });
-  if (Platform.OS === "web" && portalContainer != null) {
-    if (!visible) return null;
+  if (portalled) {
+    if (!mounted) return null;
     // RN's own <Modal> supplies a `position: fixed`/full-screen ancestor for `overlay`'s children
     // to size against (see ModalPortalContext.ts) — reproduce just that sizing here (never touching
     // the shared `modalOverlayStructure`/`modalPanelStructure` resolvers the RNModal path below
@@ -93,9 +187,17 @@ export const Modal = /*#__PURE__*/memo(function Modal({
   return /*#__PURE__*/_jsx(RNModal, {
     visible: visible,
     transparent: true,
-    animationType: resolveModalAnimationType(reducedMotion),
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
+    animationType: resolveModalAnimationType(!motion.enabled),
     onRequestClose: onRequestClose,
     children: overlay
   });
 });
+const styles = StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: MODAL_BACKDROP
+  }
+});
 //# sourceMappingURL=Modal.js.map

package/lib/module/modules/modal/Modal.variants.js

@@ -69,8 +69,8 @@ export const modalPanelStructure = createThemedVariants(theme => ({
     width: "100%",
     maxHeight: "92%",
     borderRadius: theme.radii.lg,
-    padding: theme.space[5],
-    ...theme.elevation.lg
+    borderCurve: "continuous",
+    padding: theme.space[5]
   },
   variants: {
     size: {

package/lib/module/modules/more-items/MODULE.md

@@ -0,0 +1,77 @@
+# more-items/ — a "+N more" overflow affordance
+
+`MoreItems` is a `Pressable` "+N more" badge (with optional leading text) that opens a `Modal` sheet
+listing the hidden items, each with an optional tone dot. It is the overflow tail for any capped
+row — assignees, tags, labels — so a caller renders the first few itself and hands the rest here.
+
+Fully controlled and store-agnostic: `items` and `moreCount` come from the host, and the component
+owns nothing but its open/closed state.
+
+## Files
+
+| File | Role |
+|------|------|
+| `MoreItems.tsx` | The component: trigger, `Modal` sheet, and the memo'd `MoreItemsRow`. |
+| `MoreItems.variants.ts` | Pure `resolveMoreItemsCount` / `resolveMoreItemsDotColor` (tone reuses `Badge`'s tone table) + the themed structural resolvers. No React. |
+| `index.ts` | Public surface: `MoreItems`, `MoreItemsProps`, `MoreItemsEntry`. |
+| `__tests__/MoreItems.test.ts` | Pure: the count fallback (`moreCount` wins over `items.length`). |
+| `__tests__/MoreItems.render.test.tsx` | Render: the trigger opens the sheet, the entries show, the real rendered touch-target size, label-in-name, modal semantics, and the hidden tone dot. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `items` | `readonly MoreItemsEntry[]` | — | `{ id, label, tone? }`; `tone` is a `BadgeTone`, defaulting to `accent`. |
+| `moreCount` | `number` | `items.length` | The number on the badge when it differs from the list length. |
+| `triggerText` | `string` | — | Optional text before the badge. Rendered alone when the count is ≤0. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | Trigger gets it directly. Also seeds `${testID}-sheet`, `${testID}-backdrop`, `${testID}-list` and `${testID}-row-${item.id}` (+ `-dot` under that). |
+
+Renders `null` when the count is ≤0 and there is no `triggerText` — nothing to overflow.
+
+## Accessibility
+
+- **Touch target (WCAG 2.5.5 / 2.5.8)** — the trigger carries `minHeight: 44` (this library's
+  floor). It is a standalone node with no neighbouring target to overlap, so the floor is real
+  height via `minHeight`, not `hitSlop` expansion the way `Button`'s shorter sizes reach it.
+- **Android touch feedback** — the trigger carries `android_ripple` (`rippleColor(theme.mode)`,
+  `borderless: false`), gated on `Platform.OS === "android"`. The scrim `Pressable` gets none — it is
+  the same `accessible={false}` decoy described under Modal semantics below, not a real press target.
+- **Label in Name (WCAG 2.5.3)** — the accessible name is built to CONTAIN the visible text
+  (`"${triggerText} +${count} more"`, or just `"+${count} more"` with no leading text), not a
+  separately-worded `"${count} more items"`. Voice control says what it reads; the old name shared no
+  full word with what was on screen.
+- **Modal semantics** — the sheet panel carries `accessibilityViewIsModal` + `onAccessibilityEscape`,
+  the same pair every other overlay in this library gives its panel, and an `accessibilityLabel`
+  matching the trigger's name. The scrim `Pressable` is `accessible={false}` + `tabIndex={-1}` so it
+  doesn't surface as an unlabelled full-screen button ahead of the sheet.
+- **Colour as sole carrier (WCAG 1.4.1)** — a row's tone dot has no text equivalent for its colour, so
+  it is `accessibilityElementsHidden` + `importantForAccessibility="no-hide-descendants"`; the row
+  itself is one `accessible` node with `accessibilityRole="text"` reading only the label.
+
+## Performance contract
+
+- The sheet's list is `core/list`'s `VirtualList`, not a `ScrollView` + `.map()`: `items` is
+  caller-supplied and unbounded, so a long overflow list would otherwise mount every row at once.
+  **No `itemHeight`** is passed — a row's height is text-driven (it grows with the OS font scale),
+  so a fixed `getItemLayout` would mis-position the scroll offset.
+- `MoreItemsRow` is extracted + `React.memo`'d; `renderItem`/`keyExtractor` are `useCallback`s.
+- Every `*Structure(theme)` result, `resolveMoreItemsDotColor` call and style array literal is
+  `useMemo`'d on `[theme]` (plus `[item.tone]` in the row) — a fresh object per render defeats the
+  row's `memo`.
+
+## Motion (`core/motion` only — never a local duration)
+
+- **Press** — the trigger uses `usePressMotion`, applied to an inner `Animated.View` so the
+  consumer's `style` stays on the outermost node.
+- **Sheet** — `useEnterExit(open)` on the panel; the `Modal` keeps `visible={open}` with
+  `animationType="none"` so the library owns the reveal and the sheet fully unmounts when closed.
+- Rows carry no motion of their own: they are not interactive, and per-row animation must never run
+  during scroll.
+
+## Known gaps
+
+- Rows are display-only — no press/selection. A selectable overflow list would be a different
+  component (`Select`/`Menu`), not a prop added here.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.

package/lib/module/modules/more-items/MoreItems.js

@@ -0,0 +1,168 @@
+"use strict";
+
+/**
+ * MoreItems — "+N more" overflow affordance opening a sheet of hidden items (avatars, tags, etc.).
+ */
+
+import { memo, useCallback, useMemo, useState } from "react";
+import { Animated, Modal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { VirtualList } from "../../core/list/index.js";
+import { useEnterExit, usePressMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
+import { moreItemsBadgeStructure, moreItemsDotStructure, moreItemsOverlayStructure, moreItemsRowStructure, moreItemsSheetStructure, moreItemsTriggerContentStructure, moreItemsTriggerStructure, resolveMoreItemsCount, resolveMoreItemsDotColor } from "./MoreItems.variants.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const BACKDROP = "#00000080";
+const MoreItemsRow = /*#__PURE__*/memo(function MoreItemsRow({
+  item,
+  theme,
+  testID
+}) {
+  const rowStructure = useMemo(() => moreItemsRowStructure(theme), [theme]);
+  const dotStyle = useMemo(() => [moreItemsDotStructure(theme), {
+    backgroundColor: resolveMoreItemsDotColor(theme.colors, item.tone)
+  }], [theme, item.tone]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.fg.muted,
+    flex: 1
+  }], [theme]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    accessible: true,
+    accessibilityRole: "text",
+    style: rowStructure,
+    children: [/*#__PURE__*/_jsx(View, {
+      testID: testID === undefined ? undefined : `${testID}-dot`,
+      style: dotStyle,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants"
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: labelStyle,
+      children: item.label
+    })]
+  });
+});
+export const MoreItems = /*#__PURE__*/memo(function MoreItems({
+  items,
+  moreCount,
+  triggerText,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const press = usePressMotion();
+  const sheetMotion = useEnterExit(open);
+  const count = resolveMoreItemsCount(moreCount, items.length);
+  const openSheet = useCallback(() => setOpen(true), []);
+  const closeSheet = useCallback(() => setOpen(false), []);
+  const emptyTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default
+  }], [theme]);
+  const triggerStyle = useMemo(() => [moreItemsTriggerStructure(theme), style], [theme, style]);
+  const triggerContentStructure = useMemo(() => moreItemsTriggerContentStructure(theme), [theme]);
+  const triggerTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.fg.default,
+    flexShrink: 1
+  }], [theme]);
+  const badgeStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.semibold), moreItemsBadgeStructure(theme), {
+    color: theme.colors.accent.text,
+    backgroundColor: theme.colors.accent.subtle
+  }], [theme]);
+  const overlayStructure = useMemo(() => moreItemsOverlayStructure(theme), [theme]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
+  const sheetStyle = useMemo(() => [moreItemsSheetStructure(theme), {
+    backgroundColor: theme.colors.bg.surface
+  }], [theme]);
+
+  // WCAG 2.5.3: the accessible name must CONTAIN the visible text, or a voice-control user saying
+  // what they can read ("tap plus three more") never activates the trigger.
+  const accessibleName = triggerText === undefined ? `+${count} more` : `${triggerText} +${count} more`;
+  const keyExtractor = useCallback(item => item.id, []);
+  const renderItem = useCallback(({
+    item
+  }) => /*#__PURE__*/_jsx(MoreItemsRow, {
+    item: item,
+    theme: theme,
+    testID: testID === undefined ? undefined : `${testID}-row-${item.id}`
+  }), [theme, testID]);
+  if (count <= 0) {
+    return triggerText ? /*#__PURE__*/_jsx(Text, {
+      style: emptyTextStyle,
+      children: triggerText
+    }) : null;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      testID: testID,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibleName,
+      accessibilityHint: "Opens the full list",
+      onPress: openSheet,
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      android_ripple: androidRipple,
+      style: triggerStyle,
+      children: /*#__PURE__*/_jsxs(Animated.View, {
+        style: [triggerContentStructure, press.style],
+        children: [triggerText !== undefined && /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: triggerTextStyle,
+          children: triggerText
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: badgeStyle,
+          children: ["+", count, " more"]
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(Modal, {
+      visible: open,
+      transparent: true,
+      animationType: "none",
+      onRequestClose: closeSheet,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        testID: testID === undefined ? undefined : `${testID}-backdrop`
+        // Otherwise the scrim is an unlabelled full-screen button sitting ahead of the sheet.
+        ,
+        accessible: false,
+        tabIndex: -1,
+        style: StyleSheet.absoluteFill,
+        onPress: closeSheet,
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.backdrop
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: overlayStructure,
+        pointerEvents: "box-none",
+        children: /*#__PURE__*/_jsx(Animated.View, {
+          testID: testID ? `${testID}-sheet` : undefined
+          // The modal-semantics pair every other overlay in this library gives its panel, plus a
+          // name: the sheet had neither, so VoiceOver could wander into the row behind it.
+          ,
+          accessibilityViewIsModal: true,
+          onAccessibilityEscape: closeSheet,
+          accessibilityLabel: accessibleName,
+          style: [sheetStyle, sheetMotion.style],
+          children: /*#__PURE__*/_jsx(VirtualList, {
+            data: items,
+            keyExtractor: keyExtractor,
+            renderItem: renderItem,
+            testID: testID === undefined ? undefined : `${testID}-list`
+          })
+        })
+      })]
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: BACKDROP
+  }
+});
+//# sourceMappingURL=MoreItems.js.map

package/lib/module/modules/more-items/MoreItems.variants.js

@@ -0,0 +1,83 @@
+"use strict";
+
+import { createThemedVariants } from "../../core/style/index.js";
+import { resolveBadgeTone } from "../badge/Badge.variants.js";
+export function resolveMoreItemsCount(moreCount, itemsLength) {
+  return moreCount ?? itemsLength;
+}
+
+/** Tone dot beside each overflow label. */
+export const MORE_ITEMS_DOT_SIZE = 8;
+
+/** The sheet never grows past this — the list inside it scrolls (and virtualizes). */
+export const MORE_ITEMS_SHEET_MAX_HEIGHT = 280;
+
+/**
+ * 44dp is Apple's HIG minimum and WCAG 2.5.5 (AAA); it comfortably exceeds 2.5.8's 24×24 (AA). The
+ * trigger reaches it with `minHeight` rather than `hitSlop`: it is a standalone node with no
+ * neighbouring target to overlap, and a slop-expanded rectangle would still leave a ~22dp visual
+ * control that misses under an unsteady finger.
+ */
+export const MIN_TOUCH_TARGET = 44;
+export const moreItemsTriggerStructure = createThemedVariants(_theme => ({
+  base: {
+    maxWidth: 250,
+    minHeight: MIN_TOUCH_TARGET,
+    justifyContent: "center"
+  }
+}));
+
+/** The trigger's animated layer: press motion moves the content, never the outer layout box. */
+export const moreItemsTriggerContentStructure = createThemedVariants(_theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center"
+  }
+}));
+
+/** Overflow-list row. Height is text-driven (font scaling), so the list gets no fixed itemHeight. */
+export const moreItemsRowStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: theme.space[2],
+    paddingVertical: theme.space[1]
+  }
+}));
+export const moreItemsDotStructure = createThemedVariants(theme => ({
+  base: {
+    width: MORE_ITEMS_DOT_SIZE,
+    height: MORE_ITEMS_DOT_SIZE,
+    borderRadius: theme.radii.full,
+    borderCurve: "continuous"
+  }
+}));
+export const moreItemsOverlayStructure = createThemedVariants(theme => ({
+  base: {
+    flex: 1,
+    justifyContent: "center",
+    padding: theme.space[4]
+  }
+}));
+export const moreItemsSheetStructure = createThemedVariants(theme => ({
+  base: {
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous",
+    padding: theme.space[3],
+    maxHeight: MORE_ITEMS_SHEET_MAX_HEIGHT
+  }
+}));
+export const moreItemsBadgeStructure = createThemedVariants(theme => ({
+  base: {
+    marginLeft: theme.space[1],
+    paddingHorizontal: theme.space[2],
+    paddingVertical: 2,
+    borderRadius: theme.radii.full,
+    borderCurve: "continuous",
+    fontSize: theme.fontSizes.xs
+  }
+}));
+export function resolveMoreItemsDotColor(colors, tone = "accent") {
+  return resolveBadgeTone(colors, tone).text;
+}
+//# sourceMappingURL=MoreItems.variants.js.map

package/lib/module/modules/more-items/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { MoreItems } from "./MoreItems.js";
+//# sourceMappingURL=index.js.map