domma-js 0.49.0 → 0.50.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "domma-js",
-    "version": "0.49.0",
+    "version": "0.50.1",
     "description": "Dynamic Object Manipulation & Modeling API - A complete front-end toolkit.",
     "main": "public/dist/domma.min.js",
     "module": "public/dist/domma.esm.js",
@@ -89,7 +89,7 @@
         "@vitest/coverage-v8": "^4.0.16",
         "cypress": "^15.8.1",
         "domma-celebrate": "^1.0.0",
-        "domma-reactive": "1.1.1",
+        "domma-reactive": "1.2.0",
         "dompurify": "^3.4.13",
         "dotenv": "^17.2.3",
         "jsdom": "^24.1.0",

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

@@ -1,8 +1,8 @@
 /*!
- * Domma Complete CSS Bundle v0.49.0
+ * Domma Complete CSS Bundle v0.50.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T22:28:46.105Z
+ * Built: 2026-09-28T12:10:02.946Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.49.0
+ * Domma Core CSS v0.50.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T22:28:45.940Z
- * Commit: 5bc521e
+ * Built: 2026-09-28T12:10:02.753Z
+ * Commit: 49f4331
  */
 
 /**
@@ -1216,8 +1216,9 @@ code, pre {
     letter-spacing: 0.025em;
 }
 
-/* Truncate */
-.truncate {
+/* Truncate - one line with an ellipsis. .text-truncate is the Bootstrap spelling. */
+.truncate,
+.text-truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -2192,6 +2193,143 @@ code, pre {
     user-select: text;
 }
 
+/* ============================================
+   ACCESSIBILITY & TEXT UTILITIES
+   Screen-reader-only text, skip links, line clamping,
+   whole-card links and a divider with a word in it.
+   Tailwind names (.sr-only, .line-clamp-*) with the Bootstrap
+   spellings (.visually-hidden, .text-truncate) as aliases.
+   ============================================ */
+
+/* Hidden on screen, still read by screen readers. The -focusable form comes
+   back when it (or something inside it) takes focus - the skip link pattern. */
+.sr-only,
+.visually-hidden,
+.sr-only-focusable:not(:focus):not(:focus-within),
+.visually-hidden-focusable:not(:focus):not(:focus-within),
+.skip-link:not(:focus):not(:focus-within) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    clip-path: inset(50%) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
+
+/* A ready-made skip link: the first thing in <body>, hidden until Tab reaches
+   it, then pinned top left above everything (popovers are 10045). */
+.skip-link:focus,
+.skip-link:focus-within {
+    position: fixed;
+    top: var(--dm-space-3);
+    left: var(--dm-space-3);
+    z-index: 10100;
+    padding: var(--dm-space-2) var(--dm-space-4);
+    border-radius: var(--dm-radius-md);
+    background-color: var(--dm-primary);
+    color: var(--dm-primary-text, var(--dm-white));
+    font-weight: 600;
+    text-decoration: none;
+    box-shadow: var(--dm-shadow-lg);
+    outline: 2px solid var(--dm-border-focus);
+    outline-offset: 2px;
+}
+
+/* Undo .sr-only, e.g. at a breakpoint or from a script */
+.not-sr-only {
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: visible !important;
+    clip: auto !important;
+    clip-path: none !important;
+    white-space: normal !important;
+}
+
+/* Line clamp - cut text after N lines with an ellipsis */
+.line-clamp-1,
+.line-clamp-2,
+.line-clamp-3,
+.line-clamp-4,
+.line-clamp-5 {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+}
+
+.line-clamp-1 { -webkit-line-clamp: 1; }
+.line-clamp-2 { -webkit-line-clamp: 2; }
+.line-clamp-3 { -webkit-line-clamp: 3; }
+.line-clamp-4 { -webkit-line-clamp: 4; }
+.line-clamp-5 { -webkit-line-clamp: 5; }
+
+.line-clamp-none {
+    display: block;
+    overflow: visible;
+    -webkit-box-orient: horizontal;
+    -webkit-line-clamp: unset;
+}
+
+/* Stretched link - the link's ::after covers its nearest positioned ancestor,
+   so the whole card is the link. A .card holding one is positioned for you;
+   anything else needs .relative. Other links or buttons inside must sit above
+   it: give them .relative .z-10. */
+.stretched-link::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+}
+
+.card:has(.stretched-link),
+.list-group-item:has(.stretched-link) {
+    position: relative;
+}
+
+.stretched-link:focus-visible {
+    outline: none;
+}
+
+.stretched-link:focus-visible::after {
+    outline: 2px solid var(--dm-border-focus);
+    outline-offset: -2px;
+}
+
+/* Divider with text - a rule either side of a word, e.g. "or" between two
+   sign-in options. -start / -end push the text to one side. */
+.divider-text {
+    display: flex;
+    align-items: center;
+    gap: var(--dm-space-3);
+    margin: var(--dm-space-4) 0;
+    color: var(--dm-text-secondary);
+    font-size: var(--dm-font-size-sm);
+    line-height: 1.4;
+}
+
+.divider-text::before,
+.divider-text::after {
+    content: "";
+    flex: 1 1 0;
+    border-top: 1px solid var(--dm-border);
+}
+
+.divider-text:empty {
+    gap: 0;
+}
+
+.divider-text-start::before,
+.divider-text-end::after {
+    flex: 0 0 var(--dm-space-6);
+}
+
 /* ============================================
    OPACITY SCALE
    Full graduated opacity scale (0-100)
@@ -4835,11 +4973,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Grid CSS v0.49.0
+ * Domma Grid CSS v0.50.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T22:28:45.944Z
- * Commit: 5bc521e
+ * Built: 2026-09-28T12:10:02.757Z
+ * Commit: 49f4331
  */
 
 /**
@@ -5460,11 +5598,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.49.0
+ * Domma Elements CSS v0.50.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T22:28:45.949Z
- * Commit: 5bc521e
+ * Built: 2026-09-28T12:10:02.762Z
+ * Commit: 49f4331
  */
 
 /**
@@ -14693,6 +14831,280 @@ td > .skeleton-text {
     }
 }
 
+/* ============================================
+   AVATAR
+   ============================================
+ * A person's picture, initials or an icon. Sizes set --dm-avatar-size, which
+ * everything else (font, dot, overlap) scales from; shapes set
+ * --dm-avatar-radius. On a group the size sits on the list and the avatars
+ * inherit it.
+ *
+ * Tones: eight hues mixed 24% into the theme surface, the initials the same hue
+ * mixed 30% into the theme text. Following the theme on both sides is what keeps
+ * them AA everywhere - the lowest measured pair across all 39 themes is 5.2:1.
+ *
+ * --dm-avatar-gap-color is the ring that separates stacked avatars and circles
+ * the status dot: the page background by default, the card inside a card.
+ */
+.avatar {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--dm-avatar-size, 2.5rem);
+    height: var(--dm-avatar-size, 2.5rem);
+    padding: 0;
+    border: 0;
+    border-radius: var(--dm-avatar-radius, var(--dm-radius-full));
+    background-color: color-mix(in srgb, var(--dm-text) 12%, var(--dm-surface));
+    color: var(--dm-text);
+    font-family: inherit;
+    font-size: calc(var(--dm-avatar-size, 2.5rem) * 0.4);
+    font-weight: 600;
+    line-height: 1;
+    text-decoration: none;
+    vertical-align: middle;
+    user-select: none;
+}
+
+a.avatar,
+button.avatar {
+    cursor: pointer;
+}
+
+/* The global a:hover colour would otherwise repaint a linked avatar's initials */
+a.avatar:hover {
+    background-color: color-mix(in srgb, var(--dm-text) 12%, var(--dm-surface));
+    color: var(--dm-text);
+}
+
+a.avatar:focus-visible,
+button.avatar:focus-visible {
+    outline: 2px solid var(--dm-border-focus);
+    outline-offset: 2px;
+}
+
+.avatar-img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+}
+
+.avatar-initials {
+    letter-spacing: 0.02em;
+    white-space: nowrap;
+}
+
+.avatar-icon {
+    display: inline-flex;
+}
+
+/* Domma.icons.scan() swaps the span for the svg and keeps its classes */
+svg.avatar-icon,
+.avatar-icon svg {
+    width: calc(var(--dm-avatar-size, 2.5rem) * 0.55);
+    height: calc(var(--dm-avatar-size, 2.5rem) * 0.55);
+}
+
+/* Sizes */
+.avatar-xs, .avatar-group-xs { --dm-avatar-size: 1.5rem; }
+.avatar-sm, .avatar-group-sm { --dm-avatar-size: 2rem; }
+.avatar-md, .avatar-group-md { --dm-avatar-size: 2.5rem; }
+.avatar-lg, .avatar-group-lg { --dm-avatar-size: 3.5rem; }
+.avatar-xl, .avatar-group-xl { --dm-avatar-size: 5rem; }
+
+/* Shapes - circle is the default */
+.avatar-rounded { --dm-avatar-radius: calc(var(--dm-avatar-size, 2.5rem) * 0.22); }
+.avatar-square { --dm-avatar-radius: 0; }
+
+/* Tones, picked from the name by E.avatar(). The a:hover form keeps a linked
+   avatar's initials their own colour under the global link hover. */
+.avatar-tone-0,
+a.avatar-tone-0:hover {
+    background-color: color-mix(in srgb, var(--dm-red-500) 24%, var(--dm-surface));
+    color: color-mix(in srgb, var(--dm-red-500) 30%, var(--dm-text));
+}
+
+.avatar-tone-1,
+a.avatar-tone-1:hover {
+    background-color: color-mix(in srgb, color-mix(in srgb, var(--dm-red-500) 50%, var(--dm-amber-500)) 24%, var(--dm-surface));
+    color: color-mix(in srgb, color-mix(in srgb, var(--dm-red-500) 50%, var(--dm-amber-500)) 30%, var(--dm-text));
+}
+
+.avatar-tone-2,
+a.avatar-tone-2:hover {
+    background-color: color-mix(in srgb, var(--dm-amber-500) 24%, var(--dm-surface));
+    color: color-mix(in srgb, var(--dm-amber-500) 30%, var(--dm-text));
+}
+
+.avatar-tone-3,
+a.avatar-tone-3:hover {
+    background-color: color-mix(in srgb, var(--dm-green-500) 24%, var(--dm-surface));
+    color: color-mix(in srgb, var(--dm-green-500) 30%, var(--dm-text));
+}
+
+.avatar-tone-4,
+a.avatar-tone-4:hover {
+    background-color: color-mix(in srgb, color-mix(in srgb, var(--dm-green-500) 50%, var(--dm-sky-500)) 24%, var(--dm-surface));
+    color: color-mix(in srgb, color-mix(in srgb, var(--dm-green-500) 50%, var(--dm-sky-500)) 30%, var(--dm-text));
+}
+
+.avatar-tone-5,
+a.avatar-tone-5:hover {
+    background-color: color-mix(in srgb, var(--dm-sky-500) 24%, var(--dm-surface));
+    color: color-mix(in srgb, var(--dm-sky-500) 30%, var(--dm-text));
+}
+
+.avatar-tone-6,
+a.avatar-tone-6:hover {
+    background-color: color-mix(in srgb, var(--dm-blue-500) 24%, var(--dm-surface));
+    color: color-mix(in srgb, var(--dm-blue-500) 30%, var(--dm-text));
+}
+
+.avatar-tone-7,
+a.avatar-tone-7:hover {
+    background-color: color-mix(in srgb, color-mix(in srgb, var(--dm-blue-500) 55%, var(--dm-red-500)) 24%, var(--dm-surface));
+    color: color-mix(in srgb, color-mix(in srgb, var(--dm-blue-500) 55%, var(--dm-red-500)) 30%, var(--dm-text));
+}
+
+/* Where the ring colour comes from */
+.card {
+    --dm-avatar-gap-color: var(--dm-card-bg, var(--dm-surface));
+}
+
+.dm-popover {
+    --dm-avatar-gap-color: var(--dm-surface);
+}
+
+/* Ring */
+.avatar-ring {
+    box-shadow: 0 0 0 2px var(--dm-avatar-gap-color, var(--dm-background)), 0 0 0 4px var(--dm-primary);
+}
+
+/* Status dot. Offline is hollow and busy carries a bar, so colour is not the
+   only difference; the word itself is in the avatar's accessible name. */
+.avatar-status {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    width: max(0.5rem, calc(var(--dm-avatar-size, 2.5rem) * 0.28));
+    height: max(0.5rem, calc(var(--dm-avatar-size, 2.5rem) * 0.28));
+    border-radius: var(--dm-radius-full);
+    background-color: var(--dm-text-muted);
+    box-shadow: 0 0 0 2px var(--dm-avatar-gap-color, var(--dm-background));
+}
+
+.avatar-status-online { background-color: var(--dm-success); }
+.avatar-status-away { background-color: var(--dm-warning); }
+.avatar-status-busy { background-color: var(--dm-danger); }
+
+.avatar-status-busy::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 22%;
+    right: 22%;
+    height: 2px;
+    margin-top: -1px;
+    border-radius: 1px;
+    background-color: var(--dm-avatar-gap-color, var(--dm-background));
+}
+
+.avatar-status-offline {
+    background-color: var(--dm-avatar-gap-color, var(--dm-background));
+    border: 2px solid var(--dm-text-muted);
+}
+
+.avatar-square .avatar-status,
+.avatar-rounded .avatar-status {
+    right: -0.125rem;
+    bottom: -0.125rem;
+}
+
+/* Group: a list of overlapping avatars */
+.avatar-group {
+    isolation: isolate;     /* the items' z-index stays inside the group, under navbars and menus */
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* E.avatarGroup() sets --dm-avatar-z on each item, highest first, so each
+   avatar sits over the next and its status dot stays in view. Hand-written
+   groups stack the other way (later on top) unless they set it too. */
+.avatar-group > * {
+    position: relative;
+    z-index: var(--dm-avatar-z, auto);
+    display: inline-flex;
+    margin: 0;
+    padding: 0;
+}
+
+.avatar-group > * + * {
+    margin-inline-start: calc(-1 * var(--dm-avatar-overlap, calc(var(--dm-avatar-size, 2.5rem) * 0.25)));
+}
+
+.avatar-group .avatar {
+    box-shadow: 0 0 0 2px var(--dm-avatar-gap-color, var(--dm-background));
+}
+
+.avatar-group .avatar-ring {
+    box-shadow: 0 0 0 2px var(--dm-avatar-gap-color, var(--dm-background)), 0 0 0 4px var(--dm-primary);
+}
+
+.avatar-group > *:hover,
+.avatar-group > *:focus-within {
+    z-index: 1000;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .avatar-group .avatar {
+        transition: transform var(--dm-transition-fast);
+    }
+
+    .avatar-group .avatar:hover,
+    .avatar-group .avatar:focus-visible {
+        transform: translateY(-3px);
+    }
+}
+
+/* The "+N" bubble */
+.avatar-more {
+    background-color: color-mix(in srgb, var(--dm-text) 16%, var(--dm-surface));
+    color: var(--dm-text);
+    font-size: calc(var(--dm-avatar-size, 2.5rem) * 0.34);
+    font-weight: 600;
+}
+
+.avatar-more-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dm-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.avatar-more-person {
+    display: flex;
+    align-items: center;
+    gap: var(--dm-space-2);
+    color: inherit;
+    text-decoration: none;
+}
+
+a.avatar-more-person:hover .avatar-more-name {
+    text-decoration: underline;
+}
+
 
 /* ============================================
    THEME SYSTEM
@@ -14700,11 +15112,11 @@ td > .skeleton-text {
    ============================================ */
 
 /*!
- * Domma Themes v0.49.0
+ * Domma Themes v0.50.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T22:28:45.927Z
- * Commit: 5bc521e
+ * Built: 2026-09-28T12:10:02.740Z
+ * Commit: 49f4331
  */
 
 /**