npm - @hypermedia-components/core - Versions diffs - 0.1.0 → 0.1.2 - Mend

@hypermedia-components/core 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/dist/csrf-header.d.ts +25 -0
package/dist/csrf-header.js +83 -0
package/dist/datagrid.js +58 -11
package/dist/field-errors.js +29 -5
package/dist/hc-combobox.css +1 -1
package/dist/hc-command.css +1 -1
package/dist/hc-datagrid.css +3 -3
package/dist/hc-dialog.css +1 -1
package/dist/hc-drawer.css +1 -1
package/dist/hc-hovercard.css +1 -1
package/dist/hc-menu.css +1 -1
package/dist/hc-multicombobox.css +1 -1
package/dist/hc-navmenu.css +1 -1
package/dist/hc-popover.css +1 -1
package/dist/hc-switch.css +1 -1
package/dist/hc-tabs.css +2 -2
package/dist/hc-toast.css +1 -1
package/dist/hc.behaviors.d.ts +2 -1
package/dist/hc.behaviors.js +3 -0
package/dist/hc.behaviors.min.js +2 -2
package/dist/hc.core.css +10 -0
package/dist/hc.core.min.css +1 -1
package/dist/hc.css +26 -16
package/dist/hc.min.css +1 -1
package/dist/hc.min.js +2 -2
package/dist/hc.tokens.core.css +10 -0
package/dist/hc.tokens.css +10 -0
package/dist/i18n.js +15 -8
package/dist/index.d.ts +2 -1
package/dist/index.js +2 -1
package/dist/locales/ja.d.ts +3 -0
package/dist/locales/ja.js +44 -0
package/package.json +11 -6
package/src/tokens/README.md +9 -1
package/src/tokens/semantic.tokens.json +8 -0
package/src/tokens/theme.dark.tokens.json +8 -0

package/dist/csrf-header.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+/**
+ * Install the csrf-header behavior: attach the page's CSRF token
+ * (`<meta name="csrf-token" content="…">`, header name from the meta's
+ * `data-header` attribute, default `X-CSRF-Token`) to every htmx
+ * request via `htmx:configRequest`.
+ *
+ * The meta tag is read at request time, so a rotated token is picked
+ * up automatically. A header already set on the request (e.g. via
+ * `data-hx-headers`) is left untouched. Without the meta tag the
+ * behavior is inert.
+ *
+ * @param {Document} [root]
+ *   The root to listen on. Defaults to the global document when
+ *   available.
+ * @returns {() => void} an idempotent uninstaller.
+ *
+ * @example
+ * // <head>
+ * //   <meta name="csrf-token" content="3x4mpl3…">
+ * // </head>
+ *
+ * import { installCsrfHeader } from '@hypermedia-components/core';
+ * installCsrfHeader();
+ */
+export function installCsrfHeader(root?: Document): () => void;

package/dist/csrf-header.js ADDED Viewed

