@omega.js/web 0.1.0

package/themes/_template/README.md

@@ -0,0 +1,115 @@
+# Theme Template
+
+A minimal, copy-paste starting point for a **brand-new @omega.js/web theme** —
+whether you're adding one inside this package (`themes/<id>/`) or creating one
+in your own consumer project (`src/themes/<id>/`, under the Eleventy INPUT dir
+— the consumer-local copy beats the packaged one with the same id). A copy
+works as-is in either place; "Consumer themes" below has the one caveat and
+the lighter alternative.
+
+> The design-system contract (tokens, motion, brand ramps, the classy
+> vocabulary): [`docs/shared/theming.md`](../../../../docs/shared/theming.md).
+
+## Create a theme from this template
+
+1. **Copy this folder** to your theme id (the `_` prefix excludes this template
+   from selection, so rename it):
+   - Inside the package: `themes/my-theme/`
+   - In a consumer: `src/themes/my-theme/`
+2. **Select it** in `omega.json5`:
+   ```json5
+   theme: {
+     id: "my-theme",
+   }
+   ```
+3. **Customize** `_config.scss` (tokens), `css/` (styles), and `_theme.js`
+   (behaviors). Restyle Bootstrap's own classes (`.btn`, `.card`, `.navbar`,
+   `.form-control`) so the shared layouts pick up your look with no HTML edits.
+4. **Layouts, includes, and section JSON are inherited automatically — zero
+   copies.** The engine resolves every file through a layered union
+   (consumer → your theme → classy → core), so all ~40 page layouts render
+   without you owning a single one. Override a layout only when its *markup*
+   (not just CSS) must differ — create the same path inside your theme
+   (`<your-theme>/_layouts/frontend/pages/<page>.html`) and yours wins.
+
+## The CSS boundary (read this before shipping a partial theme)
+
+Unlike layouts/includes, the MAIN stylesheet does **not** fall through:
+exactly one `_theme.scss` loads — yours. The shared layouts you inherit emit
+classy's `omega-*` content vocabulary (nav, footer, marketing sections,
+auth/form panels — see `docs/shared/theming.md`), so a theme that doesn't restyle
+that vocabulary renders those pages structurally intact but unstyled beyond
+Bootstrap + core tokens/shell/motion. Budget for it: restyle the vocabulary
+namespaces you keep, or override the layouts whose markup you replace.
+
+## Consumer themes: sibling resolution, and the lighter partial route
+
+This template is a **full sibling theme** — its `_config.scss` forwards
+`../bootstrap/scss/bootstrap.scss` (its own Bootstrap) and its `_theme.scss`
+imports classy's token-pure floor partials and `../bootstrap/overrides`. Copied
+verbatim into `src/themes/my-theme/`, **it compiles**. A relative `@use`/
+`@import` is tried against the importing file first — `src/themes/bootstrap/`,
+`src/themes/classy/`, which don't exist — and then against the build's sass
+`loadPaths`, which include every LAYER root. The last theme layer is always
+`themes/base`, base normally resolves to the PACKAGED one, and packaged base
+sits *inside* the packaged themes root — so `themes/base/../bootstrap/…` and
+`themes/base/../classy/…` land on the real files. Your copy builds with its own
+Bootstrap, the classy floor, and your own rules last.
+
+**The one thing that breaks it: shipping your own `src/themes/base/`.** The
+theme chain resolves consumer-local-first for *every* id, base included — so
+your base shadows the packaged one, the packaged themes root drops out of the
+loadPaths, and every `../bootstrap/…` / `../classy/…` import fails the build
+("Can't find stylesheet to import"). Own the base layer only if nothing in
+your theme reaches a packaged sibling through `../`.
+
+The **partial theme** is the smaller route, and the one to prefer unless you
+genuinely need your own Bootstrap config: it rides the packaged chain through
+the inheritance hatch instead of shipping a second Bootstrap. After copying,
+make it one —
+
+1. Put the hatch on the FIRST line of `_theme.scss`, and pass your tokens
+   through it (`themes/classy/_config.scss` names every `!default` knob):
+   ```scss
+   @forward 'omega:theme' with ($primary: #d6336c, $border-radius: .75rem);
+   ```
+2. Drop the `@forward '../bootstrap/scss/bootstrap.scss' with (…)` clause from
+   `_config.scss` (keep the file for your own sass variables), and drop the
+   `../classy/*` and `../bootstrap/overrides` imports from `_theme.scss` — the
+   hatch emits that whole configured chain, and your rules land after it so
+   they win the cascade.
+3. Drop `@forward 'config';` from `_theme.scss` too — keep the
+   `@use 'config' as *;` beneath it. The hatch already re-exports `$primary`,
+   `$font-family-sans-serif` and friends; re-forwarding your own `!default`
+   copies of those names is the
+   sass error *"Two forwarded modules both define a variable named $primary"*.
+   `_config.scss` stays a plain sass-variable module for your own partials
+   (`_root.scss` reads it); anything you want **Bootstrap** to see goes in the
+   hatch's `with (…)` clause instead.
+
+Both lanes, and which one a theme is on: `docs/shared/theming.md`
+§ "CSS fall-through — the two lanes".
+
+## What's here
+
+```
+_template/
+├── _config.scss              ← design tokens (!default) + Bootstrap forward
+├── _theme.scss               ← SCSS entry (config → root → styles → bootstrap overrides)
+├── _theme.js                 ← JS entry (Bootstrap UMD + DOM-ready behaviors)
+├── README.md                 ← this file
+└── css/
+    ├── base/_root.scss        ← SCSS → CSS-variable bridge (light/dark)
+    └── components/_components.scss  ← restyle Bootstrap classes here
+```
+
+## Principles (the contract lives in docs/shared/theming.md)
+
+- **Tokens are `!default`** so consumers can override without forking your theme.
+- **Bridge to CSS variables** in `_root.scss` — the `--omega-*` token names are
+  the stable API; light + dark ship together.
+- **Don't duplicate the shared layers** — core tokens/shell/motion CSS and
+  `bootstrap/overrides` are in every build already.
+- **Namespace your own components** (`.mytheme-*`) to avoid collisions;
+  runtime-stamped classes must live in the `omega-` namespace (PurgeCSS
+  safelist).

