### Install Radix Themes

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/themes/overview/getting-started.mdx

Install the Radix Themes package using npm. This is the first step to integrating Radix Themes into your project.

```typescript
npm install @radix-ui/themes
```

--------------------------------

### NX Build Configuration for CSS

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/themes/overview/getting-started.mdx

Configure your NX build options to include the Radix Themes CSS file and set up include paths for style preprocessors.

```json
{
    "styles": [
        "@radix-ui/themes/styles.css"
    ],
    "stylePreprocessorOptions": {
        "includePaths": [
            "node_modules/"
        ]
    }
}
```

--------------------------------

### Install Radix Primitives and Angular CDK

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/primitives/overview/getting-started.mdx

Installs the necessary Radix Primitives package and the Angular CDK, which is a dependency for many Angular UI functionalities.

```bash
npm install @radix-ng/primitives @angular/cdk
```

--------------------------------

### Build and Run RadixNG Development Environment

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/README.md

This snippet details the commands required to build RadixNG primitives and components, followed by starting the documentation development server. It assumes a pnpm workspace setup.

```bash
pnpm -w run primitives:build
```

```bash
pnpm -w run components:build
```

```bash
pnpm -w run radix-docs:dev
```

--------------------------------

### Import Global CSS

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/themes/overview/getting-started.mdx

Import the global CSS file for Radix Themes at the root of your application to apply base styles.

```css
@import '@radix-ui/themes/styles.css';
```

--------------------------------

### Install Radix Themes

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-storybook/docs/overview/theming.docs.mdx

Installs the Radix Themes package using npm.

```bash
npm install @radix-ui/themes
```

--------------------------------

### Install Dependencies

Source: https://github.com/radix-ng/primitives/blob/main/CONTRIBUTING.md

Installs project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Install @radix-ng/primitives and @angular/cdk

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-storybook/docs/overview/installation.docs.mdx

Installs the necessary packages for using @radix-ng/primitives along with the Angular CDK.

```bash
npm install @radix-ng/primitives @angular/cdk
```

--------------------------------

### Installation

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/calendar/stories/calendar.docs.mdx

Installs the necessary date package and the Radix NG primitives component.

```bash
npm install @internationalized/date
npm install @radix-ng/primitives
```

--------------------------------

### Angular Theme Component Integration

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/themes/overview/getting-started.mdx

Integrate the RdxThemeDirective into your Angular application's root component to apply theme configurations like accent color and scaling.

```typescript
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { RdxThemeDirective } from '@radix-ng/components/theme';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RdxThemeDirective],
  template: \
    <div rdxTheme data-accent-color=\"indigo\"
                  data-radius=\"medium\"
                  data-scaling=\"100%\">
        <h1>Hello from {{ name }}!</h1>
        <a target=\"_blank\" href=\"https://angular.dev/overview\">Learn more about Angular</a>
    </div>
  \
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);
```

--------------------------------

### Install Angular CDK

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/portal/stories/portal.docs.mdx

Installs the Angular CDK package, which is required for using the Portal utility.

```bash
npm install @angular/cdk
```

--------------------------------

### Basic Progress Example

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/progress/stories/progress.docs.mdx

An HTML example demonstrating the basic structure of the Progress component with a root and indicator directive, bound to a progress value.

```html
<div class="ProgressRoot" rdxProgressRoot [value]="progress">
  <div class="ProgressIndicator" rdxProgressIndicator [style.transform]="'translateX(-' + (100 - progress) +'%)'"></div>
</div>
```

--------------------------------

### Basic Switch Example

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/switch/stories/switch.docs.mdx

A simple example demonstrating the basic structure of a Switch component with a label and a toggle button.

```html
<label rdxLabel htmlFor="airplane-mode">Airplane mode</label>
<button id="airplane-mode" rdxSwitchRoot [(checked)]="checked">
  <span rdxSwitchThumb></span>
</button>
```

--------------------------------

### Implement and Style Label Primitive in Angular

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/primitives/overview/getting-started.mdx

Demonstrates how to import and use the RdxLabelRootDirective from Radix Primitives in an Angular component. It includes setting up the component's template, importing the directive, and applying custom CSS styles to the label element.

```typescript
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import 'zone.js';

import { RdxLabelRootDirective } from '@radix-ng/primitives/label';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RdxLabelRootDirective],
    template: `
        <h1>Hello from {{ name }}!</h1>
        <a target="_blank" href="https://angular.dev/overview">Learn more about Angular</a>
        <div>
            <label LabelRoot htmlFor="uniqId">First Name</label>
            <input type="text" class="Input" id="uniqId" />
        </div>
    `
})
export class App {
    name = 'Angular';
}

bootstrapApplication(App);
```

