1.0.6

API.md

@@ -485,13 +485,13 @@ hooks.
 
 ### Surface and color
 
-| Variable                  | What it controls                                         |
-| ------------------------- | -------------------------------------------------------- |
-| `--rsc-bg`                | Base background fallback for the control.                |
-| `--rsc-surface`           | Default track/surface fill for the bundled skin.         |
-| `--rsc-border-color`      | Inset border color for the default surface track.        |
-| `--rsc-text-color`        | Default option text color.                               |
-| `--rsc-active-text-color` | Selected, hover, indicator and active option text color. |
+| Variable                  | What it controls                                  |
+| ------------------------- | ------------------------------------------------- |
+| `--rsc-bg`                | Base background fallback for the control.         |
+| `--rsc-surface`           | Default track/surface fill for the bundled skin.  |
+| `--rsc-border-color`      | Inset border color for the default surface track. |
+| `--rsc-text-color`        | Default option text color.                        |
+| `--rsc-active-text-color` | Selected, indicator and active option text color. |
 
 ### Typography
 
@@ -510,7 +510,7 @@ hooks.
 | ------------------------ | ------------------------------------------------------------------- |
 | `--rsc-border-radius`    | Radius for the container track in the bundled skin.                 |
 | `--rsc-container-offset` | Default inset used by the bundled skin.                             |
-| `--rsc-padding`          | List padding; defaults to `--rsc-container-offset`.                 |
+| `--rsc-padding`          | Surface/list inner padding; defaults to `--rsc-container-offset`.   |
 | `--rsc-gap`              | Gap between option slots.                                           |
 | `--rsc-label-gap`        | Gap between label/description content and cloned indicator content. |
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-segmented-choice",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Accessible React segmented control with CSS-first customization, native radio semantics, drag-to-select interaction and customizable indicator geometry.",
   "keywords": [
     "a11y",

src/SegmentedChoice/SegmentedChoice.css

@@ -376,9 +376,11 @@
   color: var(--rsc-active-text-color);
 }
 
