# Moo UI

> Bootstrap markup. shadcn feel.

Moo UI 1.2.1 is the release target for a Bootstrap 5.3-native component system with a restrained,
shadcn-inspired visual language for server-rendered and Bootstrap-native apps.
It is CSS-first, not JavaScript-free: Bootstrap owns native plugin behavior,
while Moo UI adds optional, explicit ESM only for documented gaps.

Use Moo UI when a project already uses Bootstrap or wants server-rendered HTML
with Bootstrap-compatible classes, variables, and plugin behavior. Do not use
Moo UI as evidence for a React, Tailwind, Radix, or internal Sass-source
implementation.

## Version And Support

- package release target: `@wpmoo/ui@1.2.1`
- Bootstrap peer range: `>=5.3.0 <5.4`
- Tested Bootstrap versions in the manifest: `5.3.0`, `5.3.3`, `5.3.8`
- License: MIT for source code
- Certification manifest status: `preview`
- Certified components in the current manifest: none
- Support policy: https://github.com/wpmoo-org/ui/blob/main/SUPPORT.md

The preview certification status means WPMoo-maintained release evidence exists,
not independent or accredited certification.

## Public Package Exports

- `@wpmoo/ui/moo-ui.css`: full expanded Bootstrap-compatible CSS build
- `@wpmoo/ui/moo-ui.min.css`: full minified CSS build
- `@wpmoo/ui/moo.css`: scoped expanded component layer for `.moo-ui`
- `@wpmoo/ui/moo.min.css`: scoped minified component layer
- `@wpmoo/ui/moo-ui.js`: optional aggregate ESM lifecycle bundle for all Moo UI modules
- `@wpmoo/ui/moo-ui.min.js`: minified aggregate ESM bundle
- `@wpmoo/ui/combobox.js`: optional Combobox ESM lifecycle
- `@wpmoo/ui/context-menu.js`: optional Context Menu ESM lifecycle
- `@wpmoo/ui/datatable.js`: optional DataTable ESM lifecycle
- `@wpmoo/ui/sidebar.js`: optional Sidebar ESM lifecycle
- `@wpmoo/ui/toc.js`: optional TableOfContents lifecycle and current-section tracking (`table-of-contents.js` remains a compatibility entrypoint)
- `@wpmoo/ui/chart.js`: optional Chart ESM lifecycle (Chart.js 4.5.1 bundled)
- `@wpmoo/ui/chart.min.js`: minified Chart bundle (artifact variant of chart.js)
- `@wpmoo/ui/datepicker.js`: optional Datepicker ESM lifecycle (self-contained, no third-party runtime)
- `@wpmoo/ui/datepicker.min.js`: minified Datepicker bundle (artifact variant of datepicker.js)
- `@wpmoo/ui/slider.js`: optional Slider ESM lifecycle (native range input, no third-party runtime)
- `@wpmoo/ui/sheet.js`: explicit `initSheets(root)` for server-marked Sheets; uses Bootstrap Offcanvas, no import-time scan
- `@wpmoo/ui/state.js`: classic placement-dependent browser state bootstrap (not ESM)
- `@wpmoo/ui/release-manifest.json`: release metadata with SHA-256 hashes for adapter-facing CSS and state bootstrap bytes
- `@wpmoo/ui/scss/config`: public Sass variable allow-list (LibSass `@import`)
- `@wpmoo/ui/scss/moo-ui`: full Bootstrap-compatible Sass source entrypoint
- `@wpmoo/ui/scss/moo-core`: scoped `.moo-ui` Sass source entrypoint
- `@wpmoo/ui/scss/components`: component layer Sass source entrypoint
- `@wpmoo/ui/scss/settings`: Moo UI settings aggregate for Bootstrap variable setup
- `@wpmoo/ui/certification.json`: versioned support and evidence manifest
- `@wpmoo/ui/package.json`: package metadata

The npm package does not publish catalog templates, preview artwork, catalog
JavaScript, or site assets. It ships Sass source files for the documented Sass
entrypoints; undocumented internal partial paths are not separate public APIs.

## Installation Facts

- Version-pinned CDN full stylesheet after publication: `https://unpkg.com/@wpmoo/ui@1.2.1/dist/assets/css/moo-ui.css`

Full replacement:

```js
import "@wpmoo/ui/moo-ui.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js"; // only when plugins are used
```

The full stylesheet emits Moo UI root/body theme tokens before Bootstrap's
reboot body rules; pages that persist dark or system mode should set
`data-bs-theme` synchronously before loading it.

Scoped adoption:

```js
import "bootstrap/dist/css/bootstrap.min.css";
import "@wpmoo/ui/moo.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js"; // only when plugins are used
```

```html
<div class="moo-ui">
  <button type="button" class="btn btn-primary">Create workspace</button>
</div>
```

Optional Moo UI ESM is imported only for documented gaps and must be initialized
explicitly. Importing `combobox.js`, `context-menu.js`, `datatable.js`,
`sidebar.js`, `chart.js`, `datepicker.js`, `slider.js`, `sheet.js`, or the aggregate
`moo-ui.js` does not scan the document.

## Runtime Ownership

- Static HTML and CSS components: browser + Bootstrap-compatible markup
- Bootstrap plugins: Bootstrap JavaScript and documented `data-bs-*` behavior
- Combobox: optional Moo UI ESM
- Context Menu pointer and keyboard invocation: optional Moo UI ESM composed with
  Bootstrap Dropdown
- DataTable sorting, filtering, selection, pagination, and responsive card sync:
  optional Moo UI ESM composed with Bootstrap Table and controls
