fold-ng 0.2.1 → 0.4.0

package/llms.txt

@@ -19,15 +19,15 @@ with a `@selector` and an `@example`.
 
 - [Install & quickstart](https://github.com/hugoheynard/fold-ng#readme): `npm install fold-ng`, import tokens, use standalone components.
 - [Design tokens](https://github.com/hugoheynard/fold-ng#the-two-tier-model): two-tier model — primitives (`--fold-ref-*`) → semantic (`--fold-color-*`); components consume the semantic layer only.
-- [Theming](https://github.com/hugoheynard/fold-ng#consuming-the-tokens): `data-theme="umbra|lumen|bubbly|navi"`; re-theme by re-pointing the semantic layer, never touching a component.
+- [Theming](https://github.com/hugoheynard/fold-ng#consuming-the-tokens): `data-theme="umbra|lumen|bubbly|navi|titan"`; re-theme by re-pointing the semantic layer, never touching a component.
 
 ## Components
 
 - Actions: `[foldButton]` (on a real `<button>`/`<a>`; `emphasis` × `intent` axes; `loading`), `fold-button-icon` (momentary), `fold-toggle-icon` (toggle), `fold-link`.
 - Forms: `fold-input`, `fold-number-input`, `fold-select`, `fold-search`, `fold-slider`, `fold-range-slider`, `fold-file-dropzone` (Angular Signal Forms — no `ngModel`/`ReactiveFormsModule`).
 - Overlays: `fold-panel-host` / `fold-panel-header` (modal side panels with accessible name, `inert` background barrier, focus trap, scroll-lock; imperative `open<TData,TResult>()` → typed `FoldPanelRef`).
-- Navigation: `fold-menu`, `fold-nav-launcher`, `fold-tab-nav`.
-- Layout: `fold-app-shell`, `fold-page-layout`, `fold-aside-layout`, `fold-tab-layout`, `fold-hero-section`.
+- Navigation: `fold-menu`, `fold-nav-launcher`, `fold-view-nav` (tab-styled nav bar; items with a `link` render real `<a routerLink>` with `aria-current` + auto active state, else buttons; `direction="auto"`, `collapsed` icon rail), `fold-tabs` + `fold-tab-panel` (the in-page ARIA Tabs widget — `role="tablist"`, roving arrow keys).
+- Layout: `fold-app-shell`, `fold-page-layout`, `fold-aside-layout`, `fold-nav-layout` (places a nav/tabs bar + content, folds side↔top), `fold-hero-section`.
 - Content: `fold-card`, `fold-hero-card`, `fold-badge`, `fold-status-badge`, `fold-avatar`, `fold-avatar-list`, `fold-timeline`, `fold-data-table`, `fold-paginator`, `fold-field`.
 - Feedback: `fold-callout`, `fold-disclosure`, `fold-toast`, `fold-loading`, `fold-empty-state`.
 - Foundations: `fold-icon` (114 built-in SVGs + registry), `fold-spinner`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fold-ng",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Accessible, dark-first Angular 22 UI component library & design system — signals-first, standalone, zoneless, SSR-ready. Design tokens + WCAG-minded components, themeable to the bone.",
   "keywords": [
     "angular",

package/tokens/primitives.css

@@ -108,6 +108,25 @@
   --fold-ref-grape-600: #9333ea; /* hover / strong              */
   --fold-ref-grape-700: #7e22ce; /* readable brand text         */
 
+  /* ── Steel / Titanium — the TITAN theme families ──────────────
+     Brushed titanium, light: a cool near-neutral steel ramp for the
+     brushed silver page, the header + rails at its own tint, and the
+     bright polished cards that float on it — plus a HEAT-anodized
+     titanium brand, the copper-orange the metal takes when torched. */
+  --fold-ref-steel-900: #1b1f24; /* graphite body text              */
+  --fold-ref-steel-600: #566069; /* secondary text                 */
+  --fold-ref-steel-500: #7c8894; /* muted text                     */
+  --fold-ref-steel-400: #9aa6b1; /* faded text                     */
+  --fold-ref-steel-300: #c0c8d0; /* solid brushed-steel border     */
+  --fold-ref-steel-200: #d4dae1; /* brushed page ground            */
+  --fold-ref-steel-150: #e2e7ec; /* header · rail 2 · hover · divider */
+  --fold-ref-steel-100: #eef1f5; /* raised rail plate · sunken     */
+  --fold-ref-steel-50: #f8fafc; /* bright polished card             */
+
+  --fold-ref-titanium-700: #863810; /* brand text (burnt copper)    */
+  --fold-ref-titanium-600: #a5451a; /* hover / strong               */
+  --fold-ref-titanium-500: #c2521b; /* brand base (copper-orange · AA w/ white) */
+
   /* ── Pure black — pairs with white for neutral alpha overlays */
   --fold-ref-black: #000000;
 }

package/tokens/scales.css

@@ -55,6 +55,14 @@
   --fold-space-lg: 16px;
   --fold-space-xl: 20px;
 
+  /* Rail-width scale — the shared widths for the nav-rail hierarchy, named to
+     pair 1:1 with the `--fold-color-bg-rail-*` colour tokens (primary app menu →
+     secondary workspace/aside → tertiary in-page nav). Retune once, every rail
+     follows; each layout's own `--fold-<layout>-rail-*` var still overrides. */
+  --fold-rail-primary: 64px; /* app menu — the compact icon rail (fold-app-shell) */
+  --fold-rail-secondary: 220px; /* workspace / content aside (fold-aside-layout) */
+  --fold-rail-tertiary: 200px; /* in-page / section nav (fold-nav-layout) */
+
   /* Motion scale — transition shorthands (duration + easing bundled, matching
      the app so `--t-*` bridge onto these 1:1). One knob per interaction speed. */
   --fold-motion-fast: 0.1s ease;
@@ -104,3 +112,14 @@
   --fold-radius-md: 16px;
   --fold-radius-lg: 24px;
 }
+
+/* ── Theme shape override: TITAN ──────────────────────────────
+   Softened, iPhone-premium: corners rounded a step past the base so a
+   polished-steel card reads like a device, not a slab — but short of
+   bubbly's pill. `pill` and `round` stay: shapes, not scale steps. */
+[data-theme="titan"] {
+  --fold-radius-xs: 5px;
+  --fold-radius-sm: 10px;
+  --fold-radius-md: 14px;
+  --fold-radius-lg: 20px;
+}

package/tokens/semantic.css

@@ -186,6 +186,99 @@
   color: var(--fold-color-text);
 }
 
+/* ── Accent surface — an auto-inverting region ────────────────────────────────
+   `[data-surface="accent"]` (stamped by fold-card's `surface="accent"`, or the
+   `foldSurface` directive) fills with the brand accent and re-points its whole
+   content sub-tree to an on-accent palette — text, borders, band gradation and
+   even nested buttons / links / icon-tiles read on the accent, with no
+   per-component code.
+
+   The move that makes this both theme-agnostic AND able to *swap* the brand pair
+   (`primary` ↔ `on-primary`, needed for a solid button or a filled icon tile)
+   without a CSS custom-property cycle: the accent + its ink are CAPTURED on the
+   surface element (where the tokens still hold their normal values), then the
+   inverted role-set is applied to DESCENDANTS from those captures — so a role can
+   reference the pre-inversion value it is replacing. Every value is a `color-mix`
+   of the captured pair, so it holds on every theme, and the surface and band
+   steps stay a lighter shade of the accent (gradation kept in-hue).
+
+   A theme that needs to diverge overrides any role by nesting a rule for its own
+   `[data-theme=…]` under `[data-surface="accent"]` — the same seam as chrome. */
+[data-surface="accent"] {
+  color: var(--fold-color-on-primary);
+  --_accent-ink: var(--fold-color-on-primary);
+  --_accent-fill: var(--fold-color-primary);
+}
+[data-surface="accent"] * {
+  /* text ramp → the light ink. COMPRESSED vs a normal surface: an accent ground
+     has little contrast headroom (a mid-bright accent caps white text near 3:1),
+     so the accent card is an emphasis surface — its text clears AA-large (3:1),
+     asserted by accent-contrast.spec.ts, and secondary/muted keep more ink than
+     they would on the page. A light accent that still reads thin overrides the
+     ramp per theme (surfaces.md). */
+  --fold-color-text: var(--_accent-ink);
+  --fold-color-text-secondary: color-mix(
+    in srgb,
+    var(--_accent-ink) 96%,
+    transparent
+  );
+  --fold-color-text-muted: color-mix(
+    in srgb,
+    var(--_accent-ink) 74%,
+    transparent
+  );
+  --fold-color-text-faded: color-mix(
+    in srgb,
+    var(--_accent-ink) 58%,
+    transparent
+  );
+  /* borders + separators → thin ink lines */
+  --fold-color-border: color-mix(in srgb, var(--_accent-ink) 24%, transparent);
+  --fold-color-border-subtle: color-mix(
+    in srgb,
+    var(--_accent-ink) 15%,
+    transparent
+  );
+  /* nested surfaces + raised tiles/bands → a lighter step of the ACCENT itself */
+  --fold-color-surface-card: color-mix(
+    in srgb,
+    var(--_accent-ink) 12%,
+    var(--_accent-fill)
+  );
+  --fold-color-surface-raised: color-mix(
+    in srgb,
+    var(--_accent-ink) 16%,
+    var(--_accent-fill)
+  );
+  --fold-color-surface-hover: color-mix(
+    in srgb,
+    var(--_accent-ink) 18%,
+    var(--_accent-fill)
+  );
+  --fold-color-surface-sunken: color-mix(
+    in srgb,
+    var(--_accent-ink) 8%,
+    var(--_accent-fill)
+  );
+  /* the brand pair, SWAPPED from the captures (no cycle): the fill becomes the
+     light ink (link text, glass button, chip ground) and its on-colour becomes
+     the accent — so a filled icon tile or solid button reads accent-on-light. */
+  --fold-color-primary: var(--_accent-ink);
+  --fold-color-on-primary: var(--_accent-fill);
+  --fold-color-primary-text: var(--_accent-ink);
+  --fold-color-primary-strong: var(--_accent-ink);
+  --fold-color-primary-surface: color-mix(
+    in srgb,
+    var(--_accent-ink) 16%,
+    transparent
+  );
+  --fold-color-primary-border: color-mix(
+    in srgb,
+    var(--_accent-ink) 32%,
+    transparent
+  );
+}
+
 /* ── Elevated surfaces ────────────────────────────────────────
    A `[data-elevated]` (stamped by the `[foldElevated]` directive) is a raised
    card: radius + shadow, riding on the element's own background so its colour
@@ -702,3 +795,148 @@
     transparent
   );
 }
+
+/* ── Extra theme: TITAN ───────────────────────────────────────
+   Brushed titanium, light + warm. A cool brushed-steel ground — the
+   header + rails sit at the page's own tint, so the top reads frameless
+   — with bright polished cards that float off it on the shared elevation
+   shadow (that lift is the "raised metal piece", no per-theme shadow
+   needed). The brand is HEAT-anodized titanium: the copper-orange the
+   metal takes when torched, warming the whole steel read. Content borders
+   re-point to a SOLID steel primitive (a palpable machined seam, where
+   the light themes use an alpha hairline); corners soften in scales.css.
+   Status families hold at the lumen (light) tints — only ground + brand
+   move. Uniform-polarity, so no chrome override is needed. */
+[data-theme="titan"] {
+  /* Surfaces — header + rails at the page's own tint (a frameless top) */
+  --fold-color-bg-page: var(--fold-ref-steel-200);
+  --fold-color-bg-header: var(--fold-ref-steel-150);
+  --fold-color-bg-rail-primary: var(--fold-ref-steel-100);
+  --fold-color-bg-rail-secondary: var(--fold-ref-steel-150);
+  --fold-color-bg-rail-tertiary: color-mix(
+    in srgb,
+    var(--fold-ref-black) 3%,
+    transparent
+  );
+
+  /* Primary / accent — heat-anodized copper-orange, deep enough for white */
+  --fold-color-primary: var(--fold-ref-titanium-500);
+  --fold-color-primary-strong: var(--fold-ref-titanium-600);
+  --fold-color-on-primary: var(--fold-ref-white);
+  --fold-color-primary-text: var(--fold-ref-titanium-700);
+  --fold-color-primary-surface: color-mix(
+    in srgb,
+    var(--fold-ref-titanium-500) 10%,
+    transparent
+  );
+  --fold-color-primary-border: color-mix(
+    in srgb,
+    var(--fold-ref-titanium-500) 28%,
+    transparent
+  );
+
+  /* Info (purple) — lumen tint */
+  --fold-color-info: var(--fold-ref-purple-600);
+  --fold-color-info-text: var(--fold-ref-purple-500);
+  --fold-color-info-surface: color-mix(
+    in srgb,
+    var(--fold-ref-purple-600) 8%,
+    transparent
+  );
+  --fold-color-info-border: color-mix(
+    in srgb,
+    var(--fold-ref-purple-600) 22%,
+    transparent
+  );
+
+  /* Warning (amber) */
+  --fold-color-warning: var(--fold-ref-amber-600);
+  --fold-color-warning-text: var(--fold-ref-amber-550);
+  --fold-color-warning-surface: color-mix(
+    in srgb,
+    var(--fold-ref-amber-600) 8%,
+    transparent
+  );
+  --fold-color-warning-border: color-mix(
+    in srgb,
+    var(--fold-ref-amber-600) 22%,
+    transparent
+  );
+
+  /* Alert (red) */
+  --fold-color-alert: var(--fold-ref-red-600);
+  --fold-color-alert-text: var(--fold-ref-red-450);
+  --fold-color-alert-surface: color-mix(
+    in srgb,
+    var(--fold-ref-red-600) 8%,
+    transparent
+  );
+  --fold-color-alert-border: color-mix(
+    in srgb,
+    var(--fold-ref-red-600) 22%,
+    transparent
+  );
+
+  /* Success (green) */
+  --fold-color-success: var(--fold-ref-green-500);
+  --fold-color-success-text: var(--fold-ref-green-550);
+  --fold-color-success-surface: color-mix(
+    in srgb,
+    var(--fold-ref-green-500) 10%,
+    transparent
+  );
+  --fold-color-success-border: color-mix(
+    in srgb,
+    var(--fold-ref-green-500) 25%,
+    transparent
+  );
+
+  /* Text — graphite on the light page (high contrast) */
+  --fold-color-text: var(--fold-ref-steel-900);
+  --fold-color-text-secondary: var(--fold-ref-steel-600);
+  --fold-color-text-muted: var(--fold-ref-steel-500);
+  --fold-color-text-faded: var(--fold-ref-steel-400);
+
+  /* Card — a bright polished-steel plate that floats off the silver ground */
+  --fold-color-surface-card: var(--fold-ref-steel-50);
+  --fold-color-surface-sunken: var(--fold-ref-steel-100);
+
+  /* Neutral surfaces — faint black overlays for hover/raise cues on light */
+  --fold-color-surface-subtle: color-mix(
+    in srgb,
+    var(--fold-ref-black) 3%,
+    transparent
+  );
+  --fold-color-surface-raised: color-mix(
+    in srgb,
+    var(--fold-ref-black) 5%,
+    transparent
+  );
+  --fold-color-surface-hover: var(
+    --fold-ref-steel-150
+  ); /* solid raised hover */
+
+  /* Borders — SOLID brushed-steel seams (the palpable metal edge), where the
+     light themes use an alpha hairline. */
+  --fold-color-border: var(--fold-ref-steel-300);
+  --fold-color-border-subtle: var(--fold-ref-steel-150);
+
+  /* Glass — frosted brushed steel */
+  --fold-color-glass: color-mix(
+    in srgb,
+    var(--fold-ref-steel-50) 66%,
+    transparent
+  );
+  --fold-color-glass-border: color-mix(
+    in srgb,
+    var(--fold-ref-black) 12%,
+    transparent
+  );
+
+  /* Scrim — a darkening veil behind the mobile nav drawer. */
+  --fold-color-scrim: color-mix(
+    in srgb,
+    var(--fold-ref-black) 45%,
+    transparent
+  );
+}