@loomui-ng/ui 0.0.0-stage → 0.1.0

package/native-select/README.md

@@ -0,0 +1,26 @@
+# Native Select
+
+```ts
+import { UI_NATIVE_SELECT } from '@loomui-ng/ui/native-select';
+// add to the component `imports` array
+```
+
+```html
+<div uiNativeSelectWrapper>
+  <select uiNativeSelect><option value="a">A</option></select>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-native-select><option value="a">A</option></ui-native-select>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `size` | `'default' \| 'sm'` | `'default'` |
+
+Parts (selectors): `div[uiNativeSelectWrapper], ui-native-select-wrapper`, `ui-native-select`, `select[uiNativeSelect]`, `option[uiNativeSelectOption]`, `optgroup[uiNativeSelectOptgroup]`.
+
+Spec: `docs/behavior-specs/native-select.md` · Manual test: `docs/manual-tests/native-select.md`

package/navigation-menu/README.md

@@ -0,0 +1,39 @@
+# Navigation Menu
+
+```ts
+import { UI_NAVIGATION_MENU } from '@loomui-ng/ui/navigation-menu';
+// add to the component `imports` array
+```
+
+```html
+<nav uiNavigationMenu>
+  <ul uiNavigationMenuList>
+    <li uiNavigationMenuItem>
+      <button uiNavigationMenuTrigger>Getting started</button>
+      <div uiNavigationMenuContent>…</div>
+    </li>
+  </ul>
+</nav>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-navigation-menu>
+  <ui-navigation-menu-list>
+    <ui-navigation-menu-item>
+      <ui-navigation-menu-trigger>Getting started</ui-navigation-menu-trigger>
+      <ui-navigation-menu-content>…</ui-navigation-menu-content>
+    </ui-navigation-menu-item>
+  </ui-navigation-menu-list>
+</ui-navigation-menu>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `delay` |  | `200` |
+| `active` |  | `false` |
+
+Parts (selectors): `nav[uiNavigationMenu], ui-navigation-menu`, `ul[uiNavigationMenuList], ui-navigation-menu-list`, `li[uiNavigationMenuItem], ui-navigation-menu-item`, `button[uiNavigationMenuTrigger], ui-navigation-menu-trigger`, `[uiNavigationMenuContent], ui-navigation-menu-content`, `a[uiNavigationMenuLink], ui-navigation-menu-link`.
+
+Spec: `docs/behavior-specs/navigation-menu.md` · Manual test: `docs/manual-tests/navigation-menu.md`

package/package.json

