@lt-three/love3 0.1.0 → 0.1.1

package/dist/web/lib/restore-focus.js

@@ -2,10 +2,10 @@ import { useRef } from "react";
 
 //#region src/web/lib/restore-focus.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).
 */
 function useRestoreFocus(onOpenAutoFocus, onCloseAutoFocus) {
 	const previous = useRef(null);

package/dist/web/styles.css

@@ -1,44 +1,44 @@
 /*
- * love3 の web 用スタイル（`@lt-three/love3/web/styles.css`）。アプリの CSS の入口で 1 度だけ import する。
+ * Web styles for love3 (`@lt-three/love3/web/styles.css`). Import it once, at the entry of your app's CSS.
  *
  *   @import "@lt-three/love3/web/styles.css";
  *
- * 中身は、Tailwind v4 の本体・フォント・アニメーション・トークン（`@lt-three/love3/styles.css`）・ベーススタイル。
- * トークンの値は `src/tokens/definition.ts`（SSOT）が持つ。ここにはトークンを書かない。
- * `.theme-light` は生トークン（`bg-paper` / `text-ink-900` など）だけを明るくする。
- * セマンティックなクラス（`bg-background` / `bg-primary` など）は明るくならないので、部品では使わない
- * （公開ページを常にライトにしたいときは、生トークンのクラスを使うか、使う側で変数を再宣言する）。
+ * It contains Tailwind v4 itself, the fonts, the animations, the tokens (`@lt-three/love3/styles.css`) and the base styles.
+ * The token values live in `src/tokens/definition.ts` (the SSOT). No tokens are written here.
+ * `.theme-light` only lightens the raw tokens (such as `bg-paper` / `text-ink-900`).
+ * Semantic classes (such as `bg-background` / `bg-primary`) do not get lighter, so components do not use them
+ * (to keep a public page always light, use raw-token classes or redeclare the variables on the consuming side).
  */
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/preflight.css" layer(base);
 @import "tailwindcss/utilities.css";
 
-/* 欧文は Geist を self-host（Latin のみで軽量）。和文は游ゴシックの OS 同梱フォントを使い、未搭載なら sans-serif に落ちる */
+/* Latin text uses self-hosted Geist (Latin only, so it is light). Japanese text uses the Yu Gothic fonts that ship with the OS, and falls back to sans-serif where they are not installed */
 @import "@fontsource-variable/geist";
-/* 数字・ID・コード・データテーブルは Geist Mono */
+/* Numbers, IDs, code and data tables use Geist Mono */
 @import "@fontsource-variable/geist-mono";
 
 @import "tw-animate-css";
 
-/* トークン本体（@theme・ライト・ダーク）。生成物なので、値を変えるときは definition.ts を直す */
+/* The token definitions (@theme, light, dark). It is generated, so to change a value edit definition.ts */
 @import "@lt-three/love3/styles.css";
 
 /*
- * love3 の部品が使う Tailwind のクラスを拾う（部品は *.tsx。lib の *.ts にクラスは無い）。
- * node_modules（workspace の symlink 越し）は自動検出の対象外なので、ここで明示する。
- * `@source` のパスは、この CSS ファイルの位置が基準。
- * 公開物（`dist/`）では部品が `*.js` になるので、`tsx` と `js` の両方を拾う（同じファイルを src と dist の両方に置く）。
- * 使う側のアプリ自身のソースは、バンドラのプロジェクトルート（vite の root、postcss なら cwd）を基準にした
- * 自動検出に任せる（この CSS の位置は関係しない）。
+ * Picks up the Tailwind classes used by love3's components (components are *.tsx; the *.ts files in lib have no classes).
+ * node_modules (through a workspace symlink) is outside automatic detection, so it is stated explicitly here.
+ * The `@source` path is relative to the location of this CSS file.
+ * In the published build (`dist/`) the components are `*.js`, so both `tsx` and `js` are picked up (the same file is placed in both src and dist).
+ * The consuming app's own sources are left to automatic detection based on the bundler's project root
+ * (the Vite root, or the cwd for PostCSS); the location of this CSS file does not matter.
  */
 @source "./**/*.{tsx,js}";
 @source not "./**/*.test.tsx";
 
 /*
- * 通知（sonner）— overlay 面 + 1px の薄い枠 + 淡い影（shadow-md）。角丸は surface の段。
- * state は左罫線ではなく、アイコンの色で表す（文字は通常色のまま）。
- * sonner はスタイルを実行時に注入する（既定の `[data-sonner-toast][data-styled=true]` と同じ詳細度だと、読み込み順で負ける）ので、
- * `[data-sonner-toaster]` と `[data-styled="true"]` を付けて詳細度を 1 つ上げて確実に勝つ（!important は使わない）。
+ * Notifications (sonner): overlay surface + thin 1px border + soft shadow (shadow-md). Corner radius is the surface step.
+ * The state is shown by the icon colour, not by a left border (the text stays in the normal colour).
+ * sonner injects its styles at runtime (at the same specificity as the default `[data-sonner-toast][data-styled=true]`, load order would make us lose), so
+ * `[data-sonner-toaster]` and `[data-styled="true"]` are added to raise the specificity by one step and win reliably (!important is not used).
  */
 [data-sonner-toaster] [data-sonner-toast][data-styled="true"] {
   box-shadow: var(--shadow-md);
@@ -71,11 +71,11 @@
   }
   body {
     @apply bg-background text-foreground;
-    /* 日本語は文節（bunsetsu）境界で改行し、単語の途中で折り返さない */
+    /* Japanese breaks lines at bunsetsu (phrase) boundaries and does not wrap in the middle of a word */
     word-break: auto-phrase;
   }
 
-  /* 見出しも本文と同じ Geist。フラッシュレフト、わずかに字間を詰める。 */
+  /* Headings use the same Geist as the body. Flush left, with slightly tightened letter spacing. */
   h1,
   h2,
   h3,
@@ -85,7 +85,7 @@
     font-family: var(--font-sans, "Geist Variable", sans-serif);
     font-weight: 700;
     letter-spacing: -0.01em;
-    /* 見出しも文節境界で改行。意図した改行は文言側（i18n の \n）で制御する */
+    /* Headings also break at phrase boundaries. Intentional line breaks are controlled in the copy itself (a \n in the text) */
     word-break: auto-phrase;
   }
   h1 {
@@ -114,7 +114,7 @@
     color: var(--muted-foreground);
   }
 
