domma-js 0.48.0 → 0.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "domma-js",
-    "version": "0.48.0",
+    "version": "0.50.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.48.0
+ * Domma Complete CSS Bundle v0.50.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T22:11:07.262Z
+ * Built: 2026-09-28T07:48:40.116Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.48.0
+ * Domma Core CSS v0.50.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T22:11:07.093Z
- * Commit: cf6d8de
+ * Built: 2026-09-28T07:48:39.949Z
+ * Commit: d400172
  */
 
 /**
@@ -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.48.0
+ * Domma Grid CSS v0.50.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T22:11:07.097Z
- * Commit: cf6d8de
+ * Built: 2026-09-28T07:48:39.953Z
+ * Commit: d400172
  */
 
 /**
@@ -5460,11 +5598,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.48.0
+ * Domma Elements CSS v0.50.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T22:11:07.101Z
- * Commit: cf6d8de
+ * Built: 2026-09-28T07:48:39.958Z
+ * Commit: d400172
  */
 
 /**
@@ -14518,6 +14656,455 @@ td > .skeleton-text {
     }
 }
 
+/* ============================================
+   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;
+    }
+}
+
+/* ============================================
+   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
@@ -14525,11 +15112,11 @@ td > .skeleton-text {
    ============================================ */
 
 /*!
- * Domma Themes v0.48.0
+ * Domma Themes v0.50.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T22:11:07.079Z
- * Commit: cf6d8de
+ * Built: 2026-09-28T07:48:39.933Z
+ * Commit: d400172
  */
 
 /**