@doku-com/tala 1.0.0-alpha.6 → 1.0.0-alpha.7

package/llms.txt

@@ -1,244 +0,0 @@
-# @doku-com/tala
-
-Angular UI component library by DOKU. Provides accessible, themeable standalone components built with Angular signals and OnPush change detection.
-
-## Installation
-
-```bash
-npm install @doku-com/tala
-```
-
-Add global styles to your `angular.json`:
-
-```json
-"styles": ["node_modules/@doku-com/tala/styles/index.scss"]
-```
-
-Or import in your global stylesheet:
-
-```scss
-@use '@doku-com/tala';
-```
-
----
-
-## Design Tokens
-
-All tokens are CSS custom properties. Apply via `var(--token-name)`.
-
-### Colors
-
-Surface:
-- `--tala-sys-color-surface-sunken` — recessed areas like inputs or code blocks
-- `--tala-sys-color-surface-default` — base page and standard cards
-- `--tala-sys-color-surface-raised` — cards or panels that sit above the page
-- `--tala-sys-color-surface-overlay` — modals, drawers, and popovers
-- `--tala-sys-color-surface-inverse` — dark/inverted sections
-
-Outline:
-- `--tala-sys-color-outline-default` — subtle dividers and input borders at rest
-- `--tala-sys-color-outline-strong` — more prominent borders needing higher contrast
-- `--tala-sys-color-outline-focus` — keyboard focus ring on interactive elements
-
-Text:
-- `--tala-sys-color-text-primary` — main body copy and headings
-- `--tala-sys-color-text-secondary` — supporting labels, captions, and metadata
-- `--tala-sys-color-text-tertiary` — de-emphasized hints or supplemental info
-- `--tala-sys-color-text-disabled` — non-interactive / unavailable text
-- `--tala-sys-color-text-inverse` — text on dark or inverse surfaces
-- `--tala-sys-color-text-placeholder` — input placeholder copy
-- `--tala-sys-color-text-link` — interactive inline links
-
-Brand:
-- `--tala-sys-color-brand` — primary CTA and key accent color
-- `--tala-sys-color-on-brand` — content placed on top of a brand-colored surface
-- `--tala-sys-color-brand-hover` — brand color on pointer hover
-- `--tala-sys-color-brand-subtle` — light tinted surface for brand-adjacent areas
-
-Error (destructive interactive):
-- `--tala-sys-color-error` — destructive buttons, icons, and controls
-- `--tala-sys-color-on-error` — content placed on top of an error-colored surface
-- `--tala-sys-color-error-hover` — error color on pointer hover
-
-Feedback (read-only status):
-- `--tala-sys-color-success-surface`, `--tala-sys-color-success-text`, `--tala-sys-color-success-outline`
-- `--tala-sys-color-warning-surface`, `--tala-sys-color-warning-text`, `--tala-sys-color-warning-outline`
-- `--tala-sys-color-error-surface`, `--tala-sys-color-error-text`, `--tala-sys-color-error-outline`
-- `--tala-sys-color-info-surface`, `--tala-sys-color-info-text`, `--tala-sys-color-info-outline`
-
-### Spacing
-
-- `--space-1: 4px`
-- `--space-2: 8px`
-- `--space-3: 12px`
-- `--space-4: 16px`
-- `--space-5: 20px`
-- `--space-6: 24px`
-- `--space-8: 32px`
-- `--space-10: 40px`
-- `--space-12: 48px`
-- `--space-16: 64px`
-
-### Typography
-
-Font families:
-- `--font-family-din` — DIN Next LT Pro (headings)
-- `--font-family-inter` — Inter (body)
-- `--font-family-jetbrains` — JetBrains Mono (code)
-
-Font weights:
-- `--font-weight-regular: 400`
-- `--font-weight-medium: 500`
-- `--font-weight-semibold: 600`
-- `--font-weight-bold: 700`
-
-Font sizes: `--font-size-11` through `--font-size-40` (px values)
-
-### Border Radius
-
-- `--radius-none: 0px`
-- `--radius-xs: 2px`
-- `--radius-sm: 4px`
-- `--radius-md: 6px`
-- `--radius-lg: 8px`
-- `--radius-xl: 12px`
-- `--radius-2xl: 16px`
-- `--radius-full: 9999px`
-
-### Shadows
-
-- `--shadow-xs` — subtle, for tight UI elements
-- `--shadow-sm` — small elevation
-- `--shadow-md` — medium elevation (cards)
-- `--shadow-lg` — large elevation (dropdowns)
-- `--shadow-xl` — extra large (modals, dialogs)
-
----
-
-## Components
-
-### TalaButton
-
-Selector: `tala-button`
-Import: `import { TalaButton } from '@doku-com/tala'`
-
-Inputs:
-- `variant: ButtonVariant` — default: `'primary'`
-- `size: ButtonSize` — default: `'md'`
-- `disabled: boolean` — default: `false`
-- `loading: boolean` — default: `false`
-- `iconOnly: boolean` — default: `false`
-
-Types:
-- `ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'link'`
-- `ButtonSize = 'xs' | 'sm' | 'md' | 'lg'`
-
-Size heights: xs=24px, sm=32px, md=40px, lg=48px
-
-Notes:
-- Content is projected via `<ng-content>`
-- Keyboard accessible: Enter and Space trigger click
-- Click events are suppressed when `disabled` or `loading` is true
-
-Example:
-
-```html
-<tala-button>Submit</tala-button>
-<tala-button variant="secondary" size="sm">Cancel</tala-button>
-<tala-button variant="danger" [disabled]="true">Delete</tala-button>
-<tala-button [loading]="isSaving">Save</tala-button>
-<tala-button [iconOnly]="true"><svg><!-- icon --></svg></tala-button>
-```
-
-```typescript
-import { TalaButton } from '@doku-com/tala';
-
-@Component({
-  imports: [TalaButton],
-  template: `<tala-button [variant]="v" [loading]="loading">Submit</tala-button>`,
-})
-export class MyComponent {
-  v = 'primary';
-  loading = false;
-}
-```
-
----
-
-### TalaAvatar
-
-Selector: `tala-avatar`
-Import: `import { TalaAvatar } from '@doku-com/tala'`
-
-Inputs:
-- `name: string` — default: `''` — used for initials and background color
-- `src: string` — default: `''` — image URL; when set, shows image instead of initials
-- `size: AvatarSize` — default: `'md'`
-- `shape: AvatarShape` — default: `'circle'`
-- `status: AvatarStatus` — default: `'none'`
-- `badgeCount: number` — default: `0` — shows `99+` when value exceeds 99
-
-Types:
-- `AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'`
-- `AvatarShape = 'circle' | 'square'`
-- `AvatarStatus = 'none' | 'online' | 'busy' | 'away' | 'offline'`
-
-Size dimensions: xs=24px, sm=32px, md=40px, lg=48px, xl=64px
-
-Notes:
-- Background color is auto-derived from the `name` value via hashing
-- `aria-label` is auto-generated from name, status, and badgeCount
-- Role is set to `img`
-
-Example:
-
-```html
-<tala-avatar name="John Doe" />
-<tala-avatar name="Jane Smith" src="https://example.com/jane.jpg" />
-<tala-avatar name="Alice" size="lg" shape="square" status="online" />
-<tala-avatar name="Bob" [badgeCount]="5" />
-```
-
----
-
-### TalaAvatarGroup
-
-Selector: `tala-avatar-group`
-Import: `import { TalaAvatarGroup } from '@doku-com/tala'`
-
-Inputs:
-- `size: AvatarSize` — default: `'md'`
-
-Notes:
-- Wraps multiple `TalaAvatar` components for a stacked/grouped layout
-- Set matching `size` on both the group and each child avatar
-- Role is set to `group`
-
-Example:
-
-```html
-<tala-avatar-group size="md">
-  <tala-avatar name="Alice Smith" size="md" />
-  <tala-avatar name="Bob Jones" size="md" />
-  <tala-avatar name="Carol Lee" size="md" />
-</tala-avatar-group>
-```
-
-```typescript
-import { TalaAvatar, TalaAvatarGroup } from '@doku-com/tala';
-
-@Component({
-  imports: [TalaAvatar, TalaAvatarGroup],
-  template: `
-    <tala-avatar-group [size]="size">
-      @for (user of users; track user.id) {
-        <tala-avatar [name]="user.name" [src]="user.avatar" [size]="size" />
-      }
-    </tala-avatar-group>
-  `,
-})
-export class MyComponent {
-  size = 'md' as const;
-  users = [{ id: 1, name: 'Alice', avatar: '' }];
-}
-```