@lt-three/love3 0.1.0 → 0.1.1

package/dist/web/layout/alert-modal.js

@@ -6,16 +6,16 @@ import { TriangleAlertIcon } from "lucide-react";
 
 //#region src/web/layout/alert-modal.tsx
 /**
-* 確認のための小さなモーダル（× を持たない）。
+* A small modal for confirmation (it has no ×).
 *
-* overlay 面・p-5・幅 400（ビューポートに収まる）。見出し（16/24 semibold）と本文（13/20・muted）、右寄せの操作（gap-2・Button の既定サイズ）。
-* `danger` では見出しの左に小さな state-error のアイコンが付き、主操作が destructive-solid の塗りになる。
-* 枠もリングも付けない（影だけで浮く。`DialogContent` の流儀）。開閉状態は呼び出し側が持つ（制御専用）。
+* Overlay surface, p-5, width 400 (fitted to the viewport). A heading (16/24 semibold) and body text (13/20, muted), with right-aligned actions (gap-2, the default Button size).
+* With `danger`, a small state-error icon is added to the left of the heading and the primary action gets the destructive-solid fill.
+* No border and no ring (it floats on the shadow alone, like `DialogContent`). The caller holds the open state (controlled only).
 *
-* 表示中は `data-modal-open` を持つので、浮いている常駐 UI を CSS で隠せる。
+* While shown it carries `data-modal-open`, so floating persistent UI can be hidden with CSS.
 *
-* 開いたときの初期フォーカスは、キーボードで開いたときだけ最初の操作に置き、それ以外はモーダルの本体に置く
-* （マウスで開いて最初のボタンに枠が出ないように。`useModalOpenAutoFocus`）。
+* The initial focus on open goes to the first action only when it was opened by keyboard, and otherwise to the modal body
+* (so that no ring appears on the first button when opened with the mouse; `useModalOpenAutoFocus`).
 */
 function AlertModal({ open, onOpenChange, tone = "default", title, description, actions, dismissible = true, "data-testid": testId }) {
 	const danger = tone === "danger";

package/dist/web/layout/card.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 //#region src/web/layout/card.d.ts
 export type CardProps = {
   title?: React.ReactNode;
-  /** 題を見出し（`<h2>`〜`<h6>`）にする。見出しの階層に入れたいときに渡す（省略は `<div>`）。native も同じ名前。 */
+  /** Make the title a heading (`<h2>` to `<h6>`). Pass it when you want it in the heading hierarchy (omitted means `<div>`). Native has the same name. */
   headingLevel?: CardHeadingLevel;
   description?: React.ReactNode;
   action?: React.ReactNode;

package/dist/web/layout/information.d.ts

@@ -15,21 +15,21 @@ type InformationProps = {
   fields: InformationField[][];
   wrap?: "no-wrap" | "pre-wrap";
   /**
-   * 列を並べる内側の要素（flex コンテナ）のクラス。`className` は外側のコンテナ（`@container`）に付くので、
-   * 列の間隔（`gap-*`）や並び（`flex-*`）を変えるときはこちらを使う。
+   * The class of the inner element (a flex container) that lays out the columns. `className` goes on the outer container (`@container`),
+   * so use this one when changing the column spacing (`gap-*`) or direction (`flex-*`).
    */
   columnsClassName?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
 /**
- * ラベルと値の組を並べる、読み取り専用の詳細表示。
+ * A read-only detail view that lays out pairs of a label and a value.
  *
- * **親が幅を持つこと前提。** 列を縦に積むか横に並べるかは、外側の要素のコンテナクエリ（`@container`・`@xl:`）で決める。
- * コンテナクエリは外側の幅を中身から測れない（inline-size の containment）ので、**幅が中身で決まる親**
- * （`flex` の子・`inline-block`・`inline-flex`・table セル・`grid-cols-[auto_…]`）の中に置くと、幅 0 に潰れる。
- * そういう親の中では、`className` に具体的な幅（`w-96` など。`flex` の子なら `flex-1` でもよい）を与える。
- * `w-full` は効かない（親の幅が中身で決まるので、割合の基準が無い）。
+ * **It assumes the parent has a width.** Whether columns stack vertically or sit side by side is decided by the outer element's container query (`@container`, `@xl:`).
+ * A container query cannot measure the outer width from the content (inline-size containment), so inside a **parent whose width is determined by its content**
+ * (a `flex` child, `inline-block`, `inline-flex`, a table cell, `grid-cols-[auto_…]`) it collapses to width 0.
+ * In such parents, give `className` a concrete width (such as `w-96`; `flex-1` also works for a `flex` child).
+ * `w-full` does not work (the parent's width is decided by the content, so there is no basis for the percentage).
  *
- * `className` と残りの属性は**外側のコンテナ**に付く（移植元では flex コンテナそのものだった）。
+ * `className` and the remaining attributes go on the **outer container**.
  */
 export declare const Information: ({ displayType, highlighted, fields, className, columnsClassName, wrap, ...remain }: InformationProps) => React.JSX.Element;
 //#endregion

package/dist/web/layout/information.js

@@ -5,15 +5,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/web/layout/information.tsx
 /**
-* ラベルと値の組を並べる、読み取り専用の詳細表示。
+* A read-only detail view that lays out pairs of a label and a value.
 *
-* **親が幅を持つこと前提。** 列を縦に積むか横に並べるかは、外側の要素のコンテナクエリ（`@container`・`@xl:`）で決める。
-* コンテナクエリは外側の幅を中身から測れない（inline-size の containment）ので、**幅が中身で決まる親**
-* （`flex` の子・`inline-block`・`inline-flex`・table セル・`grid-cols-[auto_…]`）の中に置くと、幅 0 に潰れる。
-* そういう親の中では、`className` に具体的な幅（`w-96` など。`flex` の子なら `flex-1` でもよい）を与える。
-* `w-full` は効かない（親の幅が中身で決まるので、割合の基準が無い）。
+* **It assumes the parent has a width.** Whether columns stack vertically or sit side by side is decided by the outer element's container query (`@container`, `@xl:`).
+* A container query cannot measure the outer width from the content (inline-size containment), so inside a **parent whose width is determined by its content**
+* (a `flex` child, `inline-block`, `inline-flex`, a table cell, `grid-cols-[auto_…]`) it collapses to width 0.
+* In such parents, give `className` a concrete width (such as `w-96`; `flex-1` also works for a `flex` child).
+* `w-full` does not work (the parent's width is decided by the content, so there is no basis for the percentage).
 *
-* `className` と残りの属性は**外側のコンテナ**に付く（移植元では flex コンテナそのものだった）。
+* `className` and the remaining attributes go on the **outer container**.
 */
 const Information = ({ displayType = "fitContent", highlighted, fields, className, columnsClassName, wrap = "pre-wrap", ...remain }) => {
 	return /* @__PURE__ */ jsx("div", {

package/dist/web/layout/modal.d.ts

@@ -8,7 +8,7 @@ type Props = {
   content: React.ReactNode;
   footer: React.ReactNode;
   size?: "md" | "flexible";
-  /** 閉じるボタンの読み上げ名（既定は「閉じる」） */
+  /** Accessible name of the close button (defaults to the Japanese "Close" label) */
   closeLabel?: string;
 };
 export declare function Modal({ title, description, dialog, content, footer, size, closeLabel }: Props): React.JSX.Element;

package/dist/web/layout/page-frame.d.ts

@@ -2,36 +2,36 @@ import React from "react";
 //#region src/web/layout/page-frame.d.ts
 export type PageFrameNavItem = {
   label: string;
-  /** 現在の画面。`aria-current="page"` になる。 */
+  /** The current screen. It gets `aria-current="page"`. */
   current?: boolean;
-  /** あればリンク（`<a>`）、無ければボタン（`<button>`。押すと `onSelect`）。 */
+  /** A link (`<a>`) when present, otherwise a button (`<button>`; pressing it calls `onSelect`). */
   href?: string;
   onSelect?: () => void;
 };
 export type PageFrameProps = {
-  /** ヘッダ左端のブランド（文字でも要素でも）。 */
+  /** The brand at the left end of the header (text or an element). */
   brand: React.ReactNode;
   nav?: readonly PageFrameNavItem[];
-  /** ナビの読み上げ名（ランドマークが複数あるとき区別する）。 */
+  /** Accessible name of the nav (to tell landmarks apart when there are several). */
   navLabel?: string;
-  /** ヘッダ右端（テーマ切替・ユーザーなど）。 */
+  /** The right end of the header (theme toggle, user and so on). */
   trailing?: React.ReactNode;
   children: React.ReactNode;
-  /** フッタの中身。未指定なら年を持たない著作権表記（年は使う側が決める）。 */
+  /** The content of the footer. When omitted, a copyright notice with no year (the year is decided by the consumer). */
   footer?: React.ReactNode;
-  /** ヘッダ・本文・フッタの中身の最大幅（Tailwind のクラス）。 */
+  /** The maximum width of the header, body and footer content (a Tailwind class). */
   maxWidthClassName?: string;
   className?: string;
 };
 /**
- * ページの骨組み。`header`（banner）・`nav`・`main`・`footer`（contentinfo）を持ち、ランドマークが揃う。
- * 画面ごとに手で組むと、`main` を忘れる・ナビに名前が無い・狭い幅で崩れる、が起きるので、ここに 1 つだけ置く。
+ * The skeleton of a page. It has `header` (banner), `nav`, `main` and `footer` (contentinfo), so the landmarks are complete.
+ * Assembling each screen by hand leads to forgetting `main`, a nav with no name, and breaking at narrow widths, so it is placed here once.
  *
- * - ヘッダの DOM の順（ブランド・ナビ・右端）が、見た目の順（狭い幅は 1 行ずつ）と同じ。`order` で見た目だけを入れ替えると
- *   Tab の順が見た目とずれる
- * - 本文は `flex-1`（短い画面でもフッタが下に付く）。`main` の `id` は `main`（使う側がスキップリンクを置くときの飛び先。
- *   PageFrame 自身はスキップリンクを置かない。`main` ランドマークがあるので、axe の bypass（ブロックのスキップ）は満たされる）
- * - 色は `border-border` / `text-muted-foreground` だけ。ダークはトークンが切り替える
+ * - The DOM order of the header (brand, nav, right end) matches the visual order (one row at a time at narrow widths). Swapping only the look with `order`
+ *   would make the Tab order differ from the visual order
+ * - The body is `flex-1` (the footer sticks to the bottom even on a short screen). The `id` of `main` is `main` (the target a consumer can jump to when placing a skip link.
+ *   PageFrame itself places no skip link. The `main` landmark satisfies axe's bypass (skipping blocks))
+ * - Colours are only `border-border` / `text-muted-foreground`. The tokens switch them for dark
  */
 export declare function PageFrame({ brand, nav, navLabel, trailing, children, footer, maxWidthClassName, className }: PageFrameProps): React.JSX.Element;
 //#endregion

package/dist/web/layout/page-frame.js

@@ -3,14 +3,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/web/layout/page-frame.tsx
 /**
-* ページの骨組み。`header`（banner）・`nav`・`main`・`footer`（contentinfo）を持ち、ランドマークが揃う。
-* 画面ごとに手で組むと、`main` を忘れる・ナビに名前が無い・狭い幅で崩れる、が起きるので、ここに 1 つだけ置く。
+* The skeleton of a page. It has `header` (banner), `nav`, `main` and `footer` (contentinfo), so the landmarks are complete.
+* Assembling each screen by hand leads to forgetting `main`, a nav with no name, and breaking at narrow widths, so it is placed here once.
 *
-* - ヘッダの DOM の順（ブランド・ナビ・右端）が、見た目の順（狭い幅は 1 行ずつ）と同じ。`order` で見た目だけを入れ替えると
-*   Tab の順が見た目とずれる
-* - 本文は `flex-1`（短い画面でもフッタが下に付く）。`main` の `id` は `main`（使う側がスキップリンクを置くときの飛び先。
-*   PageFrame 自身はスキップリンクを置かない。`main` ランドマークがあるので、axe の bypass（ブロックのスキップ）は満たされる）
-* - 色は `border-border` / `text-muted-foreground` だけ。ダークはトークンが切り替える
+* - The DOM order of the header (brand, nav, right end) matches the visual order (one row at a time at narrow widths). Swapping only the look with `order`
+*   would make the Tab order differ from the visual order
+* - The body is `flex-1` (the footer sticks to the bottom even on a short screen). The `id` of `main` is `main` (the target a consumer can jump to when placing a skip link.
+*   PageFrame itself places no skip link. The `main` landmark satisfies axe's bypass (skipping blocks))
+* - Colours are only `border-border` / `text-muted-foreground`. The tokens switch them for dark
 */
 function PageFrame({ brand, nav = [], navLabel = "メイン", trailing, children, footer, maxWidthClassName = "max-w-[1280px]", className }) {
 	return /* @__PURE__ */ jsxs("div", {

package/dist/web/layout/scroll-area.d.ts

@@ -2,7 +2,7 @@ import { ScrollArea as ScrollArea$1 } from "../base/scroll-area.js";
 import { ComponentProps } from "react";
 //#region src/web/layout/scroll-area.d.ts
 type ScrollAreaProps = ComponentProps<typeof ScrollArea$1> & {
-  /** 水平スクロールバーを表示する */
+  /** Show the horizontal scrollbar */
   horizontal?: boolean;
 };
 export declare function ScrollArea({ horizontal, children, ...props }: ScrollAreaProps): import("react").JSX.Element;

package/dist/web/layout/sheet.d.ts

@@ -7,13 +7,13 @@ type BaseProps = {
   description?: string;
   content: React.ReactNode;
   footer?: React.ReactNode;
-  /** シートの表示方向 */
+  /** The direction the sheet appears from */
   side?: ComponentProps<typeof SheetContent>["side"];
-  /** SheetContent に渡すクラス名 */
+  /** Class name passed to SheetContent */
   contentClassName?: string;
-  /** SheetTitle に渡すクラス名 */
+  /** Class name passed to SheetTitle */
   titleClassName?: string;
-  /** 閉じるボタンの読み上げ名（既定は「閉じる」） */
+  /** Accessible name of the close button (defaults to the Japanese "Close" label) */
   closeLabel?: string;
 };
 type DialogModeProps = BaseProps & {

package/dist/web/layout/simple-table.d.ts

@@ -2,46 +2,46 @@ import { TableRow } from "../base/table.js";
 import React from "react";
 //#region src/web/layout/simple-table.d.ts
 /**
- * 宣言的な薄い罫線のデータテーブル。columns / data を渡すだけで使える。
- * ヘッダは frame の淡い面、行罫線は 1px の極薄の線（base/table を踏襲）。
- * 数値列は mono + tabular-nums + 右寄せにする。
+ * A declarative data table with thin rules. Just pass columns / data.
+ * The header is a pale frame surface and the row rules are an ultra-thin 1px line (following base/table).
+ * Numeric columns are mono + tabular-nums + right-aligned.
  *
- * TanStack ベースの DataTable（ページネーション/選択つき・layout/table）とは別物で、
- * ソートやページングが不要な短い表（ダッシュボードのサマリ等）向けの軽量版。
+ * It is a different thing from a TanStack-based DataTable (with pagination and selection),
+ * and is a lightweight version for short tables that need no sorting or paging (dashboard summaries and the like).
  */
 export type SimpleColumn<T> = {
-  /** 列キー（行内で一意）。 */
+  /** Column key (unique within a row). */
   key: string;
   header: React.ReactNode;
-  /** セル / ヘッダの揃え（既定 left）。 */
+  /** Alignment of the cell / header (default left). */
   align?: "left" | "right" | "center";
-  /** 等幅 + tabular-nums（数値・ID 向け）。 */
+  /** Monospace + tabular-nums (for numbers and IDs). */
   mono?: boolean;
-  /** 強調（font-medium）。 */
+  /** Emphasis (font-medium). */
   strong?: boolean;
-  /** セルの追加クラス。 */
+  /** Extra class for the cell. */
   cellClassName?: string;
-  /** ヘッダの追加クラス。 */
+  /** Extra class for the header. */
   headClassName?: string;
-  /** セルの描画。未指定時は row[key] を表示する。 */
+  /** Cell rendering. When not given, row[key] is shown. */
   render?: (row: T) => React.ReactNode;
   /**
-   * この幅（Tailwind のブレークポイント）より狭いときは列ごと隠す。狭い幅で重要でない列（ID・補足など）を畳んで、
-   * 横スクロールを避けるために使う。未指定なら常に出す。
+   * Hide the column when narrower than this width (a Tailwind breakpoint). Used to fold away columns that are not important at narrow widths (IDs, supplements and so on)
+   * and avoid horizontal scrolling. When not given, the column is always shown.
    */
   hideBelow?: "sm" | "md" | "lg";
 };
 export declare function SimpleTable<T extends object>({ columns, data, getRowKey, onRowClick, getRowProps, className, wrapperClassName }: {
   columns: SimpleColumn<T>[];
   data: T[];
-  /** 行キーの導出。未指定時は index を使う。 */
+  /** Derives the row key. When not given, the index is used. */
   getRowKey?: (row: T, index: number) => string;
   /**
-   * 行クリック（任意）。渡すと行にフォーカスでき（tabIndex=0）、Enter・Space でも押せる。
-   * 行の中のボタンやリンクのキー操作は奪わない（行そのものにフォーカスがあるときだけ反応する）。
+   * Row click (optional). When passed, a row can take focus (tabIndex=0) and can also be pressed with Enter and Space.
+   * It does not steal key handling from buttons or links inside the row (it reacts only when the row itself has focus).
    */
   onRowClick?: (row: T) => void;
-  /** 行ごとの追加属性（data-* / className 等）。行全体クリックや e2e セレクタ付与に使う。 */
+  /** Extra attributes per row (data-* / className and so on). Used for whole-row clicks and for attaching e2e selectors. */
   getRowProps?: (row: T, index: number) => Omit<React.ComponentPropsWithoutRef<typeof TableRow>, "key">;
   className?: string;
   wrapperClassName?: string;

package/dist/web/layout/simple-table.js

@@ -4,7 +4,7 @@ import { isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/web/layout/simple-table.tsx
-/** Tailwind はクラス名を静的に拾うので、文字列を組み立てず表にしておく。 */
+/** Tailwind picks up class names statically, so they are kept in a table rather than assembled from strings. */
 const hideBelowClass = {
 	sm: "hidden sm:table-cell",
 	md: "hidden md:table-cell",
@@ -15,7 +15,7 @@ const alignClass = {
 	right: "text-right",
 	center: "text-center"
 };
-/** `render` が無い列の既定の描画。行の `key` の値が、文字・数値・要素のときだけ表示する。 */
+/** The default rendering of a column with no `render`. It shows the row's `key` value only when it is a string, a number or an element. */
 function cellValue(row, key) {
 	const value = Reflect.get(row, key);
 	if (typeof value === "string" || typeof value === "number" || isValidElement(value)) return value;

package/dist/web/layout/tabs.d.ts

@@ -11,14 +11,14 @@ export type TabsProps = {
   tabs: TabType;
   full?: boolean;
   defaultValue?: string;
-  /** 制御モード: 外部から値を管理する場合に指定 */
+  /** Controlled mode: specify when the value is managed from outside */
   value?: string;
   onValueChange?: (value: string) => void;
-  /** TabsList と同じ高さで横並びに配置する右側のスロット（ツールバー的に利用する） */
+  /** A slot on the right, laid out side by side at the same height as TabsList (used like a toolbar) */
   trailing?: React.ReactNode;
   /**
-   * DEV-E2E: 各トリガーに `${testIdPrefix}-${value}` の data-testid を付与する。
-   * 省略時は data-testid を出力しない。
+   * DEV-E2E: adds a data-testid of `${testIdPrefix}-${value}` to each trigger.
+   * When omitted, no data-testid is output.
    */
   testIdPrefix?: string;
 };

package/dist/web/layout/titled-modal.d.ts

@@ -4,29 +4,28 @@ type TitledModalProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   title: React$1.ReactNode;
-  /** 本文の先頭に置く説明。支援技術向けの description も兼ねる。 */
+  /** A description placed at the top of the body. It also serves as the description for assistive technology. */
   description?: React$1.ReactNode;
   children?: React$1.ReactNode;
-  /** 右寄せで並べる操作。あると上に 1px の区切り線が入る。 */
+  /** Actions laid out right-aligned. When present, a 1px divider is added above them. */
   footer?: React$1.ReactNode;
-  /** 閉じるボタンの読み上げ名。 */
+  /** Accessible name of the close button. */
   closeLabel?: string;
-  /** × の中身（省略時は lucide の X）。 */
+  /** The content of the × (lucide's X when omitted). */
   closeIcon?: React$1.ReactNode;
   className?: string;
   "data-testid"?: string;
 };
 /**
- * 見出しと × を持つ大きめのモーダル。
+ * A larger modal with a heading and a ×.
  *
- * overlay 面（枠もリングも無し・影だけ）・幅 560。見出し（16/24 semibold）と × の下に 1px の薄い区切り線、本文は p-5、
- * フッターがあれば上に区切り線を引いて右寄せで操作を並べる。開閉状態は呼び出し側が持つ（制御専用）。
+ * Overlay surface (no border or ring, shadow only), width 560. A thin 1px divider under the heading (16/24 semibold) and ×, the body is p-5,
+ * and if there is a footer, a divider is drawn above it and the actions are laid out right-aligned. The caller holds the open state (controlled only).
  *
- * 表示中は `data-modal-open` を持つので、浮いている常駐 UI を CSS で隠せる
- * （`body:has([data-modal-open])`）。
+ * While shown it carries `data-modal-open`, so floating persistent UI can be hidden with CSS
  *
- * 開いたときの初期フォーカスは、キーボードで開いたときだけ最初の操作に置き、それ以外はモーダルの本体に置く
- * （マウスで開いて最初のボタンに枠が出ないように。`useModalOpenAutoFocus`）。
+ * The initial focus on open goes to the first action only when it was opened by keyboard, and otherwise to the modal body
+ * (so that no ring appears on the first button when opened with the mouse; `useModalOpenAutoFocus`).
  */
 export declare function TitledModal({ open, onOpenChange, title, description, children, footer, closeLabel, closeIcon, className, "data-testid": testId }: TitledModalProps): React$1.JSX.Element;
 //#endregion

package/dist/web/layout/titled-modal.js

@@ -1,5 +1,5 @@
-import { CLOSE_LABEL } from "../lib/labels.js";
 import { cn } from "../lib/utils.js";
+import { CLOSE_LABEL } from "../lib/labels.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from "../base/dialog.js";
 import { useModalOpenAutoFocus } from "../lib/modal-open-focus.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -7,16 +7,15 @@ import { XIcon } from "lucide-react";
 
 //#region src/web/layout/titled-modal.tsx
 /**
-* 見出しと × を持つ大きめのモーダル。
+* A larger modal with a heading and a ×.
 *
-* overlay 面（枠もリングも無し・影だけ）・幅 560。見出し（16/24 semibold）と × の下に 1px の薄い区切り線、本文は p-5、
-* フッターがあれば上に区切り線を引いて右寄せで操作を並べる。開閉状態は呼び出し側が持つ（制御専用）。
+* Overlay surface (no border or ring, shadow only), width 560. A thin 1px divider under the heading (16/24 semibold) and ×, the body is p-5,
+* and if there is a footer, a divider is drawn above it and the actions are laid out right-aligned. The caller holds the open state (controlled only).
 *
-* 表示中は `data-modal-open` を持つので、浮いている常駐 UI を CSS で隠せる
-* （`body:has([data-modal-open])`）。
+* While shown it carries `data-modal-open`, so floating persistent UI can be hidden with CSS
 *
-* 開いたときの初期フォーカスは、キーボードで開いたときだけ最初の操作に置き、それ以外はモーダルの本体に置く
-* （マウスで開いて最初のボタンに枠が出ないように。`useModalOpenAutoFocus`）。
+* The initial focus on open goes to the first action only when it was opened by keyboard, and otherwise to the modal body
+* (so that no ring appears on the first button when opened with the mouse; `useModalOpenAutoFocus`).
 */
 function TitledModal({ open, onOpenChange, title, description, children, footer, closeLabel = CLOSE_LABEL, closeIcon, className, "data-testid": testId }) {
 	const { contentRef, onOpenAutoFocus } = useModalOpenAutoFocus();

package/dist/web/lib/css-vars.d.ts

@@ -1,14 +1,14 @@
 import { CSSProperties } from "react";
 //#region src/web/lib/css-vars.d.ts
-/** CSS カスタムプロパティ（`--foo`）だけを持つ style の部品。 */
+/** A style part that holds only CSS custom properties (`--foo`). */
 export type CssVars = Record<`--${string}`, string | number>;
 /**
- * CSS カスタムプロパティを `style` に渡せる形にする。
+ * Turns CSS custom properties into something that can be passed to `style`.
  *
- * `CSSProperties` は `--foo` を知らないので、オブジェクトリテラルを直に渡すと tsc が
- * 余剰プロパティとして落とす。`as CSSProperties` で黙らせると型の検査が消えるため、
- * テンプレートリテラル型のキーで受けて `CSSProperties` として返す。
- * `overrides` が後勝ち（呼び出し側から渡された `style` が既定の変数を上書きできる）。
+ * `CSSProperties` does not know about `--foo`, so passing an object literal directly makes tsc
+ * reject it as an excess property. Silencing it with `as CSSProperties` removes the type check, so
+ * it is received with template-literal-type keys and returned as `CSSProperties`.
+ * `overrides` wins (a `style` passed by the caller can override the default variables).
  */
 export declare function cssVars(vars: CssVars, overrides?: CSSProperties): CSSProperties;
 //#endregion

package/dist/web/lib/css-vars.js

@@ -1,11 +1,11 @@
 //#region src/web/lib/css-vars.ts
 /**
-* CSS カスタムプロパティを `style` に渡せる形にする。
+* Turns CSS custom properties into something that can be passed to `style`.
 *
-* `CSSProperties` は `--foo` を知らないので、オブジェクトリテラルを直に渡すと tsc が
-* 余剰プロパティとして落とす。`as CSSProperties` で黙らせると型の検査が消えるため、
-* テンプレートリテラル型のキーで受けて `CSSProperties` として返す。
-* `overrides` が後勝ち（呼び出し側から渡された `style` が既定の変数を上書きできる）。
+* `CSSProperties` does not know about `--foo`, so passing an object literal directly makes tsc
+* reject it as an excess property. Silencing it with `as CSSProperties` removes the type check, so
+* it is received with template-literal-type keys and returned as `CSSProperties`.
+* `overrides` wins (a `style` passed by the caller can override the default variables).
 */
 function cssVars(vars, overrides) {
 	return {

package/dist/web/lib/dialog.d.ts

@@ -1,13 +1,13 @@
 //#region src/web/lib/dialog.d.ts
 /**
- * `Modal` / `Sheet` が開閉の状態を受け取る形（構造的な型）。
- * `useState` で自前に作ってもよいし、アプリ側の未保存ガードつきの hook の戻り値をそのまま渡してもよい
- * （love3 は i18n や form に依存しないので、hook そのものは持たない）。
+ * The shape (a structural type) in which `Modal` / `Sheet` receive the open/close state.
+ * You can build it yourself with `useState`, or pass the return value of an app-side hook with an unsaved-changes guard as is
+ * (love3 depends on neither i18n nor forms, so it does not include the hook itself).
  */
 export type DialogController = {
   isOpen: boolean;
   close: () => void;
-  /** 外側のクリックで閉じてよいか決める。確認を挟みたいときはここで処理する（既定は `close` と同じ扱いにする） */
+  /** Decides whether a click outside may close it. When you want to insert a confirmation, handle it here (by default it is treated the same as `close`) */
   onOutsideClick: () => void;
 };
 //#endregion

package/dist/web/lib/labels.d.ts

@@ -1,27 +1,27 @@
 //#region src/web/lib/labels.d.ts
-/** 閉じるボタン（Dialog・Sheet・TitledModal） */
+/** Close button (Dialog, Sheet, TitledModal) */
 export declare const CLOSE_LABEL = "閉じる";
-/** ヘルプのトリガー（atom/help・base/form の FormLabel） */
+/** Help trigger (atom/help, FormLabel of base/form) */
 export declare const HELP_LABEL = "ヘルプ";
-/** 読み込み中の表示（Spinner） */
+/** Loading indicator (Spinner) */
 export declare const LOADING_LABEL = "読み込み中";
-/** ページネーションの nav と、その中のボタン */
+/** The pagination nav and the buttons inside it */
 export declare const PAGINATION_LABEL = "ページネーション";
 export declare const PREVIOUS_PAGE_LABEL = "前のページへ";
 export declare const NEXT_PAGE_LABEL = "次のページへ";
-/** 途中が省略されているページ番号 */
+/** Page numbers that are omitted in the middle */
 export declare const MORE_PAGES_LABEL = "他のページ";
-/** パンくずリストの nav と、省略されている途中の階層 */
+/** The breadcrumb nav and the omitted levels in the middle */
 export declare const BREADCRUMB_LABEL = "パンくずリスト";
 export declare const MORE_LEVELS_LABEL = "他の階層";
-/** 折れ線の表の代替（読み上げ用に隠す表）の列名と、名前の既定 */
+/** Column names of the line chart's table alternative (a table hidden for screen readers), and the default name */
 export declare const LINE_CHART_TABLE_SERIES_LABEL = "系列";
 export declare const LINE_CHART_TABLE_POINT_LABEL = "見出し";
 export declare const LINE_CHART_TABLE_VALUE_LABEL = "値";
 export declare const LINE_CHART_DEFAULT_LABEL = "折れ線チャート";
 export declare const LINE_CHART_SINGLE_SERIES_LABEL = "値";
 export declare const LINE_CHART_EMPTY_TEXT = "データがありません";
-/** 読み上げ用の表に添える注記（数でない点を除いたとき・点が多くて抜き出したとき） */
+/** Notes added to the table for screen readers (when non-numeric points were dropped, or when many points were sampled) */
 export declare const lineChartTableDropped: (count: number) => string;
 export declare const lineChartTableThinned: (shown: number, total: number) => string;
 //#endregion

package/dist/web/lib/labels.js

@@ -1,27 +1,27 @@
 //#region src/web/lib/labels.ts
-/** 閉じるボタン（Dialog・Sheet・TitledModal） */
+/** Close button (Dialog, Sheet, TitledModal) */
 const CLOSE_LABEL = "閉じる";
-/** ヘルプのトリガー（atom/help・base/form の FormLabel） */
+/** Help trigger (atom/help, FormLabel of base/form) */
 const HELP_LABEL = "ヘルプ";
-/** 読み込み中の表示（Spinner） */
+/** Loading indicator (Spinner) */
 const LOADING_LABEL = "読み込み中";
-/** ページネーションの nav と、その中のボタン */
+/** The pagination nav and the buttons inside it */
 const PAGINATION_LABEL = "ページネーション";
 const PREVIOUS_PAGE_LABEL = "前のページへ";
 const NEXT_PAGE_LABEL = "次のページへ";
-/** 途中が省略されているページ番号 */
+/** Page numbers that are omitted in the middle */
 const MORE_PAGES_LABEL = "他のページ";
-/** パンくずリストの nav と、省略されている途中の階層 */
+/** The breadcrumb nav and the omitted levels in the middle */
 const BREADCRUMB_LABEL = "パンくずリスト";
 const MORE_LEVELS_LABEL = "他の階層";
-/** 折れ線の表の代替（読み上げ用に隠す表）の列名と、名前の既定 */
+/** Column names of the line chart's table alternative (a table hidden for screen readers), and the default name */
 const LINE_CHART_TABLE_SERIES_LABEL = "系列";
 const LINE_CHART_TABLE_POINT_LABEL = "見出し";
 const LINE_CHART_TABLE_VALUE_LABEL = "値";
 const LINE_CHART_DEFAULT_LABEL = "折れ線チャート";
 const LINE_CHART_SINGLE_SERIES_LABEL = "値";
 const LINE_CHART_EMPTY_TEXT = "データがありません";
-/** 読み上げ用の表に添える注記（数でない点を除いたとき・点が多くて抜き出したとき） */
+/** Notes added to the table for screen readers (when non-numeric points were dropped, or when many points were sampled) */
 const lineChartTableDropped = (count) => `数でない値の点 ${count.toString()} 件は除いています。`;
 const lineChartTableThinned = (shown, total) => `点が多いので、${total.toString()} 点のうち ${shown.toString()} 点を等間隔に抜き出しています。`;
 

package/dist/web/lib/modal-open-focus.d.ts

@@ -1,14 +1,14 @@
 //#region src/web/lib/modal-open-focus.d.ts
 /**
- * モーダルを開いたときの初期フォーカスの置き先を、開いた手段で変える。
+ * Changes where the initial focus goes when a modal opens, depending on how it was opened.
  *
- * - キーボードで開いた: Radix の既定どおり最初の操作（ボタン）に置く。フォーカスの枠も出る
- * - ポインターで開いた / 操作なしで開いた（起動時に出るもの等）: モーダルの本体に置く。
- *   最初のボタンに枠が出ない（WebKit はスクリプトによるフォーカスにも `:focus-visible` を当てるため、
- *   ボタンに置くと枠が出てしまう）。フォーカスはモーダルの中にあるので、Tab で最初の操作へ進め、
- *   Esc で閉じられ、支援技術はダイアログとして読み上げる
+ * - Opened by keyboard: put it on the first action (a button), as Radix does by default. The focus ring also shows
+ * - Opened by pointer / opened with no interaction (something shown at start-up, etc.): put it on the modal body.
+ *   No ring appears on the first button (WebKit applies `:focus-visible` even to script-driven focus,
+ *   so putting it on the button would show a ring). Focus is inside the modal, so Tab moves to the first action,
+ *   Esc closes it, and assistive technology announces it as a dialog
  *
- * 返す `contentRef` と `onOpenAutoFocus` を DialogContent に渡す。本体には `outline-none` を付けること。
+ * Pass the returned `contentRef` and `onOpenAutoFocus` to DialogContent. Give the body `outline-none`.
  */
 export declare function useModalOpenAutoFocus(): {
   contentRef: import("react").RefObject<HTMLDivElement | null>;

package/dist/web/lib/modal-open-focus.js

@@ -4,8 +4,8 @@ import { useCallback, useRef } from "react";
 let lastModality = "unknown";
 let listening = false;
 /**
-* 直前の操作がキーボードかポインターかを覚える（document に 1 度だけ張る）。
-* capture で拾うので、途中で stopPropagation されても取りこぼさない。
+* Remembers whether the previous action was by keyboard or by pointer (attached to the document only once).
+* It listens in the capture phase, so it is not missed even if stopPropagation is called along the way.
 */
 function listenModality() {
 	if (listening || typeof document === "undefined") return;
@@ -17,15 +17,15 @@ function listenModality() {
 	document.addEventListener("pointerdown", () => lastModality = "pointer", true);
 }
 /**
-* モーダルを開いたときの初期フォーカスの置き先を、開いた手段で変える。
+* Changes where the initial focus goes when a modal opens, depending on how it was opened.
 *
-* - キーボードで開いた: Radix の既定どおり最初の操作（ボタン）に置く。フォーカスの枠も出る
-* - ポインターで開いた / 操作なしで開いた（起動時に出るもの等）: モーダルの本体に置く。
-*   最初のボタンに枠が出ない（WebKit はスクリプトによるフォーカスにも `:focus-visible` を当てるため、
-*   ボタンに置くと枠が出てしまう）。フォーカスはモーダルの中にあるので、Tab で最初の操作へ進め、
-*   Esc で閉じられ、支援技術はダイアログとして読み上げる
+* - Opened by keyboard: put it on the first action (a button), as Radix does by default. The focus ring also shows
+* - Opened by pointer / opened with no interaction (something shown at start-up, etc.): put it on the modal body.
+*   No ring appears on the first button (WebKit applies `:focus-visible` even to script-driven focus,
+*   so putting it on the button would show a ring). Focus is inside the modal, so Tab moves to the first action,
+*   Esc closes it, and assistive technology announces it as a dialog
 *
-* 返す `contentRef` と `onOpenAutoFocus` を DialogContent に渡す。本体には `outline-none` を付けること。
+* Pass the returned `contentRef` and `onOpenAutoFocus` to DialogContent. Give the body `outline-none`.
 */
 function useModalOpenAutoFocus() {
 	listenModality();

package/dist/web/lib/restore-focus.d.ts

@@ -1,9 +1,9 @@
 //#region src/web/lib/restore-focus.d.ts
 /**
- * Radix の Dialog は、閉じたあとのフォーカスを `DialogTrigger` にしか戻さない。love3 の Modal・Sheet・AlertModal は `open` を状態で持つ
- * （トリガーが無い）ので、そのままだとフォーカスが `body` に落ちる（キーボード・支援技術の利用者が、開いた場所を見失う）。
- * 開いた時点でフォーカスのあった要素を覚えて、閉じたときにそこへ戻す。`DialogTrigger` で開いた場合など、覚えた要素が無いとき・
- * 呼び出し側が `preventDefault` したときは、何もしない（Radix の既定の動きに任せる）。
+ * Radix's Dialog returns focus after closing only to `DialogTrigger`. love3's Modal, Sheet and AlertModal keep `open` in state
+ * (there is no trigger), so as is, focus falls to `body` (keyboard and assistive-technology users lose track of where they opened it).
+ * It remembers the element that had focus when the dialog opened and returns focus there on close. When there is no remembered element, such as when it was opened with `DialogTrigger`, or
+ * when the caller called `preventDefault`, it does nothing (it leaves it to Radix's default behaviour).
  */
 export declare function useRestoreFocus(onOpenAutoFocus: ((event: Event) => void) | undefined, onCloseAutoFocus: ((event: Event) => void) | undefined): {
   onOpenAutoFocus: (event: Event) => void;