@wpmoo/ui 1.0.0-rc.3 → 1.0.0-rc.4

package/dist/js/sidebar.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI sidebar.js v1.0.0-rc.3 (https://ui.wpmoo.org/)
+ * Moo UI sidebar.js v1.0.0-rc.4 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/slider.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI slider.js v1.0.0-rc.3 (https://ui.wpmoo.org/)
+ * Moo UI slider.js v1.0.0-rc.4 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmoo/ui",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.4",
   "description": "Bootstrap markup. shadcn feel. A frontend-framework-free component system for server-rendered apps.",
   "license": "MIT",
   "author": "WPMoo (https://wpmoo.org)",
@@ -27,6 +27,8 @@
     "./moo-ui.min.css": "./dist/assets/css/moo-ui.min.css",
     "./moo.css": "./dist/assets/css/moo.css",
     "./moo.min.css": "./dist/assets/css/moo.min.css",
+    "./moo-ui.js": "./dist/js/moo-ui.js",
+    "./moo-ui.min.js": "./dist/js/moo-ui.min.js",
     "./combobox.js": "./dist/js/combobox.js",
     "./sidebar.js": "./dist/js/sidebar.js",
     "./context-menu.js": "./dist/js/context-menu.js",
@@ -37,6 +39,10 @@
     "./datepicker.js": "./dist/js/datepicker.js",
     "./datepicker.min.js": "./dist/js/datepicker.min.js",
     "./scss/config": "./scss/_config.scss",
+    "./scss/moo-ui": "./scss/moo-ui.scss",
+    "./scss/moo-core": "./scss/moo-core.scss",
+    "./scss/components": "./scss/_components.scss",
+    "./scss/settings": "./scss/_settings.scss",
     "./certification.json": "./certification.json",
     "./package.json": "./package.json"
   },
@@ -45,6 +51,8 @@
     "dist/assets/css/moo-ui.min.css",
     "dist/assets/css/moo.css",
     "dist/assets/css/moo.min.css",
+    "dist/js/moo-ui.js",
+    "dist/js/moo-ui.min.js",
     "dist/js/combobox.js",
     "dist/js/sidebar.js",
     "dist/js/context-menu.js",
@@ -54,12 +62,12 @@
     "dist/js/chart.min.js",
     "dist/js/datepicker.js",
     "dist/js/datepicker.min.js",
-    "scss/_config.scss",
+    "scss/*.scss",
+    "scss/**/*.scss",
     "certification.json",
     "README.md",
     "LICENSE",
-    "ASSET_LICENSE.md",
-    "THIRD_PARTY_NOTICES.md"
+    "ASSET_LICENSE.md"
   ],
   "peerDependencies": {
     "bootstrap": ">=5.3.0 <5.4"

package/scss/_components.scss

@@ -0,0 +1,73 @@
+// Bootstrap components
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms/labels";
+@import "bootstrap/scss/forms/form-text";
+@import "bootstrap/scss/forms/form-control";
+@import "bootstrap/scss/forms/form-select";
+@import "bootstrap/scss/forms/form-check";
+@import "bootstrap/scss/forms/input-group";
+@import "bootstrap/scss/forms/validation";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/helpers/color-bg";
+
+// Moo component support
+@import "foundations/focus";
+@import "utilities/scroll_fade";
+
+// Moo components
+@import "components/kbd";
+@import "components/input";
+@import "components/textarea";
+@import "components/select";
+@import "components/input_group";
+@import "components/button";
+@import "components/close_button";
+@import "components/button_group";
+@import "components/toggle_group";
+@import "components/card";
+@import "components/table";
+@import "components/dropdown";
+@import "components/menubar";
+@import "components/avatar";
+@import "components/navigation";
+@import "components/skeleton";
+@import "components/sidebar";
+@import "components/alert";
+@import "components/breadcrumb";
+@import "components/pagination";
+@import "components/badge";
+@import "components/progress";
+@import "components/slider";
+@import "components/separator";
+@import "components/checkbox";
+@import "components/radio_group";
+@import "components/switch";
+@import "components/spinner";
+@import "components/accordion";
+@import "components/tabs";
+@import "components/collapsible";
+@import "components/tooltip";
+@import "components/popover";
+@import "components/dialog";
+@import "components/sheet";
+@import "components/toast";
+@import "components/field";
+@import "components/datepicker";
+@import "components/combobox";
+@import "components/context-menu";
+@import "components/datatable";

package/scss/_settings.scss

@@ -0,0 +1,8 @@
+// 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";
+@import "settings/component_variables";
+@import "settings/bootstrap_overrides";

package/scss/components/_accordion.scss

@@ -0,0 +1,59 @@
+// 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-button::after {
+  content: none;
+}
+
+.accordion-button [data-icon] {
+  position: absolute;
+  inset-inline-end: var(--bs-accordion-btn-padding-x);
+  top: 50%;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  pointer-events: none;
+  transform: translateY(-50%);
+  transition: $accordion-icon-transition;
+  transform-origin: center;
+}
+
+.accordion-button:not(.collapsed) [data-icon] {
+  transform: translateY(-50%) $accordion-icon-transform;
+}
+
+.accordion-flush .accordion-button {
+  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;
+}
+
+.accordion-button:disabled {
+  color: var(--moo-disabled-foreground);
+  opacity: var(--moo-disabled-control-opacity);
+  pointer-events: none;
+}
+
+.accordion-button:disabled:hover {
+  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};
+  --bs-accordion-body-padding-x: 0;
+  --bs-accordion-body-padding-y: #{$spacer * 0.625};
+}
+
+.accordion-flush .accordion-button {
+  font-weight: $font-weight-medium;
+}

package/scss/components/_alert.scss

@@ -0,0 +1,94 @@
+// 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.
+$moo-alert-dismissible-close-space: $btn-close-width + ($btn-close-padding-x * 2) + 0.5rem !default;
+
+.alert {
+  --bs-alert-border-color: var(--moo-border);
+  --bs-alert-color: var(--moo-foreground);
+  --bs-alert-padding-x: 0.625rem;
+  --bs-alert-padding-y: 0.5rem;
+
+  display: flex;
+  align-items: flex-start;
+  gap: 0.375rem;
+}
+
+.alert-dismissible {
+  padding-right: 0;
+  padding-left: 0;
+  padding-inline-start: var(--bs-alert-padding-x);
+  padding-inline-end: calc(var(--bs-alert-padding-x) + #{$moo-alert-dismissible-close-space});
+}
+
+.alert-dismissible .btn-close {
+  top: auto;
+  right: auto;
+  inset-block-start: 50%;
+  inset-inline-end: var(--bs-alert-padding-x);
+  padding: $btn-close-padding-y $btn-close-padding-x;
+  transform: translateY(-50%);
+}
+
+// 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);
+  --bs-alert-color: var(--moo-warning);
+}
+
+.alert-success {
+  --bs-alert-bg: var(--moo-success-surface);
+  --bs-alert-border-color: var(--moo-border);
+  --bs-alert-color: var(--moo-success);
+}
+
+.alert-info {
+  --bs-alert-bg: var(--moo-info-surface);
+  --bs-alert-border-color: var(--moo-border);
+  --bs-alert-color: var(--moo-info);
+}
+
+.alert-icon {
+  display: flex;
+  flex: 0 0 auto;
+  margin-top: 0.125rem;
+}
+
+.alert-icon [data-icon] {
+  width: 1rem;
+  height: 1rem;
+}
+
+.alert-body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.alert-body p {
+  color: color-mix(in srgb, var(--bs-alert-color) 60%, var(--bs-secondary-color));
+}
+
+.alert-heading {
+  margin-bottom: $spacer * 0.25;
+  font-size: $font-size-base;
+  font-weight: $headings-font-weight;
+}
+
+.alert-action {
+  flex: 0 0 auto;
+}

package/scss/components/_avatar.scss

@@ -0,0 +1,154 @@
+// Bootstrap has no native avatar component. This public `.avatar` namespace is
+// intentionally small and consumes the shared Bootstrap radius/border primitives.
+.avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  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);
+  background-color: var(--moo-muted-surface);
+  color: var(--moo-foreground);
+  font-size: $font-size-base;
+  font-weight: $font-weight-medium;
+  line-height: $avatar-line-height;
+  text-transform: uppercase;
+}
+
+.avatar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border: var(--bs-border-width) solid var(--moo-border);
+  border-radius: var(--bs-border-radius-pill);
+  pointer-events: none;
+  opacity: 0.8;
+}
+
+.avatar > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: var(--bs-border-radius-pill);
+}
+
+.avatar-fallback {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  padding: 0 0.15rem;
+}
+
+.avatar--has-image > .avatar-fallback {
+  display: none;
+}
+
+.avatar-badge {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 0.9375rem;
+  min-width: 0.9375rem;
+  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);
+  font-size: 0.625rem;
+  font-weight: $font-weight-medium;
+  line-height: 1;
+}
+
+.avatar-badge [data-icon] {
+  width: 0.625rem;
+  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;
+  padding-inline: 0;
+}
+
+.avatar-badge--icon {
+  width: $avatar-badge-icon-size;
+  height: $avatar-badge-icon-size;
+  min-width: $avatar-badge-icon-size;
+  padding-inline: 0;
+}
+
+.avatar-badge--icon [data-icon] {
+  width: $avatar-badge-icon-glyph-size;
+  height: $avatar-badge-icon-glyph-size;
+}
+
+.avatar-sm {
+  width: $avatar-size-sm;
+  height: $avatar-size-sm;
+  font-size: $avatar-font-size-sm;
+}
+
+.avatar-lg {
+  width: $avatar-size-lg;
+  height: $avatar-size-lg;
+  font-size: $avatar-font-size-lg;
+}
+
+.avatar-group {
+  display: inline-flex;
+  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;
+}
+
+.avatar-group .avatar + .avatar,
+.avatar-group .avatar + .avatar-count,
+.avatar-group .avatar-count + .avatar {
+  margin-inline-start: $avatar-group-overlap;
+}
+
+.avatar-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: $avatar-size;
+  height: $avatar-size;
+  flex: 0 0 auto;
+  border-radius: var(--bs-border-radius-pill);
+  font-size: 0.75rem;
+  font-weight: $font-weight-medium;
+}
+
+.avatar-count::before {
+  content: "+";
+  margin-inline-end: -0.1rem;
+}

package/scss/components/_badge.scss

@@ -0,0 +1,33 @@
+.badge {
+  display: inline-flex;
+  height: $moo-chip-height;
+  align-items: center;
+  justify-content: center;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-color: $badge-border-color;
+  gap: 0.25rem;
+  line-height: 1rem;
+}
+
+.badge[class~="border"] {
+  border-color: var(--moo-border) !important;
+}
+
+.badge[class~="text-bg-primary"] {
+  color: var(--moo-primary-foreground) !important;
+  background-color: var(--moo-primary) !important;
+}
+
+.badge[class~="text-bg-secondary"] {
+  color: var(--moo-foreground) !important;
+  background-color: var(--moo-muted-surface) !important;
+}
+
+.badge[class~="text-bg-danger"] {
+  color: var(--moo-destructive) !important;
+  background-color: var(--moo-destructive-surface) !important;
+}
+
+.badge[class~="text-body-secondary"] {
+  color: var(--moo-foreground) !important;
+}

package/scss/components/_breadcrumb.scss

@@ -0,0 +1,130 @@
+// Bootstrap mutes the active/current item and leaves prior items on default
+// link styling (colored, underlined); the design reference inverts this —
+// prior items are muted, the active item reads at full foreground
+// strength — verified against the live reference page.
+.breadcrumb {
+  --bs-breadcrumb-item-active-color: var(--moo-foreground);
+  --bs-breadcrumb-item-padding-x: #{$spacer * 0.375};
+
+  column-gap: var(--bs-breadcrumb-item-padding-x);
+  line-height: 1.25rem;
+}
+
+.breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  float: none;
+  flex: 0 0 auto;
+}
+
+.breadcrumb-item + .breadcrumb-item {
+  padding-left: 0;
+}
+
+.breadcrumb:not(.breadcrumb--custom-divider) .breadcrumb-item + .breadcrumb-item::before {
+  width: 0.875rem;
+  height: 0.875rem;
+  padding-right: 0;
+  margin-inline-end: var(--bs-breadcrumb-item-padding-x);
+  background-color: var(--moo-muted-foreground);
+  content: "";
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
+}
+
+.breadcrumb--custom-divider .breadcrumb-item + .breadcrumb-item::before {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  padding-right: 0;
+  margin-inline-end: var(--bs-breadcrumb-item-padding-x);
+  line-height: 1;
+}
+
+// Bootstrap emits these RTL changes through RTLCSS. The catalog serves one
+// runtime CSS file, so scoped RTL demos bridge that generated output.
+:dir(rtl) .breadcrumb {
+  --bs-breadcrumb-divider: "#{$breadcrumb-divider-flipped}";
+}
+
+:dir(rtl) .breadcrumb-item + .breadcrumb-item {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+:dir(rtl) .breadcrumb-item + .breadcrumb-item::before {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+:dir(rtl) .breadcrumb:not(.breadcrumb--custom-divider) .breadcrumb-item + .breadcrumb-item::before {
+  padding-left: 0;
+  transform: scaleX(-1);
+}
+
+.breadcrumb-item a {
+  color: var(--moo-muted-foreground);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.breadcrumb-item a:hover {
+  color: var(--moo-foreground);
+  text-decoration: none;
+}
+
+// A static collapsed-segment marker (no interactive behavior of its own,
+// matching the reference's ellipsis placeholder).
+.breadcrumb-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  color: var(--moo-muted-foreground);
+}
+
+.breadcrumb-ellipsis [data-icon] {
+  width: 1rem;
+  height: 1rem;
+}
+
+// Bootstrap's dropdown wrapper is a plain block box; inside a breadcrumb
+// item that sits beside a floated divider, a block box wraps its content
+// onto its own line instead of flowing beside the float. Making this
+// wrapper an atomic inline-flex box keeps it on the breadcrumb's line.
+.breadcrumb-dropdown-item,
+.breadcrumb-dropdown-item .dropdown {
+  display: inline-flex;
+  align-items: center;
+}
+
+.breadcrumb-dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacer * 0.25;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--moo-muted-foreground);
+  font: inherit;
+  line-height: 1.25rem;
+  text-decoration: none;
+}
+
+.breadcrumb-dropdown-trigger:hover,
+.breadcrumb-dropdown-trigger:focus {
+  color: var(--moo-foreground);
+}
+
+.breadcrumb .breadcrumb-dropdown-trigger:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.breadcrumb-dropdown-trigger > [data-icon] {
+  width: 0.875rem;
+  height: 0.875rem;
+}