domma-js 0.20.2 → 0.21.0

package/public/dist/elements.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Elements CSS v0.20.2
+ * Domma Elements CSS v0.21.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-03-17T14:10:00.871Z
- * Commit: 22809b0
+ * Built: 2026-03-18T16:29:45.555Z
+ * Commit: 70a6f74
  */
 
 /**
@@ -1260,6 +1260,114 @@ textarea:not([class])::placeholder {
 }
 
 
+/* ============================================
+   NUMBER BADGE
+   ============================================ */
+
+/* Standalone number badge — circular for single digits, pill for multi-digit */
+.badge-number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5em;
+    height: 1.5em;
+    padding: 0 0.35em;
+    font-size: var(--dm-font-size-xs);
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    border-radius: var(--dm-radius-full);
+    background-color: var(--dm-danger);
+    color: var(--dm-white);
+}
+
+/* Dot indicator — small coloured presence circle */
+.badge-dot {
+    display: inline-block;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: var(--dm-radius-full);
+    background-color: var(--dm-danger);
+}
+
+/* Wrapper for positioned counter badges */
+.badge-counter-wrapper {
+    position: relative;
+    display: inline-flex;
+}
+
+/* Counter badge — overlapping corner with border ring (classic app-notification style) */
+.badge-counter {
+    position: absolute;
+    top: -6px;
+    right: -8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0 0.3em;
+    font-size: 0.65rem;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    border-radius: var(--dm-radius-full);
+    border: 2px solid var(--dm-background, #fff);
+    z-index: 1;
+    background-color: var(--dm-danger);
+    color: var(--dm-white);
+}
+
+/* Dot variant of counter — smaller, no text */
+.badge-counter.badge-dot {
+    top: -2px;
+    right: -2px;
+    min-width: 0.5rem;
+    height: 0.5rem;
+    padding: 0;
+}
+
+/* Hidden state when count is zero */
+.badge-counter-hidden {
+    display: none !important;
+}
+
+/* Pulse animation reuse for counter badges */
+.badge-counter.badge-pulse {
+    animation: badge-pulse 2s ease-in-out infinite;
+}
+
+/* Colour variants for .badge-number */
+.badge-number.badge-number-primary   { background-color: var(--dm-primary); color: var(--dm-white); }
+.badge-number.badge-number-secondary { background-color: var(--dm-background-alt); color: var(--dm-text); }
+.badge-number.badge-number-success   { background-color: var(--dm-success); color: var(--dm-white); }
+.badge-number.badge-number-danger    { background-color: var(--dm-danger); color: var(--dm-white); }
+.badge-number.badge-number-warning   { background-color: var(--dm-warning); color: var(--dm-text); }
+.badge-number.badge-number-info      { background-color: var(--dm-info); color: var(--dm-white); }
+.badge-number.badge-number-light     { background-color: var(--dm-background-alt); color: var(--dm-text); }
+.badge-number.badge-number-dark      { background-color: var(--dm-surface-overlay); color: var(--dm-white); }
+
+/* Colour variants for .badge-dot */
+.badge-dot.badge-dot-primary   { background-color: var(--dm-primary); }
+.badge-dot.badge-dot-secondary { background-color: var(--dm-background-alt); }
+.badge-dot.badge-dot-success   { background-color: var(--dm-success); }
+.badge-dot.badge-dot-danger    { background-color: var(--dm-danger); }
+.badge-dot.badge-dot-warning   { background-color: var(--dm-warning); }
+.badge-dot.badge-dot-info      { background-color: var(--dm-info); }
+.badge-dot.badge-dot-light     { background-color: var(--dm-background-alt); }
+.badge-dot.badge-dot-dark      { background-color: var(--dm-surface-overlay); }
+
+/* Colour variants for .badge-counter */
+.badge-counter.badge-counter-primary   { background-color: var(--dm-primary); color: var(--dm-white); }
+.badge-counter.badge-counter-secondary { background-color: var(--dm-background-alt); color: var(--dm-text); }
+.badge-counter.badge-counter-success   { background-color: var(--dm-success); color: var(--dm-white); }
+.badge-counter.badge-counter-danger    { background-color: var(--dm-danger); color: var(--dm-white); }
+.badge-counter.badge-counter-warning   { background-color: var(--dm-warning); color: var(--dm-text); }
+.badge-counter.badge-counter-info      { background-color: var(--dm-info); color: var(--dm-white); }
+.badge-counter.badge-counter-light     { background-color: var(--dm-background-alt); color: var(--dm-text); }
+.badge-counter.badge-counter-dark      { background-color: var(--dm-surface-overlay); color: var(--dm-white); }
+
+
 /* ============================================
    PILL
    ============================================ */

package/public/dist/grid.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Grid CSS v0.20.2
+ * Domma Grid CSS v0.21.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-03-17T14:10:00.852Z
- * Commit: 22809b0
+ * Built: 2026-03-18T16:29:45.530Z
+ * Commit: 70a6f74
  */
 
 /**

package/public/dist/syntax.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Syntax Highlighting CSS v0.20.2
+ * Domma Syntax Highlighting CSS v0.21.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-03-17T14:10:00.884Z
- * Commit: 22809b0
+ * Built: 2026-03-18T16:29:45.570Z
+ * Commit: 70a6f74
  */
 
 /**

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

@@ -1,9 +1,9 @@
 /*!
- * Domma Themes v0.20.2
+ * Domma Themes v0.21.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-03-17T14:10:00.786Z
- * Commit: 22809b0
+ * Built: 2026-03-18T16:29:45.455Z
+ * Commit: 70a6f74
  */
 
 /**