@godxjp/ui 17.0.1 → 18.0.1

package/dist/components/navigation/pagination.js

@@ -88,12 +88,15 @@ function Pagination({
   pageSizeOptions = [10, 20, 50, 100],
   showSizeChanger,
   showTotal,
+  hideOnSinglePage = true,
   simple,
   disabled,
   className,
-  onValueChange
+  onValueChange,
+  "aria-label": ariaLabel
 }) {
   const { t } = useTranslation();
+  const navLabel = ariaLabel ?? t("navigation.pagination.ariaLabel");
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const safeCurrent = Math.min(Math.max(1, value), totalPages);
   const pages = buildPageRange(safeCurrent, totalPages);
@@ -106,112 +109,98 @@ function Pagination({
     total === 0 ? 0 : (safeCurrent - 1) * pageSize + 1,
     Math.min(safeCurrent * pageSize, total)
   ]) : showTotal ? t("navigation.pagination.total", { total }) : null;
-  if (total <= pageSize) return null;
+  if (total <= 0) return null;
+  if (hideOnSinglePage && totalPages <= 1) return null;
   if (simple) {
-    return /* @__PURE__ */ jsxs(
-      "nav",
+    return /* @__PURE__ */ jsxs("nav", { "aria-label": navLabel, "data-simple": "true", className: cn("ui-pagination", className), children: [
+      totalLabel && /* @__PURE__ */ jsx("span", { className: "ui-pagination-total", children: totalLabel }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          disabled: Boolean(disabled) || safeCurrent <= 1,
+          "aria-label": t("navigation.pagination.prev"),
+          onClick: () => go(safeCurrent - 1),
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "ui-pagination-count", children: [
+        safeCurrent,
+        " / ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          disabled: Boolean(disabled) || safeCurrent >= totalPages,
+          "aria-label": t("navigation.pagination.next"),
+          onClick: () => go(safeCurrent + 1),
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": navLabel, className: cn("ui-pagination", className), children: [
+    totalLabel && /* @__PURE__ */ jsx("span", { className: "ui-pagination-total", children: totalLabel }),
+    showSizeChanger && /* @__PURE__ */ jsxs(
+      Select,
       {
-        "aria-label": t("navigation.pagination.ariaLabel"),
-        "data-simple": "true",
-        className: cn("ui-pagination", className),
+        value: String(pageSize),
+        onValueChange: (v) => go(1, Number(v)),
+        disabled,
         children: [
-          totalLabel && /* @__PURE__ */ jsx("span", { className: "ui-pagination-total", children: totalLabel }),
           /* @__PURE__ */ jsx(
-            Button,
+            SelectTrigger,
             {
-              type: "button",
-              variant: "outline",
-              size: "sm",
-              disabled: Boolean(disabled) || safeCurrent <= 1,
-              "aria-label": t("navigation.pagination.prev"),
-              onClick: () => go(safeCurrent - 1),
-              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+              className: "ui-pagination-size-trigger w-[var(--pagination-size-width)]",
+              "aria-label": t("navigation.pagination.pageSize"),
+              children: /* @__PURE__ */ jsx(SelectValue, {})
             }
           ),
-          /* @__PURE__ */ jsxs("span", { className: "ui-pagination-count", children: [
-            safeCurrent,
-            " / ",
-            totalPages
-          ] }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "button",
-              variant: "outline",
-              size: "sm",
-              disabled: Boolean(disabled) || safeCurrent >= totalPages,
-              "aria-label": t("navigation.pagination.next"),
-              onClick: () => go(safeCurrent + 1),
-              children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
-            }
-          )
+          /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: t("navigation.pagination.pageSizeOption", { size }) }, size)) })
         ]
       }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "nav",
-    {
-      "aria-label": t("navigation.pagination.ariaLabel"),
-      className: cn("ui-pagination", className),
-      children: [
-        totalLabel && /* @__PURE__ */ jsx("span", { className: "ui-pagination-total", children: totalLabel }),
-        showSizeChanger && /* @__PURE__ */ jsxs(
-          Select,
+    ),
+    /* @__PURE__ */ jsxs(PaginationContent, { children: [
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+        PaginationPrevious,
+        {
+          "aria-label": t("navigation.pagination.prev"),
+          onClick: () => go(safeCurrent - 1),
+          disabled: Boolean(disabled) || safeCurrent <= 1,
+          children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
+        }
+      ) }),
+      pages.map(
+        (page, index) => page === "ellipsis" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, `e-${index}`) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+          PaginationLink,
           {
-            value: String(pageSize),
-            onValueChange: (v) => go(1, Number(v)),
+            isActive: page === safeCurrent,
+            "aria-label": t("navigation.pagination.page", { page }),
+            onClick: () => {
+              if (!disabled) go(page);
+            },
             disabled,
-            children: [
-              /* @__PURE__ */ jsx(
-                SelectTrigger,
-                {
-                  className: "ui-pagination-size-trigger w-[var(--pagination-size-width)]",
-                  "aria-label": t("navigation.pagination.pageSize"),
-                  children: /* @__PURE__ */ jsx(SelectValue, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: t("navigation.pagination.pageSizeOption", { size }) }, size)) })
-            ]
+            children: page
           }
-        ),
-        /* @__PURE__ */ jsxs(PaginationContent, { children: [
-          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-            PaginationPrevious,
-            {
-              "aria-label": t("navigation.pagination.prev"),
-              onClick: () => go(safeCurrent - 1),
-              disabled: Boolean(disabled) || safeCurrent <= 1,
-              children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
-            }
-          ) }),
-          pages.map(
-            (page, index) => page === "ellipsis" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, `e-${index}`) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-              PaginationLink,
-              {
-                isActive: page === safeCurrent,
-                "aria-label": t("navigation.pagination.page", { page }),
-                onClick: () => {
-                  if (!disabled) go(page);
-                },
-                disabled,
-                children: page
-              }
-            ) }, page)
-          ),
-          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-            PaginationNext,
-            {
-              "aria-label": t("navigation.pagination.next"),
-              onClick: () => go(safeCurrent + 1),
-              disabled: Boolean(disabled) || safeCurrent >= totalPages,
-              children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
-            }
-          ) })
-        ] })
-      ]
-    }
-  );
+        ) }, page)
+      ),
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+        PaginationNext,
+        {
+          "aria-label": t("navigation.pagination.next"),
+          onClick: () => go(safeCurrent + 1),
+          disabled: Boolean(disabled) || safeCurrent >= totalPages,
+          children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+        }
+      ) })
+    ] })
+  ] });
 }
 export {
   Pagination,

package/dist/components/navigation/tabs.js

@@ -3,6 +3,14 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cn } from "../../lib/utils.js";
+function resolveFallbackTabValue(items, requested) {
+  if (!items || items.length === 0) return requested;
+  if (requested !== void 0) {
+    const requestedItem = items.find((item) => item.value === requested);
+    if (requestedItem && !requestedItem.disabled) return requested;
+  }
+  return items.find((item) => !item.disabled)?.value;
+}
 function Tabs({
   className,
   orientation = "horizontal",
@@ -14,8 +22,7 @@ function Tabs({
   contentClassName,
   ...props
 }) {
-  const firstValue = items?.[0]?.value;
-  const resolvedDefault = defaultValue ?? firstValue;
+  const resolvedDefault = resolveFallbackTabValue(items, defaultValue);
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Root,
     {
@@ -24,7 +31,10 @@ function Tabs({
       orientation,
       value,
       defaultValue: value === void 0 ? resolvedDefault : void 0,
-      className: cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className),
+      className: cn(
+        "group/tabs flex min-w-0 gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      ),
       ...props,
       children: items ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
@@ -72,7 +82,14 @@ const TabsList = React.forwardRef(({ className, variant = "default", ...props },
     "data-slot": "tabs-list",
     "data-variant": variant,
     className: cn(
-      "group/tabs-list text-muted-foreground data-[variant=default]:bg-muted inline-flex w-fit items-center justify-center rounded-lg p-1 group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:gap-1 data-[variant=line]:rounded-none data-[variant=line]:bg-transparent",
+      // `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
+      // scrolls its own overflow rather than clipping/hiding long localized labels in a narrow
+      // container (gh#175). Hidden scrollbar keeps the strip visually clean while staying
+      // swipeable on touch and reachable via keyboard (arrow-key roving focus still scrolls the
+      // newly-focused trigger into view natively). Vertical orientation is untouched — it already
+      // stacks in a column and is sized by its own `h-*`/`w-*` overrides.
+      "group/tabs-list text-muted-foreground data-[variant=default]:bg-muted inline-flex w-fit max-w-full min-w-0 items-center justify-center rounded-lg p-1 group-data-[orientation=vertical]/tabs:flex-col data-[orientation=horizontal]:[scrollbar-width:none] data-[orientation=horizontal]:overflow-x-auto data-[orientation=horizontal]:overflow-y-hidden data-[variant=line]:gap-1 data-[variant=line]:rounded-none data-[variant=line]:bg-transparent [&[data-orientation=horizontal]::-webkit-scrollbar]:hidden",
       className
     ),
     ...props

package/dist/components/ui/tag-input.js

@@ -43,6 +43,7 @@ const TagInput = React.forwardRef(
       "div",
       {
         "data-slot": "tag-input",
+        "aria-disabled": disabled || void 0,
         className: cn("ui-tag-input", disabled && "ui-tag-input-disabled", className),
         children: [
           tags.length > 0 ? /* @__PURE__ */ jsx("ul", { role: "list", className: "ui-tag-input-list", "data-slot": "tag-input-list", children: tags.map((tag, i) => /* @__PURE__ */ jsxs(

package/dist/i18n/messages/en.json

@@ -129,7 +129,9 @@
       "sidebarLabel": "Sidebar",
       "headerLabel": "Header",
       "mainLabel": "Main content",
-      "footerLabel": "Footer"
+      "footerLabel": "Footer",
+      "openNav": "Open navigation menu",
+      "navLabel": "Menu"
     },
     "authShell": {
       "brandLabel": "Brand",

package/dist/i18n/messages/ja.json

@@ -129,7 +129,9 @@
       "sidebarLabel": "サイドバー",
       "headerLabel": "ヘッダー",
       "mainLabel": "メインコンテンツ",
-      "footerLabel": "フッター"
+      "footerLabel": "フッター",
+      "openNav": "ナビゲーションメニューを開く",
+      "navLabel": "メニュー"
     },
     "authShell": {
       "brandLabel": "ブランド",

package/dist/i18n/messages/vi.json

@@ -129,7 +129,9 @@
       "sidebarLabel": "Thanh bên",
       "headerLabel": "Đầu trang",
       "mainLabel": "Nội dung chính",
-      "footerLabel": "Chân trang"
+      "footerLabel": "Chân trang",
+      "openNav": "Mở menu điều hướng",
+      "navLabel": "Menu"
     },
     "authShell": {
       "brandLabel": "Thương hiệu",

package/dist/lib/field-a11y.d.ts

@@ -0,0 +1,66 @@
+import type * as React from "react";
+/**
+ * The accessible-name / description / validation contract that {@link FormField} injects onto its
+ * single control child (via `cloneElement`). EVERY form-capable `@godxjp/ui` component accepts
+ * these props and forwards them to its **semantic focus target** — the real `<input>` / combobox /
+ * trigger the user tabs to, never a presentational wrapper `<div>`. Without this forwarding the
+ * visible label / helper / error rendered by FormField is silently disconnected from the control
+ * for assistive technology (issue #164).
+ *
+ * These are the standard WAI-ARIA field relationships:
+ * - `aria-labelledby` — points at the FormField label → the control's accessible **name**.
+ * - `aria-describedby` — points at helper text → the control's **description**.
+ * - `aria-errormessage` + `aria-invalid` — the validation message, announced when invalid.
+ * - `aria-required` — required-field semantics.
+ * - `aria-label` — a name supplied directly (used when there is no visible label element).
+ */
+export interface FieldA11yProps {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-errormessage"?: string;
+    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+    "aria-required"?: React.AriaAttributes["aria-required"];
+}
+/**
+ * Merge one or more space-separated id-reference lists (`aria-describedby`, `aria-labelledby`,
+ * `aria-errormessage`) into a single deduplicated token list. Returns `undefined` when empty so the
+ * attribute is omitted rather than rendered as `""`.
+ */
+export declare function mergeAriaIds(...values: Array<string | undefined>): string | undefined;
+/**
+ * Extract ONLY the defined field-a11y attributes from a props bag, ready to spread onto a
+ * component's semantic focus target. Undefined entries are dropped so a forwarded contract never
+ * clobbers a control's own intrinsic `aria-label` / `aria-invalid`.
+ *
+ * ```tsx
+ * const fieldA11y = pickFieldA11y(props);
+ * return <input {...fieldA11y} />; // the real focus target owns the relationship
+ * ```
+ */
+export declare function pickFieldA11y(props: FieldA11yProps): FieldA11yProps;
+/**
+ * As {@link pickFieldA11y}, but resolves the accessible **name** for a control that also has an
+ * intrinsic `aria-label` (e.g. SearchInput's built-in "Search"): when the FormField supplies an
+ * `aria-labelledby`, it wins and the intrinsic `aria-label` is dropped (a control must not carry
+ * both — `aria-labelledby` takes precedence and the redundant `aria-label` only adds noise).
+ */
+export declare function resolveFieldA11y(props: FieldA11yProps, intrinsicAriaLabel?: string): FieldA11yProps;
+/**
+ * The field-a11y attributes valid on a **group container** (`role="group"`), used by composite
+ * controls that have no single labelable focus target — CheckboxGroup, and the two-input range
+ * pickers / Transfer shuttle.
+ *
+ * Per WAI-ARIA 1.2 only `aria-labelledby` and `aria-describedby` are globally allowed on
+ * `role="group"`; `aria-invalid` / `aria-errormessage` / `aria-required` are widget-only and would
+ * be an invalid-ARIA violation on a group. So the validation message id (`aria-errormessage`) is
+ * **folded into `aria-describedby`** — the error text is still announced as part of the group's
+ * description, and FormField's `role="alert"` error node announces it live regardless.
+ *
+ * `role="radiogroup"` IS a widget and supports the full validation set — those groups use
+ * {@link pickFieldA11y} directly, not this helper.
+ */
+export declare function pickGroupFieldA11y(props: FieldA11yProps): {
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+};

package/dist/lib/field-a11y.js

@@ -0,0 +1,44 @@
+const FIELD_A11Y_KEYS = [
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-errormessage",
+  "aria-invalid",
+  "aria-required"
+];
+function mergeAriaIds(...values) {
+  return Array.from(new Set(values.flatMap((value) => value?.split(/\s+/).filter(Boolean) ?? []))).join(
+    " "
+  ) || void 0;
+}
+function pickFieldA11y(props) {
+  const out = {};
+  for (const key of FIELD_A11Y_KEYS) {
+    const value = props[key];
+    if (value !== void 0) out[key] = value;
+  }
+  return out;
+}
+function resolveFieldA11y(props, intrinsicAriaLabel) {
+  const picked = pickFieldA11y(props);
+  if (picked["aria-labelledby"]) {
+    return picked;
+  }
+  if (picked["aria-label"] === void 0 && intrinsicAriaLabel !== void 0) {
+    picked["aria-label"] = intrinsicAriaLabel;
+  }
+  return picked;
+}
+function pickGroupFieldA11y(props) {
+  const describedBy = mergeAriaIds(props["aria-describedby"], props["aria-errormessage"]);
+  return {
+    ...props["aria-labelledby"] !== void 0 ? { "aria-labelledby": props["aria-labelledby"] } : {},
+    ...describedBy !== void 0 ? { "aria-describedby": describedBy } : {}
+  };
+}
+export {
+  mergeAriaIds,
+  pickFieldA11y,
+  pickGroupFieldA11y,
+  resolveFieldA11y
+};

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

@@ -69,11 +69,15 @@ export type AppSettingKind = "locale" | "timezone" | "dateFormat" | "timeFormat"
 export type AppSettingPickerProp = {
     kind: AppSettingKind;
     /**
-     * Trigger presentation. `"labeled"` (default) shows the leading icon + the selected value in a
-     * full-width control. `"icon"` renders a supported square, icon-only topbar trigger (e.g. a globe
-     * language switcher): it structurally drops the value text and the picker's owned width — no
-     * descendant-selector CSS overrides needed — while always keeping the localized `aria-label`, so
-     * an icon-only trigger can never ship without an accessible name.
+     * Trigger presentation. `"labeled"` shows the leading icon + the selected value in a control
+     * sized to the setting. `"icon"` renders a supported square, icon-only topbar trigger (e.g. a
+     * globe language switcher): it structurally drops the value text and the picker's owned width —
+     * no descendant-selector CSS overrides needed — while always keeping the localized `aria-label`,
+     * so an icon-only trigger can never ship without an accessible name.
+     *
+     * Default is kind-dependent: `kind="locale"` defaults to `"icon"` (its product contract is the
+     * compact language switcher); every other kind defaults to `"labeled"`. Override explicitly for
+     * e.g. a labeled locale row inside a settings form (`appearance="labeled"`).
      */
     appearance?: AppSettingPickerAppearanceProp;
     className?: ClassNameProp;

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 } from "../vocabulary/index.js";
+import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, ChildrenProp, ToneProp, HeadingLevelProp } from "../vocabulary/index.js";
 /** @see EmptyState */
 /**
  * Semantic intent of the EmptyState icon medallion — a subset of the shared `ToneProp` vocabulary
@@ -22,6 +22,21 @@ export type EmptyStateProp = {
      * consumer never hand-rolls a `.ui-success-state` class to recolour it.
      */
     tone?: EmptyStateToneProp;
+    /**
+     * Semantic heading level (`h1`–`h4`) for the title. Default `3`. Choose it to
+     * keep the page outline valid (`h1 → h2 → h3`, no skipped levels), NOT for
+     * visual size — the title size is fixed by `--empty-state` styles regardless
+     * of level. A page/onboarding empty state directly under a page `h1` uses
+     * `titleLevel={2}`; an empty state nested in an already-`h2` section uses `3`.
+     */
+    titleLevel?: HeadingLevelProp;
+    /**
+     * Render the title as a non-heading element (`p` / `div`) instead of a
+     * heading. Use for a `compact`/`section` empty state placed inside a section
+     * that already owns its heading, so the zero-state message is not announced as
+     * a heading and cannot skip an outline level. Overrides `titleLevel`.
+     */
+    titleAs?: "h1" | "h2" | "h3" | "h4" | "p" | "div";
     className?: ClassNameProp;
 };
 /** @see Descriptions */