@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/dialog/README.md

@@ -1,208 +0,0 @@
-# ScDialog Components
-
-A set of Angular components for creating accessible modal dialogs with shadcn/ui styling.
-
-## Architecture
-
-The components follow a dependency injection (DI) pattern where child components inject the parent `ScDialogProvider` to access shared state. `ScDialogProvider` owns all overlay lifecycle logic (CDK overlay, backdrop, focus trap). The `ScDialogPortal` directive marks the lazy content template that gets portaled into the overlay.
-
-```
-ScDialogProvider (root wrapper - manages open state + overlay lifecycle)
-├── ScDialogTrigger (button that opens dialog)
-└── ng-template[scDialogPortal] (lazy content, portaled to CDK overlay)
-    └── ScDialog (dialog container)
-        ├── ScDialogClose (close button)
-        ├── ScDialogHeader
-        │   ├── ScDialogTitle
-        │   └── ScDialogDescription
-        ├── (user content)
-        └── ScDialogFooter
-```
-
-## Components
-
-| Component             | Selector                      | Description                                       |
-| --------------------- | ----------------------------- | ------------------------------------------------- |
-| `ScDialogProvider`    | `div[sc-dialog-provider]`     | Root wrapper, manages open state + overlay        |
-| `ScDialogTrigger`     | `button[sc-dialog-trigger]`   | Button that opens the dialog                      |
-| `ScDialogPortal`      | `ng-template[scDialogPortal]` | Directive marking lazy content for the overlay    |
-| `ScDialog`            | `div[sc-dialog]`              | Dialog panel with animations                      |
-| `ScDialogHeader`      | `div[sc-dialog-header]`       | Header section container                          |
-| `ScDialogTitle`       | `h2[sc-dialog-title]`         | Dialog title (aria-labelledby)                    |
-| `ScDialogDescription` | `p[sc-dialog-description]`    | Dialog description (aria-describedby)             |
-| `ScDialogFooter`      | `div[sc-dialog-footer]`       | Footer section for actions                        |
-| `ScDialogClose`       | `button[sc-dialog-close]`     | Close button (sets `type="button"` automatically) |
-
-## Usage
-
-### Basic Dialog
-
-```html
-<div sc-dialog-provider [(open)]="isOpen">
-  <button sc-dialog-trigger>Open Dialog</button>
-  <ng-template scDialogPortal>
-    <div sc-dialog>
-      <button sc-dialog-close>
-        <svg><!-- X icon --></svg>
-        <span class="sr-only">Close</span>
-      </button>
-      <div sc-dialog-header>
-        <h2 sc-dialog-title>Dialog Title</h2>
-        <p sc-dialog-description>Dialog description goes here.</p>
-      </div>
-      <!-- Your content -->
-      <div sc-dialog-footer>
-        <button>Cancel</button>
-        <button>Save</button>
-      </div>
-    </div>
-  </ng-template>
-</div>
-```
-
-### Controlled Dialog
-
-You can control the dialog state programmatically using the `open` model:
-
-```typescript
-@Component({
-  template: `
-    <div sc-dialog-provider [(open)]="isOpen">
-      <button sc-dialog-trigger>Open</button>
-      <ng-template scDialogPortal>
-        <div sc-dialog>
-          <!-- content -->
-        </div>
-      </ng-template>
-    </div>
-  `,
-})
-export class MyComponent {
-  isOpen = signal(false);
-
-  openDialog() {
-    this.isOpen.set(true);
-  }
-
-  closeDialog() {
-    this.isOpen.set(false);
-  }
-}
-```
-
-### Form Dialog
-
-```html
-<div sc-dialog-provider [(open)]="isOpen">
-  <button sc-dialog-trigger>Edit Profile</button>
-  <ng-template scDialogPortal>
-    <form>
-      <div sc-dialog>
-        <button sc-dialog-close>
-          <svg><!-- X icon --></svg>
-        </button>
-        <div sc-dialog-header>
-          <h2 sc-dialog-title>Edit profile</h2>
-          <p sc-dialog-description>Make changes to your profile here.</p>
-        </div>
-        <div class="grid gap-4 py-4">
-          <div class="grid grid-cols-4 items-center gap-4">
-            <label for="name" class="text-right">Name</label>
-            <input id="name" class="col-span-3" />
-          </div>
-        </div>
-        <div sc-dialog-footer>
-          <button type="submit">Save changes</button>
-        </div>
-      </div>
-    </form>
-  </ng-template>
-</div>
-```
-
-## Keyboard Navigation
-
-| Key      | Action                 |
-| -------- | ---------------------- |
-| `Escape` | Close dialog           |
-| `Tab`    | Navigate within dialog |
-
-## How It Works
-
-### State Management
-
-`ScDialogProvider` uses a `model` signal for the `open` state:
-
-```typescript
-readonly open = model<boolean>(false);
-```
-
-Child components inject `ScDialogProvider` to read or modify this state:
-
-```typescript
-// ScDialogTrigger
-openDialog(): void {
-  this.dialogProvider.open.set(true);
-}
-
-// ScDialogClose
-closeDialog(): void {
-  this.dialogProvider.open.set(false);
-}
-```
-
-### Overlay Management
-
-`ScDialogProvider` creates a CDK overlay and attaches/detaches the `scDialogPortal` template based on state:
-
-```typescript
-effect(() => {
-  if (this.overlayOpen()) {
-    this.attachDialog();
-  } else {
-    this.detachDialog();
-  }
-});
-```
-
-The `scDialogPortal` directive marks the `ng-template` whose content is lazily instantiated into the overlay only when the dialog opens.
-
-### Animations
-
-`ScDialog` uses a three-state animation model:
-
-| State    | Data Attribute | Description                                              |
-| -------- | -------------- | -------------------------------------------------------- |
-| `idle`   | `data-idle`    | Hidden (`opacity-0`), resting state                      |
-| `open`   | `data-open`    | Entry animation (`fade-in`, `zoom-in`)                   |
-| `closed` | `data-closed`  | Exit animation (`fade-out`, `zoom-out`) → back to `idle` |
-
-The flow is: `idle` → `open` → `closed` → `idle`
-
-On `animationend`, the `closed` state resets to `idle`, which triggers overlay cleanup via `onDialogAnimationComplete()`.
-
-## Accessibility
-
-- `role="dialog"` on the content
-- `aria-modal="true"` for modal behavior
-- `aria-labelledby` linked to `ScDialogTitle`
-- `aria-describedby` linked to `ScDialogDescription`
-- `aria-haspopup="dialog"` on the trigger
-- `aria-expanded` reflects open state on trigger
-- Focus trapped within the dialog
-- Escape key closes the dialog
-- Click outside (backdrop) closes the dialog
-
-## Customization
-
-All components accept a `class` input for custom styling:
-
-```html
-<div sc-dialog class="max-w-2xl">
-  <!-- wider dialog -->
-</div>
-
-<div sc-dialog-footer class="flex-row-reverse">
-  <!-- reversed button order -->
-</div>
-```

