@egose/shadcn-theme-ng-tw 0.0.28 → 0.2.0

package/sidebar/types/sidebar.d.ts

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Signal, ValueProvider } from '@angular/core';
 import { ClassValue } from 'clsx';
-import * as i1 from '@egose/shadcn-theme-ng/input';
+import * as i1 from '@egose/shadcn-theme-ng-tw/input';
 import { BooleanInput } from '@angular/cdk/coercion';
 import * as i1$1 from '@spartan-ng/brain/tooltip';
-import * as i1$2 from '@egose/shadcn-theme-ng/separator';
-import * as i1$3 from '@egose/shadcn-theme-ng/button';
+import * as i1$2 from '@egose/shadcn-theme-ng-tw/separator';
+import * as i1$3 from '@egose/shadcn-theme-ng-tw/button';
 
 type SidebarVariant = 'sidebar' | 'floating' | 'inset';
 declare class HlmSidebarService {

package/skeleton/README.md

@@ -1,11 +1,223 @@
-# Skeleton
+# Skeleton (`@egose/shadcn-theme-ng/skeleton`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli).
+A shadcn/ui-style **Skeleton** — a pulsing placeholder block shown while content loads. This is the Angular equivalent of shadcn/ui `Skeleton`.
 
-## Building
+It has **no behavior and no primitive underneath**: a single thin directive (`[hlmSkeleton]` / `hlm-skeleton`) that paints any host element with the muted pulse styling (`bg-muted`, rounded, `motion-safe:animate-pulse`). Size it with your own utilities.
 
-To build the library, run:
+> **Ships as:** `@egose/shadcn-theme-ng/skeleton` and `@egose/shadcn-theme-ng-tw/skeleton` (the `tw:`-prefixed Tailwind variant — same API, class strings prefixed with `tw:`).
+> See the [package README](../../README.md) for installation, peer dependencies, and Tailwind setup. Do not publish this project directory independently.
+
+## Installation
 
 ```bash
-ng build skeleton
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant
+npm install @egose/shadcn-theme-ng-tw
+```
+
+```ts
+import { HlmSkeletonImports } from '@egose/shadcn-theme-ng/skeleton';
+// tw variant:
+// import { HlmSkeletonImports } from '@egose/shadcn-theme-ng-tw/skeleton';
+```
+
+Peer dependencies (see [package README](../../README.md) for versions): `@angular/core`, `@angular/common`, `@spartan-ng/brain` (declared peer; the directive itself uses none of its APIs).
+
+## Imports
+
+Real exported symbols (from `src/public-api.ts`):
+
+| Symbol               | Kind          | Description                                                    |
+| -------------------- | ------------- | -------------------------------------------------------------- |
+| `HlmSkeleton`        | Directive     | The placeholder styling; selector `[hlmSkeleton],hlm-skeleton` |
+| `HlmSkeletonImports` | `const` array | `[HlmSkeleton]` standalone imports                             |
+| `HlmSkeletonModule`  | `NgModule`    | NgModule wrapper re-exporting `HlmSkeleton`                    |
+
+Standalone usage:
+
+```ts
+import { Component } from '@angular/core';
+import { HlmSkeletonImports } from '@egose/shadcn-theme-ng/skeleton';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [HlmSkeletonImports],
+  template: `<hlm-skeleton class="tw:h-12 tw:w-full" />`,
+})
+export class DemoComponent {}
+```
+
+NgModule usage:
+
+```ts
+import { NgModule } from '@angular/core';
+import { HlmSkeletonModule } from '@egose/shadcn-theme-ng/skeleton';
+
+@NgModule({ imports: [HlmSkeletonModule] })
+export class DemoModule {}
+```
+
+## Anatomy / Structure
+
+```html
+<!-- Element form -->
+<hlm-skeleton class="tw:h-4 tw:w-48" />
+
+<!-- Attribute form on any element -->
+<div hlmSkeleton class="tw:h-24 tw:w-full"></div>
+```
+
+Real selectors:
+
+| Selector                     | Class         | Notes                                                                                  |
+| ---------------------------- | ------------- | -------------------------------------------------------------------------------------- |
+| `[hlmSkeleton],hlm-skeleton` | `HlmSkeleton` | `data-slot="skeleton"`; `block`, `rounded-md`, `bg-muted`, `motion-safe:animate-pulse` |
+
+The directive declares **no inputs, outputs, or methods**. All sizing/spacing comes from classes you add.
+
+## API reference
+
+`HlmSkeleton` has no API surface beyond its selector — it only applies styling classes to its host. There are no inputs (use the `class` attribute directly), no outputs, and no methods.
+
+## Examples
+
+### 1. Basic placeholders
+
+```html
+<hlm-skeleton class="tw:h-4 tw:w-48" />
+<hlm-skeleton class="tw:h-8 tw:w-full" />
+<div hlmSkeleton class="tw:size-12 tw:rounded-full"></div>
+```
+
+### 2. Card loading state
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmSkeletonImports } from '@egose/shadcn-theme-ng/skeleton';
+
+@Component({
+  selector: 'app-card-loading',
+  standalone: true,
+  imports: [HlmSkeletonImports],
+  template: `
+    @if (loading()) {
+      <div class="tw:flex tw:items-center tw:gap-4">
+        <div hlmSkeleton class="tw:size-12 tw:rounded-full"></div>
+        <div class="tw:space-y-2">
+          <hlm-skeleton class="tw:h-4 tw:w-48" />
+          <hlm-skeleton class="tw:h-4 tw:w-32" />
+        </div>
+      </div>
+    } @else {
+      <div class="tw:flex tw:items-center tw:gap-4">
+        <img [src]="user().avatar" alt="" class="tw:size-12 tw:rounded-full" />
+        <div>
+          <p>{{ user().name }}</p>
+          <p class="tw:text-muted-foreground tw:text-sm">{{ user().email }}</p>
+        </div>
+      </div>
+    }
+  `,
+})
+export class CardLoadingComponent {
+  readonly loading = signal(true);
+  readonly user = signal({ name: 'Ada', email: 'ada@example.com', avatar: '/avatar.png' });
+}
+```
+
+Match skeleton sizes to the real content sizes to avoid layout shift when data arrives.
+
+### 3. List / table rows
+
+```html
+<ul class="tw:space-y-2">
+  @for (i of [1, 2, 3, 4, 5]; track i) {
+  <li class="tw:flex tw:items-center tw:gap-3">
+    <div hlmSkeleton class="tw:size-8 tw:rounded-md"></div>
+    <hlm-skeleton class="tw:h-4 tw:flex-1" />
+    <hlm-skeleton class="tw:h-4 tw:w-16" />
+  </li>
+  }
+</ul>
+```
+
+### 4. Async data with `resource`
+
+```ts
+import { Component, resource } from '@angular/core';
+import { HlmSkeletonImports } from '@egose/shadcn-theme-ng/skeleton';
+
+@Component({
+  selector: 'app-async-profile',
+  standalone: true,
+  imports: [HlmSkeletonImports],
+  template: `
+    @if (profile.isLoading()) {
+      <div class="tw:space-y-3">
+        <hlm-skeleton class="tw:h-6 tw:w-1/3" />
+        <hlm-skeleton class="tw:h-4 tw:w-full" />
+        <hlm-skeleton class="tw:h-4 tw:w-2/3" />
+      </div>
+    } @else if (profile.error()) {
+      <p class="tw:text-destructive tw:text-sm">Failed to load profile.</p>
+    } @else {
+      <h2>{{ profile.value()?.name }}</h2>
+      <p>{{ profile.value()?.bio }}</p>
+    }
+  `,
+})
+export class AsyncProfileComponent {
+  readonly profile = resource({
+    loader: async () => {
+      const res = await fetch('/api/profile');
+      return (await res.json()) as { name: string; bio: string };
+    },
+  });
+}
 ```
+
+### 5. Form skeleton
+
+```html
+<form aria-busy="true" aria-label="Loading form">
+  <div class="tw:grid tw:gap-4">
+    <hlm-skeleton class="tw:h-4 tw:w-24" />
+    <hlm-skeleton class="tw:h-9 tw:w-full" />
+    <hlm-skeleton class="tw:h-4 tw:w-24" />
+    <hlm-skeleton class="tw:h-20 tw:w-full" />
+    <hlm-skeleton class="tw:h-9 tw:w-28" />
+  </div>
+</form>
+```
+
+### 6. Sidebar menu skeletons (composition)
+
+The `sidebar` subpath reuses this directive in `HlmSidebarMenuSkeleton` — but you can also compose manually:
+
+```html
+<div hlmSidebarContent>
+  <hlm-skeleton class="tw:mb-2 tw:h-8 tw:w-full" />
+  <hlm-skeleton class="tw:mb-2 tw:h-8 tw:w-full" />
+  <hlm-skeleton class="tw:h-8 tw:w-3/4" />
+</div>
+```
+
+## Accessibility notes
+
+- Skeletons are visual placeholders: hide them from assistive tech (`aria-hidden="true"` on the skeleton container) and expose a single loading status instead (`role="status"` + `aria-busy="true"` on the loading region, or an `aria-live` announcement).
+- The pulse animation is gated behind `motion-safe:` — users with reduced-motion preferences see a static block. Do not add your own infinite animations on top.
+- Keep skeleton geometry close to the final content so focus order and scroll position don't jump when content swaps in; move focus deliberately (e.g. to an error message) on load failure.
+
+## Theming / CSS variables
+
+One token: `bg-muted` block color (follows light/dark theme). Shape via border-radius utilities, motion via the built-in `motion-safe:animate-pulse`.
+
+## Related subpaths
+
+- `@egose/shadcn-theme-ng/sidebar` — `HlmSidebarMenuSkeleton` composes this directive for nav loading states
+- `@egose/shadcn-theme-ng/card` — containers commonly filled with skeleton rows while loading
+- `@egose/shadcn-theme-ng/table` — tables that show skeleton rows during fetches
+- `@egose/shadcn-theme-ng/spinner` — determinate/indeterminate activity indicator alternative

package/skeleton/fesm2022/skeleton.mjs

@@ -4,12 +4,12 @@ import { classes } from '@egose/shadcn-theme-ng-tw/utils';
 
 class HlmSkeleton {
     constructor() {
-        classes(() => 'bg-muted rounded-md block motion-safe:animate-pulse');
+        classes(() => 'tw:bg-muted tw:rounded-md tw:block tw:motion-safe:animate-pulse');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmSkeleton, isStandalone: true, selector: "[hlmSkeleton],hlm-skeleton", host: { attributes: { "data-slot": "skeleton" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmSkeleton, isStandalone: true, selector: "[hlmSkeleton],hlm-skeleton", host: { attributes: { "data-slot": "skeleton" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSkeleton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSkeleton, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmSkeleton],hlm-skeleton',
@@ -24,11 +24,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 const HlmSkeletonImports = [HlmSkeleton];
 class HlmSkeletonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmSkeletonModule, imports: [HlmSkeleton], exports: [HlmSkeleton] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSkeletonModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmSkeletonModule, imports: [HlmSkeleton], exports: [HlmSkeleton] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSkeletonModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSkeletonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSkeletonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmSkeletonImports],
@@ -41,4 +41,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmSkeleton, HlmSkeletonImports, HlmSkeletonModule };
-//# sourceMappingURL=skeleton.mjs.map
+

package/slider/README.md

@@ -1,11 +1,279 @@
-# Slider
+# Slider (`@egose/shadcn-theme-ng/slider`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli).
+A shadcn/ui-style **Slider** — a draggable track with one or more thumbs for picking numeric value(s). This is the Angular equivalent of shadcn/ui `Slider`.
 
-## Building
+Behavior comes from **spartan-ng/brain** (`BrnSlider` + `BrnSliderImports`: track/range/thumb/tick structural pieces, keyboard support, min/max/step, multi-thumb, orientation, ticks formatting). This package is the shadcn skin: a `hlm-slider` (or `brn-slider [hlm]`) component that forwards the full brain slider API via host directives and renders the muted track, primary range fill, circular thumbs, and optional tick labels.
 
-To build the library, run:
+> **Ships as:** `@egose/shadcn-theme-ng/slider` and `@egose/shadcn-theme-ng-tw/slider` (the `tw:`-prefixed Tailwind variant — same API, class strings prefixed with `tw:`).
+> See the [package README](../../README.md) for installation, peer dependencies, and Tailwind setup. Do not publish this project directory independently.
+
+## Installation
 
 ```bash
