@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-F5B3UINI.js → chunk-TUL5RUIA.js}

@@ -1,7 +1,8 @@
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { View, Text, Pressable, Animated, Easing, PanResponder } from 'react-native';
+import { Animated, View, Text, Pressable, Platform, Easing, PanResponder } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
@@ -54,16 +55,28 @@ var DEFAULT_LABELS = {
 };
 function ToastCard({
   message,
+  description,
   severity = "info",
   action,
   countdown,
   onPress,
-  labels: labelsProp
+  labels: labelsProp,
+  platform,
+  variant = "default",
+  size = "md",
+  dismissible = true,
+  motion = "full"
 }) {
   const labels = useLabels("toast", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
   const theme = useLoamTheme("toast");
   const colors = severityColors(theme, severity);
+  const level = useResolvedMotion(motion, "toast");
+  const pressScale = React.useRef(new Animated.Value(1)).current;
+  const pressTo = (to) => {
+    if (level !== "full") return;
+    Animated.spring(pressScale, { toValue: to, ...springConfig(theme, "fs"), useNativeDriver: true }).start();
+  };
   const actionHitSlop = Math.max(0, Math.round((theme.tapMin - theme.ctl.sm) / 2));
   const copy = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -72,50 +85,97 @@ function ToastCard({
         style: [styles.disc, { backgroundColor: colors.soft, borderColor: colors.edge }],
         accessibilityElementsHidden: true,
         importantForAccessibility: "no-hide-descendants",
-        children: /* @__PURE__ */ jsx(Icon, { name: SEVERITY_ICON[severity], size: theme.icon.sm, color: colors.glyph })
+        children: /* @__PURE__ */ jsx(Icon, { name: SEVERITY_ICON[severity], size: theme.space[18], color: colors.glyph })
       }
     ),
-    /* @__PURE__ */ jsx(Text, { style: styles.message, children: message })
+    /* @__PURE__ */ jsxs(View, { style: styles.textCol, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [
+            styles.message,
+            isAndroid(theme, platform) && { fontWeight: theme.fontWeight.regular }
+          ],
+          children: message
+        }
+      ),
+      description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null
+    ] })
   ] });
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      style: [
-        styles.card,
-        { borderStartColor: colors.accent, borderStartWidth: theme.borderWidth.heavy }
-      ],
-      children: [
-        /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
-          onPress ? /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              accessibilityRole: "button",
-              accessibilityLabel: labels.dismiss,
-              onPress,
-              style: styles.copyRegion,
-              children: copy
-            }
-          ) : /* @__PURE__ */ jsx(View, { style: styles.copyRegion, children: copy }),
-          action ? /* @__PURE__ */ jsx(
-            Pressable,
+  return (
+    // No start bar (F8): the disc carries the tone, its edge in high contrast.
+    /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        style: [
+          styles.card,
+          variant === "soft" ? { backgroundColor: colors.soft, borderColor: colors.edge } : null,
+          onPress && level === "full" ? { transform: [{ scale: pressScale }] } : null
+        ],
+        children: [
+          /* @__PURE__ */ jsxs(
+            View,
             {
-              accessibilityRole: "button",
-              accessibilityLabel: action.label,
-              onPress: action.onPress,
-              hitSlop: actionHitSlop,
-              style: styles.action,
-              children: /* @__PURE__ */ jsx(Text, { style: styles.actionLabel, children: action.label })
+              style: [
+                styles.body,
+                size === "compact" ? { paddingVertical: theme.space.s2 } : null,
+                countdown ? styles.bodyTimed : null
+              ],
+              children: [
+                onPress ? /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: description ? `${message}. ${description}` : message,
+                    onPress,
+                    onPressIn: () => pressTo(PRESS_SCALE),
+                    onPressOut: () => pressTo(1),
+                    style: styles.copyRegion,
+                    children: copy
+                  }
+                ) : /* @__PURE__ */ jsx(View, { style: styles.copyRegion, children: copy }),
+                action ? /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: action.label,
+                    onPress: action.onPress,
+                    hitSlop: actionHitSlop,
+                    style: ({ pressed }) => [styles.action, pressed && styles.actionPressed],
+                    children: /* @__PURE__ */ jsx(Text, { style: styles.actionLabel, children: action.label })
+                  }
+                ) : null,
+                onPress && dismissible ? /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: labels.dismiss,
+                    onPress,
+                    hitSlop: Math.max(0, Math.round((theme.tapMin - theme.space[26]) / 2)),
+                    style: ({ pressed }) => [styles.dismiss, pressed && styles.actionPressed],
+                    children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.space[16], color: theme.color.text3 })
+                  }
+                ) : null
+              ]
             }