@@ -0,0 +1,83 @@
+// csrf-header behavior — the blessed CSRF token delivery convention for
+// htmx requests (#246).
+//
+// Contract:
+//   - The server's layout renders the token into the page head:
+//
+//       <meta name="csrf-token" content="…">
+//
+//     The header name defaults to `X-CSRF-Token` and is configurable on
+//     the carrier for stacks that expect a different one:
+//
+//       <meta name="csrf-token" content="…" data-header="X-CSRFToken">
+//
+//   - On every `htmx:configRequest` the behavior reads the meta tag —
+//     at request time, so server-side token rotation needs no
+//     re-install — and adds the header to the outgoing request.
+//   - A header already present in `event.detail.headers` is never
+//     overwritten: a per-request `data-hx-headers` (or an earlier
+//     listener) wins over the page-level convention.
+//   - No meta tag, or an empty `content` → strict no-op.
+//
+// The behavior never makes a request — htmx owns the network. Plain
+// `<form method="post">` submissions never fire `htmx:configRequest`;
+// no-JS degradation needs the framework's hidden-field mechanism.
+//
+// installCsrfHeader() returns an `uninstall` function. Idempotent.
+const INSTALL_KEY = '__hcCsrfHeaderUninstall';
+const DEFAULT_HEADER = 'X-CSRF-Token';
+/**
+ * Install the csrf-header behavior: attach the page's CSRF token
+ * (`<meta name="csrf-token" content="…">`, header name from the meta's
+ * `data-header` attribute, default `X-CSRF-Token`) to every htmx
+ * request via `htmx:configRequest`.
+ *
+ * The meta tag is read at request time, so a rotated token is picked
+ * up automatically. A header already set on the request (e.g. via
+ * `data-hx-headers`) is left untouched. Without the meta tag the
+ * behavior is inert.
+ *
+ * @param {Document} [root]
+ *   The root to listen on. Defaults to the global document when
+ *   available.
+ * @returns {() => void} an idempotent uninstaller.
+ *
+ * @example
+ * // <head>
+ * //   <meta name="csrf-token" content="3x4mpl3…">
+ * // </head>
+ *
+ * import { installCsrfHeader } from '@hypermedia-components/core';
+ * installCsrfHeader();
+ */
+export function installCsrfHeader(root = (typeof document !== 'undefined' ? document : null)) {
+  if (!root) return () => {};
+  if (root[INSTALL_KEY]) return root[INSTALL_KEY];
+  function onConfigRequest(event) {
+    const headers = event?.detail?.headers;
+    if (!headers || typeof headers !== 'object') return;
+    const doc = root.nodeType === 9 ? root : root.ownerDocument;
+    const meta = doc.querySelector('meta[name="csrf-token"]');
+    const token = meta?.getAttribute('content');
+    if (!token) return;
+    const header = meta.getAttribute('data-header') || DEFAULT_HEADER;
+    if (header in headers) return; // an explicit per-request header wins
+    headers[header] = token;
+  }
+  root.addEventListener('htmx:configRequest', onConfigRequest);
+  const uninstall = () => {
+    if (root[INSTALL_KEY] !== uninstall) return;
+    root.removeEventListener('htmx:configRequest', onConfigRequest);
+    delete root[INSTALL_KEY];
+  };
+  root[INSTALL_KEY] = uninstall;
+  return uninstall;
+}

package/dist/datagrid.js CHANGED Viewed

@@ -80,6 +80,32 @@ function rowCells(row) {
   );
 }
