@loomui-ng/ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Loom UI contributors
+
+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
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,47 @@
-# Temporary Holding Version
+# @loomui-ng/ui — Loom UI
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Directive-first Angular 22 components (also available as custom elements) with Radix-style behavior, built on the CDK and Tailwind v4. Inspired by shadcn/ui. Each component folder has its own README; behavior specs are in `docs/behavior-specs/`, manual checklists in `docs/manual-tests/`.
+
+Import per component: `import { UiButton } from '@loomui-ng/ui/button'` (path alias in `tsconfig.json`; secondary entry points are prepared with an `ng-package.json` per folder, but the library has not been built/published with ng-packagr yet).
+
+## Install
+
+**Option A — copy-in CLI (you own the code):**
+```bash
+npx loomui init
+npx loomui add button dialog data-table
+```
+See `packages/loomui-cli/README.md`. All 64 components were verified to compile standalone (`ngc`, strict templates) after being copied this way.
+
+**Option B — npm package:** `ng build ui` produces `dist/ui` (`@loomui-ng/ui`, one secondary entry point per component, partial-Ivy). In the consumer:
+```css
+@import 'tailwindcss';
+@import '@loomui-ng/ui/styles/loomui.css';   /* tokens, variants, toast css, accent presets, @source for the package */
+```
+Optional peers: `embla-carousel` (Carousel), `chart.js` (Chart), `@tanstack/angular-table` (Data Table recipe). Not published to a registry yet.
+
+## Required setup (only when wiring Tailwind manually — Options A/B already include it) (see `projects/playground/src/styles.css`)
+1. Tailwind v4 (`@import 'tailwindcss'`), `tw-animate-css`, and the design tokens (`--background`, `--primary`, `--radius`, …, `.dark` class).
+2. `@source` pointing at `libs/ui` so Tailwind scans the class strings.
+3. Custom variants that map the `data-open:`/`data-checked:`-style classes onto Radix-style `data-state` attributes:
+   `data-open`, `data-closed`, `data-checked`, `data-unchecked`, `data-active`, `data-inactive`, `data-horizontal`, `data-vertical`.
+4. `@import '@angular/cdk/overlay-prebuilt.css'` and the backdrop override `.cdk-overlay-backdrop[data-slot]{opacity:1;transition:none}` (Dialog, Sheet, Popover, Tooltip, Dropdown Menu, Select).
+5. `libs/ui/toast/toast.css` for `<ui-toaster>`; `.no-scrollbar` utility for Command; `@keyframes caret-blink` + `--animate-caret-blink` for Input OTP.
+6. Chart/Sidebar tokens: `--chart-1..5` and `--sidebar*` (light + dark) with matching `--color-*` entries in `@theme inline`.
+7. Extra dependencies per component: `embla-carousel` (Carousel), `chart.js` (Chart), `@tanstack/angular-table` (Data Table recipe), `class-variance-authority`, `clsx`, `tailwind-merge`, `tw-animate-css`, `@angular/cdk`.
+
+## Custom elements
+Every directive also exists as a custom element: `<button uiButton>` → `<ui-button>`, `<div uiDialogContent>` → `<ui-dialog-content>`, `<table uiTable>` → `<ui-table>` (a hyphen is required for custom elements, so it is `ui-` and not `<Button>`). Directives are unchanged and can be mixed freely. Native controls get wrapper elements (`<ui-input>`, `<ui-textarea>`, `<ui-native-select>`, …) that work with `ngModel`/reactive forms. A shared host directive restores roles, tab stops, Enter/Space activation and `disabled` on the elements. Spec: `docs/behavior-specs/custom-elements.md`. Limits: `<ui-button>` does not submit a `<form>` (use `(click)`).
+
+## Icons
+Lucide icons: `<ui-icon [icon]="Search" />` or `<svg uiIcon [icon]="Search">` (`npx loomui add icon`, peer dependency `lucide`). See `libs/ui/icon/README.md`; browse and copy at the showcase's **/icons** page.
+
+## Conventions
+- Every directive accepts `class`, merged with `tailwind-merge` (`cn()`); the directive owns the whole `class` attribute, so avoid `[class.x]` bindings on the same element.
+- Overlay roots (`uiDialog`, `uiPopover`, …) are state holders: put `class="contents"` on them. Their content element is declared inline and moved into a CDK overlay while open (it stays in the DOM, hidden, otherwise).
+- `data-slot` / `data-state` / `data-side` / `data-variant` attributes match the observed live site. When two directives share an element (e.g. `uiButton` + `uiDialogTrigger`) the Button's `data-slot="button"` wins, as on the live site.
+- Form controls: Input/Label are native elements; Checkbox, Switch and Select implement `ControlValueAccessor` and expose `checked`/`value` models plus `disabled`/`invalid` inputs shaped for Angular signal forms (not yet exercised with `[field]`).
+
+## Status
+All 64 components of the docs sidebar are implemented; see each folder's README and `docs/behavior-specs/`.
+See `docs/FINAL-REPORT.md`.