-          ) : null
-        ] }),
-        countdown ? /* @__PURE__ */ jsx(View, { style: styles.countdownTrack, children: countdown }) : null
-      ]
-    }
+          ),
+          countdown ? /* @__PURE__ */ jsx(View, { style: styles.countdownTrack, children: countdown }) : null
+        ]
+      }
+    )
   );
 }
+var PRESS_SCALE = 0.98;
+function isAndroid(theme, platform) {
+  if (platform) return platform === "android";
+  if (Platform.OS === "android") return true;
+  if (Platform.OS === "ios") return false;
+  return theme.platform === "Android";
+}
 var TRAVEL = 12;
 function Toast({
   message,
+  description,
   severity = "info",
   action,
   open = true,
@@ -124,10 +184,18 @@ function Toast({
   countdown = false,
   motion = "full",
   safeAreaTop = 0,
-  labels
+  safeAreaBottom = 0,
+  platform,
+  labels,
+  variant,
+  size,
+  dismissible
 }) {
   const theme = useLoamTheme("toast");
   const { styles } = useStyles(sheet);
+  const android = isAndroid(theme, platform);
+  const androidRef = React.useRef(android);
+  androidRef.current = android;
   const reduced = theme.reduceMotion || motion === "reduced";
   const instant = motion === "none";
   const offset = reduced || instant ? 0 : TRAVEL;
@@ -205,13 +273,14 @@ function Toast({
   const pan = React.useRef(
     // eslint-disable-next-line loam/no-pan-responder
     PanResponder.create({
-      onMoveShouldSetPanResponder: (_e, g) => g.dy < -2 && Math.abs(g.dy) > Math.abs(g.dx),
+      onMoveShouldSetPanResponder: (_e, g) => androidRef.current ? Math.abs(g.dx) > 2 && Math.abs(g.dx) > Math.abs(g.dy) : g.dy < -2 && Math.abs(g.dy) > Math.abs(g.dx),
       onPanResponderMove: (_e, g) => {
-        const up = Math.min(0, g.dy);
-        progress.setValue(Math.max(0, 1 + up / 80));
+        const travel = androidRef.current ? -Math.abs(g.dx) : Math.min(0, g.dy);
+        progress.setValue(Math.max(0, 1 + travel / 80));
       },
       onPanResponderRelease: (_e, g) => {
-        if (g.dy < -32 || g.vy < -0.5) {
+        const past = androidRef.current ? Math.abs(g.dx) > 32 || Math.abs(g.vx) > 0.5 : g.dy < -32 || g.vy < -0.5;
+        if (past) {
           requestDismiss();
         } else {
           Animated.timing(progress, {
@@ -226,7 +295,7 @@ function Toast({
   ).current;
   const translateY = progress.interpolate({
     inputRange: [0, 1],
-    outputRange: [-offset, 0]
+    outputRange: [android ? offset : -offset, 0]
   });
   const bar = showCountdown ? /* @__PURE__ */ jsx(
     Animated.View,
@@ -234,7 +303,7 @@ function Toast({
       style: [
         styles.countdownBar,
         {
-          backgroundColor: severityColors(theme, severity).edge,
+          backgroundColor: severityColors(theme, severity).accent,
           transform: [{ translateX: countdownX }]
         }
       ]
@@ -243,7 +312,7 @@ function Toast({
   return /* @__PURE__ */ jsx(
     View,
     {
-      style: [styles.root, { paddingTop: safeAreaTop + theme.space.s2 }],
+      style: android ? [styles.root, styles.rootBottom, { paddingBottom: safeAreaBottom + theme.space.s4 }] : [styles.root, { paddingTop: safeAreaTop + theme.space.s2 }],
       pointerEvents: "box-none",
       children: /* @__PURE__ */ jsx(
         Animated.View,
@@ -258,11 +327,17 @@ function Toast({
             ToastCard,
             {
               message,
+              description,
               severity,
               action,
               countdown: bar,
               onPress: requestDismiss,
-              labels
+              labels,
+              platform: android ? "android" : "ios",
+              variant,
+              size,
+              dismissible,
+              motion
             }
           )
         }
@@ -277,6 +352,7 @@ var nextId = () => `loam-toast-${++idCounter}`;
 function ToastProvider({
   children,
   safeAreaTop = 0,
+  safeAreaBottom = 0,
   motion = "full"
 }) {
   const [queue, setQueue] = React.useState([]);
@@ -338,12 +414,17 @@ function ToastProvider({
       {
         open: current.open,
         message: current.message,
+        description: current.description,
         severity: current.severity,
         action: current.action,
         duration: current.duration,
         countdown: current.countdown,
+        variant: current.variant,
+        size: current.size,
+        dismissible: current.dismissible,
         motion,
         safeAreaTop,
+        safeAreaBottom,
         onDismiss: () => close(current.id)
       },
       current.id
@@ -357,6 +438,9 @@ function useToast() {
   }
   return ctx;
 }
+function useOptionalToast() {
+  return React.useContext(ToastContext);
+}
 var TOAST_MAX_W = 480;
 var sheet = createStyleSheet((theme) => ({
   // Full-bleed top overlay; `box-none` so touches pass through the empty gutters.
@@ -369,14 +453,15 @@ var sheet = createStyleSheet((theme) => ({
     paddingHorizontal: theme.space.s4,
     alignItems: "center"
   },
+  rootBottom: { top: void 0, bottom: 0 },
   animated: {
     width: "100%",
     maxWidth: TOAST_MAX_W
   },
   // The surface card. `overflow: hidden` clips the countdown bar to the radius.
   card: {
-    borderRadius: theme.radius.lg,
-    borderWidth: theme.borderWidth.base,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.thin,
     borderColor: theme.color.border,
     backgroundColor: theme.color.surface,
     overflow: "hidden",
@@ -387,8 +472,11 @@ var sheet = createStyleSheet((theme) => ({
     alignItems: "center",
     gap: theme.space.s3,
     paddingVertical: theme.space.s3,
-    paddingHorizontal: theme.space.s4
+    paddingStart: theme.space.s3,
+    paddingEnd: theme.space[6]
   },
+  // The timer line sits 6 above the edge; the card owes it 16 below.
+  bodyTimed: { paddingBottom: theme.space[16] },
   // The tap-to-dismiss region: icon + message. `flex: 1` lets it absorb the
   // width so the action sits flush at the trailing edge.
   copyRegion: {
@@ -402,43 +490,64 @@ var sheet = createStyleSheet((theme) => ({
     width: theme.space[32],
     height: theme.space[32],
     borderRadius: theme.radius.full,
-    borderWidth: theme.borderWidth.base,
+    borderWidth: theme.borderWidth.thin,
     alignItems: "center",
     justifyContent: "center"
   },
   // `flex: 1` + `minWidth: 0` lets the message wrap instead of shoving the action off-card.
   message: {
-    flex: 1,
-    minWidth: 0,
     fontFamily: theme.font.sans,
-    fontSize: theme.type.subheadline.fontSize,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[14],
     lineHeight: theme.type.subheadline.lineHeight,
     color: theme.color.text
   },
+  textCol: { flex: 1, minWidth: 0, gap: theme.space[2] },
+  description: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  dismiss: {
+    width: theme.ctl.xs,
+    height: theme.ctl.xs,
+    borderRadius: theme.ctl.r.xs,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // A ghost sm Button: ctl.sm tall, r sm, state-hover on press.
   action: {
     flexShrink: 0,
-    paddingHorizontal: theme.space.s2,
-    paddingVertical: theme.space.s1,
+    minHeight: theme.ctl.sm,
+    justifyContent: "center",
+    paddingHorizontal: theme.space[10],
     borderRadius: theme.radius.sm
   },
+  actionPressed: { backgroundColor: theme.state.hover },
   actionLabel: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
+    fontWeight: theme.fontWeight.semibold,
     fontSize: theme.type.footnote.fontSize,
     color: theme.color.accentStrong
   },
+  // A 2 px tone line, inset 12 / 6 on a surface-3 track, so nothing runs along
+  // the rounded edge (G13 S1).
   countdownTrack: {
     position: "absolute",
-    bottom: 0,
-    start: 0,
-    end: 0,
-    height: theme.space[3],
+    bottom: theme.space[6],
+    start: theme.space[12],
+    end: theme.space[12],
+    height: theme.space[2],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3,
     overflow: "hidden"
   },
   countdownBar: {
     width: "100%",
-    height: theme.space[3]
+    height: theme.space[2],
+    borderRadius: theme.radius.full
   }
 }));
 
-export { SEVERITY_DURATION, Toast, ToastCard, ToastProvider, useToast };
+export { SEVERITY_DURATION, Toast, ToastCard, ToastProvider, useOptionalToast, useToast };

package/dist/{chunk-C6APNDVA.js → chunk-TYOSA7JG.js}

@@ -1,9 +1,10 @@
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
-import { Animated, Easing, Pressable, View, Text, AccessibilityInfo } from 'react-native';
+import { Animated, Easing, Pressable, View, ActivityIndicator, Text, AccessibilityInfo } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var DEFAULT_LABELS = {
   copy: "Copy",
@@ -17,14 +18,21 @@ function CopyButton({
   timeout = 2e3,
   motion = "full",
   accessibilityLabel,
+  disabled = false,
+  fullWidth = false,
+  tone = "neutral",
+  loading = false,
+  leading,
+  trailing,
   labels: labelsProp
 }) {
   const labels = useLabels("copyButton", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { variant, size });
   const theme = useLoamTheme("copy-button");
-  const fg = theme.color.text;
+  const fg = tone === "accent" ? theme.color.accentStrong : tone === "good" ? theme.color.goodOnSoft : tone === "warn" ? theme.color.warnOnSoft : tone === "danger" ? theme.color.danger : theme.color.text;
   const iconSize = theme.ctl.icon[size];
   const slop = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  const android = isAndroidIdiom(theme);
   const reduced = theme.reduceMotion || motion === "reduced" || motion === "none";
   const [copied, setCopied] = React.useState(false);
   const timer = React.useRef();
@@ -50,6 +58,7 @@ function CopyButton({
     bounciness: 6
   }).start();
   const handlePress = () => {
+    if (loading) return;
     onCopy?.();
     setCopied(true);
     AccessibilityInfo.announceForAccessibility(labels.copied);
@@ -66,37 +75,57 @@ function CopyButton({
     {
       accessibilityRole: "button",
       accessibilityLabel: accessibilityLabel ?? label ?? labels.copy,
-      onPress: handlePress,
-      onPressIn: () => press(0.97),
-      onPressOut: () => press(1),
+      accessibilityState: { disabled, busy: loading },
+      "aria-disabled": disabled || void 0,
+      disabled,
+      onPress: disabled ? void 0 : handlePress,
+      onPressIn: disabled || android ? void 0 : () => press(0.97),
+      onPressOut: disabled || android ? void 0 : () => press(1),
       hitSlop: { top: slop, bottom: slop, left: slop, right: slop },
-      children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, { transform: [{ scale: pressScale }] }], children: [
-        /* @__PURE__ */ jsxs(View, { style: glyphBox, children: [
-          /* @__PURE__ */ jsx(
-            Animated.View,
-            {
-              testID: "copy-glyph",
-              style: [
-                styles.glyph,
-                reduced ? { opacity: copied ? 0 : 1 } : { opacity: copyOpacity, transform: [{ scale: copyScale }] }
-              ],
-              children: /* @__PURE__ */ jsx(Icon, { name: "copy", size: iconSize, color: fg })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Animated.View,
-            {
-              testID: "check-glyph",
-              style: [
-                styles.glyph,
-                reduced ? { opacity: copied ? 1 : 0 } : { opacity: checkOpacity, transform: [{ scale: checkScale }] }
-              ],
-              children: /* @__PURE__ */ jsx(Icon, { name: "check", size: iconSize, color: fg })
-            }
-          )
-        ] }),
-        label ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: label }) : null
-      ] })
+      android_ripple: android && !disabled ? { color: theme.state.pressed, borderless: false, foreground: true } : void 0,
+      style: [
+        android ? { borderRadius: theme.ctl.r[size], overflow: "hidden" } : null,
+        fullWidth ? { alignSelf: "stretch" } : null
+      ],
+      children: /* @__PURE__ */ jsxs(
+        Animated.View,
+        {
+          style: [
+            styles.base,
+            { transform: [{ scale: pressScale }] },
+            disabled ? { opacity: theme.state.disabledOpacity } : null
+          ],
+          children: [
+            leading,
+            /* @__PURE__ */ jsx(View, { style: glyphBox, children: loading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: fg, accessibilityLabel: "Loading" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Animated.View,
+                {
+                  testID: "copy-glyph",
+                  style: [
+                    styles.glyph,
+                    reduced ? { opacity: copied ? 0 : 1 } : { opacity: copyOpacity, transform: [{ scale: copyScale }] }
+                  ],
+                  children: /* @__PURE__ */ jsx(Icon, { name: "copy", size: iconSize, color: fg })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Animated.View,
+                {
+                  testID: "check-glyph",
+                  style: [
+                    styles.glyph,
+                    reduced ? { opacity: copied ? 1 : 0 } : { opacity: checkOpacity, transform: [{ scale: checkScale }] }
+                  ],
+                  children: /* @__PURE__ */ jsx(Icon, { name: "check", size: iconSize, color: fg })
+                }
+              )
+            ] }) }),
+            label ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: label }) : null,
+            trailing
+          ]
+        }
+      )
     }
   );
 }

package/dist/chunk-TYQTMMEV.js

@@ -0,0 +1 @@
+

package/dist/{chunk-DW3L54DQ.js → chunk-TZO6YDS7.js}

@@ -2,7 +2,7 @@ import { useLabels } from './chunk-APCWFOZW.js';
 import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import { DEFAULT_DATE_LABELS, localeNames, monthGrid, weekdayOrder, dayDisabled, dayLabel } from '@btndprojects/loam-date';
 import * as React from 'react';
-import { ScrollView, View, Text, Animated, Pressable, StyleSheet } from 'react-native';
+import { ScrollView, View, Text, Animated, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -12,6 +12,8 @@ var DEFAULT_LABELS = {
   pickRange: "Pick a range",
   triggerNamed: (label, value) => `${label}, ${value}`,
   triggerHint: "Double tap to change the date range",
+  valid: "Valid",
+  loading: "Loading",
   startTime: "Start time, 24-hour",
   endTime: "End time, 24-hour",
   timeTo: "to",
@@ -92,7 +94,7 @@ function MonthList({
         item.weeks.map((week) => /* @__PURE__ */ jsxs(View, { style: styles.weekRow, children: [
           weekNumbers ? /* @__PURE__ */ jsx(View, { style: styles.weekNumber, children: /* @__PURE__ */ jsx(Text, { style: styles.weekNumberText, children: week.week }) }) : null,
           week.days.map(
-            (day) => (
+            (day, column) => (
               // A day borrowed from the neighbouring month is **not** rendered
               // as a cell here, unlike in the web picker's two-month view. In a
               // continuous scroll that month is a thumb-flick away, so a
@@ -112,6 +114,7 @@ function MonthList({
                   level,
                   labels,
                   names: names.days,
+                  column,
                   onPick
                 },
                 day.key
@@ -134,6 +137,7 @@ function DayCell({
   level,
   labels,
   names,
+  column,
   onPick
 }) {
   const { styles } = useStyles(sheet);
@@ -199,19 +203,27 @@ function DayCell({
       onPress: () => onPick(day.ms),
       style: ({ pressed }) => [styles.day, pressed && !disabled && styles.pressed],
       children: [
-        /* @__PURE__ */ jsx(
+        selection !== "none" && selection !== "both" ? /* @__PURE__ */ jsx(
           Animated.View,
           {
             pointerEvents: "none",
-            style: [StyleSheet.absoluteFill, styles.dayInside, { opacity: wash }]
+            style: [
+              styles.capsule,
+              {
+                opacity: endpoint ? 1 : wash,
+                left: isStart ? "50%" : 0,
+                right: isEnd ? "50%" : 0
+              },
+              !isStart && column === 0 && styles.capsuleRoundStart,
+              !isEnd && column === 6 && styles.capsuleRoundEnd
+            ]
           }
-        ),
+        ) : null,
         endpoint ? /* @__PURE__ */ jsx(
           Animated.View,
           {
             pointerEvents: "none",
             style: [
-              StyleSheet.absoluteFill,
               styles.dayEnd,
               {
                 transform: [
@@ -221,12 +233,12 @@ function DayCell({
             ]
           }
         ) : null,
+        today && !endpoint ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.dayToday }) : null,
         /* @__PURE__ */ jsx(
           Text,
           {
             style: [
               styles.dayText,
-              today && styles.dayToday,
               (isStart || isEnd) && styles.dayEndText,
               disabled && styles.dayDisabled
             ],
@@ -275,15 +287,36 @@ var sheet = createStyleSheet((theme) => ({
   },
   day: {
     flex: 1,
-    minHeight: theme.tapMin,
+    height: theme.tapMin,
     alignItems: "center",
     justifyContent: "center",
     gap: theme.space[1]
   },
   // The in-range wash is a state layer, not a tint: it has to composite over the
   // sheet surface and over a pressed cell without either turning muddy.
-  dayInside: { backgroundColor: theme.state.selected },
-  dayEnd: { backgroundColor: theme.color.accent, borderRadius: theme.radius.md },
+  // loam-contrast-ignore — the range band runs behind consecutive day cells; an edge per cell would break the capsule.
+  capsule: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    backgroundColor: theme.color.accentSoft
+  },
+  capsuleRoundStart: {
+    borderTopLeftRadius: theme.radius.full,
+    borderBottomLeftRadius: theme.radius.full
+  },
+  capsuleRoundEnd: {
+    borderTopRightRadius: theme.radius.full,
+    borderBottomRightRadius: theme.radius.full
+  },
+  // The end is a filled circle at the day height (44 iOS, 48 Android).
+  dayEnd: {
+    position: "absolute",
+    width: theme.tapMin,
+    height: theme.tapMin,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent
+  },
   dayText: {
     fontFamily: theme.font.sans,
     fontSize: theme.type.subheadline.fontSize,
@@ -291,9 +324,17 @@ var sheet = createStyleSheet((theme) => ({
     color: theme.color.text
   },
   dayBlank: { flex: 1, minHeight: theme.tapMin },
-  dayToday: { fontWeight: theme.fontWeight.bold, color: theme.color.accentOnSoft },
+  // Today: a 1.5 accent-strong ring at regular weight.
+  dayToday: {
+    position: "absolute",
+    width: theme.tapMin,
+    height: theme.tapMin,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.strong,
+    borderColor: theme.color.accentStrong
+  },
   dayEndText: { color: theme.color.accentInk, fontWeight: theme.fontWeight.bold },
-  dayDisabled: { color: theme.color.text3, textDecorationLine: "line-through" },
+  dayDisabled: { color: theme.color.text3 },
   densityBar: {
     width: theme.space.s3,
     borderRadius: theme.radius.full,