@godxjp/ui 33.25.1 → 33.26.0

package/agent/tokens.json

@@ -13337,6 +13337,120 @@
     "tier": "component",
     "value": "initial"
   },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-card-size-ratio",
+    "tier": "component",
+    "value": "1.4"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-card-width",
+    "tier": "component",
+    "value": "clamp(3.25rem, 6.6vw, 5.625rem)"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-compact-card-width",
+    "tier": "component",
+    "value": "clamp(1.875rem, 3.3vw, 2.8125rem)"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-orientation-duration",
+    "tier": "component",
+    "value": "180ms"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-background",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-foreground",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-muted-foreground",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-focus-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-control-border-alpha",
+    "tier": "component",
+    "value": "0.65"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-track-alpha",
+    "tier": "component",
+    "value": "0.8"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-grain-width",
+    "tier": "component",
+    "value": "1px"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-highlight-size",
+    "tier": "component",
+    "value": "72%"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-grain-size",
+    "tier": "component",
+    "value": "3px"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-grain-alpha",
+    "tier": "component",
+    "value": "0.025"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-highlight-alpha",
+    "tier": "component",
+    "value": "0.045"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-etched-border-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-etched-border-alpha",
+    "tier": "component",
+    "value": "0.5"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-etched-border-size",
+    "tier": "component",
+    "value": "var(--stroke-hairline)"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-etched-radius",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "THE TWO CORNER INSETS gh#558 ASKED FOR BY NAME. Ant Design's are `marginXXL` (48px) from the bottom and `marginLG` (24px) from the inline end. Spelled here in this library's own stack/inline steps, which land on the same two numbers: --space-stack-xl = --space-10 = 40px, --space-6 = 24px. The block inset is the one a service actually has to move — a sticky action bar, a cookie strip, a mobile tab bar all live in that corner — and moving it is now retuning ONE custom property, not writing a media query at the call site (which is `no-arbitrary-spacing` and has no legal spelling).",
     "name": "--float-button-offset-block-end",
@@ -15701,6 +15815,90 @@
     "tier": "component",
     "value": "initial"
   },