-  /* 数字 / ID / コード / データはタブラー（等幅数字） */
+  /* Numbers / IDs / code / data use tabular (monospaced) figures */
   code,
   kbd,
   samp,
@@ -123,23 +123,23 @@
     font-variant-numeric: tabular-nums;
   }
 
-  /* テキスト選択はインディゴの淡い面。文字色は変えない */
+  /* Text selection is a pale indigo surface. The text colour is unchanged */
   ::selection {
     background: color-mix(in srgb, var(--action) 30%, transparent);
   }
 }
 
 /*
- * テキストリンクの状態。
- *   default: 文字のみ
- *   hover:   1px の下線
- *   active:  文字の塗りを抜いて、外側に 1px の縁取り + 下線（押している間）
- * 色は currentColor に追従させるので、壁紙の上に載る白文字など、テキストの色を変えても同じ作法で効く。
- * hover は即時に切り替える（transition なし）。
+ * States of a text link.
+ *   default: text only
+ *   hover:   a 1px underline
+ *   active:  knock out the text fill and draw a 1px outline on the outside + an underline (while pressed)
+ * The colour follows currentColor, so it works the same way when the text colour changes, such as white text on top of a wallpaper.
+ * hover switches instantly (no transition).
  *
- * 「外側だけの縁取り」は -webkit-text-stroke（輪郭の中心に引かれる）では作れないため、
- * SVG フィルター #text-outside-stroke（文字を 1px 膨らませて元の文字を抜く）で作る。
- * フィルターの定義は使う側のアプリが DOM に 1 つ置く。
+ * An "outside-only outline" cannot be made with -webkit-text-stroke (it is drawn centred on the glyph edge), so
+ * it is made with the SVG filter #text-outside-stroke (grow the text by 1px and knock out the original text).
+ * The consuming app places the filter definition in the DOM once.
  */
 @utility text-outline {
   filter: url(#text-outside-stroke);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lt-three/love3",
-  "version": "0.1.0",
-  "description": "<3（Less Than Three）共通のデザインシステム。web・React Native（NativeWind）・トークンを 1 パッケージで配信する",
+  "version": "0.1.1",
+  "description": "Design system for <3 (Less Than Three): web and React Native (NativeWind) components plus design tokens, in a single package.",
   "keywords": [
     "design-system",
     "nativewind",