@loomui-ng/ui 0.0.0-stage → 0.1.1

package/select/README.md

@@ -0,0 +1,45 @@
+# uiSelect
+
+```ts
+import { UI_SELECT } from '@loomui-ng/ui/select';
+// add to the component imports array
+```
+
+```html
+<div uiSelect [(value)]="fruit" class="contents">
+  <button uiSelectTrigger class="w-[180px]"><span uiSelectValue placeholder="Select a fruit"></span></button>
+  <div uiSelectContent>
+    <div uiSelectGroup>
+      <div uiSelectLabel>Fruits</div>
+      <div uiSelectItem value="apple">Apple</div>
+      <div uiSelectItem value="grapes" disabled>Grapes</div>
+    </div>
+  </div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-select [(value)]="fruit" class="contents">
+  <ui-select-trigger class="w-[180px]"><ui-select-value placeholder="Select a fruit"></ui-select-value></ui-select-trigger>
+  <ui-select-content>
+    <ui-select-group>
+      <ui-select-label>Fruits</ui-select-label>
+      <ui-select-item value="apple">Apple</ui-select-item>
+      <ui-select-item value="grapes" disabled>Grapes</ui-select-item>
+    </ui-select-group>
+  </ui-select-content>
+</ui-select>
+```
+
+| Input | Values | Default |
+|---|---|---|
+| `value` | model string | `''` |
+| `disabled` / `invalid` | boolean | `false` |
+| `size` (trigger) | `default` `sm` | `default` |
+| `placeholder` (uiSelectValue) | string | `''` |
+
+Also works with ngModel / reactive forms (ControlValueAccessor). Always wrap items in uiSelectGroup (it supplies the padding, like shadcn). Opens below the trigger (no item-aligned mode).
+
+Spec: docs/behavior-specs/select.md - Manual checks: docs/manual-tests/select.md

package/separator/README.md

@@ -0,0 +1,28 @@
+# uiSeparator
+
+```ts
+import { UiSeparator } from '@loomui-ng/ui/separator';
+// add to the component imports array
+```
+
+```html
+<div uiSeparator></div>
+<div uiSeparator orientation="vertical"></div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-separator></ui-separator>
+<ui-separator orientation="vertical"></ui-separator>
+```
+
+| Input | Values | Default |
+|---|---|---|
+| `orientation` | `horizontal` `vertical` | `horizontal` |
+| `decorative` | boolean | `true` (role=none) |
+| `class` | extra classes | - |
+
+decorative=false gives role=separator.
+
+Spec: docs/behavior-specs/separator.md - Manual checks: docs/manual-tests/separator.md

package/sheet/README.md

@@ -0,0 +1,38 @@
+# uiSheet
+
+```ts
+import { UI_SHEET } from '@loomui-ng/ui/sheet';
+// add to the component imports array
+```
+
+```html
+<div uiSheet class="contents">
+  <button uiButton uiSheetTrigger>Open</button>
+  <div uiSheetContent side="right">
+    <div uiSheetHeader><h2 uiSheetTitle>Title</h2><p uiSheetDescription>Description</p></div>
+    <div uiSheetFooter><button uiButton uiSheetClose>Close</button></div>
+  </div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-sheet class="contents">
+  <ui-button uiSheetTrigger>Open</ui-button>
+  <ui-sheet-content side="right">
+    <ui-sheet-header><ui-sheet-title>Title</ui-sheet-title><ui-sheet-description>Description</ui-sheet-description></ui-sheet-header>
+    <ui-sheet-footer><ui-button uiSheetClose>Close</ui-button></ui-sheet-footer>
+  </ui-sheet-content>
+</ui-sheet>
+```
+
+| Input | Values | Default |
+|---|---|---|
+| `open` (uiSheet) | model boolean | `false` |
+| `side` (uiSheetContent) | `top` `right` `bottom` `left` | `right` |
+| `showCloseButton` | boolean | `true` |
+
+Same engine as Dialog (shared UiModalRoot).
+
+Spec: docs/behavior-specs/sheet.md - Manual checks: docs/manual-tests/sheet.md

package/sidebar/README.md

