domma-js 0.46.1 → 0.47.0

package/public/dist/elements.css

@@ -1,9 +1,9 @@
 /*!
- * 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
  */
 
 /**
@@ -1132,6 +1132,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 {

package/public/dist/grid.css

@@ -1,9 +1,9 @@
 /*!
- * 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
  */
 
 /**

package/public/dist/syntax.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Syntax Highlighting CSS v0.46.1
+ * Domma Syntax Highlighting CSS v0.47.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T20:40:05.322Z
- * Commit: 92f2ee4
+ * Built: 2026-09-27T21:27:08.372Z
+ * Commit: eff3166
  */
 
 /**

package/public/dist/themes/domma-themes.css

@@ -1,9 +1,9 @@
 /*!
- * 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
  */
 
 /**
@@ -317,6 +317,12 @@
     --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;
@@ -1187,6 +1193,12 @@
     --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;
@@ -1399,6 +1411,12 @@
     --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;
@@ -1613,6 +1631,12 @@
     --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;
@@ -1809,6 +1833,12 @@
     --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;
@@ -2022,6 +2052,12 @@
     --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;
@@ -2444,6 +2480,12 @@
     --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;
@@ -2640,6 +2682,12 @@
     --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;
@@ -2853,6 +2901,12 @@
     --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;
@@ -3049,6 +3103,12 @@
     --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;
@@ -3851,6 +3911,12 @@
     --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;
@@ -4308,6 +4374,12 @@
     --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;
@@ -4767,6 +4839,12 @@
     --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;
@@ -5265,6 +5343,12 @@
     --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;
@@ -5726,6 +5810,12 @@
     --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;
@@ -6410,6 +6500,12 @@
     --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;
 
@@ -6667,6 +6763,8 @@
     --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;
@@ -6807,6 +6905,8 @@
     --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;
@@ -6947,6 +7047,8 @@
     --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;
@@ -7087,6 +7189,8 @@
     --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;
@@ -7367,6 +7471,8 @@
     --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;
@@ -7507,6 +7613,8 @@
     --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;
@@ -7647,6 +7755,8 @@
     --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;
@@ -7787,6 +7897,8 @@
     --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;