```typescript
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RdxLabelRootDirective],
    template: `
        <h1>Hello from {{ name }}!</h1>
        <a target="_blank" href="https://angular.dev/overview">Learn more about Angular</a>
        <div>
            <label LabelRoot class="Label" htmlFor="uniqId">First Name</label>
            <input type="text" class="Input" id="uniqId" />
        </div>
    `,
    styles: `
        .Label {
            color: white;
            font-size: 15px;
            line-height: 35px;
            font-weight: 500;
        }
    `
})
```

--------------------------------

### Sheet Component Storybook Example

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/dialog/stories/sheet.docs.mdx

This snippet demonstrates how to import and render the Sheet component within Storybook. It includes meta-information, a canvas for rendering the default story, and controls for interactive adjustments.

```typescript
import { Canvas, Controls, Meta } from '@storybook/blocks';
import * as SheetStories from './sheet.stories';

<Meta of={SheetStories} title="Examples/Sheet" />

# Sheet

<Canvas sourceState="hidden" of={SheetStories.Default} />

<Controls />
```

--------------------------------

### Setup CSS Selectors for Body

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-storybook/docs/overview/theming.docs.mdx

Applies the necessary CSS classes to the body element to enable Radix Themes styling.

```html
<body class="radix-themes light light-theme">
  ...
</body>
```

--------------------------------

### Install @internationalized/number

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/primitives/overview/numbers.mdx

Installs the @internationalized/number package using npm.

```bash
npm install @internationalized/number
```

--------------------------------

### Commit Convention Example

Source: https://github.com/radix-ng/primitives/blob/main/CONTRIBUTING.md

An example of a commit message following the conventional commits specification.

```bash
feat(components): add new prop to the avatar component
```

--------------------------------

### Radix SSR Testing Setup

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-ssr-testing/src/index.html

Demonstrates how to set up and configure SSR testing using Radix primitives. This includes importing necessary modules and initializing the testing environment.

```javascript
import { setupSSRTesting } from '@radix/testing';

// Initialize SSR testing environment
setupSSRTesting();

console.log('SSR testing environment configured.');
```

--------------------------------

### Code Component Examples

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/themes/typography/code.mdx

Demonstrates the usage of the Code component with different sizes and variants. It showcases how to control text size and visual style using the `size` and `variant` props respectively.

```html
<p>This is a standard paragraph.</p>
<p>This is <code class="text-sm">small code</code>.</p>
<p>This is <code class="text-md">medium code</code>.</p>
<p>This is <code class="text-lg">large code</code>.</p>

<p>This is <code class="variant-default">default variant</code>.</p>
<p>This is <code class="variant-subtle">subtle variant</code>.</p>
<p>This is <code class="variant-outline">outline variant</code>.</p>
```

--------------------------------

### Pagination Example: With First/Last Buttons

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/pagination/stories/pagination.docs.mdx

Shows how to include first and last page navigation buttons using RdxPaginationFirst and RdxPaginationLast directives.

```html
<div rdxPaginationRoot>
    <div rdxPaginationList #list="rdxPaginationList">
        <button rdxPaginationFirst></button>
        ...
        <button rdxPaginationLast></button>
    </div>
</div>
```

--------------------------------

### Install Progress Directives

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/primitives/components/progress.mdx

Import the necessary directives for the progress component from the Radix-NG primitives library.

```typescript
import { RdxProgressIndicatorDirective, RdxProgressRootDirective } from '@radix-ng/primitives/progress';
```

--------------------------------

### Hover Card Examples

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/hover-card/stories/hover-card.docs.mdx

Demonstrates various use cases of the Hover Card component, including default, multiple instances, event handling, positioning, external triggering, initial state, and animations.

```typescript
import * as HoverCardStories from "./hover-card.stories";

// ... other imports

<Canvas sourceState="hidden" of={HoverCardStories.Default} />
<Canvas sourceState="hidden" of={HoverCardStories.Multiple} />
<Canvas sourceState="hidden" of={HoverCardStories.Events} />
<Canvas sourceState="hidden" of={HoverCardStories.Positioning} />
<Canvas sourceState="hidden" of={HoverCardStories.ExternalTriggering} />
<Canvas sourceState="hidden" of={HoverCardStories.Anchor} />
<Canvas sourceState="hidden" of={HoverCardStories.InitiallyOpen} />
<Canvas sourceState="hidden" of={HoverCardStories.Animations} />
```

--------------------------------

### Avatar High-Contrast Example

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/themes/components/avatar.mdx

Demonstrates how to increase the color contrast of the Avatar component with the background using the `highContrast` prop.

