@semantic-components/ui-lab 0.62.0 → 0.63.0

package/eslint.config.mjs

@@ -0,0 +1,39 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  {
+    files: ['**/*.json'],
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        {
+          ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs,ts,cts,mts}'],
+        },
+      ],
+    },
+    languageOptions: {
+      parser: await import('jsonc-eslint-parser'),
+    },
+  },
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': 'off',
+      '@angular-eslint/component-selector': 'off',
+      '@angular-eslint/no-input-rename': 'off',
+      '@angular-eslint/no-output-native': 'off',
+      '@angular-eslint/template/label-has-associated-control': 'off',
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {
+      '@angular-eslint/template/label-has-associated-control': 'off',
+    },
+  },
+];

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/ui-lab",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semantic-components/ui-lab",
-  "version": "0.62.0",
+  "version": "0.63.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -22,22 +22,8 @@
     "rxjs": ">=7.8.2",
     "@angular/platform-browser": ">=21.1.1",
     "@semantic-icons/lucide-icons": ">=0.56.0",
-    "@semantic-components/ui": "0.62.0",
+    "@semantic-components/ui": "0.63.0",
     "class-variance-authority": ">=0.7.1"
   },
-  "sideEffects": false,
-  "module": "fesm2022/semantic-components-ui-lab.mjs",
-  "typings": "types/semantic-components-ui-lab.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/semantic-components-ui-lab.d.ts",
-      "default": "./fesm2022/semantic-components-ui-lab.mjs"
-    }
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
+  "sideEffects": false
 }

package/project.json

@@ -0,0 +1,28 @@
+{
+  "name": "ui-lab",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ui-lab/src",
+  "prefix": "sc",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "libs/ui-lab/ng-package.json",
+        "tsConfig": "libs/ui-lab/tsconfig.lib.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/ui-lab/tsconfig.lib.prod.json"
+        },
+        "development": {}
+      },
+      "defaultConfiguration": "production"
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/layouts';
+export * from './lib/components';

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

