domma-js 0.44.9 → 0.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "domma-js",
-    "version": "0.44.9",
+    "version": "0.46.0",
     "description": "Dynamic Object Manipulation & Modeling API - A complete front-end toolkit.",
     "main": "public/dist/domma.min.js",
     "module": "public/dist/domma.esm.js",

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

@@ -1,8 +1,8 @@
 /*!
- * Domma Complete CSS Bundle v0.44.9
+ * Domma Complete CSS Bundle v0.46.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T10:33:52.180Z
+ * Built: 2026-09-27T20:30:22.686Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.44.9
+ * Domma Core CSS v0.46.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T10:33:51.996Z
- * Commit: 176a7e3
+ * Built: 2026-09-27T20:30:22.523Z
+ * Commit: 2e6a350
  */
 
 /**
@@ -4835,11 +4835,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Grid CSS v0.44.9
+ * Domma Grid CSS v0.46.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T10:33:52.000Z
- * Commit: 176a7e3
+ * Built: 2026-09-27T20:30:22.527Z
+ * Commit: 2e6a350
  */
 
 /**
@@ -5460,11 +5460,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.44.9
+ * Domma Elements CSS v0.46.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T10:33:52.005Z
- * Commit: 176a7e3
+ * Built: 2026-09-27T20:30:22.531Z
+ * Commit: 2e6a350
  */
 
 /**
@@ -6489,55 +6489,71 @@ textarea:not([class])::placeholder {
     min-width: 0;
 }
 
-/* Icon-based input group (icon positioned inside input) */
+/* Addon input group (formConfig.prefix / suffix, E.inputGroup): an icon or
+ * short text joined to the start or end of an input, Bootstrap-style. The
+ * addon and the input share one border and one rounded outline; the addon is
+ * as wide as what it holds, so "£", "kg" and "https://" all fit. */
 .input-group-icon {
-    position: relative;
+    display: flex;
+    align-items: stretch;
     width: 100%;
+    min-width: 0;
 }
 
 .input-group-icon > .input-group-addon {
-    position: absolute;
-    top: 0;
-    bottom: 0;
     display: flex;
+    flex: none;
     align-items: center;
     justify-content: center;
+    gap: var(--dm-space-1);
+    padding: 0 var(--dm-space-3);
+    font-size: var(--dm-font-size-base);
+    line-height: 1;
+    white-space: nowrap;
     pointer-events: none;
-    z-index: 1;
+    /* Full text colour: muted text on the tinted addon fell below 4.5:1 on the
+     * mid-tone admin themes (validate:contrast). */
     color: var(--dm-text);
-    background-color: var(--dm-hover-bg);
-    padding: 0 var(--dm-space-3);
+    background-color: color-mix(in srgb, var(--dm-text) 6%, var(--dm-surface, var(--dm-white)));
+    border: 1px solid var(--dm-border, var(--dm-gray-300));
+    transition: border-color var(--dm-transition-fast), color var(--dm-transition-fast);
+}
+
+.input-group-icon > .input-group-addon [data-icon],
+.input-group-icon > .input-group-addon svg {
+    width: 1.15em;
+    height: 1.15em;
 }
 
 .input-group-icon > .input-group-addon-left {
-    left: 0;
-    border-right: 1px solid var(--dm-border, var(--dm-gray-300));
-    border-top-left-radius: var(--dm-radius-md);
-    border-bottom-left-radius: var(--dm-radius-md);
+    border-right: 0;
+    border-radius: var(--dm-radius-md) 0 0 var(--dm-radius-md);
 }
 
 .input-group-icon > .input-group-addon-right {
-    right: 0;
-    border-left: 1px solid var(--dm-border, var(--dm-gray-300));
-    border-top-right-radius: var(--dm-radius-md);
-    border-bottom-right-radius: var(--dm-radius-md);
+    border-left: 0;
+    border-radius: 0 var(--dm-radius-md) var(--dm-radius-md) 0;
 }
 