-.rsc-root[data-disabled='false'] .rsc-option[data-disabled='false']:hover .rsc-option-content {
-  color: var(--rsc-active-text-color);
-  color: color-mix(in srgb, var(--rsc-active-text-color) 84%, var(--rsc-text-color));
+.rsc-root[data-disabled='false']
+  .rsc-option[data-disabled='false']:not([data-selected='true']):hover
+  .rsc-option-content {
+  color: var(--rsc-text-color);
+  color: color-mix(in srgb, var(--rsc-text-color) 84%, var(--rsc-active-text-color));
 }
 
 .rsc-option[data-disabled='true'] .rsc-option-content {

src/SegmentedChoice/SegmentedChoice.tsx

@@ -65,28 +65,6 @@ function setForwardedRef<T>(ref: React.ForwardedRef<T>, value: T) {
   }
 }
 
-function resolveIndicatorInsetPx({
-  indicatorInset,
-  selectionMode,
-  trackStyle,
-  unstyled,
-}: {
-  indicatorInset: number | undefined;
-  selectionMode: string;
-  trackStyle: string;
-  unstyled: boolean;
-}) {
-  if (indicatorInset !== undefined) {
-    return indicatorInset;
-  }
-
-  if (!unstyled && selectionMode === 'underlay' && trackStyle === 'surface') {
-    return 1;
-  }
-
-  return 0;
-}
-
 function resolveShouldRenderAnchor({
   anchorHeight,
   anchorWidth,
@@ -263,12 +241,7 @@ function InnerSegmentedChoice<T extends SegmentedChoiceValue>(
 
   // Layout flags keep the later hooks/render logic readable without changing behavior.
   const indicatorBorderWidthPx = indicatorConfig.borderWidth ?? 0;
-  const indicatorInsetPx = resolveIndicatorInsetPx({
-    indicatorInset: indicatorConfig.inset,
-    selectionMode,
-    trackStyle: trackConfig.style,
-    unstyled,
-  });
+  const indicatorInsetPx = indicatorConfig.inset ?? 0;
   const indicatorSizeAdjustment =
     indicatorInsetPx * 2 + (indicatorConfig.style === 'ring' ? indicatorBorderWidthPx * 2 : 0);
   const hasExplicitIndicatorSize =
@@ -364,7 +337,26 @@ function InnerSegmentedChoice<T extends SegmentedChoiceValue>(
     orientation,
     trackLayout: trackConfig.layout,
   });
+  const equalDistributionMeasurementKey = useMemo(
+    () =>
+      [
+        optionLayoutConfig.sizing,
+        size,
+        orientation,
+        unstyled ? 'unstyled' : 'styled',
+        options
+          .map(
+            option =>
+              `${option.value}:${typeof option.label === 'string' ? option.label : ''}:${
+                option.description ? 'description' : ''
+              }`
+          )
+          .join('|'),
+      ].join('|'),
+    [optionLayoutConfig.sizing, options, orientation, size, unstyled]
+  );
   const equalDistributionLayout = useEqualDistributionLayout({
+    measurementKey: equalDistributionMeasurementKey,
     optionSizing: optionLayoutConfig.sizing,
     optionContentRefs,
     optionCount: options.length,

src/SegmentedChoice/hooks/useEqualDistributionLayout.ts

@@ -1,17 +1,19 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { useObservedMeasurement } from './useObservedMeasurement';
 
 export type EqualDistributionLayout = {
   blockSize: number;
   inlineSize: number;
+  measurementKey: string;
   visible: boolean;
 };
 
-function getInitialLayout(): EqualDistributionLayout {
+function getInitialLayout(measurementKey: string): EqualDistributionLayout {
   return {
     blockSize: 0,
     inlineSize: 0,
+    measurementKey,
     visible: false,
   };
 }
@@ -57,37 +59,60 @@ function measureEqualDistributionLayout({
   return {
     blockSize: Math.max(...sizes.map(size => size.blockSize)),
     inlineSize: Math.max(...sizes.map(size => size.inlineSize)),
-  } satisfies Omit<EqualDistributionLayout, 'visible'>;
+  } satisfies Omit<EqualDistributionLayout, 'measurementKey' | 'visible'>;
 }
 
 export function useEqualDistributionLayout({
+  measurementKey,
   optionSizing,
   optionContentRefs,
   optionCount,
 }: {
+  measurementKey: string;
   optionSizing: 'equal' | 'content' | 'fixed';
   optionContentRefs: React.RefObject<Array<HTMLSpanElement | null>>;
   optionCount: number;
 }) {
-  const [layout, setLayout] = useState<EqualDistributionLayout>(getInitialLayout);
+  const [layout, setLayout] = useState<EqualDistributionLayout>(() =>
+    getInitialLayout(measurementKey)
+  );
+  const layoutIsCurrent = layout.measurementKey === measurementKey;
+  const currentLayout = layoutIsCurrent ? layout : getInitialLayout(measurementKey);
+
+  useEffect(() => {
+    if (layoutIsCurrent) {
+      return;
+    }
+
+    setLayout(getInitialLayout(measurementKey));
+  }, [layoutIsCurrent, measurementKey]);
 
   const measure = useCallback(() => {
+    if (!layoutIsCurrent) {
+      return;
+    }
+
     const measuredLayout = measureEqualDistributionLayout({
       optionSizing,
       optionContentRefs,
       optionCount,
     });
 
     if (!measuredLayout) {
-      setLayout(current => (current.visible ? getInitialLayout() : current));
+      setLayout(current =>
+        current.visible || current.measurementKey !== measurementKey
+          ? getInitialLayout(measurementKey)
+          : current
+      );
       return;
     }
 
     setLayout({
       ...measuredLayout,
+      measurementKey,
       visible: true,
     });
-  }, [optionSizing, optionContentRefs, optionCount]);
+  }, [layoutIsCurrent, measurementKey, optionSizing, optionContentRefs, optionCount]);
 
   const observeElements = useCallback(
     () => optionContentRefs.current.slice(0, optionCount),
@@ -99,5 +124,5 @@ export function useEqualDistributionLayout({
     observeElements,
   });
 
-  return layout;
+  return currentLayout;
 }