@godxjp/ui 18.9.0 → 18.11.0

package/dist/components/data-entry/branch-scope-picker.js

@@ -0,0 +1,200 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { AlertCircle, ShieldAlert } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { mergeAriaIds, pickFieldA11y } from "../../lib/field-a11y.js";
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../data-display/badge.js";
+import { EmptyState } from "../data-display/empty-state.js";
+import { SkeletonRows } from "../feedback/skeleton.js";
+import { Text } from "../general/typography.js";
+import { CheckboxGroup } from "./checkbox-group.js";
+import { RadioGroup } from "./radio.js";
+import { SearchInput } from "./search-input.js";
+const DEFAULT_VALUE = { mode: "all" };
+const BranchScopePicker = React.forwardRef(
+  function BranchScopePicker2({
+    branches,
+    value: controlledValue,
+    defaultValue = DEFAULT_VALUE,
+    onValueChange,
+    disabled = false,
+    readOnly = false,
+    searchable = true,
+    error,
+    loading = false,
+    empty,
+    listError,
+    denied,
+    allLabel,
+    selectedLabel,
+    name,
+    id,
+    className,
+    ...ariaProps
+  }, ref) {
+    const { t } = useTranslation();
+    const reactId = React.useId();
+    const rootId = id ?? `branch-scope-${reactId}`;
+    const errorId = `${rootId}-error`;
+    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+    const value = controlledValue ?? uncontrolled;
+    const branchIds = React.useMemo(() => value.branchIds ?? [], [value.branchIds]);
+    const commit = (next) => {
+      if (controlledValue === void 0) setUncontrolled(next);
+      onValueChange?.(next);
+    };
+    const [search, setSearch] = React.useState("");
+    const filtered = React.useMemo(() => {
+      const term = search.trim().toLocaleLowerCase();
+      if (term === "") return branches;
+      return branches.filter(
+        (branch) => `${branch.name} ${branch.description ?? ""}`.toLocaleLowerCase().includes(term)
+      );
+    }, [branches, search]);
+    const fieldA11y = pickFieldA11y(ariaProps);
+    const invalid = error !== void 0 && error !== null && error !== false;
+    const isDenied = denied !== void 0 && denied !== null && denied !== false;
+    const isListError = listError !== void 0 && listError !== null && listError !== false;
+    const resolvedAllLabel = allLabel ?? t("dataEntry.branchScope.all");
+    const resolvedSelectedLabel = selectedLabel ?? t("dataEntry.branchScope.selected");
+    const surface = (children) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id: rootId,
+        "data-slot": "branch-scope-picker",
+        "data-readonly": readOnly || void 0,
+        className: cn("ui-branch-scope-picker flex flex-col gap-3", className),
+        children
+      }
+    );
+    if (loading) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-label": t("dataEntry.branchScope.loading"), role: "status", children: /* @__PURE__ */ jsx(SkeletonRows, { rows: 4, columns: 2 }) })
+      );
+    }
+    if (isDenied) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: denied === true ? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            icon: ShieldAlert,
+            tone: "warning",
+            variant: "compact",
+            title: t("dataEntry.branchScope.denied"),
+            titleAs: "p"
+          }
+        ) : denied })
+      );
+    }
+    if (isListError) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { role: "alert", children: listError === true ? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            icon: AlertCircle,
+            tone: "destructive",
+            variant: "compact",
+            title: t("dataEntry.branchScope.error"),
+            titleAs: "p"
+          }
+        ) : listError })
+      );
+    }
+    if (branches.length === 0) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: empty ?? /* @__PURE__ */ jsx(EmptyState, { variant: "compact", title: t("dataEntry.branchScope.empty"), titleAs: "p" }) })
+      );
+    }
+    if (readOnly) {
+      const selectedBranches = branches.filter((branch) => branchIds.includes(branch.id));
+      return surface(
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", weight: "medium", children: value.mode === "all" ? resolvedAllLabel : resolvedSelectedLabel }),
+          value.mode === "selected" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: selectedBranches.map((branch) => /* @__PURE__ */ jsx(Badge, { variant: "outline", children: branch.name }, branch.id)) })
+        ] })
+      );
+    }
+    return surface(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            value: value.mode,
+            onValueChange: (mode) => {
+              commit({ ...value, mode });
+            },
+            options: [
+              {
+                value: "all",
+                label: resolvedAllLabel,
+                description: allLabel === void 0 ? t("dataEntry.branchScope.allDescription") : void 0
+              },
+              {
+                value: "selected",
+                label: resolvedSelectedLabel,
+                description: selectedLabel === void 0 ? t("dataEntry.branchScope.selectedDescription") : void 0
+              }
+            ],
+            disabled,
+            name,
+            ...fieldA11y,
+            "aria-invalid": invalid ? true : fieldA11y["aria-invalid"],
+            "aria-errormessage": invalid ? mergeAriaIds(errorId, fieldA11y["aria-errormessage"]) : void 0
+          }
+        ),
+        value.mode === "selected" && /* @__PURE__ */ jsxs("div", { className: "border-border flex flex-col gap-2 border-s-2 ps-4", children: [
+          searchable && branches.length > 0 && /* @__PURE__ */ jsx(
+            SearchInput,
+            {
+              value: search,
+              onValueChange: setSearch,
+              debounce: 0,
+              placeholder: t("dataEntry.branchScope.searchPlaceholder"),
+              ariaLabel: t("dataEntry.branchScope.searchPlaceholder")
+            }
+          ),
+          filtered.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", "aria-live": "polite", children: t("dataEntry.branchScope.noMatches") }) : (
+            // A bounded list is a scroll container, so it MUST be reachable and scrollable
+            // with the keyboard alone even when every row is unfocusable (all checkboxes
+            // `disabled`) — WCAG 2.1.1 / axe `scrollable-region-focusable`; same contract as
+            // MasterDetail's bounded master region. It is an ordinary tab stop (no trap), and
+            // it carries the group's accessible name so the stop is announced meaningfully —
+            // the inner CheckboxGroup deliberately no longer duplicates that label.
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "group",
+                "aria-label": t("dataEntry.branchScope.listLabel"),
+                tabIndex: 0,
+                className: "max-h-64 overflow-y-auto",
+                children: /* @__PURE__ */ jsx(
+                  CheckboxGroup,
+                  {
+                    value: [...branchIds],
+                    onValueChange: (next) => commit({ mode: "selected", branchIds: next }),
+                    options: filtered.map((branch) => ({
+                      value: branch.id,
+                      label: branch.name,
+                      description: branch.description,
+                      disabled: branch.disabled
+                    })),
+                    disabled
+                  }
+                )
+              }
+            )
+          ),
+          /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", "aria-live": "polite", children: t("dataEntry.branchScope.selectedCount", { count: branchIds.length }) })
+        ] }),
+        invalid && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error })
+      ] })
+    );
+  }
+);
+BranchScopePicker.displayName = "BranchScopePicker";
+export {
+  BranchScopePicker
+};

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