package/src/lib/components/dialog/dialog-close.ts

@@ -1,33 +0,0 @@
-import { computed, Directive, inject, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScDialogProvider } from './dialog-provider';
-import { buttonVariants, ScButtonVariants } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'button[sc-dialog-close]',
-  host: {
-    'data-slot': 'dialog-close',
-    type: 'button',
-    '[class]': 'class()',
-    '(click)': 'closeDialog()',
-  },
-})
-export class ScDialogClose {
-  private readonly dialogProvider = inject(ScDialogProvider);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly variant = input<ScButtonVariants['variant']>('ghost');
-  readonly size = input<ScButtonVariants['size']>('icon-sm');
-
-  protected readonly class = computed(() =>
-    cn(
-      'absolute top-2 right-2',
-      buttonVariants({ variant: this.variant(), size: this.size() }),
-      this.classInput(),
-    ),
-  );
-
-  protected closeDialog(): void {
-    this.dialogProvider.open.set(false);
-  }
-}

package/src/lib/components/dialog/dialog-description.ts

@@ -1,23 +0,0 @@
-import { computed, Directive, inject, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScDialog } from './dialog';
-
-@Directive({
-  selector: 'p[sc-dialog-description]',
-  host: {
-    'data-slot': 'dialog-description',
-    '[id]': 'dialog.descriptionId',
-    '[class]': 'class()',
-  },
-})
-export class ScDialogDescription {
-  readonly dialog = inject(ScDialog);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/dialog/dialog-footer.ts

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'div[sc-dialog-footer]',
-  host: {
-    'data-slot': 'dialog-footer',
-    '[class]': 'class()',
-  },
-})
-export class ScDialogFooter {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/dialog/dialog-header.ts

@@ -1,17 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'div[sc-dialog-header]',
-  host: {
-    'data-slot': 'dialog-header',
-    '[class]': 'class()',
-  },
-})
-export class ScDialogHeader {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('gap-2 flex flex-col', this.classInput()),
-  );
-}

package/src/lib/components/dialog/dialog-portal.ts

