@godxjp/ui 18.1.0 → 18.2.0

package/dist/components/ui/credential-reveal.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Copy, Download, Eye, EyeOff } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { Text } from "../general/typography.js";
+import { Button } from "../general/button.js";
+import { Alert, AlertDescription } from "../feedback/alert.js";
+const MASK = "\u2022".repeat(24);
+const COPIED_RESET_MS = 2e3;
+const CredentialReveal = React.forwardRef(
+  ({
+    secret,
+    label,
+    warning,
+    revealed,
+    defaultRevealed = false,
+    onRevealedChange,
+    onCopy,
+    onAcknowledge,
+    acknowledgeLabel,
+    downloadable = false,
+    downloadFileName = "credential.txt",
+    size = "md",
+    tone = "warning",
+    className,
+    id,
+    "aria-label": ariaLabel
+  }, ref) => {
+    const { t } = useTranslation();
+    const [internalRevealed, setInternalRevealed] = React.useState(defaultRevealed);
+    const isRevealed = revealed ?? internalRevealed;
+    const [copied, setCopied] = React.useState(false);
+    const copyTimer = React.useRef(null);
+    const labelId = React.useId();
+    React.useEffect(() => {
+      if (revealed === void 0) setInternalRevealed(defaultRevealed);
+      setCopied(false);
+    }, [secret]);
+    React.useEffect(
+      () => () => {
+        if (copyTimer.current) clearTimeout(copyTimer.current);
+      },
+      []
+    );
+    const setRevealed = (next) => {
+      if (revealed === void 0) setInternalRevealed(next);
+      onRevealedChange?.(next);
+    };
+    const copy = async () => {
+      try {
+        await navigator.clipboard.writeText(secret);
+        setCopied(true);
+        onCopy?.(secret);
+        if (copyTimer.current) clearTimeout(copyTimer.current);
+        copyTimer.current = setTimeout(() => setCopied(false), COPIED_RESET_MS);
+      } catch {
+      }
+    };
+    const download = () => {
+      if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function") return;
+      const url = URL.createObjectURL(new Blob([secret], { type: "text/plain" }));
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = downloadFileName;
+      document.body.appendChild(anchor);
+      anchor.click();
+      anchor.remove();
+      URL.revokeObjectURL(url);
+    };
+    const accessibleName = ariaLabel ?? (typeof label === "string" ? label : void 0) ?? t("ui.credentialReveal.secretLabel");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        id,
+        "data-slot": "credential-reveal",
+        "data-size": size,
+        role: "group",
+        "aria-label": accessibleName,
+        className: cn("ui-credential-reveal", className),
+        children: [
+          warning !== null ? /* @__PURE__ */ jsx(Alert, { tone, className: "ui-credential-reveal-warning", children: /* @__PURE__ */ jsx(AlertDescription, { children: warning ?? t("ui.credentialReveal.warning") }) }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "ui-credential-reveal-surface", children: [
+            label ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                id: labelId,
+                size: "xs",
+                tone: "muted",
+                weight: "medium",
+                className: "ui-credential-reveal-label",
+                children: label
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs("div", { className: "ui-credential-reveal-row", children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  mono: true,
+                  size: "sm",
+                  "data-slot": "credential-reveal-secret",
+                  "data-state": isRevealed ? "revealed" : "masked",
+                  "aria-labelledby": label ? labelId : void 0,
+                  "aria-label": label ? void 0 : accessibleName,
+                  className: "ui-credential-reveal-secret",
+                  children: isRevealed ? secret : MASK
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "ui-credential-reveal-actions", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size,
+                    onClick: () => setRevealed(!isRevealed),
+                    "aria-pressed": isRevealed,
+                    "aria-label": isRevealed ? t("ui.credentialReveal.hide") : t("ui.credentialReveal.show"),
+                    children: isRevealed ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    size,
+                    onClick: copy,
+                    "data-state": copied ? "copied" : "idle",
+                    "aria-label": copied ? t("ui.credentialReveal.copied") : t("ui.credentialReveal.copy"),
+                    children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true" })
+                  }
+                ),
+                downloadable ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size,
+                    onClick: download,
+                    "aria-label": t("ui.credentialReveal.download"),
+                    children: /* @__PURE__ */ jsx(Download, { "aria-hidden": "true" })
+                  }
+                ) : null
+              ] })
+            ] })
+          ] }),
+          onAcknowledge ? /* @__PURE__ */ jsx("div", { className: "ui-credential-reveal-footer", children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "default", size, onClick: onAcknowledge, children: acknowledgeLabel ?? t("ui.credentialReveal.acknowledge") }) }) : null,
+          /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", "data-slot": "credential-reveal-status", children: copied ? t("ui.credentialReveal.copiedAnnounce") : "" })
+        ]
+      }
+    );
+  }
+);
+CredentialReveal.displayName = "CredentialReveal";
+export {
+  CredentialReveal
+};

