pixelize-native-library 1.0.7 → 1.2.1

package/lib/module/modules/filter-sheet/FilterChip.js

@@ -15,10 +15,12 @@
  * concept), not a disabled-looking control.
  */
 
-import { memo } from "react";
-import { Pressable, Text, View } from "react-native";
+import { memo, useMemo } from "react";
+import { Animated, Platform, Pressable, Text, View } from "react-native";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
+import { usePressMotion } from "../../core/motion/index.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
+import { useTheme } from "../../theme/hooks.js";
 import { FILTER_CHIP_HIT_SLOP, FILTER_CHIP_ICON_SIZE, filterChipStructure, resolveFilterChipAccessibility, resolveFilterChipColors } from "./FilterSheet.variants.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
@@ -29,19 +31,29 @@ export const FilterChip = /*#__PURE__*/memo(function FilterChip({
   testID
 }) {
   const theme = useTheme();
-  const colors = resolveFilterChipColors(theme.colors);
+  const press = usePressMotion();
   const removable = onRemove !== undefined;
-  const a11y = resolveFilterChipAccessibility({
+  const colors = useMemo(() => resolveFilterChipColors(theme.colors), [theme.colors]);
+  const a11y = useMemo(() => resolveFilterChipAccessibility({
     label,
     removable
-  });
+  }), [label, removable]);
+  const chipStyle = useMemo(() => [filterChipStructure(theme), {
+    backgroundColor: colors.background,
+    borderColor: colors.border
+  }], [theme, colors]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
+    fontSize: theme.fontSizes.sm,
+    color: colors.text
+  }], [theme, colors]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Text, {
       numberOfLines: 1,
-      style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
-        fontSize: theme.fontSizes.sm,
-        color: colors.text
-      }],
+      style: labelStyle,
       children: label
     }), removable && /*#__PURE__*/_jsx(Icon, {
       name: "x",
@@ -55,10 +67,7 @@ export const FilterChip = /*#__PURE__*/memo(function FilterChip({
       testID: testID,
       accessible: a11y.accessible,
       accessibilityLabel: a11y.accessibilityLabel,
-      style: [filterChipStructure(theme), {
-        backgroundColor: colors.background,
-        borderColor: colors.border
-      }, style],
+      style: [chipStyle, style],
       children: content
     });
   }
@@ -68,12 +77,17 @@ export const FilterChip = /*#__PURE__*/memo(function FilterChip({
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: a11y.accessibilityLabel,
     onPress: onRemove,
+    onPressIn: press.onPressIn,
+    onPressOut: press.onPressOut,
     hitSlop: FILTER_CHIP_HIT_SLOP,
-    style: [filterChipStructure(theme), {
-      backgroundColor: colors.background,
-      borderColor: colors.border
+    android_ripple: androidRipple,
+    style: [chipStyle, {
+      overflow: "hidden"
     }, style],
-    children: content
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: press.style,
+      children: content
+    })
   });
 });
 //# sourceMappingURL=FilterChip.js.map

package/lib/module/modules/filter-sheet/FilterSheet.js

@@ -22,6 +22,8 @@
  */
 
 import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Animated } from "react-native";
+import { useEnterExit } from "../../core/motion/index.js";
 import { Drawer } from "../drawer/index.js";
 import { FilterSheetBody } from "./FilterSheetBody.js";
 import { applyQuickToggle, normalizeFilterValues, resolveResetValues } from "./filterSheet.helpers.js";
