@ojiepermana/angular-component 22.0.27

package/progress/README.md

@@ -0,0 +1,160 @@
+# Progress
+
+Displays an indicator showing the completion progress of a task, typically as a
+slim passive progress bar.
+
+Use Progress for uploads, background jobs, onboarding steps, and other cases
+where the user should understand status without directly interacting with the
+bar itself.
+
+## Import
+
+```ts
+import { ProgressComponent } from '@ojiepermana/angular-component/progress';
+```
+
+For the visible label and slider-driven examples below, also import the existing
+label and slider entrypoints:
+
+```ts
+import { LabelComponent } from '@ojiepermana/angular-component/label';
+import { SliderComponent } from '@ojiepermana/angular-component/slider';
+```
+
+## Basic usage
+
+Provide an accessible name directly when the bar stands on its own.
+
+```html
+<ProgressBar [value]="33" aria-label="Upload progress" class="w-full max-w-sm" />
+```
+
+## Common patterns
+
+### Visible label row
+
+The current shadcn Radix docs place Progress inside a Field layout with a
+visible label and percentage. In Angular, keep the visible copy outside the
+bar and connect it with `aria-labelledby`.
+
+```html
+<label id="progress-upload-label" class="mb-2 flex items-center gap-3">
+  <span>Upload progress</span>
+  <span class="ms-auto text-muted-foreground">66%</span>
+</label>
+
+<ProgressBar [value]="66" aria-labelledby="progress-upload-label" class="w-full max-w-sm" />
+```
+
+Use `aria-labelledby` here instead of `label[for]`, because `ProgressBar` is a
+custom element with `role="progressbar"`, not a native labelable form control.
+
+### Controlled progress
+
+Keep the progress bar passive and let surrounding controls own the interaction.
+The built-in range slider directive works well for the same pattern shown in the
+upstream docs.
+
+```ts
+const controlledValue = signal(50);
+
+<Label id="progress-controlled-label" class="mb-2 flex items-center gap-3">
+  <span>Upload progress</span>
+  <span class="ms-auto text-muted-foreground">{{ controlledValue() }}%</span>
+</Label>
+
+<ProgressBar [value]="controlledValue()" aria-labelledby="progress-controlled-label" class="w-full" />
+
+<Label for="progress-controlled-slider" class="mb-2 block">Adjust progress</Label>
+<input
+  id="progress-controlled-slider"
+  type="range"
+  Slider
+  min="0"
+  max="100"
+  step="1"
+  [value]="controlledValue()"
+  (input)="onControlledInput($event)" />
+```
+
+### Indeterminate loading
+
+Switch to `indeterminate` when work is running but no stable percentage is
+available yet.
+
+```html
+<ProgressBar [indeterminate]="true" aria-label="Loading deployment" class="w-full max-w-sm" />
+```
+
+### RTL
+
+Follow the upstream guidance by setting `dir="rtl"` on the surrounding
+container and flipping the bar with `rtl:rotate-180`.
+
+```html
+<section dir="rtl" lang="ar" class="w-full max-w-sm text-right">
+  <label id="progress-rtl-label" class="mb-2 flex items-center gap-3">
+    <span>تقدم الرفع</span>
+    <span class="ms-auto text-muted-foreground">٦٦%</span>
+  </label>
+
+  <ProgressBar [value]="66" aria-labelledby="progress-rtl-label" class="w-full rtl:rotate-180" />
+</section>
+```
+
+## API reference
+
+| Input             | Type             | Default |
+| ----------------- | ---------------- | ------- |
+| `value`           | `number \| null` | `0`     |
+| `max`             | `number`         | `100`   |
+| `indeterminate`   | `boolean`        | `false` |
+| `aria-label`      | `string \| null` | `null`  |
+| `aria-labelledby` | `string \| null` | `null`  |
+| `class`           | `string`         | `''`    |
+
+Native host attributes such as `id`, `dir`, and `data-*` still pass through to
+the rendered custom element and can be used for surrounding composition.
+
+## Styling and theming
+
+Tokens consumed:
+
+- `--secondary` for the track.
+- `--primary` for the indicator.
+
+Use the `class` input for width and layout utilities such as `w-full`,
+`max-w-sm`, or `rtl:rotate-180`. Indeterminate state is animated via a CSS
+keyframe that respects `prefers-reduced-motion`.
+
+## Accessibility
+
+- Host is `role="progressbar"`.
+- Determinate mode sets `aria-valuemin="0"`, `aria-valuemax="max"`, and
+  `aria-valuenow="clamped value"`.
+- Indeterminate mode omits `aria-valuenow` and adds `data-state="indeterminate"`.
+- Always provide an accessible name via `aria-label` or `aria-labelledby`.
+- If visible label text already exists on the page, connect it with
+  `aria-labelledby` instead of relying on native label semantics.
+
+## Keyboard interactions
+
+Progress is passive and not focusable by default. Any keyboard interaction
+belongs to surrounding controls such as the slider used in the controlled
+example.
+
+## Angular notes
+
+- Keep Progress focused on status display. Do not nest buttons or other
+  interactive controls inside the bar.
+- Drive determinate state from signals, reactive forms, or any other existing
+  Angular state source.
+- For visible label rows, `Label` is a good lightweight companion, but plain
+  text with the right ARIA wiring works too.
+
+## Source parity
+
+This Angular implementation follows the shadcn Radix progress examples while
+translating `Field` and `FieldLabel` to ordinary Angular markup plus explicit
+ARIA wiring. The controlled example reuses the existing range slider directive,
+and the RTL pattern matches the upstream `rtl:rotate-180` approach.