package/dist/components/ui/hover-card.d.ts

@@ -5,6 +5,6 @@ import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
  * laggy); consumers can still pass `openDelay`/`closeDelay`. A small open delay (not 0) is
  * intentional — it prevents accidental triggering as the pointer passes over the trigger.
  */
-export declare function HoverCard({ openDelay, closeDelay, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export declare function HoverCard({ openDelay, closeDelay, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): React.JSX.Element;
 export declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
 export declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/form/form-field-control.d.ts

@@ -1,4 +1,4 @@
 import { type FieldValues } from "react-hook-form";
 import type { FormFieldControlProp } from "../props/components/form.prop.js";
 export type { FormFieldControlProp } from "../props/components/form.prop.js";
-export declare function FormFieldControl<TFieldValues extends FieldValues>({ name, label, required, helper, className, children, }: FormFieldControlProp<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+export declare function FormFieldControl<TFieldValues extends FieldValues>({ name, label, required, helper, className, children, }: FormFieldControlProp<TFieldValues>): import("react").JSX.Element;

package/dist/form/form-root.d.ts

@@ -7,4 +7,4 @@ export type { FormRootProp } from "../props/components/form.prop.js";
  * library — Inertia's `useForm` via `@godxjp/ui/inertia`, formik, TanStack Form). Both drive the same
  * `FormFieldControl` auto-binding; the core keeps ZERO dependency on any non-RHF form library.
  */
-export declare function FormRoot<TFieldValues extends FieldValues>({ form, adapter, onSubmit, children, className, id, }: FormRootProp<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+export declare function FormRoot<TFieldValues extends FieldValues>({ form, adapter, onSubmit, children, className, id, }: FormRootProp<TFieldValues>): import("react").JSX.Element;

package/dist/i18n/messages/en.json

@@ -118,7 +118,9 @@
     },
     "genericError": "Something went wrong. Please retry.",
     "alert": {
-      "dismiss": "Dismiss"
+      "dismiss": "Dismiss",
+      "verifying": "Verifying…",
+      "stepUpFailed": "Re-authentication failed. Please try again."
     }
   },
   "layout": {
@@ -176,6 +178,17 @@
       "show": "Show password",
       "hide": "Hide password"
     },
+    "credentialReveal": {
+      "secretLabel": "Secret",
+      "warning": "This secret is shown only once. Copy it now — you won't be able to see it again.",
+      "show": "Reveal secret",
+      "hide": "Hide secret",
+      "copy": "Copy secret",
+      "copied": "Copied",
+      "copiedAnnounce": "Secret copied to clipboard",
+      "download": "Download secret",
+      "acknowledge": "I've saved it"
+    },
     "numberInput": {
       "increment": "Increase",
       "decrement": "Decrease"

package/dist/i18n/messages/ja.json

@@ -118,7 +118,9 @@
     },
     "genericError": "問題が発生しました。もう一度お試しください。",
     "alert": {
-      "dismiss": "閉じる"
+      "dismiss": "閉じる",
+      "verifying": "確認中…",
+      "stepUpFailed": "再認証に失敗しました。もう一度お試しください。"
     }
   },
   "layout": {
@@ -176,6 +178,17 @@
       "show": "パスワードを表示",
       "hide": "パスワードを隠す"
     },
+    "credentialReveal": {
+      "secretLabel": "シークレット",
+      "warning": "このシークレットは一度だけ表示されます。今すぐコピーしてください。再表示はできません。",
+      "show": "シークレットを表示",
+      "hide": "シークレットを隠す",
+      "copy": "シークレットをコピー",
+      "copied": "コピーしました",
+      "copiedAnnounce": "シークレットをクリップボードにコピーしました",
+      "download": "シークレットをダウンロード",
+      "acknowledge": "保存しました"
+    },
     "numberInput": {
       "increment": "増やす",
       "decrement": "減らす"

package/dist/i18n/messages/vi.json

@@ -118,7 +118,9 @@
     },
     "genericError": "Đã xảy ra lỗi. Vui lòng thử lại.",
     "alert": {
-      "dismiss": "Đóng"
+      "dismiss": "Đóng",
+      "verifying": "Đang xác minh…",
+      "stepUpFailed": "Xác thực lại thất bại. Vui lòng thử lại."
     }
   },
   "layout": {
@@ -176,6 +178,17 @@
       "show": "Hiện mật khẩu",
       "hide": "Ẩn mật khẩu"
     },
+    "credentialReveal": {
+      "secretLabel": "Khóa bí mật",
+      "warning": "Khóa bí mật này chỉ hiển thị một lần. Hãy sao chép ngay — bạn sẽ không thể xem lại.",
+      "show": "Hiện khóa bí mật",
+      "hide": "Ẩn khóa bí mật",
+      "copy": "Sao chép khóa",
+      "copied": "Đã sao chép",
+      "copiedAnnounce": "Đã sao chép khóa bí mật vào bộ nhớ tạm",
+      "download": "Tải khóa bí mật",
+      "acknowledge": "Tôi đã lưu"
+    },
     "numberInput": {
       "increment": "Tăng",
       "decrement": "Giảm"

package/dist/lib/permission-grid.d.ts

@@ -0,0 +1,59 @@
+/**
+ * permission-grid — pure, render-neutral helpers for RBAC role × permission
+ * matrices.
+ *
+ * A permission matrix maps a set of PERMISSION rows against a set of ROLE
+ * columns; each (role, permission) pair is either granted or not. A "permission
+ * matrix" is NOT a framework component — it is a COMPOSITION of `Table`/
+ * `DataTable` + `Badge` + tokens (see `docs/COMPOSITION-VS-COMPONENT.md`, Gate 0:
+ * fails C2/C3/C7). What it DOES need is a single, tested source of truth for the
+ * non-trivial data logic every consumer would otherwise re-derive: grant lookup,
+ * the per-permission diff between two roles (compare mode), and the row set that
+ * survives a "differences only" (差分のみ) filter.
+ *
+ * These functions are framework-neutral (no React) and locale-neutral (no
+ * strings) so the showcase — and any RBAC admin — composes UI on top of them.
+ *
+ * Grants are modelled as a flat `Set` of composite keys for O(1) membership,
+ * which mirrors how an authz decision cache (`role:permission` tuples) is
+ * typically held in memory.
+ */
+/** Any object addressable by a stable string `id` (a role or a permission). */
+export interface GridEntity {
+    readonly id: string;
+}
+/** A pair of role ids being compared side by side in compare mode. */
+export type ComparePair = readonly [roleA: string, roleB: string];
+/** Options controlling which permission rows are visible. */
+export interface VisibleRowsOptions {
+    /** The two roles under comparison; enables the diff-only filter. */
+    readonly compare?: ComparePair | null;
+    /**
+     * When true AND `compare` is set, keep only the permissions on which the two
+     * compared roles disagree. Without a `compare` pair this is a no-op (there is
+     * nothing to diff against), so every row is returned.
+     */
+    readonly diffOnly?: boolean;
+}
+/**
+ * Build the composite grant key for a (role, permission) pair. Use this both to
+ * seed the grant `Set` and to query it, so the encoding stays in one place.
+ */
+export declare function grantKey(roleId: string, permissionId: string): string;
+/** Is `permissionId` granted to `roleId`? */
+export declare function hasGrant(grants: ReadonlySet<string>, roleId: string, permissionId: string): boolean;
+/**
+ * Do the two compared roles DISAGREE on `permissionId` (one grants it, the other
+ * does not)? Comparing a role with itself is always `false`.
+ */
+export declare function rolesDifferOnPermission(grants: ReadonlySet<string>, compare: ComparePair, permissionId: string): boolean;
+/**
+ * The permission rows to render: every row normally, or — when `diffOnly` is on
+ * and a `compare` pair is set — only the rows on which the two roles differ.
+ * Order is preserved; the input array is never mutated.
+ */
+export declare function visibleRows<P extends GridEntity>(permissions: readonly P[], grants: ReadonlySet<string>, { compare, diffOnly }?: VisibleRowsOptions): P[];
+/** How many permissions the two compared roles disagree on (badge in the header). */
+export declare function countDifferences<P extends GridEntity>(permissions: readonly P[], grants: ReadonlySet<string>, compare: ComparePair): number;
+/** How many permissions a single role is granted (column subtotal). */
+export declare function countGrants<P extends GridEntity>(permissions: readonly P[], grants: ReadonlySet<string>, roleId: string): number;

package/dist/lib/permission-grid.js

@@ -0,0 +1,32 @@
+const KEY_SEP = "\0";
+function grantKey(roleId, permissionId) {
+  return `${roleId}${KEY_SEP}${permissionId}`;
+}
+function hasGrant(grants, roleId, permissionId) {
+  return grants.has(grantKey(roleId, permissionId));
+}
+function rolesDifferOnPermission(grants, compare, permissionId) {
+  const [a, b] = compare;
+  return hasGrant(grants, a, permissionId) !== hasGrant(grants, b, permissionId);
+}
+function visibleRows(permissions, grants, { compare, diffOnly = false } = {}) {
+  if (!diffOnly || !compare) return permissions.slice();
+  return permissions.filter((p) => rolesDifferOnPermission(grants, compare, p.id));
+}
+function countDifferences(permissions, grants, compare) {
+  return permissions.reduce(
+    (n, p) => n + (rolesDifferOnPermission(grants, compare, p.id) ? 1 : 0),
+    0
+  );
+}
+function countGrants(permissions, grants, roleId) {
+  return permissions.reduce((n, p) => n + (hasGrant(grants, roleId, p.id) ? 1 : 0), 0);
+}
+export {
+  countDifferences,
+  countGrants,
+  grantKey,
+  hasGrant,
+  rolesDifferOnPermission,
+  visibleRows
+};

package/dist/props/components/data-display.prop.d.ts

@@ -1,6 +1,6 @@
 /** Data Display component prop types — @see docs/COMPONENTS.md#data-display */
 import type * as React from "react";
-import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, ChildrenProp, ToneProp, HeadingLevelProp } from "../vocabulary/index.js";
+import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, ChildrenProp, ToneProp, HeadingLevelProp, SizeProp, LabelProp, IdProp } from "../vocabulary/index.js";
 /** @see EmptyState */
 /**
  * Semantic intent of the EmptyState icon medallion — a subset of the shared `ToneProp` vocabulary
@@ -62,6 +62,54 @@ export type BadgeProp = {
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
+/** @see CredentialReveal */
+/**
+ * Severity of the one-time-secret caution banner — a subset of the shared `ToneProp`
+ * vocabulary that carries a caution/danger/informational meaning (no `default`/`success`/
+ * `muted`/`neutral`, which would read as "safe"). Drives the composed `Alert` tone.
+ */
+export type CredentialRevealTone = Extract<ToneProp, "warning" | "destructive" | "info">;
+/** @see CredentialReveal */
+export type CredentialRevealProp = {
+    /** The one-time secret value shown masked by default and copied verbatim. */
+    secret: string;
+    /**
+     * Accessible name / caption for the secret (e.g. "API key", "デバイス資格情報"). When set it labels
+     * the secret region; when omitted a generic localized label is used.
+     */
+    label?: LabelProp;
+    /**
+     * Caution banner copy. Defaults to the localized "shown only once" warning. Pass `null` to
+     * suppress the banner entirely (e.g. when the surrounding Dialog already carries the caution).
+     */
+    warning?: React.ReactNode | null;
+    /** Controlled reveal state (masked ↔ shown). */
+    revealed?: boolean;
+    /** Uncontrolled initial reveal state. Default `false` (masked). */
+    defaultRevealed?: boolean;
+    /** Reveal-state change handler (fires on the show/hide toggle). */
+    onRevealedChange?: (revealed: boolean) => void;
+    /** Called after the secret is written to the clipboard. */
+    onCopy?: (secret: string) => void;
+    /**
+     * When provided, renders a confirm/acknowledge button that calls this — pair it with the
+     * surrounding Dialog's `onOpenChange(false)` so the secret re-blurs once dismissed.
+     */
+    onAcknowledge?: () => void;
+    /** Label for the acknowledge button. Defaults to a localized "I've saved it". */
+    acknowledgeLabel?: React.ReactNode;
+    /** Offer a download-as-file button next to copy. Default `false`. */
+    downloadable?: boolean;
+    /** Filename for the downloaded secret. Default `"credential.txt"`. */
+    downloadFileName?: string;
+    /** Control size tier for the action buttons. Default `md`. */
+    size?: SizeProp;
+    /** Caution banner severity. Default `warning`. */
+    tone?: CredentialRevealTone;
+    className?: ClassNameProp;
+    id?: IdProp;
+    "aria-label"?: string;
+};
 /** @see DataTable */
 export type DataTableProp<T> = {
     data: T[];

package/dist/props/components/feedback.prop.d.ts

@@ -13,7 +13,11 @@ export type AlertDialogProp = {
     variant?: ConfirmVariantProp;
     /** Type-to-confirm friction — enables destructive flow (GitHub/Stripe style). */
     confirmPhrase?: string;
+    /** Semantic alias of `confirmPhrase` — the exact token to type (e.g. an org slug) to arm confirm. */
+    challenge?: string;
     onConfirm: HandlerProp;
+    /** Optional step-up re-auth gate (passkey/2FA); must resolve truthy before `onConfirm` fires. */
+    stepUp?: () => Promise<boolean> | boolean;
     keepOpenOnConfirm?: boolean;
     pending?: PendingProp;
 };

package/dist/props/components/navigation.prop.d.ts

@@ -1,10 +1,17 @@
 /** Navigation component prop types — @see docs/COMPONENTS.md#navigation */
 import type * as React from "react";
-import type { ChildrenProp, ClassNameProp, DisabledProp, HasActiveFiltersProp, LabelProp, OnClearFiltersProp } from "../vocabulary/index.js";
+import type { ChildrenProp, ClassNameProp, DisabledProp, HasActiveFiltersProp, LabelProp, OnClearFiltersProp, StickyProp } from "../vocabulary/index.js";
 /** @see Toolbar */
 export type ToolbarProp = {
     onClear?: OnClearFiltersProp;
     hasActiveFilters?: HasActiveFiltersProp;
+    /**
+     * Pin the strip to the top of its scroll container while the list scrolls beneath it
+     * (list-page filter bars, #197). Opt-in — default `false` keeps the toolbar quiet. Tune
+     * the pinned offset/background with the `--filter-bar-sticky-offset` /
+     * `--filter-bar-sticky-background` theme knobs.
+     */
+    sticky?: StickyProp;
     className?: ClassNameProp;
     children: ChildrenProp;
 };

package/dist/props/registry.d.ts

@@ -384,6 +384,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "data";
         readonly description: "Any filter active flag";
     };
