domma-js 0.47.0 → 0.49.0

package/public/dist/elements.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Elements CSS v0.47.0
+ * Domma Elements CSS v0.49.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T21:27:08.368Z
- * Commit: eff3166
+ * Built: 2026-09-27T22:28:45.949Z
+ * Commit: 5bc521e
  */
 
 /**
@@ -49,9 +49,12 @@
     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 {
@@ -501,7 +504,8 @@
     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);
 }
@@ -533,7 +537,8 @@
     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;
@@ -576,7 +581,8 @@
     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);
 }
 
@@ -855,7 +861,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;
@@ -863,7 +872,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);
 }
 
@@ -881,13 +893,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);
 }
 
@@ -1663,19 +1687,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;
@@ -2126,14 +2153,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;
@@ -5998,7 +6027,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;
 }
@@ -6016,7 +6046,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);
 }
 
@@ -8794,3 +8825,409 @@ code {
         transition: none;
     }
 }
+
+/* ============================================
+   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;
+    }
+}
+
+/* ============================================
+   POPOVER
+   E.popover(trigger, options) - src/popover.js
+   ============================================ */
+
+/*
+ * Portalled to <body> and positioned with `fixed`, so no ancestor's overflow
+ * or stacking context can clip it. Above modals and slideovers (a popover is
+ * usually opened from inside one), below the context menu (10050), which can
+ * be opened from inside a popover.
+ *
+ * Width options arrive as custom properties, so a theme or page stylesheet
+ * can still set them without fighting inline styles.
+ */
+.dm-popover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10045;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: var(--dm-popover-width, auto);
+    max-width: min(var(--dm-popover-max-width, 20rem), calc(100vw - 16px));
+    max-height: calc(100vh - 16px);
+    background: var(--dm-surface);
+    color: var(--dm-text);
+    border: 1px solid var(--dm-border);
+    border-radius: var(--dm-radius-md);
+    box-shadow: var(--dm-shadow-lg);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    text-align: left;
+    white-space: normal;
+    overflow-wrap: break-word;
+    opacity: 0;
+    transform: scale(0.96);
+    transform-origin: top center;
+    transition:
+        opacity var(--dm-popover-duration, 150ms) ease,
+        transform var(--dm-popover-duration, 150ms) cubic-bezier(0.16, 1, 0.3, 1);
+    outline: none;
+}
+
+.dm-popover[data-side="top"]    { transform-origin: bottom center; }
+.dm-popover[data-side="bottom"] { transform-origin: top center; }
+.dm-popover[data-side="left"]   { transform-origin: center right; }
+.dm-popover[data-side="right"]  { transform-origin: center left; }
+
+.dm-popover.is-open {
+    opacity: 1;
+    transform: none;
+}
+
+.dm-popover[data-animation="off"] {
+    transition: none;
+}
+
+/* The trigger has scrolled out of view; the panel waits for it. */
+.dm-popover.is-detached {
+    visibility: hidden;
+    pointer-events: none;
+}
+
+.dm-popover [hidden] {
+    display: none;
+}
+
+.dm-popover-header {
+    padding: 0.625rem 0.875rem 0;
+}
+
+.dm-popover-title {
+    margin: 0;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    line-height: 1.35;
+    color: var(--dm-text);
+}
+
+/* The body scrolls when the content is taller than the viewport, so the
+   panel itself keeps overflow visible and the arrow is not clipped. */
+.dm-popover-body {
+    min-height: 0;
+    padding: 0.625rem 0.875rem;
+    overflow: auto;
+}
+
+.dm-popover-body > :first-child { margin-top: 0; }
+.dm-popover-body > :last-child  { margin-bottom: 0; }
+
+.dm-popover.is-dismissible .dm-popover-header,
+.dm-popover.is-dismissible:not(.has-title) .dm-popover-body {
+    padding-right: 2.25rem;
+}
+
+.dm-popover-close {
+    position: absolute;
+    top: 0.375rem;
+    right: 0.375rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--dm-radius-sm);
+    background: transparent;
+    color: var(--dm-text);
+    cursor: pointer;
+}
+
+.dm-popover-close:hover {
+    background: var(--dm-hover-bg);
+    color: var(--dm-text);
+}
+
+.dm-popover-close:focus-visible {
+    outline: 2px solid var(--dm-primary);
+    outline-offset: 1px;
+}
+
+/*
+ * A square turned 45 degrees, bordered on the two edges that face out, so it
+ * reads as a continuation of the panel's own border. JS sets its position
+ * along the edge (left for top/bottom, top for left/right).
+ */
+.dm-popover-arrow {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    margin: -5px 0 0 -5px;
+    background: var(--dm-surface);
+    border: 1px solid var(--dm-border);
+    transform: rotate(45deg);
+    pointer-events: none;
+}
+
+.dm-popover[data-side="bottom"] .dm-popover-arrow {
+    top: -1px;
+    border-right: 0;
+    border-bottom: 0;
+}
+
+.dm-popover[data-side="top"] .dm-popover-arrow {
+    top: calc(100% + 1px);
+    border-left: 0;
+    border-top: 0;
+}
+
+.dm-popover[data-side="right"] .dm-popover-arrow {
+    left: -1px;
+    margin: -5px 0 0 -5px;
+    border-top: 0;
+    border-right: 0;
+}
+
+.dm-popover[data-side="left"] .dm-popover-arrow {
+    left: calc(100% + 1px);
+    border-bottom: 0;
+    border-left: 0;
+}
+
+.dm-popover-trigger[role="button"] {
+    cursor: pointer;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dm-popover {
+        transition: none;
+        transform: none;
+    }
+}

package/public/dist/grid.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Grid CSS v0.47.0
+ * Domma Grid CSS v0.49.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T21:27:08.363Z
- * Commit: eff3166
+ * Built: 2026-09-27T22:28:45.944Z
+ * Commit: 5bc521e
  */
 
 /**

package/public/dist/syntax.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Syntax Highlighting CSS v0.47.0
+ * Domma Syntax Highlighting CSS v0.49.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T21:27:08.372Z
- * Commit: eff3166
+ * Built: 2026-09-27T22:28:45.953Z
+ * Commit: 5bc521e
  */
 
 /**

package/public/dist/themes/core.css

@@ -18,6 +18,11 @@
     --dm-warning: var(--dm-core-warning);
     --dm-danger: var(--dm-core-danger);
     --dm-info: var(--dm-core-info);
+    --dm-info-text: #055160;
+    --dm-warning-text: #000000;
+    --dm-primary-text: #ffffff;
+    --dm-danger-text: #ffffff;
+    --dm-success-text: #ffffff;
 
     /* Component specific overrides can go here */
 }