@godxjp/ui 19.4.1 → 19.5.0

package/dist/app/app-provider.js

@@ -16,7 +16,8 @@ import {
 } from "../lib/datetime/index.js";
 import { DEFAULT_STORAGE_KEY, readStoredPreferences, writeStoredPreferences } from "./storage.js";
 import {
-  applyThemeAxes
+  applyThemeAxes,
+  PREFERS_DARK_SCHEME_QUERY
 } from "./theme-axes.js";
 import { resolveDefaultTimeFormat } from "./time-format-labels.js";
 import { resolveDefaultTimezone } from "./timezones.js";
@@ -174,6 +175,14 @@ function AppProvider({
     if (typeof document === "undefined") return;
     applyThemeAxes(document.documentElement, { theme, brand, density, fontSize, scaling });
   }, [theme, brand, density, fontSize, scaling]);
+  React.useEffect(() => {
+    if (theme !== "system") return;
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia(PREFERS_DARK_SCHEME_QUERY);
+    const reapply = () => applyThemeAxes(document.documentElement, { theme: "system" });
+    query.addEventListener("change", reapply);
+    return () => query.removeEventListener("change", reapply);
+  }, [theme]);
   const setLocale = React.useCallback(
     (next) => {
       prefsRef.current = { ...prefsRef.current, locale: next };

package/dist/app/theme-axes.d.ts

@@ -1,13 +1,19 @@
 import type { PageDensityProp } from "../props/vocabulary/layout.prop.js";
-/** Light / dark spine — `data-theme` (alias of the legacy `.dark` class). */
-export type AppTheme = "light" | "dark";
+/**
+ * Theme spine — `data-theme` (alias of the legacy `.dark` class). `"system"` is a CHOICE, not a
+ * rendered value: it defers to the OS `prefers-color-scheme` and is what gets persisted, so the
+ * app keeps following the OS tomorrow morning. `data-theme` only ever carries `light` or `dark`.
+ */
+export type AppTheme = "light" | "dark" | "system";
+/** What `data-theme` actually carries — the resolution of an {@link AppTheme} choice. */
+export type ResolvedAppTheme = Exclude<AppTheme, "system">;
 /** Primary-palette preset — `data-brand`. `null` = keep the app's own `--primary`. */
 export type AppBrand = "brand" | "crm" | "logistics" | "partner" | "slate" | "dxs";
 /** Control / table / spacing density — `data-density` (same vocab as PageContainer). */
 export type AppDensity = PageDensityProp;
 /** Base type size — `data-font-size`; a preset rescales the whole golden scale. */
 export type AppFontSize = "sm" | "default" | "lg";
-export declare const APP_THEMES: readonly ["light", "dark"];
+export declare const APP_THEMES: readonly ["light", "dark", "system"];
 export declare const APP_BRANDS: readonly ["brand", "crm", "logistics", "partner", "slate", "dxs"];
 export declare const APP_DENSITIES: readonly ["compact", "default", "comfortable"];
 export declare const APP_FONT_SIZES: readonly ["sm", "default", "lg"];
@@ -20,6 +26,15 @@ export type AppThemeAxes = {
     scaling: number | null;
 };
 export declare const isAppTheme: (v: unknown) => v is AppTheme;
+/** The media query `theme: "system"` follows. */
+export declare const PREFERS_DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+/** `false` wherever there is no `matchMedia` (SSR, jsdom without the stub) — light is the default. */
+export declare function prefersDarkScheme(): boolean;
+/**
+ * Resolve a stored CHOICE to the value `data-theme` carries. `light`/`dark` pass through
+ * untouched, so a preference stored before `system` existed keeps working.
+ */
+export declare function resolveAppTheme(theme: AppTheme): ResolvedAppTheme;
 export declare const isAppBrand: (v: unknown) => v is AppBrand;
 export declare const isAppDensity: (v: unknown) => v is AppDensity;
 export declare const isAppFontSize: (v: unknown) => v is AppFontSize;

package/dist/app/theme-axes.js

@@ -1,4 +1,4 @@
-const APP_THEMES = ["light", "dark"];
+const APP_THEMES = ["light", "dark", "system"];
 const APP_BRANDS = [
   "brand",
   "crm",
@@ -14,11 +14,20 @@ const APP_DENSITIES = [
 ];
 const APP_FONT_SIZES = ["sm", "default", "lg"];
 const isAppTheme = (v) => APP_THEMES.includes(v);
+const PREFERS_DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+function prefersDarkScheme() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia(PREFERS_DARK_SCHEME_QUERY).matches;
+}
+function resolveAppTheme(theme) {
+  if (theme !== "system") return theme;
+  return prefersDarkScheme() ? "dark" : "light";
+}
 const isAppBrand = (v) => APP_BRANDS.includes(v);
 const isAppDensity = (v) => APP_DENSITIES.includes(v);
 const isAppFontSize = (v) => APP_FONT_SIZES.includes(v);
 function applyThemeAxes(el, axes) {
-  if (axes.theme !== void 0) el.dataset.theme = axes.theme;
+  if (axes.theme !== void 0) el.dataset.theme = resolveAppTheme(axes.theme);
   if (axes.density !== void 0) el.dataset.density = axes.density;
   if (axes.fontSize !== void 0) el.dataset.fontSize = axes.fontSize;
   if (axes.brand !== void 0) {
@@ -35,9 +44,12 @@ export {
   APP_DENSITIES,
   APP_FONT_SIZES,
   APP_THEMES,
+  PREFERS_DARK_SCHEME_QUERY,
   applyThemeAxes,
   isAppBrand,
   isAppDensity,
   isAppFontSize,
-  isAppTheme
+  isAppTheme,
+  prefersDarkScheme,
+  resolveAppTheme
 };

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

@@ -50,7 +50,10 @@ const STATUS_MAP = {
   ASSIGNMENT_STATUS_TERMINATED: { tone: "destructive", icon: XCircle }
 };
 const badgeVariants = cva(
-  "inline-flex items-center border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring",
+  // `ui-focus-ring` = the system's single focus source (styles/focus-ring.css). It replaces a
+  // hand-rolled `focus:ring-2 focus:ring-ring`, which was token-blind (no --focus-ring-* knob
+  // reached it) and fired on `:focus`, so a mouse click on an interactive badge lit a ring.
+  "ui-focus-ring inline-flex items-center border font-medium transition-colors",
   {
     variants: {
       variant: {

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

@@ -683,8 +683,15 @@ DataTable.Content = function DataTableContent() {
                     rowPadding,
                     // Hover highlight when rows are clickable OR explicitly hoverable…
                     (onRowClick || hoverable) && "hover:bg-muted/50",
-                    // …but the affordance (cursor + focus ring) only when clickable.
-                    onRowClick && "focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
+                    // …but the affordance (cursor + focus mark) only when clickable.
+                    //
+                    // `ui-focus-ring` = the single focus source (styles/focus-ring.css). It
+                    // replaces `focus-visible:ring-ring focus-visible:ring-2
+                    // focus-visible:ring-inset`, which was a hand-rolled second ring: it read no
+                    // `--focus-ring-*` knob, so a service could not retune it, and — being a
+                    // utility — it painted regardless of the `--focus-outline` switch, which is
+                    // exactly the hole the switch exists to close.
+                    onRowClick && "ui-focus-ring cursor-pointer",
                     isSelected && "bg-muted/30",
                     rowClassName?.(original)
                   ),

package/dist/components/data-display/list-row.d.ts

@@ -15,6 +15,8 @@ export type ListRowDensity = ListRowDensityProp;
 export interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     /** Render element — `div` (default) or `li` when the parent is a `<ul>`/`<ol>`. */
     as?: "div" | "li";
+    /** Use the supplied link as the entire row. Do not nest interactive trailing controls. */
+    asChild?: boolean;
     /** Leading slot — a decorative icon or an Avatar. Mark a purely decorative icon `aria-hidden`. */
     leading?: React.ReactNode;
     /** Primary line — rendered in medium weight. */

package/dist/components/data-display/list-row.js

@@ -1,12 +1,15 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { Text } from "../general/typography.js";
 const ListRow = React.forwardRef(
   ({
     as = "div",
+    asChild = false,
+    children,
     leading,
     title,
     description,
@@ -19,9 +22,18 @@ const ListRow = React.forwardRef(
     ...props
   }, ref) => {
     const { t } = useTranslation();
-    const Comp = as;
+    const Comp = asChild ? Slot : as;
     const truncate = overflow !== "wrap";
-    return /* @__PURE__ */ jsxs(
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      unread !== void 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-indicator", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: unread ? t("dataDisplay.listRow.unread") : t("dataDisplay.listRow.read") }) }) : null,
+      leading != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-leading", children: leading }) : null,
+      /* @__PURE__ */ jsxs("span", { "data-slot": "list-row-body", children: [
+        /* @__PURE__ */ jsx(Text, { weight: "medium", truncate, children: title }),
+        description != null ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", truncate, children: description }) : null
+      ] }),
+      trailing != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-trailing", children: trailing }) : null
+    ] });
+    return /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
@@ -32,15 +44,7 @@ const ListRow = React.forwardRef(
         "data-unread": unread === true ? "" : void 0,
         className: cn("ui-list-row", className),
         ...props,
-        children: [
-          unread !== void 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-indicator", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: unread ? t("dataDisplay.listRow.unread") : t("dataDisplay.listRow.read") }) }) : null,
-          leading != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-leading", children: leading }) : null,
-          /* @__PURE__ */ jsxs("span", { "data-slot": "list-row-body", children: [
-            /* @__PURE__ */ jsx(Text, { weight: "medium", truncate, children: title }),
-            description != null ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", truncate, children: description }) : null
-          ] }),
-          trailing != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-trailing", children: trailing }) : null
-        ]
+        children: asChild && React.isValidElement(children) ? React.cloneElement(children, void 0, content) : content
       }
     );
   }

package/dist/components/data-display/timeline-grid.js

@@ -25,7 +25,9 @@ function resolveEvent(event) {
   if (startMin === null || endMin === null) return null;
   return { event, startMin, endMin: endMin > startMin ? endMin : endMin + MINUTES_PER_DAY };
 }
+const EVENT_MIN_MINUTES = 36;
 function placeColumn(events) {
+  const drawnEnd = (e) => Math.max(e.endMin, e.startMin + EVENT_MIN_MINUTES);
   const sorted = [...events].sort((a, b) => a.startMin - b.startMin || a.endMin - b.endMin);
   const placed = [];
   let cluster = [];
@@ -42,8 +44,8 @@ function placeColumn(events) {
     if (entry.startMin >= clusterEnd) closeCluster();
     let lane = laneEnds.findIndex((end) => end <= entry.startMin);
     if (lane === -1) lane = laneEnds.length;
-    laneEnds[lane] = entry.endMin;
-    clusterEnd = Math.max(clusterEnd, entry.endMin);
+    laneEnds[lane] = drawnEnd(entry);
+    clusterEnd = Math.max(clusterEnd, drawnEnd(entry));
     cluster.push({ ...entry, lane, lanes: 1 });
   }
   closeCluster();
@@ -93,7 +95,7 @@ const TimelineGrid = React.forwardRef(
     const axis = React.useMemo(() => resolveWindow(start, end, resolved), [start, end, resolved]);
     const span = axis.endMin - axis.startMin;
     const hours = span / 60;
-    const step = Number.isFinite(interval) && interval > 0 ? interval : 1;
+    const step = Number.isFinite(interval) && interval > 0 ? Math.max(interval, 1 / 60) : 1;
     const byColumn = React.useMemo(() => {
       const buckets = columns.map(() => []);
       for (const entry of resolved) {

package/dist/components/data-entry/checkbox.d.ts

@@ -1,6 +1,18 @@
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckboxGroup } from "./checkbox-group.js";
+/**
+ * Decorative checkbox glyph — a non-interactive `<span>`, NOT the real {@link Checkbox} (which is a
+ * `<button>`). Used where the row itself is the interactive element and a nested `<button>` would
+ * be invalid HTML (Cascader's option rows). Shares {@link CheckboxGlyph} so "partial" can never
+ * drift apart from the real control's rendering again.
+ */
+export declare function CheckboxVisual({ checked, indeterminate, disabled, className, }: {
+    checked: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    className?: string;
+}): React.JSX.Element;
 /** Checkbox — dùng standalone hoặc `Checkbox.Group` với `options` (Ant Design style). */
 export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>> & {
     Group: typeof CheckboxGroup;

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

@@ -2,16 +2,42 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
+import { Check, Minus } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { useFieldIdentity } from "../../lib/field-a11y.js";
 import { CheckboxGroup } from "./checkbox-group.js";
+function CheckboxGlyph({ state }) {
+  return state === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: "ui-checkbox-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Check, { className: "ui-checkbox-icon", "aria-hidden": "true" });
+}
+function CheckboxVisual({
+  checked,
+  indeterminate,
+  disabled,
+  className
+}) {
+  const state = indeterminate ? "indeterminate" : checked;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "checkbox",
+      "data-state": indeterminate ? "indeterminate" : checked ? "checked" : "unchecked",
+      "data-disabled": disabled ? "" : void 0,
+      className: cn("ui-checkbox inline-flex items-center justify-center", className),
+      children: checked || indeterminate ? /* @__PURE__ */ jsx(CheckboxGlyph, { state }) : null
+    }
+  );
+}
 const CheckboxRoot = React.forwardRef(({ className, ...props }, ref) => {
   const identity = useFieldIdentity({
     id: props.id,
     name: props.name,
     "data-field": props["data-field"]
   });
+  const [uncontrolled, setUncontrolled] = React.useState(
+    props.defaultChecked ?? false
+  );
+  const state = props.checked ?? uncontrolled;
   return /* @__PURE__ */ jsx(
     CheckboxPrimitive.Root,
     {
@@ -26,12 +52,16 @@ const CheckboxRoot = React.forwardRef(({ className, ...props }, ref) => {
         // service overriding --checkbox-checked-background got no fill change at all. Radix sets
         // `data-state`/`data-disabled` on the root, so the CSS rules match. Rendering is unchanged:
         // both knobs default to exactly the values these utilities hard-coded.
-        "peer ui-checkbox aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground shrink-0 shadow-xs transition-shadow outline-none",
+        "peer ui-checkbox aria-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground shrink-0 shadow-xs transition-shadow outline-none",
         className
       ),
       ...props,
       ...identity,
-      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "ui-choice-indicator", children: /* @__PURE__ */ jsx(Check, { className: "ui-checkbox-icon", "aria-hidden": "true" }) })
+      onCheckedChange: (next) => {
+        setUncontrolled(next);
+        props.onCheckedChange?.(next);
+      },
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "ui-choice-indicator", children: /* @__PURE__ */ jsx(CheckboxGlyph, { state }) })
     }
   );
 });
@@ -40,5 +70,6 @@ const Checkbox = Object.assign(CheckboxRoot, {
   Group: CheckboxGroup
 });
 export {
-  Checkbox
+  Checkbox,
+  CheckboxVisual
 };

package/dist/components/data-entry/form-field.js

@@ -114,7 +114,7 @@ function FormField({
               asChild: true,
               id: labelId,
               className: "ui-inline-xs text-[length:var(--form-label-font-size)]",
-              children: /* @__PURE__ */ jsxs(
+              children: /* @__PURE__ */ jsx(
                 "span",
                 {
                   onClick: () => {
@@ -123,10 +123,10 @@ function FormField({
                     const focusable = el.matches(FOCUSABLE_SELECTOR) ? el : el.querySelector(FOCUSABLE_SELECTOR);
                     (focusable ?? el).focus();
                   },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { children: label }),
-                    required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" })
-                  ]
+                  children: /* @__PURE__ */ jsxs("span", { children: [
+                    label,
+                    required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-form-field-required", children: "*" })
+                  ] })
                 }
               )
             }

package/dist/components/data-entry/index.d.ts

@@ -63,5 +63,7 @@ export { Rating } from "./rating.js";
 export type { RatingProps } from "./rating.js";
 export { TagInput } from "./tag-input.js";
 export type { TagInputProps } from "./tag-input.js";
+export { Segmented } from "./segmented.js";
+export type { SegmentedOption, SegmentedProp, SegmentedProps } from "./segmented.js";
 export { BranchScopePicker } from "./branch-scope-picker.js";
 export type { BranchScopeModeProp, BranchScopeOptionProp, BranchScopePickerProp, BranchScopePickerProps, BranchScopeValueProp, } from "./branch-scope-picker.js";

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

@@ -51,6 +51,7 @@ import { PasswordStrength, usePasswordStrength } from "./password-strength.js";
 import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./input-otp.js";
 import { Rating } from "./rating.js";
 import { TagInput } from "./tag-input.js";
+import { Segmented } from "./segmented.js";
 import { BranchScopePicker } from "./branch-scope-picker.js";
 export {
   BranchScopePicker,
@@ -93,6 +94,7 @@ export {
   SHOW_CHILD,
   SHOW_PARENT,
   SearchInput,
+  Segmented,
   Select,
   SelectContent,
   SelectGroup,

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

@@ -9,7 +9,7 @@ const inputBaseClass = [
   "ui-control ui-input border-input bg-background w-full rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
   "selection:bg-primary selection:text-primary-foreground",
   "placeholder:text-muted-foreground",
-  "aria-invalid:border-destructive aria-invalid:ring-destructive/20"
+  "aria-invalid:border-destructive"
 ];
 const Input = React.forwardRef(
   ({

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

@@ -27,7 +27,7 @@ const RadioItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
       // and reads --disabled-opacity. The utility was layered after components, so it silently
       // outranked that token — a service theme's --disabled-opacity never reached a radio.
       // Byte-identical: --disabled-opacity defaults to 0.5.
-      "ui-radio aria-invalid:border-destructive aria-invalid:ring-destructive/20 shrink-0 shadow-xs transition-shadow outline-none",
+      "ui-radio aria-invalid:border-destructive shrink-0 shadow-xs transition-shadow outline-none",
       className
     ),
     ...props,

package/dist/components/data-entry/search-input.d.ts

@@ -1,20 +1,4 @@
 import * as React from "react";
-import { type FieldA11yProps } from "../../lib/field-a11y.js";
-interface SearchInputProps extends FieldA11yProps {
-    value?: string;
-    defaultValue?: string;
-    placeholder?: string;
-    debounce?: number;
-    /** Fires on EVERY keystroke (immediate) — required to keep a controlled `value` responsive. */
-    onValueChange?: (q: string) => void;
-    /** Fires with the DEBOUNCED term. Optional — omit it when you drive filtering off `onValueChange`. */
-    onSearch?: (q: string) => void;
-    label?: React.ReactNode;
-    ariaLabel?: string;
-    className?: string;
-    inputClassName?: string;
-    id?: string;
-    disabled?: boolean;
-}
+import type { SearchInputProp } from "../../props/components/data-entry.prop.js";
+export type SearchInputProps = SearchInputProp;
 export declare function SearchInput({ value: controlledValue, defaultValue, placeholder, debounce, onValueChange, onSearch, label, ariaLabel, className, inputClassName, id, disabled, ...ariaProps }: SearchInputProps): React.JSX.Element;
-export {};

package/dist/components/data-entry/search-input.js

@@ -37,7 +37,10 @@ function SearchInput({
   React.useEffect(() => {
     onSearchRef.current = onSearch;
   });
+  const lastSearch = React.useRef(debounced);
   React.useEffect(() => {
+    if (lastSearch.current === debounced) return;
+    lastSearch.current = debounced;
     onSearchRef.current?.(debounced);
   }, [debounced]);
   const setValue = (v) => {

package/dist/components/data-entry/segmented.d.ts

@@ -0,0 +1,2 @@
+export { Segmented } from "../ui/segmented.js";
+export type { SegmentedOption, SegmentedProp, SegmentedProps } from "../ui/segmented.js";

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

@@ -0,0 +1,5 @@
+"use client";
+import { Segmented } from "../ui/segmented.js";
+export {
+  Segmented
+};

package/dist/components/data-entry/select.d.ts

@@ -25,6 +25,8 @@ export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectP
      * `full` (default) fills the field column — right inside a FormField. `auto` sizes to the
      * selected label — right in a PageContainer `extra` slot, a toolbar or a footer row, where a
      * full-width trigger swallows the row and starves its siblings (text truncated to "UA…").
+     * `bounded` holds one width from `--control-bounded-width`, for a trigger whose VALUE varies
+     * in length and must not move its neighbours when it changes (gh#375).
      */
     width?: ControlWidthProp;
     /**

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

@@ -98,8 +98,13 @@ const SelectTrigger = React.forwardRef(({ className, children, size = "md", widt
       "data-width": width,
       className: cn(
         controlTriggerClass,
-        width === "auto" ? "w-auto" : "w-full",
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground whitespace-nowrap transition-[color,box-shadow] outline-none *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center",
+        // `bounded` deliberately emits NO width utility: its width is owned by the
+        // `[data-width="bounded"]` rule in control.css. A utility here would win the layer order
+        // and make that rule — and therefore the token — dead, the way `w-full` did to
+        // `.ui-app-setting-picker-icon` (gh#366, gh#371).
+        width === "auto" && "w-auto",
+        width === "full" && "w-full",
+        "aria-invalid:border-destructive data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground whitespace-nowrap transition-[color,box-shadow] outline-none *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center",
         className
       ),
       ...props,
@@ -143,11 +148,11 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
-  useInertHiddenBackground();
+  const contentRef = useInertHiddenBackground(ref);
   return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
     SelectPrimitive.Content,
     {
-      ref,
+      ref: contentRef,
       "data-slot": "select-content",
       className: cn(
         "ui-select-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",

package/dist/components/feedback/sheet.js

@@ -127,7 +127,7 @@ const SheetContent = React.forwardRef(
               DialogPrimitive.Close,
               {
                 "data-slot": "sheet-close",
-                className: "ui-sheet-close ring-offset-background focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
+                className: "ui-sheet-close ui-focus-ring disabled:pointer-events-none",
                 children: [
                   /* @__PURE__ */ jsx(X, { className: "ui-sheet-close-icon", "aria-hidden": "true" }),
                   /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })

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

@@ -1,4 +1,10 @@
 import * as React from "react";
 import { type ToasterProps } from "sonner";
-declare function Toaster({ style, ...props }: ToasterProps): React.JSX.Element;
+/**
+ * `richColors` defaults ON: it is the switch that makes sonner apply the per-type properties at
+ * all (`[data-rich-colors='true'][data-type='success'] { … }`), so without it the tokens above
+ * are declared and never read. A consumer can still pass `richColors={false}` for a deliberately
+ * monochrome stack.
+ */
+declare function Toaster({ style, richColors, ...props }: ToasterProps): React.JSX.Element;
 export { Toaster };

package/dist/components/feedback/sonner.js

@@ -10,22 +10,42 @@ function useDocumentTheme() {
       const mq = window.matchMedia("(prefers-color-scheme: dark)");
       mq.addEventListener("change", onStoreChange);
       const obs = new MutationObserver(onStoreChange);
-      obs.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+      obs.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["class", "data-theme"]
+      });
       return () => {
         mq.removeEventListener("change", onStoreChange);
         obs.disconnect();
       };
     },
-    () => document.documentElement.classList.contains("dark") ? "dark" : "light",
+    () => document.documentElement.dataset.theme === "dark" || document.documentElement.classList.contains("dark") ? "dark" : "light",
     () => "light"
   );
 }
-function Toaster({ style, ...props }) {
+const TOAST_TONES = [
+  { type: "success", hue: "success", ink: "text-success" },
+  { type: "error", hue: "destructive", ink: "text-error" },
+  { type: "warning", hue: "warning", ink: "text-warning" },
+  { type: "info", hue: "info", ink: "text-info" }
+];
+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)))`
+    ],
+    [`--${type}-border`, `hsl(var(--${hue}) / var(--alert-border-alpha))`],
+    [`--${type}-text`, `hsl(var(--${ink}))`]
+  ])
+);
+function Toaster({ style, richColors = true, ...props }) {
   const theme = useDocumentTheme();
   return /* @__PURE__ */ jsx(
     Sonner,
     {
       theme,
+      richColors,
       className: "toaster group",
       icons: {
         success: /* @__PURE__ */ jsx(CheckCircle2, { className: "ui-toast-icon", "aria-hidden": "true" }),
@@ -43,10 +63,10 @@ function Toaster({ style, ...props }) {
         "--normal-text": "hsl(var(--popover-foreground))",
         "--normal-border": "hsl(var(--border))",
         "--border-radius": "var(--radius)",
-        // MERGED, never spread over.
-        // object and wiped all four vars — and an unset `--normal-bg` renders the toast
-        // transparent.
-        // var by name.
+        ...toneVars,
+        // MERGED LAST, never spread over: a consumer's `style` is an override of these
+        // defaults, one custom property at a time. Assigning it instead of merging would
+        // wipe every var above, and an unset `--normal-bg` renders the toast transparent.
         ...style
       },
       position: "bottom-right",

package/dist/components/general/button.d.ts

@@ -10,6 +10,8 @@ export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAtt
     size?: import("../../props/index.js").ButtonSizeProp;
     shape?: import("../../props/index.js").ShapeProp;
     fullWidth?: boolean;
+    wrap?: boolean;
+    align?: import("../../props/index.js").TextAlignProp;
     asChild?: import("../../props/index.js").AsChildProp;
     onClick?: import("../../props/index.js").OnClickProp;
     disabled?: import("../../props/index.js").DisabledProp;

package/dist/components/general/button.js

@@ -9,7 +9,12 @@ import { useTranslation } from "../../i18n/use-translation.js";
 const buttonVariants = cva("ui-button", {
   variants: {
     variant: {
-      default: "ui-button--default bg-primary text-primary-foreground hover:bg-primary/90",
+      // Colour is the TOKEN LAYER's (`.ui-button--default` in styles/control.css), not a utility's.
+      // The three utilities that used to sit here — `bg-primary text-primary-foreground
+      // hover:bg-primary/90` — restated the fill the components layer already declares and, being
+      // utilities, out-ranked it: the hover step this library generates from antd's algorithm
+      // (`--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",
       outline: "ui-button--outline border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
       dashed: "ui-button--dashed border border-dashed bg-background hover:bg-accent hover:text-accent-foreground",
@@ -47,6 +52,8 @@ const Button = React.forwardRef(
     size,
     shape,
     fullWidth = false,
+    wrap = false,
+    align = "center",
     asChild = false,
     loading = false,
     loadingText,
@@ -76,13 +83,15 @@ const Button = React.forwardRef(
         "data-size": size ?? "default",
         "data-shape": shape ?? "default",
         "data-full-width": fullWidth ? "" : void 0,
+        "data-wrap": wrap ? "" : void 0,
+        "data-align": align === "center" ? void 0 : align,
         "data-loading": isLoading ? "" : void 0,
         "aria-busy": isLoading || void 0,
         disabled: isLoading || disabled,
         type: asChild ? void 0 : type ?? "button",
         className: cn(
           fullWidth && "w-full",
-          "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+          "aria-invalid:border-destructive",
           "[&_svg]:pointer-events-none [&_svg]:shrink-0",
           buttonVariants({ variant, size, shape, className })
         ),