@iyulab/flex-table 0.36.0 → 0.37.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [0.37.0] - 2026-09-20
+
+### Fixed
+
+- **The column menu and the cell context menu stayed in English on a translated page.** 0.36.0 moved
+  the table's chrome text into a locale namespace, but the menus added in 0.35.0 were not part of
+  that move: their items, and the accessible name of the column-menu button, were written inline. On
+  a Korean page the same button therefore announced one language in its `title` and another in its
+  `aria-label`, and a screen-reader user heard English item names in the middle of a translated
+  grid — with no way to correct it, since the strings had no keys to register over. Every one of
+  those strings now goes through the namespace, including the cell context menu, the two menu
+  accessible names and the import drop target. Three keys name a column and carry a `{header}`
+  placeholder, so word order stays the translator's choice instead of being fixed by concatenation.
+  The built-in English wording is unchanged.
+
+### Documentation
+
+- **The README no longer lists every message key by hand.** That paragraph had gone stale once
+  already, and a hand-copied list is the only part of this documentation that can: the exported
+  `FlexTableMessageKey` cannot. It now names the groups and points at the type, which your editor
+  completes and the compiler checks.
+
+### Added
+
+- **The boolean filter's two options are translatable** (`booleanTrue` / `booleanFalse`). They read
+  `True` and `False` in every locale before this; the check and cross glyphs stay in the template,
+  since a symbol means the same thing in every language.
+- **`t()` and the exported namespace now interpolate.** `FlexTableMessageKey` gains the menu keys
+  above; registering a partial table still merges, so existing registrations keep working untouched.
+
 ## [0.36.0] - 2026-09-17
 
 ### Added

package/README.md