@@ -60,3 +60,5 @@ 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 { 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

@@ -50,7 +50,9 @@ 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 { BranchScopePicker } from "./branch-scope-picker.js";
 export {
+  BranchScopePicker,
   Calendar,
   Cascader,
   Checkbox,

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

@@ -1,7 +1,13 @@
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
+import type { FieldA11yProps } from "../../lib/field-a11y.js";
 import type { SelectDataProp } from "../../props/components/data-entry.prop.js";
-export type SelectProp = SelectDataProp | React.ComponentProps<typeof SelectPrimitive.Root>;
+/** Compound-API props: the Radix root's own props PLUS the FormField field-a11y contract, which
+ *  this component re-routes to the trigger (see {@link SelectFieldA11yContext}). */
+export type SelectCompoundProp = React.ComponentProps<typeof SelectPrimitive.Root> & FieldA11yProps & {
+    id?: string;
+};
+export type SelectProp = SelectDataProp | SelectCompoundProp;
 /**
  * Select — one component for every single-select. Use the compound API for full control
  * (`<Select><SelectTrigger/><SelectContent><SelectItem/></SelectContent></Select>`), OR the

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

@@ -5,15 +5,22 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { controlTriggerClass } from "../../lib/control-styles.js";
+import { mergeAriaIds, omitFieldA11y, pickFieldA11y } from "../../lib/field-a11y.js";
 import { SearchSelect } from "./search-select.js";
 function isDataSelect(props) {
   return "options" in props || "loadOptions" in props;
 }
+const SelectFieldA11yContext = React.createContext(null);
 function Select(props) {
   if (isDataSelect(props)) {
     return /* @__PURE__ */ jsx(DataSelect, { ...props });
   }
-  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx(CompoundSelect, { ...props });
+}
+function CompoundSelect({ id, ...props }) {
+  const fieldA11y = pickFieldA11y(props);
+  const rootProps = omitFieldA11y(props);
+  return /* @__PURE__ */ jsx(SelectFieldA11yContext.Provider, { value: { ...fieldA11y, id }, children: /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...rootProps }) });
 }
 function SelectGroup(props) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