package/themes/_template/_config.scss

@@ -0,0 +1,60 @@
+// <Theme Name> Configuration
+// ALL customizable variables live here with !default so consuming projects can
+// override any of them BEFORE the theme is imported. Keep this file as the
+// single source of truth for your theme's design tokens.
+
+// ============================================
+// Bootstrap Color Overrides
+// ============================================
+$primary:   #3B82F6 !default;
+$secondary: #6B7280 !default;
+$success:   #10B981 !default;
+$info:      #06B6D4 !default;
+$warning:   #F59E0B !default;
+$danger:    #EF4444 !default;
+$light:     #F9FAFB !default;
+$dark:      #111827 !default;
+
+// ============================================
+// Surfaces (light + dark mode)
+// ============================================
+// Define your page/card backgrounds for each mode. _root.scss bridges these
+// into CSS variables so dark-mode switching needs no recompilation.
+$theme-bg-light:         #FFFFFF !default;
+$theme-surface-light:    #F3F4F6 !default;
+$theme-bg-dark:          #0B0B0F !default;
+$theme-surface-dark:     #16161C !default;
+
+// ============================================
+// Typography
+// ============================================
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !default;
+$headings-font-weight: 700 !default;
+
+// ============================================
+// Component sizing
+// ============================================
+// Match Classy's avatar map so the shared layouts/includes render correctly.
+$avatar-sizes: (
+  null: 3rem, 2xs: 0.5rem, xs: 1.5rem, sm: 2rem, md: 2.5rem,
+  lg: 3.5rem, xl: 5rem, 2xl: 7.5rem, 3xl: 10rem, 4xl: 12.5rem, 5xl: 15rem
+) !default;
+
+// ============================================
+// Forward Bootstrap with our configuration
+// ============================================
+// Pass your overridden tokens into Bootstrap so .btn/.card/.form-control etc.
+// are generated with your colors. Add/remove forwards as your theme needs.
+@forward '../bootstrap/scss/bootstrap.scss' with (
+  $primary: $primary,
+  $secondary: $secondary,
+  $success: $success,
+  $info: $info,
+  $warning: $warning,
+  $danger: $danger,
+  $light: $light,
+  $dark: $dark,
+  $font-family-sans-serif: $font-family-sans-serif,
+  $headings-font-weight: $headings-font-weight,
+  $enable-negative-margins: true
+);