package/accordion/README.md

@@ -0,0 +1,38 @@
+# Accordion
+
+```ts
+import { UI_ACCORDION } from '@loomui-ng/ui/accordion';
+// add to the component `imports` array
+```
+
+```html
+<div uiAccordion type="single" [collapsible]="true">
+  <div uiAccordionItem value="a">
+    <button uiAccordionTrigger>Is it accessible?</button>
+    <div uiAccordionContent>Yes.</div>
+  </div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-accordion type="single" [collapsible]="true">
+  <ui-accordion-item value="a">
+    <ui-accordion-trigger>Is it accessible?</ui-accordion-trigger>
+    <ui-accordion-content>Yes.</ui-accordion-content>
+  </ui-accordion-item>
+</ui-accordion>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `type` | `'single' \| 'multiple'` | `'single'` |
+| `collapsible` |  | `true` |
+| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` |
+| `value` (model) | `string[]` | `[]` |
+| `disabled` |  | `false` |
+
+Parts (selectors): `[uiAccordion], ui-accordion`, `[uiAccordionItem], ui-accordion-item`, `button[uiAccordionTrigger], ui-accordion-trigger`, `[uiAccordionContent], ui-accordion-content`.
+
+Spec: `docs/behavior-specs/accordion.md` · Manual test: `docs/manual-tests/accordion.md`

package/alert/README.md