```html
<ComponentThemesPreview name="avatar" file="avatar-hc-demo" />
```

--------------------------------

### Context Menu with Sub-Menu

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/context-menu/README.md

Shows how to create nested context menus (sub-menus) using the `ContextMenu.Sub` components. This example demonstrates a main menu with a sub-menu that has its own items.

```typescript
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuItem,
  ContextMenuContent,
  ContextMenuSub,
  ContextMenuSubTrigger,
  ContextMenuSubContent,
} from '@radix-ng/primitives/context-menu';

function SubMenuContextMenu() {
  return (
    <ContextMenu>
      <ContextMenuTrigger>Open Menu</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem onSelect={() => alert('Main Action')}>Main Action</ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>More Actions</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem onSelect={() => alert('Sub Action 1')}>Sub Action 1</ContextMenuItem>
            <ContextMenuItem onSelect={() => alert('Sub Action 2')}>Sub Action 2</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
      </ContextMenuContent>
    </ContextMenu>
  );
}
```

--------------------------------

### Tooltip Anatomy Example

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/tooltip/stories/tooltip.docs.mdx

Illustrates the basic HTML structure of a tooltip, showing the relationship between the root, trigger, content, close button, and arrow elements.

```html
<ng-container rdxTooltipRoot>
    <button class="IconButton" rdxTooltipTrigger>+</button>

    <ng-template rdxTooltipContent>
        <div class="TooltipContent" rdxTooltipContentAttributes>
            <button class="TooltipClose" rdxTooltipClose aria-label="Close">X</button>
            Tooltip Content
            <div class="TooltipArrow" rdxTooltipArrow></div>
        </div>
    </ng-template>
</ng-container>
```

--------------------------------

### Dropdown Menu Storybook

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/dropdown-menu/stories/dropdown.docs.mdx

This snippet shows the basic Storybook setup for the Dropdown Menu component, including meta information and a canvas displaying the default story.

```typescript
import { Canvas, Meta } from '@storybook/blocks';
import * as DropdownStories from './dropdown.stories';

<Meta title="Primitives/Dropdown Menu" />

# Dropdown Menu

#### Displays a menu to the user—such as a set of actions or functions—triggered by a button.

<Canvas sourceState="hidden" of={DropdownStories.Default} height="300px" />
```

--------------------------------

### Context Menu Default Story

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/context-menu/stories/context-menu.docs.mdx

Renders the default state of the Context Menu component. This serves as a basic example of how to use the component.

```typescript
import { Canvas, Meta } from '@storybook/blocks';
import * as ContextMenuStories from './context-menu.stories';

<Meta title="Primitives/Context Menu" />

# Context Menu

#### Displays a menu to the user—such as a set of actions or functions—triggered by a button.

<Canvas sourceState="hidden" of={ContextMenuStories.Default} height="300px" />
```

--------------------------------

### Directive Selector Example

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-storybook/docs/guides/naming-conventions.docs.mdx

Demonstrates the standard HTML selector format for custom directives in the Radix project, including the required 'rdx' prefix and a descriptive camelCase name.

```html
<rdxDirectiveName></rdxDirectiveName>
```

--------------------------------

### Popover Anatomy Example

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/popover/stories/popover.docs.mdx

Illustrates the basic HTML structure for a Popover component, showing the relationship between the root, trigger, content, close, and arrow elements.

```html
<ng-container rdxPopoverRoot>
    <button class="IconButton" rdxPopoverTrigger>+</button>

    <ng-template rdxPopoverContent>
        <div class="PopoverContent" rdxPopoverContentAttributes>
            <button class="PopoverClose" rdxPopoverClose aria-label="Close">X</button>
            Popover Content
            <div class="PopoverArrow" rdxPopoverArrow></div>
        </div>
    </ng-template>
</ng-container>
```

--------------------------------

### Community Resources

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/primitives/overview/introduction.mdx

Information on how to engage with the Radix-NG community, including links to Discord for discussions and GitHub for issues and contributions.

```Markdown
[Join our Discord](https://discord.gg/NaJb2XRWX9)
[GitHub repo](https://github.com/radix-ng/primitives)
```

--------------------------------

### CalendarDate Usage

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/primitives/overview/dates.mdx

Demonstrates creating and parsing CalendarDate objects, which represent dates without a time component. Includes examples for creating from components, ISO strings, and getting the current date in specific or local timezones.

```typescript
import { CalendarDate, parseDate, today, getLocalTimeZone } from "@internationalized/date";

// From year, month, day parameters
const date = new CalendarDate(2024, 7, 10);

// From ISO 8601 string
const parsedDate = parseDate("2024-07-10");

// Current date in specific timezone
const losAngelesToday = today("America/Los_Angeles");

// Current date in user's timezone
const localToday = today(getLocalTimeZone());
```