-ng build slider
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant
+npm install @egose/shadcn-theme-ng-tw
+```
+
+```ts
+import { HlmSliderImports } from '@egose/shadcn-theme-ng/slider';
+// tw variant:
+// import { HlmSliderImports } from '@egose/shadcn-theme-ng-tw/slider';
+```
+
+Peer dependencies (see [package README](../../README.md) for versions): `@angular/core`, `@angular/common`, `@spartan-ng/brain`.
+
+## Imports
+
+Real exported symbols (from `src/public-api.ts`):
+
+| Symbol             | Kind          | Description                                                               |
+| ------------------ | ------------- | ------------------------------------------------------------------------- |
+| `HlmSlider`        | Component     | The slider; selector `hlm-slider, brn-slider [hlm]`; forwards `BrnSlider` |
+| `HlmSliderImports` | `const` array | `[HlmSlider]` standalone imports                                          |
+| `HlmSliderModule`  | `NgModule`    | NgModule wrapper re-exporting `HlmSlider`                                 |
+
+Standalone usage:
+
+```ts
+import { Component } from '@angular/core';
+import { HlmSliderImports } from '@egose/shadcn-theme-ng/slider';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [HlmSliderImports],
+  template: `<hlm-slider [value]="[50]" />`,
+})
+export class DemoComponent {}
+```
+
+NgModule usage:
+
+```ts
+import { NgModule } from '@angular/core';
+import { HlmSliderModule } from '@egose/shadcn-theme-ng/slider';
+
+@NgModule({ imports: [HlmSliderModule] })
+export class DemoModule {}
 ```
+
+## Anatomy / Structure
+
+You only write the host element — track, range, thumbs, and ticks render from the component template:
+
+```html
+<!-- Single value -->
+<hlm-slider [value]="[50]" [min]="0" [max]="100" (valueChange)="volume.set($event)" />
+
+<!-- Range (two thumbs) -->
+<hlm-slider [value]="[20, 80]" [min]="0" [max]="100" />
+
+<!-- Attribute form on an element inside a brain slider host -->
+<brn-slider [value]="[30]">
+  <div hlm></div>
+</brn-slider>
+```
+
+Real selectors:
+
+| Selector                         | Class       | Notes                                                                                                                                                                       |
+| -------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `hlm-slider`, `brn-slider [hlm]` | `HlmSlider` | Renders `brnSliderTrack` > `brnSliderRange`, one `brnSliderThumb` per `thumbIndexes()`, and optional `*brnSliderTick` labels (`hlm` goes on an element inside `brn-slider`) |
+
+## API reference
+
+### HlmSlider (component)
+
+Thin wrapper — no own inputs. All bindings are forwarded to the `BrnSlider` host directive:
+
+| Binding                 | Kind   | Description                                                                         |
+| ----------------------- | ------ | ----------------------------------------------------------------------------------- |
+| `id`                    | input  | Slider id                                                                           |
+| `value`                 | input  | Thumb values as array (e.g. `[50]`, `[20, 80]`); use `[(value)]` or `(valueChange)` |
+| `disabled`              | input  | Disables interaction (dims + `pointer-events-none`)                                 |
+| `min`                   | input  | Minimum value                                                                       |
+| `max`                   | input  | Maximum value                                                                       |
+| `step`                  | input  | Step increment                                                                      |
+| `minStepsBetweenThumbs` | input  | Minimum gap (in steps) between thumbs                                               |
+| `inverted`              | input  | Flip the axis direction                                                             |
+| `orientation`           | input  | `'horizontal' \| 'vertical'`                                                        |
+| `showTicks`             | input  | Render tick labels under/beside the track                                           |
+| `maxTicks`              | input  | Cap on rendered tick count                                                          |
+| `tickLabelInterval`     | input  | Label every Nth tick                                                                |
+| `formatTick`            | input  | `(tick: number) => string` label formatter                                          |
+| `draggableRange`        | input  | Allow dragging the range fill between thumbs                                        |
+| `draggableRangeOnly`    | input  | Only the range (not thumbs) is draggable                                            |
+| `aria-label`            | input  | Accessible name                                                                     |
+| `aria-labelledby`       | input  | Id(s) of labelling element(s)                                                       |
+| `valueChange`           | output | Emits the new value array on change                                                 |
+
+Vertical mode needs height from you (`tw:h-40` on the host pulls in `data-vertical:min-h-40` styling); horizontal is full-width by default.
+
+## Examples
+
+### 1. Basic single slider
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmSliderImports } from '@egose/shadcn-theme-ng/slider';
+
+@Component({
+  selector: 'app-basic-slider',
+  standalone: true,
+  imports: [HlmSliderImports],
+  template: `
+    <label id="vol-label" class="tw:mb-2 tw:block tw:text-sm">Volume: {{ volume()[0] }}</label>
+    <hlm-slider
+      aria-labelledby="vol-label"
+      [min]="0"
+      [max]="100"
+      [step]="1"
+      [value]="volume()"
+      (valueChange)="volume.set($event)"
+    />
+  `,
+})
+export class BasicSliderComponent {
+  readonly volume = signal<number[]>([50]);
+}
+```
+
+### 2. Range slider (two thumbs)
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmSliderImports } from '@egose/shadcn-theme-ng/slider';
+
+@Component({
+  selector: 'app-range-slider',
+  standalone: true,
+  imports: [HlmSliderImports],
+  template: `
+    <hlm-slider
+      aria-label="Price range"
+      [min]="0"
+      [max]="500"
+      [step]="10"
+      [minStepsBetweenThumbs]="1"
+      [(value)]="range"
+    />
+    <p class="tw:mt-2 tw:text-sm">Between ${{ range()[0] }} and ${{ range()[1] }}</p>
+  `,
+})
+export class RangeSliderComponent {
+  readonly range = signal<number[]>([50, 300]);
+}
+```
+
+### 3. Reactive forms
+
+`BrnSlider` is a `ControlValueAccessor` — bind `formControlName` directly on the host:
+
+```ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { HlmSliderImports } from '@egose/shadcn-theme-ng/slider';
+
+@Component({
+  selector: 'app-form-slider',
+  standalone: true,
+  imports: [HlmSliderImports, ReactiveFormsModule],
+  template: `
+    <form [formGroup]="form">
+      <label for="brightness" class="tw:mb-2 tw:block tw:text-sm">Brightness</label>
+      <hlm-slider id="brightness" formControlName="brightness" [min]="0" [max]="100" />
+      <button type="button" (click)="form.controls.brightness.setValue([100])">Max</button>
+    </form>
+  `,
+})
+export class FormSliderComponent {
+  readonly form = new FormGroup({
+    brightness: new FormControl<number[]>([70]),
+  });
+}
+```
+
+### 4. Disabled + tick labels
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmSliderImports } from '@egose/shadcn-theme-ng/slider';
+
+@Component({
+  selector: 'app-ticks-slider',
+  standalone: true,
+  imports: [HlmSliderImports],
+  template: `
+    <hlm-slider
+      aria-label="Quality"
+      [min]="0"
+      [max]="100"
+      [step]="10"
+      showTicks
+      [maxTicks]="6"
+      [tickLabelInterval]="2"
+      [formatTick]="format"
+      [(value)]="quality"
+    />
+
+    <hlm-slider class="tw:mt-6" aria-label="Locked setting" [value]="[40]" disabled />
+  `,
+})
+export class TicksSliderComponent {
+  readonly quality = signal<number[]>([60]);
+  readonly format = (tick: number): string => `${tick}%`;
+}
+```
+
+### 5. Vertical + inverted
+
+```html
+<div class="tw:flex tw:gap-8">
+  <hlm-slider class="tw:h-48" aria-label="Balance" orientation="vertical" [min]="0" [max]="100" [(value)]="balance" />
+
+  <hlm-slider aria-label="Inverted level" inverted [min]="0" [max]="100" [(value)]="level" />
+</div>
+```
+
+Vertical sliders size along the block axis — always give the host an explicit height (e.g. `tw:h-48`).
+
+### 6. Draggable range (select a window, move it whole)
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmSliderImports } from '@egose/shadcn-theme-ng/slider';
+
+@Component({
+  selector: 'app-window-slider',
+  standalone: true,
+  imports: [HlmSliderImports],
+  template: `
+    <hlm-slider aria-label="Visible window" [min]="0" [max]="24" [step]="1" draggableRange [(value)]="window" />
+    <p class="tw:mt-2 tw:text-sm">Showing hours {{ window()[0] }}–{{ window()[1] }}</p>
+  `,
+})
+export class WindowSliderComponent {
+  readonly window = signal<number[]>([8, 17]);
+}
+```
+
+## Accessibility notes
+
+- Always name the slider: `aria-label` for standalone use or `aria-labelledby` pointing at a visible label. Without a name, screen-reader users get an anonymous slider.
+- Thumbs are keyboard-operable (arrows/Home/End, per brain) — keep the host focusable (default) and never wrap thumbs in extra focus stops.
+- `disabled` removes interaction and dims the control; for temporarily-unavailable-but-explainable states, prefer keeping it enabled with a described constraint instead.
+- Tick labels are visual annotations; don't rely on them as the only value readout — mirror the current value in text (as in examples 1–2) or an `aria-valuetext` equivalent where the primitive supports it.
+
+## Theming / CSS variables
+
+Class-driven (`bg-muted` track, `bg-primary` range, white thumbs with primary border and focus rings). No component-specific CSS variables; density follows the default `size-4` thumbs.
+
+## Related subpaths
+
+- `@egose/shadcn-theme-ng/label` — visible labels referenced via `aria-labelledby`
+- `@egose/shadcn-theme-ng/field` / `form-field` — form rows pairing labels, sliders, and hints/errors
+- `@egose/shadcn-theme-ng/progress` — read-only fill-bar counterpart
+- `@egose/shadcn-theme-ng/input` — precise numeric entry to pair with coarse slider input