@@ -0,0 +1,32 @@
+# Alert
+
+```ts
+import { UI_ALERT_GENERATED } from '@loomui-ng/ui/alert';
+// add to the component `imports` array
+```
+
+```html
+<div uiAlert variant="destructive">
+  <svg …></svg>
+  <div uiAlertTitle>Error</div>
+  <div uiAlertDescription>Your session expired.</div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-alert variant="destructive">
+  <svg …></svg>
+  <ui-alert-title>Error</ui-alert-title>
+  <ui-alert-description>Your session expired.</ui-alert-description>
+</ui-alert>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `variant` | `'default' \| 'destructive'` | `'default'` |
+
+Parts (selectors): `[uiAlert], ui-alert`, `[uiAlertTitle], ui-alert-title`, `[uiAlertDescription], ui-alert-description`, `[uiAlertAction], ui-alert-action`.
+
+Spec: `docs/behavior-specs/alert.md` · Manual test: `docs/manual-tests/alert.md`

package/alert-dialog/README.md

@@ -0,0 +1,37 @@
+# Alert Dialog
+
+```ts
+import { UI_ALERT_DIALOG } from '@loomui-ng/ui/alert-dialog';
+// add to the component `imports` array
+```
+
+```html
+<div uiAlertDialog>
+  <button uiButton uiAlertDialogTrigger>Delete</button>
+  <div uiAlertDialogContent>
+    <div uiAlertDialogHeader><h2 uiAlertDialogTitle>Are you sure?</h2><p uiAlertDialogDescription>This cannot be undone.</p></div>
+    <div uiAlertDialogFooter><button uiAlertDialogCancel>Cancel</button><button uiAlertDialogAction>Continue</button></div>
+  </div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-alert-dialog>
+  <ui-button uiAlertDialogTrigger>Delete</ui-button>
+  <ui-alert-dialog-content>
+    <ui-alert-dialog-header><ui-alert-dialog-title>Are you sure?</ui-alert-dialog-title><ui-alert-dialog-description>This cannot be undone.</ui-alert-dialog-description></ui-alert-dialog-header>
+    <ui-alert-dialog-footer><ui-alert-dialog-cancel>Cancel</ui-alert-dialog-cancel><ui-alert-dialog-action>Continue</ui-alert-dialog-action></ui-alert-dialog-footer>
+  </ui-alert-dialog-content>
+</ui-alert-dialog>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `size` | `'default' \| 'sm'` | `'default'` |
+| `disabled` |  | `false` |
+
+Parts (selectors): `[uiAlertDialog], ui-alert-dialog`, `[uiAlertDialogTrigger], ui-alert-dialog-trigger`, `[uiAlertDialogContent], ui-alert-dialog-content`, `[uiAlertDialogHeader], ui-alert-dialog-header`, `[uiAlertDialogFooter], ui-alert-dialog-footer`, `[uiAlertDialogTitle], ui-alert-dialog-title`, `[uiAlertDialogDescription], ui-alert-dialog-description`, `button[uiAlertDialogCancel], ui-alert-dialog-cancel`, `button[uiAlertDialogAction], ui-alert-dialog-action`.
+
+Spec: `docs/behavior-specs/alert-dialog.md` · Manual test: `docs/manual-tests/alert-dialog.md`

package/aspect-ratio/README.md

@@ -0,0 +1,24 @@
+# Aspect Ratio
+
+```ts
+import { UI_ASPECT_RATIO } from '@loomui-ng/ui/aspect-ratio';
+// add to the component `imports` array
+```
+
+```html
+<div uiAspectRatio [ratio]="16 / 9" class="rounded-lg bg-muted">…</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-aspect-ratio [ratio]="16 / 9" class="rounded-lg bg-muted">…</ui-aspect-ratio>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `ratio` |  | `1` |
+
+Parts (selectors): `[uiAspectRatio], ui-aspect-ratio`.
+
+Spec: `docs/behavior-specs/aspect-ratio.md` · Manual test: `docs/manual-tests/aspect-ratio.md`

package/attachment/README.md

@@ -0,0 +1,40 @@
+# Attachment
+
+```ts
+import { UI_ATTACHMENT } from '@loomui-ng/ui/attachment';
+// add to the component `imports` array
+```
+
+```html
+<div uiAttachmentGroup>
+  <div uiAttachment>
+    <a uiAttachmentTrigger href="/files/a.png" aria-label="Open a.png"></a>
+    <div uiAttachmentContent><span uiAttachmentTitle>a.png</span><span uiAttachmentDescription>24 KB</span></div>
+    <button uiAttachmentAction aria-label="Remove a.png">×</button>
+  </div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-attachment-group>
+  <ui-attachment>
+    <ui-attachment-trigger href="/files/a.png" aria-label="Open a.png"></ui-attachment-trigger>
+    <ui-attachment-content><ui-attachment-title>a.png</ui-attachment-title><ui-attachment-description>24 KB</ui-attachment-description></ui-attachment-content>
+    <ui-attachment-action aria-label="Remove a.png">×</ui-attachment-action>
+  </ui-attachment>
+</ui-attachment-group>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `disabled` |  | `false` |
+| `state` | `'idle' \| 'uploading' \| 'processing' \| 'done'` | `'done'` |
+| `size` | `'default' \| 'sm' \| 'xs'` | `'default'` |
+| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` |
+| `variant` | `'image' \| 'icon'` | `'icon'` |
+
+Parts (selectors): `a[uiAttachmentTrigger], button[uiAttachmentTrigger], ui-attachment-trigger`, `button[uiAttachmentAction], ui-attachment-action`, `[uiAttachmentGroup], ui-attachment-group`, `[uiAttachment], ui-attachment`, `[uiAttachmentMedia], ui-attachment-media`, `[uiAttachmentContent], ui-attachment-content`, `span[uiAttachmentTitle], ui-attachment-title`, `span[uiAttachmentDescription], ui-attachment-description`, `[uiAttachmentActions], ui-attachment-actions`.
+
+Spec: `docs/behavior-specs/attachment.md` · Manual test: `docs/manual-tests/attachment.md`

package/avatar/README.md

@@ -0,0 +1,34 @@
+# Avatar
+
+```ts
+import { UI_AVATAR } from '@loomui-ng/ui/avatar';
+// add to the component `imports` array
+```
+
+```html
+<span uiAvatar>
+  <img uiAvatarImage src="/me.png" alt="Me" />
+  <span uiAvatarFallback>CN</span>
+</span>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-avatar>
+  <ui-avatar-image src="/me.png" alt="Me" />
+  <ui-avatar-fallback>CN</ui-avatar-fallback>
+</ui-avatar>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `size` | `'default' \| 'sm' \| 'lg'` | `'default'` |
+| `src` | `string` | `''` |
+| `alt` | `string` | `''` |
+| `srcset` | `string` | `''` |
+| `sizes` | `string` | `''` |
+
+Parts (selectors): `[uiAvatar], ui-avatar`, `img[uiAvatarImage]`, `[uiAvatarFallback], ui-avatar-fallback`, `ui-avatar-image`, `[uiAvatarBadge], ui-avatar-badge`, `[uiAvatarGroup], ui-avatar-group`, `[uiAvatarGroupCount], ui-avatar-group-count`.
+
+Spec: `docs/behavior-specs/avatar.md` · Manual test: `docs/manual-tests/avatar.md`