@@ -43,6 +45,7 @@ export const FilterSheet = /*#__PURE__*/memo(function FilterSheet({
 }) {
   const [staged, setStaged] = useState(() => normalizeFilterValues(dimensions, values));
   const wasVisible = useRef(visible);
+  const reveal = useEnterExit(visible);
 
   // Re-seed staged from `values` only on the closed→open transition — an edit made while the sheet
   // stays open (or a `values`/`dimensions` identity change from the consumer while it's open) is
@@ -81,17 +84,20 @@ export const FilterSheet = /*#__PURE__*/memo(function FilterSheet({
     visible: visible,
     onRequestClose: handleDismiss,
     testID: testID,
-    children: /*#__PURE__*/_jsx(FilterSheetBody, {
-      dimensions: dimensions,
-      staged: staged,
-      onQuickToggle: handleQuickToggle,
-      onDimensionChange: handleDimensionChange,
-      onApply: handleApply,
-      onReset: onReset !== undefined ? handleReset : undefined,
-      title: title,
-      applyLabel: applyLabel,
-      resetLabel: resetLabel,
-      testID: testID
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: reveal.style,
+      children: /*#__PURE__*/_jsx(FilterSheetBody, {
+        dimensions: dimensions,
+        staged: staged,
+        onQuickToggle: handleQuickToggle,
+        onDimensionChange: handleDimensionChange,
+        onApply: handleApply,
+        onReset: onReset !== undefined ? handleReset : undefined,
+        title: title,
+        applyLabel: applyLabel,
+        resetLabel: resetLabel,
+        testID: testID
+      })
     })
   });
 });

package/lib/module/modules/filter-sheet/FilterSheet.variants.js

@@ -17,6 +17,7 @@
  * only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { removeAccessibilityLabel } from "../../core/a11y/labels.js";
 import { createThemedVariants } from "../../core/style/index.js";
 
 /** Same touch-target floor as every interactive control in this library (44dp — Apple HIG minimum,
@@ -56,16 +57,18 @@ export function resolveFilterChipColors(colors) {
 }
 /**
  * Derives `FilterChip`'s a11y surface once, purely. Removable → `accessibilityRole="button"` with a
- * label that folds in the remove affordance (`"${label}, remove filter"`) so a screen reader
- * announces what the press does — the same "one accessible node reports the whole meaning"
- * contract `Badge` documents for its own chip. Locked (no `onRemove`) → no role at all: the
- * component renders a plain `View`, not a `Pressable`, so there is nothing to press.
+ * label that folds in the remove affordance so a screen reader announces what the press does — the
+ * same "one accessible node reports the whole meaning" contract `Badge` documents for its own chip.
+ * That wording comes from `core/a11y/labels`, shared with `chip` and `file-upload`, because three
+ * different names for one X affordance on one screen is a WCAG 3.2.4 failure. Locked (no
+ * `onRemove`) → no role at all: the component renders a plain `View`, not a `Pressable`, so there
+ * is nothing to press.
  */
 export function resolveFilterChipAccessibility(input) {
   return input.removable ? {
     accessible: true,
     accessibilityRole: "button",
-    accessibilityLabel: `${input.label}, remove filter`
+    accessibilityLabel: removeAccessibilityLabel(input.label)
   } : {
     accessible: true,
     accessibilityRole: undefined,
@@ -96,6 +99,22 @@ export function resolveQuickChipColors(colors, selected) {
     text: colors.fg.default
   };
 }
+/**
+ * Derives the quick chip's a11y surface purely. The pair is the one `docs/PLATFORM-A11Y-PROPS.md`
+ * prescribes for a toggle button, the one case where the two vocabularies genuinely diverge: each
+ * prop is inert on the platform it isn't aimed at, so neither is belt-and-braces. Unlike `Button`'s
+ * optional `selected`, a quick chip is ALWAYS a toggle, so both halves are always emitted.
+ */
+export function resolveQuickChipAccessibility(input) {
+  return {
+    accessibilityRole: "button",
+    accessibilityLabel: input.label,
+    "aria-pressed": input.selected,
+    accessibilityState: {
+      selected: input.selected
+    }
+  };
+}
 
 /** The header row hosting the sheet's title. */
 export const filterSheetHeaderStructure = createThemedVariants(theme => ({

package/lib/module/modules/filter-sheet/FilterSheetBody.js

@@ -3,27 +3,36 @@
 /**
  * FilterSheetBody — PRIVATE sub-component (not exported from `index.ts`, same status as
  * `BottomNavOverflowSheet`), handed to `FilterSheet.tsx`'s `<Drawer>` as `children`: the title
- * header, each dimension's optional quick-chip row, a single-open `Accordion` of per-dimension
- * facet controls, and the Apply/Reset footer.
+ * header, each dimension's optional quick-chip row, the per-dimension facet controls, and the
+ * Apply/Reset footer.
  *
- * Caps its own scrollable dimension list to a fraction of the window via
- * `resolveFilterSheetBodyHeight` — the same "keep the header/footer fixed, only the middle scrolls"
- * shape `BottomNavOverflowSheet` uses for its own search box + rows — so Apply/Reset stay reachable
- * regardless of how many dimensions a consumer supplies, all still within Drawer's own 90%-of-window
- * cap.
+ * The scrollable middle is ONE `VirtualList` over a flat row list — every dimension's quick-chip row
+ * first (unchanged order), then every dimension's own collapsible section — so a consumer supplying
+ * a long `dimensions` array mounts only the visible rows. A single `openKey` here keeps the
+ * "one section open at a time" contract that a single shared `Accordion` used to provide, now that
+ * each row owns its own one-item `Accordion`.
+ *
+ * Caps that list to a fraction of the window via `resolveFilterSheetBodyHeight` — the same
+ * "keep the header/footer fixed, only the middle scrolls" shape `BottomNavOverflowSheet` uses — so
+ * Apply/Reset stay reachable regardless of how many dimensions a consumer supplies, all still
+ * within Drawer's own 90%-of-window cap.
  */
 
-import { useMemo } from "react";
-import { Pressable, ScrollView, Text, useWindowDimensions, View } from "react-native";
-import { useTheme } from "../../theme/index.js";
+import { memo, useCallback, useMemo, useState } from "react";
+import { Animated, Platform, Pressable, StyleSheet, Text, useWindowDimensions, View } from "react-native";
+import Reanimated, { LinearTransition, ReduceMotion } from "react-native-reanimated";
+import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
+import { VirtualList } from "../../core/list/index.js";
+import { usePressMotion } from "../../core/motion/index.js";
 import { Accordion } from "../accordion/index.js";
 import { Button } from "../button/index.js";
 import { MultiSelect } from "../multi-select/index.js";
 import { RadioGroup } from "../radio-group/index.js";
-import { isOptionSelected } from "./filterSheet.helpers.js";
-import { filterSheetFooterStructure, filterSheetHeaderStructure, filterSheetQuickRowStructure, QUICK_CHIP_HIT_SLOP, quickChipStructure, resolveFilterSheetBodyHeight, resolveQuickChipColors } from "./FilterSheet.variants.js";
+import { filterSheetFooterStructure, filterSheetHeaderStructure, filterSheetQuickRowStructure, QUICK_CHIP_HIT_SLOP, quickChipStructure, resolveFilterSheetBodyHeight, resolveQuickChipAccessibility, resolveQuickChipColors } from "./FilterSheet.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function FilterSheetBody({
+const hasQuickOption = dimension => dimension.options.some(option => option.quick === true);
+export const FilterSheetBody = /*#__PURE__*/memo(function FilterSheetBody({
   dimensions,
   staged,
   onQuickToggle,
@@ -39,58 +48,60 @@ export function FilterSheetBody({
   const {
     height: windowHeight
   } = useWindowDimensions();
-  const bodyHeight = resolveFilterSheetBodyHeight(windowHeight);
-
-  // `useMemo`'d — this array (and the JSX it holds) goes straight into `Accordion`'s `items` prop,
-  // so a fresh array here on every render would defeat that child's `React.memo` regardless of
-  // whether `dimensions`/`staged` actually changed. See CLAUDE.md's "FilterSheet dimensions" example.
-  const accordionItems = useMemo(() => dimensions.map(dimension => ({
-    value: dimension.key,
-    title: dimension.label,
-    content: /*#__PURE__*/_jsx(DimensionControl, {
-      dimension: dimension,
-      value: staged[dimension.key],
-      onChange: next => onDimensionChange(dimension, next),
-      testID: testID ? `${testID}-control-${dimension.key}` : undefined
-    })
-  })), [dimensions, staged, onDimensionChange, testID]);
+  const [openKey, setOpenKey] = useState("");
+  const headerStyle = useMemo(() => filterSheetHeaderStructure(theme), [theme]);
+  const footerStyle = useMemo(() => filterSheetFooterStructure(theme), [theme]);
+  const quickRowStyle = useMemo(() => filterSheetQuickRowStructure(theme), [theme]);
+  const bodyStyle = useMemo(() => ({
+    maxHeight: resolveFilterSheetBodyHeight(windowHeight)
+  }), [windowHeight]);
+  const titleStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+    fontSize: theme.fontSizes.lg,
+    color: theme.colors.fg.default
+  }], [theme]);
+  const rows = useMemo(() => [...dimensions.filter(hasQuickOption).map(dimension => ({
+    kind: "quick",
+    dimension
+  })), ...dimensions.map(dimension => ({
+    kind: "section",
+    dimension
+  }))], [dimensions]);
+  const keyExtractor = useCallback(row => `${row.kind}-${row.dimension.key}`, []);
+  const renderRow = useCallback(({
+    item: row
+  }) => row.kind === "quick" ? /*#__PURE__*/_jsx(QuickChipRow, {
+    dimension: row.dimension,
+    value: staged[row.dimension.key],
+    rowStyle: quickRowStyle,
+    onToggle: onQuickToggle,
+    testID: testID
+  }) : /*#__PURE__*/_jsx(DimensionSection, {
+    dimension: row.dimension,
+    value: staged[row.dimension.key],
+    expanded: openKey === row.dimension.key,
+    onOpenChange: setOpenKey,
+    onChange: onDimensionChange,
+    testID: testID
+  }), [staged, quickRowStyle, onQuickToggle, onDimensionChange, openKey, testID]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     children: [/*#__PURE__*/_jsx(View, {
-      style: filterSheetHeaderStructure(theme),
+      style: headerStyle,
       children: /*#__PURE__*/_jsx(Text, {
         accessibilityRole: "header",
-        style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-          fontSize: theme.fontSizes.lg,
-          color: theme.colors.fg.default
-        }],
+        style: titleStyle,
         children: title
       })
-    }), /*#__PURE__*/_jsxs(ScrollView, {
-      style: {
-        maxHeight: bodyHeight
-      },
-      bounces: false,
-      children: [dimensions.map(dimension => {
-        const quickOptions = dimension.options.filter(option => option.quick === true);
-        if (quickOptions.length === 0) return null;
-        return /*#__PURE__*/_jsx(View, {
-          testID: testID ? `${testID}-quick-${dimension.key}` : undefined,
-          style: filterSheetQuickRowStructure(theme),
-          children: quickOptions.map(option => /*#__PURE__*/_jsx(QuickChip, {
-            label: option.label,
-            selected: isOptionSelected(dimension, staged, option.value),
-            onPress: () => onQuickToggle(dimension, option.value),
-            testID: testID ? `${testID}-quick-${dimension.key}-${option.value}` : undefined
-          }, option.value))
-        }, `${dimension.key}-quick`);
-      }), /*#__PURE__*/_jsx(Accordion, {
-        type: "single",
-        items: accordionItems,
-        testID: testID ? `${testID}-accordion` : undefined
-      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: bodyStyle,
+      children: /*#__PURE__*/_jsx(VirtualList, {
+        data: rows,
+        keyExtractor: keyExtractor,
+        renderItem: renderRow,
+        testID: testID ? `${testID}-list` : undefined
+      })
     }), /*#__PURE__*/_jsxs(View, {
-      style: filterSheetFooterStructure(theme),
+      style: footerStyle,
       children: [onReset !== undefined && /*#__PURE__*/_jsx(Button, {
         variant: "ghost",
         tone: "neutral",
@@ -106,25 +117,55 @@ export function FilterSheetBody({
       })]
     })]
   });
-}
+});
+/** One dimension's collapsible facet section. A one-item `Accordion` per row, with the open key
+ *  lifted to the body — a shared `Accordion` can't survive virtualisation. */
+const DimensionSection = /*#__PURE__*/memo(function DimensionSection({
+  dimension,
+  value,
+  expanded,
+  onOpenChange,
+  onChange,
+  testID
+}) {
+  const handleChange = useCallback(next => onChange(dimension, next), [onChange, dimension]);
+  const controlTestID = testID ? `${testID}-control-${dimension.key}` : undefined;
+  const items = useMemo(() => [{
+    value: dimension.key,
+    title: dimension.label,
+    renderContent: () => /*#__PURE__*/_jsx(DimensionControl, {
+      dimension: dimension,
+      value: value,
+      onChange: handleChange,
+      testID: controlTestID
+    })
+  }], [dimension, value, handleChange, controlTestID]);
+  return /*#__PURE__*/_jsx(Accordion, {
+    type: "single",
+    items: items,
+    value: expanded ? dimension.key : "",
+    onValueChange: onOpenChange,
+    testID: testID ? `${testID}-accordion` : undefined
+  });
+});
 /**
  * Picks a dimension's own facet control by `kind` — `multi` reuses `../multi-select`'s
  * checkbox-sheet picker, `single` reuses `../radio-group`'s inline "choose exactly one of N" rows.
  * Per CLAUDE.md's component decision order (use an existing export, never hand-roll one), and per
  * `RadioGroup`'s own MODULE.md, which is exactly this shape: a single-select group of options.
  */
-function DimensionControl({
+const DimensionControl = /*#__PURE__*/memo(function DimensionControl({
   dimension,
   value,
   onChange,
   testID
 }) {
-  const options = dimension.options.map(option => ({
+  const options = useMemo(() => dimension.options.map(option => ({
     label: option.label,
     value: option.value
-  }));
+  })), [dimension.options]);
+  const values = useMemo(() => Array.isArray(value) ? value : [], [value]);
   if (dimension.kind === "multi") {
-    const values = Array.isArray(value) ? value : [];
     return /*#__PURE__*/_jsx(MultiSelect, {
       options: options,
       values: values,
@@ -139,37 +180,94 @@ function DimensionControl({
     onValueChange: onChange,
     testID: testID
   });
-}
+});
+/** One dimension's wrapped row of quick-shortcut pills. */
+const QuickChipRow = /*#__PURE__*/memo(function QuickChipRow({
+  dimension,
+  value,
+  rowStyle,
+  onToggle,
+  testID
+}) {
+  const quickOptions = useMemo(() => dimension.options.filter(option => option.quick === true), [dimension.options]);
+
+  // Same semantics as `isOptionSelected`, hoisted to a Set so each chip's lookup is O(1).
+  const selectedValues = useMemo(() => {
+    if (dimension.kind === "multi") return new Set(Array.isArray(value) ? value : []);
+    return new Set(typeof value === "string" && value.length > 0 ? [value] : []);
+  }, [dimension.kind, value]);
+  const handleToggle = useCallback(optionValue => onToggle(dimension, optionValue), [onToggle, dimension]);
+  if (quickOptions.length === 0) return null;
+  return /*#__PURE__*/_jsx(Reanimated.View, {
+    testID: testID ? `${testID}-quick-${dimension.key}` : undefined,
+    style: rowStyle,
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
+    children: quickOptions.map(option => /*#__PURE__*/_jsx(QuickChip, {
+      label: option.label,
+      value: option.value,
+      selected: selectedValues.has(option.value),
+      onPress: handleToggle,
+      testID: testID ? `${testID}-quick-${dimension.key}-${option.value}` : undefined
+    }, option.value))
+  });
+});
 /** The one-tap quick-shortcut pill — a distinct, PRIVATE component from the public `FilterChip` (see
  *  `FilterSheet.variants.ts`'s file header for why the two can't share a shape). */
-function QuickChip({
+const QuickChip = /*#__PURE__*/memo(function QuickChip({
   label,
+  value,
   selected,
   onPress,
   testID
 }) {
   const theme = useTheme();
-  const colors = resolveQuickChipColors(theme.colors, selected);
+  const press = usePressMotion();
+  const handlePress = useCallback(() => onPress(value), [onPress, value]);
+  const colors = useMemo(() => resolveQuickChipColors(theme.colors, selected), [theme.colors, selected]);
+  const a11y = useMemo(() => resolveQuickChipAccessibility({
+    label,
+    selected
+  }), [label, selected]);
+  const structure = useMemo(() => quickChipStructure(theme), [theme]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(selected ? theme.fontWeights.semibold : theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: colors.text
+  }], [theme, selected, colors]);
+  const chipStyle = useMemo(() => [styles.chip, {
+    borderRadius: theme.radii.full,
+    overflow: "hidden"
+  }], [theme.radii.full]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   return /*#__PURE__*/_jsx(Pressable, {
     testID: testID,
-    accessibilityRole: "button",
-    accessibilityState: {
-      selected
-    },
-    accessibilityLabel: label,
+    accessibilityRole: a11y.accessibilityRole,
+    accessibilityLabel: a11y.accessibilityLabel,
+    "aria-pressed": a11y["aria-pressed"],
+    accessibilityState: a11y.accessibilityState,
     hitSlop: QUICK_CHIP_HIT_SLOP,
-    onPress: onPress,
-    style: [quickChipStructure(theme), {
-      backgroundColor: colors.background,
-      borderColor: colors.border
-    }],
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [theme.fontStyleForWeight(selected ? theme.fontWeights.semibold : theme.fontWeights.regular), {
-        fontSize: theme.fontSizes.sm,
-        color: colors.text
-      }],
-      children: label
+    onPress: handlePress,
+    onPressIn: press.onPressIn,
+    onPressOut: press.onPressOut,
+    android_ripple: androidRipple,
+    style: chipStyle,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [structure, {
+        backgroundColor: colors.background,
+        borderColor: colors.border
+      }, press.style],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: labelStyle,
+        children: label
+      })
     })
   });
-}
+});
+const styles = StyleSheet.create({
+  chip: {
+    alignSelf: "flex-start"
+  }
+});
 //# sourceMappingURL=FilterSheetBody.js.map

package/lib/module/modules/filter-sheet/MODULE.md

@@ -17,7 +17,7 @@ elsewhere — search stays outside the grouped panel, the same stance tickets-we
 | `FilterSheet.tsx` | The component. Owns `visible`/staged-edit state, wraps `Drawer`, wires Apply/Reset/quick-toggle/dimension-change. Data types (`FilterDimension`, `FilterOption`, `FilterValues`) live here, same precedent as `BottomNav`'s own data types. |
 | `FilterSheetBody.tsx` | PRIVATE (not exported) — the sheet's content: title header, per-dimension quick-chip rows, a single-open `Accordion` of facet controls, the Apply/Reset footer. Also hosts the private `DimensionControl` and `QuickChip` sub-components. |
 | `FilterChip.tsx` | Public. A small removable/locked chip for showing one currently-applied filter fact — see "FilterChip vs the quick chip" below. |
-| `FilterSheet.variants.ts` | Pure resolvers (`resolveFilterChipColors`, `resolveFilterChipAccessibility`, `resolveQuickChipColors`, `resolveFilterSheetBodyHeight`) + themed structural resolvers. No React, no lucide. |
+| `FilterSheet.variants.ts` | Pure resolvers (`resolveFilterChipColors`, `resolveFilterChipAccessibility`, `resolveQuickChipColors`, `resolveQuickChipAccessibility`, `resolveFilterSheetBodyHeight`) + themed structural resolvers. No React, no lucide. |
 | `filterSheet.helpers.ts` | Pure, framework-free: `countActiveFilters`, `normalizeFilterValues`, `resolveResetValues`, `applyQuickToggle`, `isOptionSelected`. No React, no `react-native` import at all. |
 | `index.ts` | Public surface: `FilterSheet`, `FilterSheetProps`, `FilterChip`, `FilterChipProps`, `FilterDimension`, `FilterDimensionKind`, `FilterOption`, `FilterValues`, `countActiveFilters`. |
 | `__tests__/FilterSheet.test.ts` | Pure: WCAG contrast (chip + quick-chip, all brands × modes), touch target, `resolveFilterChipAccessibility`, `resolveFilterSheetBodyHeight`. |
@@ -84,6 +84,21 @@ APPLIED filters elsewhere in its own UI (e.g. "Status: Open ✕" above a list)
 press-to-toggle AND a selected visual state, neither of which `FilterChip`'s contract supports — so
 it is a small, PRIVATE, unexported component (`QuickChip`), not a repurposed `FilterChip`.
 
+## Accessibility
+
+- **`FilterChip`'s remove-affordance label** now comes from the shared `removeAccessibilityLabel()`
+  (`core/a11y/labels`) — `"Remove ${label}"` — not a module-local phrasing. `chip` and `file-upload`
+  each independently invented their own wording for the same "remove this" affordance (a WCAG 3.2.4
+  Consistent Identification failure); this module now consumes the one shared constant instead of
+  adding a fourth phrasing.
+- **`QuickChip`'s selected state** (`resolveQuickChipAccessibility`) emits BOTH `aria-pressed` (web)
+  and `accessibilityState={{ selected }}` (native) — the one case in `docs/PLATFORM-A11Y-PROPS.md`
+  where the two vocabularies genuinely diverge for a toggle button, so both halves are always sent,
+  each inert on the platform it isn't aimed at. Never `aria-selected`: invalid ARIA on
+  `role="button"`. Before this fix the chip only ever emitted the `accessibilityState` object,
+  which `react-native-web` discards outright — a quick chip on web exposed `role="button"` with no
+  selected state at all.
+
 ## Controlled vs internal state
 
 | State | Owner | Mechanism |
@@ -113,3 +128,18 @@ never a migration.
 - `MultiSelect`'s own option sheet opens as a NESTED native `Modal` while `FilterSheet`'s `Drawer` is
   already showing — this is the library's existing, tested `MultiSelect` composed as-is (per
   CLAUDE.md's component decision order), not a new modal-stacking mechanism built for this module.
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
+- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.
+- **Round 5 (Android parity)** — `FilterChip` and the quick-chip (`QuickChip`) both gained
+  `android_ripple` (`borderless: false`). `FilterChip` was restructured so its border/radius style
+  lives on the `Pressable` itself (matching `Chip`'s precedent) rather than an inner `Animated.View`,
+  with `overflow: "hidden"` added so the ripple clips to the chip shape. `QuickChip`'s `Pressable`
+  gained its own matching `borderRadius: theme.radii.full` + `overflow: "hidden"` for the same
+  reason — the pill radius otherwise lives only on its inner `Animated.View`, which the ripple (drawn
+  on the `Pressable`) doesn't clip against.