domma-js 0.39.1 → 0.40.0

package/assets/types/config.d.ts

@@ -79,7 +79,7 @@ export interface ConfigEngine {
      */
     /**
      * Retrieve the live component instance created by setup() for a selector.
-     * Instances are NOT stored on the element — $(sel).data('component') is
+     * Instances are NOT stored on the element - $(sel).data('component') is
      * always undefined.
      * @param selector - Selector the component was configured under
      */

package/assets/types/flags.d.ts

@@ -19,7 +19,7 @@ export interface FlagOverlay {
     [key: string]: unknown;
 }
 
-/** A flag definition — either raw SVG markup or a compact descriptor. */
+/** A flag definition - either raw SVG markup or a compact descriptor. */
 export interface FlagDefinition {
     /** Country name */
     name: string;

package/assets/types/index.d.ts

@@ -83,7 +83,7 @@ export interface DommaStatic {
     /** Icon library */
     icons: Icons;
 
-    /** Nation flags (opt-in module — present when domma-flags is loaded) */
+    /** Nation flags (opt-in module - present when domma-flags is loaded) */
     flags?: Flags;
 
     /** Alias for {@link DommaStatic.flags} (opt-in module) */

package/assets/types/models.d.ts

@@ -213,7 +213,7 @@ export interface Models {
 
     /**
      * Create a lazily-evaluated derived value that tracks whatever it reads.
-     * The body must be synchronous — tracking stops at the first `await`.
+     * The body must be synchronous - tracking stops at the first `await`.
      */
     computed<T = any>(fn: () => T, options?: ComputedOptions<T>): ComputedRef<T>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "domma-js",
-    "version": "0.39.1",
+    "version": "0.40.0",
     "description": "Dynamic Object Manipulation & Modeling API - A complete front-end toolkit.",
     "main": "public/dist/domma.min.js",
     "module": "public/dist/domma.esm.js",
@@ -82,7 +82,7 @@
         "@rollup/plugin-terser": "^0.4.4",
         "@vitest/coverage-v8": "^4.0.16",
         "cypress": "^15.8.1",
-        "domma-reactive": "0.5.1",
+        "domma-reactive": "1.0.0",
         "dompurify": "^3.4.13",
         "dotenv": "^17.2.3",
         "jsdom": "^24.1.0",

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

@@ -1,8 +1,8 @@
 /*!
- * Domma Complete CSS Bundle v0.39.1
+ * Domma Complete CSS Bundle v0.40.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-21T11:42:27.962Z
+ * Built: 2026-08-21T16:29:27.417Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.39.1
+ * Domma Core CSS v0.40.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-21T11:42:27.812Z
- * Commit: 1a8178f
+ * Built: 2026-08-21T16:29:27.255Z
+ * Commit: c788672
  */
 
 /**
@@ -2197,7 +2197,7 @@ code, pre {
 
 /* ============================================
    OPACITY SCALE
-   Full graduated opacity scale (0–100)
+   Full graduated opacity scale (0-100)
    ============================================ */
 
 .opacity-0   { opacity: 0; }
@@ -2234,7 +2234,7 @@ code, pre {
     transition: opacity var(--dm-transition-normal);
 }
 
-/* Frosted glass — semi-transparent background + blur */
+/* Frosted glass - semi-transparent background + blur */
 .translucent-glass {
     background-color: rgba(255, 255, 255, var(--dm-translucent-glass-opacity));
     backdrop-filter: blur(var(--dm-translucent-glass-blur));
@@ -2242,7 +2242,7 @@ code, pre {
     transition: opacity var(--dm-transition-normal);
 }
 
-/* Hover variants — apply translucency on hover */
+/* Hover variants - apply translucency on hover */
 .translucent-hover:hover {
     opacity: var(--dm-translucent);
     transition: opacity var(--dm-transition-normal);
@@ -4838,11 +4838,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Grid CSS v0.39.1
+ * Domma Grid CSS v0.40.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-21T11:42:27.817Z
- * Commit: 1a8178f
+ * Built: 2026-08-21T16:29:27.259Z
+ * Commit: c788672
  */
 
 /**
@@ -5176,7 +5176,7 @@ body.dm-cloaked.dm-ready {
     gap: var(--dm-space-6, 2rem);
 }
 
-/* Bootstrap 5-style g-* aliases (row gutters — both axes) */
+/* Bootstrap 5-style g-* aliases (row gutters - both axes) */
 .row.g-0 { gap: 0; }
 .row.g-1 { gap: var(--dm-space-1, 0.25rem); }
 .row.g-2 { gap: var(--dm-space-2, 0.5rem); }
@@ -5463,11 +5463,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.39.1
+ * Domma Elements CSS v0.40.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-21T11:42:27.822Z
- * Commit: 1a8178f
+ * Built: 2026-08-21T16:29:27.264Z
+ * Commit: c788672
  */
 
 /**
@@ -6755,7 +6755,7 @@ textarea:not([class])::placeholder {
    NUMBER BADGE
    ============================================ */
 
-/* Standalone number badge — circular for single digits, pill for multi-digit */
+/* Standalone number badge - circular for single digits, pill for multi-digit */
 .badge-number {
     display: inline-flex;
     align-items: center;
@@ -6772,7 +6772,7 @@ textarea:not([class])::placeholder {
     color: var(--dm-danger-text, var(--dm-white));
 }
 
-/* Dot indicator — small coloured presence circle */
+/* Dot indicator - small coloured presence circle */
 .badge-dot {
     display: inline-block;
     width: 0.5rem;
@@ -6787,7 +6787,7 @@ textarea:not([class])::placeholder {
     display: inline-flex;
 }
 
-/* Counter badge — overlapping corner with border ring (classic app-notification style) */
+/* Counter badge - overlapping corner with border ring (classic app-notification style) */
 .badge-counter {
     position: absolute;
     top: -6px;
@@ -6809,7 +6809,7 @@ textarea:not([class])::placeholder {
     color: var(--dm-danger-text, var(--dm-white));
 }
 
-/* Dot variant of counter — smaller, no text */
+/* Dot variant of counter - smaller, no text */
 .badge-counter.badge-dot {
     top: -2px;
     right: -2px;
@@ -6863,7 +6863,7 @@ textarea:not([class])::placeholder {
    LIST GROUP
    ============================================ */
 
-/* Container — vertical flex column with rounded corners and clipped overflow */
+/* Container - vertical flex column with rounded corners and clipped overflow */
 .list-group {
     display: flex;
     flex-direction: column;
@@ -6873,7 +6873,7 @@ textarea:not([class])::placeholder {
     background-color: var(--dm-surface);
 }
 
-/* Each item — flex row, vertically centred, with a bottom separator */
+/* Each item - flex row, vertically centred, with a bottom separator */
 .list-group-item {
     display: flex;
     align-items: center;
@@ -6891,7 +6891,7 @@ textarea:not([class])::placeholder {
     border-bottom: none;
 }
 
-/* Flush modifier — strip outer border and radius for embedding inside cards */
+/* Flush modifier - strip outer border and radius for embedding inside cards */
 .list-group-flush {
     border: none;
     border-radius: 0;
@@ -6913,7 +6913,7 @@ textarea:not([class])::placeholder {
     font-size: var(--dm-font-size-base);
 }
 
-/* Actionable items — pointer cursor and hover highlight */
+/* Actionable items - pointer cursor and hover highlight */
 .list-group-item-action {
     cursor: pointer;
     user-select: none;
@@ -6937,7 +6937,7 @@ textarea:not([class])::placeholder {
     justify-content: center;
 }
 
-/* Central text wrapper — grows to fill available space */
+/* Central text wrapper - grows to fill available space */
 .list-group-item-content {
     flex-grow: 1;
     min-width: 0;
@@ -6965,7 +6965,7 @@ textarea:not([class])::placeholder {
     text-overflow: ellipsis;
 }
 
-/* Right-side trailing area — badges, timestamps, actions */
+/* Right-side trailing area - badges, timestamps, actions */
 .list-group-item-trailing {
     flex-shrink: 0;
     margin-left: auto;
@@ -6975,7 +6975,7 @@ textarea:not([class])::placeholder {
     gap: var(--dm-space-2);
 }
 
-/* Active/selected state — accent background takes precedence over colour variants */
+/* Active/selected state - accent background takes precedence over colour variants */
 .list-group-item.active {
     background-color: var(--dm-primary);
     color: var(--dm-primary-text, var(--dm-white));
@@ -6987,7 +6987,7 @@ textarea:not([class])::placeholder {
     color: rgba(255, 255, 255, 0.75);
 }
 
-/* Disabled state — dimmed and non-interactive */
+/* Disabled state - dimmed and non-interactive */
 .list-group-item.disabled {
     opacity: 0.7;
     cursor: not-allowed;
@@ -7067,7 +7067,7 @@ textarea:not([class])::placeholder {
     border-top-color: var(--dm-border);
 }
 
-/* Numbered list — CSS counter prepended to each item */
+/* Numbered list - CSS counter prepended to each item */
 .list-group-numbered {
     list-style-type: none;
     counter-reset: list-group-counter;
@@ -7083,7 +7083,7 @@ textarea:not([class])::placeholder {
     color: var(--dm-text-muted);
 }
 
-/* Horizontal layout — items arranged in a row */
+/* Horizontal layout - items arranged in a row */
 .list-group-horizontal {
     flex-direction: row;
 }
@@ -8889,12 +8889,28 @@ code {
     display: block;
 }
 
+/* Slide content sits IN FLOW by default, so a text-only slide has height.
+   It used to be unconditionally absolute - a caption overlay for a background
+   image - which meant a slide with no <img> had nothing in flow at all: the
+   slide collapsed to 0px, and with it the whole carousel. A text-only
+   carousel simply did not appear. */
 .carousel-slide-content {
+    position: relative;
+    /* Clears the arrows (40px + 1rem inset) on both sides and the indicator
+       dots below. On an image slide the controls sit over the picture; on a
+       text slide they would sit over the words. */
+    padding: var(--dm-space-6) clamp(1rem, 6vw, 3.75rem) calc(var(--dm-space-6) + 1.25rem);
+    color: inherit;
+}
+
+/* A slide that DOES carry an image gets the overlay caption it was designed
+   for. Stated as the enhancement rather than the default, so a browser without
+   :has() renders the caption under the image instead of hiding the slide. */
+.carousel-slide:has(> img) .carousel-slide-content {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-    padding: var(--dm-space-6);
     background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
     color: var(--dm-white);
 }
@@ -10388,7 +10404,7 @@ code {
 }
 
 /* Status text utilities use color-mix with --dm-text so they auto-adapt to
-   light/dark modes — keeping brand identity while staying ≥4.5:1 readable. */
+   light/dark modes - keeping brand identity while staying ≥4.5:1 readable. */
 .text-success {
     color: color-mix(in oklab, var(--dm-success), var(--dm-text) 30%) !important;
 }
@@ -10794,7 +10810,7 @@ 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
+ * 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.
@@ -10806,7 +10822,7 @@ code {
     left: 0;
     right: 0;
     height: 0.75rem;
-    /* transparent — a hover surface only, never painted */
+    /* transparent - a hover surface only, never painted */
 }
 
 .domma-dropdown-menu-hover::before {
@@ -13017,7 +13033,7 @@ code {
 }
 
 /* ============================================================
- * Chooser — visual option-picker (card/chip × single/multi)
+ * Chooser - visual option-picker (card/chip × single/multi)
  * ============================================================ */
 .domma-chooser {
     --picker-radius: var(--dm-radius);
@@ -13237,7 +13253,7 @@ code {
 }
 
 /* ============================================================
- * Chooser — accent colour, accent style, glow, shadow extensions
+ * Chooser - accent colour, accent style, glow, shadow extensions
  * ============================================================ */
 
 /* Default the accent variables on every chooser */
@@ -13268,7 +13284,7 @@ code {
                 0 0 18px color-mix(in srgb, var(--picker-glow-colour) 60%, transparent);
 }
 
-/* Shadow weights — applied to all options */
+/* Shadow weights - applied to all options */
 .domma-chooser[data-shadow="sm"] .picker-option {
     box-shadow: 0 1px 2px var(--picker-shadow-colour, rgba(0, 0, 0, 0.08));
 }
@@ -13356,7 +13372,7 @@ code {
 }
 
 /* ============================================================
- * Page-roller chooser slideover — structured editor styling
+ * Page-roller chooser slideover - structured editor styling
  * ============================================================ */
 .qr-chooser-slideover-body {
     padding: 1.25rem;
@@ -13554,11 +13570,11 @@ code {
    ============================================ */
 
 /*!
- * Domma Themes v0.39.1
+ * Domma Themes v0.40.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-21T11:42:27.798Z
- * Commit: 1a8178f
+ * Built: 2026-08-21T16:29:27.241Z
+ * Commit: c788672
  */
 
 /**
@@ -16778,7 +16794,7 @@ code {
     --dm-info-hover-text: #1a1a1a;
 }
 /**
- * Domma Christmas Light Theme — "Frosty Morning"
+ * Domma Christmas Light Theme - "Frosty Morning"
  * Ice-blue tinted backgrounds evoking frost on windows, deep pine-green text
  * Classic Christmas Red primary, rich Holly Green secondary
  */
@@ -17022,10 +17038,10 @@ code {
 }
 
 /* ============================================================
-   DECORATIVE CSS — "Frosty Morning" festive embellishments
+   DECORATIVE CSS - "Frosty Morning" festive embellishments
    ============================================================ */
 
-/* Snow-dust background — subtle radial dots on the page root */
+/* Snow-dust background - subtle radial dots on the page root */
 .dm-theme-christmas-light {
     background-image:
         radial-gradient(circle, rgba(168, 213, 229, 0.35) 1px, transparent 1px),
@@ -17041,7 +17057,7 @@ code {
     border-image-slice: 1;
 }
 
-/* Candy-stripe progress bars (default + plain variant only — variants keep their semantic colour) */
+/* Candy-stripe progress bars (default + plain variant only - variants keep their semantic colour) */
 .dm-theme-christmas-light .dm-progression-progress-bar,
 .dm-theme-christmas-light .progress > .progress-bar:not([class*="progress-bar-"]) {
     background-image: repeating-linear-gradient(
@@ -17055,7 +17071,7 @@ code {
     color: #ffffff;
 }
 
-/* Festive syntax highlighting — green keywords, red strings, gold functions */
+/* Festive syntax highlighting - green keywords, red strings, gold functions */
 .dm-theme-christmas-light .code-block .syntax-keyword {
     color: #2D6B3F;
     font-weight: 600;
@@ -17071,7 +17087,7 @@ code {
 }
 
 /**
- * Domma Christmas Dark Theme — "Christmas Eve"
+ * Domma Christmas Dark Theme - "Christmas Eve"
  * Deep forest green backgrounds, pure moonlit-white text, green/red undertones in interaction
  * Bright Holly Green primary, Christmas Red secondary; firelight-ember shadows
  */
@@ -17090,7 +17106,7 @@ code {
     --dm-surface-raised: #243A2C;
     --dm-surface-overlay: #243A2C;
 
-    /* Text - Pure snow white; no green tint — moonlight on fresh snow */
+    /* Text - Pure snow white; no green tint - moonlight on fresh snow */
     --dm-text: #FFFFFF;
     --dm-text-secondary: #D0D0D0;
     --dm-text-muted: #a8a8a8;
@@ -17315,10 +17331,10 @@ code {
 }
 
 /* ============================================================
-   DECORATIVE CSS — "Christmas Eve" festive embellishments
+   DECORATIVE CSS - "Christmas Eve" festive embellishments
    ============================================================ */
 
-/* Snow-dust background — three festive dot layers: white snow, green pine, red Christmas lights */
+/* Snow-dust background - three festive dot layers: white snow, green pine, red Christmas lights */
 .dm-theme-christmas-dark {
     background-image:
         radial-gradient(circle, rgba(255, 255, 255, 0.13) 1px, transparent 1px),
@@ -17335,7 +17351,7 @@ code {
     border-image-slice: 1;
 }
 
-/* Candy-stripe progress bars (default + plain variant only — variants keep their semantic colour) */
+/* Candy-stripe progress bars (default + plain variant only - variants keep their semantic colour) */
 .dm-theme-christmas-dark .dm-progression-progress-bar,
 .dm-theme-christmas-dark .progress > .progress-bar:not([class*="progress-bar-"]) {
     background-image: repeating-linear-gradient(
@@ -17349,7 +17365,7 @@ code {
     color: #1a1a1a;
 }
 
-/* Festive syntax highlighting — brighter versions for dark backgrounds */
+/* Festive syntax highlighting - brighter versions for dark backgrounds */
 .dm-theme-christmas-dark .code-block .syntax-keyword {
     color: #5CB875;
     font-weight: 600;
@@ -18280,7 +18296,7 @@ code {
 
 /**
  * Domma Grayve Light Theme
- * Slate/cyan monochrome palette — complementary light variant
+ * Slate/cyan monochrome palette - complementary light variant
  * Light mode variant
  */
 
@@ -18514,7 +18530,7 @@ code {
 
 /* Syntax highlighting tokens for grayve-light */
 .dm-theme-grayve-light .code-block .syntax-keyword {
-    color: #5a2dcc; /* Deep Purple — darkened for ≥4.5:1 on #f5f5f5 */
+    color: #5a2dcc; /* Deep Purple - darkened for ≥4.5:1 on #f5f5f5 */
     font-weight: 500;
 }
 
@@ -18524,12 +18540,12 @@ code {
 }
 
 .dm-theme-grayve-light .code-block .syntax-function {
-    color: #006873; /* Cyan — darkened for ≥4.5:1 on #f5f5f5 */
+    color: #006873; /* Cyan - darkened for ≥4.5:1 on #f5f5f5 */
 }
 
 /**
  * Domma Grayve Dark Theme
- * Slate/cyan monochrome palette — adapted from Bootswatch Slate
+ * Slate/cyan monochrome palette - adapted from Bootswatch Slate
  * Dark mode variant
  */
 
@@ -19239,7 +19255,7 @@ code {
 
 /**
  * Domma Wedding Light Theme
- * Classic antique gold palette — warm, muted, timeless
+ * Classic antique gold palette - warm, muted, timeless
  * Day variant - cream/ivory backgrounds with antique gold highlights
  */
 
@@ -19470,7 +19486,7 @@ code {
 
 /**
  * Domma Wedding Dark Theme
- * Classic antique gold palette — warm, muted, timeless
+ * Classic antique gold palette - warm, muted, timeless
  * Evening variant - deep midnight navy with antique gold highlights
  */
 
@@ -19700,7 +19716,7 @@ code {
 
 /**
  * Domma Admin Smooth · Steel Blue
- * GENERATED by scripts/generate-admin-themes.js — do not edit by hand.
+ * GENERATED by scripts/generate-admin-themes.js - do not edit by hand.
  */
 
 .dm-theme-admin-smooth-steel {
@@ -19838,7 +19854,7 @@ code {
 
 /**
  * Domma Admin Smooth · Indigo
- * GENERATED by scripts/generate-admin-themes.js — do not edit by hand.
+ * GENERATED by scripts/generate-admin-themes.js - do not edit by hand.
  */
 
 .dm-theme-admin-smooth-indigo {
@@ -19976,7 +19992,7 @@ code {
 
 /**
  * Domma Admin Smooth · Teal
- * GENERATED by scripts/generate-admin-themes.js — do not edit by hand.
+ * GENERATED by scripts/generate-admin-themes.js - do not edit by hand.
  */
 
 .dm-theme-admin-smooth-teal {
@@ -20114,7 +20130,7 @@ code {
 
 /**
  * Domma Admin Sharp · Steel Blue
- * GENERATED by scripts/generate-admin-themes.js — do not edit by hand.
+ * GENERATED by scripts/generate-admin-themes.js - do not edit by hand.
  */
 
 .dm-theme-admin-sharp-steel {
@@ -20252,7 +20268,7 @@ code {
 
 /**
  * Domma Admin Sharp · Indigo
- * GENERATED by scripts/generate-admin-themes.js — do not edit by hand.
+ * GENERATED by scripts/generate-admin-themes.js - do not edit by hand.
  */
 
 .dm-theme-admin-sharp-indigo {
@@ -20390,7 +20406,7 @@ code {
 
 /**
  * Domma Admin Sharp · Teal
- * GENERATED by scripts/generate-admin-themes.js — do not edit by hand.
+ * GENERATED by scripts/generate-admin-themes.js - do not edit by hand.
  */
 
 .dm-theme-admin-sharp-teal {