@godxjp/ui 31.2.0 → 31.4.0

package/dist/components/feedback/alert.js

@@ -12,8 +12,11 @@ import {
 } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { humanError } from "../../lib/format.js";
+import { classifyQueryError } from "../../lib/query-error.js";
 import { Flex } from "../layout/flex.js";
 import { Button } from "../general/button.js";
+import { Text } from "../general/typography.js";
+import { useAuthExpiry } from "./auth-expiry.js";
 const AlertContext = React.createContext("default");
 const ASSERTIVE_TONES = /* @__PURE__ */ new Set(["destructive", "warning"]);
 const roleFor = (variant, tone) => {
@@ -121,24 +124,42 @@ function AlertQueryError({
   className
 }) {
   const { t } = useTranslation();
-  if (!category) {
+  const resolved = category ?? classifyQueryError(error).category;
+  const expiry = useAuthExpiry(resolved === "auth", error);
+  if (expiry?.status === "redirecting") {
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "p",
+        size: "sm",
+        tone: "muted",
+        role: "status",
+        "aria-live": "polite",
+        "data-slot": "alert-query-auth-pending",
+        className,
+        children: t("query.authExpiry.redirecting")
+      }
+    );
+  }
+  const authAction = expiry ? expiry.retry : onAuthAction;
+  if (!category && !expiry) {
     return /* @__PURE__ */ jsxs(Alert, { tone: "destructive", className, children: [
       /* @__PURE__ */ jsx(AlertTitle, { children: t("common.error") }),
       /* @__PURE__ */ jsx(AlertDescription, { children: humanError(error) }),
       onRetry && /* @__PURE__ */ jsx(RetryButton, { onRetry })
     ] });
   }
-  const tone = WARNING_CATEGORIES.has(category) ? "warning" : "destructive";
-  return /* @__PURE__ */ jsxs(Alert, { tone, className, children: [
-    /* @__PURE__ */ jsx(AlertTitle, { children: t(`query.error.title.${category}`) }),
-    /* @__PURE__ */ jsx(AlertDescription, { children: t(`query.error.description.${category}`) }),
-    category === "auth" && onAuthAction && /* @__PURE__ */ jsx(AlertActions, { children: /* @__PURE__ */ jsx(
+  const tone = resolved === "auth" ? "default" : WARNING_CATEGORIES.has(resolved) ? "warning" : "destructive";
+  return /* @__PURE__ */ jsxs(Alert, { tone, className, "data-query-category": resolved, children: [
+    /* @__PURE__ */ jsx(AlertTitle, { children: t(`query.error.title.${resolved}`) }),
+    /* @__PURE__ */ jsx(AlertDescription, { children: t(`query.error.description.${resolved}`) }),
+    resolved === "auth" && authAction && /* @__PURE__ */ jsx(AlertActions, { children: /* @__PURE__ */ jsx(
       Button,
       {
         variant: "outline",
         size: "sm",
         onClick: () => {
-          void onAuthAction();
+          void authAction();
         },
         children: /* @__PURE__ */ jsxs(Flex, { direction: "row", wrap: true, align: "center", gap: "xs", children: [
           /* @__PURE__ */ jsx(LogIn, { "aria-hidden": "true" }),
@@ -146,7 +167,7 @@ function AlertQueryError({
         ] })
       }
     ) }),
-    RETRYABLE_CATEGORIES.has(category) && onRetry && /* @__PURE__ */ jsx(RetryButton, { onRetry })
+    RETRYABLE_CATEGORIES.has(resolved) && onRetry && /* @__PURE__ */ jsx(RetryButton, { onRetry })
   ] });
 }
 const Alert = Object.assign(AlertBase, {

package/dist/components/feedback/auth-expiry.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import type { AuthExpiryProviderProp } from "../../props/components/feedback.prop.js";
+export type { AuthExpiryProviderProp, AuthExpiryProviderProp as AuthExpiryProviderProps, } from "../../props/components/feedback.prop.js";
+/**
+ * `"redirecting"` — the handler has been invoked (or is about to be); render a neutral pending state.
+ * `"failed"` — the handler threw or rejected; fall back to the sign-in alert so the user is not left
+ * on an endless spinner.
+ */
+export type AuthExpiryStatus = "redirecting" | "failed";
+/**
+ * Central handling for an expired session (401 / invalid or expired token) — the SSO norm: the app
+ * sends the user back through the IdP, which returns immediately while the IdP session is alive, so
+ * no page-level error is ever painted.
+ *
+ * Every `DataState`, `InfiniteQueryState`, `AlertMutationFeedback` and `AlertQueryError` under this
+ * provider consults it. On an auth-class error it calls `onAuthExpired` **once** — any number of
+ * simultaneous 401s share one call — and renders a neutral pending state with a polite live region
+ * instead of an alert. The call is re-armed once every auth-errored view has gone (navigated away,
+ * or the queries recovered after a silent refresh), so a later expiry fires again.
+ */
+export declare function AuthExpiryProvider({ onAuthExpired, children }: AuthExpiryProviderProp): React.JSX.Element;
+/**
+ * Internal hook for the query surfaces. `active` = this view is currently showing an auth-class
+ * error. Returns `null` when there is no provider (the caller keeps its legacy alert), otherwise the
+ * status to render plus a `retry` for the fallback alert's sign-in button.
+ */
+export declare function useAuthExpiry(active: boolean, error: unknown): {
+    status: AuthExpiryStatus;
+    retry: () => void;
+} | null;

package/dist/components/feedback/auth-expiry.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+const AuthExpiryContext = React.createContext(null);
+function AuthExpiryProvider({ onAuthExpired, children }) {
+  const handlerRef = React.useRef(onAuthExpired);
+  handlerRef.current = onAuthExpired;
+  const countRef = React.useRef(0);
+  const firedRef = React.useRef(false);
+  const [failed, setFailed] = React.useState(false);
+  const invoke = React.useCallback((error) => {
+    firedRef.current = true;
+    setFailed(false);
+    const fail = () => setFailed(true);
+    try {
+      const result = handlerRef.current({ error });
+      if (result && typeof result.then === "function") {
+        result.then(void 0, fail);
+      }
+    } catch {
+      fail();
+    }
+  }, []);
+  const register = React.useCallback(
+    (error) => {
+      countRef.current += 1;
+      if (!firedRef.current) invoke(error);
+      return () => {
+        countRef.current -= 1;
+        setTimeout(() => {
+          if (countRef.current === 0) {
+            firedRef.current = false;
+            setFailed(false);
+          }
+        }, 0);
+      };
+    },
+    [invoke]
+  );
+  const value = React.useMemo(
+    () => ({ register, retry: invoke, failed }),
+    [register, invoke, failed]
+  );
+  return /* @__PURE__ */ jsx(AuthExpiryContext.Provider, { value, children });
+}
+function useAuthExpiry(active, error) {
+  const ctx = React.useContext(AuthExpiryContext);
+  const errorRef = React.useRef(error);
+  errorRef.current = error;
+  const register = ctx?.register;
+  React.useEffect(() => {
+    if (!register || !active) return void 0;
+    return register(errorRef.current);
+  }, [register, active]);
+  if (!ctx || !active) return null;
+  return {
+    status: ctx.failed ? "failed" : "redirecting",
+    retry: () => ctx.retry(errorRef.current)
+  };
+}
+export {
+  AuthExpiryProvider,
+  useAuthExpiry
+};

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

@@ -14,4 +14,6 @@ export { Callout } from "./callout.js";
 export type { CalloutProp, CalloutProps } from "./callout.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 { AuthExpiryProvider } from "./auth-expiry.js";
+export type { AuthExpiryProviderProp, AuthExpiryProviderProps } from "./auth-expiry.js";
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip.js";

package/dist/components/feedback/index.js

@@ -66,6 +66,7 @@ import {
   AlertActions,
   AlertQueryError
 } from "./alert.js";
+import { AuthExpiryProvider } from "./auth-expiry.js";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip.js";
 export {
   Alert,
@@ -86,6 +87,7 @@ export {
   AlertDialogTrigger,
   AlertQueryError,
   AlertTitle,
+  AuthExpiryProvider,
   Banner,
   Callout,
   Dialog,

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

@@ -8,7 +8,7 @@ export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValu
     dir?: "ltr" | "rtl";
     activationMode?: "manual" | "automatic";
 };
-export declare function Tabs({ className, orientation, items, value, defaultValue, onValueChange, activationMode, dir, variant, tabPlacement, size, centered, bodied, extra, destroyOnHidden, onEdit, addIcon, hideAdd, closeIcon, onTabClick, overflow, animated, indicator, moreIcon, onTabScroll, listClassName, contentClassName, children, ...props }: TabsProps): React.JSX.Element;
+export declare function Tabs({ className, orientation, items, value, defaultValue, onValueChange, activationMode, dir, variant, tabPlacement, size, centered, bodied, extra, destroyOnHidden, onEdit, addIcon, hideAdd, closeIcon, onTabClick, overflow, animated, indicator, moreIcon, onTabScroll, controls, listClassName, contentClassName, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: TabsProps): React.JSX.Element;
 export declare const TabsList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     variant?: "default" | "line";
     /**
@@ -24,7 +24,7 @@ export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<Reac
     value: string;
     /** RAC `isDisabled`; ALSO written to the button so `disabled:` utilities keep matching. */
     disabled?: boolean;
-} & React.RefAttributes<HTMLButtonElement>>;
+} & Pick<TabItemProp, "count" | "countLabel" | "overflowCount" | "showZero"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const TabsContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "value"> & {
     /** The panel's key — must match a `TabsTrigger value`. RAC `id`. */
     value: string;

package/dist/components/navigation/tabs.js

@@ -41,11 +41,14 @@ function TabCount({
   const { pill } = useCounterPill({ count, overflowCount, showZero, countLabel, slot: "tabs" });
   return pill;
 }
+const NO_LIST_LABEL = {};
 const TabsFrameContext = React.createContext({
   orientation: "horizontal",
   selectionSuppressed: false,
   size: "md",
-  panels: null
+  panels: null,
+  controls: void 0,
+  listLabel: NO_LIST_LABEL
 });
 function resolveFallbackTabValue(items, requested) {
   if (!items || items.length === 0) return requested;
@@ -122,9 +125,12 @@ function Tabs({
   indicator,
   moreIcon,
   onTabScroll,
+  controls,
   listClassName,
   contentClassName,
   children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
   ...props
 }) {
   const { t } = useTranslation();
@@ -151,9 +157,20 @@ function Tabs({
       return next;
     });
   }, []);
+  const listLabel = React.useMemo(
+    () => ariaLabel === void 0 && ariaLabelledby === void 0 ? NO_LIST_LABEL : { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby },
+    [ariaLabel, ariaLabelledby]
+  );
   const frame = React.useMemo(
-    () => ({ orientation: resolvedOrientation, selectionSuppressed, size, panels }),
-    [resolvedOrientation, selectionSuppressed, size, panels]
+    () => ({
+      orientation: resolvedOrientation,
+      selectionSuppressed,
+      size,
+      panels,
+      controls,
+      listLabel
+    }),
+    [resolvedOrientation, selectionSuppressed, size, panels, controls, listLabel]
   );
   const editable = variant === "editable-card";
   const collapsible = items != null && overflow === "menu";
@@ -444,7 +461,7 @@ function Tabs({
           ] }) : null,
           extraEnd ? /* @__PURE__ */ jsx("div", { "data-slot": "tabs-extra", "data-side": "end", className: "ui-tabs-extra", children: extraEnd }) : null
         ] }) : list,
-        items.map((item) => {
+        controls !== void 0 ? null : items.map((item) => {
           const keepMounted = !destroyOnHidden || item.forceRender === true;
           return /* @__PURE__ */ jsx(
             TabsContent,
@@ -465,6 +482,9 @@ function Tabs({
 }
 const TabsList = React.forwardRef(
   ({ className, variant = "default", loop: _loop, children, ...props }, ref) => {
+    const { listLabel } = React.useContext(TabsFrameContext);
+    const ownName = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
+    const name = ownName ? { "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"] } : listLabel;
     const listRef = React.useRef(null);
     const setListRef = React.useCallback(
       (node) => {
@@ -479,6 +499,8 @@ const TabsList = React.forwardRef(
       AriaTabList,
       {
         ref: setListRef,
+        "aria-label": name["aria-label"],
+        "aria-labelledby": name["aria-labelledby"],
         className: cn(
           // `min-w-0 max-w-full` let the list shrink to (and never exceed) whatever width its
           // ancestors actually give it instead of forcing them wider; horizontal orientation then
@@ -512,10 +534,22 @@ const TabsList = React.forwardRef(
 );
 TabsList.displayName = "TabsList";
 const TabsTrigger = React.forwardRef(
-  ({ className, value, disabled, children, onKeyDown, onClick, ...props }, ref) => {
-    const { orientation, selectionSuppressed, size, panels } = React.useContext(TabsFrameContext);
+  ({
+    className,
+    value,
+    disabled,
+    count,
+    overflowCount,
+    showZero,
+    countLabel,
+    children,
+    onKeyDown,
+    onClick,
+    ...props
+  }, ref) => {
+    const { orientation, selectionSuppressed, size, panels, controls } = React.useContext(TabsFrameContext);
     const controlsAPanel = panels === null || panels.has(value);
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       AriaTab,
       {
         ref,
@@ -565,8 +599,10 @@ const TabsTrigger = React.forwardRef(
           // here for BOTH states, exactly as Radix did.
           "data-state": renderProps.isSelected && !selectionSuppressed ? "active" : "inactive",
           "aria-selected": renderProps.isSelected && !selectionSuppressed,
-          // RAC writes this unconditionally; see `TabsFrame.panels` (gh#643).
-          "aria-controls": controlsAPanel ? domProps["aria-controls"] : void 0,
+          // RAC writes this unconditionally; see `TabsFrame.panels` (gh#643). With no panel
+          // declared, a strip-only root's `controls` region takes its place — on the SELECTED
+          // tab only, the same rule RAC applies to a real panel (gh#1021).
+          "aria-controls": controlsAPanel ? domProps["aria-controls"] : renderProps.isSelected && !selectionSuppressed ? controls : void 0,
           "data-orientation": orientation,
           disabled,
           // CHAINED, not spread — the same reason `onKeyDown` below is. `withDomProps` lays the
@@ -591,7 +627,18 @@ const TabsTrigger = React.forwardRef(
           },
           tabIndex: props.tabIndex ?? domProps.tabIndex
         }),
-        children
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            TabCount,
+            {
+              count,
+              overflowCount,
+              showZero,
+              countLabel
+            }
+          )
+        ]
       }
     );
   }

package/dist/components/query/data-state.js

@@ -2,6 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { AlertQueryError } from "../feedback/alert.js";
+import { useAuthExpiry } from "../feedback/auth-expiry.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { classifyQueryError } from "../../lib/query-error.js";
 function defaultIsEmpty(data) {
@@ -34,10 +35,18 @@ function DataState({
     }
     void query.refetch();
   }, [onRetry, query]);
+  const showingAuthError = query.isError && !query.isFetching && classifyQueryError(query.error).category === "auth";
+  const authExpiry = useAuthExpiry(showingAuthError, query.error);
   if (query.isPending && query.fetchStatus === "idle") return /* @__PURE__ */ jsx(Fragment, { children: prerequisite });
   if (query.isPending) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });
   if (query.isError) {
     if (query.isFetching) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });
+    if (authExpiry?.status === "redirecting") {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        skeleton,
+        /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: t("query.authExpiry.redirecting") })
+      ] });
+    }
     if (errorRenderer) return /* @__PURE__ */ jsx(Fragment, { children: errorRenderer(query.error, retry) });
     const info = classifyQueryError(query.error);
     const canRetry = (info.category === "transient" || info.category === "unknown") && (info.retryable || showRetry || Boolean(onRetry));

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

@@ -1,6 +1,8 @@
 export { DataState } from "./data-state.js";
 export type { DataStateProp, DataStateProps } from "./data-state.js";
 export { AlertMutationFeedback } from "./mutation-feedback.js";
+export { AuthExpiryProvider } from "../feedback/auth-expiry.js";
+export type { AuthExpiryProviderProp, AuthExpiryProviderProps } from "../feedback/auth-expiry.js";
 export type { AlertMutationFeedbackProp, AlertMutationFeedbackProps } from "./mutation-feedback.js";
 export { ButtonRefetch } from "./query-refetch-button.js";
 export type { ButtonRefetchProp, ButtonRefetchProps } from "./query-refetch-button.js";

package/dist/components/query/index.js

@@ -1,10 +1,12 @@
 import { DataState } from "./data-state.js";
 import { AlertMutationFeedback } from "./mutation-feedback.js";
+import { AuthExpiryProvider } from "../feedback/auth-expiry.js";
 import { ButtonRefetch } from "./query-refetch-button.js";
 import { InfiniteQueryState, flattenItemPages } from "./infinite-query-state.js";
 import { classifyQueryError, isRetryableQueryError } from "../../lib/query-error.js";
 export {
   AlertMutationFeedback,
+  AuthExpiryProvider,
   ButtonRefetch,
   DataState,
   InfiniteQueryState,

package/dist/components/query/infinite-query-state.js

@@ -2,6 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { AlertQueryError } from "../feedback/alert.js";
+import { useAuthExpiry } from "../feedback/auth-expiry.js";
 import { Button } from "../general/button.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { classifyQueryError } from "../../lib/query-error.js";
@@ -36,9 +37,17 @@ function InfiniteQueryState({
     }
     void query.refetch();
   }, [onRetry, query]);
+  const showingAuthError = query.isError && !(query.isFetching && !query.isFetchingNextPage) && classifyQueryError(query.error).category === "auth";
+  const authExpiry = useAuthExpiry(showingAuthError, query.error);
   if (query.isPending) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });
   if (query.isError) {
     if (query.isFetching && !query.isFetchingNextPage) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });
+    if (authExpiry?.status === "redirecting") {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        skeleton,
+        /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: t("query.authExpiry.redirecting") })
+      ] });
+    }
     if (errorRenderer) return /* @__PURE__ */ jsx(Fragment, { children: errorRenderer(query.error, retry) });
     const info = classifyQueryError(query.error);
     const canRetry = (info.category === "transient" || info.category === "unknown") && (info.retryable || showRetry || Boolean(onRetry));

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "31.2.0",
+  "version": "31.4.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -635,6 +635,9 @@
       "action": {
         "signIn": "Sign in again"
       }
+    },
+    "authExpiry": {
+      "redirecting": "Your session has ended. Redirecting to sign-in…"
     }
   },
   "chart": {

package/dist/i18n/messages/ja.json

@@ -622,6 +622,9 @@
       "action": {
         "signIn": "再度サインイン"
       }
+    },
+    "authExpiry": {
+      "redirecting": "セッションの有効期限が切れました。サインイン画面へ移動しています…"
     }
   },
   "chart": {

package/dist/i18n/messages/vi.json

@@ -623,6 +623,9 @@
       "action": {
         "signIn": "Đăng nhập lại"
       }
+    },
+    "authExpiry": {
+      "redirecting": "Phiên đăng nhập đã hết hạn. Đang chuyển đến trang đăng nhập…"
     }
   },
   "chart": {

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

@@ -71,6 +71,19 @@ export type AlertQueryErrorProp = {
     onAuthAction?: HandlerProp;
     className?: ClassNameProp;
 };
+/** @see AuthExpiryProvider — central, deduplicated handling of an expired session (gh#1022). */
+export type AuthExpiryProviderProp = {
+    /**
+     * Called ONCE when a query/mutation surface under the provider meets an auth-class error (401 /
+     * invalid or expired token); simultaneous 401s share one call, re-armed after every auth-errored
+     * view has gone. Typically redirects to the IdP with the current URL as the return target.
+     * Return a promise for a silent refresh: a rejection brings back the sign-in alert.
+     */
+    onAuthExpired: (context: {
+        error: unknown;
+    }) => void | Promise<void>;
+    children?: ChildrenProp;
+};
 /** @see Alert */
 export type AlertProp = React.HTMLAttributes<HTMLDivElement> & {
     variant?: AlertVariantProp;

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

@@ -3,7 +3,7 @@ export type { ButtonProp } from "./general.prop.js";
 export type { CommandProp, InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, TimePickerProp, ColorPickerProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
 export type { AvatarProp, EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
 export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
-export type { AlertQueryErrorProp, AlertProp, DialogProp, DialogContentProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SheetResponsiveProp, SkeletonRowsProp, } from "./feedback.prop.js";
+export type { AlertQueryErrorProp, AuthExpiryProviderProp, AlertProp, DialogProp, DialogContentProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SheetResponsiveProp, SkeletonRowsProp, } from "./feedback.prop.js";
 export type { DataStateProp, InfiniteQueryStateProp, InfiniteQueryHelpers, PrefetchLinkProp, } from "./query.prop.js";
 export type { DropdownMenuPlacementProp, DropdownMenuTriggerActionProp, PaginationProp, PaginationSizeProp, PaginationAlignProp, StepsProp, StepItemProp, StepStatusProp, StepsTypeProp, TabsProp, TabItemProp, TabsVariantProp, TabsPlacementProp, TabsExtraProp, TabsOnEditProp, } from "./navigation.prop.js";
 export type { AppProviderProp, AppContextValue, AppSettingKind, AppSettingPickerProp, AppSettingToggleKind, AppSettingToggleProp, ThemeScopeProp, } from "./app.prop.js";

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

@@ -255,7 +255,11 @@ export type StepsSeparatorProp = "chevron" | "arrow";
 export type TabItemProp = {
     value: string;
     label: React.ReactNode;
-    content: React.ReactNode;
+    /**
+     * The panel body. Optional because a strip-only `Tabs` (`controls`, gh#1021) renders no panel
+     * at all — its content lives in the consumer's own region.
+     */
+    content?: React.ReactNode;
     disabled?: boolean;
     /** Leading glyph inside the trigger (Ant Design `Tab.icon`). */
     icon?: React.ReactNode;
@@ -514,6 +518,20 @@ export type TabsProp = {
     moreIcon?: React.ReactNode;
     /** Ant Design `onTabScroll`, on the logical axis. @see TabsOnScrollProp */
     onTabScroll?: TabsOnScrollProp;
+    /**
+     * STRIP-ONLY MODE (gh#1021) — the `id` of the element OUTSIDE this `Tabs` that the strip
+     * drives: a status strip (未対応 / 対応中 / 完了) over a MasterDetail, a saved-view ribbon over a
+     * grid. With it set the `items` API renders the tablist ONLY — no `tabpanel`, empty or
+     * otherwise — and the selected tab's `aria-controls` points at this id, so the WAI-ARIA APG
+     * tab → controlled-region relationship stays real. The consumer's region is never mounted by
+     * the strip, so switching tabs cannot remount it (an unsent reply draft survives).
+     *
+     * Give the region an accessible name (`aria-label`/`aria-labelledby`, e.g. a `<section>`). In
+     * the compound form it applies to every trigger with no `TabsContent` declared for its value; a
+     * declared panel always wins. A pure FILTER with no region to point at is a `Segmented`
+     * (`radiogroup`), not a strip-only `Tabs`.
+     */
+    controls?: IdProp;
     className?: ClassNameProp;
     listClassName?: ClassNameProp;
     contentClassName?: ClassNameProp;

package/dist/props/registry.d.ts

@@ -848,7 +848,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly vocabulary: readonly ["OrientationProp", {
             readonly field: "vertical";
             readonly local: true;
-            readonly reason: "antd's boolean spelling of orientation=\"vertical\"; orientation wins over it.";
+            readonly reason: 'antd\'s boolean spelling of orientation="vertical"; orientation wins over it.';
         }, {
             readonly field: "fullWidth";
             readonly local: true;
@@ -2415,6 +2415,15 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/query.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly AuthExpiryProviderProp: {
+        readonly group: "feedback";
+        readonly file: "components/feedback.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "onAuthExpired";
+            readonly local: true;
+            readonly reason: "App-wide session-expiry callback receiving the triggering error; fired once per expiry (gh#1022).";
+        }, "ChildrenProp"];
+    };
     readonly AlertQueryErrorProp: {
         readonly group: "feedback";
         readonly file: "components/feedback.prop.ts";
@@ -2617,7 +2626,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly TabsProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";
-        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "ClassNameProp", "SizeProp", "ExtraProp", {
+        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "ClassNameProp", "SizeProp", "ExtraProp", "IdProp", {
             readonly field: "bodied";
             readonly local: true;
             readonly reason: "A positive boolean for the card strip's PANEL BODY (gh#762) — an axis on Tabs rather than a `CardTabs` export, because the thing missing was a surface the existing card face already repaints its edge into, not a second component. No vocabulary type: no other component draws a body for its own panel.";

package/dist/props/registry.js

@@ -2833,6 +2833,18 @@ const COMPONENT_PROP_REGISTRY = {
     vocabulary: ["HandlerProp"]
   },
   PrefetchLinkProp: { group: "query", file: "components/query.prop.ts", vocabulary: [] },
+  AuthExpiryProviderProp: {
+    group: "feedback",
+    file: "components/feedback.prop.ts",
+    vocabulary: [
+      {
+        field: "onAuthExpired",
+        local: true,
+        reason: "App-wide session-expiry callback receiving the triggering error; fired once per expiry (gh#1022)."
+      },
+      "ChildrenProp"
+    ]
+  },
   AlertQueryErrorProp: {
     group: "feedback",
     file: "components/feedback.prop.ts",
@@ -3051,6 +3063,7 @@ const COMPONENT_PROP_REGISTRY = {
       "ClassNameProp",
       "SizeProp",
       "ExtraProp",
+      "IdProp",
       {
         field: "bodied",
         local: true,

package/dist/styles/alert-layout.css

@@ -50,6 +50,10 @@
     color: hsl(var(--foreground));
   }
 
+  [data-slot="alert"][data-query-category="auth"] {
+    max-inline-size: var(--query-auth-alert-max-inline-size);
+  }
+
   [data-slot="alert"][data-variant="banner"] {
     border-radius: var(--banner-radius);
     border-block-start-width: 0;
@@ -285,6 +289,18 @@
     background: var(--skeleton-background, hsl(var(--muted)));
   }
 
+  .ui-skeleton-line {
+    block-size: var(--skeleton-block-height);
+  }
+
+  .ui-skeleton-caption {
+    block-size: var(--skeleton-caption-height);
+  }
+
+  .ui-skeleton-title {
+    block-size: var(--skeleton-title-height);
+  }
+
   .ui-skeleton-table {
     overflow: hidden;
     border: var(--stroke-hairline) solid hsl(var(--border));
@@ -323,18 +339,6 @@
     border-radius: var(--skeleton-radius, var(--radius));
     padding: var(--skeleton-card-inset);
 
-    .ui-skeleton-line {
-      block-size: var(--skeleton-block-height);
-    }
-
-    .ui-skeleton-caption {
-      block-size: var(--skeleton-caption-height);
-    }
-
-    .ui-skeleton-title {
-      block-size: var(--skeleton-title-height);
-    }
-
     .ui-skeleton-detail-label {
       block-size: var(--skeleton-caption-height);
       inline-size: var(--skeleton-label-width);