@@ -0,0 +1,269 @@
+## Import
+
+```typescript
+import { ScAccordion, ScAccordionItem, ScAccordionHeader, ScAccordionTrigger, ScAccordionPanel, ScAccordionContent, ScAccordionTriggerIcon } from '@semantic-components/ui-lab';
+```
+
+## Architecture
+
+```
+ScAccordion (Root - uses AccordionGroup)
+    ├── multiExpandable: boolean
+    ├── disabled: boolean
+    ├── wrap: boolean
+    │
+    ├── ScAccordionItem (styling wrapper)
+    │     │
+    │     ├── ScAccordionHeader (flex container for trigger)
+    │     │      └── ScAccordionTrigger (uses AccordionTrigger)
+    │     │            ├── panelId: string (links to panel)
+    │     │            ├── expanded: boolean
+    │     │            └── disabled: boolean
+    │     │            └── svg[sc-accordion-trigger-icon] (optional icon)
+    │     │
+    │     └── ScAccordionPanel (uses AccordionPanel + animation wrapper)
+    │           │
+    │           ├── panelId: string (links to trigger)
+    │           ├── animate.enter / animate.leave (on internal div)
+    │           │
+    │           └── ScAccordionContent (content styling wrapper)
+    │
+    ├── ScAccordionItem
+    └── ...
+```
+
+## Components
+
+| Component                | Selector                         | Description                                             |
+| ------------------------ | -------------------------------- | ------------------------------------------------------- |
+| `ScAccordion`            | `div[sc-accordion]`              | Root wrapper using `AccordionGroup`                     |
+| `ScAccordionItem`        | `div[sc-accordion-item]`         | Styling wrapper for accordion item                      |
+| `ScAccordionHeader`      | `div[sc-accordion-header]`       | Flex container for trigger                              |
+| `ScAccordionTrigger`     | `button[sc-accordion-trigger]`   | Button to toggle item using `AccordionTrigger`          |
+| `ScAccordionPanel`       | `div[sc-accordion-panel]`        | Collapsible panel with animation using `AccordionPanel` |
+| `ScAccordionContent`     | `div[sc-accordion-content]`      | Content styling wrapper with padding and typography     |
+| `ScAccordionTriggerIcon` | `svg[sc-accordion-trigger-icon]` | Directive to flip an SVG icon                           |
+
+## Inputs
+
+### ScAccordion
+
+| Input             | Type      | Default | Description                             |
+| ----------------- | --------- | ------- | --------------------------------------- |
+| `multiExpandable` | `boolean` | `true`  | Allow multiple items to be open at once |
+| `disabled`        | `boolean` | `false` | Disable all accordion items             |
+| `wrap`            | `boolean` | `false` | Wrap keyboard navigation at ends        |
+
+### ScAccordionHeader
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+The `ScAccordionHeader` component is a flex container that wraps the `ScAccordionTrigger`. It provides the layout structure for the accordion header.
+
+### ScAccordionTrigger
+
+| Input      | Type      | Default      | Description                              |
+| ---------- | --------- | ------------ | ---------------------------------------- |
+| `panelId`  | `string`  | **required** | Links trigger to its corresponding panel |
+| `expanded` | `boolean` | `false`      | Whether the item is expanded             |
+| `disabled` | `boolean` | `false`      | Whether the trigger is disabled          |
+
+The trigger is a button that toggles the expanded state of an accordion panel.
+
+### ScAccordionPanel
+
+| Input     | Type     | Default      | Description                              |
+| --------- | -------- | ------------ | ---------------------------------------- |
+| `panelId` | `string` | **required** | Links panel to its corresponding trigger |
+
+The `ScAccordionPanel` component wraps collapsible content using `AccordionPanel` from Angular ARIA. It includes an internal animated div wrapper with `text-sm overflow-hidden` classes and Angular's `animate.enter`/`animate.leave` directives for smooth expand/collapse transitions.
+
+### ScAccordionContent
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+The `ScAccordionContent` component provides content styling including padding (`pt-0 pb-2.5`), link styles (underlined with hover effects), and paragraph spacing. Must be nested inside `ScAccordionPanel`.
+
+### ScAccordionTriggerIcon
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+The `ScAccordionTriggerIcon` directive applies rotation to an SVG icon based on the expanded state of the accordion trigger.
+
+## Usage
+
+### Basic Usage
+
+Use `panelId` to link each trigger to its corresponding panel. By default, multiple panels can be open at the same time. Set `[multiExpandable]="false"` if you want only one panel open at a time.
+
+```html
+<div sc-accordion [multiExpandable]="false">
+  <div sc-accordion-item>
+    <div sc-accordion-header>
+      <button sc-accordion-trigger panelId="item-1">
+        Is it accessible?
+        <svg si-chevron-down-icon sc-accordion-trigger-icon></svg>
+      </button>
+    </div>
+    <div sc-accordion-panel panelId="item-1">
+      <div sc-accordion-content>Yes. It adheres to the WAI-ARIA design pattern.</div>
+    </div>
+  </div>
+  <div sc-accordion-item>
+    <div sc-accordion-header>
+      <button sc-accordion-trigger panelId="item-2">
+        Is it styled?
+        <svg si-chevron-down-icon sc-accordion-trigger-icon></svg>
+      </button>
+    </div>
+    <div sc-accordion-panel panelId="item-2">
+      <div sc-accordion-content>Yes. It comes with default styles that match other components.</div>
+    </div>
+  </div>
+  <div sc-accordion-item>
+    <div sc-accordion-header>
+      <button sc-accordion-trigger panelId="item-3">
+        Is it animated?
+        <svg si-chevron-down-icon sc-accordion-trigger-icon></svg>
+      </button>
+    </div>
+    <div sc-accordion-panel panelId="item-3">
+      <div sc-accordion-content>Yes. It's animated by default with smooth transitions.</div>
+    </div>
+  </div>
+</div>
+```
+
+### Multiple Expandable
+
+Allow multiple items to be open simultaneously.
+
+```html
+<div sc-accordion [multiExpandable]="true">
+  <div sc-accordion-item>
+    <div sc-accordion-header>
+      <button sc-accordion-trigger panelId="item-1" [expanded]="true">
+        Section 1
+        <svg si-chevron-down-icon sc-accordion-trigger-icon></svg>
+      </button>
+    </div>
+    <div sc-accordion-panel panelId="item-1">
+      <div sc-accordion-content>Content 1</div>
+    </div>
+  </div>
+  <div sc-accordion-item>
+    <div sc-accordion-header>
+      <button sc-accordion-trigger panelId="item-2" [expanded]="true">
+        Section 2
+        <svg si-chevron-down-icon sc-accordion-trigger-icon></svg>
+      </button>
+    </div>
+    <div sc-accordion-panel panelId="item-2">
+      <div sc-accordion-content>Content 2</div>
+    </div>
+  </div>
+  <div sc-accordion-item>
+    <div sc-accordion-header>
+      <button sc-accordion-trigger panelId="item-3">
+        Section 3
+        <svg si-chevron-down-icon sc-accordion-trigger-icon></svg>
+      </button>
+    </div>
+    <div sc-accordion-panel panelId="item-3">
+      <div sc-accordion-content>Content 3</div>
+    </div>
+  </div>
+</div>
+```
+
+### Two-Way Binding
+
+Bind to the `expanded` state of individual triggers.
+
+```html
+<button sc-accordion-trigger panelId="item-1" [(expanded)]="isOpen">Section 1</button>
+```
+
+### Disabled Item
+
+Disable individual triggers.
+
+```html
+<div sc-accordion-item>
+  <div sc-accordion-header>
+    <button sc-accordion-trigger panelId="disabled" [disabled]="true">
+      Disabled Section
+      <svg si-chevron-down-icon sc-accordion-trigger-icon></svg>
+    </button>
+  </div>
+  <div sc-accordion-panel panelId="disabled">
+    <div sc-accordion-content>Won't be shown</div>
+  </div>
+</div>
+```
+
+### Disabled Accordion
+
+Disable the entire accordion.
+
+```html
+<div sc-accordion [disabled]="true">...</div>
+```
+
+## Features
+
+- **Single or Multiple Expansion**: Control whether one or multiple panels can be open simultaneously
+- **Smooth Animations**: Uses Angular's `animate.enter`/`animate.leave` with `tw-animate-css`
+- **Keyboard Navigation**: Full keyboard support with arrow keys
+- **Fully Accessible**: Built on `@angular/aria/accordion` with proper ARIA attributes
+- **Customizable**: All components accept custom classes
+- **Type-Safe**: Full TypeScript support with Angular signals
+
+## Accessibility
+
+Built on `@angular/aria/accordion`, providing:
+
+- Trigger buttons have `aria-expanded` indicating open state
+- Trigger buttons have `aria-controls` pointing to their panel
+- Panels have `role="region"` and `aria-labelledby` pointing to their trigger
+- Keyboard navigation with arrow keys between triggers
+- `data-state` attribute on triggers and panels (`open` / `closed`)
+- Disabled items have `disabled` attribute and are skipped in keyboard navigation
+
+## Styling
+
+The components use Tailwind CSS with shadcn/ui design tokens:
+
+- Items have `border-b` for visual separation (via `ScAccordionItem`)
+- Triggers show underline on hover (removed when focused for better UX)
+- Built-in chevron icons automatically rotate 180° based on expanded state
+- `ScAccordionPanel` includes an internal animated wrapper with `text-sm overflow-hidden` for smooth transitions
+- `ScAccordionContent` provides content styling with padding (`pt-0 pb-2.5`), link underlines, and paragraph spacing
+- Focus states use a ring style for keyboard navigation
+- All components support custom classes via the `class` input
+
+## Animation
+
+The accordion uses Angular's built-in `animate.enter` and `animate.leave` API combined with animations from `tw-animate-css`. Animation is handled by an internal div wrapper within the `ScAccordionPanel` component.
+
+### Setup
+
+Make sure you have `tw-animate-css` imported in your CSS:
+
+```css
+@import 'tw-animate-css';
+```
+
+### How It Works
+
+- **Opening**: When a panel expands, Angular applies the `animate-accordion-down` class via `animate.enter` on the internal animated div within `ScAccordionPanel`
+- **Closing**: When a panel collapses, Angular applies the `animate-accordion-up` class via `animate.leave` on the internal animated div
+- **Timing**: Angular handles all animation timing and cleanup automatically
+
+The animations provide smooth height transitions from `0` to the content height when opening, and back to `0` when closing. The `overflow-hidden` class on the animated wrapper ensures content is properly clipped during the transition.