@@ -1,6 +1,328 @@
 {
   "name": "@loomui-ng/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Accessible, signal-based Angular components on the CDK — copy them in or install the package. Directives and custom elements.",
+  "license": "MIT",
+  "keywords": [
+    "angular",
+    "components",
+    "ui",
+    "design-system",
+    "tailwind",
+    "signals",
+    "cdk",
+    "accessible",
+    "custom-elements"
+  ],
+  "peerDependencies": {
+    "@angular/cdk": "^22.2.0",
+    "@angular/common": "^22.2.0",
+    "@angular/core": "^22.2.0",
+    "@angular/forms": "^22.2.0",
+    "@angular/platform-browser": "^22.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.0.0",
+    "tw-animate-css": "^1.4.0",
+    "embla-carousel": "^8.0.0",
+    "chart.js": "^4.0.0",
+    "lucide": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "embla-carousel": {
+      "optional": true
+    },
+    "chart.js": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Hkarimi561/loomui.git",
+    "directory": "libs/ui"
+  },
+  "homepage": "https://hkarimi561.github.io/loomui/",
+  "bugs": {
+    "url": "https://github.com/Hkarimi561/loomui/issues"
+  },
+  "module": "fesm2022/loomui-ng-ui.mjs",
+  "typings": "types/loomui-ng-ui.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/loomui-ng-ui.d.ts",
+      "default": "./fesm2022/loomui-ng-ui.mjs"
+    },
+    "./accordion": {
+      "types": "./types/loomui-ng-ui-accordion.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-accordion.mjs"
+    },
+    "./alert": {
+      "types": "./types/loomui-ng-ui-alert.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-alert.mjs"
+    },
+    "./alert-dialog": {
+      "types": "./types/loomui-ng-ui-alert-dialog.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-alert-dialog.mjs"
+    },
+    "./aspect-ratio": {
+      "types": "./types/loomui-ng-ui-aspect-ratio.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-aspect-ratio.mjs"
+    },
+    "./attachment": {
+      "types": "./types/loomui-ng-ui-attachment.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-attachment.mjs"
+    },
+    "./avatar": {
+      "types": "./types/loomui-ng-ui-avatar.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-avatar.mjs"
+    },
+    "./badge": {
+      "types": "./types/loomui-ng-ui-badge.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-badge.mjs"
+    },
+    "./breadcrumb": {
+      "types": "./types/loomui-ng-ui-breadcrumb.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-breadcrumb.mjs"
+    },
+    "./bubble": {
+      "types": "./types/loomui-ng-ui-bubble.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-bubble.mjs"
+    },
+    "./button": {
+      "types": "./types/loomui-ng-ui-button.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-button.mjs"
+    },
+    "./button-group": {
+      "types": "./types/loomui-ng-ui-button-group.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-button-group.mjs"
+    },
+    "./calendar": {
+      "types": "./types/loomui-ng-ui-calendar.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-calendar.mjs"
+    },
+    "./card": {
+      "types": "./types/loomui-ng-ui-card.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-card.mjs"
+    },
+    "./carousel": {
+      "types": "./types/loomui-ng-ui-carousel.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-carousel.mjs"
+    },
+    "./chart": {
+      "types": "./types/loomui-ng-ui-chart.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-chart.mjs"
+    },
+    "./checkbox": {
+      "types": "./types/loomui-ng-ui-checkbox.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-checkbox.mjs"
+    },
+    "./collapsible": {
+      "types": "./types/loomui-ng-ui-collapsible.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-collapsible.mjs"
+    },
+    "./combobox": {
+      "types": "./types/loomui-ng-ui-combobox.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-combobox.mjs"
+    },
+    "./command": {
+      "types": "./types/loomui-ng-ui-command.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-command.mjs"
+    },
+    "./context-menu": {
+      "types": "./types/loomui-ng-ui-context-menu.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-context-menu.mjs"
+    },
+    "./data-table": {
+      "types": "./types/loomui-ng-ui-data-table.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-data-table.mjs"
+    },
+    "./date-picker": {
+      "types": "./types/loomui-ng-ui-date-picker.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-date-picker.mjs"
+    },
+    "./dialog": {
+      "types": "./types/loomui-ng-ui-dialog.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-dialog.mjs"
+    },
+    "./direction": {
+      "types": "./types/loomui-ng-ui-direction.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-direction.mjs"
+    },
+    "./drawer": {
+      "types": "./types/loomui-ng-ui-drawer.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-drawer.mjs"
+    },
+    "./dropdown-menu": {
+      "types": "./types/loomui-ng-ui-dropdown-menu.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-dropdown-menu.mjs"
+    },
+    "./empty": {
+      "types": "./types/loomui-ng-ui-empty.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-empty.mjs"
+    },
+    "./field": {
+      "types": "./types/loomui-ng-ui-field.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-field.mjs"
+    },
+    "./hover-card": {
+      "types": "./types/loomui-ng-ui-hover-card.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-hover-card.mjs"
+    },
+    "./icon": {
+      "types": "./types/loomui-ng-ui-icon.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-icon.mjs"
+    },
+    "./input": {
+      "types": "./types/loomui-ng-ui-input.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-input.mjs"
+    },
+    "./input-group": {
+      "types": "./types/loomui-ng-ui-input-group.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-input-group.mjs"
+    },
+    "./input-otp": {
+      "types": "./types/loomui-ng-ui-input-otp.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-input-otp.mjs"
+    },
+    "./item": {
+      "types": "./types/loomui-ng-ui-item.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-item.mjs"
+    },
+    "./kbd": {
+      "types": "./types/loomui-ng-ui-kbd.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-kbd.mjs"
+    },
+    "./label": {
+      "types": "./types/loomui-ng-ui-label.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-label.mjs"
+    },
+    "./marker": {
+      "types": "./types/loomui-ng-ui-marker.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-marker.mjs"
+    },
+    "./menubar": {
+      "types": "./types/loomui-ng-ui-menubar.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-menubar.mjs"
+    },
+    "./message": {
+      "types": "./types/loomui-ng-ui-message.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-message.mjs"
+    },
+    "./message-scroller": {
+      "types": "./types/loomui-ng-ui-message-scroller.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-message-scroller.mjs"
+    },
+    "./native-select": {
+      "types": "./types/loomui-ng-ui-native-select.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-native-select.mjs"
+    },
+    "./navigation-menu": {
+      "types": "./types/loomui-ng-ui-navigation-menu.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-navigation-menu.mjs"
+    },
+    "./pagination": {
+      "types": "./types/loomui-ng-ui-pagination.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-pagination.mjs"
+    },
+    "./popover": {
+      "types": "./types/loomui-ng-ui-popover.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-popover.mjs"
+    },
+    "./progress": {
+      "types": "./types/loomui-ng-ui-progress.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-progress.mjs"
+    },
+    "./questionnaire": {
+      "types": "./types/loomui-ng-ui-questionnaire.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-questionnaire.mjs"
+    },
+    "./radio-group": {
+      "types": "./types/loomui-ng-ui-radio-group.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-radio-group.mjs"
+    },
+    "./resizable": {
+      "types": "./types/loomui-ng-ui-resizable.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-resizable.mjs"
+    },
+    "./scroll-area": {
+      "types": "./types/loomui-ng-ui-scroll-area.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-scroll-area.mjs"
+    },
+    "./select": {
+      "types": "./types/loomui-ng-ui-select.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-select.mjs"
+    },
+    "./separator": {
+      "types": "./types/loomui-ng-ui-separator.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-separator.mjs"
+    },
+    "./sheet": {
+      "types": "./types/loomui-ng-ui-sheet.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-sheet.mjs"
+    },
+    "./sidebar": {
+      "types": "./types/loomui-ng-ui-sidebar.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-sidebar.mjs"
+    },
+    "./skeleton": {
+      "types": "./types/loomui-ng-ui-skeleton.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-skeleton.mjs"
+    },
+    "./slider": {
+      "types": "./types/loomui-ng-ui-slider.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-slider.mjs"
+    },
+    "./spinner": {
+      "types": "./types/loomui-ng-ui-spinner.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-spinner.mjs"
+    },
+    "./switch": {
+      "types": "./types/loomui-ng-ui-switch.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-switch.mjs"
+    },
+    "./table": {
+      "types": "./types/loomui-ng-ui-table.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-table.mjs"
+    },
+    "./tabs": {
+      "types": "./types/loomui-ng-ui-tabs.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-tabs.mjs"
+    },
+    "./textarea": {
+      "types": "./types/loomui-ng-ui-textarea.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-textarea.mjs"
+    },
+    "./toast": {
+      "types": "./types/loomui-ng-ui-toast.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-toast.mjs"
+    },
+    "./toggle": {
+      "types": "./types/loomui-ng-ui-toggle.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-toggle.mjs"
+    },
+    "./toggle-group": {
+      "types": "./types/loomui-ng-ui-toggle-group.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-toggle-group.mjs"
+    },
+    "./tooltip": {
+      "types": "./types/loomui-ng-ui-tooltip.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-tooltip.mjs"
+    },
+    "./typography": {
+      "types": "./types/loomui-ng-ui-typography.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-typography.mjs"
+    },
+    "./utils": {
+      "types": "./types/loomui-ng-ui-utils.d.ts",
+      "default": "./fesm2022/loomui-ng-ui-utils.mjs"
+    }
+  },
+  "type": "module"
 }