package/themes/_template/_theme.js

@@ -0,0 +1,14 @@
+// <Theme Name> — JS entry point
+// Loaded at runtime via webpack's __theme__ alias. Exposes Bootstrap globally
+// and runs your theme behaviors once the DOM is ready.
+import bootstrap from '__main_assets__/themes/bootstrap/js/index.umd.js';
+import { ready as domReady } from '@omega.js/client/modules/dom.js';
+
+// Make Bootstrap available globally (used by omega utilities + components)
+window.bootstrap = bootstrap;
+
+// Initialize theme behaviors when the DOM is ready
+domReady().then(() => {
+  // Add your theme's initializers here, e.g.:
+  // import('./js/navbar-scroll.js').then(m => m.default());
+});

package/themes/_template/_theme.scss

@@ -0,0 +1,28 @@
+// <Theme Name> — SCSS entry point
+// Import order matters: config (loads Bootstrap with your tokens) → root vars →
+// your styles → universal Bootstrap overrides (shared across all omega themes).
+
+// Forward config so consuming projects can override your !default tokens
+@forward 'config';
+@use 'config' as *;
+
+// CSS custom properties (light/dark bridge)
+@import 'css/base/root';
+
+// The classy app/auth FLOOR: fall-through surfaces (auth, dashboard/account,
+// admin) render classy layouts whose vocabulary is token-pure — these partials
+// paint through YOUR token values. Keep them EARLY so your rules win collisions.
+// Removing them leaves those pages unstyled (the build warns — #98).
+@import '../classy/css/layout/shell';
+@import '../classy/css/layout/footer';
+@import '../classy/css/app/panels';
+@import '../classy/css/pages/auth';
+@import '../classy/css/components/receipt';
+@import '../classy/css/components/badges';
+
+// Your theme's styles (add base/layout/component partials as you grow)
+@import 'css/components/components';
+
+// Universal Bootstrap overrides shared by every omega theme
+// (avatars, color-shades, soft-colors, spacing, etc.). Must come AFTER Bootstrap.
+@import '../bootstrap/overrides';

package/themes/_template/css/base/_root.scss

@@ -0,0 +1,19 @@
+// <Theme Name> — CSS Custom Properties
+// Bridges SCSS config into runtime CSS variables. Components should read these
+// var(--*) tokens (never the raw SCSS values) so dark mode is one override block.
+
+:root,
+[data-bs-theme="light"] {
+  --bs-body-bg: #{$theme-bg-light};
+  --bs-body-bg-rgb: #{red($theme-bg-light)}, #{green($theme-bg-light)}, #{blue($theme-bg-light)};
+  --bs-secondary-bg: #{$theme-surface-light};
+  // Add your own tokens, e.g.:
+  // --theme-card-bg: #{$theme-surface-light};
+}
+
+[data-bs-theme="dark"] {
+  --bs-body-bg: #{$theme-bg-dark};
+  --bs-body-bg-rgb: #{red($theme-bg-dark)}, #{green($theme-bg-dark)}, #{blue($theme-bg-dark)};
+  --bs-secondary-bg: #{$theme-surface-dark};
+  // --theme-card-bg: #{$theme-surface-dark};
+}

package/themes/_template/css/components/_components.scss

@@ -0,0 +1,23 @@
+// <Theme Name> — Components
+// Restyle Bootstrap's own classes here so all inherited markup (nav, hero,
+// cards, forms, buttons) picks up your look with NO HTML changes. Add files
+// like _buttons.scss / _cards.scss as your theme grows and @import them in
+// _theme.scss. This starter keeps everything in one file to stay minimal.
+
+// Example: give buttons your theme's personality
+.btn {
+  font-weight: 600;
+  // ...your button styling...
+}
+
+// Example: cards
+.card {
+  background: var(--bs-secondary-bg);
+  // ...your card styling...
+}
+
+// Example: a theme-namespaced helper for your own page layouts
+.theme-box {
+  background: var(--bs-secondary-bg);
+  padding: 1.5rem;
+}

package/themes/base/README.md

