domma-js 0.42.0 → 0.44.1

package/public/dist/elements.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Elements CSS v0.42.0
+ * Domma Elements CSS v0.44.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-22T16:17:44.114Z
- * Commit: 0f0475f
+ * Built: 2026-09-23T16:22:37.530Z
+ * Commit: 7c54327
  */
 
 /**
@@ -2785,11 +2785,12 @@ code {
 .dm-pillbox-container {
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
     gap: 0.375rem;
     padding: 0.375rem 0.5rem;
     min-height: 2.5rem;
-    background: var(--dm-surface, #fff);
-    border: 1px solid var(--dm-border, #dee2e6);
+    background: var(--dm-pillbox-bg, var(--dm-surface));
+    border: 1px solid var(--dm-pillbox-border, var(--dm-border));
     border-radius: var(--dm-radius-md);
     cursor: text;
     transition: border-color 0.15s ease, box-shadow 0.15s ease;
@@ -2799,50 +2800,70 @@ code {
     border-color: var(--dm-text-disabled);
 }
 
-.dm-pillbox-container.focused {
+.dm-pillbox-container:focus-within {
     border-color: var(--dm-primary);
     box-shadow: 0 0 0 3px var(--dm-focus-ring);
 }
 
-.dm-pillbox-pill {
+/*
+ * The pill classes are the ones the script emits (.dm-pill, .dm-pill-remove,
+ * .dm-pillbox-empty) and the showcase documents. They were styled here as
+ * .dm-pillbox-pill / -remove / -message, which nothing produces, so every pill
+ * arrived as bare text beside a grey browser button.
+ *
+ * The --dm-pill-* / --dm-pillbox-* defaults are fallbacks in the rules rather
+ * than :root declarations: a theme class sits on <body>, and a variable
+ * declared on :root as var(--dm-surface) resolves against the root's colours,
+ * so a dark theme got a white box with pale pills. A theme or a page can still
+ * set any of them.
+ */
+.dm-pill {
     display: inline-flex;
     align-items: center;
     gap: 0.25rem;
-    padding: 0.25rem 0.5rem;
-    background: var(--dm-primary-light);
-    color: var(--dm-text);
+    max-width: 100%;
+    padding: 0.2rem 0.3rem 0.2rem 0.6rem;
+    background: var(--dm-pill-bg, var(--dm-primary-light));
+    color: var(--dm-pill-color, var(--dm-text));
     border-radius: var(--dm-radius-full);
     font-size: var(--dm-font-size-sm);
     line-height: 1.2;
+    overflow-wrap: anywhere;
 }
 