package/pagination/README.md

@@ -0,0 +1,37 @@
+# Pagination
+
+```ts
+import { UI_PAGINATION } from '@loomui-ng/ui/pagination';
+// add to the component `imports` array
+```
+
+```html
+<nav uiPagination>
+  <ul uiPaginationContent>
+    <li uiPaginationItem><a uiPaginationPrevious href="#"></a></li>
+    <li uiPaginationItem><a uiPaginationLink href="#" [isActive]="true">1</a></li>
+    <li uiPaginationItem><a uiPaginationNext href="#"></a></li>
+  </ul>
+</nav>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-pagination>
+  <ui-pagination-content>
+    <ui-pagination-item><ui-pagination-previous href="#"></ui-pagination-previous></ui-pagination-item>
+    <ui-pagination-item><ui-pagination-link href="#" [isActive]="true">1</ui-pagination-link></ui-pagination-item>
+    <ui-pagination-item><ui-pagination-next href="#"></ui-pagination-next></ui-pagination-item>
+  </ui-pagination-content>
+</ui-pagination>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `isActive` |  | `false` |
+| `size` | `LinkSize` | `'icon'` |
+
+Parts (selectors): `a[uiPaginationLink], ui-pagination-link`, `a[uiPaginationPrevious], ui-pagination-previous`, `a[uiPaginationNext], ui-pagination-next`, `span[uiPaginationEllipsis], ui-pagination-ellipsis`, `nav[uiPagination], ui-pagination`, `ul[uiPaginationContent], ui-pagination-content`, `li[uiPaginationItem], ui-pagination-item`.
+
+Spec: `docs/behavior-specs/pagination.md` · Manual test: `docs/manual-tests/pagination.md`

package/popover/README.md

@@ -0,0 +1,37 @@
+# uiPopover
+
+```ts
+import { UI_POPOVER } from '@loomui-ng/ui/popover';
+// add to the component imports array
+```
+
+```html
+<div uiPopover class="contents">
+  <button uiButton uiPopoverTrigger>Open</button>
+  <div uiPopoverContent side="bottom" align="center">
+    <div uiPopoverHeader><div uiPopoverTitle>Title</div><p uiPopoverDescription>Text</p></div>
+  </div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-popover class="contents">
+  <ui-button uiPopoverTrigger>Open</ui-button>
+  <ui-popover-content side="bottom" align="center">
+    <ui-popover-header><ui-popover-title>Title</ui-popover-title><ui-popover-description>Text</ui-popover-description></ui-popover-header>
+  </ui-popover-content>
+</ui-popover>
+```
+
+| Input | Values | Default |
+|---|---|---|
+| `open` (uiPopover) | model boolean | `false` |
+| `side` | `top` `right` `bottom` `left` | `bottom` |
+| `align` | `start` `center` `end` | `center` |
+| `sideOffset` | px | `4` |
+
+Non-modal. Focus moves into the content; Esc and outside click close and return focus to the trigger.
+
+Spec: docs/behavior-specs/popover.md - Manual checks: docs/manual-tests/popover.md

package/progress/README.md

@@ -0,0 +1,25 @@
+# Progress
+
+```ts
+import { UI_PROGRESS } from '@loomui-ng/ui/progress';
+// add to the component `imports` array
+```
+
+```html
+<div uiProgress [value]="60"></div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-progress [value]="60"></ui-progress>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `value` | `number \| null, unknown` | `null` |
+| `max` |  | `100` |
+
+Parts (selectors): `div[uiProgress], ui-progress`.
+
+Spec: `docs/behavior-specs/progress.md` · Manual test: `docs/manual-tests/progress.md`

