domma-js 0.40.0 → 0.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "domma-js",
-    "version": "0.40.0",
+    "version": "0.42.0",
     "description": "Dynamic Object Manipulation & Modeling API - A complete front-end toolkit.",
     "main": "public/dist/domma.min.js",
     "module": "public/dist/domma.esm.js",
@@ -46,11 +46,12 @@
         "build:css": "node scripts/build-css.js",
         "validate:classes": "node scripts/validate-classes.js",
         "validate:theme": "node scripts/validate-theme-contrast.js",
+        "validate:contrast": "node scripts/validate-contrast-pairs.js",
         "validate:conventions": "node scripts/validate-conventions.js",
         "validate:showcase": "vitest run src/showcase-pages.test.js",
         "validate:showcase:strict": "SHOWCASE_STRICT=1 vitest run src/showcase-pages.test.js",
         "validate:showcase:baseline": "SHOWCASE_BASELINE=1 vitest run src/showcase-pages.test.js",
-        "validate": "npm run validate:classes && npm run validate:theme && npm run validate:conventions",
+        "validate": "npm run validate:classes && npm run validate:theme && npm run validate:contrast && npm run validate:conventions",
         "build:css-bundles": "node scripts/build-css-bundles.js",
         "build:archives": "node scripts/build-archives.js",
         "build:kickstart-files": "node scripts/build-kickstart-files.js",

package/public/dist/bundles/domma-complete.css