--------------------------------

### Credits

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/primitives/overview/introduction.mdx

A list of open-source projects and resources that served as the foundation for Radix-NG, including Radix UI, Radix Vue, Radix Svelte, Spartan UI, and NG Primitives.

```Markdown
- [Radix UI](https://radix.ui.com) (MIT License)
- [Radix Vue](https://radix-vue.com) (MIT License)
- [Radix Svelte](https://radix-svelte.com) (MIT License)
- [Spartan UI](https://www.spartan.ng/) (MIT License)
- [NG Primitives](https://ng-primitives.mintlify.app) (CC BY-ND 4.0)
```

--------------------------------

### Basic Context Menu Implementation

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/context-menu/README.md

Demonstrates a basic implementation of a context menu using the @radix-ng/primitives context menu components. This example shows how to set up the trigger and content, and add a simple menu item.

```typescript
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuItem,
  ContextMenuContent,
} from '@radix-ng/primitives/context-menu';

function MyContextMenu() {
  return (
    <ContextMenu>
      <ContextMenuTrigger>Right Click Me</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem onSelect={() => alert('Action 1 clicked')}>Action 1</ContextMenuItem>
        <ContextMenuItem onSelect={() => alert('Action 2 clicked')}>Action 2</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}
```

--------------------------------

### NX Build Options for Styles

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-storybook/docs/overview/theming.docs.mdx

Configures the build options in NX to include Radix Themes and Angular CDK overlay CSS files, and sets up include paths for style preprocessors.

```json
"styles": [
    "@radix-ui/themes/styles.css",
     // For styling overlay, `cdk-overlay-dark-backdrop`
    "@angular/cdk/overlay-prebuilt.css"
],
"stylePreprocessorOptions": {
    "includePaths": [
        "node_modules/"
    ]
}
```

--------------------------------

### Storybook Meta Configuration

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-storybook/docs/overview/introduction.docs.mdx

Configures Storybook documentation for the introduction page, setting the title for the documentation hierarchy.

```typescript
import { Meta } from '@storybook/addon-docs';

<Meta title="Overview/Introduction" />
```

--------------------------------

### Install @internationalized/number

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/number-field/stories/number-field.docs.mdx

Installs the necessary package for handling locale-specific number formatting and parsing.

```bash
npm install @internationalized/number
```

--------------------------------

### Install Internationalized Date Package

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/date-field/stories/date-field.docs.mdx

Installs the '@internationalized/date' package, a dependency for date and time manipulation.

```bash
npm install @internationalized/date
```

--------------------------------

### Tooltip Import Module

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/tooltip/stories/tooltip.docs.mdx

Demonstrates importing the entire Tooltip module, which includes all necessary directives and components for basic usage.

```typescript
import { RdxTooltipModule } from '@radix-ng/primitives/tooltip';
```

--------------------------------

### Install Date Field Package

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/date-field/stories/date-field.docs.mdx

Installs the Radix NG primitives date field component using npm.

```bash
npm install @radix-ng/primitives
```

--------------------------------

### Install Radix NG Primitives Number Field

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/number-field/stories/number-field.docs.mdx

Installs the Number Field component from the Radix NG Primitives library.

```bash
npm install @radix-ng/primitives
```

--------------------------------

### Install @internationalized/date

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/primitives/overview/dates.mdx

Installs the @internationalized/date package using npm. This package is fundamental for handling dates and times within Radix NG.

```bash
npm install @internationalized/date
```

--------------------------------

### Label Usage Example

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/primitives/components/label.mdx

Shows a basic example of how to use the rdxLabel directive in an HTML template, associating it with an input element using the 'htmlFor' attribute.

```html
<label rdxLabel htmlFor="firstName">First Name</label>
```

--------------------------------

### Install Radix NG Primitives Time Field

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/time-field/stories/time-field.docs.mdx

Installs the Time Field component from the Radix NG Primitives library. This command should be run in your project's terminal.

```bash
npm install @radix-ng/primitives
```

--------------------------------

### Menubar Primitive Usage

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/menubar/README.md

Demonstrates the basic usage of the Menubar primitive, including the MenubarRoot, MenubarTrigger, MenubarContent, MenubarItem, and MenubarSeparator components.

```typescript
import {
  MenubarRoot,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
} from "@radix-ng/primitives/menubar";

function MyMenubar() {
  return (
    <MenubarRoot>
      <MenubarTrigger>File</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>New Tab</MenubarItem>
        <MenubarItem>New Window</MenubarItem>
        <MenubarSeparator />
        <MenubarItem>Close Window</MenubarItem>
      </MenubarContent>
    </MenubarRoot>
  );
}
```