package/questionnaire/README.md

@@ -0,0 +1,52 @@
+# Questionnaire
+
+```ts
+import { UI_QUESTIONNAIRE } from '@loomui-ng/ui/questionnaire';
+// add to the component `imports` array
+```
+
+```html
+<form uiQuestionnaire #q="uiQuestionnaire" (submitted)="save($event)">
+  <div uiQuestionnaireProgress></div>
+  <fieldset uiQuestionnaireItem name="plan" required>
+    <legend uiQuestionnaireTitle>Pick a plan</legend>
+    <div uiQuestionnaireChoices><label uiQuestionnaireChoice value="free">Free</label></div>
+  </fieldset>
+  <div uiQuestionnaireActions>
+    <button type="button" (click)="q.previous()">Back</button>
+    <button type="button" (click)="q.next()">Next</button>
+  </div>
+</form>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-questionnaire #q="uiQuestionnaire" (submitted)="save($event)">
+  <ui-questionnaire-progress></ui-questionnaire-progress>
+  <ui-questionnaire-item name="plan" required>
+    <ui-questionnaire-title>Pick a plan</ui-questionnaire-title>
+    <ui-questionnaire-choices><ui-questionnaire-choice value="free">Free</ui-questionnaire-choice></ui-questionnaire-choices>
+  </ui-questionnaire-item>
+  <ui-questionnaire-actions>
+    <button type="button" (click)="q.previous()">Back</button>
+    <button type="button" (click)="q.next()">Next</button>
+  </ui-questionnaire-actions>
+</ui-questionnaire>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `current` (model) |  | `0` |
+| `shortcuts` |  | `true` |
+| `submitted` (output) | `Record<string, string \| string[]>` |  |
+| `name` | `string` | `''` |
+| `required` |  | `false` |
+| `multiple` |  | `false` |
+| `value` | `string` | required |
+| `shortcut` | `string` | `''` |
+| `placeholder` |  | `''` |
+
+Parts (selectors): `form[uiQuestionnaire], ui-questionnaire`, `div[uiQuestionnaireProgress], ui-questionnaire-progress`, `fieldset[uiQuestionnaireItem], ui-questionnaire-item`, `legend[uiQuestionnaireTitle], ui-questionnaire-title`, `p[uiQuestionnaireDescription], ui-questionnaire-description`, `div[uiQuestionnaireChoices], ui-questionnaire-choices`, `label[uiQuestionnaireChoice], ui-questionnaire-choice`, `div[uiQuestionnaireInput], ui-questionnaire-input`, `div[uiQuestionnaireActions], ui-questionnaire-actions`.
+
+Spec: `docs/behavior-specs/questionnaire.md` · Manual test: `docs/manual-tests/questionnaire.md`

package/radio-group/README.md

@@ -0,0 +1,33 @@
+# Radio Group
+
+```ts
+import { UI_RADIO_GROUP } from '@loomui-ng/ui/radio-group';
+// add to the component `imports` array
+```
+
+```html
+<div uiRadioGroup [(value)]="plan">
+  <button uiRadioGroupItem value="a" id="a"></button><label uiLabel for="a">A</label>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-radio-group [(value)]="plan">
+  <ui-radio-group-item value="a" id="a"></ui-radio-group-item><ui-label for="a">A</ui-label>
+</ui-radio-group>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `value` (model) | `string` | `''` |
+| `required` |  | `false` |
+| `disabled` |  | `false` |
+| `orientation` | `'vertical' \| 'horizontal' \| undefined` | `undefined` |
+| `disabledInput` |  | `false` |
+| `invalid` |  | `false` |
+
+Parts (selectors): `[uiRadioGroup], ui-radio-group`, `button[uiRadioGroupItem], ui-radio-group-item`.
+
+Spec: `docs/behavior-specs/radio-group.md` · Manual test: `docs/manual-tests/radio-group.md`