+    readonly StickyProp: {
+        readonly file: "vocabulary/data.prop.ts";
+        readonly category: "data";
+        readonly description: "Pin the filter strip while the list scrolls";
+    };
 };
 export type VocabularyPropName = keyof typeof VOCABULARY_REGISTRY;
 export declare const COMPONENT_PROP_REGISTRY: {
@@ -724,6 +729,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display.prop.ts";
         readonly vocabulary: readonly ["ColumnDefProp", "DensityProp", "SortStateProp", "SelectedIdsProp"];
     };
+    readonly CredentialRevealProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "SizeProp", "ToneProp", "OnValueChangeProp", "HandlerProp", "ClassNameProp", "IdProp"];
+    };
     readonly ChartSeriesProp: {
         readonly group: "data-display";
         readonly file: "components/charts.prop.ts";
@@ -900,7 +910,15 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "confirmPhrase";
             readonly local: true;
             readonly reason: "Destructive-dialog type-to-confirm friction phrase.";
+        }, {
+            readonly field: "challenge";
+            readonly local: true;
+            readonly reason: "Semantic alias of confirmPhrase — the typed challenge token (e.g. an org slug).";
         }, "HandlerProp", {
+            readonly field: "stepUp";
+            readonly local: true;
+            readonly reason: "Step-up re-auth (passkey/2FA) gate resolved before confirm fires.";
+        }, {
             readonly field: "keepOpenOnConfirm";
             readonly local: true;
             readonly reason: "AlertDialog-specific async completion behavior.";
@@ -985,7 +1003,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly ToolbarProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";
-        readonly vocabulary: readonly ["OnClearFiltersProp", "HasActiveFiltersProp", "ClassNameProp", "ChildrenProp"];
+        readonly vocabulary: readonly ["OnClearFiltersProp", "HasActiveFiltersProp", "StickyProp", "ClassNameProp", "ChildrenProp"];
     };
     readonly ToolbarGroupProp: {
         readonly group: "navigation";

package/dist/props/registry.js

@@ -384,6 +384,11 @@ const VOCABULARY_REGISTRY = {
     file: "vocabulary/data.prop.ts",
     category: "data",
     description: "Any filter active flag"
+  },
+  StickyProp: {
+    file: "vocabulary/data.prop.ts",
+    category: "data",
+    description: "Pin the filter strip while the list scrolls"
   }
 };
 const COMPONENT_PROP_REGISTRY = {
@@ -792,6 +797,19 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-display.prop.ts",
     vocabulary: ["ColumnDefProp", "DensityProp", "SortStateProp", "SelectedIdsProp"]
   },
