react-native-terra-ui 0.11.15 → 0.11.17

package/lib/module/components/page-indicator/variants/PillIndicator/index.js

@@ -1,13 +1,15 @@
 "use strict";
 
+import { View } from "react-native-unistyles/components/native/View";
 import { useMemo } from "react";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import { usePageIndicatorCore } from "../../hooks/use-page-indicator-core.js";
+import { usePageIndicatorWindow } from "../../hooks/use-page-indicator-window.js";
 import { PageIndicatorRoot } from "../../PageIndicatorRoot.js";
-import { computePageIndicatorWindowTranslate, DEFAULT_PAGE_INDICATOR_MAX_VISIBLE, PAGE_INDICATOR_SINGLE_PAGE_DURATION, pageIndicatorAxisTranslateStyle, pageIndicatorTrackMainSize, pageIndicatorViewportMainSize } from "../../utils.js";
+import { computePageIndicatorWindowTranslate, DEFAULT_PAGE_INDICATOR_MAX_VISIBLE, PAGE_INDICATOR_SINGLE_PAGE_DURATION, pageIndicatorAxisTranslateStyle, pageIndicatorSpacerStyle, pageIndicatorTrackMainSize, pageIndicatorViewportMainSize } from "../../utils.js";
 import { PillIndicatorDot } from "./PillIndicatorDot.js";
 import { PILL_INDICATOR_GEOMETRY, pillIndicatorJumpDisplayProgress } from "./utils.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function PillIndicator({
   count,
   current = 0,