@@ -0,0 +1,5 @@
+# base
+
+The structural markup layer every theme chain ends at: layouts, sections, includes, and components for all shared surfaces.
+It owns the neutral `omega-*` BEM vocabulary; themes are skins (scss over these selectors) and fork markup only for identity surfaces.
+Convention: `docs/web/sections.md` § "Markup convention: base, skin, fork" (#177).

package/themes/base/_components/data/org-chart/component.html

@@ -0,0 +1,33 @@
+{% comment %} Org chart: one root over a connected row of nodes. The
+connectors are drawn entirely by component.scss (the trunk hangs off the
+children row, the bus and its stubs off each node), so the markup is just the
+two levels — and a live page that renders the same class vocabulary from JS
+gets the same lines for free. {% endcomment %}
+<div class="omega-org-chart{% if args.class != blank %} {{ args.class }}{% endif %}">
+  {% iftruthy args.root %}
+    <div class="omega-org-chart__root">
+      <div class="card h-100">
+        <div class="card-body">
+          <p class="omega-org-chart__title mb-0">{{ args.root.title }}</p>
+          {% iftruthy args.root.sub %}<p class="omega-micro mb-0">{{ args.root.sub }}</p>{% endiftruthy %}
+          {% iftruthy args.root.meta %}<span class="omega-chip omega-badge-tone{% if args.root.tone != blank %} omega-tone-{{ args.root.tone }}{% endif %}">{{ args.root.meta }}</span>{% endiftruthy %}
+        </div>
+      </div>
+    </div>
+  {% endiftruthy %}
+  {% iftruthy args.nodes %}
+    <div class="omega-org-chart__children">
+      {% for node in args.nodes %}
+        <div class="omega-org-chart__node">
+          <div class="card h-100">
+            <div class="card-body">
+              <p class="omega-org-chart__title mb-0">{{ node.title }}</p>
+              {% iftruthy node.sub %}<p class="omega-micro mb-0">{{ node.sub }}</p>{% endiftruthy %}
+              {% iftruthy node.meta %}<span class="omega-chip omega-badge-tone{% if node.tone != blank %} omega-tone-{{ node.tone }}{% endif %}">{{ node.meta }}</span>{% endiftruthy %}
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  {% endiftruthy %}
+</div>

package/themes/base/_components/data/org-chart/component.json5

@@ -0,0 +1,33 @@
+{
+  description: 'Org chart — one root card over a connected row of node cards, joined by animated dashed connectors (repeating gradients, because a border\'s dash pattern cannot move). Under 768px the tree tilts onto its side: a spine down the left with an elbow into each card. The animation stops under prefers-reduced-motion. Each entry takes { title, sub, meta, tone } — `tone` is a 1–6 slot of the shared categorical ramp (--omega-chart-*), so a node\'s chip matches the same name\'s series on a chart. A live page rendering this class vocabulary from JS gets the same connectors.',
+
+  args: {
+    root: { type: 'object', description: 'The top card: { title, sub, meta, tone }' },
+    nodes: { type: 'array', description: 'The connected row, each { title, sub, meta, tone }' },
+    class: 'string',
+  },
+
+  // Mechanical only — the chart has no copy of its own to keep neutral
+  defaults: {},
+
+  demo: [
+    {
+      label: 'Root over four nodes',
+      args: {
+        root: { title: 'Manager', sub: 'orchestration', meta: 'lead', tone: 1 },
+        nodes: [
+          { title: 'Scout', sub: 'reads the repo', meta: 'research', tone: 2 },
+          { title: 'Worker', sub: 'builds the change', meta: 'build', tone: 3 },
+          { title: 'Verifier', sub: 'proves it', meta: 'review', tone: 4 },
+          { title: 'Advisor', sub: 'weighs the call', meta: 'counsel', tone: 5 },
+        ],
+      },
+    },
+    {
+      label: 'Root alone',
+      args: {
+        root: { title: 'Manager', sub: 'nobody dispatched yet' },
+      },
+    },
+  ],
+}

package/themes/base/_components/data/org-chart/component.scss

@@ -0,0 +1,183 @@
+// data/org-chart — the tree's connector geometry (§7 omega:sections lane).
+//
+// Every line is a repeating gradient rather than a border, for one reason:
+// a gradient's position is animatable and a border's dash pattern is not, and
+// the lines on this chart MOVE — a chart of what is happening RIGHT NOW reads
+// as live only if something on it is.
+//
+// Wide: the root centred over a row of nodes, a trunk down to a horizontal
+// bus, a stub down into each card. Under 768px the same tree turns on its
+// side — one spine down the left with an elbow into each card — because six
+// 16rem columns on a phone is not a chart, it is a scrollbar.
+
+.omega-org-chart {
+  --omega-org-line: var(--omega-line);
+  --omega-org-line-size: 2px;
+  --omega-org-drop: 1.5rem;
+}
+
+.omega-org-chart__root,
+.omega-org-chart__node {
+  flex: 0 0 auto;
+  position: relative;
+  width: 16rem;
+}
+
+.omega-org-chart__root {
+  margin-inline: auto;
+}
+
+.omega-org-chart__title {
+  font-weight: 650;
+}
+
+.omega-org-chart__children {
+  display: flex;
+  // `safe` keeps an overflowing row reachable: centring a row wider than its
+  // container puts the first card off the scrollable edge. An engine that
+  // does not know the keyword drops the declaration and starts the row at the
+  // left, which is the same rescue.
+  justify-content: safe center;
+  gap: 1rem;
+  // A row wider than the container scrolls sideways rather than wrapping into
+  // rows the bus cannot connect. The trunk is drawn INSIDE this padding
+  // rather than above the box, because a scroll container clips what hangs
+  // outside it.
+  overflow-x: auto;
+  padding-top: var(--omega-org-drop);
+  padding-bottom: 0.25rem;
+  position: relative;
+}
+
+// The trunk: from the root's bottom edge down to the bus.
+.omega-org-chart__children::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: calc(50% - (var(--omega-org-line-size) / 2));
+  width: var(--omega-org-line-size);
+  height: var(--omega-org-drop);
+  background-image: repeating-linear-gradient(180deg, var(--omega-org-line) 0 6px, transparent 6px 12px);
+  animation: omega-org-flow-down 1.2s linear infinite;
+}
+
+// Each node holds the drop the bus and its own stub are drawn in.
+.omega-org-chart__node {
+  padding-top: var(--omega-org-drop);
+}
+
+// The bus, in segments: one per node, reaching half the gap either side so
+// the segments meet. The first and last stop at their own centre, which is
+// what makes the bus span exactly from the first card to the last.
+.omega-org-chart__node::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -0.5rem;
+  right: -0.5rem;
+  height: var(--omega-org-line-size);
+  background-image: repeating-linear-gradient(90deg, var(--omega-org-line) 0 6px, transparent 6px 12px);
+  animation: omega-org-flow-right 1.2s linear infinite;
+}
+
+.omega-org-chart__node:first-child::after {
+  left: calc(50% - (var(--omega-org-line-size) / 2));
+}
+
+.omega-org-chart__node:last-child::after {
+  right: calc(50% - (var(--omega-org-line-size) / 2));
+}
+
+// The stub: down from the bus into the card.
+.omega-org-chart__node::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: calc(50% - (var(--omega-org-line-size) / 2));
+  width: var(--omega-org-line-size);
+  height: var(--omega-org-drop);
+  background-image: repeating-linear-gradient(180deg, var(--omega-org-line) 0 6px, transparent 6px 12px);
+  animation: omega-org-flow-down 1.2s linear infinite;
+}
+
+@keyframes omega-org-flow-down {
+  to {
+    background-position: 0 12px;
+  }
+}
+
+@keyframes omega-org-flow-right {
+  to {
+    background-position: 12px 0;
+  }
+}
+
+// Narrow: the same tree, stacked. The bus becomes a spine down the left and
+// each node's stub becomes an elbow into its card, so nothing floats free.
+@media (max-width: 767.98px) {
+  .omega-org-chart__root,
+  .omega-org-chart__node {
+    width: auto;
+  }
+
+  .omega-org-chart__children {
+    display: block;
+    overflow-x: visible;
+    padding-left: var(--omega-org-drop);
+  }
+
+  .omega-org-chart__children::before {
+    left: 0;
+  }
+
+  .omega-org-chart__node {
+    padding-top: 0;
+    margin-top: 1rem;
+  }
+
+  // The elbow, at the card's shoulder.
+  .omega-org-chart__node::before {
+    top: var(--omega-org-drop);
+    left: calc(var(--omega-org-drop) * -1);
+    width: var(--omega-org-drop);
+    height: var(--omega-org-line-size);
+    background-image: repeating-linear-gradient(90deg, var(--omega-org-line) 0 6px, transparent 6px 12px);
+    animation: omega-org-flow-right 1.2s linear infinite;
+  }
+
+  // The spine, in segments: each node carries the piece above it, and the
+  // last one stops at its own elbow instead of running past the bottom card.
+  //
+  // The first and last node are named here too. Their wide-layout rules trim
+  // the bus to a half segment, a media query adds no specificity of its own,
+  // and without the same two selectors on this side they would keep winning.
+  .omega-org-chart__node::after,
+  .omega-org-chart__node:first-child::after,
+  .omega-org-chart__node:last-child::after {
+    top: -1rem;
+    bottom: 0;
+    left: calc(var(--omega-org-drop) * -1);
+    right: auto;
+    width: var(--omega-org-line-size);
+    height: auto;
+    background-image: repeating-linear-gradient(180deg, var(--omega-org-line) 0 6px, transparent 6px 12px);
+    animation: omega-org-flow-down 1.2s linear infinite;
+  }
+
+  .omega-org-chart__node:last-child::after {
+    bottom: auto;
+    height: calc(1rem + var(--omega-org-drop));
+  }
+}
+
+// Last, and naming the trimmed segments too: this has to outrank BOTH
+// layouts, and a media query lends a rule no specificity to outrank them with.
+@media (prefers-reduced-motion: reduce) {
+  .omega-org-chart__children::before,
+  .omega-org-chart__node::before,
+  .omega-org-chart__node::after,
+  .omega-org-chart__node:first-child::after,
+  .omega-org-chart__node:last-child::after {
+    animation: none;
+  }
+}