--------------------------------

### Navigation Menu API Reference

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/navigation-menu/stories/navigation-menu.docs.mdx

Comprehensive API documentation for the Navigation Menu component, covering directives, properties, data attributes, and their functionalities.

```APIDOC
Root Directive:
`rdxNavigationMenu`

Description: The root directive that contains all parts of a navigation menu.

Properties:
- `orientation`: 'horizontal' | 'vertical' (default: 'horizontal'). Determines the orientation of the navigation menu.
- `dir`: 'ltr' | 'rtl' (default: 'ltr'). Sets the reading direction of the navigation menu.
- `delayDuration`: number (default: 200). Duration (ms) from mouse enter until content opens.
- `skipDelayDuration`: number (default: 300). Duration (ms) after leaving a submenu before it closes.
- `loop`: boolean (default: false). When true, keyboard navigation loops from last item to first and vice versa.

List Directive:
`rdxNavigationMenuList`

Description: Container for navigation menu items. Must be rendered inside `rdxNavigationMenu` or `rdxNavigationMenuSub`. Has the `menubar` ARIA role.

Item Directive:
`rdxNavigationMenuItem`

Description: A navigation item container that can hold a trigger and content.

Trigger Directive:
`rdxNavigationMenuTrigger`

Description: Button that opens submenu content. Must be rendered inside `rdxNavigationMenuItem`.

Data Attributes:
- `[data-state]`: 'open' | 'closed'. Present when the trigger is open or closed.
- `[data-disabled]`: Present when the trigger is disabled.

Link Directive:
`rdxNavigationMenuLink`

Description: A navigation link. Must be rendered inside `rdxNavigationMenuItem`.

Properties:
- `active`: boolean (default: false). Indicates if the link is active.

Data Attributes:
- `[data-active]`: Present when the link is active.

Content Directive:
`*rdxNavigationMenuContent`

Description: Content displayed when a trigger is activated. Must be rendered inside `rdxNavigationMenuItem`. Used as a structural directive with asterisk syntax. Content renders within the `rdxNavigationMenuViewport`.

Properties:
- `forceMount`: boolean (default: false). Keeps content in the DOM even when closed.

Example Usage with manual data attribute control:
```html
<div *rdxNavigationMenuContent
     class="NavigationMenuContent"
     [attr.data-state]="'open'"
     [attr.data-motion]="'from-start'">
  <!-- Content -->
</div>
```

Indicator Directive:
`rdxNavigationMenuIndicator`

Description: Visual indicator for active menu items. Must be rendered inside `rdxNavigationMenuList`.

Properties:
- `forceMount`: boolean (default: false). Keeps indicator in the DOM even when hidden.

Data Attributes:
- `[data-state]`: 'visible' | 'hidden'. Present when the indicator is visible or hidden.

Viewport Directive:
`rdxNavigationMenuViewport`

Description: Component that displays active content. Must be rendered inside `rdxNavigationMenu`.

Properties:
- `forceMount`: boolean (default: false). Keeps viewport in the DOM even when closed.

Data Attributes:
- `[data-state]`: 'open' | 'closed'. Present when the viewport is open or closed.

Sub Directive:
`rdxNavigationMenuSub`

Description: Container for nested submenus. Contains its own `rdxNavigationMenuList` and items. Must be rendered inside `rdxNavigationMenuItem`.

Properties:
- `orientation`: 'horizontal' | 'vertical' (default: 'horizontal'). Orientation of submenu list.
- `defaultValue`: string (default: ''). Value of item that should be open by default.
```

--------------------------------

### Install @internationalized/date Package

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/time-field/stories/time-field.docs.mdx

Installs the necessary date and time handling package required for the Time Field component. This package provides solutions for common JavaScript date and time complexities.

```bash
npm install @internationalized/date
```

--------------------------------

### Dialog Service Usage

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/primitives/components/dialog.mdx

Demonstrates opening a dialog using the `RdxDialogService.open()` method.

```typescript
import { Component, inject } from '@angular/core';
import { RdxDialogService } from '@radix-ng/primitives/dialog';
import { MyDialogContentComponent } from './my-dialog-content.component';

@Component({...})
export class AppComponent {
    #dialog = inject(RdxDialogService);

    openDialog() {
        const dialogRef = this.#dialog.open({
            content: MyDialogContentComponent,
        });
    }
}
```

--------------------------------

### Separator HTML Usage

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/separator/stories/separator.docs.mdx