+  CredentialRevealProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "SizeProp",
+      "ToneProp",
+      "OnValueChangeProp",
+      "HandlerProp",
+      "ClassNameProp",
+      "IdProp"
+    ]
+  },
   ChartSeriesProp: {
     group: "data-display",
     file: "components/charts.prop.ts",
@@ -919,7 +937,17 @@ const COMPONENT_PROP_REGISTRY = {
         local: true,
         reason: "Destructive-dialog type-to-confirm friction phrase."
       },
+      {
+        field: "challenge",
+        local: true,
+        reason: "Semantic alias of confirmPhrase \u2014 the typed challenge token (e.g. an org slug)."
+      },
       "HandlerProp",
+      {
+        field: "stepUp",
+        local: true,
+        reason: "Step-up re-auth (passkey/2FA) gate resolved before confirm fires."
+      },
       {
         field: "keepOpenOnConfirm",
         local: true,
@@ -1007,7 +1035,13 @@ const COMPONENT_PROP_REGISTRY = {
   ToolbarProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",
-    vocabulary: ["OnClearFiltersProp", "HasActiveFiltersProp", "ClassNameProp", "ChildrenProp"]
+    vocabulary: [
+      "OnClearFiltersProp",
+      "HasActiveFiltersProp",
+      "StickyProp",
+      "ClassNameProp",
+      "ChildrenProp"
+    ]
   },
   ToolbarGroupProp: {
     group: "navigation",

package/dist/props/vocabulary/data.prop.d.ts

@@ -58,3 +58,9 @@ export type OnSearchChangeProp = (query: string) => void;
 export type OnClearFiltersProp = () => void;
 /** Whether any filter is active — shows "Clear all". */
 export type HasActiveFiltersProp = boolean;
+/**
+ * Whether the filter strip pins to the top of its scroll container while the list
+ * scrolls beneath it. Opt-in (default `false`) so the toolbar stays quiet chrome;
+ * offset/background are tuned via the `--filter-bar-sticky-*` theme knobs.
+ */
+export type StickyProp = boolean;

package/dist/props/vocabulary/index.d.ts

@@ -4,4 +4,4 @@ export type { TitleProp, SubtitleProp, DescriptionProp, ExtraProp, FooterProp, A
 export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
 export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, ShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, SizeProp, FormLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp } from "./navigation.prop.js";
-export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, } from "./data.prop.js";
+export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, } from "./data.prop.js";

package/dist/styles/control.css

@@ -117,8 +117,16 @@
     box-shadow: var(--shadow-sm);
   }
 
+  /* SOLID hover/active tokens, never `--destructive / 0.9`: an alpha fill composites with whatever
+   * surface sits behind the button (a lighter Card/AlertDialog vs the page), so the effective colour
+   * — and its contrast with the label — drifts per context and can dip below AA (gh#199). The solid
+   * --destructive-hover/active are tuned to clear 4.5:1 on every surface. */
   .ui-button--destructive:hover {
-    background: hsl(var(--destructive) / 0.9);
+    background: hsl(var(--destructive-hover));
+  }
+
+  .ui-button--destructive:active {
+    background: hsl(var(--destructive-active));
   }
 
   /* Outline + ghost set their text colour EXPLICITLY (read --foreground) — never rely on inherited