@hypermedia-components/core 0.1.0 → 0.1.1

package/dist/hc.tokens.core.css

@@ -64,6 +64,11 @@
     --hc-font-weight-semibold: 600;
     --hc-icon-size: 1em;
     --hc-opacity-disabled: 0.5;
+    --hc-shadow-sm: 0 1px 2px rgb(0, 0, 0, 0.15);
+    --hc-shadow-md: 0 4px 12px rgb(0, 0, 0, 0.1);
+    --hc-shadow-lg: 0 8px 24px rgb(0, 0, 0, 0.12);
+    --hc-shadow-overlay: 0 10px 30px rgb(0, 0, 0, 0.15);
+    --hc-shadow-edge: rgb(0, 0, 0, 0.2);
   }
 
   :root {
@@ -751,6 +756,11 @@
     --hc-color-status-error-bg: #450a0a;
     --hc-color-status-error-fg: #fecaca;
     --hc-color-status-error-border: #7f1d1d;
+    --hc-shadow-sm: 0 1px 2px rgb(0, 0, 0, 0.55);
+    --hc-shadow-md: 0 4px 12px rgb(0, 0, 0, 0.45);
+    --hc-shadow-lg: 0 8px 24px rgb(0, 0, 0, 0.5);
+    --hc-shadow-overlay: 0 10px 30px rgb(0, 0, 0, 0.6);
+    --hc-shadow-edge: rgb(0, 0, 0, 0.5);
     --hc-button-default-bg: #1f2937;
     --hc-button-default-fg: #f3f4f6;
     --hc-button-default-border: #374151;

package/dist/hc.tokens.css

@@ -64,6 +64,11 @@
     --hc-font-weight-semibold: 600;
     --hc-icon-size: 1em;
     --hc-opacity-disabled: 0.5;
+    --hc-shadow-sm: 0 1px 2px rgb(0, 0, 0, 0.15);
+    --hc-shadow-md: 0 4px 12px rgb(0, 0, 0, 0.1);
+    --hc-shadow-lg: 0 8px 24px rgb(0, 0, 0, 0.12);
+    --hc-shadow-overlay: 0 10px 30px rgb(0, 0, 0, 0.15);
+    --hc-shadow-edge: rgb(0, 0, 0, 0.2);
   }
 
   :root {
@@ -751,6 +756,11 @@
     --hc-color-status-error-bg: #450a0a;
     --hc-color-status-error-fg: #fecaca;
     --hc-color-status-error-border: #7f1d1d;
+    --hc-shadow-sm: 0 1px 2px rgb(0, 0, 0, 0.55);
+    --hc-shadow-md: 0 4px 12px rgb(0, 0, 0, 0.45);
+    --hc-shadow-lg: 0 8px 24px rgb(0, 0, 0, 0.5);
+    --hc-shadow-overlay: 0 10px 30px rgb(0, 0, 0, 0.6);
+    --hc-shadow-edge: rgb(0, 0, 0, 0.5);
     --hc-button-default-bg: #1f2937;
     --hc-button-default-fg: #f3f4f6;
     --hc-button-default-border: #374151;

package/dist/i18n.js

@@ -45,7 +45,14 @@ export const DEFAULT_MESSAGES = Object.freeze({
   'toast.label': 'Notifications',
 });
 
-let messages = { ...DEFAULT_MESSAGES };
+// The dist bundles (hc.min.js, hc.behaviors.min.js) each inline a copy of
+// this module, so module-level state would be one catalog per bundle —
+// setMessages() through one entry would never reach behaviors loaded from
+// another (#216). The catalog lives on a globalThis-keyed singleton instead,
+// so every copy reads and writes the same state.
+const STATE_KEY = Symbol.for('hypermedia-components.i18n');
+const state =
+  globalThis[STATE_KEY] || (globalThis[STATE_KEY] = { messages: { ...DEFAULT_MESSAGES } });
 
 /**
  * Merge translations into the global catalog. Pass a flat `{ key: value }`
@@ -57,10 +64,10 @@ let messages = { ...DEFAULT_MESSAGES };
  * @returns {() => void} restore
  */
 export function setMessages(overrides) {
-  const prev = messages;
-  messages = { ...messages, ...(overrides || {}) };
+  const prev = state.messages;
+  state.messages = { ...state.messages, ...(overrides || {}) };
   return () => {
-    messages = prev;
+    state.messages = prev;
   };
 }
 
@@ -68,7 +75,7 @@ export function setMessages(overrides) {
  * Reset the catalog to the built-in English defaults.
  */
 export function resetMessages() {
-  messages = { ...DEFAULT_MESSAGES };
+  state.messages = { ...DEFAULT_MESSAGES };
 }
 
 /**
@@ -77,7 +84,7 @@ export function resetMessages() {
  * @returns {Record<string, string>}
  */
 export function getMessages() {
-  return { ...messages };
+  return { ...state.messages };
 }
 
 /**
@@ -90,7 +97,7 @@ export function getMessages() {
  * @returns {boolean}
  */
 export function hasMessage(key) {
-  return messages[key] != null || DEFAULT_MESSAGES[key] != null;
+  return state.messages[key] != null || DEFAULT_MESSAGES[key] != null;
 }
 
 /**
@@ -103,7 +110,7 @@ export function hasMessage(key) {
  * @returns {string}
  */
 export function t(key, params) {
-  let str = messages[key];
+  let str = state.messages[key];
   if (str == null) str = DEFAULT_MESSAGES[key];
   if (str == null) str = key;
   if (params) {

package/dist/index.d.ts

@@ -30,5 +30,5 @@ export { installValidation } from "./validation.js";
 export { installThemeToggle } from "./theme-toggle.js";
 export { installFieldErrors } from "./field-errors.js";
 export { installChart } from "./chart.js";
-export const version: "0.1.0";
+export const version: "0.1.1";
 export { setMessages, resetMessages, getMessages, hasMessage, DEFAULT_MESSAGES } from "./i18n.js";

package/dist/index.js

@@ -44,4 +44,4 @@ export { installChart } from './chart.js';
 // ARIA labels). Call setMessages() once at startup, before installing.
 export { setMessages, resetMessages, getMessages, hasMessage, DEFAULT_MESSAGES } from './i18n.js';
 
-export const version = '0.1.0';
+export const version = '0.1.1';

package/dist/locales/ja.d.ts

@@ -0,0 +1,3 @@
+export default ja;
+/** @type {Readonly<Record<string, string>>} */
+declare const ja: Readonly<Record<string, string>>;

package/dist/locales/ja.js

@@ -0,0 +1,44 @@
+// @hypermedia-components/core — Japanese locale pack.
+//
+// A complete translation of DEFAULT_MESSAGES (../i18n.js): every string a
+// behavior can inject. Pass it to setMessages() once at startup, before
+// behaviors install:
+//
+//   import { setMessages } from '@hypermedia-components/core/i18n';
+//   import ja from '@hypermedia-components/core/locales/ja';
+//   setMessages(ja);
+//
+// App-specific wording can be layered on top with a second setMessages()
+// call — later merges win.
+//
+// Completeness is enforced by test/locales.test.mjs: a pack must cover
+// every DEFAULT_MESSAGES key (and carry no stale ones), so a behavior that
+// adds keys fails CI until every shipped pack translates them.
+
+/** @type {Readonly<Record<string, string>>} */
+const ja = Object.freeze({
+  'combobox.empty': '一致する項目がありません',
+  'combobox.loading': '読み込み中…',
+  'combobox.error': '選択肢を読み込めませんでした',
+  'combobox.create': '「{value}」を作成',
+  'multicombobox.empty': '一致する項目がありません',
+  'multicombobox.create': '「{value}」を追加',
+  'multicombobox.remove': '{label} を削除',
+  'calendar.label': 'カレンダー',
+  'calendar.prevMonth': '前の月',
+  'calendar.nextMonth': '次の月',
+  'calendar.month': '月',
+  'calendar.year': '年',
+  'confirm.message': '続行しますか？',
+  'confirm.title': '確認',
+  'confirm.confirm': '実行',
+  'confirm.cancel': 'キャンセル',
+  'fieldErrors.unknown': '入力値が正しくありません',
+  'shell.toggleNav': 'ナビゲーションを開閉',
+  'shell.collapseNav': 'サイドバーを折りたたむ',
+  'splitter.resize': 'パネルの幅を変更',
+  'themeToggle.label': 'カラーテーマを切り替え',
+  'toast.label': '通知',
+});
+
+export default ja;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypermedia-components/core",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Semantic components and recipes for hypermedia applications.",
   "license": "MIT",
   "repository": {
@@ -29,6 +29,10 @@
       "types": "./dist/i18n.d.ts",
       "import": "./dist/i18n.js"
     },
+    "./locales/*": {
+      "types": "./dist/locales/*.d.ts",
+      "import": "./dist/locales/*.js"
+    },
     "./css": "./dist/hc.css",
     "./css/min": "./dist/hc.min.css",
     "./css/core": "./dist/hc.core.css",
@@ -79,14 +83,14 @@
     "@axe-core/playwright": "^4.11.3",
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.60.0",
-    "esbuild": "^0.28.0",
-    "eslint": "^10.4.0",
+    "esbuild": "^0.28.1",
+    "eslint": "^10.4.1",
     "globals": "^17.6.0",
     "jsdom": "^29.1.1",
-    "stylelint": "^17.12.0",
+    "stylelint": "^17.13.0",
     "stylelint-config-standard": "^40.0.0",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.7"
+    "vitest": "^4.1.8"
   },
   "scripts": {
     "build": "pnpm run build:tokens && pnpm run build:css && pnpm run build:types && pnpm run build:js && pnpm run build:min",
@@ -100,6 +104,7 @@
     "test:browser": "pnpm run build && playwright test",
     "lint": "pnpm run lint:js && pnpm run lint:css",
     "lint:js": "eslint .",
-    "lint:css": "stylelint \"src/css/**/*.css\""
+    "lint:css": "stylelint \"src/css/**/*.css\"",
+    "lint:fix": "eslint . --fix && stylelint \"src/css/**/*.css\" --fix"
   }
 }

package/src/tokens/README.md

@@ -3,8 +3,16 @@
 DTCG-shaped JSON sources. Four layers:
 
 1. `primitive.tokens.json` — raw values (color scales, spacing, radii, font sizes).
-2. `semantic.tokens.json` — UI meaning (bg, surface, text, border, action.primary).
+2. `semantic.tokens.json` — UI meaning (bg, surface, text, border, action.primary,
+   the `shadow.*` elevation scale).
 3. `component.tokens.json` — component values (button height, input border, card radius).
 4. `theme.*.tokens.json` and `density.*.tokens.json` — light/dark, comfortable/compact/dense.
 
 The build emits `dist/hc.tokens.css` with `--hc-*` custom properties.
+
+Values are CSS strings. Composite values (the `shadow.*` scale,
+`color.overlay`'s `rgba()`) are stored as the literal CSS string — the
+transformer emits `$value` verbatim and resolves embedded `{refs}`, it
+does not understand DTCG composite objects. Component CSS reads the
+elevation scale directly (`box-shadow: var(--hc-shadow-lg)`); the dark
+theme overrides the four steps with stronger alphas.

package/src/tokens/semantic.tokens.json

@@ -102,5 +102,13 @@
   },
   "opacity": {
     "disabled": { "$type": "number", "$value": "0.5" }
+  },
+  "shadow": {
+    "$description": "Elevation scale. CSS string composites — the transformer emits $value verbatim (same pragmatic shape as color.overlay). Dark overrides live in theme.dark.tokens.json.",
+    "sm":      { "$type": "shadow", "$value": "0 1px 2px rgb(0, 0, 0, 0.15)" },
+    "md":      { "$type": "shadow", "$value": "0 4px 12px rgb(0, 0, 0, 0.1)" },
+    "lg":      { "$type": "shadow", "$value": "0 8px 24px rgb(0, 0, 0, 0.12)" },
+    "overlay": { "$type": "shadow", "$value": "0 10px 30px rgb(0, 0, 0, 0.15)" },
+    "edge":    { "$type": "color",  "$value": "rgb(0, 0, 0, 0.2)" }
   }
 }

package/src/tokens/theme.dark.tokens.json

@@ -46,5 +46,13 @@
         "border": { "$type": "color", "$value": "{primitive.color.red.900}" }
       }
     }
+  },
+  "shadow": {
+    "$description": "Stronger alphas than the light scale so elevation stays legible on dark surfaces.",
+    "sm":      { "$type": "shadow", "$value": "0 1px 2px rgb(0, 0, 0, 0.55)" },
+    "md":      { "$type": "shadow", "$value": "0 4px 12px rgb(0, 0, 0, 0.45)" },
+    "lg":      { "$type": "shadow", "$value": "0 8px 24px rgb(0, 0, 0, 0.5)" },
+    "overlay": { "$type": "shadow", "$value": "0 10px 30px rgb(0, 0, 0, 0.6)" },
+    "edge":    { "$type": "color",  "$value": "rgb(0, 0, 0, 0.5)" }
   }
 }