@wpmoo/ui 1.0.0-rc.8 → 1.0.0

package/dist/js/sheet.js

@@ -0,0 +1,46 @@
+/*!
+ * Moo UI sheet.js v1.0.0 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
+
+// src/js/components/sheet.js
+var states = /* @__PURE__ */ new WeakMap();
+function initSheets(root = document) {
+  if (states.has(root)) {
+    return states.get(root);
+  }
+  const documentRoot = root.nodeType === 9 ? root : root.ownerDocument;
+  const Offcanvas = documentRoot?.defaultView?.bootstrap?.Offcanvas;
+  if (!Offcanvas) {
+    return () => {
+    };
+  }
+  const sheets = Array.from(root.querySelectorAll(".offcanvas.sheet"));
+  const focusInitialField = (event) => {
+    if (event.target === event.currentTarget) {
+      event.currentTarget.querySelector("[autofocus]:not(:disabled)")?.focus();
+    }
+  };
+  const dispose = () => {
+    if (states.get(root) !== dispose) {
+      return;
+    }
+    sheets.forEach((sheet) => {
+      sheet.removeEventListener("shown.bs.offcanvas", focusInitialField);
+    });
+    states.delete(root);
+  };
+  states.set(root, dispose);
+  sheets.forEach((sheet) => {
+    sheet.addEventListener("shown.bs.offcanvas", focusInitialField);
+    if (sheet.dataset.sheetOpenOnLoad === "true") {
+      sheet.removeAttribute("data-sheet-open-on-load");
+      Offcanvas.getOrCreateInstance(sheet).show();
+    }
+  });
+  return dispose;
+}
+export {
+  initSheets
+};

package/dist/js/sidebar.js

@@ -1,14 +1,15 @@
 /*!
- * Moo UI sidebar.js v1.0.0-rc.8 (https://ui.wpmoo.org/)
- * Copyright 2026 WPMoo (https://wpmoo.org)
+ * Moo UI sidebar.js v1.0.0 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
+
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
 // src/js/theme-owner.js
 var OWNER_SELECTOR = '.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"]';
-var PORTAL_SELECTOR = "[data-moo-overlay-portal-host]";
+var PORTAL_SELECTOR = "[data-moo-overlay-host]";
 function documentFor(node) {
   if (node?.nodeType === 9) return node;
   if (node?.ownerDocument) return node.ownerDocument;
@@ -249,7 +250,7 @@ var _Sidebar = class _Sidebar {
   _positionDropdown(control) {
     const item = control?.closest?.(".sidebar-menu-item");
     const isHeaderWorkspace = control?.classList.contains("sidebar-menu-button--workspace") && control.closest('[data-slot="sidebar-header"]');
-    const isFooterAccount = control?.classList.contains("sidebar-menu-button--account") && control.closest('[data-slot="sidebar-footer"]');
+    const isFooterAccount = control?.closest(".sidebar-menu-item--account") && control.closest('[data-slot="sidebar-footer"]');
     if (!control || !item || !(isHeaderWorkspace || isFooterAccount) || !this._isDesktop()) {
       this._clearDropdownPosition(control);
       return;

package/dist/js/slider.js

@@ -1,23 +1,20 @@
 /*!
- * Moo UI slider.js v1.0.0-rc.8 (https://ui.wpmoo.org/)
- * Copyright 2026 WPMoo (https://wpmoo.org)
+ * Moo UI slider.js v1.0.0 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
-const instances = new WeakMap();
 
+const instances = /* @__PURE__ */ new WeakMap();
 function asNumber(value, fallback) {
   const number = Number(value);
   return Number.isFinite(number) ? number : fallback;
 }
-
 function inputMinimum(input) {
   return asNumber(input.min, 0);
 }
-
 function inputMaximum(input) {
   return asNumber(input.max, 100);
 }
