@hotelfriendag/design-tokens 0.3.2 → 0.3.3

package/README.md

@@ -22,7 +22,9 @@ portable-design/
 │   ├── _tokens.scss               · SCSS variables
 │   ├── tokens.ts                  · TypeScript const
 │   ├── shadcn-tokens.css          · shadcn/ui contract
-│   └── components.css             · .hf-* component primitives (extracted from components.html)
+│   └── components.css             · .hf-* component primitives (generated from src/components.css)
+│
+├── src/                       ← hand-edited sources for the generator (currently: components.css only)
 │
 ├── states-canonical.json      ← curated interactive states for new components (use this)
 ├── states.json                ← raw portal extraction (160 KB — prefer states-canonical.json)
@@ -239,7 +241,7 @@ node generate-tokens.cjs --target=ts        > pre-built/tokens.ts
 node generate-tokens.cjs --target=shadcn    > pre-built/shadcn-tokens.css
 ```
 
-> `pre-built/components.css` is **not generated** — it's hand-extracted from `components.html`. If you change the `<style type="text/tailwindcss">` `@layer components` block in components.html, manually re-sync the extracted file. The `pre-built/components.css` file header has the source coordinates.
+> `pre-built/components.css` is **generated** from `src/components.css` by `generate-tokens.cjs --target=components-css` (`npm run build`). Edit the source file under `src/`, never the output under `pre-built/`. CI runs `git diff --exit-code -- pre-built/` so any hand-edit to the output is caught as drift.
 
 Or wire token regeneration into `package.json`:
 
@@ -461,7 +463,7 @@ The embedded `@theme {}` block now mirrors `pre-built/tailwind.css` (canonical h
 
 **What was tracked as Phase 2 TODO but stays open for Phase 3 / future:**
 
-- Fully *generate* `pre-built/components.css` from sources (currently still hand-authored, but verified by `validate-tokens.cjs`)
+- ✅ ~~Fully *generate* `pre-built/components.css` from sources~~ — done 2026-05-27 (ROADMAP #4): source moved to `src/components.css`, `--target=components-css` added to the generator, drift gate covers regeneration.
 - Rewrite `components.html` demo HTML to use the new prefixed class refs (`bg-hf-accent` everywhere) and drop legacy aliases entirely
 - Add ESLint/Stylelint plugin (RFC-0001 §4.6 forbid raw hex)
 - Publish as `@hotelfriendag/design-tokens` npm package (RFC-0001 §4.4)
@@ -566,7 +568,7 @@ Addresses critique from `RFC-0001-cross-project-design-system.md` §2 + §8 —
 - Token namespace prefix (`--hf-*`) + `--target=tailwind-v4-additive` (RFC §4.2)
 - Three-tier token architecture: primitive → semantic → component (RFC §4.1)
 - `text-text-primary` awkward utility — fix when semantic tier introduces `--hf-color-fg` (RFC §8.3)
-- `pre-built/components.css` is hand-mirrored from `components.html` rather than generated (RFC §5b)
+- ✅ ~~`pre-built/components.css` is hand-mirrored from `components.html` rather than generated (RFC §5b)~~ — resolved 2026-05-27 (ROADMAP #4): now generated from `src/components.css` by `--target=components-css`.
 - Two competing visual SSOTs (`components.html` vs `UI_DESIGN.md`) — Phase 2 will pick one
 
 ---

package/generate-tokens.cjs

@@ -15,6 +15,8 @@
  *   --target=js                   → module.exports = { tokens: {...} }            (CommonJS module — Node consumers)
  *   --target=dts                  → export declare const tokens: {...}            (TypeScript declarations)
  *   --target=shadcn               → :root { --primary: ...; --background: ... }   (shadcn/ui CSS contract — unprefixed by contract)
+ *   --target=status-css           → .status-{domain}-{state} { color: var(...) }  (read from status-map.json)
+ *   --target=components-css       → .hf-* component primitives                     (read from src/components.css)
  *
  * Usage (from this folder, or anywhere — paths are relative to the script):
  *   node generate-tokens.cjs --target=css                  > pre-built/tokens.css
@@ -26,6 +28,8 @@
  *   node generate-tokens.cjs --target=js                   > pre-built/tokens.js
  *   node generate-tokens.cjs --target=dts                  > pre-built/tokens.d.ts
  *   node generate-tokens.cjs --target=shadcn               > pre-built/shadcn-tokens.css
+ *   node generate-tokens.cjs --target=status-css           > pre-built/status.css
+ *   node generate-tokens.cjs --target=components-css       > pre-built/components.css
  *
  * Pass --in=path/to/tokens.figma.json to override the input file.
  *
@@ -638,6 +642,22 @@ function emitStatusCss() {
   return lines.join('\n');
 }
 
+// ── components-css target ────────────────────────────────────────────────────
+// Reads `src/components.css` and emits it verbatim to pre-built/components.css.
+// The .hf-* rules have heterogeneous shapes (pseudo-elements, keyframes, BEM
+// modifiers, hardcoded geometry) so a data-driven JSON model would just be
+// CSS-in-JSON — net negative ergonomics. The split here is purely "source vs
+// generated output": you edit src/, the build emits pre-built/, the CI drift
+// gate fails any hand-edit to pre-built/components.css.
+function emitComponentsCss() {
+  const srcPath = path.resolve(__dirname, 'src/components.css');
+  if (!fs.existsSync(srcPath)) {
+    throw new Error(`src/components.css not found at ${srcPath}. Required for --target=components-css.`);
+  }
+  // Strip trailing whitespace so dispatch's appended '\n' yields exactly one trailing newline.
+  return fs.readFileSync(srcPath, 'utf8').replace(/\s*$/, '');
+}
+
 // ── Dispatch ─────────────────────────────────────────────────────────────────
 //
 // `tailwind-v4-additive` is an explicit alias for `tailwind-v4`:
@@ -660,6 +680,7 @@ const out =
   target === 'tailwind-v4-additive' ? emitTailwind4() : // alias — see comment above
   target === 'shadcn'               ? emitShadcn() :
   target === 'status-css'           ? emitStatusCss() :
-  (() => { throw new Error(`Unknown target: ${target}. Use css | scss | ts | js | dts | tailwind | tailwind-v4 | tailwind-v4-additive | status-css | shadcn`); })();
+  target === 'components-css'       ? emitComponentsCss() :
+  (() => { throw new Error(`Unknown target: ${target}. Use css | scss | ts | js | dts | tailwind | tailwind-v4 | tailwind-v4-additive | status-css | components-css | shadcn`); })();
 
 process.stdout.write(out + '\n');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotelfriendag/design-tokens",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "HotelFriend Design System — portable bundle (tokens, components, AI rules). Three-tier model per RFC-0002.",
   "license": "MIT",
   "type": "commonjs",
@@ -41,6 +41,7 @@
     "pre-built/",
     "ai-rules/",
     "scripts/",
+    "src/",
     "tokens.figma.json",
     "status-map.json",
     "states-canonical.json",
@@ -65,7 +66,9 @@
     "build:tokens:js": "node generate-tokens.cjs --target=js                   > pre-built/tokens.js",
     "build:tokens:dts": "node generate-tokens.cjs --target=dts                  > pre-built/tokens.d.ts",
     "build:tokens:shadcn": "node generate-tokens.cjs --target=shadcn               > pre-built/shadcn-tokens.css",
-    "build:components": "node generate-tokens.cjs --target=status-css           > pre-built/status.css",
+    "build:components": "npm-run-all build:components:*",
+    "build:components:status": "node generate-tokens.cjs --target=status-css           > pre-built/status.css",
+    "build:components:css": "node generate-tokens.cjs --target=components-css       > pre-built/components.css",
     "validate": "node scripts/validate-tokens.cjs",
     "smoke": "bash scripts/integration-smoke.sh",
     "prepublishOnly": "npm-run-all build validate"

package/pre-built/components.css

@@ -1,6 +1,10 @@
 /*
  * HotelFriend Design System — Component classes (.hf-*)
  *
+ * ➜ THIS IS THE SOURCE FILE. `pre-built/components.css` is generated from
+ *   this file by `generate-tokens.cjs --target=components-css` (`npm run build`).
+ *   Edit here, then rebuild — do not edit pre-built/.
+ *
  * Drop-in companion to `tokens.css` / `tailwind.css`. Defines the `.hf-*`
  * component primitives used throughout `components.html`. Framework-agnostic
  * — works with Tailwind v4, plain CSS, SCSS, Vue, React.
@@ -13,7 +17,9 @@
  *   ✅ Class names equal token names — domain→semantic mapping NOW LIVES in `status-map.json`
  *      and is emitted to `pre-built/status.css` by `generate-tokens.cjs --target=status-css`.
  *      This file no longer contains the mapping — consumers should `@import` both files.
- *   ⚠ `pre-built/components.css` is still hand-mirrored from components.html (Phase 2D will generate).
+ *   ✅ `pre-built/components.css` is now GENERATED from this file by
+ *      `generate-tokens.cjs --target=components-css`. CI drift gate prevents
+ *      hand-edits to the output.
  *
  * Phase 2 TODOs (tracked here):
  *   1. ✅ Phase 2A done — status-map.json + emitStatusCss(). See `pre-built/status.css`.
@@ -22,7 +28,11 @@
  *        --color-hf-pagination-fg-inactive / -fg-active
  *        --color-hf-input-border  (#DBDFE9 — was bare hex)
  *        --color-hf-menu-bg-hover (#F5F5F5 — was bare hex)
- *   3. Phase 2C — generate this whole file from tokens.figma.json + status-map.json (TODO).
+ *   3. ✅ Phase 2C done — emitted by `generate-tokens.cjs --target=components-css`
+ *        from `src/components.css` (this file). Going further to a fully data-driven
+ *        model would not pay off: the .hf-* rule shapes are heterogeneous (pseudo-
+ *        elements, keyframes, BEM modifiers, hardcoded geometry) so a CSS-in-JSON
+ *        DSL would just reformat CSS with worse ergonomics.
  *   4. Phase 2D — reconcile components.html @theme block with Phase 1B token names (TODO).
  *
  * BREAKING CHANGES vs Phase 1A:

package/src/components.css

@@ -0,0 +1,525 @@
+/*
+ * HotelFriend Design System — Component classes (.hf-*)
+ *
+ * ➜ THIS IS THE SOURCE FILE. `pre-built/components.css` is generated from
+ *   this file by `generate-tokens.cjs --target=components-css` (`npm run build`).
+ *   Edit here, then rebuild — do not edit pre-built/.
+ *
+ * Drop-in companion to `tokens.css` / `tailwind.css`. Defines the `.hf-*`
+ * component primitives used throughout `components.html`. Framework-agnostic
+ * — works with Tailwind v4, plain CSS, SCSS, Vue, React.
+ *
+ * Phase 1B (RFC-0002) status:
+ *   ✅ All chrome bound to SEMANTIC tokens (var(--color-hf-fg), -bg-*, -border, -accent, -status-*).
+ *   ✅ Primitives never referenced directly (except Phase-2 escape hatches — see TODOs below).
+ *   ✅ One namespace — no forked --status-* declarations; all status colors come from
+ *      `--color-hf-status-{role}` (semantic) which alias `--color-hf-{family}-{step}` (primitive).
+ *   ✅ Class names equal token names — domain→semantic mapping NOW LIVES in `status-map.json`
+ *      and is emitted to `pre-built/status.css` by `generate-tokens.cjs --target=status-css`.
+ *      This file no longer contains the mapping — consumers should `@import` both files.
+ *   ✅ `pre-built/components.css` is now GENERATED from this file by
+ *      `generate-tokens.cjs --target=components-css`. CI drift gate prevents
+ *      hand-edits to the output.
+ *
+ * Phase 2 TODOs (tracked here):
+ *   1. ✅ Phase 2A done — status-map.json + emitStatusCss(). See `pre-built/status.css`.
+ *   2. ✅ Phase 2B done — 4 component-tier tokens introduced:
+ *        --color-hf-tab-fg-inactive / -count-fg
+ *        --color-hf-pagination-fg-inactive / -fg-active
+ *        --color-hf-input-border  (#DBDFE9 — was bare hex)
+ *        --color-hf-menu-bg-hover (#F5F5F5 — was bare hex)
+ *   3. ✅ Phase 2C done — emitted by `generate-tokens.cjs --target=components-css`
+ *        from `src/components.css` (this file). Going further to a fully data-driven
+ *        model would not pay off: the .hf-* rule shapes are heterogeneous (pseudo-
+ *        elements, keyframes, BEM modifiers, hardcoded geometry) so a CSS-in-JSON
+ *        DSL would just reformat CSS with worse ergonomics.
+ *   4. Phase 2D — reconcile components.html @theme block with Phase 1B token names (TODO).
+ *
+ * BREAKING CHANGES vs Phase 1A:
+ *   - `--color-hf-primary*`   → `--color-hf-accent[ -hover / -subtle / -subtler ]`
+ *   - `--color-hf-text-*`     → `--color-hf-fg[ -muted / -subtle / -faint ]`
+ *   - `--color-hf-neutral-*`  → `--color-hf-bg-*` / `--color-hf-border[ -subtle ]`
+ *   - `--color-hf-badge-*`    → removed; replaced by domain→semantic CSS map below
+ *
+ * Usage:
+ *   <link rel="stylesheet" href="tokens.css">     ← variables first
+ *   <link rel="stylesheet" href="components.css"> ← components after
+ *   <link rel="stylesheet" href="status.css">     ← .status-{domain}-{state} rules (Phase 2A — generated from status-map.json)
+ *
+ *   Or with Tailwind v4:
+ *     @import "tailwindcss";
+ *     @import "./tailwind.css";
+ *     @import "./components.css";
+ *     @import "./status.css";
+ *
+ * STATUS PILLS — the domain→semantic mapping lives in `status-map.json` and is
+ * emitted to `pre-built/status.css` by `generate-tokens.cjs --target=status-css`.
+ * To add a new status (e.g. `booking.partial-refund`), add it to status-map.json
+ * and re-run the generator — no CSS edit needed here.
+ */
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * PILL — .hf-pill (uses currentColor inherited from .status-* above)
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-pill {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 6px 20px;
+  border-radius: var(--radius-hf-sm, 6px);
+  font-size: var(--font-size-hf-base, 14px);
+  font-weight: var(--font-weight-hf-medium, 500);
+  line-height: var(--line-height-hf-tight, 1);
+  white-space: nowrap;
+  border: 1px solid currentColor;
+  text-align: center;
+  user-select: none;
+  transition: opacity 200ms, background-color 200ms;
+}
+.hf-pill:hover { opacity: .9; }
+.hf-pill.is-active {
+  background: transparent !important;
+  box-shadow: inset 0 0 0 1px currentColor;
+}
+.hf-pill--striped {
+  background-image: repeating-linear-gradient(
+    -45deg, currentColor 0, currentColor 1px, transparent 1px, transparent 6px
+  );
+  background-color: var(--color-hf-white, #fff) !important;
+}
+.hf-pill--dd {
+  padding-right: 32px;
+  cursor: pointer;
+  position: relative;
+}
+.hf-pill--dd::after {
+  content: '';
+  position: absolute; right: 12px; top: 50%;
+  width: 8px; height: 5px;
+  background-color: currentColor;
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+  transform: translateY(-50%);
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * TABS (.hf-tab) — large underline (page-nav) + small (sub-filter)
+ *
+ * ⚠ Phase 2 TODO: gray-700 used here for inactive tab color is portal-specific.
+ *    Promote to component-tier token `--hf-tab-fg-inactive`.
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-tab {
+  padding: 22px 15px;
+  font-size: var(--font-size-hf-lg, 16px);
+  font-weight: var(--font-weight-hf-medium, 500);
+  color: var(--color-hf-tab-fg-inactive, #50627E);
+  cursor: pointer;
+  transition: color 200ms;
+  position: relative;
+  white-space: nowrap;
+  border: 0; background: 0;
+  line-height: var(--line-height-hf-tight, 1);
+  display: inline-flex; align-items: center; gap: 8px;
+}
+.hf-tab:hover { color: var(--color-hf-fg, #2B2B2B); }
+.hf-tab.is-active { color: var(--color-hf-accent, #24AFE8); }
+.hf-tab.is-active::after {
+  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
+  height: 3px; background: var(--color-hf-accent, #24AFE8);
+}
+.hf-tab:disabled { color: var(--color-hf-fg-faint, #AEBCCF); cursor: not-allowed; }
+.hf-tab:disabled:hover { color: var(--color-hf-fg-faint, #AEBCCF); }
+
+.hf-tab--sm {
+  padding: 10px 15px;
+  font-size: var(--font-size-hf-md, 15px);
+}
+
+.hf-tab__count {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 22px; height: 18px; padding: 0 6px;
+  background: rgba(72,91,120,.1);
+  color: var(--color-hf-tab-count-fg, #50627E);
+  border-radius: 9999px;
+  font-size: var(--font-size-hf-xs, 11px);
+  font-weight: var(--font-weight-hf-semibold, 600);
+  line-height: var(--line-height-hf-tight, 1);
+}
+.hf-tab.is-active .hf-tab__count {
+  background: var(--color-hf-accent-subtler, #EFF6FF);
+  color: var(--color-hf-accent, #24AFE8);
+}
+
+.hf-pill-tabs {
+  display: inline-flex; gap: 4px; padding: 4px;
+  background: var(--color-hf-bg-section, #F6F7FB);
+  border-radius: var(--radius-hf-lg, 9px);
+}
+.hf-pill-tab {
+  padding: 8px 14px;
+  font-size: var(--font-size-hf-base, 14px);
+  font-weight: var(--font-weight-hf-medium, 500);
+  color: var(--color-hf-tab-fg-inactive, #50627E);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-hf-sm, 6px);
+  cursor: pointer;
+  transition: background 200ms, color 200ms;
+  white-space: nowrap;
+}
+.hf-pill-tab:hover { color: var(--color-hf-fg, #2B2B2B); }
+.hf-pill-tab.is-active {
+  background: var(--color-hf-bg-surface, #fff);
+  color: var(--color-hf-accent, #24AFE8);
+  box-shadow: 0 1px 2px rgba(0,0,0,.05);
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * PAGINATION (.hf-pagination) — subtle gray active (NOT accent!)
+ *
+ * ⚠ Phase 2 TODO: gray-950 (#252F4A) used for active text is portal-specific.
+ *    Promote to component-tier `--hf-pagination-fg-active`.
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-pagination {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 0; list-style: none;
+}
+.hf-pagination__item {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 34px; height: 34px;
+  padding: 0 12px;
+  font-size: var(--font-size-hf-base, 14px);
+  font-weight: var(--font-weight-hf-regular, 400);
+  color: var(--color-hf-pagination-fg-inactive, #485B78);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-hf-md, 8px);
+  cursor: pointer;
+  transition: background-color 200ms, color 200ms, border-color 200ms;
+  text-decoration: none;
+}
+.hf-pagination__item:hover {
+  background: var(--color-hf-bg-muted, #F1F3F6);
+  color: var(--color-hf-fg, #2B2B2B);
+}
+.hf-pagination__item.is-active {
+  background: var(--color-hf-border-subtle, #E4E8EF);
+  border-color: var(--color-hf-border-subtle, #E4E8EF);
+  color: var(--color-hf-pagination-fg-active, #252F4A);
+  cursor: default;
+}
+.hf-pagination__item.is-active:hover { background: var(--color-hf-border-subtle, #E4E8EF); }
+.hf-pagination__item:disabled,
+.hf-pagination__item.is-disabled {
+  color: var(--color-hf-fg-faint, #AEBCCF);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.hf-pagination__ellipsis {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 34px; height: 34px;
+  color: var(--color-hf-gray-700, #485B78);
+  cursor: default;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * ALERT (.hf-alert)
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-alert {
+  position: relative;
+  display: flex; align-items: flex-start; gap: 16px;
+  padding: 16px 48px 14px 20px;
+  background: var(--color-hf-bg-surface, #fff);
+  border: 1px solid rgba(72,91,120,.15);
+  border-radius: var(--radius-hf-sm, 6px);
+  box-shadow: 0 2px 4px 0 rgba(72,91,120,.07);
+  overflow: hidden;
+}
+.hf-alert::before {
+  content: '';
+  position: absolute;
+  left: 0; right: 0; top: 0;
+  height: 3px;
+  background: currentColor;
+}
+.hf-alert__icon {
+  flex-shrink: 0;
+  width: 26px; height: 26px;
+  border-radius: 5px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: currentColor;
+}
+.hf-alert__icon > svg {
+  width: 16px; height: 16px;
+  color: var(--color-hf-on-accent, #fff);
+  stroke: var(--color-hf-on-accent, #fff);
+  fill: none;
+}
+.hf-alert__body { flex: 1; min-width: 0; color: var(--color-hf-fg, #2B2B2B); }
+.hf-alert__title {
+  font-size: var(--font-size-hf-xl, 18px);
+  font-weight: var(--font-weight-hf-medium, 500);
+  line-height: 1.3;
+  margin: 0 0 4px;
+  color: var(--color-hf-fg, #2B2B2B);
+}
+.hf-alert__text {
+  font-size: var(--font-size-hf-md, 15px);
+  line-height: 1.4;
+  color: var(--color-hf-gray-700, #50627E); /* TODO Phase 2 — review fg axis */
+  margin: 0;
+}
+.hf-alert__close {
+  position: absolute; top: 12px; right: 12px;
+  width: 24px; height: 24px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: transparent; border: 0; border-radius: 4px;
+  color: var(--color-hf-gray-500, #99A1B7);
+  cursor: pointer;
+  transition: color 200ms, background 200ms;
+}
+.hf-alert__close:hover {
+  color: var(--color-hf-fg, #2B2B2B);
+  background: var(--color-hf-bg-muted, #F1F3F6);
+}
+
+/* Variants — set accent color via currentColor */
+.hf-alert--success { color: var(--color-hf-status-success); }
+.hf-alert--info    { color: var(--color-hf-accent); }
+.hf-alert--warn    { color: var(--color-hf-status-warning); }
+.hf-alert--error   { color: var(--color-hf-status-error); }
+
+/* Tinted modifier */
+.hf-alert--tinted.hf-alert--success { background: rgba(89,181,157,.06); }
+.hf-alert--tinted.hf-alert--info    { background: rgba(36,175,232,.06); }
+.hf-alert--tinted.hf-alert--warn    { background: rgba(255,189,90,.10); }
+.hf-alert--tinted.hf-alert--error   { background: rgba(234,101,101,.06); }
+
+/* Page banner */
+.hf-alert--banner {
+  border-radius: 0;
+  border-left: 0; border-right: 0;
+  box-shadow: none;
+  background: currentColor;
+}
+.hf-alert--banner::before { display: none; }
+.hf-alert--banner .hf-alert__body { color: var(--color-hf-on-accent, #fff); }
+.hf-alert--banner .hf-alert__title,
+.hf-alert--banner .hf-alert__text { color: var(--color-hf-on-accent, #fff); }
+.hf-alert--banner .hf-alert__icon { background: rgba(255,255,255,.18); }
+.hf-alert--banner .hf-alert__close { color: rgba(255,255,255,.7); }
+.hf-alert--banner .hf-alert__close:hover { color: var(--color-hf-on-accent, #fff); background: rgba(255,255,255,.12); }
+
+/* Compact */
+.hf-alert--compact { padding: 10px 36px 10px 14px; gap: 10px; }
+.hf-alert--compact .hf-alert__icon { width: 20px; height: 20px; border-radius: 4px; }
+.hf-alert--compact .hf-alert__icon > svg { width: 12px; height: 12px; }
+.hf-alert--compact .hf-alert__title {
+  font-size: var(--font-size-hf-base, 14px);
+  font-weight: var(--font-weight-hf-semibold, 600);
+  margin-bottom: 0;
+}
+.hf-alert--compact .hf-alert__text { font-size: var(--font-size-hf-sm, 13px); }
+.hf-alert--compact .hf-alert__close { top: 8px; right: 8px; }
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * TOAST (.hf-toast)
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-toast {
+  display: inline-flex; align-items: center; gap: 10px;
+  padding: 10px 14px;
+  background: var(--color-hf-bg-surface, #fff);
+  border: 1px solid rgba(72,91,120,.15);
+  border-radius: var(--radius-hf-lg, 9px);
+  box-shadow: var(--shadow-hf-modal, 0 6px 18px rgba(0,0,0,.10));
+  min-width: 280px; max-width: 420px;
+  color: var(--color-hf-fg, #2B2B2B);
+  font-size: var(--font-size-hf-base, 14px);
+}
+.hf-toast__icon { flex-shrink: 0; width: 20px; height: 20px; }
+.hf-toast__text { flex: 1; }
+.hf-toast__close {
+  flex-shrink: 0;
+  width: 20px; height: 20px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: transparent; border: 0; border-radius: 4px;
+  color: var(--color-hf-gray-500, #99A1B7);
+  cursor: pointer; transition: color 200ms;
+}
+.hf-toast__close:hover { color: var(--color-hf-fg, #2B2B2B); }
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * MODAL (.hf-modal)
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-modal {
+  background: var(--color-hf-bg-surface, #fff);
+  border: 1px solid rgba(72,91,120,.15);
+  border-radius: var(--radius-hf-sm, 6px);
+  box-shadow: 0 2px 4px 0 rgba(72,91,120,.18);
+  overflow: hidden;
+  width: 100%;
+}
+.hf-modal__header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 20px;
+  border-bottom: 1px solid var(--color-hf-border-subtle, #E4E8EF);
+}
+.hf-modal__title {
+  font-size: var(--font-size-hf-xl, 18px);
+  font-weight: var(--font-weight-hf-semibold, 600);
+  color: var(--color-hf-fg, #2B2B2B);
+  margin: 0;
+}
+.hf-modal__close {
+  width: 32px; height: 32px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-hf-sm, 6px);
+  color: var(--color-hf-gray-700, #50627E);
+  cursor: pointer;
+  transition: background 200ms, color 200ms;
+}
+.hf-modal__close:hover {
+  background: var(--color-hf-bg-muted, #F1F3F6);
+  color: var(--color-hf-fg, #2B2B2B);
+}
+.hf-modal__body { padding: 20px; }
+.hf-modal__footer {
+  display: flex; justify-content: flex-end; gap: 12px;
+  padding: 20px;
+  border-top: 0;
+  background: transparent;
+}
+.hf-modal--with-footer-border .hf-modal__footer {
+  border-top: 1px solid var(--color-hf-border-subtle, #E4E8EF);
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * CHECKBOX & RADIO (.hf-check, .hf-radio)
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-check,
+.hf-radio {
+  appearance: none; -webkit-appearance: none;
+  position: relative; flex-shrink: 0;
+  width: 18px; height: 18px;
+  margin: 0;
+  background: transparent;
+  border: 1px solid var(--color-hf-input-border, #DBDFE9);
+  cursor: pointer;
+  transition: border-color 200ms, background-color 200ms;
+}
+.hf-check { border-radius: var(--radius-hf-sm, 6px); }
+.hf-radio { border-radius: 9999px; }
+.hf-check:hover:not(:disabled),
+.hf-radio:hover:not(:disabled) { border-color: var(--color-hf-accent, #26ADE4); }
+.hf-check:checked,
+.hf-radio:checked {
+  background: var(--color-hf-accent, #26ADE4);
+  border-color: var(--color-hf-accent, #26ADE4);
+}
+.hf-check:checked::after {
+  content: '';
+  position: absolute; top: 2px; left: 5px;
+  width: 5px; height: 10px;
+  border: solid var(--color-hf-on-accent, #fff);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.hf-radio:checked::after {
+  content: '';
+  position: absolute; top: 50%; left: 50%;
+  width: 6px; height: 6px;
+  background: var(--color-hf-on-accent, #fff); border-radius: 9999px;
+  transform: translate(-50%, -50%);
+}
+.hf-check:disabled,
+.hf-radio:disabled { cursor: not-allowed; opacity: .5; }
+.hf-check:checked:disabled,
+.hf-radio:checked:disabled {
+  background: rgba(38,173,228,.5);
+  border-color: rgba(38,173,228,.5);
+  opacity: 1;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * DROPDOWN (.hf-dropdown-menu)
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-dropdown-menu {
+  background: var(--color-hf-bg-surface, #fff);
+  border-radius: var(--radius-hf-lg, 9px);
+  box-shadow: 0 1px 10px 0 rgba(0,0,0,.1);
+  min-width: 180px;
+  padding: 6px 0;
+  border: 1px solid rgba(228,232,239,.6);
+}
+.hf-dropdown-header {
+  padding: 10px 16px 8px;
+  font-size: var(--font-size-hf-xs, 11px);
+  font-weight: var(--font-weight-hf-semibold, 600);
+  color: var(--color-hf-gray-500, #99A1B7);
+  text-transform: uppercase;
+  letter-spacing: .04em;
+}
+.hf-dropdown-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 16px;
+  font-size: var(--font-size-hf-base, 14px);
+  color: var(--color-hf-fg, #2B2B2B);
+  cursor: pointer; transition: background 150ms;
+  line-height: 1.4;
+}
+.hf-dropdown-item:hover { background: var(--color-hf-menu-bg-hover, #F5F5F5); }
+.hf-dropdown-item.is-active {
+  background: var(--color-hf-accent-subtler, #EFF6FF);
+  color: var(--color-hf-accent, #24AFE8);
+}
+.hf-dropdown-item:focus-visible {
+  background: var(--color-hf-menu-bg-hover, #F5F5F5);
+  outline: 2px solid var(--color-hf-accent, #24AFE8);
+  outline-offset: -2px;
+}
+.hf-dropdown-item.danger { color: var(--color-hf-status-error, #EA6565); }
+.hf-dropdown-item.danger:hover { background: rgba(234,101,101,.08); }
+.hf-dropdown-item[aria-disabled="true"],
+.hf-dropdown-item.is-disabled {
+  color: var(--color-hf-fg-faint, #AEBCCF);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.hf-dropdown-item__shortcut {
+  margin-left: auto;
+  color: var(--color-hf-gray-500, #99A1B7);
+  font-size: 12px;
+}
+.hf-dropdown-item__icon {
+  color: var(--color-hf-gray-500, #99A1B7);
+  width: 16px; height: 16px;
+  flex-shrink: 0;
+}
+.hf-dropdown-item:hover .hf-dropdown-item__icon { color: var(--color-hf-gray-700, #50627E); }
+.hf-dropdown-item.danger .hf-dropdown-item__icon { color: currentColor; }
+.hf-dropdown-divider {
+  height: 1px;
+  background: var(--color-hf-border-subtle, #E4E8EF);
+  margin: 4px 0;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * SKELETON + SPINNER
+ * ════════════════════════════════════════════════════════════════════════════ */
+@keyframes hf-shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position:  200% 0; }
+}
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--color-hf-bg-muted, #F1F3F6) 25%,
+    var(--color-hf-border-subtle, #E4E8EF) 50%,
+    var(--color-hf-bg-muted, #F1F3F6) 75%
+  );
+  background-size: 200% 100%;
+  animation: hf-shimmer 1.4s infinite;
+  border-radius: 4px;
+}
+
+@keyframes hf-spin { to { transform: rotate(360deg); } }
+.hf-spin { animation: hf-spin .6s linear infinite; }