@@ -21,31 +28,44 @@ function SelectGroup(props) {
 function SelectValue(props) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
-const SelectTrigger = React.forwardRef(({ className, children, size = "md", showIndicator = true, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Trigger,
-  {
-    ref,
-    "data-slot": "select-trigger",
-    "data-size": size,
-    className: cn(
-      controlTriggerClass,
-      "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground w-full gap-2 whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      showIndicator ? /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
-        ChevronDown,
-        {
-          "data-slot": "select-chevron",
-          className: "size-4 shrink-0 opacity-50",
-          "aria-hidden": "true"
-        }
-      ) }) : null
-    ]
-  }
-));
+const SelectTrigger = React.forwardRef(({ className, children, size = "md", showIndicator = true, ...props }, ref) => {
+  const field = React.useContext(SelectFieldA11yContext);
+  const ownsName = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
+  const fieldA11y = field ? {
+    id: props.id ?? field.id,
+    ...ownsName ? {} : { "aria-label": field["aria-label"], "aria-labelledby": field["aria-labelledby"] },
+    "aria-describedby": mergeAriaIds(props["aria-describedby"], field["aria-describedby"]),
+    "aria-errormessage": mergeAriaIds(props["aria-errormessage"], field["aria-errormessage"]),
+    "aria-required": props["aria-required"] ?? field["aria-required"],
+    "aria-invalid": props["aria-invalid"] ?? field["aria-invalid"]
+  } : void 0;
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      ref,
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        controlTriggerClass,
+        "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground w-full gap-2 whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+        className
+      ),
+      ...props,
+      ...fieldA11y,
+      children: [
+        children,
+        showIndicator ? /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            "data-slot": "select-chevron",
+            className: "size-4 shrink-0 opacity-50",
+            "aria-hidden": "true"
+          }
+        ) }) : null
+      ]
+    }
+  );
+});
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { ToneProp } from "../../props/vocabulary/index.js";
-import type { AlertQueryErrorProp, BannerProp } from "../../props/components/feedback.prop.js";
-export type { BannerProp, BannerProp as BannerProps, AlertProp, AlertProp as AlertProps, AlertTitleProp, AlertTitleProp as AlertTitleProps, AlertContentProp, AlertContentProp as AlertContentProps, AlertDescriptionProp, AlertDescriptionProp as AlertDescriptionProps, AlertActionsProp, AlertActionsProp as AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProp as AlertQueryErrorProps, } from "../../props/components/feedback.prop.js";
+import type { AlertQueryErrorProp } from "../../props/components/feedback.prop.js";
+export type { AlertProp, AlertProp as AlertProps, AlertTitleProp, AlertTitleProp as AlertTitleProps, AlertContentProp, AlertContentProp as AlertContentProps, AlertDescriptionProp, AlertDescriptionProp as AlertDescriptionProps, AlertActionsProp, AlertActionsProp as AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProp as AlertQueryErrorProps, } from "../../props/components/feedback.prop.js";
 declare const AlertBase: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     variant?: import("../../props/index.js").AlertVariantProp;
     tone?: ToneProp;
@@ -63,22 +63,4 @@ export declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes
     } & React.RefAttributes<HTMLDivElement>>;
     QueryError: typeof AlertQueryError;
 };
-export declare const Banner: React.ForwardRefExoticComponent<BannerProp & React.RefAttributes<HTMLDivElement>> & {
-    Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
-        className?: import("../../props/index.js").ClassNameProp;
-        children?: import("../../props/index.js").ChildrenProp;
-    } & React.RefAttributes<HTMLParagraphElement>>;
-    Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-        className?: import("../../props/index.js").ClassNameProp;
-        children?: import("../../props/index.js").ChildrenProp;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
-        className?: import("../../props/index.js").ClassNameProp;
-        children?: import("../../props/index.js").ChildrenProp;
-    } & React.RefAttributes<HTMLParagraphElement>>;
-    Actions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-        className?: import("../../props/index.js").ClassNameProp;
-        children?: import("../../props/index.js").ChildrenProp;
-    } & React.RefAttributes<HTMLDivElement>>;
-};
 export { AlertBase };

package/dist/components/feedback/alert.js

@@ -159,15 +159,6 @@ const Alert = Object.assign(AlertBase, {
   Actions: AlertActions,
   QueryError: AlertQueryError
 });