-
 function inputStep(input) {
   if (!input.step || input.step === "any") {
     return 1;
@@ -25,11 +22,9 @@ function inputStep(input) {
   const step = Number(input.step);
   return Number.isFinite(step) && step > 0 ? step : 1;
 }
-
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
-
 function decimalPlaces(value) {
   const text = String(value);
   if (!text.includes(".")) {
@@ -37,7 +32,6 @@ function decimalPlaces(value) {
   }
   return text.split(".").at(-1).length;
 }
-
 function snapToStep(value, input) {
   const min = inputMinimum(input);
   const max = inputMaximum(input);
@@ -49,29 +43,24 @@ function snapToStep(value, input) {
   const precision = Math.max(decimalPlaces(step), decimalPlaces(min));
   return clamp(Number(snapped.toFixed(precision)), min, max);
 }
-
 function valuePercent(input) {
   const min = inputMinimum(input);
   const max = inputMaximum(input);
   if (max <= min) {
     return 0;
   }
-  return ((asNumber(input.value, min) - min) / (max - min)) * 100;
+  return (asNumber(input.value, min) - min) / (max - min) * 100;
 }
-
 function displayValue(input) {
   return input.value || String(inputMinimum(input));
 }
-
-export default class MooSlider {
+class MooSlider {
   static getInstance(element) {
     return element?.nodeType === 1 ? instances.get(element) || null : null;
   }
-
   static getOrCreateInstance(element, config = {}) {
     return MooSlider.getInstance(element) || new MooSlider(element, config);
   }
-
   constructor(element, config = {}) {
     if (element?.nodeType !== 1 || !element.matches("[data-slider]")) {
       throw new TypeError("MooSlider requires a [data-slider] root element.");
@@ -80,7 +69,6 @@ export default class MooSlider {
     if (existing) {
       return existing;
     }
-
     this._element = element;
     this._document = element.ownerDocument;
     this._window = this._document.defaultView;
@@ -94,19 +82,16 @@ export default class MooSlider {
     );
     this._track = element.querySelector("[data-slider-track]");
     this._output = element.querySelector("[data-slider-output]");
-
     if (this._inputs.length < 1 || this._inputs.length > 2) {
       throw new TypeError("MooSlider requires one or two native range inputs.");
     }
     if (!this._track) {
       throw new TypeError("MooSlider requires a [data-slider-track] element.");
     }
-
     instances.set(element, this);
     this._bindEvents();
     this._sync();
   }
-
   dispose() {
     if (this._disposed) return;
     this._disposed = true;
@@ -120,7 +105,6 @@ export default class MooSlider {
       instances.delete(this._element);
     }
   }
-
   _listen(target, type, handler, options) {
     if (!target) {
       return;
@@ -128,7 +112,6 @@ export default class MooSlider {
     target.addEventListener(type, handler, options);
     this._listeners.push({ target, type, handler, options });
   }
-
   _listenDuringDrag(target, type, handler, options) {
     if (!target) {
       return;
@@ -136,7 +119,6 @@ export default class MooSlider {
     target.addEventListener(type, handler, options);
     this._dragListeners.push({ target, type, handler, options });
   }
-
   _clearDragListeners() {
     this._dragListeners.forEach(({ target, type, handler, options }) => {
       target.removeEventListener(type, handler, options);
@@ -145,7 +127,6 @@ export default class MooSlider {
     this._draggingInput = null;
     this._element.removeAttribute("data-slider-dragging");
   }
-
   _bindEvents() {
     this._inputs.forEach((input) => {
       this._listen(input, "input", () => this._sync(input));
@@ -157,9 +138,7 @@ export default class MooSlider {
       this._listen(input, "focusout", () => this._clearPointerFocus());
     });
     const forms = new Set(
-      this._inputs
-        .map((input) => input.form || input.closest?.("form"))
-        .filter(Boolean),
+      this._inputs.map((input) => input.form || input.closest?.("form")).filter(Boolean)
     );
     forms.forEach((form) => {
       this._listen(form, "reset", () => {
@@ -168,19 +147,16 @@ export default class MooSlider {
     });
     this._listen(this._track, "pointerdown", (event) => this._handleTrackPointer(event));
   }
-
   _trigger(name) {
     this._element.dispatchEvent(
       new this._window.CustomEvent(`${name}.moo.slider`, {
-        bubbles: true,
+        bubbles: true
       })
     );
   }
-
   _isRange() {
     return this._inputs.length === 2;
   }
-
   _sync(changedInput = null) {
     if (this._isRange()) {
       const [startInput, endInput] = this._inputs;
@@ -199,34 +175,29 @@ export default class MooSlider {
       this._syncAria(endInput);
       return;
     }
-
     const input = this._inputs[0];
     this._writeFill(0, valuePercent(input));
     this._writeOutput(displayValue(input));
     this._syncAria(input);
   }
-
   _syncAria(input) {
     input.setAttribute("aria-valuemin", String(inputMinimum(input)));
     input.setAttribute("aria-valuemax", String(inputMaximum(input)));
     input.setAttribute("aria-valuenow", displayValue(input));
   }
-
   _writeFill(start, end) {
     const clampedStart = clamp(start, 0, 100);
     const clampedEnd = clamp(end, 0, 100);
     this._element.style.setProperty("--moo-slider-start", `${Math.min(clampedStart, clampedEnd)}%`);
     this._element.style.setProperty("--moo-slider-end", `${Math.max(clampedStart, clampedEnd)}%`);
   }
-
   _writeOutput(value) {
     if (this._output) {
       this._output.textContent = value;
     }
   }
-
   _handleTrackPointer(event) {
-    if (event.button !== undefined && event.button !== 0) {
+    if (event.button !== void 0 && event.button !== 0) {
       return;
     }
     const enabledInputs = this._inputs.filter((input) => !input.disabled);
@@ -240,23 +211,19 @@ export default class MooSlider {
     this._startDrag(target, event);
     this._setInputFromPointer(target, event);
   }
-
   _setPointerFocus() {
     this._element.setAttribute("data-slider-pointer-focus", "true");
   }
-
   _clearPointerFocus() {
     this._element.removeAttribute("data-slider-pointer-focus");
   }
-
   _startDrag(input, event) {
     this._clearDragListeners();
     this._draggingInput = input;
     this._element.setAttribute("data-slider-dragging", "true");
     this._track.setPointerCapture?.(event.pointerId);
-
     const pointerId = event.pointerId;
-    const samePointer = (nextEvent) => pointerId === undefined || nextEvent.pointerId === pointerId;
+    const samePointer = (nextEvent) => pointerId === void 0 || nextEvent.pointerId === pointerId;
     const onMove = (moveEvent) => {
       if (!samePointer(moveEvent) || this._draggingInput !== input) {
         return;
@@ -274,12 +241,10 @@ export default class MooSlider {
       this._track.releasePointerCapture?.(pointerId);
       this._clearDragListeners();
     };
-
     this._listenDuringDrag(this._document, "pointermove", onMove);
     this._listenDuringDrag(this._document, "pointerup", onEnd);
     this._listenDuringDrag(this._document, "pointercancel", onEnd);
   }
-
   _setInputFromPointer(input, event, emitInput = true) {
     const percent = this._pointerPercent(event);
     const min = inputMinimum(input);
@@ -291,7 +256,6 @@ export default class MooSlider {
       input.dispatchEvent(new this._window.Event("input", { bubbles: true }));
     }
   }
-
   _pointerPercent(event) {
     const rect = this._track.getBoundingClientRect();
     const orientation = this._element.dataset.sliderOrientation || "horizontal";
@@ -300,13 +264,11 @@ export default class MooSlider {
     }
     return this._horizontalPointerPercent(event, rect);
   }
-
   _horizontalPointerPercent(event, rect) {
     const direction = this._window.getComputedStyle?.(this._element).direction;
     const offset = direction === "rtl" ? rect.right - event.clientX : event.clientX - rect.left;
     return clamp(offset / (rect.width || 1), 0, 1);
   }
-
   _nearestInput(percent, inputs) {
     if (inputs.length === 1) {
       return inputs[0];
@@ -322,3 +284,6 @@ export default class MooSlider {
     return endDistance < startDistance ? endInput : startInput;
   }
 }
+export {
+  MooSlider as default
+};

package/dist/js/state.js

@@ -0,0 +1,76 @@
+/*!
+ * Moo UI state.js v1.0.0 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
+
+(() => {
+  const ownerDocument = typeof document === "undefined" ? null : document;
+  const owner = ownerDocument?.currentScript?.parentElement;
+  if (!owner) return;
+  const view = ownerDocument?.defaultView || (typeof window === "undefined" ? null : window);
+  if (owner.matches?.('.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"]')) {
+    const body = ownerDocument?.body;
+    const documentOwner = owner.dataset?.mooDocumentOwner === "true" && owner.parentElement === body && owner === body?.firstElementChild;
+    const normalizeDirection = (value) => value === "ltr" || value === "rtl" ? value : null;
+    const ownerDirection = normalizeDirection(
+      owner.getAttribute?.("dir") || owner.dir
+    );
+    const documentDirection = normalizeDirection(
+      ownerDocument?.documentElement?.getAttribute?.("dir") || ownerDocument?.documentElement?.dir
+    );
+    owner.__mooStateBaseline = {
+      theme: owner.dataset.bsTheme === "dark" ? "dark" : "light",
+      direction: documentOwner ? documentDirection || "ltr" : ownerDirection
+    };
+    const readPreference = (axis, allowed) => {
+      const dataKey = axis === "theme" ? "mooThemeKey" : "mooDirectionKey";
+      const explicit = owner.dataset?.[dataKey]?.trim();
+      const key2 = explicit || (documentOwner ? `moo:${axis}` : null);
+      if (!key2) return null;
+      try {
+        const value = view?.localStorage?.getItem(key2);
+        return allowed.includes(value) ? value : null;
+      } catch (_) {
+        return null;
+      }
+    };
+    const systemPrefersDark = () => {
+      try {
+        const matchMedia = view?.matchMedia;
+        if (typeof matchMedia !== "function") return null;
+        return Boolean(
+          matchMedia.call(view, "(prefers-color-scheme: dark)")?.matches
+        );
+      } catch (_) {
+        return null;
+      }
+    };
+    try {
+      const storedTheme = readPreference("theme", ["light", "dark", "system"]);
+      const mediaPrefersDark = storedTheme === "system" ? systemPrefersDark() : null;
+      const resolvedTheme = storedTheme === "dark" ? "dark" : storedTheme === "light" ? "light" : storedTheme === "system" && mediaPrefersDark !== null ? mediaPrefersDark ? "dark" : "light" : owner.dataset.bsTheme === "dark" ? "dark" : "light";
+      owner.dataset.bsTheme = resolvedTheme;
+      const storedDirection = readPreference("direction", ["ltr", "rtl"]);
+      if (storedDirection) {
+        if (documentOwner) ownerDocument.documentElement.dir = storedDirection;
+        else owner.dir = storedDirection;
+      }
+    } finally {
+      owner.dataset.mooState = "ready";
+    }
+    return;
+  }
+  if (!owner.matches?.('[data-slot="sidebar-wrapper"][data-sidebar-key]')) return;
+  const key = owner.dataset?.sidebarKey;
+  if (!key) return;
+  try {
+    const state = view?.localStorage?.getItem(`moo-sidebar:${key}`);
+    if (state === "expanded" || state === "collapsed") {
+      owner.dataset.sidebarState = state;
+    }
+  } catch (_) {
+  } finally {
+    owner.dataset.sidebarStateReady = "";
+  }
+})();

package/dist/release-manifest.json

@@ -3,22 +3,22 @@
     {
       "export": "./moo.css",
       "path": "dist/assets/css/moo.css",
-      "sha256": "29c92bd75db1e4990745796aeef4d6a0b3313d1b9d2e3c929f559f8687a5fe6f"
+      "sha256": "32108d9a95122382228038cd4fe4ca48736a8c0b6219375a08e7697d96d9abd3"
     },
     {
       "export": "./moo-ui.css",
       "path": "dist/assets/css/moo-ui.css",
-      "sha256": "00db81fad96811182874b9207746a3154adb0f457c965a08e639a04af83f95a4"
+      "sha256": "5824bc488463bc6e6d967e4079b30d8053c9d67cba01479c10cde3830865a1bb"
     },
     {
-      "export": "./theme-prepaint.js",
-      "path": "dist/js/theme-prepaint.js",
-      "sha256": "e40ce7caa83112498c0819719e63ee8d0f23f58236f02ec038ccabf7a128121a"
+      "export": "./state.js",
+      "path": "dist/js/state.js",
+      "sha256": "85b12aea0f22f1a29c9ffe791b0d53d53cc7ab55b08ede10029edc558c8786a6"
     }
   ],
   "package": {
     "name": "@wpmoo/ui",
-    "version": "1.0.0-rc.8"
+    "version": "1.0.0"
   },
   "schemaVersion": 1
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmoo/ui",
-  "version": "1.0.0-rc.8",
+  "version": "1.0.0",
   "description": "Bootstrap markup. shadcn feel. A frontend-framework-free component system for server-rendered apps.",
   "license": "MIT",
   "author": "WPMoo (https://wpmoo.org)",
@@ -38,11 +38,12 @@
     "./context-menu.js": "./dist/js/context-menu.js",
     "./datatable.js": "./dist/js/datatable.js",
     "./slider.js": "./dist/js/slider.js",
+    "./sheet.js": "./dist/js/sheet.js",
     "./chart.js": "./dist/js/chart.js",
     "./chart.min.js": "./dist/js/chart.min.js",
     "./datepicker.js": "./dist/js/datepicker.js",
     "./datepicker.min.js": "./dist/js/datepicker.min.js",
-    "./theme-prepaint.js": "./dist/js/theme-prepaint.js",
+    "./state.js": "./dist/js/state.js",
     "./release-manifest.json": "./dist/release-manifest.json",
     "./scss/config": "./scss/_config.scss",
     "./scss/moo-ui": "./scss/moo-ui.scss",
@@ -64,11 +65,12 @@
     "dist/js/context-menu.js",
     "dist/js/datatable.js",
     "dist/js/slider.js",
+    "dist/js/sheet.js",
     "dist/js/chart.js",
     "dist/js/chart.min.js",
     "dist/js/datepicker.js",
     "dist/js/datepicker.min.js",
-    "dist/js/theme-prepaint.js",
+    "dist/js/state.js",
     "dist/release-manifest.json",
     "scss/*.scss",
     "scss/**/*.scss",

package/scss/_components.scss

@@ -1,4 +1,4 @@
-// Bootstrap components
+/* Bootstrap Components */
 @import "bootstrap/scss/tables";
 @import "bootstrap/scss/forms/labels";
 @import "bootstrap/scss/forms/form-text";
@@ -25,7 +25,7 @@
 @import "bootstrap/scss/offcanvas";
 @import "bootstrap/scss/helpers/color-bg";
 
-// Moo components
+/* Moo Components */
 @import "components/kbd";
 @import "components/input";
 @import "components/textarea";

package/scss/_config.scss

@@ -1,24 +1,18 @@
-// Moo UI public Sass config
-//
-// Import this before Bootstrap variables so overrides take precedence.
-//
-// Only the variables below are public. Derived $moo-* tokens and component
-// knobs are internal and may change without notice.
 
-$primary: #171717 !default; // Brand color
-$secondary: #f4f4f5 !default; // Secondary surface color
-$success: #047857 !default; // Success color
-$info: #0369a1 !default; // Informational color
-$warning: #b45309 !default; // Warning color
-$danger: #e7000b !default; // Destructive color
-$light: #fafafa !default; // Light surface color
-$dark: #18181b !default; // Dark surface color
+$primary: #171717 !default;
+$secondary: #f4f4f5 !default;
+$success: #047857 !default;
+$info: #0369a1 !default;
+$warning: #b45309 !default;
+$danger: #e7000b !default;
+$light: #fafafa !default;
+$dark: #18181b !default;
 
-$body-color: #18181b !default; // Document text color
-$body-bg: #fff !default; // Document background color
-$font-size-base: 0.875rem !default; // Bootstrap-compatible base font size
+$body-color: #18181b !default;
+$body-bg: #fff !default;
+$font-size-base: 0.875rem !default;
 
-$border-color: #e4e4e7 !default; // Default border color
-$border-radius: 0.5rem !default; // Default radius
-$border-radius-sm: 0.375rem !default; // Small radius
-$border-radius-lg: 0.625rem !default; // Large radius
+$border-color: #e4e4e7 !default;
+$border-radius: 0.5rem !default;
+$border-radius-sm: 0.375rem !default;
+$border-radius-lg: 0.625rem !default;

package/scss/_settings.scss

@@ -1,6 +1,3 @@
-// Ordered Sass settings aggregate. These partials emit variables only; preserve
-// this sequence because later component and catalog knobs depend on earlier
-// palette and form values before Bootstrap's own defaults are loaded.
 @import "config";
 @import "settings/palette";
 @import "settings/forms";

package/scss/components/_accordion.scss

@@ -1,7 +1,4 @@
-// The reference trigger uses a real Lucide chevron-down icon that rotates
-// on expand, not Bootstrap's baked-in ::after background-image glyph.
-// Render the same icon our other components use and drive the rotation
-// off Bootstrap's own :not(.collapsed) state hook instead.
+/* Accordion */
 .accordion-button::after {
   content: none;
 }
@@ -27,8 +24,6 @@
   text-align: start;
 }
 
-// The reference trigger has no active/pressed background — only a hover
-// underline signals interactivity, matching a plain text-link affordance.
 .accordion-button:hover {
   text-decoration: underline;
 }
@@ -43,10 +38,6 @@
   text-decoration: none;
 }
 
-// The reference's flush trigger and body sit edge-to-edge with no
-// horizontal padding, and the trigger reads as medium weight, not
-// Bootstrap's own regular default -- both retune existing Bootstrap
-// accordion tokens/properties, not new selectors.
 .accordion-flush {
   --bs-accordion-btn-padding-x: 0;
   --bs-accordion-btn-padding-y: #{$spacer * 0.625};
@@ -58,8 +49,6 @@
   font-weight: $font-weight-medium;
 }
 
-// A card owns its own surface, so a nested accordion must let that surface
-// show through instead of painting Bootstrap's body background on top of it.
 .card .accordion {
   --bs-accordion-bg: #{$moo-accordion-contained-bg};
 }

package/scss/components/_alert.scss

@@ -1,6 +1,4 @@
-// Bootstrap's base .alert has a transparent bg/border until a contextual
-// .alert-{state} modifier sets them; the design reference's quiet style
-// keeps a visible neutral border even on the unmodified/default alert.
+/* Alert */
 $moo-alert-dismissible-close-space: $btn-close-width + ($btn-close-padding-x * 2) + 0.5rem !default;
 
 .alert {
@@ -29,21 +27,12 @@ $moo-alert-dismissible-close-space: $btn-close-width + ($btn-close-padding-x * 2
   padding: $btn-close-padding-y $btn-close-padding-x;
 }
 
-// The reference's destructive alert keeps the same neutral surface and
-// border as the default alert and tints only the text/icon color —
-// verified against the live reference page's Destructive example (bg-card,
-// text-destructive). Bootstrap's own alert-danger class instead fills a
-// saturated subtle-danger background, so re-anchor its consumption
-// variables back to the neutral ones and layer only the color shift on top.
 .alert-danger {
   --bs-alert-bg: transparent;
   --bs-alert-border-color: var(--moo-border);
   --bs-alert-color: var(--moo-destructive);
 }
 
-// Warning and success alerts follow the same quiet pattern as destructive:
-// neutral border, tinted alpha surface, hue-colored text. Matches the
-// reference's alert variants (amber for warning, green for success).
 .alert-warning {
   --bs-alert-bg: var(--moo-warning-surface);
   --bs-alert-border-color: var(--moo-border);

package/scss/components/_avatar.scss

@@ -1,5 +1,4 @@
-// Bootstrap has no native avatar component. This public `.avatar` namespace is
-// intentionally small and consumes the shared Bootstrap radius/border primitives.
+/* Avatar */
 .avatar {
   position: relative;
   display: inline-flex;
@@ -8,9 +7,6 @@
   width: $avatar-size;
   height: $avatar-size;
   flex: 0 0 auto;
-  // A badge (such as a presence dot) sits at the avatar's corner and must
-  // stay visible outside the circle; the image/fallback clip to the circle
-  // on their own, so the root itself does not need to clip its children.
   overflow: visible;
   border: 0;
   border-radius: var(--bs-border-radius-pill);
@@ -66,10 +62,6 @@
   padding-inline: 0.2rem;
   border: 0;
   border-radius: var(--bs-border-radius-pill);
-  // Mirrors the reference's ring-2 treatment: the badge keeps its own
-  // 10px/12px/15px box while the page-background ring paints outside it.
-  // box-shadow (not border) keeps the ring out of the layout box, matching
-  // the .avatar-group ring below and Tailwind's own ring-* technique.
   box-shadow: $avatar-badge-ring-shadow;
   background-color: var(--moo-muted-surface);
   color: var(--moo-foreground);
@@ -83,9 +75,6 @@
   height: 0.625rem;
 }
 
-// A plain presence/status dot (no text or icon content) -- the reference's
-// own AvatarBadge with no children, recolored per use via badge_class
-// (such as a Bootstrap bg-success utility) rather than a hardcoded color here.
 .avatar-badge--dot {
   height: $avatar-badge-dot-size;
   min-width: $avatar-badge-dot-size;
@@ -121,10 +110,6 @@
   align-items: center;
 }
 
-// Matches the reference's ring-2 ring-background: each avatar in a group
-// carries a page-background ring (light = white, dark = black) so stacked
-// avatars stay visibly separated. --bs-body-bg is theme-aware in both the
-// standalone and scoped builds, mirroring the badge ring treatment.
 .avatar-group > .avatar {
   box-shadow: $avatar-group-ring-shadow;
   z-index: 0;

package/scss/components/_badge.scss

@@ -1,3 +1,4 @@
+/* Badge */
 .badge {
   display: inline-flex;
   height: $moo-chip-height;