package/themes/base/_components/heading/masthead/component.html

@@ -0,0 +1,22 @@
+{% comment %} Interior-page masthead cluster: omega-micro eyebrow + the
+omega-display--page h1 (+ optional em accent) + sub line. The calling layout
+owns the band shell (dotgrid section, container, duo/split wrappers, reveal
+stagger) — this is the repeated head only. Breadcrumb-eyebrow pages pass no
+eyebrow and keep their link row in the layout.
+
+#467: `first_paint` is the caller saying "this cluster IS the first viewport",
+and the reveal attributes come off — a band the visitor never scrolls to must
+not wait for the observer. The band itself declares data-omega-first-paint;
+this switch keeps the markup honest rather than shipping attributes the
+exemption has already neutralized. {% endcomment %}
+{% iffalsy args.first_paint %}{% assign masthead_reveal = " data-omega-reveal" %}{% endiffalsy %}
+{% iftruthy args.eyebrow %}
+  <span class="omega-micro d-block mb-3"{{ masthead_reveal }}>{{ args.eyebrow }}</span>
+{% endiftruthy %}
+<h1 class="omega-display omega-display--page{% if args.h1_class != blank %} {{ args.h1_class }}{% endif %}"{{ masthead_reveal }}>
+  {{ args.headline }}{% if args.headline_accent != blank %}
+  <em>{{ args.headline_accent }}</em>{% endif %}
+</h1>
+{% iftruthy args.sub %}
+  <p class="{{ args.sub_class }}"{{ masthead_reveal }}>{{ args.sub }}</p>
+{% endiftruthy %}

