@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/src/popover/index.tsx

@@ -1,4 +1,21 @@
-import { type JSX, Show, splitProps } from "solid-js";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Popover.tsx
+
+// Port of packages/@react-spectrum/s2/src/Popover.tsx.
+
+import { Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   Popover as HeadlessPopover,
   PopoverTrigger as HeadlessPopoverTrigger,
@@ -11,6 +28,7 @@ import type { StyleString } from "../style";
 import { setColorScheme, style } from "../style" with { type: "macro" };
 import { getAllowedOverrides } from "../s2-internal/style-utils" with { type: "macro" };
 import { useTheme, type ColorScheme } from "../provider";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type PopoverPlacement = NonNullable<HeadlessPopoverProps["placement"]>;
 export type Placement = PopoverPlacement;
@@ -65,19 +83,20 @@ const popoverStyles = style<
   "--s2-container-bg": {
     type: "backgroundColor",
     value: {
-      /* Viviana UI v2 (Glasselated): a floating overlay wears the PANEL surface, and
-       * fill and blur have to agree. `layer-1` resolves to `var(--surface-panel)` in
-       * the theme's backgroundColor map (style/spectrum-theme.ts) and pairs with
-       * `--blur-panel` below. This was `layer-2` (= `var(--surface-card)`) carrying
-       * `--blur-card` on the 14px `panel` radius — the card's fill and blur wearing
-       * the panel's corner. Matches the sibling overlay at menu/s2-menu-styles.ts. */
-      default: "layer-1",
+      /* Terminal Glass: a popover is TIER 2 — it lands OVER a panel or a card, so it
+       * takes the float surface (`var(--surface-float)`, alpha .9) rather than the
+       * panel's .62. This was `layer-1` (= `--surface-panel`) paired with
+       * `--blur-panel`: a panel-weight translucency stacked on a panel has no visible
+       * boundary against the surface underneath it, and its text sits on whatever that
+       * surface was showing. Same tier as the menu, toast and tooltip; the shared value
+       * is `glassSurface("float")` (s2-internal/style-utils.ts). */
+      default: "float",
       forcedColors: "Background",
     },
   },
   backgroundColor: "--s2-container-bg",
-  /* The panel register is open-coded here rather than spread from
-   * `glassSurface("panel")` (s2-internal/style-utils.ts), for two reasons specific to
+  /* The float register is open-coded here rather than spread from
+   * `glassSurface("float")` (s2-internal/style-utils.ts), for two reasons specific to
    * this surface. (1) The fill has to stay behind the `--s2-container-bg` custom
    * property: `arrowStyles` below paints the arrow with `fill: "--s2-container-bg"`,
    * and the theme's auto/overlay color helpers compute against it as well
@@ -87,30 +106,27 @@ const popoverStyles = style<
    * spreading it would draw a second 1px edge and shift the box metrics the arrow is
    * positioned against. Blur is the load-bearing half: translucent fill plus blur is
    * what reads as glass, and blur cannot ride on a background-color. */
-  backdropFilter: "var(--blur-panel)",
-  borderRadius: "panel",
-  /* The register's elevation cue is the inset rim, not a cast shadow. A popover is a
-   * translucent container over the page, so it takes the SURFACE rim — `elevated` and
-   * `emphasized` resolve to the same value (style/spectrum-theme.ts); the brighter
-   * `edge-glass` is for opaque controls, whose own fill contains the white.
-   * Unconditional, including when the arrow is shown: the previous
-   * `isArrowShown` branch dropped the rim to `none` and reached for the `filter` map
-   * instead, on the theory that a box-shadow cannot follow the arrow's silhouette.
-   * It does not need to. The rim is an INSET shadow, so it is clipped to the
-   * padding box and cannot spill onto the arrow at all; and the `filter` map is the
-   * one shadow map still resolving to a Spectrum cast drop-shadow, which is the
-   * elevation vocabulary this register does not use. The arrow carries its own edge
-   * via `stroke` in `arrowStyles` below. */
-  boxShadow: "edge-glass-surface",
+  backdropFilter: "var(--blur-clear)",
+  borderRadius: "default",
+  /* The float is the ONE tier in this register that casts. Panels and cards carry the
+   * inset rim alone, but a float lands on a surface of the same family, where a rim
+   * cannot separate the two edges — so it takes `--shadow-float` (the handoff's `sh2`)
+   * AND the rim, exactly as the handoff's own tier-2 overlays do
+   * (`box-shadow: var(--sh2), var(--edge-glass)`, Lesson Player toast / App popover).
+   * Both stay unconditional, arrow shown or not: the rim is an INSET shadow, clipped to
+   * the padding box, so it cannot spill onto the arrow, and the arrow carries its own
+   * edge via `stroke` in `arrowStyles` below. The `filter` map is deliberately not used
+   * — it is the one shadow map still resolving to a Spectrum cast drop-shadow, an
+   * elevation vocabulary this register does not speak. */
+  boxShadow: "[var(--shadow-float), var(--edge-glass)]",
   outlineStyle: "solid",
   outlineWidth: 1,
   outlineColor: {
-    /* Was `lightDark("transparent-white-25", "gray-200")`. `transparent-white-25` is
-     * the 25th stop of Spectrum's transparent-white ramp — alpha 0, not 25% white —
-     * so that pair drew a solid gray edge in dark and NO edge at all in light. A
-     * scheme-asymmetric edge is wrong under any reading of the register; the glass
-     * edge is `--border-subtle` in both schemes. */
-    default: "border-subtle",
+    /* Terminal Glass draws the tier-2 edge in `--track`, not in the glass hairline the
+     * panel/card tiers use: a float sits on a lit surface rather than on the page, and
+     * `--border-subtle` disappears against it (App speed menu and popover, both
+     * `border:1px solid var(--track)`). */
+    default: "[var(--track)]",
     forcedColors: "ButtonBorder",
   },
   width: {
@@ -211,12 +227,12 @@ const arrowStyles = style<PopoverRenderProps>({
   },
   strokeWidth: 1,
   /* The arrow continues the surface's silhouette, so it wears the surface's edge:
-   * 1px `--border-subtle`, the same value `popoverStyles` puts on its `outline`.
+   * 1px `--track`, the same value `popoverStyles` puts on its `outline`.
    * Was the same alpha-0-in-light `lightDark` pair as the outline — see the note
    * there. This stroke is now the only thing drawing the arrow's edge, the
    * `filter` drop-shadow having been removed from `popoverStyles`. */
   stroke: {
-    default: "border-subtle",
+    default: "[var(--track)]",
     forcedColors: "ButtonBorder",
   },
 });
@@ -413,7 +429,9 @@ const popoverFooterStyles = style({
   borderWidth: 0,
   borderTopWidth: 1,
   borderStyle: "solid",
-  borderColor: "gray-300",
+  /* The register's own hairline, not a ramp stop: `gray-300` is markedly too light
+   * against the float fill in dark and reads as a second border in light. */
+  borderColor: "[var(--border-hair)]",
 });
 
 /**

package/src/pressScale.ts

@@ -1,4 +1,20 @@
-import type { Accessor, JSX } from "solid-js";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/pressScale.ts
+
+// Port of packages/@react-spectrum/s2/src/pressScale.ts.
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 
 type ElementRef =
   | HTMLElement

package/src/progress/ProgressCircle.tsx

@@ -1,21 +1,31 @@
-import {
-  type JSX,
-  For,
-  createContext,
-  createMemo,
-  mergeProps,
-  splitProps,
-  useContext,
-} from "solid-js";
-import { createProgressBar } from "@proyecto-viviana/solidaria";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ProgressCircle.tsx
+
+// Port of packages/@react-spectrum/s2/src/ProgressCircle.tsx.
+
+import { For, createContext, createMemo, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { mergeProps, createProgressBar } from "@proyecto-viviana/solidaria";
 import type { StyleString } from "../style";
 import { style } from "../style" with { type: "macro" };
-import { keyframes } from "../style/style-macro" with { type: "macro" };
+import { glSpin, tglRingBlink } from "../style/motion" with { type: "macro" };
 import type { UnsafeClassName } from "../s2-internal/style-utils";
 import {
   getAllowedOverrides,
   staticColor as staticColorStyles,
 } from "../s2-internal/style-utils" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   getSlottedContextProps,
   mergeContextRefs,
@@ -69,12 +79,12 @@ type ProgressCircleStyleState = {
   size: ProgressCircleSize;
   staticColor?: ProgressCircleStaticColor;
   isStaticColor: boolean;
+  isIndeterminate: boolean;
 };
 
 type RingBlockStyleState = ProgressCircleStyleState & {
   isLit: boolean;
   isLead: boolean;
-  isIndeterminate: boolean;
 };
 
 /* The register's ring is not an arc — it is 16 discrete pixel blocks on a circle
@@ -117,19 +127,14 @@ const RING_GEOMETRY: Record<ProgressCircleSize, RingGeometry> = {
  * it unconditionally: there the chase IS the "something is happening" signal, and
  * a frozen full ring would read as 100%. Gate is the CSS media condition, not a
  * runtime matchMedia check — Solid hydration trusts the server DOM (see Badge). */
-const ringBlink = keyframes(`
-  0% {
-    opacity: 0.15;
-  }
-
-  12% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 1;
-  }
-`);
+/* The register's ring chase, shared through style/motion.ts so the blink cannot drift
+ * away from the caret and pulse it was tuned against. */
+const ringBlink = tglRingBlink();
+/* Indeterminate work has no leading edge to chase, so the register spins the whole
+ * ring instead: the handoff's pixel spinner, eight discrete steps per 0.9s turn, so
+ * the blocks jump between positions rather than sliding. Unconditional — a frozen
+ * fully-lit ring would read as 100% done. */
+const ringSpin = glSpin();
 
 const wrapperStyles = style<ProgressCircleStyleState>(
   {
@@ -143,6 +148,18 @@ const wrapperStyles = style<ProgressCircleStyleState>(
       },
     },
     aspectRatio: "square",
+    animation: {
+      isIndeterminate: ringSpin,
+    },
+    animationDuration: {
+      isIndeterminate: 900,
+    },
+    animationTimingFunction: {
+      isIndeterminate: "[steps(8)]",
+    },
+    animationIterationCount: {
+      isIndeterminate: "infinite",
+    },
   },
   getAllowedOverrides({ height: true }),
 );