package/badge/README.md

@@ -0,0 +1,29 @@
+# uiBadge
+
+```ts
+import { UiBadge } from '@loomui-ng/ui/badge';
+// add to the component imports array
+```
+
+```html
+<span uiBadge>New</span>
+<span uiBadge variant="secondary">Beta</span>
+<a uiBadge variant="outline" href="/changelog">v1.2</a>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-badge>New</ui-badge>
+<ui-badge variant="secondary">Beta</ui-badge>
+<ui-badge variant="outline" href="/changelog">v1.2</ui-badge>
+```
+
+| Input | Values | Default |
+|---|---|---|
+| `variant` | `default` `secondary` `destructive` `outline` `ghost` | `default` |
+| `class` | extra classes (tailwind-merge) | - |
+
+Deviation: ps-/pe- instead of pl-/pr-.
+
+Spec: docs/behavior-specs/badge.md - Manual checks: docs/manual-tests/badge.md

package/breadcrumb/README.md

@@ -0,0 +1,33 @@
+# Breadcrumb
+
+```ts
+import { UI_BREADCRUMB } from '@loomui-ng/ui/breadcrumb';
+// add to the component `imports` array
+```
+
+```html
+<nav uiBreadcrumb>
+  <ol uiBreadcrumbList>
+    <li uiBreadcrumbItem><a uiBreadcrumbLink href="/">Home</a></li>
+    <li uiBreadcrumbSeparator></li>
+    <li uiBreadcrumbItem><span uiBreadcrumbPage>Components</span></li>
+  </ol>
+</nav>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-breadcrumb>
+  <ui-breadcrumb-list>
+    <ui-breadcrumb-item><ui-breadcrumb-link href="/">Home</ui-breadcrumb-link></ui-breadcrumb-item>
+    <ui-breadcrumb-separator></ui-breadcrumb-separator>
+    <ui-breadcrumb-item><ui-breadcrumb-page>Components</ui-breadcrumb-page></ui-breadcrumb-item>
+  </ui-breadcrumb-list>
+</ui-breadcrumb>
+```
+
+
+Parts (selectors): `li[uiBreadcrumbSeparator], ui-breadcrumb-separator`, `span[uiBreadcrumbEllipsis], ui-breadcrumb-ellipsis`, `nav[uiBreadcrumb], ui-breadcrumb`, `ol[uiBreadcrumbList], ui-breadcrumb-list`, `li[uiBreadcrumbItem], ui-breadcrumb-item`, `a[uiBreadcrumbLink], ui-breadcrumb-link`, `span[uiBreadcrumbPage], ui-breadcrumb-page`.
+
+Spec: `docs/behavior-specs/breadcrumb.md` · Manual test: `docs/manual-tests/breadcrumb.md`

