@godxjp/ui 28.13.0 → 29.0.0

package/dist/components/data-display/table.js

@@ -78,14 +78,30 @@ const TableBody = React.forwardRef(({ className, ...props }, ref) => (
   /* @__PURE__ */ jsx("tbody", { ref, "data-slot": "table-body", className: cn(className), ...props })
 ));
 TableBody.displayName = "TableBody";
-const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const TableRow = React.forwardRef(({ className, tone, ...props }, ref) => /* @__PURE__ */ jsx(
   "tr",
   {
     ref,
+    "data-tone": tone,
     className: cn(
       // The row rule itself is `.ui-table-row` in table-layout.css (--table-row-border-width),
       // NOT a `border-b` utility — a utility sits in `@layer utilities` and would outrank the
-      "ui-table-row hover:bg-accent/70 data-[state=selected]:bg-primary/[0.06] transition-colors",
+      //
+      // THE WASH NOW READS THE SAME TOKEN THE PINNED-COLUMN MIRROR ALREADY DID (gh#894). A bare
+      // `hover:bg-accent/70` could not be retuned by any theme — the pin-column mirror right
+      // below this file's own selectors (table-layout.css, data-display-layout.css) already
+      // reads `--table-row-hover-background-alpha`, so the row that actually owns the fill was
+      // the one piece a theme could not reach. The shared default stays 0.7 (unchanged; gh#700
+      // needs it >= ~0.68 or a striped row's hover stops being a visible step) — a tone Badge
+      // composed over a hovered GLASS row still measures 4.02–4.34:1 on four of five seeds, and
+      // clearing that needs glass's OWN lower value for this token (its theme file, not this
+      // one). What this line fixes is that a theme now CAN set that value at all.
+      //
+      // `color-mix(…)`, not `hsl(var(--accent) / var(--x, 70%))`: Tailwind's arbitrary-property
+      // parser treats a bare `/` inside the bracket as ITS OWN opacity-modifier boundary — that
+      // spelling measured 0.1 alpha in Chromium (not 0.7), silently. `color-mix` has no `/` for
+      // it to misread, matching the same idiom `toneSuccessClass` already uses (control-styles.ts).
+      "ui-table-row data-[state=selected]:bg-primary/[0.06] transition-colors hover:[background-color:color-mix(in_oklab,hsl(var(--accent))_var(--table-row-hover-background-alpha,70%),transparent)]",
       className
     ),
     ...props

package/dist/components/data-entry/control-appearance.d.ts

@@ -28,13 +28,19 @@ export type ControlAppearanceAttributes = {
  */
 export declare function controlAppearanceAttributes({ status, variant, "aria-invalid": ariaInvalid, }: ControlAppearanceInput): ControlAppearanceAttributes;
 /**
- * The chrome utilities a variant carries, kept in the COMPONENT rather than in `control.css`.
+ * The chrome a variant carries, kept in the COMPONENT rather than in `control.css`.
  *
- * A Tailwind utility lives in `@layer utilities`, which outranks `@layer components` no matter
- * how specific the component rule is — so `bg-background` baked unconditionally into the class
- * list would silently defeat `filled` and `borderless` and no gate would notice. The outlined
- * field therefore keeps exactly the utilities it always had, and the other two simply do not
- * receive them; their surface comes from `.ui-control--filled` / `.ui-control--borderless`.
+ * A Tailwind utility lives in `@layer utilities`, which outranks `@layer components` no matter how
+ * specific the component rule is — so a chrome class baked unconditionally into the base list
+ * would silently defeat `filled` and `borderless` and no gate would notice. Each variant therefore
+ * receives exactly its own, and the other two never see it.
+ *
+ * `outlined` USED TO BE THE TWO UTILITIES `border-input bg-background` (gh#880). That is why
+ * `--control-surface-background` / `--control-surface-border-color` — documented, published, and
+ * reaching the whole select family through `.ui-control-surface` — reached neither Input nor
+ * DatePicker: the utilities outranked the tokens by construction. It is a component CLASS now, so
+ * the same two tokens paint every field in the library. No token was added; the existing pair just
+ * has no hole left in it. See `.ui-control-outlined-surface` in control.css.
  */
 export declare const CONTROL_VARIANT_CHROME_CLASS: Record<ControlVariantProp, string>;
 /**

package/dist/components/data-entry/control-appearance.js

@@ -10,7 +10,7 @@ function controlAppearanceAttributes({
   };
 }
 const CONTROL_VARIANT_CHROME_CLASS = {
-  outlined: "border-input bg-background",
+  outlined: "ui-control-outlined-surface",
   filled: "ui-control--filled",
   borderless: "ui-control--borderless"
 };

package/dist/components/data-entry/select.js

@@ -213,6 +213,7 @@ function LabelInValueSelect({
 }
 function CompoundSelect({ id, name, ...props }) {
   const fieldA11y = pickFieldA11y(props);
+  const nameFallback = useFieldNameFallback(fieldA11y);
   const identity = useFieldIdentity({ id, name, "data-field": fieldA11y["data-field"] });
   return /* @__PURE__ */ jsx(
     SelectFieldA11yContext.Provider,
@@ -229,7 +230,7 @@ function CompoundSelect({ id, name, ...props }) {
           id,
           name: name ?? identity.name,
           "aria-label": fieldA11y["aria-label"],
-          "aria-labelledby": fieldA11y["aria-labelledby"]
+          "aria-labelledby": fieldA11y["aria-labelledby"] ?? nameFallback["aria-labelledby"]
         }
       )
     }
@@ -731,8 +732,8 @@ function DataSelect(props) {
       },
       disabled: disabled || !hasOptions && !showEmptyPopup,
       allowsEmptyCollection: showEmptyPopup,
-      "aria-label": ariaProps["aria-label"],
-      "aria-labelledby": ariaProps["aria-labelledby"],
+      "aria-label": ariaProps["aria-label"] ?? nameFromPlaceholder,
+      "aria-labelledby": ariaProps["aria-labelledby"] ?? inheritedName["aria-labelledby"],
       name: resolvedName,
       open,
       defaultOpen,

package/dist/components/feedback/dialog.js

@@ -93,7 +93,10 @@ function DialogShell({
             ...props,
             style,
             ref: mergeRefs(ref, racRef, contentRef),
-            onKeyDown: chain(props.onKeyDown, closeOnEscape(() => state.setOpen(false)))
+            onKeyDown: chain(
+              props.onKeyDown,
+              closeOnEscape(() => state.setOpen(false))
+            )
           }
         );
       },
@@ -195,7 +198,7 @@ function DialogContent({
         showCloseButton ? /* @__PURE__ */ jsxs(
           DialogClose,
           {
-            className: "ui-focus-ring transition-opacity disabled:pointer-events-none",
+            className: "ui-dialog-close ui-focus-ring transition-opacity disabled:pointer-events-none",
             children: [
               /* @__PURE__ */ jsx(X, { className: "ui-dialog-close-icon", "aria-hidden": "true" }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
@@ -313,7 +316,7 @@ function AlertDialogContent({
       {
         type: "button",
         "data-slot": "dialog-close",
-        className: "ui-focus-ring transition-opacity disabled:pointer-events-none",
+        className: "ui-dialog-close ui-focus-ring transition-opacity disabled:pointer-events-none",
         "aria-label": t("feedback.alert.dismiss"),
         onClick: () => {
           state.setOpen(false);

package/dist/components/feedback/overlay-header-tone.d.ts

@@ -3,5 +3,12 @@ import type { ToneProp } from "../../props/vocabulary/index.js";
  * Soft semantic background band for an overlay header (Sheet / Dialog / Drawer).
  * Tints ONLY the background — text stays `--foreground` (渋み: never invert the band into a loud
  * solid fill).
+ *
+ * The four STATUS bands read `--surface-*` with today's 10% wash as the call-site fallback
+ * (gh#866), so a brand whose kit pairs each status ink with an independently chosen pale ground
+ * paints that ground here too — the band is one of eight surfaces that used to derive its own and
+ * therefore could not agree with the Badge sitting in it. `muted`/`neutral` are not statuses and
+ * keep `bg-muted`. Arbitrary property rather than `bg-success/10`: same utility layer, same
+ * specificity, nothing about the cascade moves.
  */
 export declare const overlayHeaderToneClass: Record<ToneProp, string>;

package/dist/components/feedback/overlay-header-tone.js

@@ -1,9 +1,9 @@
 const overlayHeaderToneClass = {
   default: "",
-  success: "bg-success/10",
-  warning: "bg-warning/10",
-  destructive: "bg-destructive/10",
-  info: "bg-info/10",
+  success: "[background-color:var(--surface-success,color-mix(in_oklab,hsl(var(--success))_10%,transparent))]",
+  warning: "[background-color:var(--surface-warning,color-mix(in_oklab,hsl(var(--warning))_10%,transparent))]",
+  destructive: "[background-color:var(--surface-destructive,color-mix(in_oklab,hsl(var(--destructive))_10%,transparent))]",
+  info: "[background-color:var(--surface-info,color-mix(in_oklab,hsl(var(--info))_10%,transparent))]",
   muted: "bg-muted",
   neutral: "bg-muted"
 };

package/dist/components/feedback/sheet.d.ts

@@ -28,7 +28,7 @@ export interface SheetProps {
     modal?: boolean;
     children?: React.ReactNode;
 }
-export declare function Sheet({ open, defaultOpen, onOpenChange, modal, children, }: SheetProps): React.JSX.Element;
+export declare function Sheet({ open, defaultOpen, onOpenChange, modal, children }: SheetProps): React.JSX.Element;
 export interface SheetTriggerProps extends React.ComponentPropsWithRef<"button"> {
     /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
     asChild?: boolean;

package/dist/components/feedback/sheet.js

@@ -31,13 +31,7 @@ function useSheetOpenState(component) {
 }
 const SheetModalContext = React.createContext(true);
 const SheetLabelContext = React.createContext(null);
-function Sheet({
-  open,
-  defaultOpen,
-  onOpenChange,
-  modal = true,
-  children
-}) {
+function Sheet({ open, defaultOpen, onOpenChange, modal = true, children }) {
   const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? false);
   const isOpen = open ?? uncontrolled;
   const setOpen = React.useCallback(
@@ -97,7 +91,7 @@ function SheetOverlay(_props) {
 SheetOverlay.displayName = "SheetOverlay";
 const SHEET_OVERLAY_CLASS = "ui-sheet-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed";
 const sheetVariants = cva(
-  "ui-sheet-panel fixed flex flex-col gap-[var(--space-chrome-gap)] bg-background px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)] transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+  "ui-sheet-panel fixed flex flex-col gap-[var(--space-chrome-gap)] text-foreground px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)] transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
   {
     variants: {
       // `side` is a deliberately PHYSICAL API (left/right/top/bottom) — a sheet
@@ -171,7 +165,10 @@ function SheetContent({
             ...props,
             style: mergedStyle,
             ref: mergeRefs(ref, racRef, contentRef),
-            onKeyDown: chain(props.onKeyDown, closeOnEscape(() => state.setOpen(false)))
+            onKeyDown: chain(
+              props.onKeyDown,
+              closeOnEscape(() => state.setOpen(false))
+            )
           }
         );
       },

package/dist/components/feedback/sonner.js

@@ -1,8 +1,10 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { createPortal } from "react-dom";
 import { CheckCircle2, Info, Loader2, OctagonX, TriangleAlert } from "lucide-react";
 import { Toaster as Sonner } from "sonner";
+import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
 function useDocumentTheme() {
   return React.useSyncExternalStore(
     (onStoreChange) => {
@@ -33,7 +35,11 @@ const toneVars = Object.fromEntries(
   TOAST_TONES.flatMap(({ type, hue, ink }) => [
     [
       `--${type}-bg`,
-      `color-mix(in srgb, hsl(var(--${hue})) calc(var(--alert-bg-alpha) * 100%), hsl(var(--popover)))`
+      // gh#866 — the surface reads its `--surface-*` role first, with the composite above as the
+      // call-site fallback. Without it the toast was the fourth of eight status surfaces that
+      // could only ever be a derivation of its own ink, so a brand's chosen pale ground reached
+      // the Alert and not the toast that says the same sentence.
+      `var(--surface-${hue}, color-mix(in srgb, hsl(var(--${hue})) calc(var(--alert-bg-alpha) * 100%), hsl(var(--popover) / var(--popover-alpha, 100%))))`
     ],
     [`--${type}-border`, `hsl(var(--${hue}) / var(--alert-border-alpha))`],
     [`--${type}-text`, `hsl(var(--${ink}))`]
@@ -41,7 +47,8 @@ const toneVars = Object.fromEntries(
 );
 function Toaster({ style, richColors = true, ...props }) {
   const theme = useDocumentTheme();
-  return /* @__PURE__ */ jsx(
+  const overlayPortalContainer = useOverlayPortalContainer();
+  const toaster = /* @__PURE__ */ jsx(
     Sonner,
     {
       theme,
@@ -59,7 +66,12 @@ function Toaster({ style, richColors = true, ...props }) {
         // sonner uses these vars verbatim as CSS colors, so wrap with hsl()
         // here — unwrapped they are invalid values and the toast renders
         // transparent.
-        "--normal-bg": "hsl(var(--popover))",
+        // `--normal-bg` is SONNER's private name, so the package's own knob is threaded through
+        // it (gh#880): a theme sets `--toast-background` like every other surface's fill and
+        // never has to know that this one surface is painted by a vendor stylesheet. The default
+        // is the same `hsl(var(--popover))` and resolves in the browser, on the toaster, under
+        // whatever scope it sits in — so a themed region's toast follows the region (gh#877).
+        "--normal-bg": "var(--toast-background, hsl(var(--popover) / var(--popover-alpha, 100%)))",
         "--normal-text": "hsl(var(--popover-foreground))",
         "--normal-border": "hsl(var(--border))",
         "--border-radius": "var(--radius)",
@@ -77,6 +89,7 @@ function Toaster({ style, richColors = true, ...props }) {
       ...props
     }
   );
+  return overlayPortalContainer ? createPortal(toaster, overlayPortalContainer) : toaster;
 }
 export {
   Toaster

package/dist/components/general/button.js

@@ -16,17 +16,34 @@ const buttonVariants = cva("ui-button", {
       // utilities, out-ranked it: the hover step this library takes from the derived tier
       // (`--primary-hover`) could never take effect while `hover:bg-primary/90` was emitted here.
       default: "ui-button--default",
-      destructive: "ui-button--destructive bg-destructive text-destructive-foreground",
+      // `bg-destructive` LEFT for the reason spelled out on `default` above, and gh#880 is
+      // where it finally cost something: a utility out-ranks `@layer components`, so
+      // `--button-destructive-background` could not have reached this variant while it stood.
+      // The ink stays a utility — nothing competes for `color` here.
+      destructive: "ui-button--destructive text-destructive-foreground",
       // `shadow-xs` từng nằm ở đây và mắc ĐÚNG lỗi đã nêu ngay trên cho `default`:
       // một utility thì out-rank tầng components, nên bóng của nút outline đi vòng
       // qua tầng token — consumer đặt `--shadow-sm: none` thì `default` sạch bóng còn
       // `outline` trơ ra. Nay bóng khai ở `.ui-button--outline` và đọc `var(--shadow-sm)`
       // như mọi biến thể khác, nên nó tắt/đổi được qua theme. (gh#662)
-      outline: "ui-button--outline border bg-background hover:bg-accent hover:text-accent-foreground",
-      dashed: "ui-button--dashed border border-dashed bg-background hover:bg-accent hover:text-accent-foreground",
-      secondary: "ui-button--secondary bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      // `bg-background` gone for the same reason (gh#880). The HOVER fill stays a utility: it
+      // is the same value `.ui-button--outline:hover` declares, and moving it is a separate
+      // decision from making the resting surface reachable.
+      outline: "ui-button--outline border hover:bg-accent hover:text-accent-foreground",
+      // `dashed` is `outline` with a dashed edge, so it shares `--button-outline-background`
+      // rather than growing a knob of its own (gh#880).
+      dashed: "ui-button--dashed border border-dashed hover:bg-accent hover:text-accent-foreground",
+      secondary: "ui-button--secondary text-secondary-foreground hover:bg-secondary/80",
       ghost: "ui-button--ghost hover:bg-accent hover:text-accent-foreground",
-      link: "ui-button--link text-primary underline-offset-4 hover:underline",
+      // `text-primary` gone for the reason `bg-background` went in gh#880 and the checkbox's
+      // `data-[state=checked]:bg-primary` went before it: a utility is layered AFTER components in
+      // Tailwind v4, so it silently out-ranked `.ui-button--link`'s own `color` and NO token could
+      // reach this ink. gh#884 measured the consequence — the link is the one Button variant whose
+      // brand colour is TEXT on a page surface rather than a fill, and it fails WCAG 2.2 AA at
+      // 9 of 15 theme x seed cells. The components-layer rule now resolves
+      // `var(--button-link-foreground, hsl(var(--primary)))`, and `text-primary` compiled to
+      // exactly that fallback, so the default is byte-identical.
+      link: "ui-button--link underline-offset-4 hover:underline",
       // NO utilities, deliberately: `bare` is the absence of geometry, and every property it has
       // to unset (the size tier's height and inline inset) is declared in the components layer.
       // A utility here would be the only thing that could out-rank it. See `.ui-button--bare`.

package/dist/components/layout/affix.js

@@ -13,6 +13,16 @@ function resolveTarget(target) {
   if (!node || typeof window === "undefined" || node === window) return null;
   return node;
 }
+function fixedContainingBlock(node) {
+  if (typeof window === "undefined") return null;
+  for (let n = node?.parentElement ?? null; n && n !== document.documentElement; n = n.parentElement) {
+    const cs = window.getComputedStyle(n);
+    if (cs.filter !== "none" || cs.backdropFilter !== "none" || cs.transform !== "none" || cs.perspective !== "none" || /transform|filter|perspective/.test(cs.willChange) || /paint|layout|strict|content/.test(cs.contain)) {
+      return n;
+    }
+  }
+  return null;
+}
 const Affix = React.forwardRef(function Affix2({
   children,
   offsetBlockStart,
@@ -63,7 +73,11 @@ const Affix = React.forwardRef(function Affix2({
       (previous) => previous && previous.inline === rootRect.width && previous.block === contentRect.height ? previous : { inline: rootRect.width, block: contentRect.height }
     );
     const rect = targetElement?.getBoundingClientRect();
-    const next = rect ? pinToEnd ? window.innerHeight - rect.bottom : rect.top : 0;
+    const blockEl = fixedContainingBlock(content);
+    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);
   }, [pinToEnd, targetElement]);
   React.useLayoutEffect(() => {

package/dist/components/layout/sidebar.js

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { CONTRAST_PIVOT, relativeLuminance } from "../../app/tenant-theme.js";
 import { Slot } from "../../lib/slot.js";
 import { ChevronDown } from "lucide-react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../data-display/collapsible.js";
@@ -315,11 +316,16 @@ function Sidebar({
   return /* @__PURE__ */ jsxs("div", { className: "sb-root", "data-collapsed": collapsed ? "true" : void 0, children: [
     brand !== void 0 ? /* @__PURE__ */ jsx(SidebarHeader, { children: brandNode }) : product ? (() => {
       const interactive = onProductClick != null;
+      const markLuminance = product.color != null ? relativeLuminance(product.color) : null;
+      const markInk = product.color == null ? "hsl(var(--attention-foreground))" : markLuminance == null ? "white" : markLuminance > CONTRAST_PIVOT ? "black" : "white";
       const mark = /* @__PURE__ */ jsx(
         "span",
         {
           className: "sb-logo-mark",
-          style: { background: product.color ?? "hsl(var(--attention))" },
+          style: {
+            background: product.color ?? "hsl(var(--attention))",
+            color: `var(--sidebar-logo-mark-color, ${markInk})`
+          },
           children: product.name[0]?.toUpperCase() ?? "?"
         }
       );

package/dist/components/navigation/anchor.d.ts

@@ -58,7 +58,7 @@ export type { AnchorContainerProp, AnchorDirectionProp, AnchorItemProp, AnchorPr
  * the target section, not just the scroll position, so the next Tab continues from where the
  * reader was sent instead of from the nav.
  */
-export declare function Anchor({ items, direction, affix, bounds, getContainer, getCurrentAnchor, offsetBlockStart, targetOffsetBlockStart, showInkInFixed, replace, value, defaultValue, onValueChange, onChange, offsetTop, targetOffset, onClick, label, id, className, ...rest }: AnchorProp): React.JSX.Element;
+export declare function Anchor({ items, direction, affix, bounds, target, getContainer, getCurrentAnchor, offsetBlockStart, targetOffsetBlockStart, showInkInFixed, replace, value, defaultValue, onValueChange, onChange, offsetTop, targetOffset, onClick, label, id, className, ...rest }: AnchorProp): React.JSX.Element;
 export declare namespace Anchor {
     var displayName: string;
 }

package/dist/components/navigation/anchor.js

@@ -36,6 +36,7 @@ function Anchor({
   direction = "vertical",
   affix = true,
   bounds = DEFAULT_BOUNDS,
+  target,
   getContainer,
   getCurrentAnchor,
   offsetBlockStart,
@@ -117,10 +118,10 @@ function Anchor({
     if (!controlledRef.current) setInternal(href);
     onValueChangeRef.current?.(href);
   }, []);
-  const container = React.useCallback(
-    () => getContainer?.() ?? window,
-    [getContainer]
-  );
+  const container = React.useCallback(() => {
+    if (target) return target() ?? window;
+    return getContainer?.() ?? window;
+  }, [target, getContainer]);
   const line = targetOffsetBlockStart ?? offsetBlockStart ?? 0;
   const resolveFromScroll = React.useCallback(() => {
     if (typeof document === "undefined") return "";

package/dist/components/navigation/app-setting-picker.js

@@ -122,6 +122,7 @@ const AppSettingPicker = React.forwardRef(
         }),
         disabled: disabled || unbound,
         name,
+        "aria-label": t(ARIA_KEY[kind]),
         children: [
           /* @__PURE__ */ jsxs(
             SelectTrigger,
@@ -216,7 +217,6 @@ const AppSettingPicker = React.forwardRef(
               ),
               "data-kind": kind,
               "data-appearance": resolvedAppearance,
-              "aria-label": t(ARIA_KEY[kind]),
               children: [
                 inline ? null : /* @__PURE__ */ jsx(
                   Icon,

package/dist/components/navigation/pagination.js

@@ -241,12 +241,12 @@ function Pagination({
             value: String(pageSize),
             onValueChange: (v) => go(1, Number(v)),
             disabled,
+            "aria-label": t("navigation.pagination.pageSize"),
             children: [
               /* @__PURE__ */ jsx(
                 SelectTrigger,
                 {
                   className: "ui-pagination-size-trigger w-max min-w-[var(--pagination-size-width)]",
-                  "aria-label": t("navigation.pagination.pageSize"),
                   children: /* @__PURE__ */ jsx(SelectValue, { children: t("navigation.pagination.pageSizeTrigger", { size: pageSize }) })
                 }
               ),

package/dist/components/navigation/tabs.js

@@ -494,7 +494,14 @@ const TabsList = React.forwardRef(
           // — so the leading tab sat permanently outside the scrollport (an unreachable control at
           // 320px, WCAG 2.2 SC 2.1.1). `safe` falls back to start alignment exactly when it
           // overflows, and still centres whenever the tabs fit.
-          "group/tabs-list text-muted-foreground data-[variant=default]:bg-muted inline-flex w-fit max-w-full min-w-0 items-center justify-center-safe rounded-lg p-1 group-data-[orientation=vertical]/tabs:flex-col data-[orientation=horizontal]:[scrollbar-width:none] data-[orientation=horizontal]:overflow-x-auto data-[orientation=horizontal]:overflow-y-hidden data-[variant=line]:gap-[var(--tabs-list-line-space-gap)] data-[variant=line]:rounded-none data-[variant=line]:bg-transparent [&[data-orientation=horizontal]::-webkit-scrollbar]:hidden",
+          // `data-[variant=default]:bg-muted` USED TO BE HERE AND IS NOW `--tabs-list-background`
+          // in navigation-layout.css (gh#880). A Tailwind utility lives in `@layer utilities`, so
+          // while the track was painted from here NO rule this package writes could reach it and a
+          // theme had no knob at all — the visible defect being a translucent Card whose Tabs strip
+          // stayed opaque `--muted`. Nothing about the card/line strips changes: both clear the
+          // track with utilities of their own (`data-[variant=default]:bg-transparent`,
+          // `data-[variant=line]:bg-transparent`), and a utility still outranks the new rule.
+          "group/tabs-list text-muted-foreground inline-flex w-fit max-w-full min-w-0 items-center justify-center-safe rounded-lg p-1 group-data-[orientation=vertical]/tabs:flex-col data-[orientation=horizontal]:[scrollbar-width:none] data-[orientation=horizontal]:overflow-x-auto data-[orientation=horizontal]:overflow-y-hidden data-[variant=line]:gap-[var(--tabs-list-line-space-gap)] data-[variant=line]:rounded-none data-[variant=line]:bg-transparent [&[data-orientation=horizontal]::-webkit-scrollbar]:hidden",
           className
         ),
         render: (domProps) => withDomProps("div", "tabs-list", props, domProps, { "data-variant": variant }),
@@ -541,7 +548,13 @@ const TabsTrigger = React.forwardRef(
           // labels needing 107 / 95 / 53px, i.e. the SAME defect one API away. antd puts no
           // `flex-grow` on a tab of any `type`, so the rule belongs to the line STRIP rather than
           // to one construction path; the pill strip keeps `flex-1`, which is what fills its box.
-          "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs:group-data-[variant=default]/tabs-list:data-[state=active]:border-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:flex-none group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs:group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+          // `data-[state=active]:bg-background` USED TO BE HERE and is now
+          // `--tabs-trigger-active-background` in navigation-layout.css, for the same reason as the
+          // list's track (gh#880): the selected slab of this library's other track-and-slab control
+          // — Segmented — has been `--segmented-item-selected-background` since gh#848, and these
+          // two are documented as the same pair. The card face and the line strip both restate the
+          // fill as utilities, which still outrank the new rule, so neither moves.
+          "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:text-foreground group-data-[variant=default]/tabs:group-data-[variant=default]/tabs-list:data-[state=active]:border-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:flex-none group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs:group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
           // The tier the root was given. Without this the compound form ignored `size` outright.
           triggerSizeClassName(size),
           className

package/dist/components/query/infinite-query-state.d.ts

@@ -1,14 +1,30 @@
 import * as React from "react";
 import type { InfiniteQueryStateProp } from "../../props/components/query.prop.js";
 export type { InfiniteQueryStateProp, InfiniteQueryStateProp as InfiniteQueryStateProps, } from "../../props/components/query.prop.js";
-/** Flatten `{ pages: [{ items }] }` — default GODX paginated API shape. */
-export declare function flattenItemPages<TItem, TPage extends {
-    items: TItem[];
-}>(data: {
-    pages: TPage[];
+/**
+ * Flatten `{ pages: [{ items }] }` — default GODX paginated API shape.
+ *
+ * TItem USED TO BE ITS OWN TYPE PARAMETER, constrained by `TPage extends { items: TItem[] }`, and
+ * that made it uninferable in the one way this function is documented to be used. TypeScript infers
+ * a type parameter from ARGUMENT POSITIONS, never from another parameter's constraint, so passing
+ * the function by reference — `flatten={flattenItemPages}`, the whole API — left TItem at its
+ * fallback and collapsed InfiniteQueryState's TFlat to `unknown`. The catalog example was written
+ * with `flattenItemPages as any` and `(items: any)` to silence exactly that, which is how the
+ * signature survived (gh#889).
+ *
+ * Taking the page shape INLINE — `{ pages: { items: TItem[] }[] }` — puts TItem in an argument
+ * position, so it is inferred from the real page type and `items` arrives as `Activity[]`. TPage
+ * itself was never used for anything but that constraint, so naming it bought nothing.
+ */
+export declare function flattenItemPages<TItem>(data: {
+    pages: {
+        items: TItem[];
+    }[];
 } | undefined): TItem[];
 /**
  * `useInfiniteQuery` lifecycle widget — flatten pages, load-more footer.
  * Cursor / activity feeds where user accumulates pages (vs DataTable cursor buttons).
  */
-export declare function InfiniteQueryState<TPage, TFlat>({ query, skeleton, empty, flatten, isEmpty, errorRenderer, showRetry, onRetry, onAuthError, loadingMore, loadMore, showLoadMore, children, }: InfiniteQueryStateProp<TPage, TFlat>): React.JSX.Element;
+export declare function InfiniteQueryState<TPage, TFlat = TPage extends {
+    items: (infer TItem)[];
+} ? TItem[] : unknown>({ query, skeleton, empty, flatten, isEmpty, errorRenderer, showRetry, onRetry, onAuthError, loadingMore, loadMore, showLoadMore, children, }: InfiniteQueryStateProp<TPage, TFlat>): React.JSX.Element;

package/dist/lib/control-styles.d.ts

@@ -1,5 +1,5 @@
 /** Shared control sizing — reads `--control-height`, `--font-size-*` from density / theme. */
-export declare const controlMultilineClass = "ui-control-multiline aria-invalid:border-destructive data-[status=error]:border-destructive data-[status=warning]:border-warning w-full rounded-[var(--control-radius)] border-input bg-background ring-offset-background placeholder:text-muted-foreground";
+export declare const controlMultilineClass = "ui-control-multiline ui-control-outlined-surface aria-invalid:border-destructive data-[status=error]:border-destructive data-[status=warning]:border-warning w-full rounded-[var(--control-radius)] ring-offset-background placeholder:text-muted-foreground";
 /**
  * Multiline control with its own chrome removed, for a textarea EMBEDDED in a surface that already
  * draws the box — a chat composer inside a Card, an inline edit cell, a comment box in a panel.
@@ -9,10 +9,10 @@ export declare const controlMultilineGhostClass = "ui-control-multiline data-[st
 /**
  * Multiline control drawn as antd's `filled` variant — a tinted surface instead of a boundary.
  *
- * It is a SEPARATE string rather than `controlMultilineClass` plus a modifier because
- * `bg-background` lives in `@layer utilities`, which outranks every component-layer rule: a
- * `.ui-control--filled` appended to the outlined list would be silently overpainted and no gate
- * would catch it. The two lists differ only in which chrome utilities they carry.
+ * It is a SEPARATE string rather than `controlMultilineClass` plus a modifier because the two
+ * surfaces are alternatives, not a base plus a modifier: appending `.ui-control--filled` to the
+ * outlined list would put two same-layer rules on one element and leave the winner to source order.
+ * The two lists differ only in which chrome class they carry.
  */
 export declare const controlMultilineFilledClass = "ui-control-multiline ui-control--filled aria-invalid:border-destructive data-[status=error]:border-destructive data-[status=warning]:border-warning w-full rounded-[var(--control-radius)] ring-offset-background placeholder:text-muted-foreground";
 /**
@@ -47,7 +47,15 @@ export declare const controlOpenRingClass = "ui-control-trigger";
  * The clamp keeps it to one line, so a wrappable value cannot grow the control.
  */
 export declare const controlTriggerBaseClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis";
-export declare const controlTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis border-input bg-background";
+/**
+ * The trigger WITH the resting surface — `.ui-control-outlined-surface`, which paints the identical
+ * border and fill from `--control-surface-border-color` / `--control-surface-background`.
+ *
+ * It used to be the two Tailwind utilities `border-input bg-background`, and `@layer utilities`
+ * outranks `@layer components`, so those two tokens could not reach it (gh#880). The painted result
+ * is unchanged; what changed is that a theme can now reach it.
+ */
+export declare const controlTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis ui-control-outlined-surface";
 /** `controlTriggerBaseClass` + the token-driven surface — the select-family trigger. */
 export declare const controlSurfaceTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis ui-control-surface";
 export declare const controlIconClass = "size-[length:var(--control-height)] shrink-0";
@@ -59,15 +67,27 @@ export declare const tableHeadHeightClass = "h-[length:var(--table-row-height)]"
 export declare const tableCellPaddingClass = "py-[length:var(--table-cell-padding-y)]";
 /** Semantic status / badge tones — always use tokens, never raw Tailwind palette. The TEXT uses the
  * AA-strong status colours (text-*-strong, darker than the fill) so a small status label clears
- * WCAG AA on the soft tint; the border/fill keep the brighter wa-iro role. */
-export declare const toneSuccessClass = "border-success/30 bg-success/10 text-success-strong";
-export declare const toneWarningClass = "border-warning/30 bg-warning/10 text-warning-strong";
-export declare const toneInfoClass = "border-info/30 bg-info/10 text-info-strong";
+ * WCAG AA on the soft tint; the border keeps the brighter wa-iro role.
+ *
+ * THE FILL IS AN ARBITRARY PROPERTY, NOT `bg-success/10`, AND THAT IS THE WHOLE OF gh#866 HERE.
+ * `bg-<role>/10` can only ever be the role at 10% — a derivation — so a brand that ships an
+ * independently chosen pale surface (`--success #126342` with `--success-soft #E8F5EF`, a mint
+ * that is not that green at any alpha) could not reach the chip. `[background-color:…]` is the
+ * same utility layer and the same specificity as the class it replaces, so nothing about the
+ * cascade moves; it just reads `--surface-<role>` first and falls back to the wash Tailwind itself emits,
+ * `color-mix(in oklab, … 10%, transparent)` — the verbose spelling is deliberate, because
+ * `hsl(var(--success) / 0.1)` rasterises one 8-bit step off it on `warning` (252,245,225 vs
+ * 252,246,225 over the page ground) and "near enough" is not a default this repo ships.
+ * Written at the CALL SITE rather than bound at `:root`, per docs/TOKENS.md · "Role-mirror knobs
+ * MUST be `initial`", so a scoped `[data-tenant]` reaches it instead of freezing on `<html>`. */
+export declare const toneSuccessClass = "border-success/30 [background-color:var(--surface-success,color-mix(in_oklab,hsl(var(--success))_10%,transparent))] text-success-strong";
+export declare const toneWarningClass = "border-warning/30 [background-color:var(--surface-warning,color-mix(in_oklab,hsl(var(--warning))_10%,transparent))] text-warning-strong";
+export declare const toneInfoClass = "border-info/30 [background-color:var(--surface-info,color-mix(in_oklab,hsl(var(--info))_10%,transparent))] text-info-strong";
 /** Soft BRAND pill — a tinted primary tone (border/fill keep the brand role; the TEXT uses the
  * AA-strong brand colour `text-primary-strong`, darker than the fill, so a small brand label clears
  * WCAG AA on the soft tint — `text-primary` alone is only 4.04:1 in light). For a SOLID brand fill
  * use the Badge `default` variant instead. */
 export declare const tonePrimaryClass = "border-primary/30 bg-primary/10 text-primary-strong";
-export declare const toneDestructiveClass = "border-destructive/30 bg-destructive/10 text-error-strong";
+export declare const toneDestructiveClass = "border-destructive/30 [background-color:var(--surface-destructive,color-mix(in_oklab,hsl(var(--destructive))_10%,transparent))] text-error-strong";
 export declare const toneMutedClass = "border-border bg-muted text-muted-foreground";
 export declare const toneNeutralClass = "border-border bg-muted text-muted-foreground";

package/dist/lib/control-styles.js

@@ -1,9 +1,9 @@
-const controlMultilineClass = "ui-control-multiline aria-invalid:border-destructive data-[status=error]:border-destructive data-[status=warning]:border-warning w-full rounded-[var(--control-radius)] border-input bg-background ring-offset-background placeholder:text-muted-foreground";
+const controlMultilineClass = "ui-control-multiline ui-control-outlined-surface aria-invalid:border-destructive data-[status=error]:border-destructive data-[status=warning]:border-warning w-full rounded-[var(--control-radius)] ring-offset-background placeholder:text-muted-foreground";
 const controlMultilineGhostClass = "ui-control-multiline data-[status=error]:border-destructive data-[status=warning]:border-warning w-full min-h-0 border-0 bg-transparent shadow-none placeholder:text-muted-foreground focus-visible:ring-0";
 const controlMultilineFilledClass = "ui-control-multiline ui-control--filled aria-invalid:border-destructive data-[status=error]:border-destructive data-[status=warning]:border-warning w-full rounded-[var(--control-radius)] ring-offset-background placeholder:text-muted-foreground";
 const controlOpenRingClass = "ui-control-trigger";
 const controlTriggerBaseClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis";
-const controlTriggerClass = `${controlTriggerBaseClass} border-input bg-background`;
+const controlTriggerClass = `${controlTriggerBaseClass} ui-control-outlined-surface`;
 const controlSurfaceTriggerClass = `${controlTriggerBaseClass} ui-control-surface`;
 const controlIconClass = "size-[length:var(--control-height)] shrink-0";
 const controlIconSmClass = "size-[calc(var(--control-height)-0.5rem)] shrink-0";
@@ -11,11 +11,11 @@ const controlIconLeadingClass = "size-[length:var(--control-icon-size)] shrink-0
 const tableRowHeightClass = "h-[length:var(--table-row-height)]";
 const tableHeadHeightClass = "h-[length:var(--table-row-height)]";
 const tableCellPaddingClass = "py-[length:var(--table-cell-padding-y)]";
-const toneSuccessClass = "border-success/30 bg-success/10 text-success-strong";
-const toneWarningClass = "border-warning/30 bg-warning/10 text-warning-strong";
-const toneInfoClass = "border-info/30 bg-info/10 text-info-strong";
+const toneSuccessClass = "border-success/30 [background-color:var(--surface-success,color-mix(in_oklab,hsl(var(--success))_10%,transparent))] text-success-strong";
+const toneWarningClass = "border-warning/30 [background-color:var(--surface-warning,color-mix(in_oklab,hsl(var(--warning))_10%,transparent))] text-warning-strong";
+const toneInfoClass = "border-info/30 [background-color:var(--surface-info,color-mix(in_oklab,hsl(var(--info))_10%,transparent))] text-info-strong";
 const tonePrimaryClass = "border-primary/30 bg-primary/10 text-primary-strong";
-const toneDestructiveClass = "border-destructive/30 bg-destructive/10 text-error-strong";
+const toneDestructiveClass = "border-destructive/30 [background-color:var(--surface-destructive,color-mix(in_oklab,hsl(var(--destructive))_10%,transparent))] text-error-strong";
 const toneMutedClass = "border-border bg-muted text-muted-foreground";
 const toneNeutralClass = "border-border bg-muted text-muted-foreground";
 export {