-/* Dark theme variants */
-[data-mode="dark"] .input-group-icon > .input-group-addon {
-    color: var(--dm-text-disabled);
-    background-color: var(--dm-surface);
-    border-color: var(--dm-text-secondary);
+.input-group-icon > .form-input,
+.input-group-icon > .form-select,
+.input-group-icon > .form-textarea,
+.input-group-icon > input,
+.input-group-icon > select,
+.input-group-icon > textarea {
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0;
 }
 
-/* Adjust input padding when icon is present */
 .input-group-icon.has-addon-left > .form-input,
 .input-group-icon.has-addon-left > .form-select,
 .input-group-icon.has-addon-left > .form-textarea,
 .input-group-icon.has-addon-left > input,
 .input-group-icon.has-addon-left > select,
 .input-group-icon.has-addon-left > textarea {
-    padding-left: 3.5rem;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
 }
 
 .input-group-icon.has-addon-right > .form-input,
@@ -6546,17 +6562,35 @@ textarea:not([class])::placeholder {
 .input-group-icon.has-addon-right > input,
 .input-group-icon.has-addon-right > select,
 .input-group-icon.has-addon-right > textarea {
-    padding-right: 3.5rem;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+/* The addon follows the input's own focus and error states, so the group
+ * reads as one control: the focus ring goes round the whole group rather than
+ * the input alone. */
+.input-group-icon:focus-within {
+    border-radius: var(--dm-radius-md);
+    box-shadow: 0 0 0 3px var(--dm-focus-ring);
+}
+
+.input-group-icon > .form-input:focus,
+.input-group-icon > .form-select:focus,
+.input-group-icon > .form-textarea:focus,
+.input-group-icon > input:focus,
+.input-group-icon > select:focus,
+.input-group-icon > textarea:focus {
+    box-shadow: none;
 }
 
-.input-group-icon.has-addon-left.has-addon-right > .form-input,
-.input-group-icon.has-addon-left.has-addon-right > .form-select,
-.input-group-icon.has-addon-left.has-addon-right > .form-textarea,
-.input-group-icon.has-addon-left.has-addon-right > input,
-.input-group-icon.has-addon-left.has-addon-right > select,
-.input-group-icon.has-addon-left.has-addon-right > textarea {
-    padding-left: 3.5rem;
-    padding-right: 3.5rem;
+.input-group-icon:focus-within > .input-group-addon {
+    border-color: var(--dm-primary);
+    color: var(--dm-primary);
+}
+
+.input-group-icon:has(> .error) > .input-group-addon,
+.has-error .input-group-icon > .input-group-addon {
+    border-color: var(--dm-danger);
 }
 
 /* Prepend/Append style (addon outside input) */
@@ -14011,6 +14045,105 @@ code {
     cursor: not-allowed;
 }
 
+/* ============================================
+   Sortable - drag to reorder (E.sortable)
+   ============================================ */
+
+.dm-sortable-handle {
+    cursor: grab;
+    touch-action: none;
+}
+
+.dm-sortable-dragging,
+.dm-sortable-dragging * {
+    cursor: grabbing !important;
+    user-select: none !important;
+    -webkit-user-select: none !important;
+}
+
+/* The copy that follows the pointer. It lifts in (scale + shadow) and settles
+   back down as it lands on the item's new place. */
+.dm-sortable-ghost {
+    z-index: 10040;
+    opacity: 0.96;
+    background: var(--dm-sortable-ghost-bg, var(--dm-surface, var(--dm-card-bg)));
+    color: var(--dm-text);
+    border-radius: var(--dm-sortable-radius, var(--dm-radius-sm));
+    box-shadow: 0 0 0 0 transparent;
+    scale: 1;
+    will-change: transform;
+    transition:
+        scale 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.dm-sortable-ghost-lifted {
+    scale: var(--dm-sortable-lift, 1.02);
+    box-shadow: var(--dm-sortable-shadow, var(--dm-shadow-lg, 0 12px 28px rgba(0, 0, 0, 0.22)));
+}
+
+/* The item's own slot while it is being dragged. */
+.dm-sortable-placeholder {
+    opacity: 0.35;
+    outline: 2px dashed color-mix(in srgb, var(--dm-primary) 55%, transparent);
+    outline-offset: -2px;
+    border-radius: var(--dm-sortable-radius, var(--dm-radius-sm));
+    transition: opacity 160ms ease;
+}
+
+/* While the ghost flies home the slot is empty, so the two never double up. */
+.dm-sortable-placeholder.dm-sortable-landing {
+    opacity: 0;
+    outline-color: transparent;
+}
+
+/* Indicator mode: a rule at the edge the item would drop beside, or an outline
+   round the item it would drop into. It glides between positions. */
+.dm-sortable-indicator {
+    position: fixed;
+    z-index: 10030;
+    pointer-events: none;
+    opacity: 0;
+    background: var(--dm-sortable-accent, var(--dm-primary));
+    border-radius: var(--dm-sortable-radius, var(--dm-radius-sm));
+    transition:
+        left 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        top 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        width 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        height 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        opacity 120ms ease,
+        background-color 120ms ease;
+}
+
+.dm-sortable-indicator.is-visible {
+    opacity: 1;
+}
+
+.dm-sortable-indicator.is-into {
+    background: color-mix(in srgb, var(--dm-sortable-accent, var(--dm-primary)) 12%, transparent);
+    box-shadow: inset 0 0 0 2px var(--dm-sortable-accent, var(--dm-primary));
+}
+
+.dm-sortable-live {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dm-sortable-ghost,
+    .dm-sortable-indicator,
+    .dm-sortable-placeholder {
+        transition: none;
+    }
+}
+
 
 /* ============================================
    THEME SYSTEM
@@ -14018,11 +14151,11 @@ code {
    ============================================ */
 
 /*!
- * Domma Themes v0.44.9
+ * Domma Themes v0.46.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T10:33:51.981Z
- * Commit: 176a7e3
+ * Built: 2026-09-27T20:30:22.510Z
+ * Commit: 2e6a350
  */
 
 /**

package/public/dist/bundles/domma-data-focused.css

@@ -1,8 +1,8 @@
 /*!
- * Domma Data-Focused CSS Bundle v0.44.9
+ * Domma Data-Focused CSS Bundle v0.46.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T10:33:52.176Z
+ * Built: 2026-09-27T20:30:22.683Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.44.9
+ * Domma Core CSS v0.46.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T10:33:51.996Z
- * Commit: 176a7e3
+ * Built: 2026-09-27T20:30:22.523Z
+ * Commit: 2e6a350
  */
 
 /**
@@ -4835,11 +4835,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Grid CSS v0.44.9
+ * Domma Grid CSS v0.46.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T10:33:52.000Z
- * Commit: 176a7e3
+ * Built: 2026-09-27T20:30:22.527Z
+ * Commit: 2e6a350
  */
 
 /**
@@ -5460,11 +5460,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.44.9
+ * Domma Elements CSS v0.46.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T10:33:52.005Z
- * Commit: 176a7e3
+ * Built: 2026-09-27T20:30:22.531Z
+ * Commit: 2e6a350
  */
 
 /**
@@ -6489,55 +6489,71 @@ textarea:not([class])::placeholder {
     min-width: 0;
 }
 
-/* Icon-based input group (icon positioned inside input) */
+/* Addon input group (formConfig.prefix / suffix, E.inputGroup): an icon or
+ * short text joined to the start or end of an input, Bootstrap-style. The
+ * addon and the input share one border and one rounded outline; the addon is
+ * as wide as what it holds, so "£", "kg" and "https://" all fit. */
 .input-group-icon {
-    position: relative;
+    display: flex;
+    align-items: stretch;
     width: 100%;
+    min-width: 0;
 }
 
 .input-group-icon > .input-group-addon {
-    position: absolute;
-    top: 0;
-    bottom: 0;
     display: flex;
+    flex: none;
     align-items: center;
     justify-content: center;
+    gap: var(--dm-space-1);
+    padding: 0 var(--dm-space-3);
+    font-size: var(--dm-font-size-base);
+    line-height: 1;
+    white-space: nowrap;
     pointer-events: none;
-    z-index: 1;
+    /* Full text colour: muted text on the tinted addon fell below 4.5:1 on the
+     * mid-tone admin themes (validate:contrast). */
     color: var(--dm-text);
-    background-color: var(--dm-hover-bg);
-    padding: 0 var(--dm-space-3);
+    background-color: color-mix(in srgb, var(--dm-text) 6%, var(--dm-surface, var(--dm-white)));
+    border: 1px solid var(--dm-border, var(--dm-gray-300));
+    transition: border-color var(--dm-transition-fast), color var(--dm-transition-fast);
+}
+
+.input-group-icon > .input-group-addon [data-icon],
+.input-group-icon > .input-group-addon svg {
+    width: 1.15em;
+    height: 1.15em;
 }
 
 .input-group-icon > .input-group-addon-left {
-    left: 0;
-    border-right: 1px solid var(--dm-border, var(--dm-gray-300));
-    border-top-left-radius: var(--dm-radius-md);
-    border-bottom-left-radius: var(--dm-radius-md);
+    border-right: 0;
+    border-radius: var(--dm-radius-md) 0 0 var(--dm-radius-md);
 }
 
 .input-group-icon > .input-group-addon-right {
-    right: 0;
-    border-left: 1px solid var(--dm-border, var(--dm-gray-300));
-    border-top-right-radius: var(--dm-radius-md);
-    border-bottom-right-radius: var(--dm-radius-md);
+    border-left: 0;
+    border-radius: 0 var(--dm-radius-md) var(--dm-radius-md) 0;
 }
 
-/* Dark theme variants */
-[data-mode="dark"] .input-group-icon > .input-group-addon {
-    color: var(--dm-text-disabled);
-    background-color: var(--dm-surface);
-    border-color: var(--dm-text-secondary);
+.input-group-icon > .form-input,
+.input-group-icon > .form-select,
+.input-group-icon > .form-textarea,
+.input-group-icon > input,
+.input-group-icon > select,
+.input-group-icon > textarea {
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0;
 }
 
-/* Adjust input padding when icon is present */
 .input-group-icon.has-addon-left > .form-input,
 .input-group-icon.has-addon-left > .form-select,
 .input-group-icon.has-addon-left > .form-textarea,
 .input-group-icon.has-addon-left > input,
 .input-group-icon.has-addon-left > select,
 .input-group-icon.has-addon-left > textarea {
-    padding-left: 3.5rem;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
 }
 
 .input-group-icon.has-addon-right > .form-input,
@@ -6546,17 +6562,35 @@ textarea:not([class])::placeholder {
 .input-group-icon.has-addon-right > input,
 .input-group-icon.has-addon-right > select,
 .input-group-icon.has-addon-right > textarea {
-    padding-right: 3.5rem;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+/* The addon follows the input's own focus and error states, so the group
+ * reads as one control: the focus ring goes round the whole group rather than
+ * the input alone. */
+.input-group-icon:focus-within {
+    border-radius: var(--dm-radius-md);
+    box-shadow: 0 0 0 3px var(--dm-focus-ring);
+}
+
+.input-group-icon > .form-input:focus,
+.input-group-icon > .form-select:focus,
+.input-group-icon > .form-textarea:focus,
+.input-group-icon > input:focus,
+.input-group-icon > select:focus,
+.input-group-icon > textarea:focus {
+    box-shadow: none;
 }
 
-.input-group-icon.has-addon-left.has-addon-right > .form-input,
-.input-group-icon.has-addon-left.has-addon-right > .form-select,
-.input-group-icon.has-addon-left.has-addon-right > .form-textarea,
-.input-group-icon.has-addon-left.has-addon-right > input,
-.input-group-icon.has-addon-left.has-addon-right > select,
-.input-group-icon.has-addon-left.has-addon-right > textarea {
-    padding-left: 3.5rem;
-    padding-right: 3.5rem;
+.input-group-icon:focus-within > .input-group-addon {
+    border-color: var(--dm-primary);
+    color: var(--dm-primary);
+}
+
+.input-group-icon:has(> .error) > .input-group-addon,
+.has-error .input-group-icon > .input-group-addon {
+    border-color: var(--dm-danger);
 }
 
 /* Prepend/Append style (addon outside input) */
@@ -14011,6 +14045,105 @@ code {
     cursor: not-allowed;
 }
 
+/* ============================================
+   Sortable - drag to reorder (E.sortable)
+   ============================================ */
+
+.dm-sortable-handle {
+    cursor: grab;
+    touch-action: none;
+}
+
+.dm-sortable-dragging,
+.dm-sortable-dragging * {
+    cursor: grabbing !important;
+    user-select: none !important;
+    -webkit-user-select: none !important;
+}
+
+/* The copy that follows the pointer. It lifts in (scale + shadow) and settles
+   back down as it lands on the item's new place. */
+.dm-sortable-ghost {
+    z-index: 10040;
+    opacity: 0.96;
+    background: var(--dm-sortable-ghost-bg, var(--dm-surface, var(--dm-card-bg)));
+    color: var(--dm-text);
+    border-radius: var(--dm-sortable-radius, var(--dm-radius-sm));
+    box-shadow: 0 0 0 0 transparent;
+    scale: 1;
+    will-change: transform;
+    transition:
+        scale 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.dm-sortable-ghost-lifted {
+    scale: var(--dm-sortable-lift, 1.02);
+    box-shadow: var(--dm-sortable-shadow, var(--dm-shadow-lg, 0 12px 28px rgba(0, 0, 0, 0.22)));
+}
+
+/* The item's own slot while it is being dragged. */
+.dm-sortable-placeholder {
+    opacity: 0.35;
+    outline: 2px dashed color-mix(in srgb, var(--dm-primary) 55%, transparent);
+    outline-offset: -2px;
+    border-radius: var(--dm-sortable-radius, var(--dm-radius-sm));
+    transition: opacity 160ms ease;
+}
+
+/* While the ghost flies home the slot is empty, so the two never double up. */
+.dm-sortable-placeholder.dm-sortable-landing {
+    opacity: 0;
+    outline-color: transparent;
+}
+
+/* Indicator mode: a rule at the edge the item would drop beside, or an outline
+   round the item it would drop into. It glides between positions. */
+.dm-sortable-indicator {
+    position: fixed;
+    z-index: 10030;
+    pointer-events: none;
+    opacity: 0;
+    background: var(--dm-sortable-accent, var(--dm-primary));
+    border-radius: var(--dm-sortable-radius, var(--dm-radius-sm));
+    transition:
+        left 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        top 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        width 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        height 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        opacity 120ms ease,
+        background-color 120ms ease;
+}
+
+.dm-sortable-indicator.is-visible {
+    opacity: 1;
+}
+
+.dm-sortable-indicator.is-into {
+    background: color-mix(in srgb, var(--dm-sortable-accent, var(--dm-primary)) 12%, transparent);
+    box-shadow: inset 0 0 0 2px var(--dm-sortable-accent, var(--dm-primary));
+}
+
+.dm-sortable-live {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dm-sortable-ghost,
+    .dm-sortable-indicator,
+    .dm-sortable-placeholder {
+        transition: none;
+    }
+}
+
 
 /* ============================================
    THEME SYSTEM
@@ -14018,11 +14151,11 @@ code {
    ============================================ */
 
 /*!
- * Domma Themes v0.44.9
+ * Domma Themes v0.46.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T10:33:51.981Z
- * Commit: 176a7e3
+ * Built: 2026-09-27T20:30:22.510Z
+ * Commit: 2e6a350
  */
 
 /**