@lumaui/angular 0.1.0

package/src/lib/button/button.directive.ts

@@ -0,0 +1,34 @@
+import { Directive, input, computed, HostBinding } from '@angular/core';
+import {
+  buttonVariants,
+  type ButtonVariant,
+  type ButtonSize,
+} from '@lumaui/core';
+
+@Directive({
+  selector: 'button[lumaButton], a[lumaButton]',
+  host: {
+    '[attr.type]': 'lmType()',
+    '[attr.disabled]': 'lmDisabled() ? "" : null',
+  },
+})
+export class ButtonDirective {
+  // Signal-based inputs with lm prefix (Angular 20+)
+  lmVariant = input<ButtonVariant>('primary');
+  lmSize = input<ButtonSize>('md');
+  lmDisabled = input<boolean>(false);
+  lmType = input<'button' | 'submit' | 'reset'>('button');
+
+  // Computed class string
+  classes = computed(() =>
+    buttonVariants({
+      variant: this.lmVariant(),
+      size: this.lmSize(),
+    }),
+  );
+
+  @HostBinding('class')
+  get hostClasses(): string {
+    return this.classes();
+  }
+}

package/src/lib/button/button.docs.md

@@ -0,0 +1,209 @@
+---
+name: Button
+type: directive
+selector: button[lumaButton], a[lumaButton]
+category: Form
+description: Versatile, accessible button element that follows Neo-Minimal design principles with calm interactions and visual silence.
+inputs:
+  - name: lmVariant
+    type: "'primary' | 'outline' | 'ghost' | 'danger'"
+    default: "'primary'"
+    description: Visual style variant of the button
+  - name: lmSize
+    type: "'sm' | 'md' | 'lg' | 'full'"
+    default: "'md'"
+    description: Size of the button
+  - name: lmDisabled
+    type: boolean
+    default: 'false'
+    description: Whether the button is disabled
+  - name: lmType
+    type: "'button' | 'submit' | 'reset'"
+    default: "'button'"
+    description: HTML button type attribute
+tokens:
+  - name: --luma-button-primary-bg
+    value: oklch(0.54 0.1 230)
+    description: Primary button background
+  - name: --luma-button-primary-bg-hover
+    value: oklch(0.49 0.09 230)
+    description: Primary button hover background
+  - name: --luma-button-primary-bg-active
+    value: oklch(0.44 0.08 230)
+    description: Primary button active background
+  - name: --luma-button-primary-text
+    value: oklch(1 0 0)
+    description: Primary button text color
+  - name: --luma-button-outline-border
+    value: oklch(0.5 0.01 0)
+    description: Outline button border color
+  - name: --luma-button-outline-border-hover
+    value: oklch(0.2 0.005 0)
+    description: Outline button hover border
+  - name: --luma-button-outline-bg-hover
+    value: oklch(0.96 0.01 230)
+    description: Outline button hover background
+  - name: --luma-button-outline-text
+    value: oklch(0.2 0.005 0)
+    description: Outline button text color
+  - name: --luma-button-ghost-bg
+    value: transparent
+    description: Ghost button background
+  - name: --luma-button-ghost-bg-hover
+    value: oklch(0.96 0.01 230)
+    description: Ghost button hover background
+  - name: --luma-button-ghost-text
+    value: oklch(0.2 0.005 0)
+    description: Ghost button text color
+  - name: --luma-button-danger-bg
+    value: oklch(0.55 0.22 25)
+    description: Danger button background
+  - name: --luma-button-danger-bg-hover
+    value: oklch(0.50 0.20 25)
+    description: Danger button hover background
+  - name: --luma-button-danger-bg-active
+    value: oklch(0.45 0.18 25)
+    description: Danger button active background
+  - name: --luma-button-danger-text
+    value: oklch(1 0 0)
+    description: Danger button text color
+  - name: --luma-button-radius
+    value: 10px
+    description: Button border radius
+  - name: --luma-button-transition-duration
+    value: 200ms
+    description: Transition duration
+  - name: --luma-button-focus-ring-width
+    value: 2px
+    description: Focus ring width
+  - name: --luma-button-focus-ring-color
+    value: oklch(0.54 0.1 230 / 0.25)
+    description: Focus ring color
+---
+
+# Button
+
+## Purpose
+
+The Button component provides a versatile, accessible button element that follows Neo-Minimal design principles with calm interactions and visual silence.
+
+## States
+
+- **Default**: Base appearance with calm visual presence
+- **Hover**: Gentle background color transition, no scale or shadow
+- **Focus**: Clear ring outline for keyboard navigation
+- **Active**: Slightly darker background on click
+- **Disabled**: Reduced opacity (50%) with disabled cursor
+
+## Usage Examples
+
+### Basic Button
+
+```html
+<button lumaButton>Click me</button>
+```
+
+### Variants
+
+```html
+<button lumaButton lmVariant="primary">Primary</button>
+<button lumaButton lmVariant="outline">Outline</button>
+<button lumaButton lmVariant="ghost">Ghost</button>
+<button lumaButton lmVariant="danger">Delete</button>
+```
+
+### Sizes
+
+```html
+<button lumaButton lmSize="sm">Small</button>
+<button lumaButton lmSize="md">Medium</button>
+<button lumaButton lmSize="lg">Large</button>
+<button lumaButton lmSize="full">Full Width</button>
+```
+
+### Disabled State
+
+```html
+<button lumaButton [lmDisabled]="true">Disabled</button>
+```
+
+### Link as Button
+
+```html
+<a lumaButton href="/path" lmVariant="primary">Link Button</a>
+```
+
+## Customizing
+
+The button appearance can be customized using CSS variables. The most common customization is the border-radius, controlled by `--luma-button-radius`.
+
+### Override Globally
+
+Override the button border-radius in your global styles or component:
+
+```css
+/* In your global styles.css */
+:root {
+  --luma-button-radius: 4px; /* More sharp */
+}
+```
+
+### Override Per Theme
+
+Apply different radius values for light and dark themes:
+
+```css
+/* Light mode - subtle rounding */
+:root {
+  --luma-button-radius: 8px;
+}
+
+/* Dark mode - more pronounced rounding */
+.dark {
+  --luma-button-radius: 16px;
+}
+```
+
+### Override Per Component
+
+Scope the radius change to specific contexts:
+
+```css
+/* Only buttons in the header */
+.header {
+  --luma-button-radius: 4px;
+}
+
+/* Only buttons in cards */
+.card {
+  --luma-button-radius: 12px;
+}
+```
+
+**Default value:** `var(--luma-radius-md)` → `10px`
+
+## Neo-Minimal Principles
+
+The button design embodies core Neo-Minimal values:
+
+- **Visual Silence**: Colors are slightly desaturated, close to gray, comfortable for long viewing
+- **Calm Interactions**: Transitions are gentle (150ms) with no scale or elastic effects
+- **Organic Geometry**: Border radius is generous enough to feel "drawn" not "calculated"
+- **Functional Whitespace**: Padding uses design tokens for consistent rhythm
+- **Silent Accessibility**: Focus states are clear but discrete, touch areas are comfortable (44px+)
+
+## Accessibility
+
+- ✅ **WCAG AA compliant**: All variants meet 4.5:1 contrast ratio
+- ✅ **Keyboard accessible**: Full keyboard navigation with visible focus states
+- ✅ **Screen reader friendly**: Proper ARIA attributes and semantic HTML
+- ✅ **Touch-friendly**: Minimum touch target size of 44x44px
+- ✅ **Disabled state**: Properly communicated via `disabled` attribute
+
+## Implementation Notes
+
+- Uses Angular 20+ signal-based inputs (`input()`)
+- Styled with Tailwind CSS v4 arbitrary values
+- Type-safe variants via class-variance-authority (CVA)
+- OnPush change detection for optimal performance
+- Works as both `<button>` and `<a>` elements

