domma-js 0.20.2 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-js",
-  "version": "0.20.2",
+  "version": "0.21.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.20.2
+ * Domma Complete CSS Bundle v0.21.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-03-17T14:10:01.407Z
+ * Built: 2026-03-18T16:29:46.329Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.20.2
+ * Domma Core CSS v0.21.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-03-17T14:10:00.837Z
- * Commit: 22809b0
+ * Built: 2026-03-18T16:29:45.511Z
+ * Commit: 70a6f74
  */
 
 /**
@@ -4826,11 +4826,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * 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
  */
 
 /**
@@ -5451,11 +5451,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * 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
  */
 
 /**
@@ -6712,6 +6712,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
    ============================================ */
@@ -12165,11 +12273,11 @@ code {
    ============================================ */
 
 /*!
- * 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
  */
 
 /**

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

@@ -1,8 +1,8 @@
 /*!
- * Domma Data-Focused CSS Bundle v0.20.2
+ * Domma Data-Focused CSS Bundle v0.21.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-03-17T14:10:01.385Z
+ * Built: 2026-03-18T16:29:46.307Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.20.2
+ * Domma Core CSS v0.21.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-03-17T14:10:00.837Z
- * Commit: 22809b0
+ * Built: 2026-03-18T16:29:45.511Z
+ * Commit: 70a6f74
  */
 
 /**
@@ -4826,11 +4826,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * 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
  */
 
 /**
@@ -5451,11 +5451,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * 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
  */
 
 /**
@@ -6712,6 +6712,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
    ============================================ */
@@ -12165,11 +12273,11 @@ code {
    ============================================ */
 
 /*!
- * 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
  */
 
 /**

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

@@ -1,8 +1,8 @@
 /*!
- * Domma Essentials CSS Bundle v0.20.2
+ * Domma Essentials CSS Bundle v0.21.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-03-17T14:10:01.353Z
+ * Built: 2026-03-18T16:29:46.268Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.20.2
+ * Domma Core CSS v0.21.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-03-17T14:10:00.837Z
- * Commit: 22809b0
+ * Built: 2026-03-18T16:29:45.511Z
+ * Commit: 70a6f74
  */
 
 /**
@@ -4826,11 +4826,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * 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
  */
 
 /**
@@ -5451,11 +5451,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * 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
  */
 
 /**
@@ -6712,6 +6712,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
    ============================================ */
@@ -12165,11 +12273,11 @@ code {
    ============================================ */
 
 /*!
- * 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
  */
 
 /**