package/src/lib/components/accordion/TODO.md

@@ -0,0 +1,58 @@
+# Accordion TODO
+
+## Add `value` prop to ScAccordionItem
+
+Currently, the accordion uses `panelId` on both `ScAccordionTrigger` and `ScAccordionPanel` to link them together. This requires duplicating the ID in both places.
+
+### Goal
+
+Add a `value` input to `ScAccordionItem` that automatically propagates to its children (`ScAccordionTrigger` and `ScAccordionPanel`) using Angular's `signalSetFn`.
+
+### Implementation
+
+1. **ScAccordionItem**
+   - Add `value` input signal
+   - Use `signalSetFn` to provide the value to children
+
+2. **ScAccordionTrigger**
+   - Remove `panelId` input (or make it optional)
+   - Inject the `value` from parent `ScAccordionItem` via `signalSetFn`
+   - Use the injected value as `panelId`
+
+3. **ScAccordionPanel**
+   - Remove `panelId` input (or make it optional)
+   - Inject the `value` from parent `ScAccordionItem` via `signalSetFn`
+   - Use the injected value as `panelId`
+
+### Benefits
+
+- **Single source of truth**: Value defined once on the item
+- **Less repetition**: No need to specify `panelId` on both trigger and panel
+- **Better DX**: Cleaner API for users
+
+### Before
+
+```html
+<div sc-accordion-item>
+  <button sc-accordion-trigger panelId="item-1">Trigger</button>
+  <div sc-accordion-panel panelId="item-1">
+    <div sc-accordion-content>Content</div>
+  </div>
+</div>
+```
+
+### After
+
+```html
+<div sc-accordion-item value="item-1">
+  <button sc-accordion-trigger>Trigger</button>
+  <div sc-accordion-panel>
+    <div sc-accordion-content>Content</div>
+  </div>
+</div>
+```
+
+### References
+
+- Angular `signalSetFn` documentation
+- Similar pattern used in other component libraries (Radix, shadcn, etc.)

