@womp/kookie-ui 0.24.0 → 0.25.0

package/src/components/popover.tsx

@@ -105,7 +105,8 @@ const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentPro
             collisionPadding={10}
             {...contentProps}
             ref={combinedRef}
-            aria-labelledby={labelId}
+            // A Toolbar.Title names the panel; without one, the caller's own value stands.
+            aria-labelledby={labelId ?? contentProps['aria-labelledby']}
             className={classNames('kui-PopperContent', 'kui-PopoverContent', className)}
           >
             <PopoverContentContext.Provider value={React.useMemo(() => ({ contentRef, setToolbarOffset, setLabelId }), [setToolbarOffset])}>
@@ -135,9 +136,7 @@ type PopoverAnchorElement = React.ElementRef<typeof PopoverPrimitive.Anchor>;
 interface PopoverAnchorProps
   extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor> {}
 const PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAnchorProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <PopoverPrimitive.Anchor {...props} ref={forwardedRef} />
-  ),
+  (props, forwardedRef) => <PopoverPrimitive.Anchor {...props} ref={forwardedRef} />,
 );
 
 PopoverAnchor.displayName = 'Popover.Anchor';
@@ -187,11 +186,11 @@ const PopoverToolbarBase = React.forwardRef<PopoverToolbarElement, PopoverToolba
     );
   },
 );
-(PopoverToolbarBase as any).displayName = 'Popover.Toolbar';
+PopoverToolbarBase.displayName = 'Popover.Toolbar';
 
-type SectionProps = React.ComponentPropsWithoutRef<'div'>;
+type PopoverToolbarSectionProps = React.ComponentPropsWithoutRef<'div'>;
 
