@semantic-components/ui-lab 0.63.0 → 0.65.0

package/eslint.config.mjs

@@ -1,39 +0,0 @@
-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

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

package/project.json

@@ -1,28 +0,0 @@
-{
-  "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

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

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

@@ -1,269 +0,0 @@
-## 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

@@ -1,58 +0,0 @@
-# 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

@@ -1,31 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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';