package/src/lib/components/accordion/accordion-content.ts

@@ -0,0 +1,31 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-accordion-content]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'accordion-content',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScAccordionContent {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'pt-0 pb-2.5 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',
+      this.classInput(),
+    ),
+  );
+}

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

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

package/src/lib/components/accordion/accordion-item.ts

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'div[sc-accordion-item]',
+  host: {
+    'data-slot': 'accordion-item',
+    '[class]': 'class()',
+  },
+})
+export class ScAccordionItem {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('not-last:border-b', this.classInput()),
+  );
+}

package/src/lib/components/accordion/accordion-panel.ts

@@ -0,0 +1,42 @@
+import { AccordionContent, AccordionPanel } from '@angular/aria/accordion';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-accordion-panel]',
+  imports: [AccordionContent],
+  hostDirectives: [
+    {
+      directive: AccordionPanel,
+      inputs: ['panelId'],
+    },
+  ],
+  template: `
+    <ng-template ngAccordionContent>
+      <div
+        class="text-sm overflow-hidden"
+        animate.enter="animate-accordion-down"
+        animate.leave="animate-accordion-up"
+      >
+        <ng-content />
+      </div>
+    </ng-template>
+  `,
+  host: {
+    'data-slot': 'accordion-panel',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScAccordionPanel {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() => cn('', this.classInput()));
+}

package/src/lib/components/accordion/accordion-trigger-icon.ts

@@ -0,0 +1,27 @@
+import { Directive, inject, input, computed } from '@angular/core';
+import { AccordionTrigger } from '@angular/aria/accordion';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'svg[sc-accordion-trigger-icon]',
+  host: {
+    'data-slot': 'accordion-trigger-icon',
+    '[class]': 'class()',
+  },
+})
+export class ScAccordionTriggerIcon {
+  private readonly trigger = inject(AccordionTrigger, {
+    host: true,
+    optional: true,
+  });
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'pointer-events-none shrink-0',
+      this.trigger?.expanded() && 'rotate-180',
+      this.classInput(),
+    ),
+  );
+}

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

@@ -0,0 +1,46 @@
+import { AccordionTrigger } from '@angular/aria/accordion';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'button[sc-accordion-trigger]',
+  hostDirectives: [
+    {
+      directive: AccordionTrigger,
+      inputs: ['panelId', 'disabled', 'expanded'],
+      outputs: ['expandedChange'],
+    },
+  ],
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'accordion-trigger',
+    type: 'button',
+    '[attr.data-state]': 'trigger.expanded() ? "open" : "closed"',
+    '[attr.data-disabled]': 'trigger.disabled() ? "" : null',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [],
+})
+export class ScAccordionTrigger {
+  protected readonly trigger = inject(AccordionTrigger);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'w-full focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none data-disabled:pointer-events-none data-disabled:opacity-50 disabled:pointer-events-none disabled:opacity-50',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/accordion/accordion.ts

@@ -0,0 +1,35 @@
+import { AccordionGroup } from '@angular/aria/accordion';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-accordion]',
+  hostDirectives: [
+    {
+      directive: AccordionGroup,
+      inputs: ['disabled', 'multiExpandable', 'wrap'],
+    },
+  ],
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'accordion',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScAccordion {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('flex w-full flex-col', this.classInput()),
+  );
+}

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

@@ -0,0 +1,7 @@
+export { ScAccordion } from './accordion';
+export { ScAccordionPanel } from './accordion-panel';
+export { ScAccordionItem } from './accordion-item';
+export { ScAccordionTrigger } from './accordion-trigger';
+export { ScAccordionHeader } from './accordion-header';
+export { ScAccordionContent } from './accordion-content';
+export { ScAccordionTriggerIcon } from './accordion-trigger-icon';