domma-js 0.46.1 → 0.48.0

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

@@ -1,8 +1,8 @@
 /*!
- * Domma Complete CSS Bundle v0.46.1
+ * Domma Complete CSS Bundle v0.48.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T20:40:05.429Z
+ * Built: 2026-09-27T22:11:07.262Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.46.1
+ * Domma Core CSS v0.48.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T20:40:05.313Z
- * Commit: 92f2ee4
+ * Built: 2026-09-27T22:11:07.093Z
+ * Commit: cf6d8de
  */
 
 /**
@@ -4835,11 +4835,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Grid CSS v0.46.1
+ * Domma Grid CSS v0.48.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T20:40:05.315Z
- * Commit: 92f2ee4
+ * Built: 2026-09-27T22:11:07.097Z
+ * Commit: cf6d8de
  */
 
 /**
@@ -5460,11 +5460,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.46.1
+ * Domma Elements CSS v0.48.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T20:40:05.319Z
- * Commit: 92f2ee4
+ * Built: 2026-09-27T22:11:07.101Z
+ * Commit: cf6d8de
  */
 
 /**
@@ -5510,9 +5510,12 @@ body.dm-cloaked.dm-ready {
     box-shadow: 0 0 0 3px var(--dm-focus-ring);
 }
 
-.btn:disabled {
+.btn:disabled,
+.btn[aria-disabled="true"],
+.btn.disabled {
     opacity: 0.65;
     cursor: not-allowed;
+    pointer-events: none;
 }
 
 .btn-primary {
@@ -5962,7 +5965,8 @@ body.dm-cloaked.dm-ready {
     border-bottom-color: var(--dm-border);
 }
 
-.tab-item.active {
+.tab-item.active,
+.tab-item[aria-selected="true"] {
     color: var(--dm-link, color-mix(in oklab, var(--dm-primary, #0070d6), var(--dm-text, #1a1a1a) 55%));
     border-bottom-color: var(--dm-primary);
 }
@@ -5994,7 +5998,8 @@ body.dm-cloaked.dm-ready {
     margin-bottom: 0;
 }
 
-.tabs-pills .tab-item.active {
+.tabs-pills .tab-item.active,
+.tabs-pills .tab-item[aria-selected="true"] {
     background-color: var(--dm-surface);
     box-shadow: var(--dm-shadow-sm);
     border-bottom: none;
@@ -6037,7 +6042,8 @@ body.dm-cloaked.dm-ready {
     transition: transform var(--dm-transition-normal);
 }
 
-.accordion-item.active .accordion-icon {
+.accordion-item.active .accordion-icon,
+.accordion-header[aria-expanded="true"] .accordion-icon {
     transform: rotate(180deg);
 }
 
@@ -6316,7 +6322,10 @@ textarea:not([class])::placeholder {
 
 .form-input:disabled,
 .form-select:disabled,
-.form-textarea:disabled {
+.form-textarea:disabled,
+.form-input[aria-disabled="true"],
+.form-select[aria-disabled="true"],
+.form-textarea[aria-disabled="true"] {
     background-color: var(--dm-hover-bg);
     cursor: not-allowed;
     opacity: 0.7;
@@ -6324,7 +6333,10 @@ textarea:not([class])::placeholder {
 
 [data-mode="dark"].form-input:disabled,
 [data-mode="dark"].form-select:disabled,
-[data-mode="dark"].form-textarea:disabled {
+[data-mode="dark"].form-textarea:disabled,
+[data-mode="dark"].form-input[aria-disabled="true"],
+[data-mode="dark"].form-select[aria-disabled="true"],
+[data-mode="dark"].form-textarea[aria-disabled="true"] {
     background-color: var(--dm-surface);
 }
 
@@ -6342,13 +6354,25 @@ textarea:not([class])::placeholder {
 
 .form-input.error,
 .form-select.error,
-.form-textarea.error {
+.form-textarea.error,
+.form-input[aria-invalid="true"],
+.form-select[aria-invalid="true"],
+.form-textarea[aria-invalid="true"],
+.form-input.is-invalid,
+.form-select.is-invalid,
+.form-textarea.is-invalid {
     border-color: var(--dm-danger);
 }
 
 .form-input.error:focus,
 .form-select.error:focus,
-.form-textarea.error:focus {
+.form-textarea.error:focus,
+.form-input[aria-invalid="true"]:focus,
+.form-select[aria-invalid="true"]:focus,
+.form-textarea[aria-invalid="true"]:focus,
+.form-input.is-invalid:focus,
+.form-select.is-invalid:focus,
+.form-textarea.is-invalid:focus {
     box-shadow: 0 0 0 3px var(--dm-focus-ring-danger);
 }
 
@@ -6593,6 +6617,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 {
@@ -7012,19 +7148,22 @@ textarea:not([class])::placeholder {
 }
 
 /* Active/selected state - accent background takes precedence over colour variants */