@@ -436,14 +436,25 @@ flexTableLocale.register('ja', {
 flexTableLocale.register('en', { replaceAll: 'Replace everything' });  // reword one string
 ```
 
-Keys cover the column header and menu (`showHiddenColumns`, `columnMenu`, `cellActions`,
-`noColumnsDefined`), cell comments (`addCommentPlaceholder`, `cancel`, `save`), the filter panel
-(`clear`, `blankCells`, `emptyOnly`, `nonEmptyOnly`, `blankAll`, `all`, `contains`, `startsWith`,
-`endsWith`, `wildcard`, `searchPlaceholder`, `valuePlaceholder`, `fromPlaceholder`,
-`toPlaceholder`) and find-and-replace (`findPlaceholder`, `findPrevious`, `findNext`, `matchCase`,
-`wholeCell`, `closeFind`, `replaceWithPlaceholder`, `replace`, `replaceAll`). `FlexTableMessageKey`
-is exported, so a missing or misspelled key is a type error rather than a string that silently falls
-back to its own name.
+The keys are grouped by where they appear: the column header and its menu, the items inside that
+menu, the cell context menu, cell comments, the filter panel, find-and-replace, and the import drop
+target. **`FlexTableMessageKey` is the list** — it is exported, so your editor completes it and a
+misspelled key is a type error rather than a string that silently falls back to its own name.
+
+> This paragraph used to enumerate every key by hand. It went stale once, and a hand-copied list is
+> the only thing here that can: the type cannot. If you want the full set, hover `FlexTableMessageKey`
+> or open `src/locale.ts`.
+
+Three of those keys name a column, and word order differs between languages, so they carry a
+`{header}` placeholder rather than being assembled by concatenation:
+
+```ts
+flexTableLocale.register('ja', {
+  columnMenuFor: '{header} の列メニュー',  // the column menu button's accessible name
+  columnMenuRegion: '{header} 列',                    // the open menu's accessible name
+  showColumn: '{header} を表示',                  // "show this hidden neighbour again"
+});
+```
 
 The filter operators `AND` and `OR` are not in the table, and neither are the glyphs that stand in
 for icons. They read the same in every language, and translating them makes them harder to

package/dist/{flex-table-D5FjaSJV.js → flex-table-BAQbidin.js}

@@ -1018,7 +1018,8 @@ var b = new Map(Object.entries(/* #__PURE__ */ Object.assign({
 		alertNotice: "إشعار",
 		alertMessage: "رسالة",
 		remove: "إزالة",
-		closeTab: "إغلاق علامة التبويب"
+		closeTab: "إغلاق علامة التبويب",
+		breadcrumb: "مسار التنقل"
 	},
 	"../assets/locales/de.json": {
 		valueMissing: "Dieses Feld ist erforderlich",
@@ -1058,7 +1059,8 @@ var b = new Map(Object.entries(/* #__PURE__ */ Object.assign({
 		alertNotice: "Hinweis",
 		alertMessage: "Nachricht",
 		remove: "Entfernen",
-		closeTab: "Tab schließen"
+		closeTab: "Tab schließen",
+		breadcrumb: "Navigationspfad"
 	},
 	"../assets/locales/en.json": {
 		valueMissing: "This field is required",
@@ -1098,7 +1100,8 @@ var b = new Map(Object.entries(/* #__PURE__ */ Object.assign({
 		alertNotice: "Notice",
 		alertMessage: "Message",
 		remove: "Remove",
-		closeTab: "Close tab"
+		closeTab: "Close tab",
+		breadcrumb: "Breadcrumb"
 	},
 	"../assets/locales/es.json": {
 		valueMissing: "Este campo es obligatorio",
@@ -1138,7 +1141,8 @@ var b = new Map(Object.entries(/* #__PURE__ */ Object.assign({
 		alertNotice: "Aviso",
 		alertMessage: "Mensaje",
 		remove: "Quitar",
-		closeTab: "Cerrar pestaña"
+		closeTab: "Cerrar pestaña",
+		breadcrumb: "Ruta de navegación"
 	},
 	"../assets/locales/fr.json": {
 		valueMissing: "Ce champ est obligatoire",
@@ -1178,7 +1182,8 @@ var b = new Map(Object.entries(/* #__PURE__ */ Object.assign({
 		alertNotice: "Avis",
 		alertMessage: "Message",
 		remove: "Supprimer",
-		closeTab: "Fermer l'onglet"
+		closeTab: "Fermer l'onglet",
+		breadcrumb: "Fil d'Ariane"
 	},
 	"../assets/locales/id.json": {
 		valueMissing: "Kolom ini wajib diisi",
@@ -1218,7 +1223,8 @@ var b = new Map(Object.entries(/* #__PURE__ */ Object.assign({
 		alertNotice: "Pemberitahuan",
 		alertMessage: "Pesan",
 		remove: "Hapus",
-		closeTab: "Tutup tab"
+		closeTab: "Tutup tab",
+		breadcrumb: "Navigasi remah roti"
 	},
 	"../assets/locales/ja.json": {
 		valueMissing: "この項目は必須です",
@@ -1258,7 +1264,8 @@ var b = new Map(Object.entries(/* #__PURE__ */ Object.assign({
 		alertNotice: "通知",
 		alertMessage: "メッセージ",
 		remove: "削除",
-		closeTab: "タブを閉じる"
+		closeTab: "タブを閉じる",
+		breadcrumb: "パンくずリスト"
 	},
 	"../assets/locales/ko.json": {
 		valueMissing: "필수 항목입니다",
@@ -1298,7 +1305,8 @@ var b = new Map(Object.entries(/* #__PURE__ */ Object.assign({
 		alertNotice: "알림",
 		alertMessage: "메시지",
 		remove: "제거",
-		closeTab: "탭 닫기"
+		closeTab: "탭 닫기",
+		breadcrumb: "탐색 경로"
 	},
 	"../assets/locales/pt-BR.json": {
 		valueMissing: "Este campo é obrigatório",
@@ -1338,7 +1346,8 @@ var b = new Map(Object.entries(/* #__PURE__ */ Object.assign({
 		alertNotice: "Nota",
 		alertMessage: "Mensagem",
 		remove: "Remover",
-		closeTab: "Fechar aba"
+		closeTab: "Fechar aba",
+		breadcrumb: "Trilha de navegação"
 	},
 	"../assets/locales/ru.json": {
 		valueMissing: "Это поле обязательно для заполнения",
@@ -1378,7 +1387,8 @@ var b = new Map(Object.entries(/* #__PURE__ */ Object.assign({
 		alertNotice: "Уведомление",
 		alertMessage: "Сообщение",
 		remove: "Удалить",
-		closeTab: "Закрыть вкладку"
+		closeTab: "Закрыть вкладку",
+		breadcrumb: "Навигационная цепочка"
 	},
 	"../assets/locales/th.json": {
 		valueMissing: "จำเป็นต้องกรอกข้อมูลนี้",
@@ -1418,7 +1428,8 @@ var b = new Map(Object.entries(/* #__PURE__ */ Object.assign({
 		alertNotice: "ประกาศ",
 		alertMessage: "ข้อความ",
 		remove: "ลบ",
-		closeTab: "ปิดแท็บ"
+		closeTab: "ปิดแท็บ",
+		breadcrumb: "เส้นทางการนำทาง"
 	},
 	"../assets/locales/vi.json": {
 		valueMissing: "Trường này là bắt buộc",
@@ -1458,7 +1469,8 @@ var b = new Map(Object.entries(/* #__PURE__ */ Object.assign({
 		alertNotice: "Lưu ý",
 		alertMessage: "Thông báo",
 		remove: "Xóa",
-		closeTab: "Đóng tab"
+		closeTab: "Đóng tab",
+		breadcrumb: "Đường dẫn điều hướng"
 	},
 	"../assets/locales/zh-CN.json": {
 		valueMissing: "此项为必填项",
@@ -1498,7 +1510,8 @@ var b = new Map(Object.entries(/* #__PURE__ */ Object.assign({
 		alertNotice: "提示",
 		alertMessage: "消息",
 		remove: "移除",
-		closeTab: "关闭标签页"
+		closeTab: "关闭标签页",
+		breadcrumb: "面包屑导航"
 	},
 	"../assets/locales/zh-TW.json": {
 		valueMissing: "此欄位為必填",
@@ -1538,7 +1551,8 @@ var b = new Map(Object.entries(/* #__PURE__ */ Object.assign({
 		alertNotice: "提示",
 		alertMessage: "訊息",
 		remove: "移除",
-		closeTab: "關閉分頁"
+		closeTab: "關閉分頁",
+		breadcrumb: "麵包屑導覽"
 	}
 })).map(([e, t]) => [(e.split("/").pop()?.replace(".json", "") || "").toLowerCase(), t])), x = /* @__PURE__ */ new Map();
 function S() {
@@ -1632,7 +1646,29 @@ O.register("en", {
 	closeFind: "Close (Escape)",
 	replaceWithPlaceholder: "Replace with...",
 	replace: "Replace",
-	replaceAll: "Replace all"
+	replaceAll: "Replace all",
+	sortAscending: "Sort ascending",
+	sortDescending: "Sort descending",
+	filter: "Filter…",
+	clearFilter: "Clear filter",
+	hideColumn: "Hide column",
+	showColumn: "Show: {header}",
+	autoFitWidth: "Auto-fit width",
+	wider: "Wider",
+	narrower: "Narrower",
+	columnMenuFor: "Column menu: {header}",
+	columnMenuRegion: "{header} column",
+	copy: "Copy",
+	insertRowAbove: "Insert row above",
+	insertRowBelow: "Insert row below",
+	deleteRow: "Delete row",
+	filterByThisValue: "Filter by this value",
+	addComment: "Add Comment",
+	editComment: "Edit Comment",
+	deleteComment: "Delete Comment",
+	booleanTrue: "True",
+	booleanFalse: "False",
+	dropFileToImport: "Drop file to import (.xlsx / .csv)"
 }), O.register("ko", {
 	showHiddenColumns: "숨긴 열 보기",
 	columnMenu: "열 메뉴",
@@ -1663,9 +1699,31 @@ O.register("en", {
 	closeFind: "닫기 (Escape)",
 	replaceWithPlaceholder: "바꿀 내용...",
 	replace: "바꾸기",
-	replaceAll: "모두 바꾸기"
+	replaceAll: "모두 바꾸기",
+	sortAscending: "오름차순 정렬",
+	sortDescending: "내림차순 정렬",
+	filter: "필터…",
+	clearFilter: "필터 지우기",
+	hideColumn: "열 숨기기",
+	showColumn: "{header} 보기",
+	autoFitWidth: "너비 자동 맞춤",
+	wider: "넓게",
+	narrower: "좁게",
+	columnMenuFor: "{header} 열 메뉴",
+	columnMenuRegion: "{header} 열",
+	copy: "복사",
+	insertRowAbove: "위에 행 삽입",
+	insertRowBelow: "아래에 행 삽입",
+	deleteRow: "행 삭제",
+	filterByThisValue: "이 값으로 필터",
+	addComment: "메모 추가",
+	editComment: "메모 편집",
+	deleteComment: "메모 삭제",
+	booleanTrue: "참",
+	booleanFalse: "거짓",
+	dropFileToImport: "가져올 파일을 놓으세요 (.xlsx / .csv)"
 });
-var k = (e) => O.text(e);
+var k = (e, t) => O.text(e, t);
 //#endregion
 //#region src/core/selection.ts
 function ee(e) {
@@ -3565,7 +3623,7 @@ var q = {
         <button class="ft-column-menu-btn ${s ? "ft-filter-active" : ""}"
           type="button"
           title=${k("columnMenu")}
-          aria-label=${`Column menu: ${e.header}`}
+          aria-label=${k("columnMenuFor", { header: e.header })}
           aria-haspopup="menu"
           aria-expanded=${this._headerMenu?.key === e.key ? "true" : "false"}
           @mousedown=${(e) => e.stopPropagation()}
@@ -3684,26 +3742,26 @@ var q = {
 		}}>${t}</button>
     `;
 		return i`
-      <div class="ft-header-menu" role="menu" aria-label=${`${o.header} column`}
+      <div class="ft-header-menu" role="menu" aria-label=${k("columnMenuRegion", { header: o.header })}
         style="position: fixed; left: ${t}px; top: ${n}px; z-index: 200;"
         @mousedown=${(e) => e.stopPropagation()}
         @keydown=${(e) => this._onHeaderMenuKeydown(e)}>
         ${o.sortable === !1 ? a : i`
-          ${c("sort-asc", "Sort ascending", () => this._applySortFromMenu(e, "asc"))}
-          ${c("sort-desc", "Sort descending", () => this._applySortFromMenu(e, "desc"))}
+          ${c("sort-asc", k("sortAscending"), () => this._applySortFromMenu(e, "asc"))}
+          ${c("sort-desc", k("sortDescending"), () => this._applySortFromMenu(e, "desc"))}
           <div class="ft-header-menu-separator" role="separator"></div>
         `}
         ${this.showFilters ? i`
-          ${c("filter", "Filter…", () => this._openFilterFromMenu(e))}
-          ${s ? c("clear-filter", "Clear filter", () => this._clearColumnFilter(e)) : a}
+          ${c("filter", k("filter"), () => this._openFilterFromMenu(e))}
+          ${s ? c("clear-filter", k("clearFilter"), () => this._clearColumnFilter(e)) : a}
           <div class="ft-header-menu-separator" role="separator"></div>
         ` : a}
-        ${c("hide", "Hide column", () => this._setColumnHidden(e, !0))}
-        ${r.map((e) => c("show", i`Show: ${e.header}`, () => this._setColumnHidden(e.key, !1)))}
+        ${c("hide", k("hideColumn"), () => this._setColumnHidden(e, !0))}
+        ${r.map((e) => c("show", k("showColumn", { header: e.header }), () => this._setColumnHidden(e.key, !1)))}
         <div class="ft-header-menu-separator" role="separator"></div>
-        ${c("autofit", "Auto-fit width", () => this._autoFitColumn(e))}
-        ${c("wider", "Wider", () => this._resizeColumnBy(e, X), !0)}
-        ${c("narrower", "Narrower", () => this._resizeColumnBy(e, -20), !0)}
+        ${c("autofit", k("autoFitWidth"), () => this._autoFitColumn(e))}
+        ${c("wider", k("wider"), () => this._resizeColumnBy(e, X), !0)}
+        ${c("narrower", k("narrower"), () => this._resizeColumnBy(e, -20), !0)}
       </div>
     `;
 	}
@@ -3725,22 +3783,22 @@ var q = {
         style="position: fixed; left: ${n}px; top: ${r}px; z-index: 200;"
         @mousedown=${(e) => e.stopPropagation()}
         @keydown=${(e) => this._onMenuKeydown(e, ".ft-body-context-menu", l)}>
-        ${d("Copy", () => this._handleCopy(!1))}
+        ${d(k("copy"), () => this._handleCopy(!1))}
         ${f}
-        ${d("Insert row above", () => this.addRow(void 0, t))}
-        ${d("Insert row below", () => this.addRow(void 0, t + 1))}
-        ${d("Delete row", () => this.deleteRows([t]), !0)}
+        ${d(k("insertRowAbove"), () => this.addRow(void 0, t))}
+        ${d(k("insertRowBelow"), () => this.addRow(void 0, t + 1))}
+        ${d(k("deleteRow"), () => this.deleteRows([t]), !0)}
         ${f}
-        ${d("Hide column", () => this._setColumnHidden(o.key, !0))}
+        ${d(k("hideColumn"), () => this._setColumnHidden(o.key, !0))}
         ${f}
-        ${d("Sort ascending ↑", () => this._applySortFromMenu(o.key, "asc"))}
-        ${d("Sort descending ↓", () => this._applySortFromMenu(o.key, "desc"))}
+        ${d(`${k("sortAscending")} ↑`, () => this._applySortFromMenu(o.key, "asc"))}
+        ${d(`${k("sortDescending")} ↓`, () => this._applySortFromMenu(o.key, "desc"))}
         ${f}
-        ${d("Filter by this value", () => this.setFilter(o.key, (e) => e === s))}
-        ${c ? d("Clear filter", () => this.removeFilter(o.key)) : a}
+        ${d(k("filterByThisValue"), () => this.setFilter(o.key, (e) => e === s))}
+        ${c ? d(k("clearFilter"), () => this.removeFilter(o.key)) : a}
         ${f}
-        ${d(u ? "Edit Comment" : "Add Comment", () => this._openCommentPopup(t, o.key, n, r))}
-        ${u ? d("Delete Comment", () => this.setComment(t, o.key, null), !0) : a}
+        ${d(k(u ? "editComment" : "addComment"), () => this._openCommentPopup(t, o.key, n, r))}
+        ${u ? d(k("deleteComment"), () => this.setComment(t, o.key, null), !0) : a}
       </div>
     `;
 	}
@@ -4086,8 +4144,8 @@ var q = {
 			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
 		}}>
         <option value="all">${k("all")}</option>
-        <option value="true">\u2714 True</option>
-        <option value="false">\u2718 False</option>
+        <option value="true">\u2714 ${k("booleanTrue")}</option>
+        <option value="false">\u2718 ${k("booleanFalse")}</option>
       </select>
       ${this._renderEmptyFilterRow(e.key)}
     `;
@@ -4538,7 +4596,7 @@ var q = {
     `;
 	}
 	render() {
-		let e = this.visibleColumns, t = this.importEnabled && this._isDragOver ? i`<div class="ft-import-overlay">Drop file to import (.xlsx / .csv)</div>` : a, n = this.loading ? i`<div class="ft-loading-overlay"></div>` : a;
+		let e = this.visibleColumns, t = this.importEnabled && this._isDragOver ? i`<div class="ft-import-overlay">${k("dropFileToImport")}</div>` : a, n = this.loading ? i`<div class="ft-loading-overlay"></div>` : a;
 		if (e.length === 0) return i`${t}${n}<div class="ft-empty">${k("noColumnsDefined")}</div>`;
 		let r = this.headerHeight, o = this._totalRowWidth, { start: s, end: c } = this.visibleColRange, l = [];
 		for (let t = 0; t < e.length; t++) (e[t].pinned === "left" || e[t].pinned === "right") && (t < s || t >= c) && l.push(t);

package/dist/flex-table.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "./flex-table-D5FjaSJV.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "./flex-table-BAQbidin.js";
 export { a as FlexTable, t as RowSelectionState, i as UndoStack, n as exportData, e as flexTableLocale, r as renderCell };

package/dist/locale.d.ts

@@ -25,8 +25,8 @@
  *   (아이콘 자리의 글리프)는 어느 로케일에서도 같은 것을 뜻하며, 번역하면 오히려 읽히지 않는다.
  *   그 판단은 «번역하지 않기로 한 것»이지 «빠뜨린 것»이 아니다.
  */
-export type FlexTableMessageKey = 'showHiddenColumns' | 'columnMenu' | 'cellActions' | 'noColumnsDefined' | 'addCommentPlaceholder' | 'cancel' | 'save' | 'clear' | 'blankCells' | 'emptyOnly' | 'nonEmptyOnly' | 'blankAll' | 'all' | 'contains' | 'startsWith' | 'endsWith' | 'wildcard' | 'searchPlaceholder' | 'valuePlaceholder' | 'fromPlaceholder' | 'toPlaceholder' | 'findPlaceholder' | 'findPrevious' | 'findNext' | 'matchCase' | 'wholeCell' | 'closeFind' | 'replaceWithPlaceholder' | 'replace' | 'replaceAll';
+export type FlexTableMessageKey = 'showHiddenColumns' | 'columnMenu' | 'cellActions' | 'noColumnsDefined' | 'addCommentPlaceholder' | 'cancel' | 'save' | 'clear' | 'blankCells' | 'emptyOnly' | 'nonEmptyOnly' | 'blankAll' | 'all' | 'contains' | 'startsWith' | 'endsWith' | 'wildcard' | 'searchPlaceholder' | 'valuePlaceholder' | 'fromPlaceholder' | 'toPlaceholder' | 'findPlaceholder' | 'findPrevious' | 'findNext' | 'matchCase' | 'wholeCell' | 'closeFind' | 'replaceWithPlaceholder' | 'replace' | 'replaceAll' | 'sortAscending' | 'sortDescending' | 'filter' | 'clearFilter' | 'hideColumn' | 'showColumn' | 'autoFitWidth' | 'wider' | 'narrower' | 'columnMenuFor' | 'columnMenuRegion' | 'copy' | 'insertRowAbove' | 'insertRowBelow' | 'deleteRow' | 'filterByThisValue' | 'addComment' | 'editComment' | 'deleteComment' | 'booleanTrue' | 'booleanFalse' | 'dropFileToImport';
 /** 이 패키지의 chrome 문자열 묶음. 소비자가 `register()` 로 언어를 더하거나 문구를 덮을 수 있다. */
 export declare const flexTableLocale: import("@iyulab/components/dist/utilities/Locale.js").LocaleNamespace<FlexTableMessageKey>;
 /** 짧은 조회 별칭 — 렌더 코드가 읽히게 유지한다. */
-export declare const t: (key: FlexTableMessageKey) => string;
+export declare const t: (key: FlexTableMessageKey, params?: Record<string, string | number>) => string;

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flex-table-D5FjaSJV.js";
+import { t as e } from "./flex-table-BAQbidin.js";
 import t from "react";
 import { createComponent as n } from "@lit/react";
 var r = n({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",