package/resizable/README.md

@@ -0,0 +1,37 @@
+# Resizable
+
+```ts
+import { UI_RESIZABLE } from '@loomui-ng/ui/resizable';
+// add to the component `imports` array
+```
+
+```html
+<div uiResizablePanelGroup direction="horizontal" class="h-40 rounded-lg border">
+  <div uiResizablePanel [defaultSize]="50">A</div>
+  <div uiResizableHandle [withHandle]="true"></div>
+  <div uiResizablePanel [defaultSize]="50">B</div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-resizable-panel-group direction="horizontal" class="h-40 rounded-lg border">
+  <ui-resizable-panel [defaultSize]="50">A</ui-resizable-panel>
+  <ui-resizable-handle [withHandle]="true"></ui-resizable-handle>
+  <ui-resizable-panel [defaultSize]="50">B</ui-resizable-panel>
+</ui-resizable-panel-group>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` |
+| `defaultSize` | `number \| undefined, unknown` | `undefined` |
+| `minSize` |  | `0` |
+| `maxSize` |  | `100` |
+| `withHandle` |  | `false` |
+| `keyboardStep` |  | `10` |
+
+Parts (selectors): `[uiResizablePanelGroup], ui-resizable-panel-group`, `[uiResizablePanel], ui-resizable-panel`, `[uiResizableHandle], ui-resizable-handle`.
+
+Spec: `docs/behavior-specs/resizable.md` · Manual test: `docs/manual-tests/resizable.md`

package/scroll-area/README.md

@@ -0,0 +1,25 @@
+# Scroll Area
+
+```ts
+import { UI_SCROLL_AREA } from '@loomui-ng/ui/scroll-area';
+// add to the component `imports` array
+```
+
+```html
+<div uiScrollArea class="h-48 w-64">
+  <div uiScrollAreaViewport>…long content…</div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-scroll-area class="h-48 w-64">
+  <ui-scroll-area-viewport>…long content…</ui-scroll-area-viewport>
+</ui-scroll-area>
+```
+
+
+Parts (selectors): `[uiScrollArea], ui-scroll-area`, `[uiScrollAreaViewport], ui-scroll-area-viewport`.
+
+Spec: `docs/behavior-specs/scroll-area.md` · Manual test: `docs/manual-tests/scroll-area.md`