package/bubble/README.md

@@ -0,0 +1,32 @@
+# Bubble
+
+```ts
+import { UI_BUBBLE_GENERATED } from '@loomui-ng/ui/bubble';
+// add to the component `imports` array
+```
+
+```html
+<div uiBubbleGroup>
+  <div uiBubble variant="muted"><div uiBubbleContent>Hello!</div></div>
+  <div uiBubble align="end"><div uiBubbleContent>Hi.</div></div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-bubble-group>
+  <ui-bubble variant="muted"><ui-bubble-content>Hello!</ui-bubble-content></ui-bubble>
+  <ui-bubble align="end"><ui-bubble-content>Hi.</ui-bubble-content></ui-bubble>
+</ui-bubble-group>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `variant` | `'default' \| 'muted' \| 'secondary' \| 'tinted' \| 'outline' \| 'destructive' \| 'ghost'` | `'default'` |
+| `align` | `'end' \| 'start'` | `'start'` |
+| `side` | `'bottom' \| 'top'` | `'bottom'` |
+
+Parts (selectors): `[uiBubble], ui-bubble`, `[uiBubbleContent], ui-bubble-content`, `[uiBubbleGroup], ui-bubble-group`, `[uiBubbleReactions], ui-bubble-reactions`.
+
+Spec: `docs/behavior-specs/bubble.md` · Manual test: `docs/manual-tests/bubble.md`

package/button/README.md

@@ -0,0 +1,31 @@
+# uiButton
+
+Directive that turns a native `<button>` or `<a>` into a shadcn/ui Button.
+
+```ts
+import { UiButton } from '@loomui-ng/ui/button';
+
+@Component({
+  imports: [UiButton],
+  template: `
+    <button uiButton>Default</button>
+    <button uiButton variant="outline" size="sm">Outline</button>
+    <button uiButton variant="destructive" disabled>Delete</button>
+    <a uiButton variant="link" href="/docs">Docs</a>
+  `,
+})
+export class Demo {}
+```
+
+| Input | Values | Default |
+|---|---|---|
+| `variant` | `default` `outline` `secondary` `ghost` `destructive` `link` | `default` |
+| `size` | `default` `xs` `sm` `lg` `icon` `icon-xs` `icon-sm` `icon-lg` | `default` |
+| `class` | extra classes, merged with `tailwind-merge` | — |
+
+Emits `data-slot="button"`, `data-variant`, `data-size`. `buttonVariants()` is exported for styling other elements.
+Icon padding hooks: put `data-icon="inline-start"` / `"inline-end"` on a child icon.
+
+Spec: `docs/behavior-specs/button.md` · Manual checks: `docs/manual-tests/button.md`
+
+Deviations: logical `ps-/pe-` instead of `pl-/pr-`; `sm` height `h-7` is inferred; no `asChild` (use `<a uiButton>`).

package/button-group/README.md

@@ -0,0 +1,30 @@
+# Button Group
+
+```ts
+import { UI_BUTTON_GROUP_GENERATED } from '@loomui-ng/ui/button-group';
+// add to the component `imports` array
+```
+
+```html
+<div uiButtonGroup>
+  <button uiButton variant="outline">Left</button>
+  <button uiButton variant="outline">Right</button>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-button-group>
+  <ui-button variant="outline">Left</ui-button>
+  <ui-button variant="outline">Right</ui-button>
+</ui-button-group>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` |
+
+Parts (selectors): `[uiButtonGroup], ui-button-group`, `[uiButtonGroupSeparator], ui-button-group-separator`.
+
+Spec: `docs/behavior-specs/button-group.md` · Manual test: `docs/manual-tests/button-group.md`

package/calendar/README.md

@@ -0,0 +1,35 @@
+# Calendar
+
+```ts
+import { UI_CALENDAR } from '@loomui-ng/ui/calendar';
+// add to the component `imports` array
+```
+
+```html
+<div uiCalendar mode="single" [(selected)]="date" class="rounded-lg border"></div>
+<div uiCalendar mode="range" [(selected)]="range" [numberOfMonths]="2"></div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-calendar mode="single" [(selected)]="date" class="rounded-lg border"></ui-calendar>
+<ui-calendar mode="range" [(selected)]="range" [numberOfMonths]="2"></ui-calendar>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `mode` | `'single' \| 'multiple' \| 'range'` | `'single'` |
+| `selected` (model) | `CalendarSelection` | `undefined` |
+| `month` (model) | `Date` | `startOfDay(new Date(` |
+| `numberOfMonths` |  | `1` |
+| `showOutsideDays` |  | `true` |
+| `weekStartsOn` |  | `0` |
+| `locale` | `string` | `typeof document !== 'undefined' ? document.documentElement.lang \|\| 'en-US' : 'en-US'` |
+| `minDate` | `Date \| undefined` | `undefined` |
+| `maxDate` | `Date \| undefined` | `undefined` |
+| `required` |  | `false` |
+
+Parts (selectors): `div[uiCalendar], ui-calendar`.
+
+Spec: `docs/behavior-specs/calendar.md` · Manual test: `docs/manual-tests/calendar.md`