@@ -189,12 +206,14 @@ const blockStyles = style<RingBlockStyleState>({
     },
   },
   boxShadow: "edge-glass",
+  /* The blink is the determinate ring's chase; while the whole ring spins there is
+   * nothing to chase and the two motions would beat against each other. */
   animation: {
     isLit: {
       default: ringBlink,
       "@media (prefers-reduced-motion: reduce)": "none",
     },
-    isIndeterminate: ringBlink,
+    isIndeterminate: "none",
   },
   animationDuration: {
     isLit: 2600,
@@ -277,6 +296,7 @@ export function ProgressCircle(props: ProgressCircleProps): JSX.Element {
     size: size(),
     staticColor: local.staticColor,
     isStaticColor: isStaticColor(),
+    isIndeterminate: isIndeterminate(),
   });
   const progressAria = createProgressBar({
     get id() {
@@ -358,7 +378,6 @@ export function ProgressCircle(props: ProgressCircleProps): JSX.Element {
                 ...state(),
                 isLit: isLit(),
                 isLead: isLead(),
-                isIndeterminate: isIndeterminate(),
               })}
               style={{
                 left: `${position.x}px`,
@@ -371,8 +390,8 @@ export function ProgressCircle(props: ProgressCircleProps): JSX.Element {
           );
         }}
       </For>
-      {/* Read `children` exactly once per run — a repeated getter read
-        * re-instantiates the subtree and desyncs hydration keys. */}
+      {/* Use the same child value for the presence check and insertion;
+       * keep this evaluation inside the rendered content owner. */}
       {(() => {
         const content = local.children;
         return content != null ? <div class={centerStyles}>{content}</div> : undefined;

package/src/progress/progress-circle-animation.ts

@@ -1,3 +1,18 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ProgressCircle.tsx
+
+// Port of packages/@react-spectrum/s2/src/ProgressCircle.tsx.
 import { keyframes } from "../style/style-macro" with { type: "macro" };
 
 const progressCircleRotationAnimation = keyframes(`

package/src/progress-bar/index.tsx

@@ -1,19 +1,30 @@
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  createUniqueId,
-  mergeProps,
-  splitProps,
-  useContext,
-} from "solid-js";
-import { createProgressBar, useLocale } from "@proyecto-viviana/solidaria";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ProgressBar.tsx
+
+// Port of packages/@react-spectrum/s2/src/ProgressBar.tsx.
+
+import { For, createContext, createMemo, createUniqueId, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { mergeProps, createProgressBar, useLocale } from "@proyecto-viviana/solidaria";
+import { mergeStyles } from "../style/runtime";
 import type { StyleString } from "../style";
 import { style } from "../style" with { type: "macro" };
 import { keyframes } from "../style/style-macro" with { type: "macro" };
 import type { UnsafeClassName } from "../s2-internal/style-utils";
 import {
   centerPadding,
+  controlFontStep,
   controlSize,
   fieldInput,
   fieldLabel,
@@ -21,6 +32,7 @@ import {
   getAllowedOverrides,
   staticColor as staticColorStyles,
 } from "../s2-internal/style-utils" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   getSlottedContextProps,
   mergeContextRefs,
@@ -33,6 +45,14 @@ import {
 export type ProgressBarSize = "S" | "M" | "L" | "XL";
 export type ProgressBarStaticColor = "white" | "black" | "auto";
 export type ProgressBarLabelPosition = "top" | "side";
+export type ProgressBarTrackStyle = "bar" | "bracket";
+
+/* The register draws its bracket at ten cells (`[▮▮▮▮▯▯▯▯▯▯]`), so a percentage maps
+ * to one cell per 10%. Fixed rather than a prop: the glyph run's whole point is that
+ * every bracket in a log column is the same width, so rows stack into a chart. */
+const BRACKET_CELLS = 10;
+const BRACKET_FILLED = "▮";
+const BRACKET_EMPTY = "▯";
 
 export interface ProgressBarProps {
   /** The current value. @default 0 */
@@ -44,6 +64,29 @@ export interface ProgressBarProps {
    * stays `value`. Ignored while indeterminate.
    */
   pendingValue?: number;
+  /**
+   * How the track is drawn. `"bar"` is the filled 8px recess; `"bracket"` replaces it
+   * with the register's mono readout of the same value — `[▮▮▮▮▯▯▯▯▯▯]` — for rows that
+   * live inside a terminal well, where a painted bar reads as a foreign object among
+   * text. The bracket is decorative (`aria-hidden`): the accessible value is the
+   * `progressbar` role's own, identical in both forms. Indeterminate progress always
+   * draws the bar — a fixed glyph run cannot sweep without inventing motion.
+   *
+   * Local addition — no S2 counterpart.
+   * @default 'bar'
+   */
+  trackStyle?: ProgressBarTrackStyle;
+  /**
+   * Relative widths of the track's sections, e.g. `[3, 1, 2]` for a three-chapter run.
+   * The bar is cut into that many sections, each proportional to its number and split
+   * from its neighbour by a hairline gap; the fill (and the `pendingValue` dither)
+   * flows across them exactly as it does across the undivided bar. Values ≤ 0 and
+   * arrays shorter than two entries are ignored. Purely visual — the accessible value
+   * is unchanged.
+   *
+   * Local addition — no S2 counterpart.
+   */
+  segments?: number[];
   /** The smallest value allowed. @default 0 */
   minValue?: number;
   /** The largest value allowed. @default 100 */
@@ -87,6 +130,7 @@ type ProgressBarStyleState = {
   labelAlign?: "start" | "end";
   isStaticColor: boolean;
   isIndeterminate: boolean;
+  hasSegments: boolean;
 };
 
 const progressBarIndeterminateLtr = keyframes(`
@@ -241,15 +285,26 @@ const trackStyles = style<ProgressBarStyleState>({
     forcedColors: "ButtonText",
   },
   zIndex: 1,
+  /* The register's bar is 8px (the XP bar, TerminalGlassLab.tsx:763-770), so the band
+   * is shifted one rung up to put the DEFAULT size on the drawn value rather than two
+   * rungs under it. Four distinct rungs are kept — the size axis still moves, it just
+   * starts where the register draws. */
   height: {
-    default: 6,
+    default: 8,
     size: {
-      S: 4,
-      M: 6,
-      L: 8,
-      XL: 10,
+      S: 6,
+      M: 8,
+      L: 10,
+      XL: 12,
     },
   },
+  /* A divided bar has to SHOW the division, and the only thing that can show it is the
+   * track's own recess between the sections — this register has no rules and no drop
+   * shadows to draw a separator with. `overflow: hidden` above clips the gap's outer
+   * halves at the ends, so the run still starts and finishes flush. */
+  columnGap: {
+    hasSegments: 2,
+  },
 });
 
 /* The handoff rims the bar with --edge-glass, but paints the rim on a separate
@@ -316,6 +371,80 @@ const pendingStyles = style<ProgressBarStyleState>({
   },
 });
 
+/* One section of a divided bar. It is a track in miniature — the fill and the pending
+ * dither are the SAME two elements as in the undivided bar, just clipped to this slice
+ * — so a chapter bar cannot drift away from a plain one. Width is inline: it is data
+ * (the caller's ratio), not a style variant. */
+const segmentStyles = style({
+  position: "relative",
+  height: "full",
+  display: "flex",
+  overflow: "hidden",
+  flexShrink: 0,
+});
+
+/* The bracket form. Mono at the readout's own step so the glyph run and the "40%"
+ * beside it sit on one baseline in one face — the two are read as a single line of
+ * terminal output, which is the whole reason this form exists. No tracking: the cells
+ * are meant to touch, the way they do inside a bracket in a log. */
+const bracketStyles = style<ProgressBarStyleState>({
+  gridArea: "bar",
+  alignSelf: "center",
+  fontFamily: "code",
+  fontSize: controlFontStep(1),
+  fontWeight: "normal",
+  whiteSpace: "nowrap",
+  color: {
+    default: "accent",
+    isStaticColor: "transparent-overlay-900",
+    forcedColors: "ButtonText",
+  },
+});
+
+/**
+ * The bracket's glyph run for a percentage: filled cells, then empty ones, inside
+ * literal brackets. Rounds rather than floors so a bar that is visually nearly full
+ * does not read `▮▮▮▮▮▮▮▮▮▯` at 99%; 0 and 100 are exact because clamping happens on
+ * the percentage before it arrives.
+ */
+function bracketRun(percentage: number): string {
+  const filled = clamp(Math.round((percentage / 100) * BRACKET_CELLS), 0, BRACKET_CELLS);
+  return `[${BRACKET_FILLED.repeat(filled)}${BRACKET_EMPTY.repeat(BRACKET_CELLS - filled)}]`;
+}
+
+/**
+ * Turns the caller's relative weights into painted sections: each one carries its share
+ * of the track's width plus the fraction of ITSELF that the fill and the pending dither
+ * cover. Non-finite and non-positive weights are dropped (a zero-width section is not a
+ * section), and fewer than two survivors means there is nothing to divide — the caller
+ * gets the plain bar back rather than a single section pretending to be one.
+ */
+function resolveSegments(
+  weights: number[] | undefined,
+  percentage: number,
+  pendingWidth: number,
+): { width: number; fill: number; pending: number }[] | null {
+  if (!weights) {
+    return null;
+  }
+  const usable = weights.filter((weight) => Number.isFinite(weight) && weight > 0);
+  if (usable.length < 2) {
+    return null;
+  }
+  const total = usable.reduce((sum, weight) => sum + weight, 0);
+  const filledEnd = percentage;
+  const pendingEnd = percentage + pendingWidth;
+  let start = 0;
+  return usable.map((weight) => {
+    const width = (weight / total) * 100;
+    const end = start + width;
+    const fill = (clamp(filledEnd, start, end) - start) / width;
+    const pending = (clamp(pendingEnd, start, end) - start) / width - fill;
+    start = end;
+    return { width, fill: fill * 100, pending: pending * 100 };
+  });
+}
+
 function clamp(value: number, min: number, max: number): number {
   return Math.min(Math.max(value, min), max);
 }
@@ -346,10 +475,19 @@ function getDataAttributes(source: object): JSX.HTMLAttributes<HTMLDivElement> {
   return attributes as JSX.HTMLAttributes<HTMLDivElement>;
 }
 
-function indeterminateAnimation(direction: "ltr" | "rtl" | string): string {
-  const keyframe = direction === "rtl" ? progressBarIndeterminateRtl : progressBarIndeterminateLtr;
-  return `${keyframe} 1000ms cubic-bezier(.37, 0, .63, 1) infinite`;
-}
+const indeterminateAnimation = style<{ direction?: "ltr" | "rtl" | string }>({
+  animation: {
+    direction: {
+      ltr: progressBarIndeterminateLtr,
+      rtl: progressBarIndeterminateRtl,
+    },
+  },
+  animationDuration: 1000,
+  animationIterationCount: "infinite",
+  animationTimingFunction: "in-out",
+  willChange: "transform",
+  position: "relative",
+});
 
 export function ProgressBar(props: ProgressBarProps): JSX.Element {
   const contextProps = getSlottedContextProps(useContext(ProgressBarContext), props.slot);
@@ -357,6 +495,8 @@ export function ProgressBar(props: ProgressBarProps): JSX.Element {
   const [local] = splitProps(merged, [
     "value",
     "pendingValue",
+    "trackStyle",
+    "segments",
     "minValue",
     "maxValue",
     "valueLabel",
@@ -390,6 +530,7 @@ export function ProgressBar(props: ProgressBarProps): JSX.Element {
     labelAlign,
     isStaticColor: isStaticColor(),
     isIndeterminate: isIndeterminate(),
+    hasSegments: segments() != null,
   });
   const accessibleLabelledBy = () =>
     local["aria-labelledby"] ?? (!local["aria-label"] && local.label ? labelId : undefined);
@@ -446,6 +587,13 @@ export function ProgressBar(props: ProgressBarProps): JSX.Element {
     const pendingPercentage = ((pending - minValue) / safeRange(minValue, maxValue)) * 100;
     return Math.max(0, pendingPercentage - percentage());
   });
+  /* Indeterminate wins over both local forms: neither a fixed glyph run nor a set of
+   * fixed sections can express "unknown", and faking either would report a value the
+   * component does not have. */
+  const isBracket = () => local.trackStyle === "bracket" && !isIndeterminate();
+  const segments = createMemo(() =>
+    isIndeterminate() ? null : resolveSegments(local.segments, percentage(), pendingWidth() ?? 0),
+  );
   const valueText = () =>
     local.valueLabel ?? (progressAria.progressBarProps["aria-valuetext"] as string | undefined);
   const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
@@ -477,23 +625,52 @@ export function ProgressBar(props: ProgressBarProps): JSX.Element {
       {local.label && !isIndeterminate() && (
         <span class={valueStyles(state("end"))}>{valueText()}</span>
       )}
-      <div class={trackStyles(state())}>
-        <div
-          class={fillStyles(state())}
-          style={{
-            width: isIndeterminate() ? undefined : `${percentage()}%`,
-            animation: isIndeterminate() ? indeterminateAnimation(locale().direction) : undefined,
-          }}
-        />
-        {!isIndeterminate() && pendingWidth() != null && (
-          <div
-            aria-hidden="true"
-            class={pendingStyles(state())}
-            style={{ width: `${pendingWidth()}%` }}
-          />
-        )}
-        <div aria-hidden="true" class={trackRimStyles} />
-      </div>
+      {isBracket() ? (
+        <span aria-hidden="true" class={bracketStyles(state())}>
+          {bracketRun(percentage())}
+        </span>
+      ) : (
+        <div class={trackStyles(state())}>
+          {segments() ? (
+            <For each={segments()!}>
+              {(segment) => (
+                <div class={segmentStyles} style={{ width: `${segment.width}%` }}>
+                  <div class={fillStyles(state())} style={{ width: `${segment.fill}%` }} />
+                  {segment.pending > 0 && (
+                    <div
+                      aria-hidden="true"
+                      class={pendingStyles(state())}
+                      style={{ width: `${segment.pending}%` }}
+                    />
+                  )}
+                </div>
+              )}
+            </For>
+          ) : (
+            <>
+              <div
+                class={mergeStyles(
+                  fillStyles(state()),
+                  isIndeterminate()
+                    ? indeterminateAnimation({ direction: locale().direction })
+                    : null,
+                )}
+                style={{
+                  width: isIndeterminate() ? undefined : `${percentage()}%`,
+                }}
+              />
+              {!isIndeterminate() && pendingWidth() != null && (
+                <div
+                  aria-hidden="true"
+                  class={pendingStyles(state())}
+                  style={{ width: `${pendingWidth()}%` }}
+                />
+              )}
+            </>
+          )}
+          <div aria-hidden="true" class={trackRimStyles} />
+        </div>
+      )}
     </div>
   );
 }