@godxjp/ui 9.2.0 → 10.0.0

package/dist/{chunk-6J7GRCDA.js → chunk-UNVRNJCB.js}

@@ -1,10 +1,10 @@
 import { normalizeTreeOptions, collectAllExpandableKeys, filterVisibleTree, flattenVisibleTree, findNodeByValue, reactNodeText, getDescendantValues } from './chunk-SMLKNECP.js';
-import { Checkbox } from './chunk-O24Z3ULJ.js';
 import { Command, CommandInput } from './chunk-HTEL5DQI.js';
+import { Checkbox } from './chunk-BE6GJGKJ.js';
 import { Button } from './chunk-M4PZNAMV.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
 import { ScrollArea } from './chunk-3KPEZ5CF.js';
-import { useTranslation } from './chunk-RLGHEV4A.js';
+import { useTranslation } from './chunk-HTG5VHU7.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { X, ChevronsUpDown, ChevronDown, ChevronRight } from 'lucide-react';
@@ -65,6 +65,8 @@ function TreeSelectRoot({
   );
   const isControlled = value !== void 0;
   const [internal, setInternal] = React.useState(() => toArray(defaultValue));
+  const [activeKey, setActiveKey] = React.useState(null);
+  const treeItemRefs = React.useRef(/* @__PURE__ */ new Map());
   const selected = isControlled ? toArray(value) : internal;
   const resolvedPlaceholder = placeholder ?? t("dataEntry.treeSelect.placeholder");
   const visible = React.useMemo(() => {
@@ -110,6 +112,53 @@ function TreeSelectRoot({
     e.stopPropagation();
     commit([]);
   };
+  const rovingKey = (activeKey && visible.some(({ node }) => node.value === activeKey) ? activeKey : null) ?? visible[0]?.node.value ?? null;
+  React.useEffect(() => {
+    if (!open || !activeKey) return;
+    treeItemRefs.current.get(activeKey)?.focus();
+  }, [activeKey, open, visible]);
+  const focusByOffset = (currentValue, delta) => {
+    const index = visible.findIndex(({ node }) => node.value === currentValue);
+    if (index === -1) return;
+    const next = visible[index + delta];
+    if (next) setActiveKey(next.node.value);
+  };
+  const onTreeItemKeyDown = (event, node, hasChildren, expanded) => {
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        focusByOffset(node.value, 1);
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        focusByOffset(node.value, -1);
+        break;
+      }
+      case "ArrowRight": {
+        event.preventDefault();
+        if (hasChildren && !expanded) {
+          toggleExpand(node.value);
+        } else if (hasChildren && expanded) {
+          focusByOffset(node.value, 1);
+        }
+        break;
+      }
+      case "ArrowLeft": {
+        event.preventDefault();
+        if (hasChildren && expanded) {
+          toggleExpand(node.value);
+        }
+        break;
+      }
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        toggleSelect(node);
+        break;
+      }
+    }
+  };
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
@@ -127,13 +176,15 @@ function TreeSelectRoot({
         ),
         children: [
           /* @__PURE__ */ jsx("span", { className: "truncate", children: displayKeys.length ? displayLabel : resolvedPlaceholder }),
-          /* @__PURE__ */ jsxs("span", { className: "ml-2 flex shrink-0 items-center gap-1", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ms-2 flex shrink-0 items-center gap-1", children: [
             allowClear && displayKeys.length > 0 && !disabled && /* @__PURE__ */ jsx(
-              X,
+              "button",
               {
-                className: "size-4 opacity-50 hover:opacity-100",
-                "aria-hidden": "true",
-                onClick: clearValue
+                type: "button",
+                "aria-label": t("dataEntry.treeSelect.clear"),
+                className: "flex size-4 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+                onClick: clearValue,
+                children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
               }
             ),
             /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 opacity-50", "aria-hidden": "true" })
@@ -162,16 +213,23 @@ function TreeSelectRoot({
             return /* @__PURE__ */ jsxs(
               "div",
               {
+                ref: (el) => {
+                  treeItemRefs.current.set(node.value, el);
+                },
                 role: "treeitem",
+                tabIndex: node.disabled ? -1 : rovingKey === node.value ? 0 : -1,
                 "aria-expanded": hasChildren ? expanded : void 0,
                 "aria-selected": isSelected,
+                onFocus: () => setActiveKey(node.value),
+                onKeyDown: (event) => onTreeItemKeyDown(event, node, hasChildren, expanded),
                 className: cn(
-                  "flex items-center rounded-sm py-1.5 pr-2 text-sm outline-none",
+                  "flex items-center rounded-sm py-1.5 pe-2 text-sm outline-none",
                   "hover:bg-accent hover:text-accent-foreground",
+                  "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-1",
                   isSelected && "bg-accent/60",
                   node.disabled && "pointer-events-none opacity-50"
                 ),
-                style: { paddingLeft: `${depth * 1.25 + 0.5}rem` },
+                style: { paddingInlineStart: `${depth * 1.25 + 0.5}rem` },
                 children: [
                   /* @__PURE__ */ jsx(
                     "button",
@@ -180,7 +238,7 @@ function TreeSelectRoot({
                       tabIndex: -1,
                       "aria-label": expanded ? t("dataEntry.treeSelect.collapse") : t("dataEntry.treeSelect.expand"),
                       className: cn(
-                        "mr-1 flex size-5 shrink-0 items-center justify-center rounded-sm",
+                        "me-1 flex size-5 shrink-0 items-center justify-center rounded-sm",
                         !hasChildren && "invisible"
                       ),
                       onClick: () => toggleExpand(node.value),
@@ -192,6 +250,7 @@ function TreeSelectRoot({
                       Checkbox,
                       {
                         checked: isSelected,
+                        tabIndex: -1,
                         disabled: Boolean(node.disabled) || Boolean(node.disableCheckbox),
                         onCheckedChange: () => toggleSelect(node)
                       }
@@ -201,7 +260,8 @@ function TreeSelectRoot({
                     "button",
                     {
                       type: "button",
-                      className: "flex-1 truncate text-left",
+                      tabIndex: -1,
+                      className: "flex-1 truncate text-start",
                       disabled: node.disabled,
                       onClick: () => toggleSelect(node),
                       children: node.label

package/dist/{chunk-6YBYAEXD.js → chunk-VSM44AYE.js}

@@ -1,8 +1,8 @@
 import { Input } from './chunk-VOHTRR5X.js';
 import { Button } from './chunk-M4PZNAMV.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
-import { useTranslation } from './chunk-RLGHEV4A.js';
-import { normalizeHhmm, isValidHhmm } from './chunk-FXFJF4YA.js';
+import { useTranslation, usePickerLocales } from './chunk-HTG5VHU7.js';
+import { normalizeHhmm, isValidHhmm } from './chunk-6CSBMMZS.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { Clock } from 'lucide-react';
@@ -23,49 +23,97 @@ function parseHhmm(value) {
   const [h, m] = normalized.split(":").map(Number);
   return { hour: h, minute: m };
 }
+function to12h(hour24) {
+  const h = hour24 % 12;
+  return h === 0 ? 12 : h;
+}
+function from12h(hour12, meridiem) {
+  const base = hour12 % 12;
+  return meridiem === "pm" ? base + 12 : base;
+}
 function TimeColumn({
   label,
   items,
   selected,
+  formatItem,
   onSelect
 }) {
   const listRef = React.useRef(null);
   React.useEffect(() => {
     listRef.current?.querySelector('[data-selected="true"]')?.scrollIntoView({ block: "center" });
   }, [selected]);
+  const moveFocus = (index) => {
+    const options = listRef.current?.querySelectorAll('[role="option"]');
+    options?.[index]?.focus();
+  };
+  const onKeyDown = (e, index) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveFocus(Math.min(items.length - 1, index + 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveFocus(Math.max(0, index - 1));
+        break;
+      case "Home":
+        e.preventDefault();
+        moveFocus(0);
+        break;
+      case "End":
+        e.preventDefault();
+        moveFocus(items.length - 1);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        onSelect(items[index]);
+        break;
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "text-muted-foreground border-b px-1 py-1.5 text-center text-xs font-medium", children: label }),
     /* @__PURE__ */ jsx(
       "div",
       {
         ref: listRef,
+        role: "listbox",
+        "aria-label": label,
         className: "h-52 [scrollbar-width:thin] [scrollbar-gutter:stable] overflow-y-scroll overscroll-contain p-1",
-        children: items.map((item) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "data-selected": item === selected,
-            className: cn(
-              "hover:bg-accent flex w-full items-center justify-center rounded-md py-1.5 text-sm tabular-nums transition-colors",
-              item === selected && "bg-primary text-primary-foreground hover:bg-primary/90"
-            ),
-            onClick: () => {
-              onSelect(item);
+        children: items.map((item, index) => {
+          const isSelected = item === selected;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": isSelected,
+              "data-selected": isSelected,
+              tabIndex: isSelected ? 0 : -1,
+              className: cn(
+                "hover:bg-accent flex w-full items-center justify-center rounded-md py-1.5 text-sm tabular-nums transition-colors",
+                isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"
+              ),
+              onClick: () => {
+                onSelect(item);
+              },
+              onKeyDown: (e) => onKeyDown(e, index),
+              children: formatItem(item)
             },
-            children: pad2(item)
-          },
-          item
-        ))
+            item
+          );
+        })
       }
     )
   ] });
 }
-function TimePickerPanel({ value, minuteStep, onChange, onDone }) {
+function TimePickerPanel({ value, minuteStep, use12h, onChange, onDone }) {
   const { t } = useTranslation();
   const { hour, minute } = parseHhmm(value);
   const minutes = buildMinutes(minuteStep);
   const snappedMinute = minutes.includes(minute) ? minute : minutes[0];
   const [draft, setDraft] = React.useState(value);
+  const meridiem = hour >= 12 ? "pm" : "am";
   React.useEffect(() => {
     setDraft(value);
   }, [value]);
@@ -79,16 +127,20 @@ function TimePickerPanel({ value, minuteStep, onChange, onDone }) {
     onChange(next);
     onDone?.();
   };
-  return /* @__PURE__ */ jsxs("div", { className: "w-36", children: [
+  const hourItems = use12h ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
+  const selectedHourItem = use12h ? to12h(hour) : hour;
+  return /* @__PURE__ */ jsxs("div", { className: use12h ? "w-52" : "w-36", children: [
     /* @__PURE__ */ jsxs("div", { className: "divide-border flex divide-x", children: [
       /* @__PURE__ */ jsx(
         TimeColumn,
         {
           label: t("dataEntry.timePicker.hour"),
-          items: Array.from({ length: 24 }, (_, i) => i),
-          selected: hour,
+          items: hourItems,
+          selected: selectedHourItem,
+          formatItem: (h) => use12h ? String(h) : pad2(h),
           onSelect: (h) => {
-            onChange(`${pad2(h)}:${pad2(snappedMinute)}`);
+            const hour24 = use12h ? from12h(h, meridiem) : h;
+            onChange(`${pad2(hour24)}:${pad2(snappedMinute)}`);
           }
         }
       ),
@@ -98,10 +150,25 @@ function TimePickerPanel({ value, minuteStep, onChange, onDone }) {
           label: t("dataEntry.timePicker.minute"),
           items: minutes,
           selected: snappedMinute,
+          formatItem: (m) => pad2(m),
           onSelect: (m) => {
             commit(`${pad2(hour)}:${pad2(m)}`);
           }
         }
+      ),
+      use12h && /* @__PURE__ */ jsx(
+        TimeColumn,
+        {
+          label: t("dataEntry.timePicker.meridiem"),
+          items: [0, 1],
+          selected: meridiem === "pm" ? 1 : 0,
+          formatItem: (m) => m === 1 ? t("dataEntry.timePicker.pm") : t("dataEntry.timePicker.am"),
+          onSelect: (m) => {
+            const nextMeridiem = m === 1 ? "pm" : "am";
+            const hour24 = from12h(to12h(hour), nextMeridiem);
+            onChange(`${pad2(hour24)}:${pad2(snappedMinute)}`);
+          }
+        }
       )
     ] }),
     /* @__PURE__ */ jsx("div", { className: "border-t p-2", children: /* @__PURE__ */ jsx(
@@ -142,6 +209,8 @@ function TimePicker({
   minuteStep = 5
 }) {
   const { t } = useTranslation();
+  const { timeFormat } = usePickerLocales();
+  const use12h = timeFormat === "12h";
   const [open, setOpen] = React.useState(false);
   const [internal, setInternal] = React.useState(defaultValue ?? "");
   const isControlled = controlledValue !== void 0;
@@ -169,7 +238,7 @@ function TimePicker({
         role: "combobox",
         "aria-expanded": open,
         "aria-haspopup": "dialog",
-        className: "pr-10 tabular-nums",
+        className: "pe-10 tabular-nums",
         onChange: (event) => {
           setText(event.target.value);
           const normalized = normalizeHhmm(event.target.value);
@@ -191,7 +260,7 @@ function TimePicker({
           disabled,
           tabIndex: -1,
           "aria-label": t("dataEntry.timePicker.openPicker") ?? "Open time picker",
-          className: "text-muted-foreground absolute inset-y-0 right-0 h-full px-2 hover:bg-transparent",
+          className: "text-muted-foreground absolute inset-y-0 end-0 h-full px-2 hover:bg-transparent",
           children: /* @__PURE__ */ jsx(Clock, { className: "size-4 shrink-0", "aria-hidden": "true" })
         }
       ) }),
@@ -200,6 +269,7 @@ function TimePicker({
         {
           value: value || "09:00",
           minuteStep,
+          use12h,
           onChange: (next) => {
             setValue(next);
             setText(next);

package/dist/{chunk-QWLXN6CT.js → chunk-VSUYVT2Q.js}

@@ -14,13 +14,13 @@ var toggleVariants = cva("ui-toggle", {
     },
     size: {
       sm: "ui-toggle-sm",
-      default: "ui-toggle-default-size",
+      md: "ui-toggle-default-size",
       lg: "ui-toggle-lg"
     }
   },
   defaultVariants: {
     variant: "default",
-    size: "default"
+    size: "md"
   }
 });
 var Toggle = React2.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -131,6 +131,7 @@ function PasswordStrength({
         "data-state": checks[rule] ? "passed" : "failed",
         children: [
           checks[rule] ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: checks[rule] ? "Passed: " : "Failed: " }),
           /* @__PURE__ */ jsx("span", { children: labelForRule(rule) })
         ]
       },

package/dist/{chunk-4R7QL3MW.js → chunk-X2VY4MOW.js}

@@ -1,4 +1,4 @@
-import { formatDate, translateCurrent } from './chunk-FXFJF4YA.js';
+import { formatDate, getSyncedLocale, translateCurrent } from './chunk-6CSBMMZS.js';
 
 // src/lib/format.ts
 function formatDateTime(value, options) {
@@ -10,38 +10,23 @@ function formatDateLong(value, options) {
 function formatRelative(value, options) {
   return formatDate(value, { ...options, kind: "relative" });
 }
-function formatBytes(n) {
+function formatBytes(n, locale = getSyncedLocale()) {
   if (n == null) return "\u2014";
-  if (n < 1024) return `${n} B`;
-  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
-  if (n < 1024 * 1024 * 1024) return `${(n / 1024 / 1024).toFixed(1)} MB`;
-  return `${(n / 1024 / 1024 / 1024).toFixed(2)} GB`;
+  const num = (digits, scaled) => new Intl.NumberFormat(locale, {
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits
+  }).format(scaled);
+  if (n < 1024) return `${num(0, n)} B`;
+  if (n < 1024 * 1024) return `${num(1, n / 1024)} KB`;
+  if (n < 1024 * 1024 * 1024) return `${num(1, n / 1024 / 1024)} MB`;
+  return `${num(2, n / 1024 / 1024 / 1024)} GB`;
 }
-function formatCurrency(amountMinor, currency) {
+function formatCurrency(amountMinor, currency, locale = getSyncedLocale()) {
   if (amountMinor == null || !currency) return "\u2014";
-  const zeroDecimal = [
-    "JPY",
-    "VND",
-    "KRW",
-    "CLP",
-    "ISK",
-    "BIF",
-    "DJF",
-    "GNF",
-    "KMF",
-    "RWF",
-    "XAF",
-    "XOF",
-    "XPF"
-  ];
-  const minorUnitDigits = zeroDecimal.includes(currency.toUpperCase()) ? 0 : 2;
+  const formatter = new Intl.NumberFormat(locale, { style: "currency", currency });
+  const minorUnitDigits = formatter.resolvedOptions().maximumFractionDigits ?? 2;
   const major = amountMinor / Math.pow(10, minorUnitDigits);
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency,
-    minimumFractionDigits: minorUnitDigits,
-    maximumFractionDigits: minorUnitDigits
-  }).format(major);
+  return formatter.format(major);
 }
 function shortId(id) {
   if (!id) return "\u2014";

package/dist/{chunk-ETLAI3QU.js → chunk-Z46J47FY.js}

@@ -1,68 +1,14 @@
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem } from './chunk-CAEL2ZD2.js';
 import { Input } from './chunk-VOHTRR5X.js';
-import { Inline } from './chunk-TILFZBTE.js';
+import { useTranslation } from './chunk-HTG5VHU7.js';
 import { cn } from './chunk-U7N2A7A3.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React2 from 'react';
 import { EyeOff, Eye, Minus, Star, X } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { OTPInput, OTPInputContext } from 'input-otp';
 
-function CountryOptionLabel({
-  country,
-  showCode = false,
-  className
-}) {
-  const code = country.value ?? country.code ?? "";
-  const text = country.nativeName != null && country.nativeName !== "" ? `${country.name} (${country.nativeName})` : country.name;
-  return /* @__PURE__ */ jsxs(Inline, { gap: "xs", className: cn("items-center", className), children: [
-    country.flagSvgPath != null && country.flagSvgPath !== "" && /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: country.flagSvgPath,
-        alt: "",
-        className: "h-3 w-5 shrink-0 rounded-sm object-cover",
-        "aria-hidden": "true"
-      }
-    ),
-    /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
-      text,
-      showCode && code !== "" && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-        " \xB7 ",
-        code
-      ] })
-    ] })
-  ] });
-}
-function CountrySelect({
-  id,
-  name,
-  options,
-  defaultValue,
-  required = false,
-  allowEmpty = false,
-  emptyLabel = "\u2014",
-  placeholder,
-  invalid = false
-}) {
-  const emptyValue = "0";
-  const resolvedDefault = defaultValue && defaultValue !== "" ? defaultValue : emptyValue;
-  return /* @__PURE__ */ jsxs(
-    Select,
-    {
-      name,
-      defaultValue: allowEmpty ? resolvedDefault : defaultValue ?? options[0]?.value,
-      children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { id, className: "w-full", "aria-invalid": invalid, "aria-required": required, children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
-        /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsxs(SelectGroup, { children: [
-          allowEmpty && /* @__PURE__ */ jsx(SelectItem, { value: emptyValue, children: emptyLabel }),
-          options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value ?? "", children: /* @__PURE__ */ jsx(CountryOptionLabel, { country: option }) }, option.value))
-        ] }) })
-      ]
-    }
-  );
-}
 var PasswordInput = React2.forwardRef(
   ({ className, ...props }, ref) => {
+    const { t } = useTranslation();
     const [visible, setVisible] = React2.useState(false);
     return /* @__PURE__ */ jsxs("div", { className: "ui-password-input", "data-slot": "password-input", children: [
       /* @__PURE__ */ jsx(
@@ -80,8 +26,8 @@ var PasswordInput = React2.forwardRef(
           type: "button",
           className: "ui-password-input-toggle",
           onClick: () => setVisible((v) => !v),
-          "aria-label": visible ? "\u30D1\u30B9\u30EF\u30FC\u30C9\u3092\u96A0\u3059" : "\u30D1\u30B9\u30EF\u30FC\u30C9\u3092\u8868\u793A",
-          tabIndex: -1,
+          "aria-label": visible ? t("ui.passwordInput.hide") : t("ui.passwordInput.show"),
+          "aria-pressed": visible,
           children: visible ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true" })
         }
       )
@@ -145,6 +91,7 @@ var Rating = React2.forwardRef(
     className,
     ...rest
   }, ref) => {
+    const { t } = useTranslation();
     const [internal, setInternal] = React2.useState(defaultValue);
     const current = value ?? internal;
     const [hover, setHover] = React2.useState(null);
@@ -155,6 +102,31 @@ var Rating = React2.forwardRef(
       if (value === void 0) setInternal(next);
       onValueChange?.(next);
     };
+    const focusableStar = current > 0 ? current : 1;
+    const onKeyDown = (e, star) => {
+      if (!interactive) return;
+      let next = null;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          next = Math.min(max, star + 1);
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = Math.max(1, star - 1);
+          break;
+        case "Home":
+          next = 1;
+          break;
+        case "End":
+          next = max;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      select(next);
+    };
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -162,7 +134,7 @@ var Rating = React2.forwardRef(
         role: "radiogroup",
         "data-slot": "rating",
         className: cn("ui-rating", className),
-        "aria-label": rest["aria-label"] ?? "\u8A55\u4FA1",
+        "aria-label": rest["aria-label"] ?? t("ui.rating.ariaLabel"),
         children: [
           Array.from({ length: max }, (_, i) => i + 1).map((star) => /* @__PURE__ */ jsx(
             "button",
@@ -170,13 +142,14 @@ var Rating = React2.forwardRef(
               type: "button",
               role: "radio",
               "aria-checked": current === star,
-              "aria-label": String(star),
+              "aria-label": t("ui.rating.starLabel", { star, max }),
               disabled: disabled || readOnly,
-              tabIndex: interactive ? 0 : -1,
+              tabIndex: interactive && star === focusableStar ? 0 : -1,
               className: cn("ui-rating-star", star <= display && "ui-rating-star-filled"),
               onMouseEnter: () => interactive && setHover(star),
               onMouseLeave: () => setHover(null),
               onClick: () => select(star),
+              onKeyDown: (e) => onKeyDown(e, star),
               children: /* @__PURE__ */ jsx(Star, { "aria-hidden": "true" })
             },
             star
@@ -189,7 +162,18 @@ var Rating = React2.forwardRef(
 );
 Rating.displayName = "Rating";
 var TagInput = React2.forwardRef(
-  ({ value, defaultValue = [], onValueChange, placeholder, disabled, name, className }, ref) => {
+  ({
+    value,
+    defaultValue = [],
+    onValueChange,
+    placeholder,
+    disabled,
+    name,
+    className,
+    id,
+    "aria-label": ariaLabel
+  }, ref) => {
+    const { t } = useTranslation();
     const [internal, setInternal] = React2.useState(defaultValue);
     const tags = value ?? internal;
     const [draft, setDraft] = React2.useState("");
@@ -218,28 +202,39 @@ var TagInput = React2.forwardRef(
         "data-slot": "tag-input",
         className: cn("ui-tag-input", disabled && "ui-tag-input-disabled", className),
         children: [
-          tags.map((tag, i) => /* @__PURE__ */ jsxs("span", { className: "ui-tag-input-chip", "data-slot": "tag-input-chip", children: [
-            tag,
-            !disabled ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "ui-tag-input-remove",
-                "aria-label": `${tag} \u3092\u524A\u9664`,
-                onClick: () => removeAt(i),
-                children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-              }
-            ) : null
-          ] }, tag)),
+          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(
+            "li",
+            {
+              role: "listitem",
+              className: "ui-tag-input-chip",
+              "data-slot": "tag-input-chip",
+              children: [
+                tag,
+                !disabled ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "ui-tag-input-remove",
+                    "aria-label": t("ui.tagInput.removeTag", { tag }),
+                    onClick: () => removeAt(i),
+                    children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+                  }
+                ) : null
+              ]
+            },
+            tag
+          )) }) : null,
           /* @__PURE__ */ jsx(
             "input",
             {
               ref,
+              id,
               type: "text",
               className: "ui-tag-input-field",
               value: draft,
               placeholder: tags.length === 0 ? placeholder : void 0,
               disabled,
+              "aria-label": ariaLabel ?? t("ui.tagInput.inputLabel"),
               onChange: (e) => setDraft(e.target.value),
               onKeyDown,
               onBlur: () => {
@@ -250,6 +245,7 @@ var TagInput = React2.forwardRef(
               }
             }
           ),
+          /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", "data-slot": "tag-input-status", children: t("ui.tagInput.tagCount", { count: tags.length }) }),
           name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: tags.join(",") }) : null
         ]
       }
@@ -258,4 +254,4 @@ var TagInput = React2.forwardRef(
 );
 TagInput.displayName = "TagInput";
 
-export { CountryOptionLabel, CountrySelect, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, PasswordInput, Rating, TagInput };
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, PasswordInput, Rating, TagInput };