package/card/README.md

@@ -0,0 +1,41 @@
+# uiCard
+
+```ts
+import { UI_CARD } from '@loomui-ng/ui/card';
+// add to the component imports array
+```
+
+```html
+<div uiCard size="sm">
+  <div uiCardHeader>
+    <div uiCardTitle>Title</div>
+    <div uiCardDescription>Description</div>
+    <div uiCardAction><button uiButton variant="link">Action</button></div>
+  </div>
+  <div uiCardContent>…</div>
+  <div uiCardFooter>…</div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-card size="sm">
+  <ui-card-header>
+    <ui-card-title>Title</ui-card-title>
+    <ui-card-description>Description</ui-card-description>
+    <ui-card-action><ui-button variant="link">Action</ui-button></ui-card-action>
+  </ui-card-header>
+  <ui-card-content>…</ui-card-content>
+  <ui-card-footer>…</ui-card-footer>
+</ui-card>
+```
+
+| Input | Values | Default |
+|---|---|---|
+| `size` (uiCard) | `default` `sm` | `default` |
+| `class` | extra classes (all parts) | - |
+
+Parts: uiCard, uiCardHeader, uiCardTitle, uiCardDescription, uiCardAction, uiCardContent, uiCardFooter.
+
+Spec: docs/behavior-specs/card.md - Manual checks: docs/manual-tests/card.md

package/carousel/README.md