package/radio/README.md

@@ -0,0 +1,209 @@
+# Radio Group
+
+Accessible exclusive-choice control composed from `RadioGroup` and `Radio`.
+
+## Import
+
+```ts
+import {
+  FormContentComponent,
+  FormDescriptionComponent,
+  FormFieldComponent,
+  FormFieldsetComponent,
+  FormLegendComponent,
+  FormTitleComponent,
+} from '@ojiepermana/angular-component/form';
+import { LabelComponent } from '@ojiepermana/angular-component/label';
+import { RadioComponent, RadioGroupComponent } from '@ojiepermana/angular-component/radio';
+```
+
+## Composition
+
+The upstream shadcn `RadioGroup` examples map to the existing Angular radio and form primitives.
+
+```text
+RadioGroup
+├── label[Label]
+│   ├── Radio
+│   └── FormContent
+│       ├── FormTitle
+│       └── p[FormDescription]
+└── label[Label]
+    ├── Radio
+    └── copy or FormContent
+```
+
+## Basic Usage
+
+Use `RadioGroup` as the value owner and wrap each option in `label[Label]` when the whole row should toggle the radio.
+
+```html
+<RadioGroup name="density" [(ngModel)]="density" class="w-fit">
+  <label Label class="flex items-center gap-3">
+    <Radio value="default" />
+    <span>Default</span>
+  </label>
+  <label Label class="flex items-center gap-3">
+    <Radio value="comfortable" />
+    <span>Comfortable</span>
+  </label>
+  <label Label class="flex items-center gap-3">
+    <Radio value="compact" />
+    <span>Compact</span>
+  </label>
+</RadioGroup>
+```
+
+Reactive forms also work because the group implements `ControlValueAccessor`.
+
+## Common Patterns
+
+### Descriptive rows
+
+Map the shadcn `Field` and `FieldContent` helpers to `FormField` and `FormContent`.
+
+```html
+<RadioGroup name="density" [(ngModel)]="density" class="w-full max-w-md">
+  <label Label class="block rounded-xl border border-border bg-card/40 p-4">
+    <FormField orientation="horizontal" class="gap-4">
+      <Radio value="default" />
+      <FormContent>
+        <FormTitle>Default</FormTitle>
+        <p FormDescription>Standard spacing for most use cases.</p>
+      </FormContent>
+    </FormField>
+  </label>
+</RadioGroup>
+```
+
+### Choice cards
+
+Wrap each plan card in `label[Label]` so the full surface toggles the choice.
+
+```html
+<RadioGroup name="plan" [(ngModel)]="selectedPlan" class="w-full max-w-md">
+  <label Label class="block rounded-xl border border-border bg-card/40 p-4">
+    <FormField orientation="horizontal" class="items-start gap-4">
+      <FormContent>
+        <FormTitle>Pro</FormTitle>
+        <p FormDescription>For growing businesses.</p>
+      </FormContent>
+      <Radio value="pro" />
+    </FormField>
+  </label>
+</RadioGroup>
+```
+
+### Semantic fieldsets
+
+Use a real fieldset and legend when the radio list answers one grouped question.
+
+```html
+<fieldset FormFieldset class="max-w-md rounded-xl border border-border bg-card/40 p-5">
+  <legend FormLegend variant="label">Subscription plan</legend>
+  <p class="text-sm leading-6 text-muted-foreground">Yearly and lifetime plans offer significant savings.</p>
+
+  <RadioGroup name="subscription-plan" [(ngModel)]="subscriptionPlan" class="mt-4">
+    <label Label class="block rounded-lg border border-border/70 bg-background/80 p-3">
+      <FormField orientation="horizontal" class="gap-4">
+        <Radio value="monthly" />
+        <FormContent>
+          <FormTitle>Monthly ($9.99/month)</FormTitle>
+        </FormContent>
+      </FormField>
+    </label>
+  </RadioGroup>
+</fieldset>
+```
+
+### Validation and helper text
+
+Forward helper and error relationships from the group when the descriptive copy sits outside the individual items.
+
+```html
+<FormField invalid class="max-w-md rounded-xl border border-destructive/40 bg-destructive/5 p-5">
+  <FormTitle>Notification Preferences</FormTitle>
+  <p id="notification-help" class="text-sm leading-6 text-muted-foreground">
+    Choose how you want to receive notifications.
+  </p>
+
+  <RadioGroup
+    name="notification-preferences"
+    [(ngModel)]="notificationPreference"
+    aria-describedby="notification-help notification-error"
+    aria-invalid="true">
+    <label Label class="block rounded-lg border border-destructive/40 bg-background/80 p-3">
+      <FormField orientation="horizontal" class="gap-4">
+        <Radio value="email" />
+        <FormContent>
+          <FormTitle>Email only</FormTitle>
+        </FormContent>
+      </FormField>
+    </label>
+  </RadioGroup>
+
+  <p id="notification-error" class="text-sm font-medium text-destructive">
+    Select one delivery channel before saving notification settings.
+  </p>
+</FormField>
+```
+
+## API Reference
+
+### `RadioGroupComponent`
+
+| Input              | Type                         | Default      | Notes                                                        |
+| ------------------ | ---------------------------- | ------------ | ------------------------------------------------------------ |
+| `name`             | `string`                     | `''`         | Forwarded to the underlying Material radio group.            |
+| `orientation`      | `'horizontal' \| 'vertical'` | `'vertical'` | Switches between stacked rows and inline columns.            |
+| `aria-label`       | `string \| null`             | `null`       | Use when the group needs an explicit accessible name.        |
+| `aria-labelledby`  | `string \| null`             | `null`       | Alternative to `aria-label` for external group headings.     |
+| `aria-describedby` | `string \| null`             | `null`       | Connects helper or error text outside the group.             |
+| `aria-invalid`     | `boolean \| string \| null`  | `null`       | Marks the group invalid for validation-driven presentations. |
+| `class`            | `string`                     | `''`         | Adds utility classes to the wrapped group host.              |
+
+| Output        | Payload  |
+| ------------- | -------- |
+| `valueChange` | `string` |
+
+Public method: `focus()`.
+
+### `RadioComponent`
+
+| Input      | Type      | Default |
+| ---------- | --------- | ------- |
+| `value`    | `string`  | —       |
+| `disabled` | `boolean` | `false` |
+| `class`    | `string`  | `''`    |
+
+## Styling and Theming
+
+The radio primitives wrap Angular Material's structural radio markup and restyle it through the shared theme tokens.
+
+- The selected dot uses the `primary` token.
+- Unselected outlines use the `input` token rather than current text color.
+- The group uses CSS grid; horizontal orientation flips to `grid-flow-col auto-cols-max`.
+- Card-style layouts and invalid treatments are best handled by surrounding `label[Label]` and `FormField` composition.
+
+## Accessibility
+
+- Use a real `fieldset` and `legend` when the radio list answers one grouped question.
+- Wrap each option in `label[Label]` when the whole row or card should toggle the control.
+- Use `aria-describedby` on `RadioGroup` to connect helper or error text rendered outside the option rows.
+- Use `aria-invalid` on `RadioGroup` when validation fails and the group should be announced as invalid.
+
+## Keyboard Interactions
+
+- `Tab` moves focus to the selected item or first enabled item in the group.
+- Arrow keys move between options using Angular Material's radio-group behavior.
+- `Space` selects the focused option.
+
+## Angular Notes
+
+- `RadioGroup` owns the selected value and works with both `ngModel` and reactive forms.
+- `Radio` represents only the selectable item; visible copy usually lives beside it in a wrapper label or `FormContent` block.
+- The shadcn `Field` family maps to the existing `form` entrypoint rather than a separate radio-specific helper package.
+
+## Source Parity
+
+This Angular implementation follows the same high-value shadcn radio-group examples: descriptive rows, choice cards, semantic fieldsets, disabled states, invalid messaging, and RTL. The deliberate difference is the use of the existing `form` and `label` primitives instead of introducing a separate runtime `Field` API.