package/src/lib/button/index.ts

@@ -0,0 +1,3 @@
+export * from './button.directive';
+// Re-export types from core for convenience
+export type { ButtonVariant, ButtonSize, ButtonVariants } from '@lumaui/core';

package/src/lib/card/card-content.directive.ts

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[lumaCardContent]',
+  host: {
+    class: '',
+  },
+})
+export class CardContentDirective {
+  // Semantic marker for card content region
+  // No styles applied to preserve maximum flexibility
+  // Maintained for backward compatibility and semantic HTML structure
+}

package/src/lib/card/card-description.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, input, computed } from '@angular/core';
+import {
+  cardDescriptionVariants,
+  type CardDescriptionSize,
+} from '@lumaui/core';
+
+@Directive({
+  selector: '[lumaCardDescription]',
+  host: {
+    '[class]': 'classes()',
+  },
+})
+export class CardDescriptionDirective {
+  // Signal-based inputs with lm prefix (Angular 20+)
+  lmSize = input<CardDescriptionSize>('normal');
+
+  // Computed class string
+  classes = computed(() => cardDescriptionVariants({ size: this.lmSize() }));
+}

package/src/lib/card/card-directives.spec.ts

@@ -0,0 +1,309 @@
+import {
+  CardContentDirective,
+  CardDescriptionDirective,
+  CardHeaderDirective,
+  CardTitleDirective,
+} from './';
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { By } from '@angular/platform-browser';
+
+// Test host components for each directive
+@Component({
+  template: `<h3 lumaCardTitle [lmSize]="lmSize">Test Title</h3>`,
+  imports: [CardTitleDirective],
+})
+class CardTitleTestComponent {
+  lmSize: 'small' | 'normal' | 'large' = 'normal';
+}
+
+@Component({
+  template: `<p lumaCardDescription [lmSize]="lmSize">Test Description</p>`,
+  imports: [CardDescriptionDirective],
+})
+class CardDescriptionTestComponent {
+  lmSize: 'small' | 'normal' | 'large' = 'normal';
+}
+
+@Component({
+  template: `<div lumaCardHeader>Test Header</div>`,
+  imports: [CardHeaderDirective],
+})
+class CardHeaderTestComponent {}
+
+@Component({
+  template: `<div lumaCardContent>Test Content</div>`,
+  imports: [CardContentDirective],
+})
+class CardContentTestComponent {}
+
+describe('CardTitleDirective', () => {
+  let fixture: ComponentFixture<CardTitleTestComponent>;
+  let _component: CardTitleTestComponent;
+  let titleElement: DebugElement;
+  let directive: CardTitleDirective;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CardTitleDirective, CardTitleTestComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CardTitleTestComponent);
+    _component = fixture.componentInstance;
+    titleElement = fixture.debugElement.query(By.directive(CardTitleDirective));
+    directive = titleElement.injector.get(CardTitleDirective);
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(directive).toBeTruthy();
+  });
+
+  it('should apply base classes', () => {
+    fixture.detectChanges();
+
+    const classes = directive.classes();
+
+    expect(classes).toContain('font-medium');
+    expect(classes).toContain('tracking-tight');
+    expect(classes).toContain('mb-1');
+    expect(classes).toContain('lm-text-primary');
+  });
+
+  it('should apply normal size by default', () => {
+    fixture.detectChanges();
+
+    const classes = directive.classes();
+    expect(classes).toContain('text-lg');
+  });
+
+  it('should use computed signal for classes', () => {
+    expect(typeof directive.classes).toBe('function');
+
+    const classes = directive.classes();
+    expect(typeof classes).toBe('string');
+  });
+
+  it('should use signal-based input for size', () => {
+    expect(typeof directive.lmSize).toBe('function');
+
+    const size = directive.lmSize();
+    expect(size).toBe('normal');
+  });
+});
+
+describe('CardDescriptionDirective', () => {
+  let fixture: ComponentFixture<CardDescriptionTestComponent>;
+  let _component: CardDescriptionTestComponent;
+  let descriptionElement: DebugElement;
+  let directive: CardDescriptionDirective;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CardDescriptionDirective, CardDescriptionTestComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CardDescriptionTestComponent);
+    _component = fixture.componentInstance;
+    descriptionElement = fixture.debugElement.query(
+      By.directive(CardDescriptionDirective),
+    );
+    directive = descriptionElement.injector.get(CardDescriptionDirective);
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(directive).toBeTruthy();
+  });
+
+  it('should apply base classes', () => {
+    fixture.detectChanges();
+
+    const classes = directive.classes();
+
+    expect(classes).toContain('lm-text-secondary');
+    expect(classes).toContain('mb-5');
+  });
+
+  it('should apply normal size by default', () => {
+    fixture.detectChanges();
+
+    const classes = directive.classes();
+    expect(classes).toContain('text-sm');
+  });
+
+  it('should use computed signal for classes', () => {
+    expect(typeof directive.classes).toBe('function');
+
+    const classes = directive.classes();
+    expect(typeof classes).toBe('string');
+  });
+
+  it('should use signal-based input for size', () => {
+    expect(typeof directive.lmSize).toBe('function');
+
+    const size = directive.lmSize();
+    expect(size).toBe('normal');
+  });
+});
+
+describe('CardHeaderDirective', () => {
+  let fixture: ComponentFixture<CardHeaderTestComponent>;
+  let headerElement: DebugElement;
+  let directive: CardHeaderDirective;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CardHeaderDirective, CardHeaderTestComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CardHeaderTestComponent);
+    headerElement = fixture.debugElement.query(
+      By.directive(CardHeaderDirective),
+    );
+    directive = headerElement.injector.get(CardHeaderDirective);
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(directive).toBeTruthy();
+  });
+
+  it('should apply mb-4 class for spacing', () => {
+    fixture.detectChanges();
+
+    const element = headerElement.nativeElement as HTMLElement;
+    expect(element.className).toContain('mb-4');
+  });
+
+  it('should be a structural directive with no inputs', () => {
+    expect(directive).toBeDefined();
+
+    expect(directive).toBeTruthy();
+  });
+});
+
+describe('CardContentDirective', () => {
+  let fixture: ComponentFixture<CardContentTestComponent>;
+  let contentElement: DebugElement;
+  let directive: CardContentDirective;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CardContentDirective, CardContentTestComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CardContentTestComponent);
+    contentElement = fixture.debugElement.query(
+      By.directive(CardContentDirective),
+    );
+    directive = contentElement.injector.get(CardContentDirective);
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(directive).toBeTruthy();
+  });
+
+  it('should exist as semantic marker without applying styles', () => {
+    fixture.detectChanges();
+
+    // Should have empty class or just the directive itself
+    // No specific styling should be applied
+    expect(directive).toBeDefined();
+  });
+
+  it('should be a structural directive with no inputs', () => {
+    // Verify it's a simple structural directive
+    expect(directive).toBeDefined();
+
+    // Directive exists for semantic HTML structure
+    // No API surface to test - existence is sufficient
+    expect(directive).toBeTruthy();
+  });
+
+  it('should serve as backward compatibility marker', () => {
+    // Directive exists primarily for semantic HTML and backward compatibility
+    // No functional behavior to test beyond existence
+    expect(directive).toBeTruthy();
+  });
+});
+
+// Integration test for all directives together
+@Component({
+  template: `
+    <div lumaCardHeader>
+      <h3 lumaCardTitle lmSize="large">Integration Test</h3>
+      <p lumaCardDescription lmSize="small">Testing all directives together</p>
+    </div>
+    <div lumaCardContent>
+      <p>Content area</p>
+    </div>
+  `,
+  imports: [
+    CardHeaderDirective,
+    CardTitleDirective,
+    CardDescriptionDirective,
+    CardContentDirective,
+  ],
+})
+class IntegrationTestComponent {}
+
+describe('Card Directives Integration', () => {
+  let fixture: ComponentFixture<IntegrationTestComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        CardHeaderDirective,
+        CardTitleDirective,
+        CardDescriptionDirective,
+        CardContentDirective,
+        IntegrationTestComponent,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IntegrationTestComponent);
+    await fixture.whenStable();
+  });
+
+  it('should work together in a composed structure', () => {
+    fixture.detectChanges();
+
+    const headerElement = fixture.debugElement.query(
+      By.directive(CardHeaderDirective),
+    );
+    const titleElement = fixture.debugElement.query(
+      By.directive(CardTitleDirective),
+    );
+    const descriptionElement = fixture.debugElement.query(
+      By.directive(CardDescriptionDirective),
+    );
+    const contentElement = fixture.debugElement.query(
+      By.directive(CardContentDirective),
+    );
+
+    expect(headerElement).toBeTruthy();
+    expect(titleElement).toBeTruthy();
+    expect(descriptionElement).toBeTruthy();
+    expect(contentElement).toBeTruthy();
+  });
+
+  it('should apply all directive classes correctly', () => {
+    fixture.detectChanges();
+
+    const titleDirective = fixture.debugElement
+      .query(By.directive(CardTitleDirective))
+      .injector.get(CardTitleDirective);
+    const descriptionDirective = fixture.debugElement
+      .query(By.directive(CardDescriptionDirective))
+      .injector.get(CardDescriptionDirective);
+
+    const titleClasses = titleDirective.classes();
+    const descriptionClasses = descriptionDirective.classes();
+
+    expect(titleClasses).toContain('text-2xl'); // large size
+    expect(descriptionClasses).toContain('text-xs'); // small size
+  });
+});

package/src/lib/card/card-header.directive.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[lumaCardHeader]',
+  host: {
+    class: 'mb-4',
+  },
+})
+export class CardHeaderDirective {
+  // Structural directive for semantic card header region
+  // Provides bottom margin for spacing between header and content
+}

package/src/lib/card/card-title.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, input, computed } from '@angular/core';
+import { cardTitleVariants, type CardTitleSize } from '@lumaui/core';
+
+@Directive({
+  selector: '[lumaCardTitle]',
+  host: {
+    '[class]': 'classes()',
+  },
+})
+export class CardTitleDirective {
+  // Signal-based inputs with lm prefix (Angular 20+)
+  lmSize = input<CardTitleSize>('normal');
+
+  // Computed class string
+  classes = computed(() => cardTitleVariants({ size: this.lmSize() }));
+}

package/src/lib/card/card.component.html

@@ -0,0 +1,5 @@
+<div [class]="wrapperClasses()">
+  <div [class]="contentClasses()">
+    <ng-content></ng-content>
+  </div>
+</div>