package/themes/base/_components/heading/masthead/component.json5

@@ -0,0 +1,30 @@
+{
+  description: 'Interior-page masthead head cluster — optional omega-micro eyebrow, the omega-display--page h1 with optional <em> accent, optional sub line. A COMPONENT: the page keeps its own shell (dotgrid section, container, duo/split wrappers) and composes this inside it; breadcrumb-eyebrow pages (blog taxonomy, alternative) pass no eyebrow and keep their link row in the layout. SHARED across the interior pages — defaults stay NEUTRAL (spec §6); sub_class/h1_class are mechanical knobs.',
+
+  args: {
+    eyebrow: 'string',
+    headline: 'string',
+    headline_accent: 'string',
+    sub: 'string',
+    sub_class: 'string',
+    h1_class: 'string',
+    first_paint: 'boolean', // #467: this cluster IS the first viewport — drop the reveal attributes, the band's data-omega-first-paint owns the paint
+  },
+
+  defaults: {
+    sub_class: 'omega-hero-split__sub',
+  },
+
+  // Showcase variants (spec §9)
+  demo: [
+    {
+      label: 'Eyebrow + accent + sub',
+      args: {
+        eyebrow: 'Guides',
+        headline: 'Everything about',
+        headline_accent: 'getting started',
+        sub: 'A short standfirst under the display headline.',
+      },
+    },
+  ],
+}