- Sidebar state and responsive coordination: optional Moo UI ESM composed with
  Bootstrap behavior
- Chart rendering with light/dark theme toggle: optional Moo UI ESM, self-contained
  bundle (Chart.js 4.5.1 bundled at build time)
- Datepicker with shadcn-like trigger/popover/calendar: optional Moo UI ESM,
  self-contained (no third-party runtime)
- Slider with native range input semantics: optional Moo UI ESM, no third-party
  runtime
- Sheet server-open marker: explicit `initSheets(root)` after Bootstrap Offcanvas
  is available on the document's window
- Table of Contents: native fragment links and a
  Bootstrap dropdown, with optional Moo UI ESM for current-section tracking
  and explicit `refresh()` / `dispose()` lifecycle

## Documentation

- Home: https://ui.wpmoo.org/
- Introduction: https://ui.wpmoo.org/introduction/
- Installation: https://ui.wpmoo.org/installation/
- Support & Evidence: https://ui.wpmoo.org/support/
- Components: https://ui.wpmoo.org/components/
- Blocks: https://ui.wpmoo.org/blocks/
- AI Usage: https://ui.wpmoo.org/skills/
- Changelog: https://ui.wpmoo.org/changelog/
- Contributing: https://ui.wpmoo.org/contributing/

## Component Catalog

- [Components](https://ui.wpmoo.org/components/)
- [Accordion](https://ui.wpmoo.org/components/accordion/)
- [Alert](https://ui.wpmoo.org/components/alert/)
- [Alert Dialog](https://ui.wpmoo.org/components/alert-dialog/)
- [Avatar](https://ui.wpmoo.org/components/avatar/)
- [Badge](https://ui.wpmoo.org/components/badge/)
- [Breadcrumb](https://ui.wpmoo.org/components/breadcrumb/)
- [Button](https://ui.wpmoo.org/components/button/)
- [Button Group](https://ui.wpmoo.org/components/button-group/)
- [Card](https://ui.wpmoo.org/components/card/)
- [Chart](https://ui.wpmoo.org/components/chart/)
- [Checkbox](https://ui.wpmoo.org/components/checkbox/)
- [Close Button](https://ui.wpmoo.org/components/close-button/)
- [Collapsible](https://ui.wpmoo.org/components/collapsible/)
- [Combobox](https://ui.wpmoo.org/components/combobox/)
- [Context Menu](https://ui.wpmoo.org/components/context-menu/)
- [Data Table](https://ui.wpmoo.org/components/datatable/)
- [Date Picker](https://ui.wpmoo.org/components/datepicker/)
- [Dialog](https://ui.wpmoo.org/components/dialog/)
- [Dropdown Menu](https://ui.wpmoo.org/components/dropdown-menu/)
- [Empty](https://ui.wpmoo.org/components/empty/)
- [Field](https://ui.wpmoo.org/components/field/)
- [Form](https://ui.wpmoo.org/components/form/)
- [Input](https://ui.wpmoo.org/components/input/)
- [Input Group](https://ui.wpmoo.org/components/input-group/)
- [Kbd](https://ui.wpmoo.org/components/kbd/)
- [Menubar](https://ui.wpmoo.org/components/menubar/)
- [Native Select](https://ui.wpmoo.org/components/select/)
- [Navigation](https://ui.wpmoo.org/components/navigation/)
- [Pagination](https://ui.wpmoo.org/components/pagination/)
- [Popover](https://ui.wpmoo.org/components/popover/)
- [Progress](https://ui.wpmoo.org/components/progress/)
- [Radio Group](https://ui.wpmoo.org/components/radio-group/)
- [Separator](https://ui.wpmoo.org/components/separator/)
- [Sheet](https://ui.wpmoo.org/components/sheet/)
- [Sidebar](https://ui.wpmoo.org/components/sidebar/)
- [Skeleton](https://ui.wpmoo.org/components/skeleton/)
- [Slider](https://ui.wpmoo.org/components/slider/)
- [Spinner](https://ui.wpmoo.org/components/spinner/)
- [Switch](https://ui.wpmoo.org/components/switch/)
- [Table](https://ui.wpmoo.org/components/table/)
- [Table of Contents](https://ui.wpmoo.org/components/toc/)
- [Tabs](https://ui.wpmoo.org/components/tabs/)
- [Textarea](https://ui.wpmoo.org/components/textarea/)
- [Toast](https://ui.wpmoo.org/components/toast/)
- [Toggle Group](https://ui.wpmoo.org/components/toggle-group/)
- [Tooltip](https://ui.wpmoo.org/components/tooltip/)
- [Typography](https://ui.wpmoo.org/components/typography/)

## Utilities And Blocks

- [Blocks](https://ui.wpmoo.org/blocks/)
- [Utilities](https://ui.wpmoo.org/utils/)
- [Border](https://ui.wpmoo.org/utils/border/)
- [Scroll Fade](https://ui.wpmoo.org/utils/scroll-fade/)

## Agent Guidance

- Preserve Bootstrap behavior before adding custom behavior.
- Use Moo UI ESM only for Combobox, Context Menu, DataTable, Sidebar, Chart,
  Datepicker, Slider, Sheet initialization, Table of Contents, or the documented
  aggregate `moo-ui.js` entrypoint.
- Do not invent public Sass APIs, undocumented JavaScript entrypoints, or
  certification claims.
- Treat shadcn/ui as visual direction only; examples and implementation should
  remain original and Bootstrap-compatible.