@@ -1,8 +0,0 @@
-import { Directive, inject, TemplateRef } from '@angular/core';
-
-@Directive({
-  selector: 'ng-template[scDialogPortal]',
-})
-export class ScDialogPortal {
-  readonly templateRef = inject(TemplateRef);
-}

package/src/lib/components/dialog/dialog-provider.ts

@@ -1,175 +0,0 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { CdkTrapFocus } from '@angular/cdk/a11y';
-import { Overlay, OverlayModule, OverlayRef } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  contentChild,
-  effect,
-  inject,
-  input,
-  model,
-  signal,
-  TemplateRef,
-  viewChild,
-  ViewContainerRef,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScBackdrop } from '../backdrop';
-import { ScDialogPortal } from './dialog-portal';
-
-@Component({
-  selector: 'div[sc-dialog-provider]',
-  imports: [OverlayModule, ScBackdrop, CdkTrapFocus, NgTemplateOutlet],
-  template: `
-    <ng-content />
-    <ng-template #overlayTemplate>
-      <div
-        sc-backdrop
-        [open]="open()"
-        (animationComplete)="onBackdropAnimationComplete()"
-      ></div>
-      <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
-        <ng-container [ngTemplateOutlet]="dialogPortal().templateRef" />
-      </div>
-    </ng-template>
-  `,
-  host: {
-    'data-slot': 'dialog-provider',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScDialogProvider {
-  private readonly overlay = inject(Overlay);
-  private readonly viewContainerRef = inject(ViewContainerRef);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  private readonly overlayTemplate =
-    viewChild.required<TemplateRef<unknown>>('overlayTemplate');
-
-  protected readonly dialogPortal = contentChild.required(ScDialogPortal);
-
-  /**
-   * Logical state: Controls animation state (open/closed)
-   * - When true: Triggers entry animation
-   * - When false: Triggers exit animation
-   */
-  readonly open = model<boolean>(false);
-
-  /**
-   * Physical state: Controls DOM presence
-   * - When true: Content exists in DOM (can animate)
-   * - When false: Content removed from DOM
-   * - Stays true during close animation to allow it to complete
-   */
-  readonly overlayOpen = signal<boolean>(false);
-
-  /**
-   * Tracks how many animations have completed during close sequence
-   * Target: 2 (dialog + backdrop)
-   */
-  private readonly animationsCompleted = signal<number>(0);
-
-  private overlayRef: OverlayRef | null = null;
-
-  protected readonly class = computed(() => cn('contents', this.classInput()));
-
-  constructor() {
-    // Synchronize overlay state with logical state for opening
-    effect(() => {
-      if (this.open()) {
-        // Opening: Mount DOM immediately so animation can start
-        this.overlayOpen.set(true);
-        // Reset counter when opening for next close cycle
-        this.animationsCompleted.set(0);
-      }
-      // Note: When closing (open = false), overlayOpen stays true
-      // until both animations complete (handled by animation completion methods)
-    });
-
-    // Close overlay when both animations complete
-    effect(() => {
-      const completed = this.animationsCompleted();
-      if (completed === 2 && !this.open()) {
-        this.overlayOpen.set(false);
-        // Reset for next cycle
-        this.animationsCompleted.set(0);
-      }
-    });
-
-    // Attach/detach CDK overlay based on overlayOpen state
-    effect(() => {
-      if (this.overlayOpen()) {
-        this.attachDialog();
-      } else {
-        this.detachDialog();
-      }
-    });
-  }
-
-  /**
-   * Called by dialog when its close animation completes
-   */
-  onDialogAnimationComplete(): void {
-    if (!this.open()) {
-      this.animationsCompleted.update((n) => n + 1);
-    }
-  }
-
-  /**
-   * Called when backdrop close animation completes
-   */
-  onBackdropAnimationComplete(): void {
-    if (!this.open()) {
-      this.animationsCompleted.update((n) => n + 1);
-    }
-  }
-
-  private getOverlayRef() {
-    if (!this.overlayRef) {
-      this.overlayRef = this.overlay.create({
-        positionStrategy: this.overlay
-          .position()
-          .global()
-          .centerHorizontally()
-          .centerVertically(),
-        hasBackdrop: true,
-        backdropClass: 'cdk-overlay-transparent-backdrop',
-        scrollStrategy: this.overlay.scrollStrategies.block(),
-      });
-
-      this.overlayRef.backdropClick().subscribe(() => this.closeDialog());
-      this.overlayRef.keydownEvents().subscribe((event) => {
-        if (event.key === 'Escape') this.closeDialog();
-      });
-    }
-    return this.overlayRef;
-  }
-
-  private attachDialog(): void {
-    const ref = this.getOverlayRef();
-    if (!ref.hasAttached()) {
-      const portal = new TemplatePortal(
-        this.overlayTemplate(),
-        this.viewContainerRef,
-      );
-      ref.attach(portal);
-    }
-  }
-
-  private detachDialog(): void {
-    if (this.overlayRef?.hasAttached()) {
-      this.overlayRef.detach();
-    }
-  }
-
-  private closeDialog(): void {
-    this.open.set(false);
-  }
-}

package/src/lib/components/dialog/dialog-title.ts

@@ -1,20 +0,0 @@
-import { computed, Directive, inject, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScDialog } from './dialog';
-
-@Directive({
-  selector: 'h2[sc-dialog-title]',
-  host: {
-    'data-slot': 'dialog-title',
-    '[id]': 'dialog.titleId',
-    '[class]': 'class()',
-  },
-})
-export class ScDialogTitle {
-  readonly dialog = inject(ScDialog);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('text-base leading-none font-medium', this.classInput()),
-  );
-}

package/src/lib/components/dialog/dialog-trigger.ts

@@ -1,25 +0,0 @@
-import { computed, Directive, inject, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScDialogProvider } from './dialog-provider';
-
-@Directive({
-  selector: 'button[sc-dialog-trigger]',
-  host: {
-    'data-slot': 'dialog-trigger',
-    type: 'button',
-    '[class]': 'class()',
-    '[attr.aria-haspopup]': '"dialog"',
-    '[attr.aria-expanded]': 'dialogProvider.open()',
-    '(click)': 'openDialog()',
-  },
-})
-export class ScDialogTrigger {
-  readonly dialogProvider = inject(ScDialogProvider);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() => cn('', this.classInput()));
-
-  openDialog(): void {
-    this.dialogProvider.open.set(true);
-  }
-}

package/src/lib/components/dialog/dialog.ts

@@ -1,79 +0,0 @@
-import { _IdGenerator } from '@angular/cdk/a11y';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  ElementRef,
-  inject,
-  input,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScDialogProvider } from './dialog-provider';
-
-type ScDialogState = 'idle' | 'open' | 'closed';
-
-@Component({
-  selector: 'div[sc-dialog]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'dialog',
-    role: 'dialog',
-    'aria-modal': 'true',
-    '[attr.aria-labelledby]': 'titleId',
-    '[attr.aria-describedby]': 'descriptionId',
-    '[attr.data-idle]': 'state() === "idle" ? "" : null',
-    '[attr.data-open]': 'state() === "open" ? "" : null',
-    '[attr.data-closed]': 'state() === "closed" ? "" : null',
-    '[class]': 'class()',
-    '[tabindex]': '-1',
-    '(animationend)': 'onAnimationEnd($event)',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScDialog {
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-
-  readonly dialogProvider = inject(ScDialogProvider);
-  readonly classInput = input<string>('', { alias: 'class' });
-  protected readonly state = signal<ScDialogState>('idle');
-
-  readonly dialogId = inject(_IdGenerator).getId('sc-dialog-');
-
-  readonly titleId = `${this.dialogId}-title`;
-  readonly descriptionId = `${this.dialogId}-description`;
-
-  protected readonly class = computed(() =>
-    cn(
-      'relative bg-background ring-foreground/10 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm',
-      'data-idle:opacity-0',
-      'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',
-      'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-      this.classInput(),
-    ),
-  );
-
-  constructor() {
-    // Sync state with provider's open signal
-    effect(() => {
-      const isOpen = this.dialogProvider.open();
-      this.state.set(isOpen ? 'open' : 'closed');
-    });
-  }
-
-  protected onAnimationEnd(event: AnimationEvent): void {
-    // Only trigger cleanup when close animation completes
-    if (
-      this.state() === 'closed' &&
-      event.target === this.elementRef.nativeElement
-    ) {
-      this.state.set('idle');
-      this.dialogProvider.onDialogAnimationComplete();
-    }
-  }
-}

package/src/lib/components/dialog/index.ts

@@ -1,9 +0,0 @@
-export { ScDialogProvider } from './dialog-provider';
-export { ScDialogTrigger } from './dialog-trigger';
-export { ScDialogPortal } from './dialog-portal';
-export { ScDialog } from './dialog';
-export { ScDialogHeader } from './dialog-header';
-export { ScDialogTitle } from './dialog-title';
-export { ScDialogDescription } from './dialog-description';
-export { ScDialogFooter } from './dialog-footer';
-export { ScDialogClose } from './dialog-close';