@@ -0,0 +1,60 @@
+# Sidebar
+
+```ts
+import { UI_SIDEBAR } from '@loomui-ng/ui/sidebar';
+// add to the component `imports` array
+```
+
+```html
+<div uiSidebarProvider>
+  <aside uiSidebar collapsible="icon">
+    <div uiSidebarContent>
+      <div uiSidebarGroup>
+        <div uiSidebarGroupLabel>Platform</div>
+        <ul uiSidebarMenu>
+          <li uiSidebarMenuItem><a uiSidebarMenuButton [isActive]="true" href="#">Home</a></li>
+        </ul>
+      </div>
+    </div>
+    <button uiSidebarRail></button>
+  </aside>
+  <main uiSidebarInset><button uiSidebarTrigger></button>…</main>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-sidebar-provider>
+  <ui-sidebar collapsible="icon">
+    <ui-sidebar-content>
+      <ui-sidebar-group>
+        <ui-sidebar-group-label>Platform</ui-sidebar-group-label>
+        <ui-sidebar-menu>
+          <ui-sidebar-menu-item><ui-sidebar-menu-button [isActive]="true" href="#">Home</ui-sidebar-menu-button></ui-sidebar-menu-item>
+        </ui-sidebar-menu>
+      </ui-sidebar-group>
+    </ui-sidebar-content>
+    <ui-sidebar-rail></ui-sidebar-rail>
+  </ui-sidebar>
+  <ui-sidebar-inset><ui-sidebar-trigger></ui-sidebar-trigger>…</ui-sidebar-inset>
+</ui-sidebar-provider>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `open` (model) |  | `true` |
+| `openMobile` (model) |  | `false` |
+| `width` |  | `'16rem'` |
+| `shortcut` |  | `'b'` |
+| `side` | `'left' \| 'right'` | `'left'` |
+| `variant` | `'sidebar' \| 'floating' \| 'inset'` | `'sidebar'` |
+| `collapsible` | `'offcanvas' \| 'icon' \| 'none'` | `'offcanvas'` |
+| `disabled` |  | `false` |
+| `isActive` |  | `false` |
+| `size` | `'default' \| 'sm' \| 'lg'` | `'default'` |
+| `tooltip` | `string` | `''` |
+
+Parts (selectors): `[uiSidebarProvider], ui-sidebar-provider`, `[uiSidebar], ui-sidebar`, `button[uiSidebarTrigger], ui-sidebar-trigger`, `button[uiSidebarRail], ui-sidebar-rail`, `[uiSidebarInset], ui-sidebar-inset`, `[uiSidebarHeader], ui-sidebar-header`, `[uiSidebarFooter], ui-sidebar-footer`, `[uiSidebarContent], ui-sidebar-content`, `[uiSidebarSeparator], ui-sidebar-separator`, `[uiSidebarGroup], ui-sidebar-group`, `[uiSidebarGroupLabel], ui-sidebar-group-label`, `button[uiSidebarGroupAction], ui-sidebar-group-action`, `[uiSidebarGroupContent], ui-sidebar-group-content`, `ul[uiSidebarMenu], ui-sidebar-menu`, `li[uiSidebarMenuItem], ui-sidebar-menu-item`, `button[uiSidebarMenuAction], ui-sidebar-menu-action`, `[uiSidebarMenuBadge], ui-sidebar-menu-badge`, `ul[uiSidebarMenuSub], ui-sidebar-menu-sub`, `li[uiSidebarMenuSubItem], ui-sidebar-menu-sub-item`, `button[uiSidebarMenuButton], a[uiSidebarMenuButton], ui-sidebar-menu-button`, `a[uiSidebarMenuSubButton], button[uiSidebarMenuSubButton], ui-sidebar-menu-sub-button`.
+
+Requires the `--sidebar-*` tokens (see the playground `styles.css`). Spec: `docs/behavior-specs/sidebar.md` · Manual test: `docs/manual-tests/sidebar.md`

package/skeleton/README.md

@@ -0,0 +1,21 @@
+# Skeleton
+
+```ts
+import { UI_SKELETON_GENERATED } from '@loomui-ng/ui/skeleton';
+// add to the component `imports` array
+```
+
+```html
+<div uiSkeleton class="h-4 w-40"></div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-skeleton class="h-4 w-40"></ui-skeleton>
+```
+
+
+Parts (selectors): `[uiSkeleton], ui-skeleton`.
+
+Spec: `docs/behavior-specs/skeleton.md` · Manual test: `docs/manual-tests/skeleton.md`

package/slider/README.md

@@ -0,0 +1,29 @@
+# Slider
+
+```ts
+import { UI_SLIDER } from '@loomui-ng/ui/slider';
+// add to the component `imports` array
+```
+
+```html
+<span uiSlider [(value)]="v" [min]="0" [max]="100" [step]="5"></span>  <!-- v: number[], e.g. [25] -->
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-slider [(value)]="v" [min]="0" [max]="100" [step]="5"></ui-slider>  <!-- v: number[], e.g. [25] -->
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `value` (model) | `number[]` | `[0]` |
+| `min` |  | `0` |
+| `max` |  | `100` |
+| `step` |  | `1` |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` |
+| `disabled` |  | `false` |
+
+Parts (selectors): `span[uiSlider], ui-slider`.
+
+Spec: `docs/behavior-specs/slider.md` · Manual test: `docs/manual-tests/slider.md`

package/spinner/README.md

@@ -0,0 +1,15 @@
+# Spinner
+
+```ts
+import { UI_SPINNER } from '@loomui-ng/ui/spinner';
+// add to the component `imports` array
+```
+
+```html
+<ui-spinner class="size-6" />
+```
+
+
+Parts (selectors): `ui-spinner`.
+
+Spec: `docs/behavior-specs/spinner.md` · Manual test: `docs/manual-tests/spinner.md`

package/styles/loomui.css

@@ -0,0 +1,330 @@
+/*!
+ * @loomui-ng/ui theme — generated by tools/build-theme-css.mjs. Import once in your global stylesheet AFTER tailwindcss:
+ *
+ *   @import 'tailwindcss';
+ *   @import '@loomui-ng/ui/styles/loomui.css';
+ *
+ *   (class scanning of the package is configured inside this file via @source)
+ *
+ * Add class="dark" to <html> for dark mode; add e.g. class="theme-blue" for an accent preset.
+ */
+@import 'tw-animate-css';
+@import '@angular/cdk/overlay-prebuilt.css';
+
+/* Let Tailwind scan this package's compiled components for class names. */
+@source "../";
+
+@custom-variant dark (&:is(.dark *):not(:is(.force-light *)));
+/* shadcn's current styles use data-open:/data-closed: next to Radix's data-state. Map both. */
+@custom-variant data-open (&:where([data-state="open"], [data-open]));
+@custom-variant data-closed (&:where([data-state="closed"], [data-closed]));
+@custom-variant data-checked (&:where([data-state="checked"], [data-checked]));
+@custom-variant data-unchecked (&:where([data-state="unchecked"], [data-unchecked]));
+@custom-variant data-active (&:where([data-state="active"], [data-active]));
+@custom-variant data-inactive (&:where([data-state="inactive"], [data-inactive]));
+@custom-variant data-horizontal (&:where([data-orientation="horizontal"], [data-horizontal]));
+@custom-variant data-vertical (&:where([data-orientation="vertical"], [data-vertical]));
+
+:root,
+.force-light {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  /* Native <select> popups are drawn by the browser: a transparent/tinted select would get a white list with light text.
+     Give options an explicit surface so they are readable in light and dark. */
+  select option,
+  select optgroup {
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+  }
+}
+
+/* CDK overlay backdrop: shadcn animates the backdrop with tw-animate-css, so neutralise the CDK opacity fade. */
+.cdk-overlay-backdrop[data-slot] {
+  opacity: 1;
+  transition: none;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* input-otp fake caret */
+@theme inline {
+  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+}
+@keyframes caret-blink {
+  0%,
+  70%,
+  100% {
+    opacity: 1;
+  }
+  20%,
+  50% {
+    opacity: 0;
+  }
+}
+
+/* ---------- Accent presets (class on <html>, combine with .dark) ---------- */
+.theme-blue { --primary: oklch(0.546 0.245 262.881); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.623 0.214 259.815); --sidebar-primary: var(--primary); }
+.dark.theme-blue { --primary: oklch(0.623 0.214 259.815); --ring: oklch(0.546 0.245 262.881); }
+.theme-rose { --primary: oklch(0.586 0.253 17.585); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.645 0.246 16.439); --sidebar-primary: var(--primary); }
+.dark.theme-rose { --primary: oklch(0.645 0.246 16.439); --ring: oklch(0.586 0.253 17.585); }
+.theme-green { --primary: oklch(0.627 0.194 149.214); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.723 0.219 149.579); --sidebar-primary: var(--primary); }
+.dark.theme-green { --primary: oklch(0.696 0.17 162.48); --primary-foreground: oklch(0.205 0 0); --ring: oklch(0.627 0.194 149.214); }
+.theme-orange { --primary: oklch(0.646 0.222 41.116); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.705 0.213 47.604); --sidebar-primary: var(--primary); }
+.dark.theme-orange { --primary: oklch(0.705 0.213 47.604); --primary-foreground: oklch(0.205 0 0); --ring: oklch(0.646 0.222 41.116); }
+.theme-violet { --primary: oklch(0.541 0.281 293.009); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.606 0.25 292.717); --sidebar-primary: var(--primary); }
+.dark.theme-violet { --primary: oklch(0.606 0.25 292.717); --ring: oklch(0.541 0.281 293.009); }
+:is(.theme-blue, .theme-rose, .theme-green, .theme-orange, .theme-violet) {
+  --chart-1: color-mix(in oklab, var(--primary) 55%, white);
+  --chart-2: color-mix(in oklab, var(--primary) 80%, white);
+  --chart-3: var(--primary);
+  --chart-4: color-mix(in oklab, var(--primary) 78%, black);
+  --chart-5: color-mix(in oklab, var(--primary) 58%, black);
+}
+
+/* ---- Toast (ui-toaster) ---- */
+/* Styles for <ui-toaster>. Sonner ships its own injected CSS; this is the equivalent for the same data-* attributes.
+   Import once: @import '<path>/libs/ui/toast/toast.css'; */
+
+ui-toaster {
+  display: contents;
+}
+
+[data-sonner-toaster] {
+  position: fixed;
+  z-index: 999999999;
+  width: var(--width);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  outline: none;
+  pointer-events: none;
+}
+
+[data-sonner-toaster][data-x-position='right'] { right: var(--offset-right); }
+[data-sonner-toaster][data-x-position='left'] { left: var(--offset-left); }
+[data-sonner-toaster][data-x-position='center'] { left: 50%; transform: translateX(-50%); }
+[data-sonner-toaster][data-y-position='bottom'] { bottom: var(--offset-bottom); }
+[data-sonner-toaster][data-y-position='top'] { top: var(--offset-top); }
+
+@media (max-width: 600px) {
+  [data-sonner-toaster] {
+    width: calc(100% - 32px);
+    left: 16px !important;
+    right: 16px !important;
+    transform: none !important;
+  }
+}
+
+[data-sonner-toast] {
+  --lift: -1;
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 16px;
+  border: 1px solid var(--normal-border);
+  border-radius: var(--border-radius);
+  background: var(--normal-bg);
+  color: var(--normal-text);
+  font-size: 13px;
+  line-height: 1.4;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
+  outline: none;
+  pointer-events: auto;
+  opacity: 0;
+  z-index: var(--z-index);
+  transition:
+    transform 400ms,
+    opacity 400ms;
+  transform: translateY(calc(var(--lift) * -100%));
+}
+
+[data-sonner-toast][data-y-position='bottom'] { bottom: 0; --lift: -1; }
+[data-sonner-toast][data-y-position='top'] { top: 0; --lift: 1; }
+
+/* mounted + collapsed stack */
+[data-sonner-toast][data-mounted='true'] {
+  opacity: 1;
+  transform: translateY(calc(var(--lift) * var(--index) * var(--gap)))
+    scale(calc(1 - var(--index) * 0.05));
+}
+[data-sonner-toast][data-mounted='true']:not([data-front='true']) { transition-timing-function: ease; }
+
+/* hidden beyond visibleToasts */
+[data-sonner-toast][data-visible='false'] { opacity: 0; pointer-events: none; }
+
+/* expanded stack: offsets measured in TS (--offset px) */
+[data-sonner-toast][data-mounted='true'][data-expanded='true'] {
+  transform: translateY(calc(var(--lift) * var(--offset)));
+}
+[data-sonner-toast][data-expanded='true'][data-visible='true'] { opacity: 1; }
+
+/* removal */
+[data-sonner-toast][data-removed='true'] {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(calc(var(--lift) * -1 * 100%));
+}
+
+/* keep hover alive across the gap between toasts */
+[data-sonner-toast]::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: calc(var(--gap) + 1px);
+  bottom: 100%;
+}
+[data-sonner-toast][data-y-position='top']::after { top: 100%; bottom: auto; }
+
+[data-sonner-toast] [data-content] { display: flex; flex-direction: column; gap: 2px; flex: 1; }
+[data-sonner-toast] [data-title] { font-weight: 500; }
+[data-sonner-toast] [data-description] { color: var(--muted-foreground); }
+
+[data-sonner-toast] [data-icon] { display: flex; width: 16px; height: 16px; }
+[data-sonner-toast] [data-icon] svg { width: 16px; height: 16px; }
+[data-sonner-toast][data-type='success'] [data-icon] { color: oklch(0.627 0.194 149.2); }
+[data-sonner-toast][data-type='error'] [data-icon] { color: var(--destructive); }
+[data-sonner-toast][data-type='warning'] [data-icon] { color: oklch(0.769 0.188 70.08); }
+[data-sonner-toast] [data-icon] svg[data-spin='true'] { animation: ui-toast-spin 1s linear infinite; }
+
+[data-sonner-toast] [data-button] {
+  flex-shrink: 0;
+  height: 24px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 6px;
+  background: var(--primary);
+  color: var(--primary-foreground);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+[data-sonner-toast] [data-button]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+
+@keyframes ui-toast-spin { to { transform: rotate(360deg); } }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-sonner-toast] { transition-duration: 1ms; }
+}

package/switch/README.md

@@ -0,0 +1,29 @@
+# uiSwitch
+
+```ts
+import { UiSwitch } from '@loomui-ng/ui/switch';
+// add to the component imports array
+```
+
+```html
+<button uiSwitch [(checked)]="on"></button>
+<button uiSwitch size="sm" [formControl]="ctrl"></button>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-switch [(checked)]="on"></ui-switch>
+<ui-switch size="sm" [formControl]="ctrl"></ui-switch>
+```
+
+| Input | Values | Default |
+|---|---|---|
+| `checked` | model boolean | `false` |
+| `size` | `default` `sm` | `default` |
+| `disabled` / `invalid` | boolean | `false` |
+| `class` | extra classes | - |
+
+ControlValueAccessor + signal-forms compatible shape. RTL mirrors the thumb.
+
+Spec: docs/behavior-specs/switch.md - Manual checks: docs/manual-tests/switch.md

package/table/README.md

@@ -0,0 +1,31 @@
+# Table
+
+```ts
+import { UI_TABLE_GENERATED } from '@loomui-ng/ui/table';
+// add to the component `imports` array
+```
+
+```html
+<div uiTableContainer>
+  <table uiTable>
+    <thead uiTableHeader><tr uiTableRow><th uiTableHead>Name</th></tr></thead>
+    <tbody uiTableBody><tr uiTableRow><td uiTableCell>Ada</td></tr></tbody>
+  </table>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-table-container>
+  <ui-table>
+    <ui-table-header><ui-table-row><ui-table-head>Name</ui-table-head></ui-table-row></ui-table-header>
+    <ui-table-body><ui-table-row><ui-table-cell>Ada</ui-table-cell></ui-table-row></ui-table-body>
+  </ui-table>
+</ui-table-container>
+```
+
+
+Parts (selectors): `[uiTableContainer], ui-table-container`, `table[uiTable], ui-table`, `caption[uiTableCaption], ui-table-caption`, `thead[uiTableHeader], ui-table-header`, `tbody[uiTableBody], ui-table-body`, `tfoot[uiTableFooter], ui-table-footer`, `tr[uiTableRow], ui-table-row`, `th[uiTableHead], ui-table-head`, `td[uiTableCell], ui-table-cell`.
+
+For sorting/filtering/pagination use the Data Table recipe (`@loomui-ng/ui/data-table` + TanStack Table). Spec: `docs/behavior-specs/table.md` · Manual test: `docs/manual-tests/table.md`

package/tabs/README.md

@@ -0,0 +1,42 @@
+# uiTabs
+
+```ts
+import { UI_TABS } from '@loomui-ng/ui/tabs';
+// add to the component imports array
+```
+
+```html
+<div uiTabs [(value)]="tab">
+  <div uiTabsList variant="line">
+    <button uiTabsTrigger value="a">A</button>
+    <button uiTabsTrigger value="b" disabled>B</button>
+  </div>
+  <div uiTabsContent value="a">…</div>
+  <div uiTabsContent value="b">…</div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-tabs [(value)]="tab">
+  <ui-tabs-list variant="line">
+    <ui-tabs-trigger value="a">A</ui-tabs-trigger>
+    <ui-tabs-trigger value="b" disabled>B</ui-tabs-trigger>
+  </ui-tabs-list>
+  <ui-tabs-content value="a">…</ui-tabs-content>
+  <ui-tabs-content value="b">…</ui-tabs-content>
+</ui-tabs>
+```
+
+| Input | Values | Default |
+|---|---|---|
+| `value` (uiTabs) | model string | - |
+| `orientation` | `horizontal` `vertical` | `horizontal` |
+| `activationMode` | `automatic` `manual` | `automatic` |
+| `dir` | `ltr` `rtl` | inherited |
+| `variant` (uiTabsList) | `default` `line` | `default` |
+
+Uses CDK FocusKeyManager. Needs data-active/data-horizontal/data-vertical custom variants.
+
+Spec: docs/behavior-specs/tabs.md - Manual checks: docs/manual-tests/tabs.md