@stacksjs/defaults 0.75.97 → 0.75.98

package/resources/components/NativeNavBar.stx

@@ -18,7 +18,7 @@ const { title = '', back = '', backLabel = 'Back', large = true } = defineProps<
 </script>
 
 <script client>
-import { backLabelFor, canGoBack, enterNavTrail, goBack, haptics, navTrail, observePageScroll } from '@stacksjs/mobile'
+import { backLabelFor, canGoBack, enterNavTrail, goBack, haptics, navTrail, observeLargeTitle } from '@stacksjs/mobile'
 
 const isLarge = useReactiveProp<boolean>('large', true)
 const onScroll = useReactiveProp<boolean>('titleOnScroll', false)
@@ -40,9 +40,22 @@ effect(() => {
   if (here) here.title = name
 })
 
+// The bar follows the scroll a frame at a time, as UINavigationBar does:
+// --native-nav-progress runs from 0 (large title in full view) to 1 (scrolled
+// under the bar) and the stylesheet fades the material in and moves the small
+// title into the bar off it; --native-nav-stretch grows the large title a
+// little while the page is pulled past its top. Past half way, the title is
+// the bar's (it takes its room, and VoiceOver reads it there).
+const navRoot = useRef('nativeNav')
+const largeTitle = useRef('nativeNavLargeTitle')
 onMount(() => {
-  // The large title is about 44px tall; past it, its name belongs in the bar.
-  stopScroll = observePageScroll(offset => scrolled.set(offset > 40))
+  const root = navRoot.current as HTMLElement | null
+  if (root) {
+    stopScroll = observeLargeTitle(root, {
+      title: largeTitle.current as HTMLElement | null,
+      onChange: metrics => scrolled.set(metrics.progress >= 0.5),
+    })
+  }
   const { current, previous } = enterNavTrail(navTrail(), window.location.pathname + window.location.search)
   here = current
   current.title = navTitle()
@@ -52,7 +65,7 @@ onDestroy(() => stopScroll?.())
 
 const barClass = derived(() => {
   const collapsed = (!isLarge() && !onScroll()) || scrolled()
-  return `native-nav-bar${collapsed ? ' is-collapsed' : ''}${scrolled() ? ' is-scrolled' : ''}`
+  return `native-nav-bar${isLarge() ? ' is-large' : ''}${collapsed ? ' is-collapsed' : ''}${scrolled() ? ' is-scrolled' : ''}`
 })
 
 function tapBack(event: MouseEvent): void {
@@ -63,12 +76,12 @@ function tapBack(event: MouseEvent): void {
 
 <!-- `display: contents` on this box and on stx's own wrapper: a sticky element
      sticks within its parent, and either box would give the bar no room. -->
-<div class="native-nav" data-native-nav-bar>
+<div ref="nativeNav" class="native-nav" data-native-nav-bar>
   <header :class="barClass()">
     <div class="native-nav-side">
       @if(back)
         <a href="{{ back }}" class="native-nav-back" :aria-label="backText()" draggable="false" @click="tapBack">
-          <i aria-hidden="true" class="i-lucide-chevron-left native-nav-back-icon"></i>
+          <NativeSymbol name="chevron.backward" icon="i-lucide-chevron-left" weight="semibold" class="native-nav-back-icon" />
           <span class="native-nav-back-label">{{ backText() }}</span>
         </a>
       @endif
@@ -80,7 +93,7 @@ function tapBack(event: MouseEvent): void {
     </div>
   </header>
   @if(large)
-    <h1 class="native-nav-large-title" :class="navTitle() ? '' : 'is-empty'">{{ navTitle() }}</h1>
+    <h1 ref="nativeNavLargeTitle" class="native-nav-large-title" :class="navTitle() ? '' : 'is-empty'">{{ navTitle() }}</h1>
   @endif
   <slot />
 </div>
@@ -102,6 +115,9 @@ function tapBack(event: MouseEvent): void {
     align-items: center;
     min-height: 2.75rem;
     padding: 0 0.75rem;
+    /* Dynamic Type, capped as UIKit caps its bars: a bar's text stops
+       growing well before the content's does. */
+    font-size: min(var(--native-font-size, 17px), 23px);
   }
 
   /* The frosted material is always there and only fades. Adding or removing
@@ -125,6 +141,13 @@ function tapBack(event: MouseEvent): void {
 
   .native-nav-bar.is-scrolled::before { opacity: 1; }
 
+  /* Scroll-linked once the page has run: the material comes in with the
+     scroll itself, no transition. */
+  .native-nav[style*="--native-nav-progress"] .native-nav-bar::before {
+    opacity: max(0.001, min(1, var(--native-nav-progress) * 1.5));
+    transition: none;
+  }
+
   .dark .native-nav-bar::before {
     border-color: var(--native-bar-border-dark, rgb(51 65 85 / 0.6));
     background: var(--native-bar-background-dark, rgb(2 6 23 / 0.86));
@@ -139,7 +162,7 @@ function tapBack(event: MouseEvent): void {
   .native-nav-title {
     max-width: 60vw;
     overflow: hidden;
-    font-size: 1.0625rem;
+    font-size: 1em;
     font-weight: 600;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -150,6 +173,14 @@ function tapBack(event: MouseEvent): void {
 
   .native-nav-bar.is-collapsed .native-nav-title { opacity: 1; transform: none; }
 
+  /* Under a large title the small one rises into the bar with the scroll,
+     appearing over the last part of it. */
+  .native-nav[style*="--native-nav-progress"] .native-nav-bar.is-large .native-nav-title {
+    opacity: clamp(0, calc((var(--native-nav-progress) - 0.6) * 2.5), 1);
+    transform: translateY(calc((1 - var(--native-nav-progress)) * 0.5em));
+    transition: none;
+  }
+
   /* A title that is not showing takes no room from the sides either. */
   .native-nav-bar:not(.is-collapsed) .native-nav-title { max-width: 0; }
 
@@ -162,14 +193,16 @@ function tapBack(event: MouseEvent): void {
     margin-left: -0.4rem;
     padding-right: 0.5rem;
     color: var(--native-accent, rgb(37 99 235));
-    font-size: 1.0625rem;
+    font-size: 1em;
     text-decoration: none;
     -webkit-touch-callout: none;
   }
 
   .dark .native-nav-back { color: var(--native-accent-dark, rgb(96 165 250)); }
   .native-nav-back:active { opacity: 0.55; }
-  .native-nav-back-icon { flex-shrink: 0; width: 1.6rem; height: 1.6rem; }
+  /* SF's chevron.backward at the bar's text size, drawn a little heavier and
+     larger than the label as UIKit draws it. */
+  .native-nav-back-icon { flex-shrink: 0; width: 1.35em; height: 1.35em; }
   .native-nav-back-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   /* Where the centred title leaves too little room for a word, the chevron
      alone, as on iOS: at 4.5rem a long title still left "Wo…" for "Workout"
@@ -183,16 +216,23 @@ function tapBack(event: MouseEvent): void {
   .native-nav-large-title {
     margin: 0.125rem 0 0.5rem;
     padding: 0 1rem;
-    font-size: 2.125rem;
+    /* 34pt at the default text size: twice the body, as on iOS. */
+    font-size: calc(var(--native-font-size, 17px) * 2);
     font-weight: 700;
     line-height: 1.15;
     letter-spacing: -0.02em;
+    /* Pulled past the top, it grows from its leading edge. */
+    transform: scale(var(--native-nav-stretch, 1));
+    transform-origin: 0 50%;
   }
 
   @media (prefers-reduced-motion: reduce) {
     .native-nav-bar::before, .native-nav-title { transition: none; }
+    .native-nav-large-title { transform: none; }
   }
 
+  :root[data-native-reduce-motion] .native-nav-large-title { transform: none; }
+
   @media (prefers-reduced-transparency: reduce) {
     .native-nav-bar::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--native-bar-solid, rgb(248 250 252)); }
     .dark .native-nav-bar::before { background: var(--native-bar-solid-dark, rgb(2 6 23)); }

package/resources/components/NativeNetworkBanner.stx

@@ -77,7 +77,7 @@ onDestroy(() => {
   /* After the base rule and doubled up, so it wins over `display: flex`. */
   .native-network-banner.native-network-banner--quiet { display: none; }
 
-  @media (prefers-color-scheme: dark) {
-    .native-network-banner { color: rgb(254 243 199); background: rgb(120 53 15 / 0.96); }
-  }
+  /* Dark with the app's own theme, the `.dark` class, not the system's: an
+     app pinned to light in a dark phone kept a dark banner on a light page. */
+  .dark .native-network-banner { color: rgb(254 243 199); background: rgb(120 53 15 / 0.96); }
 </style>

package/resources/components/NativeProgressRing.stx

@@ -3,21 +3,30 @@
  * A ring that fills as something completes: sets done, a countdown running
  * out. Whatever goes inside it — a count, a time — is the slot.
  *
- * `value` is 0–100. Colours follow `--native-ring` and `--native-ring-track`,
- * its thickness `--native-ring-width`.
+ * `value` is 0–100. Drawn as an Activity-style ring: a stroke with rounded
+ * ends that sweeps from the top, animating to each new value. Colours follow
+ * `--native-ring` and `--native-ring-track`, its thickness
+ * `--native-ring-width`.
  */
 const value = useReactiveProp<number>('value', 0)
 const size = useReactiveProp<number>('size', 56)
 const label = useReactiveProp<string>('label', '')
 
+const percent = derived(() => Math.max(0, Math.min(100, Number(value()) || 0)))
 const ringStyle = derived(() => {
-  const percent = Math.max(0, Math.min(100, Number(value()) || 0))
   const px = Math.max(16, Number(size()) || 56)
-  return `width:${px}px;height:${px}px;background:conic-gradient(var(--native-ring, rgb(16 185 129)) ${percent}%, var(--native-ring-track, rgb(148 163 184 / 0.22)) 0)`
+  return `width:${px}px;height:${px}px`
 })
+// pathLength is 100, so the offset is what is left to fill. An empty ring
+// hides its stroke: a rounded end of zero length still draws a dot.
+const fillStyle = derived(() => `stroke-dashoffset:${100 - percent()};opacity:${percent() > 0 ? 1 : 0}`)
 </script>
 
 <div class="native-ring" role="img" :aria-label="label()" :style="ringStyle()" data-native-progress-ring>
+  <svg class="native-ring-svg" aria-hidden="true" focusable="false">
+    <circle class="native-ring-track" cx="50%" cy="50%" r="50%" />
+    <circle class="native-ring-fill" cx="50%" cy="50%" r="50%" pathLength="100" :style="fillStyle()" />
+  </svg>
   <div class="native-ring-center">
     <slot />
   </div>
@@ -27,8 +36,34 @@ const ringStyle = derived(() => {
   .native-ring {
     position: relative;
     flex-shrink: 0;
-    border-radius: 9999px;
-    transition: background 200ms linear;
+  }
+
+  /* No viewBox, so the SVG's units are CSS pixels and the stroke is exactly
+     --native-ring-width. Inset by half of it: the stroke is drawn centred on
+     the circle (r 50% of a square box is half its side) and overflows the
+     box by the other half, so the ring's outer edge is the component's. */
+  .native-ring-svg {
+    position: absolute;
+    inset: calc(var(--native-ring-width, 5px) / 2);
+    width: calc(100% - var(--native-ring-width, 5px));
+    height: calc(100% - var(--native-ring-width, 5px));
+    overflow: visible;
+    transform: rotate(-90deg);
+  }
+
+  .native-ring-track,
+  .native-ring-fill {
+    fill: none;
+    stroke-width: var(--native-ring-width, 5px);
+  }
+
+  .native-ring-track { stroke: var(--native-ring-track, rgb(148 163 184 / 0.22)); }
+
+  .native-ring-fill {
+    stroke: var(--native-ring, rgb(16 185 129));
+    stroke-linecap: round;
+    stroke-dasharray: 100;
+    transition: stroke-dashoffset 500ms cubic-bezier(0.32, 0.72, 0, 1), opacity 150ms ease;
   }
 
   .native-ring-center {
@@ -39,10 +74,11 @@ const ringStyle = derived(() => {
     align-items: center;
     justify-content: center;
     border-radius: 9999px;
-    background: var(--native-ring-center, var(--native-safe-area-background, Canvas));
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .native-ring { transition: none; }
+    .native-ring-fill { transition: none; }
   }
+
+  :root[data-native-reduce-motion] .native-ring-fill { transition: none; }
 </style>

package/resources/components/NativePullToRefresh.stx

@@ -1,101 +1,194 @@
 <script client>
-import { observePullToRefresh } from '@stacksjs/mobile'
+import { observeNativeRefresh, observePullToRefresh, refresh, resolveScrollHost, whenBridgeReady } from '@stacksjs/mobile'
 
 /**
  * Pull the page down from its top to refresh it.
  *
- * On iOS the pull rides the system's own rubber band, so it feels like a
- * native list; elsewhere the finger's travel drives it. Crossing the threshold
- * taps the haptic engine once. The `refresh` event carries `done()`: call it
- * when the new data is in, and the spinner goes away. A handler that never
- * calls it is let go after 15 seconds.
+ * In Craft's iOS shell this is the phone's own UIRefreshControl, the spinner
+ * and the feel of every native list. Elsewhere, and on a shell without it,
+ * the web gesture draws the same thing: the 12-spoke activity indicator
+ * revealed spoke by spoke above the content as it is pulled, a haptic tap at
+ * the threshold, the content held down under the spinning indicator while
+ * refreshing, and eased back up when done.
+ *
+ * The `refresh` event carries `done()`: call it when the new data is in. A
+ * handler that never calls it is let go after 15 seconds. `scrollHost` names
+ * (by CSS selector) a container the screen scrolls in instead of the page;
+ * the native control covers only the page, so a scroll host uses the gesture.
  */
 const emit = defineEmits()
 const threshold = useReactiveProp<number>('threshold', 72)
 const label = useReactiveProp<string>('label', 'Refreshing')
+const scrollHost = useReactiveProp<string>('scrollHost', '')
+const tint = useReactiveProp<string>('tint', '')
 const distance = state(0)
+const bounce = state(0)
 const armed = state(false)
 const refreshing = state(false)
+const ptr = useRef('nativePtr')
 let stop: (() => void) | null = null
+let destroyed = false
 
-onMount(() => {
+// The height the content is held down by while refreshing: the indicator's.
+const HOLD = 56
+
+function run(): Promise<void> {
+  return new Promise<void>((resolve) => {
+    refreshing.set(true)
+    const finish = (): void => {
+      clearTimeout(timer)
+      refreshing.set(false)
+      resolve()
+    }
+    const timer = setTimeout(finish, 15000)
+    emit('refresh', { done: finish })
+  })
+}
+
+function useGesture(): void {
   stop = observePullToRefresh({
     threshold: threshold(),
-    onPull: (pulled, isArmed) => {
+    host: resolveScrollHost(scrollHost()),
+    onPull: (pulled, isArmed, pull) => {
       distance.set(pulled)
+      bounce.set(pull.bounce)
       armed.set(isArmed)
     },
-    onRefresh: () => new Promise<void>((resolve) => {
-      refreshing.set(true)
-      const finish = (): void => {
-        clearTimeout(timer)
-        refreshing.set(false)
-        resolve()
-      }
-      const timer = setTimeout(finish, 15000)
-      emit('refresh', { done: finish })
-    }),
+    onRefresh: run,
   })
+}
+
+onMount(() => {
+  const element = ptr.current as HTMLElement | null
+  // Decided once the bridge can answer, so the phone never runs both.
+  void whenBridgeReady(3000).then(() => {
+    if (destroyed) return
+    if (element && !scrollHost() && refresh.isAvailable()) {
+      // The native spinner draws itself; the page only refreshes.
+      stop = observeNativeRefresh(element, {
+        tintColor: tint() || undefined,
+        onRefresh: () => new Promise<void>((resolve) => {
+          const timer = setTimeout(resolve, 15000)
+          const finish = (): void => {
+            clearTimeout(timer)
+            resolve()
+          }
+          emit('refresh', { done: finish })
+        }),
+      })
+    }
+    else {
+      useGesture()
+    }
+  })
+})
+onDestroy(() => {
+  destroyed = true
+  stop?.()
 })
-onDestroy(() => stop?.())
 
-const indicatorClass = derived(() => {
-  const visible = refreshing() || distance() > 8
-  return `native-ptr-indicator${visible ? ' is-visible' : ''}${refreshing() ? ' is-refreshing' : ''}${armed() ? ' is-armed' : ''}`
+const ptrClass = derived(() => {
+  const pulling = !refreshing() && distance() > 0
+  return `${pulling ? 'is-pulling' : ''}${refreshing() ? ' is-refreshing' : ''}${armed() ? ' is-armed' : ''}${refreshing() || distance() > 4 ? ' is-visible' : ''}`.trim()
 })
-const indicatorStyle = derived(() => {
-  if (refreshing()) return ''
-  const progress = Math.min(1, distance() / threshold())
-  return `opacity:${progress};transform:translateX(-50%) rotate(${Math.round(progress * 270)}deg) scale(${0.6 + progress * 0.4})`
+// iOS's rubber band already moves the page by `bounce`; the content moves by
+// the rest. While refreshing it is held under the indicator.
+const ptrStyle = derived(() => {
+  const shift = refreshing() ? HOLD : Math.max(0, distance() - bounce())
+  const progress = refreshing() ? 1 : Math.min(1, distance() / Math.max(1, threshold()))
+  return `--native-ptr-shift:${Math.round(shift)}px;--native-ptr-progress:${progress.toFixed(3)}`
 })
 </script>
 
-<div class="native-ptr">
-  <div :class="indicatorClass()" :style="indicatorStyle()" role="status" :aria-label="refreshing() ? label() : ''">
-    <i aria-hidden="true" class="i-lucide-loader-circle native-ptr-icon"></i>
+<div ref="nativePtr" class="native-ptr" :class="ptrClass()" :style="ptrStyle()" data-native-ptr>
+  <div class="native-ptr-indicator" role="status" :aria-label="refreshing() ? label() : ''">
+    <span class="native-ptr-spinner" aria-hidden="true">
+      <span class="native-ptr-spoke" style="--i: 0"></span>
+      <span class="native-ptr-spoke" style="--i: 1"></span>
+      <span class="native-ptr-spoke" style="--i: 2"></span>
+      <span class="native-ptr-spoke" style="--i: 3"></span>
+      <span class="native-ptr-spoke" style="--i: 4"></span>
+      <span class="native-ptr-spoke" style="--i: 5"></span>
+      <span class="native-ptr-spoke" style="--i: 6"></span>
+      <span class="native-ptr-spoke" style="--i: 7"></span>
+      <span class="native-ptr-spoke" style="--i: 8"></span>
+      <span class="native-ptr-spoke" style="--i: 9"></span>
+      <span class="native-ptr-spoke" style="--i: 10"></span>
+      <span class="native-ptr-spoke" style="--i: 11"></span>
+    </span>
+  </div>
+  <div class="native-ptr-content">
+    <slot />
   </div>
-  <slot />
 </div>
 
 <style>
   .native-ptr { position: relative; }
 
+  /* Under the navigation bar, in the gap the pulled content opens. */
   .native-ptr-indicator {
     position: fixed;
-    top: calc(env(safe-area-inset-top, 0px) + 3.25rem);
+    top: calc(env(safe-area-inset-top, 0px) + var(--native-ptr-top, 3.25rem));
     left: 50%;
     z-index: 25;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: 999px;
-    color: var(--native-accent, rgb(37 99 235));
-    background: var(--native-ptr-background, white);
-    box-shadow: 0 4px 14px rgb(15 23 42 / 0.14);
+    width: 1.75rem;
+    height: 1.75rem;
+    margin-left: -0.875rem;
+    color: var(--native-ptr-color, rgb(142 142 147));
     opacity: 0;
     pointer-events: none;
-    transform: translateX(-50%) scale(0.6);
-    /* Restyled every frame of a pull: its own layer keeps that off the page's paint. */
-    will-change: transform, opacity;
+    transform: scale(0.85);
+    transition: opacity 200ms ease, transform 200ms ease;
   }
 
-  .dark .native-ptr-indicator { color: var(--native-accent-dark, rgb(96 165 250)); background: var(--native-ptr-background-dark, rgb(30 41 59)); }
-  .native-ptr-indicator.is-visible { opacity: 1; }
-  .native-ptr-icon { width: 1.25rem; height: 1.25rem; }
+  .native-ptr.is-visible .native-ptr-indicator { opacity: 1; transform: none; }
+  .native-ptr.is-pulling .native-ptr-indicator { transition: none; }
 
-  .native-ptr-indicator.is-refreshing {
-    opacity: 1;
-    transform: translateX(-50%);
-    transition: opacity 150ms ease;
+  .native-ptr-spinner { position: absolute; inset: 0; }
+
+  /* Twelve rounded spokes round a centre, as UIActivityIndicatorView draws. */
+  .native-ptr-spoke {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 9%;
+    height: 28%;
+    margin-left: -4.5%;
+    border-radius: 999px;
+    background: currentColor;
+    transform: rotate(calc(var(--i) * 30deg));
+    transform-origin: 50% 178%;
+    /* Revealed one by one as the pull goes on. */
+    opacity: clamp(0, calc(var(--native-ptr-progress, 0) * 12 - var(--i)), 1);
+  }
+
+  .native-ptr.is-refreshing .native-ptr-spoke {
+    opacity: 0.25;
+    animation: native-ptr-spoke 1s linear infinite;
+    animation-delay: calc(var(--i) * (1s / 12) - 1s);
   }
 
-  .native-ptr-indicator.is-refreshing .native-ptr-icon { animation: native-ptr-spin 800ms linear infinite; }
+  @keyframes native-ptr-spoke {
+    from { opacity: 1; }
+    to { opacity: 0.25; }
+  }
+
+  /* The content follows the finger, is held while refreshing, and eases back.
+     Transformed only while it is moved: a transform at rest, even a zero
+     one, would become the containing block of every fixed element on the
+     page. */
+  .native-ptr-content { transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1); }
 
-  @keyframes native-ptr-spin { to { transform: rotate(360deg); } }
+  .native-ptr:is(.is-pulling, .is-refreshing) .native-ptr-content {
+    transform: translateY(var(--native-ptr-shift, 0px));
+  }
+
+  .native-ptr.is-pulling .native-ptr-content { transition: none; }
 
   @media (prefers-reduced-motion: reduce) {
-    .native-ptr-indicator.is-refreshing .native-ptr-icon { animation-duration: 2400ms; }
+    .native-ptr.is-refreshing .native-ptr-spoke { animation-duration: 3s; }
+    .native-ptr-content { transition-duration: 1ms; }
   }
+
+  :root[data-native-reduce-motion] .native-ptr.is-refreshing .native-ptr-spoke { animation-duration: 3s; }
 </style>

package/resources/components/NativeSegmentedControl.stx

@@ -1,12 +1,14 @@
 <script client>
-import { haptics } from '@stacksjs/mobile'
+import { focusSegment, haptics, observeSegmentScrub, segmentForKey } from '@stacksjs/mobile'
 
 /**
  * An iOS segmented control: two to five mutually exclusive views of one screen.
  *
  * `options` is a list of strings or `{ label, value }`. Bind the choice with
  * `v-model:value` or listen for `change`. A selection taps the haptic engine
- * the way UISegmentedControl does.
+ * the way UISegmentedControl does. As there, the thumb shrinks under a
+ * finger and can be dragged across to scrub to another segment, and the
+ * arrow keys move between segments.
  */
 interface SegmentOption { label: string, value: string }
 
@@ -20,9 +22,13 @@ const options = derived<SegmentOption[]>(() => rawOptions().map(option =>
   typeof option === 'string' ? { label: option, value: option } : option))
 
 const activeIndex = derived(() => Math.max(0, options().findIndex(option => option.value === (selected() || options()[0]?.value))))
+// Where the thumb is drawn: under the finger while scrubbing, otherwise on the choice.
+const scrubIndex = state<number | null>(null)
+const pressed = state(false)
 const thumbStyle = derived(() => {
   const count = Math.max(1, options().length)
-  return `width:calc((100% - 4px) / ${count});transform:translateX(${activeIndex() * 100}%)`
+  const index = scrubIndex() ?? activeIndex()
+  return `width:calc((100% - 4px) / ${count});transform:translateX(${index * 100}%)${pressed() ? ' scale(0.95)' : ''}`
 })
 
 function choose(value: string): void {
@@ -31,9 +37,46 @@ function choose(value: string): void {
   void haptics.selection()
   emit('change', value)
 }
+
+const track = useRef('nativeSegmented')
+let stopScrub: (() => void) | null = null
+onMount(() => {
+  const element = track.current as HTMLElement | null
+  if (!element) return
+  stopScrub = observeSegmentScrub(element, {
+    count: () => options().length,
+    selected: () => activeIndex(),
+    onPress: (down) => {
+      pressed.set(down)
+      if (!down) scrubIndex.set(null)
+    },
+    onScrub: (index) => {
+      scrubIndex.set(index)
+      void haptics.selection()
+    },
+    onCommit: (index) => {
+      scrubIndex.set(null)
+      const option = options()[index]
+      if (!option || option.value === selected()) return
+      // The scrub already ticked as it crossed each segment.
+      selected.set(option.value)
+      emit('change', option.value)
+    },
+  })
+})
+onDestroy(() => stopScrub?.())
+
+function onKey(event: KeyboardEvent): void {
+  const next = segmentForKey(event.key, activeIndex(), options().length)
+  if (next === null) return
+  event.preventDefault()
+  const option = options()[next]
+  if (option) choose(option.value)
+  if (track.current) focusSegment(track.current as HTMLElement, next)
+}
 </script>
 
-<div role="tablist" :aria-label="ariaLabel()" class="native-segmented" :class="className()">
+<div ref="nativeSegmented" role="tablist" :aria-label="ariaLabel()" class="native-segmented" :class="className()" @keydown="onKey">
   <span aria-hidden="true" class="native-segmented-thumb" :style="thumbStyle()"></span>
   <button
     :for="(option, index) in options()"
@@ -42,6 +85,7 @@ function choose(value: string): void {
     role="tab"
     class="native-segmented-option"
     :aria-selected="index === activeIndex() ? 'true' : 'false'"
+    :tabindex="index === activeIndex() ? '0' : '-1'"
     @click="choose(option.value)"
   >{{ option.label }}</button>
 </div>
@@ -55,8 +99,10 @@ function choose(value: string): void {
     padding: 2px;
     border-radius: 0.6rem;
     background: var(--native-segmented-track, rgb(118 118 128 / 0.12));
+    font-size: var(--native-font-size, 17px);
     -webkit-user-select: none;
     user-select: none;
+    touch-action: pan-y;
   }
 
   .dark .native-segmented { background: var(--native-segmented-track-dark, rgb(118 118 128 / 0.24)); }
@@ -69,7 +115,7 @@ function choose(value: string): void {
     border-radius: 0.45rem;
     background: var(--native-segmented-thumb, white);
     box-shadow: 0 3px 8px rgb(0 0 0 / 0.12), 0 3px 1px rgb(0 0 0 / 0.04);
-    transition: transform 220ms cubic-bezier(0.3, 0.7, 0.4, 1);
+    transition: transform 280ms cubic-bezier(0.3, 0.7, 0.4, 1.1);
   }
 
   .dark .native-segmented-thumb { background: var(--native-segmented-thumb-dark, rgb(99 99 102)); }
@@ -82,14 +128,20 @@ function choose(value: string): void {
     border: 0;
     color: inherit;
     background: transparent;
-    font-size: 0.8125rem;
+    /* 13pt at the default text size. */
+    font-size: 0.765em;
     font-weight: 500;
     -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
   }
 
+  .native-segmented-option:focus-visible { outline: 2px solid var(--native-accent, rgb(37 99 235)); outline-offset: -2px; border-radius: 0.45rem; }
+
   .native-segmented-option[aria-selected="true"] { font-weight: 600; }
 
   @media (prefers-reduced-motion: reduce) {
     .native-segmented-thumb { transition: none; }
   }
+
+  :root[data-native-reduce-motion] .native-segmented-thumb { transition: none; }
 </style>