package/themes/base/_components/heading/section-head/component.html

@@ -0,0 +1,18 @@
+{% comment %} Section-head cluster: omega-micro eyebrow + the
+omega-display--section h2 (+ optional em accent) + plain sub line. The
+caller owns the omega-section-head wrapper div (its centering/duo/margin
+classes vary) and anything after the cluster — this is the inner head only.
+Sections compose it too (nested composition): pass the resolved STRING as
+superheadline. {% endcomment %}
+{% iftruthy args.superheadline %}
+  <span class="omega-micro">{{ args.superheadline }}</span>
+{% endiftruthy %}
+{% iftruthy args.headline %}
+  <h2 class="omega-display omega-display--section">
+    {{ args.headline }}{% if args.headline_accent != blank %}
+    <em>{{ args.headline_accent }}</em>{% endif %}
+  </h2>
+{% endiftruthy %}
+{% iftruthy args.sub %}
+  <p>{{ args.sub }}</p>
+{% endiftruthy %}

package/themes/base/_components/heading/section-head/component.json5

@@ -0,0 +1,27 @@
+{
+  description: 'Section-head cluster — optional omega-micro eyebrow, the omega-display--section h2 with optional <em> accent (whole h2 suppressed when headline is blank), optional plain sub line. A COMPONENT: the caller owns the omega-section-head wrapper div and everything after the cluster. Composed by layouts AND by sections (nested composition — pass the resolved string as superheadline, e.g. args.superheadline.text). Fully neutral: no defaults.',
+
+  args: {
+    superheadline: 'string',
+    headline: 'string',
+    headline_accent: 'string',
+    sub: 'string',
+  },
+
+  defaults: {},
+
+  // Showcase variants (spec §9) — stage_class supplies the wrapper the
+  // caller normally owns, so the demo renders in its natural shell.
+  demo: [
+    {
+      label: 'Full cluster',
+      stage_class: 'omega-section-head',
+      args: {
+        superheadline: 'Features',
+        headline: 'Built for',
+        headline_accent: 'momentum',
+        sub: 'A supporting line under the section head.',
+      },
+    },
+  ],
+}

package/themes/base/_components/pricing/features/component.html

@@ -0,0 +1,29 @@
+{% comment %} The price card's feature bullets — the ONE home of the list
+/pricing's plan cards, its one-time cards and the homepage plan band all
+render (#539). A feature the catalog gave a `definition` becomes the
+dotted-underline hover target Bootstrap's tooltip engine binds (the themes
+initialize tooltips page-wide, so the affordance works anywhere the list
+lands); a feature without one stays plain text. Values print through
+omega_commaify, which passes non-numeric strings ("Unlimited", "24/7")
+through untouched — then escape_once, because a catalog value is TEXT and a
+literal `<` must never open a tag the minifier can eat (#580). {% endcomment %}
+{% if args.features.size > 0 %}
+  <ul class="omega-price-card__features">
+    {% for feature in args.features %}
+      <li>
+        <span class="omega-feature-check text-success"><i class="fa-solid fa-check fa-sm"></i></span>
+        <span>
+          {% if feature.value and feature.value != true %}
+            {{ feature.value | omega_commaify | escape_once }}
+          {% endif %}
+          {% iftruthy feature.definition %}
+            <span class="text-decoration-underline text-decoration-dotted cursor-help" data-bs-toggle="tooltip" data-bs-title="{{ feature.definition }}">{{ feature.name }}</span>
+          {% endiftruthy %}
+          {% iffalsy feature.definition %}
+            {{ feature.name }}
+          {% endiffalsy %}
+        </span>
+      </li>
+    {% endfor %}
+  </ul>
+{% endif %}