Shows an example of using the separator directive in HTML with orientation and decorative attributes.

```html
<div rdxSeparatorRoot decorative="decorative" orientation="vertical"></div>
```

--------------------------------

### Context Menu API Documentation

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/context-menu/README.md

This section details the API for the Context Menu primitives, including available components, props, and their functionalities. It covers the core components like ContextMenu, Trigger, Content, Item, CheckboxItem, RadioItem, and Separator.

```APIDOC
ContextMenu:
  A wrapper component for the entire context menu.
  Props:
    - `open` (boolean): Controls the open state of the menu.
    - `onOpenChange` (function): Callback when the open state changes.
    - `dir` ('ltr' | 'rtl'): Text direction.
    - `modal` (boolean): Whether the menu should be modal.

ContextMenu.Trigger:
  The element that triggers the context menu on right-click or context menu event.
  Props:
    - `asChild` (boolean): If true, renders the trigger element as the passed child.

ContextMenu.Content:
  The container for the context menu items.
  Props:
    - `asChild` (boolean): If true, renders the content as the passed child.
    - `side` ('top' | 'right' | 'bottom' | 'left'): Preferred side for the menu.
    - `align` ('start' | 'center' | 'end'): Alignment of the menu on the chosen side.
    - `collisionBoundary` (Element | null): Element to detect collisions against.
    - `collisionPadding` (number): Padding to add to collision detection.
    - `sticky` ('normal' | 'always'): How the menu sticks to the trigger.
    - `hideWhenDetached` (boolean): Whether to hide the menu when detached from the trigger.
    - `portalled` (boolean): Whether to portal the menu content.
    - `onPlaced` (function): Callback when the menu is placed.
    - `onCloseAutoFocus` (function): Callback when focus is restored after closing.
    - `onEscapeKeyDown` (function): Callback when the escape key is pressed.
    - `onPointerDownOutside` (function): Callback when pointer is down outside the menu.
    - `onFocusOutside` (function): Callback when focus is outside the menu.
    - `onInteractOutside` (function): Callback when interaction occurs outside the menu.

ContextMenu.Item:
  An individual item within the context menu.
  Props:
    - `asChild` (boolean): If true, renders the item as the passed child.
    - `disabled` (boolean): Whether the item is disabled.
    - `onSelect` (function): Callback when the item is selected.
    - `textValue` (string): Text value for keyboard navigation.
    - `closeWhenSelectsItem` (boolean): Whether to close the menu when this item is selected.

ContextMenu.CheckboxItem:
  A checkbox item within the context menu.
  Props:
    - `asChild` (boolean): If true, renders the item as the passed child.
    - `checked` (boolean | 'indeterminate'): Checked state of the checkbox.
    - `onCheckedChange` (function): Callback when the checked state changes.
    - `disabled` (boolean): Whether the item is disabled.
    - `onSelect` (function): Callback when the item is selected.
    - `textValue` (string): Text value for keyboard navigation.
    - `closeWhenSelectsItem` (boolean): Whether to close the menu when this item is selected.

ContextMenu.RadioItem:
  A radio item within the context menu.
  Props:
    - `asChild` (boolean): If true, renders the item as the passed child.
    - `value` (string): The value of the radio item.
    - `disabled` (boolean): Whether the item is disabled.
    - `onSelect` (function): Callback when the item is selected.
    - `textValue` (string): Text value for keyboard navigation.
    - `closeWhenSelectsItem` (boolean): Whether to close the menu when this item is selected.

ContextMenu.RadioGroup:
  A group for radio items.
  Props:
    - `value` (string): The currently selected radio item value.
    - `onValueChange` (function): Callback when the selected value changes.
    - `asChild` (boolean): If true, renders the group as the passed child.

ContextMenu.Separator:
  A visual separator between items.
  Props:
    - `asChild` (boolean): If true, renders the separator as the passed child.

ContextMenu.Label:
  A label for a group of items.
  Props:
    - `asChild` (boolean): If true, renders the label as the passed child.

ContextMenu.Sub:
  A sub-menu trigger.
  Props:
    - `open` (boolean): Controls the open state of the sub-menu.
    - `onOpenChange` (function): Callback when the open state changes.
    - `asChild` (boolean): If true, renders the sub-menu trigger as the passed child.
    - `closeWhenMatch` (boolean): Whether to close the parent menu when this sub-menu is matched.

ContextMenu.SubTrigger:
  The trigger for a sub-menu.
  Props:
    - `asChild` (boolean): If true, renders the trigger as the passed child.
    - `disabled` (boolean): Whether the trigger is disabled.
    - `textValue` (string): Text value for keyboard navigation.

ContextMenu.SubContent:
  The content container for a sub-menu.
  Props:
    - `asChild` (boolean): If true, renders the content as the passed child.
    - `side` ('top' | 'right' | 'bottom' | 'left'): Preferred side for the sub-menu.
    - `align` ('start' | 'center' | 'end'): Alignment of the sub-menu on the chosen side.
    - `collisionBoundary` (Element | null): Element to detect collisions against.
    - `collisionPadding` (number): Padding to add to collision detection.
    - `sticky` ('normal' | 'always'): How the sub-menu sticks to the trigger.
    - `hideWhenDetached` (boolean): Whether to hide the sub-menu when detached from the trigger.
    - `portalled` (boolean): Whether to portal the sub-menu content.
    - `onPlaced` (function): Callback when the sub-menu is placed.
    - `onCloseAutoFocus` (function): Callback when focus is restored after closing.
    - `onEscapeKeyDown` (function): Callback when the escape key is pressed.
    - `onPointerDownOutside` (function): Callback when pointer is down outside the sub-menu.
    - `onFocusOutside` (function): Callback when focus is outside the sub-menu.
    - `onInteractOutside` (function): Callback when interaction occurs outside the sub-menu.

```

