domma-js 0.46.1 → 0.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "domma-js",
-    "version": "0.46.1",
+    "version": "0.47.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.46.1
+ * Domma Complete CSS Bundle v0.47.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T20:40:05.429Z
+ * Built: 2026-09-27T21:27:08.523Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.46.1
+ * Domma Core CSS v0.47.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T20:40:05.313Z
- * Commit: 92f2ee4
+ * Built: 2026-09-27T21:27:08.360Z
+ * Commit: eff3166
  */
 
 /**
@@ -4835,11 +4835,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Grid CSS v0.46.1
+ * Domma Grid CSS v0.47.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T20:40:05.315Z
- * Commit: 92f2ee4
+ * Built: 2026-09-27T21:27:08.363Z
+ * Commit: eff3166
  */
 
 /**
@@ -5460,11 +5460,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.46.1
+ * Domma Elements CSS v0.47.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T20:40:05.319Z
- * Commit: 92f2ee4
+ * Built: 2026-09-27T21:27:08.368Z
+ * Commit: eff3166
  */
 
 /**
@@ -6593,6 +6593,118 @@ textarea:not([class])::placeholder {
     border-color: var(--dm-danger);
 }
 
+/* Input extras (formConfig reveal / clear / stepper, E.inputGroup): real
+ * buttons joined to the input like an addon, but clickable and in the tab
+ * order. Buttons after the input share its right border, buttons before it
+ * its left; only the outermost piece of the group keeps a rounded corner. */
+.input-group-icon > .input-group-btn {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.5rem;
+    margin: 0;
+    padding: 0 var(--dm-space-2);
+    font: inherit;
+    line-height: 1;
+    color: var(--dm-text);
+    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));
+    border-radius: 0;
+    cursor: pointer;
+    user-select: none;
+    touch-action: manipulation;
+    transition: border-color var(--dm-transition-fast), color var(--dm-transition-fast), background-color var(--dm-transition-fast);
+}
+
+.input-group-icon > .input-group-btn[hidden] {
+    display: none;
+}
+
+.input-group-icon > .input-group-btn svg,
+.input-group-icon > .input-group-btn [data-icon] {
+    width: 1.1em;
+    height: 1.1em;
+    pointer-events: none;
+}
+
+.input-group-icon > .input-group-btn-left {
+    border-right: 0;
+}
+
+.input-group-icon > .input-group-btn-right {
+    border-left: 0;
+}
+
+.input-group-icon > .input-group-btn:first-child {
+    border-radius: var(--dm-radius-md) 0 0 var(--dm-radius-md);
+}
+
+.input-group-icon > .input-group-btn:last-child {
+    border-radius: 0 var(--dm-radius-md) var(--dm-radius-md) 0;
+}
+
+/* Hover and "on" tint the fill with the primary colour and keep the full text
+ * colour: --dm-primary as text is a mid-tone on the lemon and silver families. */
+.input-group-icon > .input-group-btn:hover:not(:disabled),
+.input-group-icon > .input-group-btn[aria-pressed="true"] {
+    background-color: color-mix(in srgb, var(--dm-primary) 14%, var(--dm-surface, var(--dm-white)));
+}
+
+.input-group-icon > .input-group-btn:focus-visible {
+    outline: 2px solid var(--dm-primary);
+    outline-offset: -3px;
+}
+
+.input-group-icon > .input-group-btn:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+.input-group-icon:focus-within > .input-group-btn {
+    border-color: var(--dm-primary);
+}
+
+.input-group-icon:has(> .error) > .input-group-btn,
+.has-error .input-group-icon > .input-group-btn {
+    border-color: var(--dm-danger);
+}
+
+/* A number input with a stepper hides the browser's own spinner. */
+.input-group-icon > .input-group-decrease ~ input[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+    text-align: center;
+}
+
+.input-group-icon > .input-group-decrease ~ input[type="number"]::-webkit-inner-spin-button,
+.input-group-icon > .input-group-decrease ~ input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* Character counter under the control: "12 / 200", amber from 90% of the
+ * limit, red past it. The two state colours are mixed toward the text colour,
+ * as .text-warning / .text-danger are (further, for AA on every theme). */
+.form-counter {
+    margin-top: var(--dm-space-1);
+    font-size: var(--dm-font-size-sm);
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    color: var(--dm-text-secondary);
+    transition: color var(--dm-transition-fast);
+}
+
+.form-counter.is-warning {
+    color: color-mix(in oklab, var(--dm-warning), var(--dm-text) 60%);
+    font-weight: 600;
+}
+
+.form-counter.is-over {
+    color: color-mix(in oklab, var(--dm-danger), var(--dm-text) 50%);
+    font-weight: 600;
+}
+
 /* Prepend/Append style (addon outside input) */
 .input-group-prepend,
 .input-group-append {
@@ -14151,11 +14263,11 @@ code {
    ============================================ */
 
 /*!
- * Domma Themes v0.46.1
+ * Domma Themes v0.47.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T20:40:05.303Z
- * Commit: 92f2ee4
+ * Built: 2026-09-27T21:27:08.347Z
+ * Commit: eff3166
  */
 
 /**
@@ -14469,6 +14581,12 @@ code {
     --dm-primary-light: #caf0f8;
     --dm-primary-dark: #023e8a;
 
+    /* Links: the primary is 4.38:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (15%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 15%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 30%);
+
     /* Secondary - Slate blue */
     --dm-secondary: #457b9d;
     --dm-secondary-hover: #5a8fad;
@@ -15339,6 +15457,12 @@ code {
     --dm-primary-light: rgba(218, 157, 130, 0.15);
     --dm-primary-dark: #d08c6f;
 
+    /* Links: the primary is 2.07:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (50%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 50%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 65%);
+
     --dm-secondary: #c2a2aa;
     --dm-secondary-hover: #cdb0b7;
     --dm-secondary-active: #d8bec4;
@@ -15551,6 +15675,12 @@ code {
     --dm-primary-light: rgba(198, 123, 92, 0.15);
     --dm-primary-dark: #a66349;
 
+    /* Links: the primary is 3.15:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (45%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 45%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 60%);
+
     /* Focus ring with soft sunset colour */
     --dm-focus-ring: 0 0 0 3px rgba(198, 123, 92, 0.3);
     --dm-border-focus: #c67b5c;
@@ -15765,6 +15895,12 @@ code {
     --dm-primary-light: rgba(100, 149, 237, 0.15);
     --dm-primary-dark: #4169e1;
 
+    /* Links: the primary is 2.67:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (40%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 40%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 55%);
+
     --dm-secondary: #9370db;
     --dm-secondary-hover: #a384e0;
     --dm-secondary-active: #b398e5;
@@ -15961,6 +16097,12 @@ code {
     --dm-primary-light: rgba(65, 105, 225, 0.15);
     --dm-primary-dark: #2c4a9e;
 
+    /* Links: the primary is 2.14:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (60%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 60%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 75%);
+
     /* Focus ring with royal colour */
     --dm-focus-ring: 0 0 0 3px rgba(65, 105, 225, 0.3);
     --dm-border-focus: #4169e1;
@@ -16174,6 +16316,12 @@ code {
     --dm-primary-light: rgba(212, 192, 106, 0.15);
     --dm-primary-dark: #c9b458;
 
+    /* Links: the primary is 1.63:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (55%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 55%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 70%);
+
     --dm-secondary: #b6b1a1;
     --dm-secondary-hover: #c4bfb0;
     --dm-secondary-active: #d2cdbf;
@@ -16596,6 +16744,12 @@ code {
     --dm-primary-light: rgba(160, 174, 192, 0.15);
     --dm-primary-dark: #718096;
 
+    /* Links: the primary is 2.03:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (50%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 50%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 65%);
+
     --dm-secondary: #cbd5e0;
     --dm-secondary-hover: #d5dce6;
     --dm-secondary-active: #dfe3ec;
@@ -16792,6 +16946,12 @@ code {
     --dm-primary-light: rgba(112, 128, 144, 0.15);
     --dm-primary-dark: #4a5568;
 
+    /* Links: the primary is 3.55:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (40%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 40%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 55%);
+
     /* Focus ring with silver colour */
     --dm-focus-ring: 0 0 0 3px rgba(112, 128, 144, 0.3);
     --dm-border-focus: #708090;
@@ -17005,6 +17165,12 @@ code {
     --dm-primary-light: rgba(120, 144, 156, 0.15);
     --dm-primary-dark: #607d8b;
 
+    /* Links: the primary is 3.01:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (30%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 30%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 45%);
+
     --dm-secondary: #90a4ae;
     --dm-secondary-hover: #a1b3bb;
     --dm-secondary-active: #b2c2c8;
@@ -17201,6 +17367,12 @@ code {
     --dm-primary-light: rgba(138, 155, 171, 0.15);
     --dm-primary-dark: #1c2428;
 
+    /* Links: the primary is 3.63:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (40%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 40%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 55%);
+
     /* Focus ring with charcoal colour */
     --dm-focus-ring: 0 0 0 3px rgba(54, 69, 79, 0.3);
     --dm-border-focus: #36454f;
@@ -18003,6 +18175,12 @@ code {
     --dm-primary-light: #f3e5f5;
     --dm-primary-dark: #7d3c98;
 
+    /* Links: the primary is 3.85:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (25%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 25%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 40%);
+
     /* Focus ring with soft purple colour */
     --dm-focus-ring: 0 0 0 3px rgba(155, 89, 182, 0.35);
     --dm-border-focus: #9b59b6;
@@ -18460,6 +18638,12 @@ code {
     --dm-primary-light: #efebe9;
     --dm-primary-dark: #6d4c41;
 
+    /* Links: the primary is 3.9:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (25%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 25%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 40%);
+
     /* Focus ring with warm brown colour */
     --dm-focus-ring: 0 0 0 3px rgba(141, 110, 99, 0.35);
     --dm-border-focus: #8d6e63;
@@ -18919,6 +19103,12 @@ code {
     --dm-primary-light: #e0f7fa;
     --dm-primary-dark: #006064;
 
+    /* Links: the primary is 4.07:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (20%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 20%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 35%);
+
     /* Focus ring with cyan colour */
     --dm-focus-ring: 0 0 0 3px rgba(0, 131, 143, 0.3);
     --dm-border-focus: #00838f;
@@ -19417,6 +19607,12 @@ code {
     --dm-primary-light: #d4f5e4;
     --dm-primary-dark: #1b5e3a;
 
+    /* Links: the primary is 3.01:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (35%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 35%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 50%);
+
     /* Focus ring with mint colour */
     --dm-focus-ring: 0 0 0 3px rgba(46, 158, 110, 0.3);
     --dm-border-focus: #2e9e6e;
@@ -19878,6 +20074,12 @@ code {
     --dm-primary-light: #FDF5E0;
     --dm-primary-dark: #8B7335;
 
+    /* Links: the primary is 2.23:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (45%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 45%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 60%);
+
     /* Focus ring with warm gold colour */
     --dm-focus-ring: 0 0 0 3px rgba(197, 165, 90, 0.3);
     --dm-border-focus: #C5A55A;
@@ -20562,6 +20764,12 @@ code {
     --dm-primary-active: #1e40af;
     --dm-primary-light: rgba(37, 99, 235, 0.20);
     --dm-primary-dark: #1d4ed8;
+
+    /* Links: the primary is 2.83:1 as text here, under the 4.5:1 AA
+       minimum, so links mix in the text colour - the least (35%) that
+       reads at 5:1 or better on the page, surfaces and cards. */
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 35%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 50%);
     --dm-primary-text: #ffffff;
     --dm-primary-hover-text: #ffffff;
 
@@ -20819,6 +21027,8 @@ code {
     --dm-accent-2: #607d8b;
     --dm-accent-3: #455a64;
     --dm-accent-4: #263238;
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 60%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 75%);
 
     --dm-success: #2e8b50;
     --dm-success-hover: #287d49;
@@ -20959,6 +21169,8 @@ code {
     --dm-accent-2: #607d8b;
     --dm-accent-3: #455a64;
     --dm-accent-4: #263238;
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 65%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 80%);
 
     --dm-success: #2e8b50;
     --dm-success-hover: #287d49;
@@ -21099,6 +21311,8 @@ code {
     --dm-accent-2: #607d8b;
     --dm-accent-3: #455a64;
     --dm-accent-4: #263238;
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 60%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 75%);
 
     --dm-success: #2e8b50;
     --dm-success-hover: #287d49;
@@ -21239,6 +21453,8 @@ code {
     --dm-accent-2: #607d8b;
     --dm-accent-3: #455a64;
     --dm-accent-4: #263238;
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 25%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 40%);
 
     --dm-success: #2e8b50;
     --dm-success-hover: #287d49;
@@ -21519,6 +21735,8 @@ code {
     --dm-accent-2: #607d8b;
     --dm-accent-3: #455a64;
     --dm-accent-4: #263238;
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 25%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 40%);
 
     --dm-success: #2e8b50;
     --dm-success-hover: #287d49;
@@ -21659,6 +21877,8 @@ code {
     --dm-accent-2: #607d8b;
     --dm-accent-3: #455a64;
     --dm-accent-4: #263238;
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 50%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 65%);
 
     --dm-success: #2e8b50;
     --dm-success-hover: #287d49;
@@ -21799,6 +22019,8 @@ code {
     --dm-accent-2: #607d8b;
     --dm-accent-3: #455a64;
     --dm-accent-4: #263238;
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 50%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 65%);
 
     --dm-success: #2e8b50;
     --dm-success-hover: #287d49;
@@ -21939,6 +22161,8 @@ code {
     --dm-accent-2: #607d8b;
     --dm-accent-3: #455a64;
     --dm-accent-4: #263238;
+    --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 50%);
+    --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 65%);
 
     --dm-success: #2e8b50;
     --dm-success-hover: #287d49;