+  {
+    "description": "RadarChart tokens. Radii and font sizes use intrinsic SVG coordinates; colors resolve in the local theme scope.",
+    "name": "--radar-chart-label-inset",
+    "tier": "component",
+    "value": "8px"
+  },
+  {
+    "description": "Unitless scale of the normalized polar geometry.",
+    "name": "--radar-chart-plot-radius",
+    "tier": "component",
+    "value": "96"
+  },
+  {
+    "description": "scale-exempt: polar distance in viewBox user units, not a corner radius",
+    "name": "--radar-chart-label-radius",
+    "tier": "component",
+    "value": "124px"
+  },
+  {
+    "description": "RadarChart tokens. Radii and font sizes use intrinsic SVG coordinates; colors resolve in the local theme scope.",
+    "name": "--radar-chart-grid-alpha",
+    "tier": "component",
+    "value": "0.16"
+  },
+  {
+    "description": "RadarChart tokens. Radii and font sizes use intrinsic SVG coordinates; colors resolve in the local theme scope.",
+    "name": "--radar-chart-boundary-alpha",
+    "tier": "component",
+    "value": "0.32"
+  },
+  {
+    "description": "RadarChart tokens. Radii and font sizes use intrinsic SVG coordinates; colors resolve in the local theme scope.",
+    "name": "--radar-chart-axis-alpha",
+    "tier": "component",
+    "value": "0.2"
+  },
+  {
+    "description": "scale-exempt: viewBox user units, scaled with the SVG, not CSS type",
+    "name": "--radar-chart-label-font-size",
+    "tier": "component",
+    "value": "16px"
+  },
+  {
+    "description": "Unitless second-line leading, multiplied by the resolved label font size.",
+    "name": "--radar-chart-label-line-height",
+    "tier": "component",
+    "value": "1.25"
+  },
+  {
+    "description": "RadarChart tokens. Radii and font sizes use intrinsic SVG coordinates; colors resolve in the local theme scope.",
+    "name": "--radar-chart-tick-offset",
+    "tier": "component",
+    "value": "6px"
+  },
+  {
+    "description": "scale-exempt: viewBox user units, scaled with the SVG, not CSS type",
+    "name": "--radar-chart-tick-font-size",
+    "tier": "component",
+    "value": "10px"
+  },
+  {
+    "description": "scale-exempt: SVG circle r in viewBox user units, not a corner radius",
+    "name": "--radar-chart-point-radius",
+    "tier": "component",
+    "value": "3px"
+  },
+  {
+    "description": "HSL channels; default muted-foreground resolves at the chart.",
+    "name": "--radar-chart-grid-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "HSL channels; default foreground resolves at the chart.",
+    "name": "--radar-chart-label-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "RadarChart tokens. Radii and font sizes use intrinsic SVG coordinates; colors resolve in the local theme scope.",
+    "name": "--radar-chart-grid-stroke-width",
+    "tier": "component",
+    "value": "1px"
+  },
   {
     "description": "Separator layout thickness; focus paint must not reserve extra space.",
     "name": "--resizable-handle-size",

package/dist/components/charts/index.d.ts

@@ -18,3 +18,5 @@ export { PieChart } from "./pie-chart.js";
 export type { PieChartProp, PieChartProps } from "./pie-chart.js";
 export type { ChartSeriesProp, ChartDatum, ChartDatumSelect } from "../../props/components/charts.prop.js";
 export { CHART_COLORS } from "./chart-frame.js";
+export { RadarChart } from "./radar-chart.js";
+export type { RadarChartProp, RadarChartProps } from "./radar-chart.js";

package/dist/components/charts/index.js

@@ -5,6 +5,7 @@ import { HeatmapChart } from "./heatmap-chart.js";
 import { AreaChart } from "./area-chart.js";
 import { PieChart } from "./pie-chart.js";
 import { CHART_COLORS } from "./chart-frame.js";
+import { RadarChart } from "./radar-chart.js";
 export {
   AreaChart,
   BarChart,
@@ -12,5 +13,6 @@ export {
   CompactBarTrend,
   HeatmapChart,
   LineChart,
-  PieChart
+  PieChart,
+  RadarChart
 };

package/dist/components/charts/radar-chart.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { RadarChartProp } from "../../props/components/charts.prop.js";
+export type { RadarChartProp, RadarChartProp as RadarChartProps, } from "../../props/components/charts.prop.js";
+/** Shared-scale profile. SVG geometry is intrinsic, never consumer CSS or inferred scores. */
+export declare function RadarChart({ data, categoryKey, valueKey, valueMax, valueTicks, label, showCaption, description, size, numberFormat, emptyMessage, footer, className, id, ref, }: RadarChartProp): React.JSX.Element;

package/dist/components/charts/radar-chart.js

@@ -0,0 +1,273 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { EmptyState } from "../data-display/empty-state.js";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { ChartFrame, chartColor, chartHeight, useChartNumberFormat } from "./chart-frame.js";
+function wrapLabel(text, locale, width, measure) {
+  const words = new Intl.Segmenter(locale, { granularity: "word" });
+  const graphemes = new Intl.Segmenter(locale, { granularity: "grapheme" });
+  const lines = [];
+  let line = "";
+  for (const { segment } of words.segment(text)) {
+    if (measure(line + segment) <= width) {
+      line += segment;
+      continue;
+    }
+    if (line.trim()) {
+      lines.push(line.trim());
+      line = "";
+    }
+    for (const { segment: char } of graphemes.segment(segment.trimStart())) {
+      if (line && measure(line + char) > width) {
+        lines.push(line);
+        line = "";
+      }
+      line += char;
+    }
+  }
+  if (line.trim()) lines.push(line.trim());
+  if (lines.length <= 2) return lines;
+  const last = Array.from(graphemes.segment(lines[1]), (part) => part.segment);
+  while (last.length && measure(last.join("") + "\u2026") > width) last.pop();
+  return [lines[0], last.join("") + "\u2026"];
+}
+function RadarChart({
+  data,
+  categoryKey,
+  valueKey,
+  valueMax,
+  valueTicks,
+  label,
+  showCaption = true,
+  description,
+  size = "md",
+  numberFormat,
+  emptyMessage,
+  footer,
+  className,
+  id,
+  ref
+}) {
+  const { t, locale } = useTranslation();
+  const fmt = useChartNumberFormat(numberFormat ?? { maximumSignificantDigits: 21 });
+  const uid = React.useId();
+  const svgRef = React.useRef(null);
+  const [measuredLabels, setMeasuredLabels] = React.useState([]);
+  React.useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg || typeof svg.getBBox !== "function") return;
+    let disposed = false;
+    const context = document.createElement("canvas").getContext("2d");
+    if (!context) return;
+    const update = () => {
+      if (disposed) return;
+      const lines = Array.from(
+        svg.querySelectorAll('[data-slot="radar-label"]'),
+        (node, index) => {
+          const style = getComputedStyle(node);
+          context.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+          const transform = new DOMMatrix(style.transform);
+          const inset = parseFloat(style.getPropertyValue("--radar-chart-label-inset")) || 0;
+          const width = Math.abs(transform.e) > 1 ? 240 - Math.abs(transform.e) - inset : 480 - inset * 2;
+          return {
+            lines: wrapLabel(
+              String(data[index][categoryKey] ?? ""),
+              locale,
+              Math.max(1, width),
+              (text) => context.measureText(text).width
+            ),
+            lineHeight: parseFloat(style.getPropertyValue("--radar-chart-label-line-height")) || 1.25
+          };
+        }
+      );
+      setMeasuredLabels(
+        (previous) => JSON.stringify(previous) === JSON.stringify(lines) ? previous : lines
+      );
+    };
+    update();
+    const resize = new ResizeObserver(update);
+    resize.observe(svg);
+    const theme = new MutationObserver(update);
+    for (let node = svg; node; node = node.parentElement) {
+      theme.observe(node, {
+        attributes: true,
+        attributeFilter: ["class", "style", "data-theme", "data-tenant"]
+      });
+    }
+    void document.fonts?.ready.then(update);
+    return () => {
+      disposed = true;
+      resize.disconnect();
+      theme.disconnect();
+    };
+  }, [data, categoryKey, locale, size, valueMax]);
+  const valid = data.length >= 3 && data.length <= 6 && Number.isFinite(valueMax) && valueMax > 0 && data.every(
+    (d) => typeof d[valueKey] === "number" && Number.isFinite(d[valueKey]) && Number(d[valueKey]) >= 0 && Number(d[valueKey]) <= valueMax
+  );
+  const point = (index, fraction, radius = 1) => {
+    const angle = -Math.PI / 2 + index * Math.PI * 2 / data.length;
+    return [Math.cos(angle) * radius * fraction, Math.sin(angle) * radius * fraction];
+  };
+  const polygon = (fraction) => data.map((_, i) => point(i, fraction).join(",")).join(" ");
+  const rows = data.map(
+    (d) => `${String(d[categoryKey] ?? "")}: ${fmt.format(Number(d[valueKey]))}`
+  );
+  const summary = t("chart.summaryRadar", {
+    maximum: fmt.format(valueMax),
+    points: fmt.format(data.length)
+  });
+  const ticks = valueTicks?.filter((v) => Number.isFinite(v) && v > 0 && v <= valueMax).map((v) => v / valueMax) ?? [0.25, 0.5, 0.75, 1];
+  const stroke = "hsl(var(--radar-chart-grid-color, var(--muted-foreground)))";
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ref,
+      label,
+      showCaption,
+      description,
+      summaryRows: rows,
+      imgSummary: summary,
+      hasData: valid,
+      size,
+      footer,
+      className,
+      id,
+      children: valid ? /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          ref: svgRef,
+          width: "100%",
+          style: { maxHeight: chartHeight(size), display: "block" },
+          viewBox: "0 0 480 320",
+          "aria-hidden": "true",
+          "data-slot": "radar-plot",
+          children: [
+            /* @__PURE__ */ jsx("title", { id: `${uid}-radar-title`, children: typeof label === "string" ? label : summary }),
+            /* @__PURE__ */ jsx("desc", { children: rows.join("; ") }),
+            /* @__PURE__ */ jsxs("g", { transform: "translate(240 160)", children: [
+              ticks.map((f) => /* @__PURE__ */ jsx(
+                "polygon",
+                {
+                  points: polygon(f),
+                  fill: "none",
+                  style: { transform: "scale(var(--radar-chart-plot-radius))" },
+                  vectorEffect: "non-scaling-stroke",
+                  strokeWidth: "var(--radar-chart-grid-stroke-width)",
+                  stroke,
+                  opacity: f === 1 ? "var(--radar-chart-boundary-alpha)" : "var(--radar-chart-grid-alpha)"
+                },
+                f
+              )),
+              data.map((_, i) => {
+                const [x, y] = point(i, 1);
+                return /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    strokeWidth: "var(--radar-chart-grid-stroke-width)",
+                    x1: 0,
+                    y1: 0,
+                    x2: x,
+                    y2: y,
+                    stroke,
+                    opacity: "var(--radar-chart-axis-alpha)",
+                    vectorEffect: "non-scaling-stroke",
+                    style: { transform: "scale(var(--radar-chart-plot-radius))" }
+                  },
+                  i
+                );
+              }),
+              ticks.map((f) => /* @__PURE__ */ jsx(
+                "text",
+                {
+                  "data-slot": "radar-tick",
+                  style: {
+                    transform: `translate(calc(-1 * var(--radar-chart-tick-offset)), calc(-${f} * var(--radar-chart-plot-radius) * 1px))`
+                  },
+                  textAnchor: "end",
+                  fill: stroke,
+                  fontSize: "var(--radar-chart-tick-font-size)",
+                  children: fmt.format(valueMax * f)
+                },
+                f
+              )),
+              /* @__PURE__ */ jsx(
+                "polygon",
+                {
+                  "data-slot": "radar-area",
+                  style: { transform: "scale(var(--radar-chart-plot-radius))" },
+                  vectorEffect: "non-scaling-stroke",
+                  points: data.map((d, i) => point(i, Number(d[valueKey]) / valueMax).join(",")).join(" "),
+                  fill: chartColor(0),
+                  fillOpacity: "var(--chart-area-fill-alpha)",
+                  stroke: chartColor(0),
+                  strokeWidth: "var(--chart-series-stroke-width)",
+                  strokeLinejoin: "round"
+                }
+              ),
+              data.map((d, i) => {
+                const [x, y] = point(i, Number(d[valueKey]) / valueMax);
+                const [lx, ly] = point(i, 1);
+                const fullLabel = String(d[categoryKey] ?? "");
+                const shown = measuredLabels[i]?.lines ?? wrapLabel(
+                  fullLabel,
+                  locale,
+                  Math.abs(lx) > 0.1 ? 104 : 400,
+                  (text) => Array.from(text).reduce(
+                    (width, char) => width + (char.codePointAt(0) > 255 ? 16 : 9),
+                    0
+                  )
+                );
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      r: "var(--radar-chart-point-radius)",
+                      style: {
+                        transform: `translate(calc(${x} * var(--radar-chart-plot-radius) * 1px), calc(${y} * var(--radar-chart-plot-radius) * 1px))`
+                      },
+                      fill: chartColor(0)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "text",
+                    {
+                      "data-slot": "radar-label",
+                      style: {
+                        transform: `translate(calc(${lx} * var(--radar-chart-label-radius)), calc(${ly} * var(--radar-chart-label-radius)))`
+                      },
+                      textAnchor: lx > 0.1 ? "start" : lx < -0.1 ? "end" : "middle",
+                      dominantBaseline: "middle",
+                      fill: "hsl(var(--radar-chart-label-color, var(--foreground)))",
+                      fontSize: "var(--radar-chart-label-font-size)",
+                      fontFamily: "inherit",
+                      children: [
+                        /* @__PURE__ */ jsxs("title", { children: [
+                          fullLabel,
+                          ": ",
+                          fmt.format(Number(d[valueKey]))
+                        ] }),
+                        shown.map((line, index) => /* @__PURE__ */ jsx(
+                          "tspan",
+                          {
+                            x: 0,
+                            dy: index ? `${measuredLabels[i]?.lineHeight ?? 1.25}em` : 0,
+                            children: line
+                          },
+                          index
+                        ))
+                      ]
+                    }
+                  )
+                ] }, i);
+              })
+            ] })
+          ]
+        }
+      ) : /* @__PURE__ */ jsx(EmptyState, { title: emptyMessage ?? t("chart.empty") })
+    }
+  );
+}
+export {
+  RadarChart
+};