@@ -0,0 +1,41 @@
+# Carousel
+
+```ts
+import { UI_CAROUSEL } from '@loomui-ng/ui/carousel';
+// add to the component `imports` array
+```
+
+```html
+<div uiCarousel class="mx-auto w-full max-w-xs">
+  <div uiCarouselContent>
+    <div uiCarouselItem>1</div>
+    <div uiCarouselItem>2</div>
+  </div>
+  <button uiCarouselPrevious></button>
+  <button uiCarouselNext></button>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-carousel class="mx-auto w-full max-w-xs">
+  <ui-carousel-content>
+    <ui-carousel-item>1</ui-carousel-item>
+    <ui-carousel-item>2</ui-carousel-item>
+  </ui-carousel-content>
+  <ui-carousel-previous></ui-carousel-previous>
+  <ui-carousel-next></ui-carousel-next>
+</ui-carousel>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `opts` | `Record<string, any>` | `{}` |
+| `plugins` | `any[]` | `[]` |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` |
+| `ready` (output) | `EmblaCarouselType` |  |
+
+Parts (selectors): `div[uiCarousel], ui-carousel`, `div[uiCarouselContent], ui-carousel-content`, `div[uiCarouselItem], ui-carousel-item`, `button[uiCarouselPrevious], ui-carousel-previous`, `button[uiCarouselNext], ui-carousel-next`.
+
+Spec: `docs/behavior-specs/carousel.md` · Manual test: `docs/manual-tests/carousel.md`

package/chart/README.md

@@ -0,0 +1,25 @@
+# Chart
+
+```ts
+import { UI_CHART } from '@loomui-ng/ui/chart';
+// add to the component `imports` array
+```
+
+```html
+<ui-chart type="bar" [data]="rows" xKey="month" [config]="config" class="h-64 w-full" label="Visitors" />
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `type` | `ChartType` | `'bar'` |
+| `data` | `Record<string, unknown>[]` | required |
+| `xKey` | `string` | required |
+| `valueKey` | `string` | `''` |
+| `config` | `ChartConfig` | required |
+| `options` | `Record<string, any>` | `{}` |
+| `showLegend` |  | `true` |
+| `label` |  | `'Chart'` |
+
+Parts (selectors): `ui-chart`.
+
+Spec: `docs/behavior-specs/chart.md` · Manual test: `docs/manual-tests/chart.md`

package/checkbox/README.md

@@ -0,0 +1,31 @@
+# uiCheckbox
+
+```ts
+import { UiCheckbox } from '@loomui-ng/ui/checkbox';
+// add to the component imports array
+```
+
+```html
+<button uiCheckbox [(checked)]="accepted"></button>
+<button uiCheckbox [formControl]="ctrl"></button>
+<button uiCheckbox [indeterminate]="true"></button>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-checkbox [(checked)]="accepted"></ui-checkbox>
+<ui-checkbox [formControl]="ctrl"></ui-checkbox>
+<ui-checkbox [indeterminate]="true"></ui-checkbox>
+```
+
+| Input | Values | Default |
+|---|---|---|
+| `checked` | model boolean | `false` |
+| `indeterminate` | model boolean | `false` |
+| `disabled` / `invalid` | boolean | `false` |
+| `class` | extra classes | - |
+
+Space toggles, Enter does not. ControlValueAccessor + signal-forms compatible shape. Needs the data-checked custom variants from the playground styles.css.
+
+Spec: docs/behavior-specs/checkbox.md - Manual checks: docs/manual-tests/checkbox.md

package/collapsible/README.md

@@ -0,0 +1,31 @@
+# Collapsible
+
+```ts
+import { UI_COLLAPSIBLE } from '@loomui-ng/ui/collapsible';
+// add to the component `imports` array
+```
+
+```html
+<div uiCollapsible [(open)]="open">
+  <button uiCollapsibleTrigger>Toggle</button>
+  <div uiCollapsibleContent>…</div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-collapsible [(open)]="open">
+  <ui-collapsible-trigger>Toggle</ui-collapsible-trigger>
+  <ui-collapsible-content>…</ui-collapsible-content>
+</ui-collapsible>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `open` (model) |  | `false` |
+| `disabled` |  | `false` |
+
+Parts (selectors): `[uiCollapsible], ui-collapsible`, `[uiCollapsibleTrigger], ui-collapsible-trigger`, `[uiCollapsibleContent], ui-collapsible-content`.
+
+Spec: `docs/behavior-specs/collapsible.md` · Manual test: `docs/manual-tests/collapsible.md`