@hypermedia-components/core 0.1.0 → 0.1.1

package/dist/field-errors.js

@@ -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` /
@@ -85,6 +88,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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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. */