package/dist/components/layout/affix.js

@@ -67,7 +67,9 @@ const Affix = React.forwardRef(function Affix2({
     assumeInView: true
   });
   const [rendered, setRendered] = React.useState(true);
-  const affixed = !inView && rendered;
+  const [sticky, setSticky] = React.useState(false);
+  const [stuck, setStuck] = React.useState(false);
+  const affixed = (sticky ? stuck : !inView) && rendered;
   const [box, setBox] = React.useState(null);
   const [targetInset, setTargetInset] = React.useState(0);
   const [room, setRoom] = React.useState(null);
@@ -84,21 +86,31 @@ const Affix = React.forwardRef(function Affix2({
     );
     const rect = targetElement?.getBoundingClientRect();
     const blockEl = fixedContainingBlock(content);
+    const sentinelRect = sentinelRef.current?.getBoundingClientRect();
+    const insetStart = sentinelRect ? rootRect.top - sentinelRect.top : 0;
+    const insetEnd = sentinelRect ? sentinelRect.bottom - rootRect.bottom : 0;
+    const visibleTop = Math.max(rect ? rect.top : 0, 0);
+    const visibleBottom = Math.min(rect ? rect.bottom : window.innerHeight, window.innerHeight);
+    const line = pinToEnd ? visibleBottom - insetEnd : (rect ? rect.top : 0) + insetStart;
+    const parent = root.parentElement;
+    const nextSticky = blockEl !== null && blockEl === targetElement && parent !== null && parent.getBoundingClientRect().height > rootRect.height + 1;
+    setSticky((previous) => previous === nextSticky ? previous : nextSticky);
+    if (nextSticky) {
+      const atLine = Math.abs((pinToEnd ? rootRect.bottom : rootRect.top) - line) < 1;
+      const nextStuck = atLine && (targetElement?.scrollTop ?? 0) > 0;
+      setStuck((previous) => previous === nextStuck ? previous : nextStuck);
+      setTargetInset((previous) => previous === 0 ? previous : 0);
+    }
     const block = blockEl?.getBoundingClientRect();
     const viewportInset = rect ? pinToEnd ? window.innerHeight - rect.bottom : rect.top : 0;
     const blockOffset = block ? pinToEnd ? window.innerHeight - (block.bottom + ((blockEl?.scrollHeight ?? 0) - (blockEl?.clientHeight ?? 0) - (blockEl?.scrollTop ?? 0))) : block.top - (blockEl?.scrollTop ?? 0) : 0;
     const next = viewportInset - blockOffset;
-    setTargetInset((previous) => previous === next ? previous : next);
-    if (!affixed) {
+    if (!nextSticky) setTargetInset((previous) => previous === next ? previous : next);
+    if (!affixed && !nextSticky) {
       setRoom((previous) => previous === null ? previous : null);
       return;
     }
-    const nextRoom = Math.max(
-      0,
-      Math.floor(
-        pinToEnd ? contentRect.bottom - Math.max(rect ? rect.top : 0, 0) : Math.min(rect ? rect.bottom : window.innerHeight, window.innerHeight) - contentRect.top
-      )
-    );
+    const nextRoom = Math.max(0, Math.floor(pinToEnd ? line - visibleTop : visibleBottom - line));
     const clamp = blockSize > nextRoom ? nextRoom : null;
     setRoom((previous) => previous === clamp ? previous : clamp);
   }, [affixed, pinToEnd, targetElement]);
@@ -120,7 +132,7 @@ const Affix = React.forwardRef(function Affix2({
     };
   }, [measure, targetElement]);
   React.useEffect(() => {
-    if (!affixed || typeof window === "undefined") return void 0;
+    if (!affixed && !sticky || typeof window === "undefined") return void 0;
     let frame = null;
     const onScroll = () => {
       if (frame !== null) return;
@@ -136,7 +148,7 @@ const Affix = React.forwardRef(function Affix2({
       window.removeEventListener("resize", onScroll);
       if (frame !== null) window.cancelAnimationFrame(frame);
     };
-  }, [affixed, targetElement, measure]);
+  }, [affixed, sticky, targetElement, measure]);
   React.useEffect(() => {
     const content = contentRef.current;
     if (pinToEnd || !affixed || !content || typeof document === "undefined") return void 0;
@@ -165,9 +177,9 @@ const Affix = React.forwardRef(function Affix2({
   const style = {
     ...offsetBlockStart === void 0 ? void 0 : { "--affix-inset-block-start": `${offsetBlockStart}px` },
     ...offsetBlockEnd === void 0 ? void 0 : { "--affix-inset-block-end": `${offsetBlockEnd}px` },
-    ...targetInset === 0 ? void 0 : { "--affix-target-inset": `${targetInset}px` },
-    ...affixed && box ? { "--affix-content-inline-size": `${box.inline}px` } : void 0,
-    ...affixed && room !== null ? { "--affix-content-max-block-size": `${room}px` } : void 0
+    ...sticky || targetInset === 0 ? void 0 : { "--affix-target-inset": `${targetInset}px` },
+    ...!sticky && affixed && box ? { "--affix-content-inline-size": `${box.inline}px` } : void 0,
+    ...(affixed || sticky) && room !== null ? { "--affix-content-max-block-size": `${room}px` } : void 0
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -180,6 +192,7 @@ const Affix = React.forwardRef(function Affix2({
       id,
       "data-slot": "affix",
       "data-affixed": affixed ? "" : void 0,
+      "data-pin": sticky ? pinToEnd ? "sticky-end" : "sticky-start" : void 0,
       className: cn("ui-affix", className),
       style,
       ...rest,
@@ -194,7 +207,7 @@ const Affix = React.forwardRef(function Affix2({
             className: "ui-affix-sentinel"
           }
         ),
-        affixed && box ? /* @__PURE__ */ jsx(
+        affixed && box && !sticky ? /* @__PURE__ */ jsx(
           "div",
           {
             "data-slot": "affix-placeholder",
@@ -209,7 +222,7 @@ const Affix = React.forwardRef(function Affix2({
             ref: contentRef,
             "data-slot": "affix-content",
             "data-edge": pinToEnd ? "block-end" : "block-start",
-            "data-clamped": affixed && room !== null ? "" : void 0,
+            "data-clamped": (affixed || sticky) && room !== null ? "" : void 0,
             "data-affixed": affixed ? "" : void 0,
             className: "ui-affix-content",
             children