--------------------------------

### Import Global CSS Files

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-storybook/docs/overview/theming.docs.mdx

Imports the necessary global CSS files for Radix Themes and Angular CDK overlay styling.

```css
@import '@radix-ui/themes/styles.css';
@import '@angular/cdk/overlay-prebuilt.css';
```

--------------------------------

### Pagination Example: With Ellipsis

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/pagination/stories/pagination.docs.mdx

Illustrates how to use the RdxPaginationEllipsisDirective to display an ellipsis for longer page lists.

```html
<div rdxPaginationRoot>
    <div rdxPaginationList #list="rdxPaginationList">

        @for (item of list.transformedRange(); track item) {
            @if (item.type == 'page') {
                <button rdxPaginationListItem [value]="item.value">{{ item.value }}</button>
            } @else {
                <div rdxPaginationEllipsis>&#8230;</div>
            }
        }

    </div>
</div>
```

--------------------------------

### Storybook Meta Configuration

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-storybook/docs/overview/accessibility.docs.mdx

Configuration for Storybook documentation, setting the title and description for the accessibility overview page.

```typescript
import { Meta } from '@storybook/addon-docs';

<Meta
  title="Overview/Accessibility"
  description="Radix Primitives follow the WAI-ARIA authoring practices guidelines and are tested in a wide selection of modern browsers and commonly used assistive technologies."
/>
```

--------------------------------

### Avatar Size Example

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/themes/components/avatar.mdx

Demonstrates how to control the size of the Avatar component using the `size` prop.

```html
<ComponentThemesPreview name="avatar" file="avatar-sizes-demo" />
```

--------------------------------

### Dialog API Documentation

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/dialog/README.md

This section details the API for the Dialog primitive, including its components, props, and usage patterns for creating accessible modal dialogs.