-const BannerBase = React.forwardRef(function Banner(props, ref) {
-  return /* @__PURE__ */ jsx(AlertBase, { ...props, ref, variant: "banner" });
-});
-const Banner2 = Object.assign(BannerBase, {
-  Title: AlertTitle,
-  Content: AlertContent,
-  Description: AlertDescription,
-  Actions: AlertActions
-});
 export {
   Alert,
   AlertActions,
@@ -175,6 +166,5 @@ export {
   AlertContent,
   AlertDescription,
   AlertQueryError,
-  AlertTitle,
-  Banner2 as Banner
+  AlertTitle
 };

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { BannerProp } from "../../props/components/feedback.prop.js";
+export type { BannerProp, BannerProp as BannerProps } from "../../props/components/feedback.prop.js";
+export declare const Banner: React.ForwardRefExoticComponent<BannerProp & React.RefAttributes<HTMLDivElement>> & {
+    Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Actions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/feedback/banner.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { AlertActions, AlertBase, AlertContent, AlertDescription, AlertTitle } from "./alert.js";
+const BannerBase = React.forwardRef((props, ref) => (
+  // `variant` sits AFTER the spread: the type already excludes it, and the runtime half of the
+  // same guarantee means a spread of leftover Alert props can never silently downgrade the strip.
+  /* @__PURE__ */ jsx(AlertBase, { ref, ...props, variant: "banner" })
+));
+BannerBase.displayName = "Banner";
+const Banner = Object.assign(BannerBase, {
+  Title: AlertTitle,
+  Content: AlertContent,
+  Description: AlertDescription,
+  Actions: AlertActions
+});
+export {
+  Banner
+};

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

@@ -8,6 +8,8 @@ export { Toaster } from "./sonner.js";
 export { toast } from "./use-toast.js";
 export { Skeleton, SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonStat } from "./skeleton.js";
 export type { SkeletonProps } from "./skeleton.js";
-export { Alert, AlertTitle, AlertContent, AlertDescription, AlertActions, AlertQueryError, Banner, } from "./alert.js";
-export type { BannerProp, BannerProps, AlertProp, AlertProps, AlertTitleProp, AlertTitleProps, AlertContentProp, AlertContentProps, AlertDescriptionProp, AlertDescriptionProps, AlertActionsProp, AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProps, } from "./alert.js";
+export { Banner } from "./banner.js";
+export type { BannerProp, BannerProps } from "./banner.js";
+export { Alert, AlertTitle, AlertContent, AlertDescription, AlertActions, AlertQueryError, } from "./alert.js";
+export type { AlertProp, AlertProps, AlertTitleProp, AlertTitleProps, AlertContentProp, AlertContentProps, AlertDescriptionProp, AlertDescriptionProps, AlertActionsProp, AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProps, } from "./alert.js";
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip.js";

package/dist/components/feedback/index.js

@@ -43,14 +43,14 @@ import { TwoFactorSetup } from "./two-factor-setup.js";
 import { Toaster } from "./sonner.js";
 import { toast } from "./use-toast.js";
 import { Skeleton, SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonStat } from "./skeleton.js";
+import { Banner } from "./banner.js";
 import {
   Alert,
   AlertTitle,
   AlertContent,
   AlertDescription,
   AlertActions,
-  AlertQueryError,
-  Banner
+  AlertQueryError
 } from "./alert.js";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip.js";
 export {

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

@@ -13,6 +13,7 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttrib
     weight?: import("../../props/index.js").FontWeightProp;
     align?: import("../../props/index.js").TextAlignProp;
     truncate?: boolean;
+    clamp?: number;
     tabular?: boolean;
     mono?: boolean;
     htmlFor?: string;

package/dist/components/general/typography.js

@@ -8,23 +8,42 @@ const Text = React.forwardRef(
     weight = "regular",
     align,
     truncate,
+    clamp,
     tabular,
     mono,
     className,
+    style,
     ...props
-  }, ref) => React.createElement(as, {
-    ref,
-    "data-slot": "text",
-    "data-size": size,
-    "data-tone": tone,
-    "data-weight": weight,
-    "data-align": align,
-    "data-truncate": truncate ? "" : void 0,
-    "data-tabular": tabular ? "" : void 0,
-    "data-mono": mono ? "" : void 0,
-    className: cn("ui-text", className),
-    ...props
-  })
+  }, ref) => {
+    const clampLines = typeof clamp === "number" && Number.isFinite(clamp) && clamp >= 1 ? Math.floor(clamp) : void 0;
+    if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
+      if (clamp !== void 0 && clampLines === void 0) {
+        console.warn(
+          `Text: \`clamp\` must be a finite number \u2265 1 (got ${String(clamp)}); ignored.`
+        );
+      }
+      if (truncate && clampLines !== void 0) {
+        console.warn(
+          "Text: `truncate` and `clamp` are mutually exclusive \u2014 `clamp` takes precedence; drop `truncate`."
+        );
+      }
+    }
+    return React.createElement(as, {
+      ref,
+      "data-slot": "text",
+      "data-size": size,
+      "data-tone": tone,
+      "data-weight": weight,
+      "data-align": align,
+      "data-truncate": truncate && clampLines === void 0 ? "" : void 0,
+      "data-clamp": clampLines !== void 0 ? "" : void 0,
+      style: clampLines !== void 0 ? { ...style, "--text-clamp": clampLines } : style,
+      "data-tabular": tabular ? "" : void 0,
+      "data-mono": mono ? "" : void 0,
+      className: cn("ui-text", className),
+      ...props
+    });
+  }
 );
 Text.displayName = "Text";
 const Heading = React.forwardRef(

package/dist/components/layout/auth-shell.d.ts

@@ -10,8 +10,8 @@ export type { AuthShellProp, AuthShellProp as AuthShellProps, } from "../../prop
  *
  * `preset` names the flow MEASURE (card max-width + desktop/mobile page gutters) so a consumer
  * never overrides page geometry by hand: `"login"` = SCR-001's stable identity/card/footer anchor
- * for standalone and real requester states; `"registration"` = the 360px sign-up measure, the only
- * START-aligned preset (a tall sign-up card must scroll, not clip its own top above the scroll
+ * for standalone and real requester states; `"registration"` = the 360px sign-up measure,
+ * start-aligned like login (a tall sign-up card must scroll, not clip its own top above the scroll
  * origin) and the only one with its own footer clearance; `"device-authorization"` = 380px card
  * with a 5px inline gutter at 390px; `"context-selection"` = 25rem card, edge-to-edge on mobile;
  * `"account-recovery"` = the 432px SCR-008 panel measure shared by password recovery and the

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

@@ -1,7 +1,5 @@
 export { PageContainer } from "./page-container.js";
 export type { PageContainerProp, PageContainerProps, BreadcrumbItem, BreadcrumbItemProp, } from "./page-container.js";
-export { PageHeader } from "./page-header.js";
-export type { PageHeaderProp, PageHeaderProps } from "./page-header.js";
 export { Flex } from "./flex.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProps, } from "./flex.js";
 export { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
@@ -44,3 +42,5 @@ export { Separator } from "./separator.js";
 export { AspectRatio } from "./aspect-ratio.js";
 export { LegalDocumentShell } from "./legal-document-shell.js";
 export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShellProps, } from "./legal-document-shell.js";
+export { ServiceRolePanel } from "./service-role-panel.js";
+export type { ServiceRoleItemProp, ServiceRolePanelProp, ServiceRolePanelProps, } from "./service-role-panel.js";

package/dist/components/layout/index.js

@@ -1,5 +1,4 @@
 import { PageContainer } from "./page-container.js";
-import { PageHeader } from "./page-header.js";
 import { Flex } from "./flex.js";
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 import { AppShell } from "./app-shell.js";
@@ -21,6 +20,7 @@ import { SplitPane } from "./split-pane.js";
 import { Separator } from "./separator.js";
 import { AspectRatio } from "./aspect-ratio.js";
 import { LegalDocumentShell } from "./legal-document-shell.js";
+import { ServiceRolePanel } from "./service-role-panel.js";
 export {
   AppShell,
   AspectRatio,
@@ -38,12 +38,12 @@ export {
   MasterDetail,
   OrgSwitcher,
   PageContainer,
-  PageHeader,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
   ResponsiveGrid,
   Separator,
+  ServiceRolePanel,
   Sidebar,
   SidebarHeader,
   SidebarItem,

package/dist/components/layout/page-container.d.ts

@@ -2,7 +2,7 @@ import type { PageContainerProp, PageInsetProp } from "../../props/components/la
 export type { PageContainerProp, PageContainerProp as PageContainerProps, } from "../../props/components/layout.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbItemProp as BreadcrumbItem, } from "../../props/vocabulary/navigation.prop.js";
 export declare function PageContainerInset({ className, children, ...props }: PageInsetProp): import("react").JSX.Element;
-declare function PageContainerRoot({ title, subtitle, meta, headerLoading, extra, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, density, variant, preset, headerLayout, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, status, extra, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, density, variant, preset, headerLayout, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
 export declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };