@wpmoo/ui 0.1.0 → 0.1.1

package/LICENSE

@@ -2,17 +2,6 @@ MIT License
 
 Copyright (c) 2026 WPMoo (wpmoo.org)
 
-This license applies to the source code in this repository, except where a
-file, directory, or third-party notice states otherwise.
-
-WPMoo-generated visual assets are not licensed under the MIT License unless
-explicitly stated. This includes brand assets, component preview images,
-marketing images, screenshots, generated artwork, and other WPMoo-owned image
-assets under `static/images/`. See `ASSET_LICENSE.md`.
-
-Vendored third-party material keeps its original license and attribution.
-See `THIRD_PARTY_NOTICES.md`.
-
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights

package/README.md

@@ -2,73 +2,137 @@
 
 **Bootstrap markup. shadcn feel.**
 
-![Moo UI catalog preview](static/images/readme-hero.webp)
+Keep your Bootstrap 5.3 HTML and behavior. Replace the stylesheet and give
+your application a calmer, modern product interface without moving to React or
+Tailwind.
 
-Moo UI is a Bootstrap 5.3 component system for teams that want the calm,
-modern feel of shadcn/ui without leaving server-rendered HTML, Bootstrap
-classes, Bootstrap Sass, or Bootstrap JavaScript behind.
+[Explore the live catalog](https://ui.wpmoo.org/components/) ·
+[Try it in 30 seconds](#try-it-in-30-seconds) ·
+[View on npm](https://www.npmjs.com/package/@wpmoo/ui)
 
-It keeps Bootstrap as the public contract, then shapes the catalog, component
-examples, and composed blocks into a quieter product interface language.
+![Moo UI catalog preview](https://ui.wpmoo.org/assets/images/readme-hero.webp)
 
-## Philosophy
+[![CI](https://img.shields.io/github/actions/workflow/status/wpmoo-org/ui/ui-ci.yml?branch=main&label=CI&style=flat-square)](https://github.com/wpmoo-org/ui/actions/workflows/ui-ci.yml)
+[![coverage](https://img.shields.io/codecov/c/github/wpmoo-org/ui?branch=main&label=coverage&logo=codecov&style=flat-square&color=blue)](https://codecov.io/gh/wpmoo-org/ui)
+[![GitHub](https://img.shields.io/badge/GitHub-181717?logo=github&style=flat-square)](https://github.com/wpmoo-org/ui)
+[![npm](https://img.shields.io/npm/v/@wpmoo/ui?label=npm&logo=npm&style=flat-square&color=blue)](https://www.npmjs.com/package/@wpmoo/ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square)](LICENSE)
 
-- **Bootstrap is the contract.** Moo UI keeps Bootstrap markup, documented
-  behavior, `data-bs-*` APIs, Sass knobs, and `--bs-*` variables wherever
-  Bootstrap can express the need.
-- **shadcn is the visual language.** Moo UI studies shadcn/ui for restraint,
-  spacing, composition, and state language. It does not copy shadcn source,
-  React code, Tailwind code, Radix code, or example prose.
-- **HTML stays first-class.** Component examples are generated from Jinja
-  macros, so the preview and copyable source share one rendered output.
-- **No framework adoption tax.** The catalog can be browsed, built, and
-  shipped as static HTML without a SPA runtime.
-- **Product shells matter.** Moo UI includes primitives, utilities, and
-  composed blocks for Bootstrap applications that need to feel like modern
-  product software.
+Moo UI is for teams that already like Bootstrap's durability, documented
+components, and server-rendered friendliness, but want their customer portals,
+admin screens, and business applications to feel more like modern SaaS
+software.
 
-## Documentation
+It keeps Bootstrap as the public contract: familiar classes, `data-bs-*`
+behavior, CSS variables, Sass customization, and Bootstrap JavaScript plugins.
+Moo UI changes the visual language around that contract.
 
-Browse the catalog at [ui.wpmoo.org](https://ui.wpmoo.org/). Component pages,
-blocks, examples, local development notes, and implementation contracts belong
-in the documentation rather than this README.
+## Try It in 30 Seconds
 
-## Package
+Drop the stylesheet into ordinary Bootstrap markup:
 
-The canonical npm package is `@wpmoo/ui`:
+```html
+<link rel="stylesheet"
+      href="https://unpkg.com/@wpmoo/ui@0.1.1/dist/assets/css/moo-ui.css">
 
-```bash
-npm install @wpmoo/ui
+<button type="button" class="btn btn-primary">Create workspace</button>
 ```
 
-For CDN usage, load the built CSS artifact from the canonical package:
+That is the point of Moo UI: your markup still says Bootstrap, but the surface
+feels quieter, sharper, and more product-ready.
 
-```html
-<link rel="stylesheet" href="https://unpkg.com/@wpmoo/ui/dist/assets/css/moo-ui.css">
-```
+## Install
+
+Use the published package when a bundler owns your build:
 
-Bundlers can import the same stylesheet from the package export:
+```bash
+npm install @wpmoo/ui
+```
 
 ```js
 import "@wpmoo/ui/moo-ui.css";
 ```
 
-If the shorter `@moo/ui` scope is available to WPMoo, it is reserved as a
-small alias package only. Use `@wpmoo/ui` in documentation, CDN examples, and
-production installs.
+If a page uses Bootstrap plugins such as Dropdown, Tooltip, Popover, Modal,
+Toast, or Offcanvas, load Bootstrap's JavaScript bundle separately through your
+application. Tooltip and Popover also need the initialization Bootstrap
+documents for those plugins.
+
+## Choose an Adoption Path
+
+| Situation | Use | Contract |
+| --- | --- | --- |
+| New page or whole application | `moo-ui.css` | Complete Bootstrap CSS build with Moo UI defaults; use it instead of your existing Bootstrap stylesheet. |
+| Gradual adoption inside an existing Bootstrap app | `moo.css` | Scoped Moo component layer under a `.moo-ui` boundary for gradual adoption inside an existing Bootstrap app. |
+
+## Why Bootstrap Teams Try It
+
+- **No frontend rewrite.** Keep server-rendered HTML, Bootstrap classes, and
+  the component behavior your team already knows.
+- **Modern product rhythm.** Buttons, forms, overlays, navigation, data
+  display, and app shells are tuned toward a restrained shadcn-inspired feel.
+- **Inspectable examples.** The catalog is static HTML. Every component page
+  shows rendered examples and copyable markup.
+- **Bootstrap-native customization.** Moo UI uses Bootstrap Sass knobs and
+  `--bs-*` variables wherever Bootstrap can express the need, adding Moo-owned
+  tokens only for gaps Bootstrap does not model.
+- **Practical migration surface.** Start with one page, one scoped area, or a
+  full stylesheet replacement after visual review.
+
+## Philosophy
+
+- **Bootstrap is the contract.** Moo UI keeps Bootstrap markup, documented
+  behavior, Sass knobs, and `--bs-*` variables wherever Bootstrap can express
+  the need.
+- **shadcn is the feeling.** Moo UI studies restraint, rhythm, and product UI
+  sensibility without adopting React, Tailwind, Radix, or shadcn source.
+- **HTML stays first-class.** The catalog is static, inspectable, and friendly
+  to server-rendered applications.
+- **Extensions stay honest.** Moo-owned classes and behavior are added only
+  when Bootstrap has no native component contract for the pattern.
+
+## What Is Included
+
+The live catalog is the source of truth for current coverage:
+
+- [Components](https://ui.wpmoo.org/components/) for actions, forms,
+  data display, feedback, disclosure, overlays, and navigation.
+- [Blocks](https://ui.wpmoo.org/blocks/) for composed application
+  surfaces such as sidebar layouts.
+- A static documentation site that can be inspected without a client-side app
+  runtime.
+
+Representative components include Button, Field, Table, Dialog, Toast, Sheet,
+and Sidebar. More components are being added as the catalog roadmap continues.
+
+## Package Boundaries
 
-## Build Outputs
+The npm package distributes compiled CSS and license/notice files. It does not
+ship the catalog's generated preview images, Jinja templates, Sass source, or
+Moo-owned catalog JavaScript.
 
-The static build emits three CSS artifacts under `dist/assets/css/`:
+The source repository contains the static catalog, component templates, build
+tooling, tests, and documentation.
 
-- `moo-ui.css` for the standalone catalog and examples.
-- `catalog.css` for documentation chrome.
-- `moo-core.css` for integrations that need the Moo component surface as an
-  opt-in native `@scope (.moo-ui)` layer.
+## Development
+
+The catalog is intentionally small-tool friendly:
+
+```bash
+.venv/bin/python build.py
+.venv/bin/python dev.py
+.venv/bin/python -m unittest discover -s tests -v
+```
+
+For developers who prefer npm scripts, the package also exposes:
+
+```bash
+npm run build
+npm run dev
+npm test
+```
 
-The npm package publishes only built component CSS, the optional Bootstrap
-bundle, and license/notice files. WPMoo-owned catalog and preview images are
-not included in the package.
+Browse the local catalog at `http://localhost:4173/` when `dev.py` is running.
 
 ## Licensing
 
@@ -79,5 +143,4 @@ are not covered by the MIT source code license and remain copyright WPMoo, all
 rights reserved.
 
 Vendored third-party material keeps its original license and attribution. See
-`LICENSE`, `LICENSE-MOO-CORE.txt`, `ASSET_LICENSE.md`, and
-`THIRD_PARTY_NOTICES.md`.
+`LICENSE`, `ASSET_LICENSE.md`, and `THIRD_PARTY_NOTICES.md`.

package/dist/assets/css/moo-ui.css

@@ -12966,6 +12966,19 @@ label.btn {
   min-width: max(100%, var(--moo-dropdown-sidebar-min-width));
 }
 
+@media (min-width: 992px) {
+  [data-slot="sidebar-header"] [data-moo-sidebar-dropdown-positioned] > .dropdown-menu {
+    position: fixed !important;
+    z-index: 1000;
+    inset-block-start: var(--moo-sidebar-dropdown-block-start) !important;
+    inset-inline-start: var(--moo-sidebar-dropdown-inline-start) !important;
+    width: var(--moo-dropdown-sidebar-min-width);
+    min-width: var(--moo-dropdown-sidebar-min-width);
+    margin: 0;
+    transform: none !important;
+  }
+}
+
 .avatar {
   display: inline-flex;
   align-items: center;
@@ -13239,6 +13252,11 @@ label.btn {
   color: var(--moo-sidebar-foreground);
 }
 
+.sidebar-menu-button.sidebar-menu-button--account,
+.sidebar-menu-button.sidebar-menu-button--workspace {
+  cursor: default;
+}
+
 .sidebar-menu-item--account {
   padding-inline: 0;
 }
@@ -13340,6 +13358,10 @@ label.btn {
   font-size: 0.81288rem;
 }
 
+.sidebar-menu-sub-item {
+  position: relative;
+}
+
 .sidebar-menu-action {
   position: absolute;
   inset-inline-end: 0.25rem;
@@ -13382,6 +13404,10 @@ label.btn {
   padding-inline-end: 2.5rem;
 }
 
+.sidebar-menu-sub-item:has(> .sidebar-menu-badge) > .sidebar-menu-button {
+  padding-inline-end: 2.5rem;
+}
+
 .sidebar-menu-item:has(> .sidebar-menu-action) > .sidebar-menu-badge {
   inset-inline-end: 2rem;
 }
@@ -13420,8 +13446,8 @@ label.btn {
 }
 
 .sidebar-footer .sidebar-account-menu {
-  width: 100%;
-  min-width: 100%;
+  width: auto;
+  min-width: var(--moo-dropdown-sidebar-min-width);
   padding: 0.25rem;
   border-radius: var(--bs-border-radius-lg);
   box-shadow: var(--bs-box-shadow);
@@ -13553,6 +13579,10 @@ label.btn {
     flex-basis: var(--moo-sidebar-width-icon);
     width: var(--moo-sidebar-width-icon);
   }
+  .sidebar-wrapper[data-moo-sidebar-state="collapsed"] .sidebar-inset {
+    position: relative;
+    z-index: 0;
+  }
   [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-group-label,
 [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__text,
 [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__subtitle,
@@ -13565,10 +13595,74 @@ label.btn {
 [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-badge {
     display: none !important;
   }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"]:has(.sidebar-menu-button[data-bs-toggle="dropdown"][aria-expanded="true"]) {
+    z-index: 1000;
+  }
+  .sidebar-menu-flyout {
+    position: fixed;
+    z-index: 1000;
+    inset-block-start: var(--moo-sidebar-flyout-block-start);
+    inset-inline-start: var(--moo-sidebar-flyout-inline-start);
+    display: flex;
+    flex-direction: column;
+    min-width: 10rem;
+    max-width: 14rem;
+    margin: 0;
+    padding: 0.25rem;
+    list-style: none;
+    border: var(--bs-border-width) solid var(--moo-border);
+    border-radius: var(--bs-border-radius-lg);
+    background: var(--moo-surface);
+    box-shadow: var(--bs-box-shadow);
+  }
+  .sidebar-menu-flyout .sidebar-menu-sub-item {
+    position: relative;
+  }
+  .sidebar-menu-flyout .sidebar-menu-button {
+    justify-content: flex-start;
+    height: 2rem;
+    padding-inline: 0.5rem;
+  }
+  .sidebar-menu-flyout .sidebar-menu-button__text {
+    display: grid;
+  }
+  .sidebar-menu-flyout .sidebar-menu-badge {
+    display: flex !important;
+  }
   [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button {
     justify-content: center;
     padding-inline: 0;
   }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace:hover {
+    background: transparent;
+  }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace[aria-expanded="true"] {
+    background: transparent;
+    outline: 0;
+    box-shadow: none;
+  }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace:focus-visible {
+    background: transparent;
+    outline: 0;
+    box-shadow: none;
+  }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account {
+    padding: 0;
+    overflow: visible;
+  }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account:hover {
+    background: transparent;
+  }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account[aria-expanded="true"] {
+    background: transparent;
+    outline: 0;
+    box-shadow: none;
+  }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account:focus-visible {
+    background: transparent;
+    outline: 0;
+    box-shadow: none;
+  }
   [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--lg {
     height: 2rem;
     padding: 0;
@@ -13784,3 +13878,180 @@ label.btn {
   font-size: 0.875rem;
   color: var(--moo-muted-foreground);
 }
+
+.tooltip {
+  --bs-tooltip-max-width: 20rem;
+  --bs-tooltip-padding-x: 0.75rem;
+  --bs-tooltip-padding-y: 0.375rem;
+  --bs-tooltip-font-size: 0.75rem;
+  --bs-tooltip-opacity: 1;
+  line-height: 1.333;
+}
+
+.tooltip-trigger {
+  color: var(--moo-foreground);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--moo-muted-foreground);
+  text-underline-offset: 0.2em;
+}
+
+.tooltip-kbd {
+  padding: 0.125rem 0.375rem;
+  font-size: 0.75rem;
+  color: var(--bs-body-bg);
+  background-color: var(--bs-body-color);
+  border-radius: var(--bs-border-radius-sm);
+}
+
+.popover {
+  --bs-popover-border-radius: var(--bs-border-radius-lg);
+  --bs-popover-border-color: var(--moo-border);
+  --bs-popover-header-bg: var(--bs-popover-bg);
+  --bs-popover-header-color: var(--bs-popover-body-color);
+  --bs-popover-header-padding-x: 0.625rem;
+  --bs-popover-header-padding-y: 0.625rem;
+  --bs-popover-body-padding-x: 0.625rem;
+  --bs-popover-body-padding-y: 0.625rem;
+  --bs-popover-font-size: 0.875rem;
+  line-height: 1.43;
+  --bs-popover-max-width: 20rem;
+  width: 20rem;
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+.popover-header {
+  padding-bottom: 0;
+  border-bottom: 0;
+  font-weight: 500;
+}
+
+.popover .popover-arrow {
+  display: none;
+}
+
+.modal {
+  --bs-modal-border-radius: var(--bs-border-radius-xl);
+  --bs-modal-border-color: var(--moo-border);
+  --bs-modal-header-border-width: 0;
+  --bs-modal-footer-border-color: var(--moo-border);
+  --bs-modal-title-line-height: 1;
+}
+
+.modal[tabindex]:focus-visible {
+  outline: none;
+}
+
+.modal-content {
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+.modal-title {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.modal-footer {
+  padding: 1rem;
+}
+
+body:has(.modal.show) > .modal-backdrop {
+  --bs-backdrop-opacity: 1;
+  background-color: color-mix(in srgb, var(--bs-black) 10%, transparent);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+}
+
+.offcanvas.sheet {
+  --bs-offcanvas-width: 24rem;
+  --bs-offcanvas-border-color: var(--moo-border);
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+.offcanvas.sheet[tabindex]:focus-visible {
+  outline: none;
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+.offcanvas.sheet .offcanvas-title {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+:has(> .offcanvas.sheet:is(.showing, .show, .hiding)) > .offcanvas-backdrop {
+  background-color: color-mix(in srgb, var(--bs-black) 10%, transparent);
+  transition: opacity 0.3s ease-in-out, -webkit-backdrop-filter 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
+}
+
+:has(> .offcanvas.sheet:is(.showing, .show)) > .offcanvas-backdrop {
+  opacity: 1;
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+}
+
+:has(> .offcanvas.sheet.hiding) > .offcanvas-backdrop {
+  opacity: 0;
+  -webkit-backdrop-filter: blur(0);
+  backdrop-filter: blur(0);
+}
+
+.toast {
+  --bs-toast-border-radius: var(--bs-border-radius-lg);
+  --bs-toast-border-color: var(--moo-border);
+  --bs-toast-box-shadow: var(--bs-box-shadow-lg);
+  --bs-toast-padding-x: 1rem;
+}
+
+.toast-header strong {
+  font-weight: 500;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.field > .form-label {
+  margin-bottom: 0;
+  font-weight: 500;
+}
+
+.field-description,
+.field-error {
+  margin-top: 0;
+  font-size: 0.875rem;
+}
+
+.field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.field-group > hr {
+  margin-block: 0;
+}
+
+.field-legend {
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 0.375rem;
+}
+
+.field-fieldset > * + * {
+  margin-top: 1rem;
+}
+
+.field-fieldset > .field-legend + .field-description {
+  margin-top: 0;
+}
+
+.field-fieldset + hr {
+  opacity: 0.1;
+}
+
+.form-label,
+.form-check-label {
+  user-select: none;
+}