@@ -1,8 +1,8 @@
 /*!
- * Domma Complete CSS Bundle v0.40.0
+ * Domma Complete CSS Bundle v0.42.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-21T16:29:27.417Z
+ * Built: 2026-08-22T16:17:44.263Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.40.0
+ * Domma Core CSS v0.42.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-21T16:29:27.255Z
- * Commit: c788672
+ * Built: 2026-08-22T16:17:44.102Z
+ * Commit: 0f0475f
  */
 
 /**
@@ -4838,11 +4838,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Grid CSS v0.40.0
+ * Domma Grid CSS v0.42.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-21T16:29:27.259Z
- * Commit: c788672
+ * Built: 2026-08-22T16:17:44.108Z
+ * Commit: 0f0475f
  */
 
 /**
@@ -5463,11 +5463,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.40.0
+ * Domma Elements CSS v0.42.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-21T16:29:27.264Z
- * Commit: c788672
+ * Built: 2026-08-22T16:17:44.114Z
+ * Commit: 0f0475f
  */
 
 /**
@@ -5729,8 +5729,13 @@ body.dm-cloaked.dm-ready {
     border-color: var(--dm-primary);
 }
 
+/* No --dm-primary-text here. That token is the foreground for text drawn ON a
+   primary fill, which is what the header and footer above do. The body has no
+   fill - it sits on the card's own surface - so borrowing the fill foreground
+   put near-black text (#1a1a1a in the dark themes) on a dark surface, at 1.19
+   contrast. Inheriting --dm-text from the card is the correct behaviour. */
 .card-primary .card-body {
-    color: var(--dm-primary-text, var(--dm-white));
+    color: var(--dm-text);
 }
 
 .card-primary .card-footer {
@@ -7645,10 +7650,25 @@ code {
     border-radius: 0;
 }
 
+/* The active link used to take --dm-primary as its text colour. --dm-primary is
+   a mid-tone in several theme families, so on the navbar surface it measured as
+   low as 1.72 (lemon-light). Primary stays as the accent - the tinted pill and
+   the underline - but the text itself uses the one token guaranteed to read on
+   this surface. */
+/* The active link used to take --dm-primary as its text colour. --dm-primary is
+   a mid-tone in several theme families, so on the navbar surface it measured as
+   low as 1.72 (lemon-light).
+
+   The affordance is now the primary underline plus the weight, and the text
+   uses the one token guaranteed to read on this surface. Deliberately no pill
+   background: a tint of --dm-primary shifts the bar toward the text colour in
+   the themes where primary is light, which cost ~2 points of contrast on the
+   already-tightest combination (dark theme + .navbar-light). Underline only
+   means the active state can never read worse than the brand beside it. */
 .navbar-link.active {
-    color: var(--dm-primary);
+    color: var(--dm-navbar-text);
     font-weight: 500;
-    background-color: color-mix(in srgb, var(--dm-primary) 10%, transparent);
+    box-shadow: inset 0 -2px 0 0 var(--dm-primary);
 }
 
 .nav-version {
@@ -7656,78 +7676,77 @@ code {
     color: var(--dm-text-secondary, #eee);
 }
 
-/* Light navbar variant */
-
-.navbar-light {
-    background-color: var(--dm-surface);
-    border-bottom-color: var(--dm-border);
-}
-
-.navbar-light .navbar-brand,
-.navbar-light .navbar-brand-text {
-    color: var(--dm-text);
-}
+/* ---------------------------------------------------------------------------
+   Navbar variants
 
-.navbar-light .navbar-link {
-    color: var(--dm-text-secondary);
-}
+   These predate the theme system and used to be written as absolute colours:
+   .navbar-dark painted the bar with --dm-background and its text with
+   --dm-text-inverse. Those two tokens resolve to the SAME value in every dark
+   theme (both are the theme's darkest slate), so the brand rendered at 1.00
+   contrast - invisible, on every dark theme, in every consumer. .navbar-light
+   failed the mirror way in light themes: a white bar with white text, and an
+   active link at 2.56.
 
-.navbar-light .navbar-link:hover {
-    color: #ffffff !important;
-    background-color: #1e293b !important;
-    border-radius: var(--dm-radius-md);
-}
+   Every theme already ships the pair meant for this job - --dm-navbar-bg (the
+   theme's navbar surface) and --dm-navbar-text (text guaranteed to read on it).
+   So the variants are now tint modifiers on that surface rather than absolute
+   colours: "dark" sits a shade below the theme's navbar, "light" a shade above.
+   The two stay visually distinct, both follow the theme, and neither can
+   collide with its own foreground.
 
-/* Force dark hover in light mode using data-mode attribute */
-[data-mode="light"] .navbar-link:hover {
-    color: #ffffff !important;
-    background-color: #1e293b !important;
-    border-radius: var(--dm-radius-md);
-}
+   Measured worst case across 21 themes x both variants: 5.78 (was 1.00).
+   --------------------------------------------------------------------------- */
 
-.navbar-light .navbar-toggle {
-    color: var(--dm-text);
-}
+/* Light navbar variant */
 
-.navbar-light .navbar-toggle:hover {
-    background: var(--dm-background-alt);
-    color: var(--dm-text);
+.navbar-light {
+    background-color: color-mix(in srgb, #fff 18%, var(--dm-navbar-bg));
+    border-bottom-color: var(--dm-border);
 }
 
 /* Dark navbar variant */
 
 .navbar-dark {
-    background-color: var(--dm-background);
+    background-color: color-mix(in srgb, #000 18%, var(--dm-navbar-bg));
     border-bottom-color: var(--dm-border-dark);
 }
 
+.navbar-light .navbar-brand,
+.navbar-light .navbar-brand-text,
+.navbar-light .navbar-toggle,
 .navbar-dark .navbar-brand,
-.navbar-dark .navbar-brand-text {
-    color: var(--dm-text-inverse, var(--dm-white));
-}
-
+.navbar-dark .navbar-brand-text,
 .navbar-dark .navbar-toggle {
-    color: var(--dm-text-disabled);
-}
-
-.navbar-dark .navbar-toggle:hover {
-    background: var(--dm-surface);
-    color: var(--dm-text-inverse, var(--dm-white));
+    color: var(--dm-navbar-text);
 }
 
+/* Slightly muted against the brand, but never below AA. 85% is the floor that
+   clears 4.5 in every theme - 72% dropped grayve/wedding/christmas to 3.8-4.0. */
+.navbar-light .navbar-link,
 .navbar-dark .navbar-link {
-    color: var(--dm-gray-400, #adb5bd);
+    color: color-mix(in srgb, var(--dm-navbar-text) 85%, var(--dm-navbar-bg));
 }
 
+.navbar-light .navbar-link:hover,
 .navbar-dark .navbar-link:hover {
-    background-color: rgba(255, 255, 255, 0.3);
-    color: var(--dm-text-inverse, var(--dm-white));
-    border-radius: var(--dm-radius-sm);
+    color: var(--dm-navbar-text);
+    background-color: color-mix(in srgb, var(--dm-navbar-text) 12%, transparent);
+    border-radius: var(--dm-radius-md);
 }
 
-.navbar-dark .navbar-link.active {
-    background-color: var(--dm-surface);
-    color: var(--dm-text-inverse, var(--dm-white));
+.navbar-light .navbar-toggle:hover,
+.navbar-dark .navbar-toggle:hover {
+    background: color-mix(in srgb, var(--dm-navbar-text) 12%, transparent);
+    color: var(--dm-navbar-text);
+}
+
+/* Legacy forced hover for light mode. Kept as-is for the plain/transparent
+   navbar, but excluded from the two variants above - it carries !important and
+   would otherwise override their theme-derived hover. */
+[data-mode="light"] .navbar:not(.navbar-light):not(.navbar-dark) .navbar-link:hover {
+    color: #ffffff !important;
+    background-color: #1e293b !important;
+    border-radius: var(--dm-radius-md);
 }
 
 /* Dark navbar collapse border color (mobile) */
@@ -8006,23 +8025,19 @@ code {
     list-style: none;
 }
 
-/* Dark navbar dropdown styles */
-.navbar-dark .navbar-dropdown-menu {
-    background: var(--dm-surface);
-    border-color: var(--dm-border-dark, var(--dm-border));
-}
+/* Dark navbar dropdown styles
 
-.navbar-dark .navbar-dropdown-item {
-    color: var(--dm-gray-400, #adb5bd);
-}
-
-.navbar-dark .navbar-dropdown-item:hover {
-    background: rgba(255, 255, 255, 0.3);
-    color: var(--dm-text-inverse, var(--dm-white));
-}
+   The dropdown panel is painted from --dm-surface whatever the bar variant, so
+   the base rules above already render it correctly in both modes. The overrides
+   that used to live here only re-stated that same background while replacing
+   the text with a fixed grey and the hover with --dm-text-inverse over 30%
+   white - which measured 2.56 and 1.00 respectively in every light theme, and
+   3.25 on hover in the dark ones. The divider was being painted --dm-surface,
+   i.e. the panel's own colour, so it was invisible.
 
-.navbar-dark .navbar-dropdown-divider {
-    background: var(--dm-surface);
+   Only the border tint is worth keeping. */
+.navbar-dark .navbar-dropdown-menu {
+    border-color: var(--dm-border-dark, var(--dm-border));
 }
 
 /* ============================================
@@ -8062,14 +8077,9 @@ code {
     border-radius: var(--dm-radius-md);
 }
 
-.navbar-dark .navbar-submenu-toggle {
-    color: var(--dm-gray-400, #adb5bd);
-}
-
-.navbar-dark .navbar-submenu-toggle:hover {
-    background: rgba(255, 255, 255, 0.3);
-    color: var(--dm-text-inverse, var(--dm-white));
-}
+/* Same as the dropdown items above - the submenu toggle sits on the panel, not
+   on the bar, so the base --dm-text / --dm-hover-bg pairing is the correct one
+   and the fixed grey plus --dm-text-inverse overrides have been removed. */
 
 /* Submenu caret points to the side to signal a fly-out */
 .navbar-submenu-toggle .navbar-caret {
@@ -10790,7 +10800,9 @@ code {
     z-index: 1000;
     min-width: 10rem;
     padding: 0.5rem 0;
-    margin: 0.125rem 0 0;
+    /* No margin: the menu is placed by JS from `offset`, and a margin here would
+       silently add to it, so the box would not sit where it was measured to. */
+    margin: 0;
     background-color: var(--dm-surface);
     border: 1px solid var(--dm-border);
     border-radius: var(--dm-radius-md);
@@ -10808,30 +10820,13 @@ code {
 }
 
 /*
- * Hover bridge: the menu is rendered as a document.body sibling positioned with a
- * small offset/margin gap from its trigger. On a hover-triggered dropdown that gap
- * is a dead-zone - the pointer leaves the trigger before reaching the menu, firing
- * the close. These transparent pseudo-elements extend the menu's hoverable area
- * above and below it, so the trigger→menu path is one continuous hover surface.
- * Only present on hover dropdowns, so click dropdowns are unaffected.
+ * The trigger→menu gap is bridged in JS, not CSS. A transparent pseudo-element
+ * strip used to sit above and below the menu to keep the hover path continuous,
+ * but it only ever covered a fixed 12px directly in line with the menu box: any
+ * `offset` larger than that, or an approach taken at an angle, fell outside it,
+ * and while open it also blocked the page underneath. Dropdown._pointerInSafeZone()
+ * does the same job geometrically - see src/elements.js.
  */
-.domma-dropdown-menu-hover::before,
-.domma-dropdown-menu-hover::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 0.75rem;
-    /* transparent - a hover surface only, never painted */
-}
-
-.domma-dropdown-menu-hover::before {
-    bottom: 100%; /* bridges the gap when the menu opens below the trigger */
-}
-
-.domma-dropdown-menu-hover::after {
-    top: 100%; /* bridges the gap when the menu opens above the trigger */
-}
 
 .domma-dropdown-item {
     display: block;
@@ -13570,11 +13565,11 @@ code {
    ============================================ */
 
 /*!
- * Domma Themes v0.40.0
+ * Domma Themes v0.42.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-21T16:29:27.241Z
- * Commit: c788672
+ * Built: 2026-08-22T16:17:44.088Z
+ * Commit: 0f0475f
  */
 
 /**