+// The navigation matrix as a VISUAL grid: a cell with rowspan/colspan is
+// entered into every (row, column) slot it covers, so arrow keys move by
+// visual position and multi-row records stay column-aligned (the lead
+// rowspan cell is reachable from every sub-row it spans).
+function buildMatrix(grid) {
+  const rows = bodyRows(grid);
+  const out = rows.map(() => []);
+  rows.forEach((row, r) => {
+    let c = 0;
+    for (const cell of rowCells(row)) {
+      while (out[r][c] !== undefined) c += 1; // slot taken by a rowspan above
+      const cs = cell.colSpan || 1;
+      // rowspan="0" = "to the end of the row group" (HTML spec); either way
+      // a span never crosses into the next record's rows.
+      const rs = cell.rowSpan === 0 ? rows.length - r : cell.rowSpan || 1;
+      for (let dr = 0; dr < rs; dr += 1) {
+        const target = rows[r + dr];
+        if (!target || target.parentNode !== row.parentNode) break;
+        for (let dc = 0; dc < cs; dc += 1) out[r + dr][c + dc] = cell;
+      }
+      c += cs;
+    }
+  });
+  return out;
+}
 /** Measure header heights + frozen widths → sticky offset variables. */
 function measure(grid) {
   const headTrs = ownedBy(grid, '.hc-datagrid__head > tr');
@@ -149,7 +175,8 @@ function attach(grid, detachers) {
     for (const h of ownedBy(grid, '.hc-datagrid__headcell')) {
       if (!h.getAttribute('role')) h.setAttribute('role', 'columnheader');
     }
-    matrix.flat().forEach((cell) => {
+    // A spanning cell occupies several matrix slots — visit each cell once.
+    new Set(matrix.flat()).forEach((cell) => {
       cell.setAttribute('role', cell.tagName === 'TH' ? 'rowheader' : 'gridcell');
       cell.tabIndex = -1;
       // Widgets in cells are not separate tab stops — the grid manages focus.
@@ -160,15 +187,16 @@ function attach(grid, detachers) {
   }
   function rebuild() {
-    matrix = bodyRows(grid).map(rowCells);
+    matrix = buildMatrix(grid);
     applyRoles();
     applyResizedWidths(); // re-apply column widths to swapped-in rows
-    const cur = matrix[active.r]?.[active.c] ?? matrix[0]?.[0];
-    if (cur) {
-      cur.tabIndex = 0;
-      const pos = locate(cur);
+    let cur = matrix[active.r]?.[active.c];
+    if (!cur) {
+      cur = matrix[0]?.[0];
+      const pos = cur && locate(cur);
       if (pos) active = pos;
     }
+    if (cur) cur.tabIndex = 0;
   }
   // ---- Column resize ----
@@ -331,6 +359,23 @@ function attach(grid, detachers) {
     cell.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
   }
+  // Arrow movement: walk from the active slot in direction (dr, dc),
+  // skipping further slots of the same spanning cell so a rowspan/colspan
+  // cell counts as a single stop. The active slot (not the cell's top-left)
+  // is the walk origin, so the entry row/column is kept while crossing a
+  // span — ↓ then ↑ round-trips.
+  function step(dr, dc) {
+    const { r, c } = active;
+    const cur = matrix[r]?.[c];
+    let nr = r + dr;
+    let nc = c + dc;
+    while (cur && matrix[nr]?.[nc] === cur) {
+      nr += dr;
+      nc += dc;
+    }
+    setActive(nr, nc);
+  }
   function toggleRow(r) {
     const row = bodyRows(grid)[r];
     if (!row) return;
@@ -386,10 +431,10 @@ function attach(grid, detachers) {
       else if (key === 'ArrowLeft') key = 'ArrowRight';
     }
     switch (key) {
-      case 'ArrowDown': setActive(r + 1, c); break;
-      case 'ArrowUp': setActive(r - 1, c); break;
-      case 'ArrowRight': setActive(r, c + 1); break;
-      case 'ArrowLeft': setActive(r, c - 1); break;
+      case 'ArrowDown': step(1, 0); break;
+      case 'ArrowUp': step(-1, 0); break;
+      case 'ArrowRight': step(0, 1); break;
+      case 'ArrowLeft': step(0, -1); break;
       case 'Home': setActive(event.ctrlKey ? 0 : r, 0); break;
       case 'End':
         if (event.ctrlKey) setActive(matrix.length - 1, Infinity);
@@ -419,9 +464,11 @@ function attach(grid, detachers) {
     if (!cell || !grid.contains(cell)) return;
     const pos = locate(cell);
     if (!pos) return;
-    if (pos.r !== active.r || pos.c !== active.c) {
+    if (matrix[active.r]?.[active.c] !== cell) {
       setActive(pos.r, pos.c, false); // don't re-focus; focus is already here
     } else {
+      // Already the active cell — keep the active slot as-is so a spanning
+      // cell remembers which sub-row/column it was entered from.
       cell.setAttribute('data-active', '');
     }
   }

package/dist/field-errors.js CHANGED Viewed

@@ -27,8 +27,11 @@
 // control is focused (opt out with `data-focus="none"` on the alert).
 //
 // Message resolution per item: `data-message-key` found in the i18n
-// catalog → `t(key, { field, code })`; otherwise the item's own text;
-// otherwise `t('fieldErrors.unknown')`. Localize once via `setMessages()`.
+// catalog → `t(key, { field, code, ...data-message-params })`; otherwise
+// the item's own text; otherwise `t('fieldErrors.unknown')`. Localize once
+// via `setMessages()`. `data-message-params` is an optional JSON object of
+// server-provided interpolation values (constraint declarations, validation
+// row columns) for translations with placeholders beyond {field}/{code}.
 //
 // Server errors are stale the moment the user edits the field or
 // resubmits: cleared on first `input`/`change` per field, on `submit` /
@@ -65,16 +68,21 @@ function scopeOf(alert, root) {
 }
 // First control in the scope whose `name` matches. `form.elements`
-// handles radio/checkbox groups natively (RadioNodeList → first member).
+// handles radio/checkbox groups natively (RadioNodeList). Hidden inputs
+// are skipped when the group has a visible member: the blessed boolean
+// idiom pairs `<input type="hidden" value="false">` with the real
+// checkbox under one name, and the ARIA wiring, focus, and edit-to-clear
+// belong on the control the user can operate.
 function controlFor(scope, name) {
   let found;
   if (scope.elements && typeof scope.elements.namedItem === 'function') {
     found = scope.elements.namedItem(name);
   } else {
-    found = scope.querySelector(`[name="${escapeName(name)}"]`);
+    found = scope.querySelectorAll(`[name="${escapeName(name)}"]`);
   }
   if (found && found.tagName == null && typeof found.length === 'number') {
-    found = found[0] ?? null; // RadioNodeList
+    const members = Array.from(found); // RadioNodeList / NodeList
+    found = members.find((el) => el.type !== 'hidden') ?? members[0];
   }
   return found ?? null;
 }
@@ -85,6 +93,22 @@ function resolveMessage(item) {
     field: item.getAttribute('data-field') ?? '',
     code: item.getAttribute('data-code') ?? '',
   };
+  // Optional server-provided interpolation params (a JSON object), so a
+  // catalog translation may use placeholders beyond {field}/{code} — e.g.
+  // data-message-params='{"stock": 5}' for "在庫 {stock} を超えています。".
+  // Item params win over the implicit field/code; malformed or non-object
+  // JSON degrades to the attribute being ignored.
+  const raw = item.getAttribute('data-message-params');
+  if (raw) {
+    try {
+      const extra = JSON.parse(raw);
+      if (extra && typeof extra === 'object' && !Array.isArray(extra)) {
+        Object.assign(params, extra);
+      }
+    } catch {
+      /* malformed JSON — keep the default params */
+    }
+  }
   if (key && hasMessage(key)) return t(key, params);
   const text = item.textContent.trim();
   if (text) return text;

package/dist/hc-combobox.css CHANGED Viewed

@@ -51,7 +51,7 @@
     min-inline-size: var(--hc-combobox-listbox-min-width);
     max-block-size: var(--hc-combobox-listbox-max-height);
     overflow-y: auto;
-    box-shadow: 0 8px 24px rgb(0, 0, 0, 0.12);
+    box-shadow: var(--hc-shadow-lg);
     list-style: none;
   }

package/dist/hc-command.css CHANGED Viewed

@@ -36,7 +36,7 @@
     background: var(--hc-command-bg);
     color: var(--hc-command-fg);
     overflow: hidden;
-    box-shadow: 0 8px 24px rgb(0, 0, 0, 0.12);
+    box-shadow: var(--hc-shadow-lg);
   }
   .hc-command__input {

package/dist/hc-datagrid.css CHANGED Viewed

@@ -38,7 +38,7 @@
     /* Contextual shadow cast by a frozen column's trailing edge — its
        direction flips per edge (see the frozen-edge rules below), so it
        stays a CSS-local var, not a theme token. */
-    --hc-datagrid-freeze-shadow: 2px 0 4px -2px rgb(0, 0, 0, 0.25);
+    --hc-datagrid-freeze-shadow: 2px 0 4px -2px var(--hc-shadow-edge);
     position: relative;
     border: 1px solid var(--hc-datagrid-border);
@@ -173,7 +173,7 @@
   /* RTL: the freeze line falls on the other (inline-end) side. */
   .hc-datagrid:dir(rtl) {
-    --hc-datagrid-freeze-shadow: -2px 0 4px -2px rgb(0, 0, 0, 0.25);
+    --hc-datagrid-freeze-shadow: -2px 0 4px -2px var(--hc-shadow-edge);
   }
   /* ---- States ----
@@ -355,7 +355,7 @@
     line-height: 1.4;
     white-space: normal;
     overflow-wrap: anywhere;
-    box-shadow: 0 4px 12px rgb(0, 0, 0, 0.25);
+    box-shadow: var(--hc-shadow-lg);
     pointer-events: none;
   }

package/dist/hc-dialog.css CHANGED Viewed

@@ -14,7 +14,7 @@
     color: var(--hc-dialog-fg);
     max-inline-size: var(--hc-dialog-max-width);
     inline-size: calc(100% - 2 * var(--hc-space-4));
-    box-shadow: 0 10px 30px rgb(0, 0, 0, 0.15);
+    box-shadow: var(--hc-shadow-overlay);
   }
   .hc-dialog::backdrop {

package/dist/hc-drawer.css CHANGED Viewed

@@ -30,7 +30,7 @@
     background: var(--hc-drawer-bg);
     color: var(--hc-drawer-fg);
     overflow: hidden;
-    box-shadow: 0 0 30px rgb(0, 0, 0, 0.2);
+    box-shadow: var(--hc-shadow-overlay);
     /* Default side = right. Specific sides override below. */
     inset-block: 0;

package/dist/hc-hovercard.css CHANGED Viewed

@@ -40,7 +40,7 @@
     color: var(--hc-hovercard-fg);
     inline-size: max-content;
     max-inline-size: var(--hc-hovercard-max-width);
-    box-shadow: 0 8px 24px rgb(0, 0, 0, 0.14);
+    box-shadow: var(--hc-shadow-lg);
     /* Shared directional placement (hc-anchored.css). */
     --hc-anchored-offset: var(--hc-hovercard-offset);

package/dist/hc-menu.css CHANGED Viewed

@@ -34,7 +34,7 @@
     color: var(--hc-menu-fg);
     min-inline-size: var(--hc-menu-min-width);
     max-inline-size: var(--hc-menu-max-width);
-    box-shadow: 0 8px 24px rgb(0, 0, 0, 0.12);
+    box-shadow: var(--hc-shadow-lg);
   }
   /* Anchor Positioning path. installMenu injects the matching

package/dist/hc-multicombobox.css CHANGED Viewed

@@ -117,7 +117,7 @@
     min-inline-size: var(--hc-multicombobox-listbox-min-width);
     max-block-size: var(--hc-multicombobox-listbox-max-height);
     overflow-y: auto;
-    box-shadow: 0 8px 24px rgb(0, 0, 0, 0.12);
+    box-shadow: var(--hc-shadow-lg);
     list-style: none;
   }

package/dist/hc-navmenu.css CHANGED Viewed

@@ -77,7 +77,7 @@
     background: var(--hc-navmenu-panel-bg);
     color: var(--hc-navmenu-panel-fg);
     min-inline-size: var(--hc-navmenu-panel-min-width);
-    box-shadow: 0 8px 24px rgb(0, 0, 0, 0.12);
+    box-shadow: var(--hc-shadow-lg);
   }
   /* Links inside a panel stack as a readable list. */

package/dist/hc-popover.css CHANGED Viewed

@@ -14,7 +14,7 @@
     color: var(--hc-popover-fg);
     min-inline-size: var(--hc-popover-min-width);
     max-inline-size: var(--hc-popover-max-width);
-    box-shadow: 0 6px 20px rgb(0, 0, 0, 0.12);
+    box-shadow: var(--hc-shadow-lg);
     /* Shared directional placement (hc-anchored.css). Anchoring is opt-in via
      * data-side + installPopover; a bare popover stays browser-positioned. */

package/dist/hc-switch.css CHANGED Viewed

@@ -46,7 +46,7 @@
     block-size: var(--hc-switch-thumb-size);
     background-color: var(--hc-switch-thumb-bg);
     border-radius: 50%;
-    box-shadow: 0 1px 2px rgb(0, 0, 0, 0.15);
+    box-shadow: var(--hc-shadow-sm);
     translate: 0 -50%;
     transition: translate 120ms ease;
   }

package/dist/hc-tabs.css CHANGED Viewed

@@ -226,12 +226,12 @@
   .hc-tabs__scroll[data-dir="start"] {
     inset-inline-start: 0;
-    box-shadow: 4px 0 6px -4px rgb(0, 0, 0, 0.2);
+    box-shadow: 4px 0 6px -4px var(--hc-shadow-edge);
   }
   .hc-tabs__scroll[data-dir="end"] {
     inset-inline-end: 0;
-    box-shadow: -4px 0 6px -4px rgb(0, 0, 0, 0.2);
+    box-shadow: -4px 0 6px -4px var(--hc-shadow-edge);
   }
   .hc-tabs__scroll::before {

package/dist/hc-toast.css CHANGED Viewed

@@ -66,7 +66,7 @@
     border: 1px solid var(--hc-toast-info-border);
     background: var(--hc-toast-info-bg);
     color: var(--hc-toast-info-fg);
-    box-shadow: 0 4px 12px rgb(0, 0, 0, 0.08);
+    box-shadow: var(--hc-shadow-md);
     /* Horizontal drag is the swipe-to-dismiss gesture; the behavior animates
      * the snap-back / fly-out via these transitions. */

package/dist/hc.behaviors.d.ts CHANGED Viewed

@@ -29,5 +29,6 @@ import { installDatagrid } from './datagrid.js';
 import { installValidation } from './validation.js';
 import { installThemeToggle } from './theme-toggle.js';
 import { installFieldErrors } from './field-errors.js';
-export { installConfirm, installToast, installCloseDialog, installClosePopover, installRemoteDialog, installTabs, installMenu, installMenubar, installNavmenu, installTooltip, installPopover, installSlider, installCombobox, installMulticombobox, installDrawer, installHovercard, installToggleGroup, installCarousel, installToolbar, installAvatar, installPasswordToggle, installContextMenu, installCommand, installCalendar, installInputOtp, installSplitter, installShell, installDatagrid, installValidation, installThemeToggle, installFieldErrors };
+import { installCsrfHeader } from './csrf-header.js';
+export { installConfirm, installToast, installCloseDialog, installClosePopover, installRemoteDialog, installTabs, installMenu, installMenubar, installNavmenu, installTooltip, installPopover, installSlider, installCombobox, installMulticombobox, installDrawer, installHovercard, installToggleGroup, installCarousel, installToolbar, installAvatar, installPasswordToggle, installContextMenu, installCommand, installCalendar, installInputOtp, installSplitter, installShell, installDatagrid, installValidation, installThemeToggle, installFieldErrors, installCsrfHeader };
 export { setMessages, resetMessages, getMessages, hasMessage, DEFAULT_MESSAGES } from "./i18n.js";

package/dist/hc.behaviors.js CHANGED Viewed

@@ -38,6 +38,7 @@ import { installDatagrid } from './datagrid.js';
 import { installValidation } from './validation.js';
 import { installThemeToggle } from './theme-toggle.js';
 import { installFieldErrors } from './field-errors.js';
+import { installCsrfHeader } from './csrf-header.js';
 function init() {
   installConfirm();
@@ -71,6 +72,7 @@ function init() {
   installValidation();
   installThemeToggle();
   installFieldErrors();
+  installCsrfHeader();
 }
 if (typeof document !== 'undefined') {
@@ -113,6 +115,7 @@ export {
   installValidation,
   installThemeToggle,
   installFieldErrors,
+  installCsrfHeader,
 };
 // i18n — set the locale before this module's auto-init runs (e.g. inline