```APIDOC
Dialog:
  A primitive for creating accessible modal dialogs.

  Components:
    - Root: The main container for the dialog.
    - Trigger: The element that opens the dialog.
    - Content: The content of the dialog.
    - Close: The element to close the dialog.
    - Overlay: An optional overlay that appears behind the dialog.
    - Title: The title of the dialog.
    - Description: A description for the dialog.

  Props (Root):
    - open?: boolean
      Controls the open state of the dialog.
    - defaultOpen?: boolean
      The initial open state of the dialog.
    - onOpenChange?(open: boolean): void
      Callback fired when the open state changes.
    - modal?: boolean
      When true, the dialog is "modal" and prevents interaction with elements outside the dialog.
    - preventScroll?: boolean
      When true, prevents the body from scrolling when the dialog is open.
    - trapFocus?: boolean
      When true, traps focus within the dialog.
    - initialFocus?: string | HTMLElement | null
      Element to focus initially when the dialog opens.
    - returnFocus?: boolean
      When true, the element that triggered the dialog will receive focus back when the dialog is closed.
    - id?: string
      Unique identifier for the dialog.
    - dir?: 'ltr' | 'rtl'
      Sets the reading direction of the dialog.
    - lang?: string
      Sets the language of the dialog.
    - className?: string
      CSS class name for the dialog container.
    - style?: React.CSSProperties
      Inline styles for the dialog container.

  Props (Trigger):
    - asChild?: boolean
      When true, renders the trigger as the child element.
    - id?: string
      Unique identifier for the trigger.
    - className?: string
      CSS class name for the trigger.
    - style?: React.CSSProperties
      Inline styles for the trigger.

  Props (Content):
    - asChild?: boolean
      When true, renders the content as the child element.
    - forceMount?: boolean
      Force mounting the content even when closed.
    - onOpenAutoFocus?(event: Event): void
      Callback fired when the dialog opens, before the focus is trapped.
    - onCloseAutoFocus?(event: Event): void
      Callback fired when the dialog closes, before the focus is returned.
    - onEscapeKeyDown?(event: KeyboardEvent): void
      Callback fired when the escape key is pressed.
    - onPointerDownOutside?(event: PointerEvent): void
      Callback fired when a pointer event occurs outside the dialog.
    - onInteractOutside?(event: Event): void
      Callback fired when an interaction occurs outside the dialog.
    - onDismiss?(event: Event): void
      Callback fired when the dialog is dismissed.
    - id?: string
      Unique identifier for the content.
    - className?: string
      CSS class name for the content.
    - style?: React.CSSProperties
      Inline styles for the content.

  Props (Close):
    - asChild?: boolean
      When true, renders the close button as the child element.
    - id?: string
      Unique identifier for the close button.
    - className?: string
      CSS class name for the close button.
    - style?: React.CSSProperties
      Inline styles for the close button.

  Props (Overlay):
    - asChild?: boolean
      When true, renders the overlay as the child element.
    - id?: string
      Unique identifier for the overlay.
    - className?: string
      CSS class name for the overlay.
    - style?: React.CSSProperties
      Inline styles for the overlay.

  Props (Title):
    - asChild?: boolean
      When true, renders the title as the child element.
    - id?: string
      Unique identifier for the title.
    - className?: string
      CSS class name for the title.
    - style?: React.CSSProperties
      Inline styles for the title.

  Props (Description):
    - asChild?: boolean
      When true, renders the description as the child element.
    - id?: string
      Unique identifier for the description.
    - className?: string
      CSS class name for the description.
    - style?: React.CSSProperties
      Inline styles for the description.

  Example Usage:
    import React from 'react';
    import { Dialog } from '@radix-ng/primitives';

    function MyDialog() {
      return (
        <Dialog.Root>
          <Dialog.Trigger>Open Dialog</Dialog.Trigger>
          <Dialog.Portal>
            <Dialog.Overlay />
            <Dialog.Content>
              <Dialog.Title>My Dialog Title</Dialog.Title>
              <Dialog.Description>This is a description of my dialog.</Dialog.Description>
              <Dialog.Close>Close</Dialog.Close>
            </Dialog.Content>
          </Dialog.Portal>
        </Dialog.Root>
      );
    }
```

--------------------------------

### Switch API Documentation

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/switch/README.md

Provides detailed API documentation for the Switch component, including its properties, methods, and events.

```APIDOC
Switch.Root:
  Props:
    checked?: boolean
      - Controlled state of the switch.
    defaultChecked?: boolean
      - Uncontrolled state of the switch.
    onCheckedChange?: (checked: boolean) => void
      - Event handler called when the switch state changes.
    disabled?: boolean
      - When true, visually and functionally disables the switch.
    required?: boolean
      - If true, the switch must be activated (checked) before a form can be submitted.
    name?: string
      - Used to reference the value of the control when submitting a form.
    value?: string
      - The value of the switch when it is checked.

Switch.Thumb:
  Props:
    asChild?: boolean
      - Change the underlying DOM node used for the switch thumb. Defaults to false.
```

--------------------------------

### Avatar Color Example

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/themes/components/avatar.mdx

Shows how to assign a specific color to the Avatar component using the `color` prop.

```html
<ComponentThemesPreview name="avatar" file="avatar-color-demo" />
```

--------------------------------

### Avatar Variant Example

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/themes/components/avatar.mdx

Illustrates how to change the visual style of the Avatar component using the `variant` prop.

```html
<ComponentThemesPreview name="avatar" file="avatar-variant-demo" />
```

--------------------------------

### Tooltip Usage

Source: https://github.com/radix-ng/primitives/blob/main/packages/primitives/tooltip/README.md

Demonstrates how to import and use the Tooltip component from the secondary entry point of Radix NG Primitives.

```typescript
import { Tooltip } from "@radix-ng/primitives/tooltip";

// Example usage:
<Tooltip>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
  <Tooltip.Content>This is a tooltip!</Tooltip.Content>
</Tooltip>
```

--------------------------------

### Avatar Radius Example

Source: https://github.com/radix-ng/primitives/blob/main/apps/radix-docs/src/content/themes/components/avatar.mdx

Illustrates how to assign a specific radius value to the Avatar component using the `radius` prop.

```html
<ComponentThemesPreview name="avatar" file="avatar-radius-demo" />
```