-.list-group-item.active {
+.list-group-item.active,
+.list-group-item[aria-selected="true"] {
     background-color: var(--dm-primary);
     color: var(--dm-primary-text, var(--dm-white));
     border-bottom-color: var(--dm-primary-hover);
     z-index: 1;
 }
 
-.list-group-item.active .list-group-item-text {
+.list-group-item.active .list-group-item-text,
+.list-group-item[aria-selected="true"] .list-group-item-text {
     color: rgba(255, 255, 255, 0.75);
 }
 
 /* Disabled state - dimmed and non-interactive */
-.list-group-item.disabled {
+.list-group-item.disabled,
+.list-group-item[aria-disabled="true"] {
     opacity: 0.7;
     cursor: not-allowed;
     pointer-events: none;
@@ -7475,14 +7614,16 @@ code {
     text-decoration: none;
 }
 
-.pagination-link.active {
+.pagination-link.active,
+.pagination-link[aria-current="page"] {
     background-color: var(--dm-primary);
     border-color: var(--dm-primary);
     color: var(--dm-primary-text, var(--dm-white));
 }
 
 .pagination-link:disabled,
-.pagination-link.disabled {
+.pagination-link.disabled,
+.pagination-link[aria-disabled="true"] {
     opacity: 0.5;
     cursor: not-allowed;
     pointer-events: none;
@@ -11347,7 +11488,8 @@ code {
     color: var(--dm-primary, #6495ED);
 }
 
-.dm-breadcrumbs-item.active {
+.dm-breadcrumbs-item.active,
+.dm-breadcrumbs-item[aria-current="page"] {
     color: var(--dm-text);
     font-weight: 500;
 }
@@ -11365,7 +11507,8 @@ code {
     color: var(--dm-text-muted);
 }
 
-[data-mode="dark"] .dm-breadcrumbs-item.active {
+[data-mode="dark"] .dm-breadcrumbs-item.active,
+[data-mode="dark"] .dm-breadcrumbs-item[aria-current="page"] {
     color: var(--dm-text);
 }
 
@@ -14144,6 +14287,237 @@ code {
     }
 }
 
+/* ============================================
+   SKELETON LOADERS
+   Shimmering placeholders shaped like the content on its way. The tint is the
+   theme's text colour mixed into its surface, so it reads as a quiet grey on
+   light themes and a quiet lift on dark ones. Written by E.skeleton() or by
+   hand. Override hooks: --dm-skeleton-bg, --dm-skeleton-shine,
+   --dm-skeleton-duration, --dm-skeleton-columns (table).
+   ============================================ */
+.skeleton {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    background-color: var(--dm-skeleton-bg, color-mix(in srgb, var(--dm-text) 10%, var(--dm-surface)));
+    border-radius: var(--dm-radius-md);
+    user-select: none;
+    pointer-events: none;
+}
+
+/* The sweep: a soft band that crosses each shape. Towards the surface on light
+   themes, towards the text on dark ones - lighter in both cases. */
+.skeleton::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(90deg,
+        transparent 0%,
+        var(--dm-skeleton-shine, color-mix(in srgb, var(--dm-surface) 70%, transparent)) 50%,
+        transparent 100%);
+    animation: dm-skeleton-sweep var(--dm-skeleton-duration, 1.6s) ease-in-out infinite;
+}
+
+[data-mode="dark"] .skeleton::after {
+    background-image: linear-gradient(90deg,
+        transparent 0%,
+        var(--dm-skeleton-shine, color-mix(in srgb, var(--dm-text) 8%, transparent)) 50%,
+        transparent 100%);
+}
+
+@keyframes dm-skeleton-sweep {
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+/* animate: false, or by hand on a shape or a group of shapes */
+.skeleton-static::after,
+.skeleton-static .skeleton::after {
+    display: none;
+}
+
+/* Lines of text: 0.875em bars on a 1.5em rhythm, like body copy */
+.skeleton-text {
+    width: 100%;
+    height: 0.875em;
+    border-radius: var(--dm-radius-sm);
+}
+
+.skeleton-text + .skeleton-text {
+    margin-top: 0.625em;
+}
+
+.skeleton-text-sm {
+    height: 0.75em;
+}
+
+/* The last line of a paragraph runs short */
+.skeleton-lines > .skeleton-text:last-child:not(:first-child) {
+    width: 60%;
+}
+
+.skeleton-lines + .skeleton-lines {
+    margin-top: var(--dm-space-6);
+}
+
+.skeleton-heading {
+    width: 50%;
+    height: 1.25rem;
+    margin-bottom: var(--dm-space-4);
+    border-radius: var(--dm-radius-sm);
+}
+
+.skeleton-w-25 { width: 25%; }
+.skeleton-w-50 { width: 50%; }
+.skeleton-w-75 { width: 75%; }
+.skeleton-w-100 { width: 100%; }
+
+.skeleton-lines > .skeleton-w-25:last-child:not(:first-child) { width: 25%; }
+.skeleton-lines > .skeleton-w-50:last-child:not(:first-child) { width: 50%; }
+.skeleton-lines > .skeleton-w-75:last-child:not(:first-child) { width: 75%; }
+.skeleton-lines > .skeleton-w-100:last-child:not(:first-child) { width: 100%; }
+
+/* Circles - avatars, icons. 2.5rem by default */
+.skeleton-circle,
+.skeleton-avatar {
+    flex-shrink: 0;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--dm-radius-full);
+}
+
+.skeleton-circle.skeleton-sm,
+.skeleton-avatar.skeleton-sm { width: 2rem; height: 2rem; }
+.skeleton-circle.skeleton-lg,
+.skeleton-avatar.skeleton-lg { width: 3.5rem; height: 3.5rem; }
+.skeleton-circle.skeleton-xl,
+.skeleton-avatar.skeleton-xl { width: 5rem; height: 5rem; }
+
+/* Blocks and images - 16:9 unless told otherwise */
+.skeleton-rect,
+.skeleton-image {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+}
+
+.skeleton-ratio-1x1 { aspect-ratio: 1 / 1; }
+.skeleton-ratio-4x3 { aspect-ratio: 4 / 3; }
+.skeleton-ratio-16x9 { aspect-ratio: 16 / 9; }
+.skeleton-ratio-21x9 { aspect-ratio: 21 / 9; }
+
+/* The size of a .btn: small text on a 1.5 line, space-2 padding, 1px border */
+.skeleton-button {
+    display: inline-block;
+    width: 6rem;
+    height: calc(var(--dm-font-size-sm) * 1.5 + var(--dm-space-2) * 2 + 2px);
+    vertical-align: middle;
+    border-radius: var(--dm-radius-md);
+}
+
+/* Card: the .card frame, an image with square corners, a .card-body's padding */
+.skeleton-card {
+    overflow: hidden;
+    color: var(--dm-text);
+    background-color: var(--dm-card-bg, var(--dm-surface));
+    border: 1px solid var(--dm-card-border, var(--dm-border));
+    border-radius: var(--dm-radius-lg);
+}
+
+.skeleton-card > .skeleton-image {
+    border-radius: 0;
+}
+
+.skeleton-card-body {
+    padding: var(--dm-space-6);
+}
+
+/* List: the .list-group frame and item padding, circle then two lines */
+.skeleton-list {
+    overflow: hidden;
+    color: var(--dm-text);
+    background-color: var(--dm-surface);
+    border: 1px solid var(--dm-border);
+    border-radius: var(--dm-radius-md);
+}
+
+.skeleton-list-item {
+    display: flex;
+    align-items: center;
+    gap: var(--dm-space-3);
+    padding: var(--dm-space-3) var(--dm-space-4);
+    font-size: var(--dm-font-size-sm);
+    border-bottom: 1px solid var(--dm-border-light);
+}
+
+.skeleton-list-item:last-child {
+    border-bottom: none;
+}
+
+.skeleton-list-item-content {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+/* Table: rows of cells with .table's padding and rule */
+.skeleton-table {
+    overflow: hidden;
+    color: var(--dm-text);
+    font-size: var(--dm-font-size-sm);
+    border: 1px solid var(--dm-table-border, var(--dm-border));
+    border-radius: var(--dm-radius-md);
+}
+
+.skeleton-table-row {
+    display: grid;
+    grid-template-columns: repeat(var(--dm-skeleton-columns, 4), minmax(0, 1fr));
+    align-items: center;
+    gap: var(--dm-space-4);
+    padding: var(--dm-space-3) var(--dm-space-4);
+    border-bottom: 1px solid var(--dm-table-border, var(--dm-border));
+}
+
+.skeleton-table-row:last-child {
+    border-bottom: none;
+}
+
+/* Cells sit side by side: no line spacing between them */
+.skeleton-table-row > .skeleton-text + .skeleton-text {
+    margin-top: 0;
+}
+
+.skeleton-table-head {
+    color: var(--dm-table-header-text, var(--dm-text));
+    background-color: var(--dm-table-header-bg, var(--dm-background-alt));
+}
+
+/* Inside a real table cell (the DataTable's loading rows) */
+td > .skeleton-text {
+    min-width: 3rem;
+}
+
+/* The "Loading..." announcement: read out, not shown */
+.skeleton-status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* Reduced motion: no sweep, just the still tint */
+@media (prefers-reduced-motion: reduce) {
+    .skeleton::after {
+        display: none;
+        animation: none;
+    }
+}
+
 
 /* ============================================
    THEME SYSTEM
@@ -14151,11 +14525,11 @@ code {
    ============================================ */
 
 /*!
- * Domma Themes v0.46.1
+ * Domma Themes v0.48.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T20:40:05.303Z
- * Commit: 92f2ee4
+ * Built: 2026-09-27T22:11:07.079Z
+ * Commit: cf6d8de
  */
 
 /**
@@ -14469,6 +14843,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 +15719,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 +15937,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 +16157,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 +16359,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 +16578,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 +17006,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 +17208,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 +17427,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,9 +17629,15 @@ 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;
+    --dm-focus-ring: 0 0 0 3px rgba(138, 155, 171, 0.4);
+    --dm-border-focus: #8a9bab;
 
     /* ================================================
        SECONDARY COLOURS - Slate
@@ -18003,6 +18437,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 +18900,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 +19365,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 +19869,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 +20336,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 +21026,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;
 
@@ -20801,7 +21271,7 @@ code {
     --dm-primary-text: #ffffff;
     --dm-primary-hover-text: #ffffff;
     --dm-focus-ring: 0 0 0 3px rgba(59, 118, 188, 0.35);
-    --dm-border-focus: #3b76bc;
+    --dm-border-focus: #7fb0e0;
     --dm-secondary: #5f6f7a;
     --dm-secondary-hover: #52606b;
     --dm-secondary-active: #46535d;
@@ -20819,12 +21289,14 @@ code {
     --dm-accent-2: #607d8b;
     --dm-accent-3: #455a64;
     --dm-accent-4: #263238;
-
-    --dm-success: #2e8b50;
-    --dm-success-hover: #287d49;
-    --dm-success-active: #226b3f;
-    --dm-success-light: rgba(46, 139, 80, 0.15);
-    --dm-success-dark: #1c5733;
+    --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: #287c47;
+    --dm-success-hover: #236e3e;
+    --dm-success-active: #1e5f35;
+    --dm-success-light: rgba(40, 124, 71, 0.15);
+    --dm-success-dark: #164627;
     --dm-success-text: #ffffff;
     --dm-success-hover-text: #ffffff;
     --dm-danger: #c0432f;
@@ -20941,7 +21413,7 @@ code {
     --dm-primary-text: #ffffff;
     --dm-primary-hover-text: #ffffff;
     --dm-focus-ring: 0 0 0 3px rgba(91, 99, 168, 0.35);
-    --dm-border-focus: #5b63a8;
+    --dm-border-focus: #9aa0d4;
     --dm-secondary: #5f6f7a;
     --dm-secondary-hover: #52606b;
     --dm-secondary-active: #46535d;
@@ -20959,12 +21431,14 @@ code {
     --dm-accent-2: #607d8b;
     --dm-accent-3: #455a64;
     --dm-accent-4: #263238;
-
-    --dm-success: #2e8b50;
-    --dm-success-hover: #287d49;
-    --dm-success-active: #226b3f;
-    --dm-success-light: rgba(46, 139, 80, 0.15);
-    --dm-success-dark: #1c5733;
+    --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: #287c47;
+    --dm-success-hover: #236e3e;
+    --dm-success-active: #1e5f35;
+    --dm-success-light: rgba(40, 124, 71, 0.15);
+    --dm-success-dark: #164627;
     --dm-success-text: #ffffff;
     --dm-success-hover-text: #ffffff;
     --dm-danger: #c0432f;
@@ -21081,7 +21555,7 @@ code {
     --dm-primary-text: #ffffff;
     --dm-primary-hover-text: #ffffff;
     --dm-focus-ring: 0 0 0 3px rgba(42, 129, 120, 0.35);
-    --dm-border-focus: #2a8178;
+    --dm-border-focus: #66c2b8;
     --dm-secondary: #5f6f7a;
     --dm-secondary-hover: #52606b;
     --dm-secondary-active: #46535d;
@@ -21099,12 +21573,14 @@ code {
     --dm-accent-2: #607d8b;
     --dm-accent-3: #455a64;
     --dm-accent-4: #263238;
-
-    --dm-success: #2e8b50;
-    --dm-success-hover: #287d49;
-    --dm-success-active: #226b3f;
-    --dm-success-light: rgba(46, 139, 80, 0.15);
-    --dm-success-dark: #1c5733;
+    --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: #287c47;
+    --dm-success-hover: #236e3e;
+    --dm-success-active: #1e5f35;
+    --dm-success-light: rgba(40, 124, 71, 0.15);
+    --dm-success-dark: #164627;
     --dm-success-text: #ffffff;
     --dm-success-hover-text: #ffffff;
     --dm-danger: #c0432f;
@@ -21183,7 +21659,7 @@ code {
     --dm-surface-overlay: #ffffff;
     --dm-text: #1f2733;
     --dm-text-secondary: #5a6677;
-    --dm-text-muted: #8893a3;
+    --dm-text-muted: #687486;
     --dm-text-disabled: #aab2bd;
     --dm-text-inverse: #ffffff;
     --dm-border: #e4e8ef;
@@ -21239,12 +21715,14 @@ 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;
-    --dm-success-active: #226b3f;
+    --dm-success: #287c47;
+    --dm-success-hover: #236e3e;
+    --dm-success-active: #1e5f35;
     --dm-success-light: #e3f3e8;
-    --dm-success-dark: #1c5733;
+    --dm-success-dark: #164627;
     --dm-success-text: #ffffff;
     --dm-success-hover-text: #ffffff;
     --dm-danger: #c0432f;
@@ -21323,7 +21801,7 @@ code {
     --dm-surface-overlay: #ffffff;
     --dm-text: #1f2733;
     --dm-text-secondary: #5a6677;
-    --dm-text-muted: #8893a3;
+    --dm-text-muted: #687486;
     --dm-text-disabled: #aab2bd;
     --dm-text-inverse: #ffffff;
     --dm-border: #e4e8ef;
@@ -21380,11 +21858,11 @@ code {
     --dm-accent-3: #455a64;
     --dm-accent-4: #263238;
 
-    --dm-success: #2e8b50;
-    --dm-success-hover: #287d49;
-    --dm-success-active: #226b3f;
+    --dm-success: #287c47;
+    --dm-success-hover: #236e3e;
+    --dm-success-active: #1e5f35;
     --dm-success-light: #e3f3e8;
-    --dm-success-dark: #1c5733;
+    --dm-success-dark: #164627;
     --dm-success-text: #ffffff;
     --dm-success-hover-text: #ffffff;
     --dm-danger: #c0432f;
@@ -21463,7 +21941,7 @@ code {
     --dm-surface-overlay: #ffffff;
     --dm-text: #1f2733;
     --dm-text-secondary: #5a6677;
-    --dm-text-muted: #8893a3;
+    --dm-text-muted: #687486;
     --dm-text-disabled: #aab2bd;
     --dm-text-inverse: #ffffff;
     --dm-border: #e4e8ef;
@@ -21519,12 +21997,14 @@ 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;
-    --dm-success-active: #226b3f;
+    --dm-success: #287c47;
+    --dm-success-hover: #236e3e;
+    --dm-success-active: #1e5f35;
     --dm-success-light: #e3f3e8;
-    --dm-success-dark: #1c5733;
+    --dm-success-dark: #164627;
     --dm-success-text: #ffffff;
     --dm-success-hover-text: #ffffff;
     --dm-danger: #c0432f;
@@ -21641,7 +22121,7 @@ code {
     --dm-primary-text: #ffffff;
     --dm-primary-hover-text: #ffffff;
     --dm-focus-ring: 0 0 0 3px rgba(59, 118, 188, 0.35);
-    --dm-border-focus: #3b76bc;
+    --dm-border-focus: #7fb0e0;
     --dm-secondary: #5f6f7a;
     --dm-secondary-hover: #52606b;
     --dm-secondary-active: #46535d;
@@ -21659,12 +22139,14 @@ code {
     --dm-accent-2: #607d8b;
     --dm-accent-3: #455a64;
     --dm-accent-4: #263238;
-
-    --dm-success: #2e8b50;
-    --dm-success-hover: #287d49;
-    --dm-success-active: #226b3f;
-    --dm-success-light: rgba(46, 139, 80, 0.15);
-    --dm-success-dark: #1c5733;
+    --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: #287c47;
+    --dm-success-hover: #236e3e;
+    --dm-success-active: #1e5f35;
+    --dm-success-light: rgba(40, 124, 71, 0.15);
+    --dm-success-dark: #164627;
     --dm-success-text: #ffffff;
     --dm-success-hover-text: #ffffff;
     --dm-danger: #c0432f;
@@ -21781,7 +22263,7 @@ code {
     --dm-primary-text: #ffffff;
     --dm-primary-hover-text: #ffffff;
     --dm-focus-ring: 0 0 0 3px rgba(91, 99, 168, 0.35);
-    --dm-border-focus: #5b63a8;
+    --dm-border-focus: #9aa0d4;
     --dm-secondary: #5f6f7a;
     --dm-secondary-hover: #52606b;
     --dm-secondary-active: #46535d;
@@ -21799,12 +22281,14 @@ code {
     --dm-accent-2: #607d8b;
     --dm-accent-3: #455a64;
     --dm-accent-4: #263238;
-
-    --dm-success: #2e8b50;
-    --dm-success-hover: #287d49;
-    --dm-success-active: #226b3f;
-    --dm-success-light: rgba(46, 139, 80, 0.15);
-    --dm-success-dark: #1c5733;
+    --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: #287c47;
+    --dm-success-hover: #236e3e;
+    --dm-success-active: #1e5f35;
+    --dm-success-light: rgba(40, 124, 71, 0.15);
+    --dm-success-dark: #164627;
     --dm-success-text: #ffffff;
     --dm-success-hover-text: #ffffff;
     --dm-danger: #c0432f;
@@ -21921,7 +22405,7 @@ code {
     --dm-primary-text: #ffffff;
     --dm-primary-hover-text: #ffffff;
     --dm-focus-ring: 0 0 0 3px rgba(42, 129, 120, 0.35);
-    --dm-border-focus: #2a8178;
+    --dm-border-focus: #66c2b8;
     --dm-secondary: #5f6f7a;
     --dm-secondary-hover: #52606b;
     --dm-secondary-active: #46535d;
@@ -21939,12 +22423,14 @@ code {
     --dm-accent-2: #607d8b;
     --dm-accent-3: #455a64;
     --dm-accent-4: #263238;
-
-    --dm-success: #2e8b50;
-    --dm-success-hover: #287d49;
-    --dm-success-active: #226b3f;
-    --dm-success-light: rgba(46, 139, 80, 0.15);
-    --dm-success-dark: #1c5733;
+    --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: #287c47;
+    --dm-success-hover: #236e3e;
+    --dm-success-active: #1e5f35;
+    --dm-success-light: rgba(40, 124, 71, 0.15);
+    --dm-success-dark: #164627;
     --dm-success-text: #ffffff;
     --dm-success-hover-text: #ffffff;
     --dm-danger: #c0432f;