-.dm-pillbox-pill.dm-pillbox-size-small {
-    padding: 0.125rem 0.375rem;
+.dm-pillbox-small .dm-pill {
+    padding: 0.1rem 0.25rem 0.1rem 0.45rem;
     font-size: 0.75rem;
 }
 
-.dm-pillbox-pill.dm-pillbox-size-large {
-    padding: 0.375rem 0.625rem;
+.dm-pillbox-large .dm-pill {
+    padding: 0.35rem 0.4rem 0.35rem 0.75rem;
     font-size: 1rem;
 }
 
-.dm-pillbox-remove {
+.dm-pill-remove {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 1rem;
-    height: 1rem;
+    flex: none;
+    width: 1.1rem;
+    height: 1.1rem;
     padding: 0;
     background: none;
     border: none;
+    border-radius: 50%;
     color: inherit;
+    font-size: 1rem;
+    line-height: 1;
     cursor: pointer;
-    opacity: 0.7;
-    transition: opacity 0.15s ease;
+    opacity: 0.65;
+    transition: opacity 0.15s ease, background-color 0.15s ease;
 }
 
-.dm-pillbox-remove:hover {
+.dm-pill-remove:hover,
+.dm-pill-remove:focus-visible {
     opacity: 1;
+    background: var(--dm-pill-hover-bg, color-mix(in srgb, currentColor 15%, transparent));
 }
 
 .dm-pillbox-input {
@@ -2856,18 +2877,29 @@ code {
     color: var(--dm-text);
 }
 
+.dm-pillbox-small .dm-pillbox-input { font-size: var(--dm-font-size-sm); }
+
 .dm-pillbox-input::placeholder {
     color: var(--dm-text-muted);
 }
 
+.dm-pillbox.disabled .dm-pillbox-container {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.dm-pillbox.disabled .dm-pill-remove {
+    pointer-events: none;
+}
+
 .dm-pillbox-dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     margin-top: 0.25rem;
-    background: var(--dm-surface, #fff);
-    border: 1px solid var(--dm-border, #dee2e6);
+    background: var(--dm-surface);
+    border: 1px solid var(--dm-border);
     border-radius: var(--dm-radius-md);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     max-height: 200px;
@@ -2875,6 +2907,12 @@ code {
     z-index: var(--dm-z-dropdown, 1000);
 }
 
+.dm-pillbox-options {
+    list-style: none;
+    margin: 0;
+    padding: 0.25rem 0;
+}
+
 .dm-pillbox-option {
     padding: 0.5rem 0.75rem;
     cursor: pointer;
@@ -2892,10 +2930,11 @@ code {
     color: var(--dm-text);
 }
 
-.dm-pillbox-message {
+.dm-pillbox-empty {
     padding: 0.75rem;
     text-align: center;
-    color: var(--dm-text-muted, #6c757d);
+    /* --dm-text-muted falls to 3:1 on --dm-surface in some themes. */
+    color: var(--dm-text-secondary);
     font-size: var(--dm-font-size-sm);
 }
 
@@ -2922,27 +2961,9 @@ code {
     opacity: 1;
 }
 
-/* Dark theme pillbox */
-[data-mode="dark"].dm-pillbox-container {
-    background: var(--dm-surface);
-    border-color: var(--dm-text);
-}
-
-[data-mode="dark"].dm-pillbox-input {
-    color: var(--dm-text-disabled);
-}
-
-[data-mode="dark"].dm-pillbox-dropdown {
-    background: var(--dm-surface);
-    border-color: var(--dm-text);
-}
-
-[data-mode="dark"].dm-pillbox-option {
-    color: var(--dm-text-disabled);
-}
-
-[data-mode="dark"].dm-pillbox-option:hover {
-    background-color: var(--dm-text);
+/* A clearable box keeps its last pill clear of the x. */
+.dm-pillbox:has(.dm-pillbox-clear) .dm-pillbox-container {
+    padding-right: 2rem;
 }
 
 /* ============================================
@@ -8093,3 +8114,425 @@ code {
         grid-template-columns: 1fr;
     }
 }
+
+/* ============================================
+   Context Menu
+   Bound to a container, delegated to its children. Nested menus shadow their
+   parent for the region they cover; see src/context-menu.js for resolution.
+   ============================================ */
+
+/*
+ * Every themeable value is a custom property with the theme token as its
+ * fallback, so an unstyled menu follows the active theme and only the options
+ * actually passed override it. Nothing here generates per-instance rules.
+ */
+.dm-context-menu {
+    position: fixed;
+    z-index: 10050;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    padding: 4px;
+    overflow-y: auto;
+    background: var(--dm-ctx-surface, var(--dm-surface));
+    color: var(--dm-text);
+    border: 1px solid var(--dm-ctx-accent, var(--dm-border));
+    border-radius: var(--dm-ctx-radius, var(--dm-radius-md));
+    box-shadow: var(--dm-ctx-shadow, 0 8px 24px rgba(0, 0, 0, 0.18));
+    font-size: 0.875rem;
+    transform-origin: top left;
+    outline: none;
+    transition:
+        opacity var(--dm-ctx-duration, 120ms) var(--dm-ctx-easing, ease),
+        transform var(--dm-ctx-duration, 120ms) var(--dm-ctx-easing, ease);
+}
+
+/*
+ * A translucent panel needs its own layer: mixing the surface with transparent
+ * keeps the text fully opaque, which `opacity` on the element would not - that
+ * would fade the labels along with the background and fail contrast outright.
+ */
+.dm-context-menu[style*="--dm-ctx-opacity"] {
+    background: color-mix(
+        in srgb,
+        var(--dm-ctx-surface, var(--dm-surface)) calc(var(--dm-ctx-opacity) * 100%),
+        transparent
+    );
+    backdrop-filter: blur(10px);
+}
+
+/* An accent tints the leading edge as well as the border. */
+.dm-context-menu[style*="--dm-ctx-accent"] {
+    border-left-width: 3px;
+}
+
+/* ---- transitions ---- */
+
+.dm-context-menu[data-transition] {
+    opacity: 0;
+}
+
+.dm-context-menu[data-transition="scale"] { transform: scale(0.97); }
+.dm-context-menu[data-transition="fade"]  { transform: none; }
+.dm-context-menu[data-transition="slide"] { transform: translateY(-6px); }
+.dm-context-menu[data-transition="none"]  { transform: none; transition: none; }
+
+.dm-context-menu.is-open {
+    opacity: 1;
+    transform: none;
+}
+
+/* ---- density ---- */
+
+.dm-context-menu[data-density="compact"] {
+    font-size: 0.8125rem;
+    padding: 2px;
+}
+
+.dm-context-menu[data-density="compact"] .dm-context-menu-item {
+    padding: 0.25rem 0.45rem;
+}
+
+.dm-context-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.4rem 0.6rem;
+    background: none;
+    border: 0;
+    border-radius: var(--dm-radius-sm);
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition: background var(--dm-transition-fast);
+}
+
+.dm-context-menu-item:hover:not(.is-disabled),
+.dm-context-menu-item:focus-visible {
+    background: var(--dm-background-alt);
+    outline: none;
+}
+
+/*
+ * The accent tints the hover wash rather than the label. A named colour cannot
+ * be guaranteed readable against whatever surface the menu is on - the same
+ * trap that made --dm-danger 1.02:1 on admin-smooth-steel - so the text keeps
+ * the one pairing every theme guarantees and the accent carries the meaning.
+ */
+.dm-context-menu[style*="--dm-ctx-accent"] .dm-context-menu-item:hover:not(.is-disabled),
+.dm-context-menu[style*="--dm-ctx-accent"] .dm-context-menu-item:focus-visible {
+    background: color-mix(in srgb, var(--dm-ctx-accent) 16%, transparent);
+}
+
+.dm-context-menu-item:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--dm-border-focus);
+}
+
+.dm-context-menu-item.is-disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+/*
+ * Destructive items carry their warning in a tinted wash rather than in red
+ * text. A saturated red cannot be read on a mid-tone surface - on
+ * admin-smooth-steel, --dm-danger against --dm-surface lands at 1.02:1 - and
+ * no single red works across a light surface, a dark one and the mid-tone
+ * themes in between. The wash is mixed FROM the surface, so it adapts, and the
+ * label keeps the one colour every theme guarantees is readable on it.
+ */
+.dm-context-menu-item.is-danger {
+    background: color-mix(in srgb, var(--dm-danger) 10%, transparent);
+}
+
+.dm-context-menu-item.is-danger:hover:not(.is-disabled) {
+    background: color-mix(in srgb, var(--dm-danger) 22%, transparent);
+}
+
+.dm-context-menu-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 16px;
+    width: 16px;
+    height: 16px;
+}
+
+.dm-context-menu-label {
+    flex: 1 1 auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.dm-context-menu-shortcut {
+    flex: 0 0 auto;
+    padding-left: 1rem;
+    font-size: 0.78em;
+    font-variant-numeric: tabular-nums;
+    opacity: 0.8;
+}
+
+.dm-context-menu-chevron {
+    display: inline-flex;
+    flex: 0 0 auto;
+    margin-left: auto;
+    padding-left: 0.4rem;
+    opacity: 0.7;
+}
+
+.dm-context-menu-item.has-submenu .dm-context-menu-label {
+    flex: 0 1 auto;
+}
+
+.dm-context-menu-item.is-checked .dm-context-menu-icon::after {
+    content: "";
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--dm-ctx-accent, var(--dm-primary));
+}
+
+.dm-context-menu-divider {
+    height: 1px;
+    margin: 4px 2px;
+    background: var(--dm-border);
+}
+
+.dm-context-menu-header {
+    padding: 0.35rem 0.6rem 0.2rem;
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+/* The affordance that tells people a menu is there at all. */
+.dm-context-menu-host {
+    cursor: context-menu;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dm-context-menu,
+    .dm-context-menu[data-transition] {
+        transition: none !important;
+        transform: none !important;
+    }
+}
+
+/* ============================================
+   DatePicker
+   --------------------------------------------
+   Every colour is a --dm-* token that the theme layer defines, so the calendar
+   takes whatever theme the host is wearing - including one applied to a region
+   by a theme override, since the tokens are inherited rather than hard-coded.
+   Nothing here invents a token: an undefined var() resolves to nothing and
+   paints a blank panel.
+   ============================================ */
+
+.dm-datepicker {
+    position: absolute;
+    z-index: 1080;
+    width: max-content;
+    padding: 0.5rem;
+
+    font-family: var(--dm-font-sans);
+    font-size: var(--dm-font-size-sm);
+    color: var(--dm-text);
+
+    background: var(--dm-surface-raised, var(--dm-surface));
+    border: 1px solid var(--dm-border);
+    border-radius: var(--dm-radius-lg);
+    box-shadow: var(--dm-shadow-lg);
+}
+
+.dm-datepicker--inline {
+    position: static;
+    box-shadow: none;
+    margin-top: 0.35rem;
+}
+
+/* Header: month and year pickers between two chevrons. */
+
+.dm-datepicker-head {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    margin-bottom: 0.4rem;
+}
+
+.dm-datepicker-pickers {
+    display: flex;
+    gap: 0.3rem;
+    flex: 1 1 auto;
+    justify-content: center;
+}
+
+/*
+ * Five rules below are recorded in scripts/validate-contrast-pairs.baseline.json
+ * rather than fixed, and the reason is the theme system, not this component.
+ *
+ * The three `--dm-text-disabled` rules (.is-outside, .is-disabled and the
+ * disabled action) sit below 3:1 on `--dm-surface-raised` in ALL 33 themes -
+ * 1.37 at worst. That is the disabled ramp behaving as designed, and WCAG AA
+ * 1.4.3 exempts inactive controls from the contrast minimum. Lifting it to 4.5
+ * here would make disabled dates LIGHTER than the muted weekday header, which
+ * inverts the hierarchy.
+ *
+ * The two `--dm-text-muted` rules (.dm-datepicker-nav, .dm-datepicker-week)
+ * fail on `--dm-surface-raised` in 23 of the 33 themes, worst 3.11. No token
+ * below `--dm-text` clears AA on a raised surface everywhere, so this is not
+ * fixable by picking a different variable - the muted ramp itself would have to
+ * be redesigned across every theme. Using `--dm-text` instead would pass, and
+ * cost the weekday header and adjacent-month days the de-emphasis that makes a
+ * calendar readable at a glance.
+ *
+ * If the muted ramp is ever revisited, `npm run validate:contrast
+ * --update-baseline` should drop these two.
+ */
+.dm-datepicker-nav {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    flex: 0 0 auto;
+
+    color: var(--dm-text-muted);
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--dm-radius-md);
+    cursor: pointer;
+    transition: background var(--dm-transition-fast), color var(--dm-transition-fast);
+}
+
+.dm-datepicker-nav:hover {
+    color: var(--dm-text);
+    background: var(--dm-hover-bg);
+}
+
+.dm-datepicker-select {
+    padding: 0.2rem 0.35rem;
+    font: inherit;
+    color: var(--dm-input-text, var(--dm-text));
+    background: var(--dm-input-bg, var(--dm-surface));
+    border: 1px solid var(--dm-input-border, var(--dm-border));
+    border-radius: var(--dm-radius-md);
+    cursor: pointer;
+}
+
+.dm-datepicker-select:focus-visible {
+    outline: none;
+    border-color: var(--dm-input-focus-border, var(--dm-primary));
+    box-shadow: var(--dm-focus-ring);
+}
+
+/* The grid. Seven equal columns, so the weekday row and the days line up
+   whatever the digits are - a table would do the same but cannot carry the
+   roles this needs. */
+
+.dm-datepicker-row {
+    display: grid;
+    grid-template-columns: repeat(7, 2rem);
+    gap: 2px;
+}
+
+.dm-datepicker[data-week-numbers] .dm-datepicker-row {
+    grid-template-columns: 1.6rem repeat(7, 2rem);
+}
+
+.dm-datepicker-weekdays { margin-bottom: 2px; }
+
+.dm-datepicker-weekday,
+.dm-datepicker-week {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.6rem;
+    font-size: var(--dm-font-size-xs);
+    font-weight: var(--dm-font-weight-semibold);
+    color: var(--dm-text-muted);
+}
+
+.dm-datepicker-week { font-weight: 400; }
+
+.dm-datepicker-day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 2rem;
+    padding: 0;
+
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    color: var(--dm-text);
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--dm-radius-md);
+    cursor: pointer;
+    transition: background var(--dm-transition-fast), color var(--dm-transition-fast);
+}
+
+.dm-datepicker-day:hover:not(.is-disabled) { background: var(--dm-hover-bg); }
+
+.dm-datepicker-day:focus-visible {
+    outline: none;
+    box-shadow: var(--dm-focus-ring);
+}
+
+/* The days either side of the month are shown rather than blanked: a calendar
+   with holes in it is harder to read than one that runs on. */
+.dm-datepicker-day.is-outside { color: var(--dm-text-disabled); }
+
+.dm-datepicker-day.is-today {
+    border-color: var(--dm-primary);
+    font-weight: var(--dm-font-weight-semibold);
+}
+
+.dm-datepicker-day.is-selected,
+.dm-datepicker-day.is-selected:hover {
+    color: var(--dm-primary-text);
+    background: var(--dm-primary);
+    border-color: var(--dm-primary);
+}
+
+.dm-datepicker-day.is-disabled {
+    color: var(--dm-text-disabled);
+    cursor: not-allowed;
+    opacity: var(--dm-disabled-opacity);
+}
+
+/* Footer actions. */
+
+.dm-datepicker-foot {
+    display: flex;
+    gap: 0.35rem;
+    justify-content: flex-end;
+    margin-top: 0.45rem;
+    padding-top: 0.45rem;
+    border-top: 1px solid var(--dm-border);
+}
+
+.dm-datepicker-action {
+    padding: 0.2rem 0.6rem;
+    font: inherit;
+    font-size: var(--dm-font-size-xs);
+    color: var(--dm-link);
+    background: transparent;
+    border: 0;
+    border-radius: var(--dm-radius-md);
+    cursor: pointer;
+}
+
+.dm-datepicker-action:hover:not(:disabled) {
+    color: var(--dm-link-hover);
+    background: var(--dm-hover-bg);
+}
+
+.dm-datepicker-action:disabled {
+    color: var(--dm-text-disabled);
+    cursor: not-allowed;
+}

package/public/dist/grid.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Grid CSS v0.42.0
+ * Domma Grid CSS v0.44.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-22T16:17:44.108Z
- * Commit: 0f0475f
+ * Built: 2026-09-23T16:22:37.526Z
+ * Commit: 7c54327
  */
 
 /**

package/public/dist/syntax.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Syntax Highlighting CSS v0.42.0
+ * Domma Syntax Highlighting CSS v0.44.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-22T16:17:44.119Z
- * Commit: 0f0475f
+ * Built: 2026-09-23T16:22:37.533Z
+ * Commit: 7c54327
  */
 
 /**