package/resizable/README.md

@@ -0,0 +1,168 @@
+# Resizable
+
+Accessible resizable panel groups and layouts with pointer and keyboard support.
+
+Use Resizable for split views, workspace layouts, drill-in dashboards, inspector panes, and settings screens where users should control how much space each pane receives.
+
+## Import
+
+```ts
+import {
+  ResizableHandleComponent,
+  ResizablePanelComponent,
+  ResizablePanelGroupComponent,
+} from '@ojiepermana/angular-component/resizable';
+```
+
+## Composition
+
+The Angular structure mirrors the shadcn composition while using Angular selectors and standalone imports.
+
+```text
+ResizablePanelGroup
+├── ResizablePanel
+├── ResizableHandle
+└── ResizablePanel
+```
+
+## Basic usage
+
+Use `ResizablePanelGroup` as the root, place `ResizablePanel` elements around each separator, and insert `ResizableHandle` between adjacent panels.
+
+```html
+<ResizablePanelGroup orientation="horizontal" class="h-[200px] max-w-lg rounded-lg border border-border">
+  <ResizablePanel defaultSize="35%">
+    <div class="flex h-full items-center justify-center p-6">Navigation</div>
+  </ResizablePanel>
+
+  <ResizableHandle aria-label="Resize navigation"></ResizableHandle>
+
+  <ResizablePanel defaultSize="65%">
+    <div class="flex h-full items-center justify-center p-6">Content</div>
+  </ResizablePanel>
+</ResizablePanelGroup>
+```
+
+## Common patterns
+
+### Nested workspace layout
+
+Nested groups work well for mail, support, or analytics layouts where a secondary area also needs its own split.
+
+```html
+<ResizablePanelGroup orientation="horizontal" class="h-[220px] rounded-lg border border-border">
+  <ResizablePanel defaultSize="50%">
+    <div class="flex h-full items-center justify-center p-6">Threads</div>
+  </ResizablePanel>
+
+  <ResizableHandle withHandle aria-label="Resize thread list"></ResizableHandle>
+
+  <ResizablePanel defaultSize="50%">
+    <ResizablePanelGroup orientation="vertical" class="h-full">
+      <ResizablePanel defaultSize="28%">
+        <div class="flex h-full items-center justify-center p-6">Summary</div>
+      </ResizablePanel>
+      <ResizableHandle withHandle aria-label="Resize summary"></ResizableHandle>
+      <ResizablePanel defaultSize="72%">
+        <div class="flex h-full items-center justify-center p-6">Details</div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </ResizablePanel>
+</ResizablePanelGroup>
+```
+
+### Vertical resizing
+
+Use `orientation="vertical"` when panes stack top-to-bottom.
+
+```html
+<ResizablePanelGroup orientation="vertical" class="h-[220px] max-w-sm rounded-lg border border-border">
+  <ResizablePanel defaultSize="25%">...</ResizablePanel>
+  <ResizableHandle aria-label="Resize header"></ResizableHandle>
+  <ResizablePanel defaultSize="75%">...</ResizablePanel>
+</ResizablePanelGroup>
+```
+
+### Visible handle
+
+Add `withHandle` when the splitter should show a grab affordance.
+
+```html
+<ResizableHandle withHandle aria-label="Resize sidebar"></ResizableHandle>
+```
+
+### Size constraints
+
+Use `minSize` and `maxSize` to keep navigation, preview, or inspector panes within useful bounds.
+
+```html
+<ResizablePanel defaultSize="30%" minSize="20%" maxSize="40%">...</ResizablePanel>
+```
+
+### RTL
+
+Set `dir="rtl"` on `ResizablePanelGroup` or an ancestor when the layout should follow right-to-left direction. Pointer and arrow-key resizing adapt to the computed direction.
+
+```html
+<ResizablePanelGroup dir="rtl" orientation="horizontal" class="h-[200px] rounded-lg border border-border">
+  <ResizablePanel defaultSize="50%">...</ResizablePanel>
+  <ResizableHandle withHandle aria-label="تغيير حجم القائمة"></ResizableHandle>
+  <ResizablePanel defaultSize="50%">...</ResizablePanel>
+</ResizablePanelGroup>
+```
+
+## API reference
+
+### `ResizablePanelGroupComponent`
+
+| Input         | Type                         | Default        |
+| ------------- | ---------------------------- | -------------- |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` |
+| `class`       | `string`                     | `''`           |
+
+### `ResizablePanelComponent`
+
+| Input         | Type                       | Default        |
+| ------------- | -------------------------- | -------------- |
+| `defaultSize` | `string \| number \| null` | `null`         |
+| `minSize`     | `string \| number`         | `'10%'`        |
+| `maxSize`     | `string \| number`         | `'90%'`        |
+| `id`          | `string \| null`           | auto-generated |
+| `class`       | `string`                   | `''`           |
+
+### `ResizableHandleComponent`
+
+| Input        | Type             | Default          |
+| ------------ | ---------------- | ---------------- |
+| `withHandle` | `boolean`        | `false`          |
+| `aria-label` | `string \| null` | `'Resize panel'` |
+| `class`      | `string`         | `''`             |
+
+## Styling and theming
+
+Pass `class` to the group, panel, or handle to tune height, width, backgrounds, borders, and embedded layouts.
+
+The primitives use the shared theme tokens, so utilities such as `border-border`, `bg-card`, `bg-muted/40`, `text-foreground`, and `focus-visible:ring-ring` work as expected.
+
+## Accessibility
+
+- Each handle is a focusable `separator` with `aria-controls`, `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`.
+- Provide a clear `aria-label` for each handle when the surrounding pane label is not already obvious from context.
+- Panels stay in normal page flow, which keeps nested forms and content accessible without extra portals or overlays.
+
+## Keyboard interactions
+
+- Arrow keys resize the adjacent panes.
+- `Home` moves the primary pane to its minimum allowed size.
+- `End` moves the primary pane to its maximum allowed size.
+- `Enter` collapses the primary pane to its minimum and restores the previous size on the next press.
+
+## Angular notes
+
+- The API follows the shadcn `orientation` plus percent-size model, but does not require React or `react-resizable-panels`.
+- `defaultSize`, `minSize`, and `maxSize` accept either percentage strings such as `'25%'` or numeric percentages such as `25`.
+- Custom element hosts are explicitly block-level flex items so nested groups and dashboard panes size correctly inside Angular templates.
+
+## Source parity
+
+This Angular implementation follows the shadcn Resizable composition and examples while translating them to standalone component imports, Angular selectors, and a signal-driven internal layout model.

package/scroll-area/README.md

@@ -0,0 +1,143 @@
+# Scroll Area
+
+Native scroll viewport with token-styled scrollbars for constrained lists,
+horizontal galleries, and RTL content. It maps the shadcn Scroll Area pattern to
+Angular while keeping scrolling browser-native.
+
+## Import
+
+```ts
+import { ScrollAreaComponent } from '@ojiepermana/angular-component/scroll-area';
+```
+
+Import composed primitives separately when the content needs them:
+
+```ts
+import { ScrollAreaComponent } from '@ojiepermana/angular-component/scroll-area';
+import { SeparatorComponent } from '@ojiepermana/angular-component/separator';
+```
+
+## Usage
+
+Give the host a stable height or width, then place padding on inner content when
+the scrollbar should stay flush with the border.
+
+```html
+<ScrollArea class="h-72 w-48 rounded-md border border-border" viewportAriaLabel="Release tags">
+  <div class="p-4">
+    <h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
+    @for (tag of tags; track tag) {
+    <div class="text-sm">{{ tag }}</div>
+    <Separator class="my-2" />
+    }
+  </div>
+</ScrollArea>
+```
+
+## Common Patterns
+
+### Basic List
+
+```html
+<ScrollArea class="h-64 w-56 rounded-md border border-border" viewportAriaLabel="Activity log">
+  <ol class="space-y-3 p-4 text-sm">
+    @for (event of events; track event.id) {
+    <li>{{ event.label }}</li>
+    }
+  </ol>
+</ScrollArea>
+```
+
+### Horizontal Content
+
+```html
+<ScrollArea class="w-full max-w-md rounded-md border border-border" viewportAriaLabel="Artwork gallery">
+  <div class="flex w-max gap-4 p-4">
+    @for (artwork of artworks; track artwork.id; let index = $index) {
+    <figure class="shrink-0">
+      <img
+        [ngSrc]="artwork.image"
+        [alt]="artwork.alt"
+        [priority]="index === 0"
+        width="300"
+        height="400"
+        class="aspect-3/4 h-64 w-48 rounded-md object-cover" />
+      <figcaption class="pt-2 text-xs text-muted-foreground">{{ artwork.caption }}</figcaption>
+    </figure>
+    }
+  </div>
+</ScrollArea>
+```
+
+### RTL Content
+
+```html
+<ScrollArea
+  dir="rtl"
+  lang="ar"
+  class="h-72 w-48 rounded-md border border-border text-right"
+  viewportAriaLabel="قائمة العلامات">
+  <div class="p-4">...</div>
+</ScrollArea>
+```
+
+## API Reference
+
+| Input               | Type             | Default | Description                                                                                   |
+| ------------------- | ---------------- | ------- | --------------------------------------------------------------------------------------------- |
+| `class`             | `string`         | `''`    | Classes applied to the custom-element host. Use this for size, border, radius, and placement. |
+| `viewportClass`     | `string`         | `''`    | Classes merged onto the native scroll viewport for axis control, whitespace, or overflow.     |
+| `viewportAriaLabel` | `string \| null` | `null`  | Adds an accessible label and exposes the viewport as a named region.                          |
+| `viewportTabIndex`  | `number`         | `0`     | Keeps the scroll viewport keyboard-focusable. Use `-1` only when focusable children suffice.  |
+
+## Styling and Theming
+
+The host is block-level, relatively positioned, and overflow-hidden. The inner
+viewport uses native `overflow: auto`, `scrollbar-width: thin` for Firefox, and
+WebKit scrollbar pseudo-elements for Chromium/Safari.
+
+Tokens consumed:
+
+- `--border` for the default scrollbar thumb.
+- `--muted-foreground` for the hover thumb fallback.
+- `--ring` for keyboard focus indication.
+
+Pass `class` for host sizing and borders, and `viewportClass` when the viewport
+itself needs adjustments such as `whitespace-nowrap`, custom padding, or axis
+constraints.
+
+## Accessibility
+
+The component keeps native wheel, touch, momentum, and keyboard scrolling. The
+viewport is focusable by default with `tabindex="0"`, so keyboard users can
+scroll overflowing content even when there are no focusable descendants.
+
+Use `viewportAriaLabel` when the scrollable region needs a spoken name. When a
+label is present, the viewport is exposed as `role="region"`. Keep long lists in
+logical DOM order and avoid hiding important content behind custom-only pointer
+controls.
+
+## Keyboard Interactions
+
+When the viewport has focus, the browser handles scrolling keys:
+
+- Arrow keys move in the matching direction.
+- Page Up and Page Down scroll by a larger step.
+- Home and End jump to the start or end where supported.
+- Space follows the browser's scroll behavior for the focused region.
+
+## Angular Notes
+
+`ScrollAreaComponent` is standalone and has no provider setup. Use Angular
+`@for` with stable track expressions for long content. For static artwork inside
+horizontal scroll examples, import `NgOptimizedImage` and use `ngSrc`.
+
+The component intentionally does not add a child `ScrollBar` directive. Native
+scrollbars are styled by CSS and remain visible only when the content overflows.
+
+## Source Parity
+
+The shadcn Scroll Area docs show `ScrollArea` plus a `ScrollBar` part. This
+Angular implementation preserves the same usage goals, examples, RTL guidance,
+and themed scrollbar appearance while mapping `ScrollBar` to browser-native
+scrollbars instead of a separate decorative child component.