domma-js 0.48.0 → 0.50.0

package/public/dist/elements.css

@@ -1,9 +1,9 @@
 /*!
- * 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
  */
 
 /**
@@ -9056,3 +9056,452 @@ td > .skeleton-text {
         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;
+    }
+}
+
+/* ============================================
+   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;
+}

package/public/dist/grid.css

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

package/public/dist/syntax.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Syntax Highlighting CSS v0.48.0
+ * Domma Syntax Highlighting CSS v0.50.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-27T22:11:07.105Z
- * Commit: cf6d8de
+ * Built: 2026-09-28T07:48:39.962Z
+ * Commit: d400172
  */
 
 /**

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

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