domma-js 0.44.0 → 0.44.1

package/README.md

@@ -41,7 +41,7 @@ repository is simply one consumer of each.
 | Package | What it is | Where it lives |
 |---------|-----------|----------------|
 | [`domma-reactive`](https://www.npmjs.com/package/domma-reactive) | Dependency-tracked reactivity and fine-grained DOM bindings - the engine beneath `M.observable`, `M.computed` and `M.applyBindings` | Bundled into `domma.min.js`; [repo](https://github.com/pinpointzero73/domma-reactive) |
-| `domma-celebrate` | Eight seasonal celebration themes and their canvas engine, code-split so each theme loads only when it is in season | Served from `dist/celebrate/` on dommajs.org |
+| [`domma-celebrate`](https://www.npmjs.com/package/domma-celebrate) | Eight seasonal celebration themes and their canvas engine, code-split so each theme loads only when it is in season | Copied into `dist/celebrate/` at build time; [repo](https://github.com/pinpointzero73/domma-celebrate) |
 
 **`domma-reactive` has moved out.** The reactive core was extracted into a standalone MIT-licensed package
 and is now consumed from the npm registry rather than lived in this repository. Nothing changes for Domma
@@ -51,7 +51,8 @@ usable on its own - about 20 KB gzipped, no dependencies, no build step - in pro
 without the rest of the framework.
 
 ```bash
-npm install domma-reactive   # reactivity and bindings, standalone
+npm install domma-reactive    # reactivity and bindings, standalone
+npm install domma-celebrate   # seasonal celebrations, standalone
 ```
 
 ## Installation

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "domma-js",
-    "version": "0.44.0",
+    "version": "0.44.1",
     "description": "Dynamic Object Manipulation & Modeling API - A complete front-end toolkit.",
     "main": "public/dist/domma.min.js",
     "module": "public/dist/domma.esm.js",
@@ -87,7 +87,7 @@
         "@rollup/plugin-terser": "^0.4.4",
         "@vitest/coverage-v8": "^4.0.16",
         "cypress": "^15.8.1",
-        "domma-celebrate": "file:../domma-celebrate",
+        "domma-celebrate": "^1.0.0",
         "domma-reactive": "1.0.1",
         "dompurify": "^3.4.13",
         "dotenv": "^17.2.3",

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

@@ -1,8 +1,8 @@
 /*!
- * Domma Complete CSS Bundle v0.44.0
+ * Domma Complete CSS Bundle v0.44.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-22T03:19:19.495Z
+ * Built: 2026-09-23T16:22:37.658Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.44.0
+ * Domma Core CSS v0.44.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-22T03:19:19.324Z
- * Commit: a452582
+ * Built: 2026-09-23T16:22:37.523Z
+ * Commit: 7c54327
  */
 
 /**
@@ -393,12 +393,9 @@
     --dm-autocomplete-item-active: var(--dm-selected-bg);
     --dm-autocomplete-highlight: var(--dm-primary-light);
 
-    /* Pillbox */
-    --dm-pillbox-bg: var(--dm-surface);
-    --dm-pillbox-border: var(--dm-border);
-    --dm-pill-bg: var(--dm-gray-200);
-    --dm-pill-color: var(--dm-text);
-    --dm-pill-hover-bg: var(--dm-gray-300);
+    /* Pillbox: --dm-pillbox-bg, --dm-pillbox-border, --dm-pill-bg,
+       --dm-pill-color and --dm-pill-hover-bg are read with their defaults as
+       fallbacks in elements.css, so they follow the theme on <body>. */
 
     /* Tabs */
     --dm-tab-border: var(--dm-border);
@@ -4838,11 +4835,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Grid CSS v0.44.0
+ * Domma Grid CSS v0.44.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-22T03:19:19.327Z
- * Commit: a452582
+ * Built: 2026-09-23T16:22:37.526Z
+ * Commit: 7c54327
  */
 
 /**
@@ -5463,11 +5460,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.44.0
+ * Domma Elements CSS v0.44.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-22T03:19:19.332Z
- * Commit: a452582
+ * Built: 2026-09-23T16:22:37.530Z
+ * Commit: 7c54327
  */
 
 /**
@@ -8249,11 +8246,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;
@@ -8263,50 +8261,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 {
@@ -8320,18 +8338,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;
@@ -8339,6 +8368,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;
@@ -8356,10 +8391,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);
 }
 
@@ -8386,27 +8422,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;
 }
 
 /* ============================================
@@ -13987,11 +14005,11 @@ code {
    ============================================ */
 
 /*!
- * Domma Themes v0.44.0
+ * Domma Themes v0.44.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-22T03:19:19.311Z
- * Commit: a452582
+ * Built: 2026-09-23T16:22:37.512Z
+ * Commit: 7c54327
  */
 
 /**

package/public/dist/bundles/domma-data-focused.css

@@ -1,8 +1,8 @@
 /*!
- * Domma Data-Focused CSS Bundle v0.44.0
+ * Domma Data-Focused CSS Bundle v0.44.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-22T03:19:19.492Z
+ * Built: 2026-09-23T16:22:37.656Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.44.0
+ * Domma Core CSS v0.44.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-22T03:19:19.324Z
- * Commit: a452582
+ * Built: 2026-09-23T16:22:37.523Z
+ * Commit: 7c54327
  */
 
 /**
@@ -393,12 +393,9 @@
     --dm-autocomplete-item-active: var(--dm-selected-bg);
     --dm-autocomplete-highlight: var(--dm-primary-light);
 
-    /* Pillbox */
-    --dm-pillbox-bg: var(--dm-surface);
-    --dm-pillbox-border: var(--dm-border);
-    --dm-pill-bg: var(--dm-gray-200);
-    --dm-pill-color: var(--dm-text);
-    --dm-pill-hover-bg: var(--dm-gray-300);
+    /* Pillbox: --dm-pillbox-bg, --dm-pillbox-border, --dm-pill-bg,
+       --dm-pill-color and --dm-pill-hover-bg are read with their defaults as
+       fallbacks in elements.css, so they follow the theme on <body>. */
 
     /* Tabs */
     --dm-tab-border: var(--dm-border);
@@ -4838,11 +4835,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Grid CSS v0.44.0
+ * Domma Grid CSS v0.44.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-22T03:19:19.327Z
- * Commit: a452582
+ * Built: 2026-09-23T16:22:37.526Z
+ * Commit: 7c54327
  */
 
 /**
@@ -5463,11 +5460,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.44.0
+ * Domma Elements CSS v0.44.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-22T03:19:19.332Z
- * Commit: a452582
+ * Built: 2026-09-23T16:22:37.530Z
+ * Commit: 7c54327
  */
 
 /**
@@ -8249,11 +8246,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;
@@ -8263,50 +8261,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 {
@@ -8320,18 +8338,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;
@@ -8339,6 +8368,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;
@@ -8356,10 +8391,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);
 }
 
@@ -8386,27 +8422,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;
 }
 
 /* ============================================
@@ -13987,11 +14005,11 @@ code {
    ============================================ */
 
 /*!
- * Domma Themes v0.44.0
+ * Domma Themes v0.44.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-09-22T03:19:19.311Z
- * Commit: a452582
+ * Built: 2026-09-23T16:22:37.512Z
+ * Commit: 7c54327
  */
 
 /**