-const PopoverToolbarLeft = React.forwardRef<HTMLDivElement, SectionProps>(
+const PopoverToolbarLeft = React.forwardRef<HTMLDivElement, PopoverToolbarSectionProps>(
   ({ className, ...props }, ref) => (
     <div
       {...props}
@@ -202,7 +201,7 @@ const PopoverToolbarLeft = React.forwardRef<HTMLDivElement, SectionProps>(
 );
 PopoverToolbarLeft.displayName = 'Popover.Toolbar.Left';
 
-const PopoverToolbarCenter = React.forwardRef<HTMLDivElement, SectionProps>(
+const PopoverToolbarCenter = React.forwardRef<HTMLDivElement, PopoverToolbarSectionProps>(
   ({ className, ...props }, ref) => (
     <div
       {...props}
@@ -213,7 +212,7 @@ const PopoverToolbarCenter = React.forwardRef<HTMLDivElement, SectionProps>(
 );
 PopoverToolbarCenter.displayName = 'Popover.Toolbar.Center';
 
-const PopoverToolbarRight = React.forwardRef<HTMLDivElement, SectionProps>(
+const PopoverToolbarRight = React.forwardRef<HTMLDivElement, PopoverToolbarSectionProps>(
   ({ className, ...props }, ref) => (
     <div
       {...props}
@@ -224,8 +223,8 @@ const PopoverToolbarRight = React.forwardRef<HTMLDivElement, SectionProps>(
 );
 PopoverToolbarRight.displayName = 'Popover.Toolbar.Right';
 
-type TitleProps = React.ComponentPropsWithoutRef<'span'>;
-const PopoverToolbarTitle = React.forwardRef<HTMLSpanElement, TitleProps>(
+type PopoverToolbarTitleProps = React.ComponentPropsWithoutRef<'span'>;
+const PopoverToolbarTitle = React.forwardRef<HTMLSpanElement, PopoverToolbarTitleProps>(
   ({ className, id: idProp, ...props }, ref) => {
     const ctx = usePopoverContentContext('Popover.Toolbar.Title');
     const reactId = React.useId();
@@ -276,4 +275,7 @@ export type {
   PopoverTriggerProps as TriggerProps,
   PopoverCloseProps as CloseProps,
   PopoverAnchorProps as AnchorProps,
+  PopoverToolbarProps as ToolbarProps,
+  PopoverToolbarSectionProps as ToolbarSectionProps,
+  PopoverToolbarTitleProps as ToolbarTitleProps,
 };

package/src/components/progress.css

@@ -28,7 +28,15 @@
    * `.kui-ProgressRoot` clips the overhang. `max()` keeps a sliver of the bar
    * visible at very low values, as the width form did.
    */
-  transform: translateX(calc(-100% + max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height))));
+  /* In RTL the bar fills from the right: --progress-direction flips the slide. */
+  --progress-direction: 1;
+  transform: translateX(
+    calc(var(--progress-direction) * (-100% + max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height))))
+  );
+
+  &:where(:dir(rtl)) {
+    --progress-direction: -1;
+  }
 
   &:where([data-state='indeterminate']) {
     animation-name: kui-progress-indicator-indeterminate-grow;
@@ -41,20 +49,27 @@
 
 @keyframes kui-progress-indicator-indeterminate-grow {
   0% {
-    transform: translateX(calc(-100% + var(--progress-scale-initial) * 100%));
+    transform: translateX(calc(var(--progress-direction) * (-100% + var(--progress-scale-initial) * 100%)));
   }
   20% {
-    transform: translateX(calc(-100% + var(--progress-scale-step-1) * 100%));
+    transform: translateX(calc(var(--progress-direction) * (-100% + var(--progress-scale-step-1) * 100%)));
   }
   30% {
-    transform: translateX(calc(-100% + var(--progress-scale-step-2) * 100%));
+    transform: translateX(calc(var(--progress-direction) * (-100% + var(--progress-scale-step-2) * 100%)));
   }
   40%,
   50% {
-    transform: translateX(calc(-100% + var(--progress-scale-step-3) * 100%));
+    transform: translateX(calc(var(--progress-direction) * (-100% + var(--progress-scale-step-3) * 100%)));
   }
   100% {
-    transform: translateX(calc(-100% + var(--progress-scale-final) * 100%));
+    transform: translateX(calc(var(--progress-direction) * (-100% + var(--progress-scale-final) * 100%)));
+  }
+}
+
+/* A busy indicator keeps moving when motion is reduced, more slowly. */
+@media (prefers-reduced-motion: reduce) {
+  .kui-ProgressIndicator:where([data-state='indeterminate']) {
+    animation-duration: calc(var(--progress-duration) * 3);
   }
 }
 
@@ -95,3 +110,15 @@
     background-color: var(--accent-solid);
   }
 }
+
+/* Forced colors drop the track's shadow and paint both backgrounds as Canvas: outline the track
+   and fill the bar with Highlight so the progress shows. Last, so it wins over the variants. */
+@media (forced-colors: active) {
+  .kui-ProgressRoot {
+    border: 1px solid CanvasText;
+  }
+
+  .kui-ProgressIndicator {
+    background-color: Highlight;
+  }
+}

package/src/components/progress.tsx

@@ -22,8 +22,10 @@ const Progress = React.forwardRef<ProgressElement, ProgressProps>((props, forwar
     progressPropDefs
   );
 
-  // `null` and `undefined` both mean indeterminate, as in Radix, so both keep a custom duration.
-  const isDeterminate = progressProps.value != null;
+  // Radix treats `null`, `undefined` and a value outside 0 to max as indeterminate, so all of
+  // them keep a custom duration.
+  const { value, max } = progressProps;
+  const isDeterminate = value != null && value >= 0 && value <= (max ?? 100);
 
   return (
     <ProgressPrimitive.Root
@@ -34,7 +36,7 @@ const Progress = React.forwardRef<ProgressElement, ProgressProps>((props, forwar
       style={mergeStyles(
         {
           '--progress-duration': isDeterminate ? undefined : duration,
-          '--progress-value': isDeterminate ? progressProps.value : undefined,
+          '--progress-value': isDeterminate ? value : undefined,
           '--progress-max': progressProps.max ?? undefined,
         },
         style

package/src/components/scroll-area.css

@@ -1,3 +1,32 @@
+/*
+ * The scroll-edges hook writes these on the viewport every scroll frame. Registered as
+ * non-inherited so a write restyles the viewport only, not every row inside it. Only the
+ * viewport's own mask reads them.
+ */
+@property --scroll-overflow-start {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-overflow-end {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-overflow-x-start {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-overflow-x-end {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
 .kui-theme {
   --scrollarea-scrollbar-horizontal-margin-top: var(--space-2);
   --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-2);
@@ -34,11 +63,12 @@
     outline: 2px solid var(--focus-8);
     outline-offset: -2px;
   }
+}
 
-  /* Stop Chrome back/forward two-finger swipe when there is a horizontal scrollbar */
-  &:where(:has(.kui-ScrollAreaScrollbar[data-orientation='horizontal'])) {
-    overscroll-behavior-x: contain;
-  }
+/* Stop Chrome back/forward two-finger swipe when there is a horizontal scrollbar. The scrollbar is
+   the viewport's sibling, and the child combinator keeps a nested area's scrollbar out of it. */
+:where(.kui-ScrollAreaRoot:has(> .kui-ScrollAreaScrollbar[data-orientation='horizontal'])) > .kui-ScrollAreaViewport {
+  overscroll-behavior-x: contain;
 }
 
 .kui-ScrollAreaViewport > * {

package/src/components/segmented-control.css

@@ -47,14 +47,15 @@
   align-items: stretch;
   user-select: none;
 
-  /* Horizontal orientation (default) */
+  /* Horizontal orientation (default). Logical corners, so a right to left bar rounds its own
+     ends. */
   &:where(:first-child) {
-    border-top-left-radius: inherit;
-    border-bottom-left-radius: inherit;
+    border-start-start-radius: inherit;
+    border-end-start-radius: inherit;
   }
   &:where(:nth-last-child(2)) {
-    border-top-right-radius: inherit;
-    border-bottom-right-radius: inherit;
+    border-start-end-radius: inherit;
+    border-end-end-radius: inherit;
   }
 
   /* Drawn inside the track, which clips anything outside its own box. */
@@ -65,24 +66,6 @@
   }
 }
 
-/* Vertical orientation - item layout */
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem {
-  flex-direction: column;
-}
-
-/* Vertical orientation - item border radius */
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem:first-child {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-  border-bottom-left-radius: 0;
-}
-
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem:nth-last-child(2) {
-  border-bottom-left-radius: inherit;
-  border-bottom-right-radius: inherit;
-  border-top-right-radius: 0;
-}
-
 .kui-SegmentedControlItemLabel {
   display: flex;
   flex-grow: 1;
@@ -146,8 +129,7 @@
   /* Horizontal orientation (default). The 3px inset is padding inside the separator's own box and
      only the line paints; the -0.5px pull centres the line on the item boundary (optical). */
   padding-block: calc(var(--space-2) * 0.75); /* 3px - slightly smaller than space-1 */
-  margin-left: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
-  margin-right: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
+  margin-inline: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
   width: var(--border-width-standard); /* 1px */
   background-color: var(--neutral-a4);
   background-clip: content-box;
@@ -162,18 +144,6 @@
   /* Don't transition when the separator is hidden because of the focus outline */
 }
 
-/* Vertical orientation - separator */
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItemSeparator {
-  padding-block: 0;
-  padding-inline: calc(var(--space-2) * 0.75); /* 3px */
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
-  margin-bottom: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
-  width: auto;
-  height: var(--border-width-standard); /* 1px */
-}
-
 :where(.kui-theme) {
   --segmented-control-indicator-background-color: var(--color-page);
 }
@@ -183,12 +153,18 @@
   position: absolute;
   z-index: -1;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   height: 100%;
   pointer-events: none;
-  /* Width and position come from the item count and selected index, set by the root. */
+  /* Width and position come from the item count and selected index, set by the root. Right to
+     left, the items run from the right, so the indicator moves the other way. */
+  --segmented-control-direction: 1;
   width: calc(100% / var(--segmented-control-count, 1));
-  transform: translateX(calc(var(--segmented-control-index, 0) * 100%));
+  transform: translateX(calc(var(--segmented-control-index, 0) * 100% * var(--segmented-control-direction)));
+
+  &:where(:dir(rtl)) {
+    --segmented-control-direction: -1;
+  }
 
   &::before {
     inset: var(--border-width-standard); /* 1px */
@@ -214,13 +190,6 @@
   }
 }
 
-/* Vertical orientation */
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator {
-  width: 100%;
-  height: calc(100% / var(--segmented-control-count, 1));
-  transform: translateY(calc(var(--segmented-control-index, 0) * 100%));
-}
-
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */
 /*                Sizes                */
@@ -238,39 +207,16 @@
 }
 .kui-SegmentedControlRoot {
   border-radius: var(--segmented-control-border-radius);
+  /* A vertical bar sizes to its items, so orientation can unset the height. */
+  height: var(--segmented-control-root-height, var(--segmented-control-height));
 }
 
 @breakpoints {
   .kui-SegmentedControlRoot {
-    /* Vertical orientation - grid layout (must be inside @breakpoints for correct CSS ordering) */
-    &:where(.kui-r-orientation-vertical) {
-      grid-auto-flow: row;
-      grid-auto-columns: unset;
-      grid-auto-rows: 1fr;
-      min-width: unset;
-      min-height: max-content;
-    }
-
-    &:where(.kui-r-orientation-vertical):has([data-icon-only]) {
-      grid-auto-columns: unset;
-      grid-auto-rows: minmax(var(--segmented-control-height), 1fr);
-    }
-
     &:where(.kui-r-size-1) {
       --segmented-control-border-radius: var(--radius-control-1);
       --segmented-control-height: var(--control-height-1);
-      height: var(--segmented-control-height);
-
-      /* Vertical: height auto, width determined by content or icon-only */
-      &:where(.kui-r-orientation-vertical) {
-        height: auto;
-        width: auto;
-
-        /* Icon-only gets fixed square width */
-        &:where(:has([data-icon-only])) {
-          width: var(--segmented-control-height);
-        }
-      }
+      --segmented-control-vertical-py: var(--space-2);
 
       & :where(.kui-SegmentedControlItemLabel) {
         font-size: var(--font-size-1);
@@ -289,18 +235,7 @@
     &:where(.kui-r-size-2) {
       --segmented-control-border-radius: var(--radius-control-2);
       --segmented-control-height: var(--control-height-2);
-      height: var(--segmented-control-height);
-
-      /* Vertical: height auto, width determined by content or icon-only */
-      &:where(.kui-r-orientation-vertical) {
-        height: auto;
-        width: auto;
-
-        /* Icon-only gets fixed square width */
-        &:where(:has([data-icon-only])) {
-          width: var(--segmented-control-height);
-        }
-      }
+      --segmented-control-vertical-py: var(--space-3);
 
       & :where(.kui-SegmentedControlItemLabel) {
         font-size: var(--font-size-2);
@@ -319,18 +254,7 @@
     &:where(.kui-r-size-3) {
       --segmented-control-border-radius: var(--radius-control-3);
       --segmented-control-height: var(--control-height-3);
-      height: var(--segmented-control-height);
-
-      /* Vertical: height auto, width determined by content or icon-only */
-      &:where(.kui-r-orientation-vertical) {
-        height: auto;
-        width: auto;
-
-        /* Icon-only gets fixed square width */
-        &:where(:has([data-icon-only])) {
-          width: var(--segmented-control-height);
-        }
-      }
+      --segmented-control-vertical-py: var(--space-3);
 
       & :where(.kui-SegmentedControlItemLabel) {
         font-size: var(--font-size-3);
@@ -349,18 +273,7 @@
     &:where(.kui-r-size-4) {
       --segmented-control-border-radius: var(--radius-control-4);
       --segmented-control-height: var(--control-height-4);
-      height: var(--segmented-control-height);
-
-      /* Vertical: height auto, width determined by content or icon-only */
-      &:where(.kui-r-orientation-vertical) {
-        height: auto;
-        width: auto;
-
-        /* Icon-only gets fixed square width */
-        &:where(:has([data-icon-only])) {
-          width: var(--segmented-control-height);
-        }
-      }
+      --segmented-control-vertical-py: var(--space-4);
 
       & :where(.kui-SegmentedControlItemLabel) {
         font-size: var(--font-size-4);
@@ -410,47 +323,164 @@
   }
 }
 
-/* Vertical icon-only - minimum square height */
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-icon-only] {
-  min-width: unset;
-  min-height: var(--segmented-control-height);
-}
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*             Orientation             */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
 
-/* Vertical icon-only - remove top/bottom padding */
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-icon-only] .kui-SegmentedControlItemLabel {
-  padding-top: 0;
-  padding-bottom: 0;
-}
+/*
+ * Everything that differs between the two orientations lives here, inside @breakpoints, and each
+ * orientation states its own values. So a responsive orientation can switch either way at any
+ * breakpoint. Orientation does not combine with a size class here: the per-size values are custom
+ * properties the size rules set.
+ */
+@breakpoints {
+  .kui-SegmentedControlRoot:where(.kui-r-orientation-horizontal) {
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    grid-auto-rows: auto;
+    min-width: max-content;
+    min-height: auto;
+    --segmented-control-root-height: var(--segmented-control-height);
+  }
 
-/* Vertical icon-only root width (explicit since nested :has() in @breakpoints may not work) */
-.kui-SegmentedControlRoot:where(.kui-r-orientation-vertical):where(.kui-r-size-1):has([data-icon-only]) {
-  width: var(--control-height-1);
-}
-.kui-SegmentedControlRoot:where(.kui-r-orientation-vertical):where(.kui-r-size-2):has([data-icon-only]) {
-  width: var(--control-height-2);
-}
-.kui-SegmentedControlRoot:where(.kui-r-orientation-vertical):where(.kui-r-size-3):has([data-icon-only]) {
-  width: var(--control-height-3);
-}
-.kui-SegmentedControlRoot:where(.kui-r-orientation-vertical):where(.kui-r-size-4):has([data-icon-only]) {
-  width: var(--control-height-4);
-}
+  .kui-SegmentedControlRoot:where(.kui-r-orientation-horizontal):has([data-icon-only]) {
+    grid-auto-columns: minmax(var(--segmented-control-height), 1fr);
+    grid-auto-rows: auto;
+    --segmented-control-root-width: auto;
+  }
 
-/* Vertical text items need vertical padding */
-:where(.kui-r-orientation-vertical):where(.kui-r-size-1) .kui-SegmentedControlItemLabel {
-  padding-top: var(--space-2);
-  padding-bottom: var(--space-2);
-}
-:where(.kui-r-orientation-vertical):where(.kui-r-size-2) .kui-SegmentedControlItemLabel {
-  padding-top: var(--space-3);
-  padding-bottom: var(--space-3);
-}
-:where(.kui-r-orientation-vertical):where(.kui-r-size-3) .kui-SegmentedControlItemLabel {
-  padding-top: var(--space-3);
-  padding-bottom: var(--space-3);
-}
-:where(.kui-r-orientation-vertical):where(.kui-r-size-4) .kui-SegmentedControlItemLabel {
-  padding-top: var(--space-4);
-  padding-bottom: var(--space-4);
+  .kui-SegmentedControlRoot:where(.kui-r-orientation-vertical) {
+    grid-auto-flow: row;
+    grid-auto-columns: auto;
+    grid-auto-rows: 1fr;
+    min-width: auto;
+    min-height: max-content;
+    --segmented-control-root-height: auto;
+  }
+
+  .kui-SegmentedControlRoot:where(.kui-r-orientation-vertical):has([data-icon-only]) {
+    grid-auto-columns: auto;
+    grid-auto-rows: minmax(var(--segmented-control-height), 1fr);
+    /* Icon-only gets a fixed square width. Through a custom property, so a horizontal
+       breakpoint can undo it without setting a width of its own. */
+    --segmented-control-root-width: var(--segmented-control-height);
+    width: var(--segmented-control-root-width);
+  }
+
+  /* Item layout */
+  :where(.kui-r-orientation-horizontal) .kui-SegmentedControlItem {
+    flex-direction: row;
+  }
+  :where(.kui-r-orientation-vertical) .kui-SegmentedControlItem {
+    flex-direction: column;
+  }
+
+  /* Item corners */
+  :where(.kui-r-orientation-horizontal) .kui-SegmentedControlItem:where(:first-child) {
+    border-start-start-radius: inherit;
+    border-end-start-radius: inherit;
+  }
+  :where(.kui-r-orientation-horizontal) .kui-SegmentedControlItem:where(:first-child:not(:nth-last-child(2))) {
+    border-start-end-radius: 0;
+  }
+  :where(.kui-r-orientation-horizontal) .kui-SegmentedControlItem:where(:nth-last-child(2)) {
+    border-start-end-radius: inherit;
+    border-end-end-radius: inherit;
+  }
+  :where(.kui-r-orientation-horizontal) .kui-SegmentedControlItem:where(:nth-last-child(2):not(:first-child)) {
+    border-end-start-radius: 0;
+  }
+
+  :where(.kui-r-orientation-vertical) .kui-SegmentedControlItem:where(:first-child) {
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+  }
+  :where(.kui-r-orientation-vertical) .kui-SegmentedControlItem:where(:first-child:not(:nth-last-child(2))) {
+    border-end-start-radius: 0;
+  }
+  :where(.kui-r-orientation-vertical) .kui-SegmentedControlItem:where(:nth-last-child(2)) {
+    border-end-start-radius: inherit;
+    border-end-end-radius: inherit;
+  }
+  :where(.kui-r-orientation-vertical) .kui-SegmentedControlItem:where(:nth-last-child(2):not(:first-child)) {
+    border-start-end-radius: 0;
+  }
+
+  /* Separator */
+  :where(.kui-r-orientation-horizontal) .kui-SegmentedControlItemSeparator {
+    padding-block: calc(var(--space-2) * 0.75); /* 3px */
+    padding-inline: 0;
+    margin-block: 0;
+    margin-inline: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
+    width: var(--border-width-standard); /* 1px */
+    height: auto;
+  }
+  :where(.kui-r-orientation-vertical) .kui-SegmentedControlItemSeparator {
+    padding-block: 0;
+    padding-inline: calc(var(--space-2) * 0.75); /* 3px */
+    margin-block: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
+    margin-inline: 0;
+    width: auto;
+    height: var(--border-width-standard); /* 1px */
+  }
+
+  /* Indicator */
+  :where(.kui-r-orientation-horizontal) .kui-SegmentedControlIndicator {
+    width: calc(100% / var(--segmented-control-count, 1));
+    height: 100%;
+    transform: translateX(calc(var(--segmented-control-index, 0) * 100% * var(--segmented-control-direction)));
+  }
+  :where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator {
+    width: 100%;
+    height: calc(100% / var(--segmented-control-count, 1));
+    transform: translateY(calc(var(--segmented-control-index, 0) * 100%));
+  }
+
+  /* Icon-only items: square minimum along the bar */
+  :where(.kui-r-orientation-horizontal) .kui-SegmentedControlItem[data-icon-only] {
+    min-width: var(--segmented-control-height);
+    min-height: auto;
+  }
+  :where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-icon-only] {
+    min-width: auto;
+    min-height: var(--segmented-control-height);
+  }
+
+  /* Vertical text items need vertical padding; icon-only items take none */
+  :where(.kui-r-orientation-horizontal) .kui-SegmentedControlItemLabel {
+    padding-block: 0;
+  }
+  :where(.kui-r-orientation-vertical) .kui-SegmentedControlItemLabel {
+    padding-block: var(--segmented-control-vertical-py);
+  }
+  :where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-icon-only] .kui-SegmentedControlItemLabel {
+    padding-block: 0;
+  }
 }
 
+/* Windows High Contrast drops box shadows and background colours, so the bar takes a border and
+ * the selected segment a system highlight. */
+@media (forced-colors: active) {
+  .kui-SegmentedControlRoot {
+    border: 1px solid CanvasText;
+  }
+  .kui-SegmentedControlItemSeparator {
+    background-color: CanvasText;
+  }
+  .kui-SegmentedControlIndicator::before {
+    background-color: Highlight;
+  }
+  .kui-SegmentedControlItem:where([data-state='on']) {
+    color: HighlightText;
+  }
+  .kui-SegmentedControlRoot:where([data-disabled]),
+  .kui-SegmentedControlItem:where([disabled]) {
+    border-color: GrayText;
+    color: GrayText;
+  }
+  :where(.kui-SegmentedControlItem[data-state='on'][disabled]) ~ .kui-SegmentedControlIndicator::before {
+    background-color: GrayText;
+  }
+}

package/src/components/segmented-control.props.tsx

@@ -6,7 +6,7 @@ const sizes = ['1', '2', '3', '4'] as const;
 const orientations = ['horizontal', 'vertical'] as const;
 
 const segmentedControlRootPropDefs = {
-  disabled: { type: 'boolean', className: 'disabled', default: false },
+  disabled: { type: 'boolean', default: false },
   size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
   orientation: {
     type: 'enum',