@@ -35,9 +37,25 @@ export function PillIndicator({
   const viewportMainSize = pageIndicatorViewportMainSize(count, slot, dotSize, maxVisible, activeWidth);
   const fullTrackMainSize = pageIndicatorTrackMainSize(count, slot, dotSize, activeWidth);
   const overflows = count > maxVisible;
+  const {
+    start,
+    end
+  } = usePageIndicatorWindow(count, current, progress, slot, dotSize, maxVisible, activeWidth);
   const indices = useMemo(() => Array.from({
-    length: count
-  }, (_, index) => index), [count]);
+    length: end - start + 1
+  }, (_, offset) => start + offset), [start, end]);
+
+  /*
+    The track is still `count` slots wide and still scrolls the same way, so the
+    dots that are not mounted have to leave their room behind. Each unmounted
+    dot occupies exactly one slot — it is inactive, and only the active dot is
+    ever wider than `dotSize` — so the space before the window is `start` slots
+    and the space after it is whatever is left.
+     Less one gap apiece, because the row's own `gap` supplies the space between
+    a spacer and the first dot beside it.
+  */
+  const leadMainSize = start * slot - gap;
+  const tailMainSize = (count - 1 - end) * slot - gap;
   const trackStyle = useAnimatedStyle(() => {
     const displayProgress = pillIndicatorJumpDisplayProgress(progress.value, pillJump.active.value, pillJump.from.value, pillJump.to.value, pillJump.t.value);
     const translate = computePageIndicatorWindowTranslate(count, displayProgress, slot, dotSize, maxVisible, activeWidth);
@@ -48,7 +66,7 @@ export function PillIndicator({
     vertical: vertical,
     viewportMainSize: viewportMainSize,
     overflows: overflows,
-    children: /*#__PURE__*/_jsx(Animated.View, {
+    children: /*#__PURE__*/_jsxs(Animated.View, {
       style: [{
         flexDirection: vertical ? "column" : "row",
         alignItems: "center",
@@ -59,7 +77,9 @@ export function PillIndicator({
           width: fullTrackMainSize
         } : undefined)
       }, overflows ? trackStyle : null],
-      children: indices.map(index => /*#__PURE__*/_jsx(PillIndicatorDot, {
+      children: [leadMainSize > 0 && /*#__PURE__*/_jsx(View, {
+        style: pageIndicatorSpacerStyle(vertical, leadMainSize)
+      }), indices.map(index => /*#__PURE__*/_jsx(PillIndicatorDot, {
         activeColor: colors.activeColor,
         inactiveColor: colors.inactiveColor,
         count: count,
@@ -69,7 +89,9 @@ export function PillIndicator({
         vertical: vertical,
         overflows: overflows,
         maxVisible: maxVisible
-      }, index))
+      }, index)), tailMainSize > 0 && /*#__PURE__*/_jsx(View, {
+        style: pageIndicatorSpacerStyle(vertical, tailMainSize)
+      })]
     })
   });
 }

package/lib/module/components/page-indicator/variants/PillIndicator/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","Animated","useAnimatedStyle","usePageIndicatorCore","PageIndicatorRoot","computePageIndicatorWindowTranslate","DEFAULT_PAGE_INDICATOR_MAX_VISIBLE","PAGE_INDICATOR_SINGLE_PAGE_DURATION","pageIndicatorAxisTranslateStyle","pageIndicatorTrackMainSize","pageIndicatorViewportMainSize","PillIndicatorDot","PILL_INDICATOR_GEOMETRY","pillIndicatorJumpDisplayProgress","jsx","_jsx","PillIndicator","count","current","duration","activeColor","inactiveColor","vertical","maxVisible","style","colors","pillJump","progress","dotSize","gap","slot","activeWidth","viewportMainSize","fullTrackMainSize","overflows","indices","Array","from","length","_","index","trackStyle","displayProgress","value","active","to","t","translate","children","View","flexDirection","alignItems","height","width","undefined","map"],"sourceRoot":"../../../../../../src","sources":["components/page-indicator/variants/PillIndicator/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useMemo","Animated","useAnimatedStyle","usePageIndicatorCore","usePageIndicatorWindow","PageIndicatorRoot","computePageIndicatorWindowTranslate","DEFAULT_PAGE_INDICATOR_MAX_VISIBLE","PAGE_INDICATOR_SINGLE_PAGE_DURATION","pageIndicatorAxisTranslateStyle","pageIndicatorSpacerStyle","pageIndicatorTrackMainSize","pageIndicatorViewportMainSize","PillIndicatorDot","PILL_INDICATOR_GEOMETRY","pillIndicatorJumpDisplayProgress","jsx","_jsx","jsxs","_jsxs","PillIndicator","count","current","duration","activeColor","inactiveColor","vertical","maxVisible","style","colors","pillJump","progress","dotSize","gap","slot","activeWidth","viewportMainSize","fullTrackMainSize","overflows","start","end","indices","Array","from","length","_","offset","leadMainSize","tailMainSize","trackStyle","displayProgress","value","active","to","t","translate","children","View","flexDirection","alignItems","height","width","undefined","map","index"],"sourceRoot":"../../../../../../src","sources":["components/page-indicator/variants/PillIndicator/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/components/button/Button.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from "react";
 import type { PressableProps } from "react-native";
 import type { ColorToken, TerraIconName } from "../../theme/types";
-export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "danger";
 export type ButtonSize = "sm" | "md" | "lg";
 export type ButtonRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
 export type ButtonAnimation = "scale" | "opacity" | "none";

package/lib/typescript/src/components/button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0D,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAC3G,OAAO,KAAK,EAAa,cAAc,EAA8B,MAAM,cAAc,CAAC;AAK1F,OAAO,KAAK,EAAE,UAAU,EAAmB,aAAa,EAA2B,MAAM,cAAc,CAAC;AAQxG,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AACrF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AACvE,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAK3D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IAC1F,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAID,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAC;CAClB;AAOD,eAAO,MAAM,gBAAgB,QAAO,kBAA+C,CAAC;AAmEpF,QAAA,MAAM,WAAW,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,gCAQzD,CAAC;AAUF,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,GAAI,yDAAyD,eAAe,gCAW3F,CAAC;AAgBF,QAAA,MAAM,UAAU,yLAkEd,CAAC;AAEH,KAAK,eAAe,GAAG,OAAO,UAAU,GAAG;IACzC,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,KAAK,EAAE,OAAO,WAAW,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAiB,eAAe,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0D,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAC3G,OAAO,KAAK,EAAa,cAAc,EAA8B,MAAM,cAAc,CAAC;AAK1F,OAAO,KAAK,EAAE,UAAU,EAAmB,aAAa,EAA2B,MAAM,cAAc,CAAC;AAQxG,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAClG,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AACvE,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAK3D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IAC1F,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAID,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAC;CAClB;AAOD,eAAO,MAAM,gBAAgB,QAAO,kBAA+C,CAAC;AA6EpF,QAAA,MAAM,WAAW,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,gCAQzD,CAAC;AAUF,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,GAAI,yDAAyD,eAAe,gCAW3F,CAAC;AAgBF,QAAA,MAAM,UAAU,yLAkEd,CAAC;AAEH,KAAK,eAAe,GAAG,OAAO,UAAU,GAAG;IACzC,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,KAAK,EAAE,OAAO,WAAW,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAiB,eAAe,CAAC"}

package/lib/typescript/src/components/chip/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0D,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAC3G,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAE,UAAU,EAAmB,aAAa,EAAE,MAAM,cAAc,CAAC;AAI/E,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAS,CAAC;AAGhE,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA6HD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,QAAQ,GAAI,8DAA8D,aAAa,gCAa5F,CAAC;AAgBF,QAAA,MAAM,QAAQ,uLAsCZ,CAAC;AAEH,KAAK,aAAa,GAAG,OAAO,QAAQ,GAAG;IACrC,IAAI,EAAE,OAAO,QAAQ,CAAC;CACvB,CAAC;AAiBF,eAAO,MAAM,IAAI,EAA8B,aAAa,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0D,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAC3G,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAE,UAAU,EAAmB,aAAa,EAAE,MAAM,cAAc,CAAC;AAI/E,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAS,CAAC;AAGhE,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAuID,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,QAAQ,GAAI,8DAA8D,aAAa,gCAa5F,CAAC;AAgBF,QAAA,MAAM,QAAQ,uLAmDZ,CAAC;AAEH,KAAK,aAAa,GAAG,OAAO,QAAQ,GAAG;IACrC,IAAI,EAAE,OAAO,QAAQ,CAAC;CACvB,CAAC;AAiBF,eAAO,MAAM,IAAI,EAA8B,aAAa,CAAC"}

package/lib/typescript/src/components/chip/types.d.ts

@@ -4,5 +4,5 @@ export type ChipVariant = "solid" | "soft" | "outline" | "ghost";
  * Semantic color scheme, or a raw CSS color literal (`#fff`, `rgb(...)`, `hsl(...)`).
  * Has no effect when `variant="ghost"` — ghost always renders `text.primary`.
  */
-export type ChipColor = "primary" | "secondary" | "success" | "warning" | "danger" | (string & {});
+export type ChipColor = "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | (string & {});
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/components/chip/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/chip/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjE;;;GAGG;AACH,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GAER,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/chip/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjE;;;GAGG;AACH,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,WAAW,GAKX,UAAU,GACV,SAAS,GACT,SAAS,GACT,QAAQ,GAER,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC"}

package/lib/typescript/src/components/chip/utils.d.ts

@@ -10,4 +10,5 @@ export interface CustomChipColors {
     fg: string;
 }
 export declare function getCustomColorColors(literal: string, variant: "solid" | "soft" | "outline"): CustomChipColors;
+export declare function flattenOverCanvas(translucent: string, canvas: string): string;
 //# sourceMappingURL=utils.d.ts.map

package/lib/typescript/src/components/chip/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/chip/utils.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ;AAID,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GACpC,gBAAgB,CAqBlB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/chip/utils.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ;AAID,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GACpC,gBAAgB,CAqBlB;AAUD,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAK7E"}

package/lib/typescript/src/components/header/parts/HeaderGradientOverlay.d.ts

@@ -3,7 +3,7 @@
  * thins slightly toward the boundary rather than cutting content off square —
  * but never far enough to read as see-through.
  */
-export declare const HEADER_FADE_END_OPACITY = 0.85;
+export declare const HEADER_FADE_END_OPACITY = 0.9;
 export interface HeaderGradientOverlayProps {
     /** Fill color, ramped from opaque to {@link HEADER_FADE_END_OPACITY}. */
     color: string;

package/lib/typescript/src/components/header/parts/HeaderGradientOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderGradientOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderGradientOverlay.tsx"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,OAAO,CAAC;AAE5C,MAAM,WAAW,0BAA0B;IACzC,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,YAAgB,EAChB,UAAoC,GACrC,EAAE,0BAA0B,+BAc5B"}
+{"version":3,"file":"HeaderGradientOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderGradientOverlay.tsx"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAE3C,MAAM,WAAW,0BAA0B;IACzC,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,YAAgB,EAChB,UAAoC,GACrC,EAAE,0BAA0B,+BAc5B"}

package/lib/typescript/src/components/page-indicator/hooks/use-page-indicator-window.d.ts

@@ -0,0 +1,34 @@
+import { type SharedValue } from "react-native-reanimated";
+export interface PageIndicatorWindow {
+    /** First dot index to mount, inclusive. */
+    start: number;
+    /** Last dot index to mount, inclusive. */
+    end: number;
+}
+/**
+ * The slice of dots a variant should mount, kept in step with the active page.
+ *
+ * Both variants clip to a window of `maxVisible` slots and scroll a track
+ * behind it, so all but a handful of dots are drawn outside the viewport. This
+ * is what lets them skip building those: the range covers the visible window
+ * plus a generous overscan, and moves only when the active page leaves it.
+ *
+ * **Driven by `progress`, not by `current`.** `current` may be a shared value
+ * for scroll-linked motion, in which case React never re-renders on a page
+ * change and a range derived from props would sit still while the track slid
+ * out from under it. `progress` is the one place both spellings of `current`
+ * have already been resolved into a single number.
+ *
+ * The reaction only reaches JS when the page moves *outside* the mounted range
+ * — not on every frame, and not on every page. A one-page step normally costs
+ * no render at all, because the neighbour was already mounted; a long jump
+ * costs one render per window it crosses rather than one per page.
+ *
+ * Known limit: during a jump of many pages the track slides faster than the
+ * range is re-rendered, so dots in the middle of that flight may not be mounted
+ * as they pass. They are identical inactive dots moving too fast to read, and
+ * the alternative — mounting every page between the two — is the cost this
+ * exists to avoid.
+ */
+export declare function usePageIndicatorWindow(count: number, current: number | SharedValue<number> | undefined, progress: SharedValue<number>, slot: number, dotSize: number, maxVisible: number, activeMainSize?: number): PageIndicatorWindow;
+//# sourceMappingURL=use-page-indicator-window.d.ts.map

package/lib/typescript/src/components/page-indicator/hooks/use-page-indicator-window.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-page-indicator-window.d.ts","sourceRoot":"","sources":["../../../../../../src/components/page-indicator/hooks/use-page-indicator-window.ts"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,WAAW,EAAuC,MAAM,yBAAyB,CAAC;AAIzG,MAAM,WAAW,mBAAmB;IAClC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,EACjD,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,EAC7B,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,mBAAmB,CAqCrB"}

package/lib/typescript/src/components/page-indicator/utils.d.ts

@@ -27,10 +27,51 @@ export declare function pageIndicatorAxisTranslateStyle(vertical: boolean, trans
 };
 /** Clips an overflowing track to the visible viewport along the main axis. */
 export declare function pageIndicatorViewportClipStyle(vertical: boolean, viewportMainSize: number, crossSize?: number): ViewStyle;
+/**
+ * Holds the room of dots a variant chose not to mount.
+ *
+ * The track keeps its full width and keeps scrolling by the same amount, so
+ * skipped dots still have to occupy their slots — otherwise the mounted ones
+ * slide up the track and the window shows the wrong pages.
+ */
+export declare function pageIndicatorSpacerStyle(vertical: boolean, mainSize: number): ViewStyle;
 /** Scale for a slot inside the window given the active slot. */
 export declare function pageIndicatorWindowSlotScale(positionInWindow: number, activeSlot: number, maxVisible: number): number;
 export declare function pageIndicatorTrackMainSize(count: number, slot: number, dotSize: number, activeMainSize?: number): number;
 export declare function pageIndicatorViewportMainSize(count: number, slot: number, dotSize: number, maxVisible: number, activeMainSize?: number): number;
 export declare function computePageIndicatorWindowTranslate(count: number, progress: number, slot: number, dotSize: number, maxVisible: number, activeMainSize?: number): number;
 export declare function pageIndicatorWindowScale(index: number, displayProgress: number, count: number, slot: number, dotSize: number, maxVisible: number, activeMainSize?: number): number;
+/**
+ * Dots kept mounted beyond each edge of the visible window.
+ *
+ * One full window's worth. The window itself is `maxVisible` slots wide, so
+ * this leaves a whole screenful of slack on either side — enough that ordinary
+ * navigation (a swipe, a few pages at a time) never outruns the mounted range
+ * between the page change and React re-rendering with a new one.
+ */
+export declare const PAGE_INDICATOR_WINDOW_OVERSCAN = 5;
+/**
+ * Which dot indices are worth mounting, inclusive, for an active page of
+ * `anchor`.
+ *
+ * An indicator draws `maxVisible` slots and clips the rest, and every dot more
+ * than one page from the active one is drawn identically — same size, same
+ * scale, same opacity, same colour. Mounting one view per page therefore costs
+ * an animated style per page to render something nobody can see: at 500 pages
+ * that is 500 worklets for five visible dots, and it lands on every page
+ * change. Bounding what is mounted is what stops the indicator's cost scaling
+ * with the length of the thing it indicates.
+ *
+ * Derived from `computePageIndicatorWindowTranslate`, the same function that
+ * positions the track, so the mounted range and the visible window cannot
+ * disagree about where the window is — including at the ends, where the
+ * translate clamps and the window stops following the active page.
+ *
+ * Below the overflow threshold every dot is visible, so the range is the whole
+ * track and nothing changes.
+ */
+export declare function pageIndicatorMountedRange(count: number, anchor: number, slot: number, dotSize: number, maxVisible: number, activeMainSize?: number, overscan?: number): {
+    start: number;
+    end: number;
+};
 //# sourceMappingURL=utils.d.ts.map

package/lib/typescript/src/components/page-indicator/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/page-indicator/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,uDAAuD;AACvD,eAAO,MAAM,mCAAmC,MAAM,CAAC;AAEvD,0EAA0E;AAC1E,eAAO,MAAM,uCAAuC,MAAM,CAAC;AAE3D,wDAAwD;AACxD,eAAO,MAAM,sCAAsC,MAAM,CAAC;AAE1D,0EAA0E;AAC1E,eAAO,MAAM,kCAAkC,IAAI,CAAC;AAMpD,+CAA+C;AAC/C,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAE9E;AAED;;;;GAIG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAQ9E;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,GAClC,KAAK,IAAI,WAAW,CAAC,MAAM,CAAC,CAE9B;AAED,wEAAwE;AACxE,wBAAgB,+BAA+B,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM;;;;;;EAKnF;AAED,8EAA8E;AAC9E,wBAAgB,8BAA8B,CAC5C,QAAQ,EAAE,OAAO,EACjB,gBAAgB,EAAE,MAAM,EACxB,SAAS,CAAC,EAAE,MAAM,GACjB,SAAS,CAcX;AAQD,gEAAgE;AAChE,wBAAgB,4BAA4B,CAC1C,gBAAgB,EAAE,MAAM,EACxB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,GACjB,MAAM,CA2BR;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,cAAc,SAAU,GACvB,MAAM,CAER;AAED,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAGR;AAED,wBAAgB,mCAAmC,CACjD,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAUR;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,MAAM,EACb,eAAe,EAAE,MAAM,EACvB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAiBR"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/page-indicator/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,uDAAuD;AACvD,eAAO,MAAM,mCAAmC,MAAM,CAAC;AAEvD,0EAA0E;AAC1E,eAAO,MAAM,uCAAuC,MAAM,CAAC;AAE3D,wDAAwD;AACxD,eAAO,MAAM,sCAAsC,MAAM,CAAC;AAE1D,0EAA0E;AAC1E,eAAO,MAAM,kCAAkC,IAAI,CAAC;AAMpD,+CAA+C;AAC/C,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAE9E;AAED;;;;GAIG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAQ9E;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,GAClC,KAAK,IAAI,WAAW,CAAC,MAAM,CAAC,CAE9B;AAED,wEAAwE;AACxE,wBAAgB,+BAA+B,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM;;;;;;EAKnF;AAED,8EAA8E;AAC9E,wBAAgB,8BAA8B,CAC5C,QAAQ,EAAE,OAAO,EACjB,gBAAgB,EAAE,MAAM,EACxB,SAAS,CAAC,EAAE,MAAM,GACjB,SAAS,CAcX;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,CAEvF;AAQD,gEAAgE;AAChE,wBAAgB,4BAA4B,CAC1C,gBAAgB,EAAE,MAAM,EACxB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,GACjB,MAAM,CA2BR;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,cAAc,SAAU,GACvB,MAAM,CAER;AAED,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAGR;AAED,wBAAgB,mCAAmC,CACjD,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAUR;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,MAAM,EACb,eAAe,EAAE,MAAM,EACvB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAiBR;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,8BAA8B,IAAI,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,EACxB,QAAQ,SAAiC,GACxC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAmBhC"}

package/lib/typescript/src/components/page-indicator/variants/DotIndicator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/page-indicator/variants/DotIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAgB/C,MAAM,WAAW,iBAAiB;IAChC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,iCAAiC;IACjC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,gCAAgC;IAChC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAW,EACX,QAA8C,EAC9C,WAAW,EACX,aAAa,EACb,YAAY,EACZ,OAAe,EACf,QAAgB,EAChB,UAA+C,EAC/C,KAAK,GACN,EAAE,iBAAiB,+BAiEnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/page-indicator/variants/DotIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAiB/C,MAAM,WAAW,iBAAiB;IAChC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,iCAAiC;IACjC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,gCAAgC;IAChC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAW,EACX,QAA8C,EAC9C,WAAW,EACX,aAAa,EACb,YAAY,EACZ,OAAe,EACf,QAAgB,EAChB,UAA+C,EAC/C,KAAK,GACN,EAAE,iBAAiB,+BA2EnB"}

package/lib/typescript/src/components/page-indicator/variants/PillIndicator/index.d.ts

@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle } from "react-native";
+import { type StyleProp, type ViewStyle } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 import type { ColorToken } from "../../../../theme/types";
 export interface PillIndicatorProps {

package/lib/typescript/src/components/page-indicator/variants/PillIndicator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/page-indicator/variants/PillIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAc/C,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,iCAAiC;IACjC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAW,EACX,QAA8C,EAC9C,WAAW,EACX,aAAa,EACb,QAAgB,EAChB,UAA+C,EAC/C,KAAK,GACN,EAAE,kBAAkB,+BAyEpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/page-indicator/variants/PillIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAgB/C,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,iCAAiC;IACjC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAW,EACX,QAA8C,EAC9C,WAAW,EACX,aAAa,EACb,QAAgB,EAChB,UAA+C,EAC/C,KAAK,GACN,EAAE,kBAAkB,+BAqGpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-terra-ui",
-  "version": "0.11.15",
+  "version": "0.11.17",
   "description": "Themeable React Native UI components built on react-native-unistyles",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/button/Button.tsx

@@ -12,7 +12,7 @@ import { PressableScale } from "../pressable";
 import { Spinner } from "../spinner";
 import { Text } from "../text";
 
-export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "danger";
 export type ButtonSize = "sm" | "md" | "lg";
 export type ButtonRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
 export type ButtonAnimation = "scale" | "opacity" | "none";
@@ -92,6 +92,16 @@ function getColors(variant: ButtonVariant, theme: TerraTheme): ButtonColors {
         borderWidth: 0,
         fg: get("neutral.solid.fg"),
       };
+    // The tonal step between the solid `secondary` and the borderless `outline`
+    // — accent-hued like `primary`, but at soft weight so it reads as the
+    // quieter of two coloured actions sitting side by side.
+    case "tertiary":
+      return {
+        bg: get("accent.soft.bg"),
+        border: get("accent.soft.bg"),
+        borderWidth: 0,
+        fg: get("accent.soft.fg"),
+      };
     case "outline":
       return {
         bg: "transparent",

package/src/components/chip/Chip.tsx

@@ -8,7 +8,7 @@ import { resolveThemeColor } from "#utils/resolve-theme-color";
 import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "#utils/typography";
 import { Icon } from "../icon";
 import type { ChipColor, ChipSize, ChipVariant } from "./types";
-import { type CustomChipColors, getCustomColorColors } from "./utils";
+import { type CustomChipColors, flattenOverCanvas, getCustomColorColors } from "./utils";
 
 export interface ChipProps extends ViewProps {
   size?: ChipSize;
@@ -48,7 +48,9 @@ const ChipContext = createContext<ChipContextValue>({
 // The chip's own paint (background + border) is a style, so named schemes
 // (primary/secondary/success/warning/danger) are resolved declaratively via
 // unistyles `compoundVariants` on `styles.base` — one entry per (color, variant)
-// pair, straight from the spec's token table.
+// pair, straight from the spec's token table. `tertiary` is the exception: it
+// has no row of its own tokens, only a fixed reuse of `accent.soft.*` — see
+// its `compoundVariants` rows below.
 //
 // The foreground is *not* a style on this View — it is inherited by the label
 // and icon. It therefore lives here as a token table and is passed down
@@ -59,9 +61,9 @@ const ChipContext = createContext<ChipContextValue>({
 // can't be a compound variant condition — see `getCustomColorColors` in
 // `utils.ts` for how it's derived instead.
 
-const SCHEME_NAMES = new Set(["primary", "secondary", "success", "warning", "danger"]);
+const SCHEME_NAMES = new Set(["primary", "secondary", "tertiary", "success", "warning", "danger"]);
 
-type ChipScheme = "primary" | "secondary" | "success" | "warning" | "danger";
+type ChipScheme = "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger";
 type ChipPaintedVariant = Exclude<ChipVariant, "ghost">;
 
 // `ghost` is `outline` with its border taken away, so it has no colors of its
@@ -78,6 +80,14 @@ const FG_TOKEN: Record<ChipScheme, Record<ChipPaintedVariant, ColorToken>> = {
     soft: "accent.soft.fg",
     outline: "accent.text",
   },
+  // Fixed to the soft accent foreground at every variant — `tertiary` always
+  // renders as the one look `Button`'s `tertiary` variant has, never a ring
+  // or an opaque fill of its own.
+  tertiary: {
+    solid: "accent.soft.fg",
+    soft: "accent.soft.fg",
+    outline: "accent.soft.fg",
+  },
   secondary: {
     solid: "neutral.solid.fg",
     soft: "neutral.soft.fg",
@@ -189,7 +199,7 @@ const ChipRoot = forwardRef<ComponentRef<typeof View>, ChipProps>(function Chip(
   ref
 ) {
   const { theme } = useUnistyles();
-  // Compound variants only match the 5 named schemes above — an arbitrary
+  // Compound variants only match the named schemes above — an arbitrary
   // literal never matches one, so it's cast to satisfy `useVariants`'s
   // literal-union type while still comparing against the real value below.
   styles.useVariants({ color: color as ChipScheme, variant, size });
@@ -211,13 +221,26 @@ const ChipRoot = forwardRef<ComponentRef<typeof View>, ChipProps>(function Chip(
           borderWidth: customColors.borderWidth,
         }
       : null;
+  // `secondary`/`soft`'s token is a translucent tint (see `flattenOverCanvas`)
+  // — computed here, not as a compound variant, since both inputs are
+  // resolved theme values rather than a bounded set of options.
+  const secondarySoftPaint =
+    color === "secondary" && variant === "soft"
+      ? {
+          backgroundColor: flattenOverCanvas(theme.color["neutral.soft.bg"], theme.color["surface.canvas"]),
+        }
+      : null;
   // Last of the paint layers, so an explicit fill beats both the variant's own
   // and the one derived from a custom color literal.
   const backgroundPaint = background ? { backgroundColor: resolveThemeColor(background, theme) } : null;
 
   return (
     <ChipContext.Provider value={{ color: fg, size }}>
-      <View ref={ref} style={[styles.base, customPaint, backgroundPaint, style]} {...rest}>
+      <View
+        ref={ref}
+        style={[styles.base, secondarySoftPaint, customPaint, backgroundPaint, style]}
+        {...rest}
+      >
         {renderChildren(children)}
       </View>
     </ChipContext.Provider>
@@ -321,6 +344,7 @@ const styles = StyleSheet.create((theme) => {
         color: {
           primary: {},
           secondary: {},
+          tertiary: {},
           success: {},
           warning: {},
           danger: {},
@@ -365,6 +389,34 @@ const styles = StyleSheet.create((theme) => {
             borderWidth: 1,
           },
         },
+        // `tertiary` ignores `variant` entirely — solid, soft, and outline
+        // all paint the same borderless accent-soft fill, matching `Button`'s
+        // single-look `tertiary`. (`ghost` needs no row: the top-level
+        // `ghost` style variant already clears paint for every color.)
+        {
+          color: "tertiary",
+          variant: "solid",
+          styles: {
+            backgroundColor: c["accent.soft.bg"],
+            borderWidth: 0,
+          },
+        },
+        {
+          color: "tertiary",
+          variant: "soft",
+          styles: {
+            backgroundColor: c["accent.soft.bg"],
+            borderWidth: 0,
+          },
+        },
+        {
+          color: "tertiary",
+          variant: "outline",
+          styles: {
+            backgroundColor: c["accent.soft.bg"],
+            borderWidth: 0,
+          },
+        },
         {
           color: "secondary",
           variant: "solid",

package/src/components/chip/types.ts

@@ -8,6 +8,11 @@ export type ChipVariant = "solid" | "soft" | "outline" | "ghost";
 export type ChipColor =
   | "primary"
   | "secondary"
+  // Always renders as a soft accent tint, whatever `variant` is passed — the
+  // same fixed look `Button`'s `tertiary` variant has, and derived from the
+  // same tokens (`accent.soft.bg`/`accent.soft.fg`) rather than a hue of its
+  // own. See `Chip.tsx`'s `FG_TOKEN`/`compoundVariants` for where.
+  | "tertiary"
   | "success"
   | "warning"
   | "danger"

package/src/components/chip/utils.ts

@@ -1,4 +1,4 @@
-import { readableOn, withAlpha } from "#utils/color-utils";
+import { compositeOver, parseColor, readableOn, rgbToHex, withAlpha } from "#utils/color-utils";
 
 // A custom color literal (hex/rgb/hsl) can't be a unistyles compound variant
 // condition (it's not a bounded set of options), so it's derived here
@@ -44,3 +44,18 @@ export function getCustomColorColors(
     fg: readableOn(literal),
   };
 }
+
+// `secondary`'s soft fill (`neutral.soft.bg`) is a translucent tint — see
+// `theme/tokens/light.ts` — so wherever the chip sits shows through it. That
+// reads fine on the canvas the token was picked against, but drifts on any
+// other backdrop (a raised card, an image). Flattening it once here, against
+// the canvas, keeps the chip the same shade everywhere: not a computed
+// unistyles compound variant, since both inputs are resolved theme values
+// rather than a bounded set of options — the same reason a custom color
+// literal is derived here instead of there.
+export function flattenOverCanvas(translucent: string, canvas: string): string {
+  const front = parseColor(translucent);
+  const back = parseColor(canvas);
+  if (!front || !back) return translucent;
+  return rgbToHex(compositeOver(front, back, front.a));
+}

package/src/components/header/parts/HeaderGradientOverlay.tsx

@@ -7,7 +7,7 @@ import Svg, { Defs, Rect, Stop, LinearGradient as SvgLinearGradient } from "reac
  * thins slightly toward the boundary rather than cutting content off square —
  * but never far enough to read as see-through.
  */
-export const HEADER_FADE_END_OPACITY = 0.85;
+export const HEADER_FADE_END_OPACITY = 0.9;
 
 export interface HeaderGradientOverlayProps {
   /** Fill color, ramped from opaque to {@link HEADER_FADE_END_OPACITY}. */

package/src/components/header/parts/HeaderSurface.tsx

@@ -26,7 +26,7 @@ export function HeaderSurface({ color, animatedStyle, accessory }: HeaderSurface
       <HeaderGradientOverlay
         color={color}
         startOpacity={accessory ? HEADER_FADE_END_OPACITY : 1}
-        endOpacity={accessory ? 0.8 : HEADER_FADE_END_OPACITY}
+        endOpacity={accessory ? 0.85 : HEADER_FADE_END_OPACITY}
       />
     </Animated.View>
   );

package/src/components/page-indicator/hooks/use-page-indicator-window.ts

@@ -0,0 +1,84 @@
+import { useMemo, useState } from "react";
+
+import { runOnJS, type SharedValue, useAnimatedReaction, useSharedValue } from "react-native-reanimated";
+
+import { isPageIndicatorSharedValue, pageIndicatorMountedRange } from "../utils";
+
+export interface PageIndicatorWindow {
+  /** First dot index to mount, inclusive. */
+  start: number;
+  /** Last dot index to mount, inclusive. */
+  end: number;
+}
+
+/**
+ * The slice of dots a variant should mount, kept in step with the active page.
+ *
+ * Both variants clip to a window of `maxVisible` slots and scroll a track
+ * behind it, so all but a handful of dots are drawn outside the viewport. This
+ * is what lets them skip building those: the range covers the visible window
+ * plus a generous overscan, and moves only when the active page leaves it.
+ *
+ * **Driven by `progress`, not by `current`.** `current` may be a shared value
+ * for scroll-linked motion, in which case React never re-renders on a page
+ * change and a range derived from props would sit still while the track slid
+ * out from under it. `progress` is the one place both spellings of `current`
+ * have already been resolved into a single number.
+ *
+ * The reaction only reaches JS when the page moves *outside* the mounted range
+ * — not on every frame, and not on every page. A one-page step normally costs
+ * no render at all, because the neighbour was already mounted; a long jump
+ * costs one render per window it crosses rather than one per page.
+ *
+ * Known limit: during a jump of many pages the track slides faster than the
+ * range is re-rendered, so dots in the middle of that flight may not be mounted
+ * as they pass. They are identical inactive dots moving too fast to read, and
+ * the alternative — mounting every page between the two — is the cost this
+ * exists to avoid.
+ */
+export function usePageIndicatorWindow(
+  count: number,
+  current: number | SharedValue<number> | undefined,
+  progress: SharedValue<number>,
+  slot: number,
+  dotSize: number,
+  maxVisible: number,
+  activeMainSize = dotSize
+): PageIndicatorWindow {
+  const virtualized = count > maxVisible;
+
+  /*
+    Seeded from `current` so an indicator mounted straight onto a late page
+    draws that page's dots on its first frame rather than the first page's.
+    Zero for a shared value, which cannot be read during render — the reaction
+    below corrects it on the first frame that matters.
+  */
+  const [anchor, setAnchor] = useState(() =>
+    current === undefined || isPageIndicatorSharedValue(current) ? 0 : Math.round(current)
+  );
+
+  const window = useMemo(
+    () => pageIndicatorMountedRange(count, anchor, slot, dotSize, maxVisible, activeMainSize),
+    [count, anchor, slot, dotSize, maxVisible, activeMainSize]
+  );
+
+  /*
+    The live range, on the UI thread, so the reaction can decide for itself
+    whether a page change matters. Reading React state from a worklet is not an
+    option, and crossing to JS to ask would defeat the point of asking.
+  */
+  const mounted = useSharedValue(window);
+  mounted.value = window;
+
+  useAnimatedReaction(
+    () => Math.round(progress.value),
+    (page) => {
+      if (!virtualized) return;
+      const { start, end } = mounted.value;
+      if (page < start || page > end) runOnJS(setAnchor)(page);
+    },
+    [virtualized]
+  );
+
+  return window;
+}