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

package/styles/tokens/_utility.scss

@@ -0,0 +1,35 @@
+:root {
+  // Spacing
+  --tala-ref-space-1: 4px;
+  --tala-ref-space-2: 8px;
+  --tala-ref-space-3: 12px;
+  --tala-ref-space-4: 16px;
+  --tala-ref-space-5: 20px;
+  --tala-ref-space-6: 24px;
+  --tala-ref-space-8: 32px;
+  --tala-ref-space-10: 40px;
+  --tala-ref-space-12: 48px;
+  --tala-ref-space-16: 64px;
+
+  // Radius
+  --tala-ref-radius-none: 0px;
+  --tala-ref-radius-xs: 2px;
+  --tala-ref-radius-sm: 4px;
+  --tala-ref-radius-md: 6px;
+  --tala-ref-radius-lg: 8px;
+  --tala-ref-radius-xl: 12px;
+  --tala-ref-radius-2xl: 16px;
+  --tala-ref-radius-full: 9999px;
+
+  // Shadow
+  --tala-ref-shadow-xs: 0 1px 2px
+    color-mix(in srgb, var(--tala-ref-color-neutral-100) 5%, transparent);
+  --tala-ref-shadow-sm: 0 1px 3px
+    color-mix(in srgb, var(--tala-ref-color-neutral-100) 8%, transparent);
+  --tala-ref-shadow-md: 0 4px 6px
+    color-mix(in srgb, var(--tala-ref-color-neutral-100) 7%, transparent);
+  --tala-ref-shadow-lg: 0 10px 15px
+    color-mix(in srgb, var(--tala-ref-color-neutral-100) 8%, transparent);
+  --tala-ref-shadow-xl: 0 20px 25px
+    color-mix(in srgb, var(--tala-ref-color-neutral-100) 10%, transparent);
+}

package/styles/tokens/index.scss

@@ -0,0 +1,3 @@
+@forward 'color';
+@forward 'typography';
+@forward 'utility';

package/types/doku-com-tala.d.ts

@@ -1,15 +1,43 @@
 import * as _angular_core from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { InjectionToken, Signal, TemplateRef } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+
+type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
+type AlertType = 'inline' | 'banner';
+type AlertAction = 'none' | 'label' | 'custom';
+declare class TalaAlert {
+    readonly variant: _angular_core.InputSignal<AlertVariant>;
+    readonly type: _angular_core.InputSignal<AlertType>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly message: _angular_core.InputSignal<string>;
+    readonly dismissible: _angular_core.InputSignal<boolean>;
+    readonly action: _angular_core.InputSignal<AlertAction>;
+    readonly actionLabel: _angular_core.InputSignal<string>;
+    readonly actionClick: _angular_core.OutputEmitterRef<void>;
+    readonly dismissed: _angular_core.OutputEmitterRef<void>;
+    protected readonly _dismissed: _angular_core.WritableSignal<boolean>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected _onActionClick(): void;
+    protected _onDismiss(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaAlert, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaAlert, "tala-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "action": { "alias": "action"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; }, { "actionClick": "actionClick"; "dismissed": "dismissed"; }, never, ["*"], true, never>;
+}
 
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type AvatarShape = 'circle' | 'square';
 type AvatarStatus = 'none' | 'online' | 'busy' | 'away' | 'offline';
 declare class TalaAvatar {
+    /** Accessible display name used for initials and the generated aria label. */
     readonly name: _angular_core.InputSignal<string>;
+    /** Visual size of the avatar. */
     readonly size: _angular_core.InputSignal<AvatarSize>;
+    /** Outer shape of the avatar container. */
     readonly shape: _angular_core.InputSignal<AvatarShape>;
+    /** Optional presence indicator shown on the avatar. */
     readonly status: _angular_core.InputSignal<AvatarStatus>;
+    /** Optional notification badge count. Values above 99 render as `99+`. */
     readonly badgeCount: _angular_core.InputSignal<number>;
+    /** Image URL. When omitted, the component falls back to generated initials. */
     readonly src: _angular_core.InputSignal<string>;
     protected readonly initials: _angular_core.Signal<string>;
     protected readonly bgColor: _angular_core.Signal<string>;
@@ -26,6 +54,7 @@ declare class TalaAvatar {
 }
 
 declare class TalaAvatarGroup {
+    /** Shared avatar size applied to items inside the group. */
     readonly size: _angular_core.InputSignal<AvatarSize>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaAvatarGroup, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaAvatarGroup, "tala-avatar-group", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -33,52 +62,142 @@ declare class TalaAvatarGroup {
 
 type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'link';
 type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-type ButtonType = 'button' | 'submit' | 'reset';
 declare class TalaButton {
+    private readonly el;
+    /**
+     * Selects the button's visual treatment.
+     *
+     * @default 'primary'
+     */
     readonly variant: _angular_core.InputSignal<ButtonVariant>;
+    /**
+     * Controls the button's height and horizontal padding.
+     *
+     * @default 'md'
+     */
     readonly size: _angular_core.InputSignal<ButtonSize>;
-    readonly type: _angular_core.InputSignal<ButtonType>;
+    /**
+     * Disables interaction.
+     * Applies the native `disabled` attribute on `<button>` and `aria-disabled="true"` plus
+     * `tabindex="-1"` on `<a>`.
+     *
+     * @default false
+     */
     readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Shows the loading state and blocks interaction.
+     * Adds `aria-busy="true"` and reuses disabled behavior while loading, including removing
+     * anchors from the tab order.
+     *
+     * @default false
+     */
     readonly loading: _angular_core.InputSignal<boolean>;
+    /**
+     * Collapses horizontal padding for icon-only buttons.
+     * Provide an accessible name such as `aria-label` when no visible text is present.
+     *
+     * @default false
+     */
     readonly iconOnly: _angular_core.InputSignal<boolean>;
+    protected readonly isButton: boolean;
     protected readonly hostClasses: _angular_core.Signal<string>;
-    protected readonly innerClasses: _angular_core.Signal<string>;
+    protected onHostClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaButton, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaButton, "tala-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=prefix]", "*", "[slot=suffix]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaButton, "button[talaButton], a[talaButton]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=prefix]", "*", "[slot=suffix]"], true, never>;
+}
+
+/**
+ * Contract a control (e.g. `TalaInput`) provides to a hosting `TalaFormField` so the wrapper can
+ * reflect the control's presentational state (label `for`, container border, disabled styling)
+ * without either side importing the other's concrete class.
+ */
+interface TalaFormFieldControl {
+    readonly id: Signal<string>;
+    readonly disabled: Signal<boolean>;
+    readonly readonly: Signal<boolean>;
+    readonly required: Signal<boolean>;
+    readonly status: Signal<string>;
+    readonly size: Signal<string>;
+}
+declare const TALA_FORM_FIELD_CONTROL: InjectionToken<TalaFormFieldControl>;
+/**
+ * Contract a `TalaFormField` provides to its projected control so the control can wire its own
+ * `aria-describedby` to the wrapper's helper text without the wrapper writing to it directly.
+ *
+ * The helper row is always rendered (visible whenever a consumer projects `slot="helper"`
+ * content, regardless of `disabled` — CSS collapses it only when genuinely empty, see
+ * `form-field.scss`), so `helperId` is always a stable id, not conditionally `null`. An
+ * `aria-describedby` pointing at a rendered-but-empty element is harmless to assistive tech
+ * (nothing to announce), so this avoids needing a way to detect "did the consumer project
+ * content into this slot", which would otherwise require a marker directive the consumer has to
+ * remember to import.
+ */
+interface TalaFormFieldHost {
+    readonly helperId: Signal<string>;
+}
+declare const TALA_FORM_FIELD_HOST: InjectionToken<TalaFormFieldHost>;
+
+declare class TalaFormField implements TalaFormFieldHost {
+    private static _nextId;
+    protected readonly _id: string;
+    protected readonly _helperId: string;
+    protected readonly _control: _angular_core.Signal<TalaFormFieldControl | undefined>;
+    protected readonly _controlId: _angular_core.Signal<string | undefined>;
+    protected readonly _status: _angular_core.Signal<string>;
+    protected readonly _size: _angular_core.Signal<string>;
+    protected readonly _required: _angular_core.Signal<boolean>;
+    protected readonly _isDisabled: _angular_core.Signal<boolean>;
+    protected readonly _isReadonly: _angular_core.Signal<boolean>;
+    readonly helperId: _angular_core.Signal<string>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaFormField, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaFormField, "tala-form-field", never, {}, {}, ["_control"], ["[slot=label]", "[slot=prefix]", "[slot=leading-icon]", "*", "[slot=trailing-icon]", "[slot=suffix]", "[slot=helper]"], true, never>;
 }
 
 type InputSize = 'sm' | 'md' | 'lg';
 type InputStatus = 'default' | 'error' | 'success' | 'warning';
-declare class TalaInput implements ControlValueAccessor {
+declare class TalaInput implements TalaFormFieldControl {
     private static _nextId;
+    private readonly _field;
+    readonly id: _angular_core.InputSignal<string>;
     readonly size: _angular_core.InputSignal<InputSize>;
     readonly status: _angular_core.InputSignal<InputStatus>;
-    readonly label: _angular_core.InputSignal<string>;
-    readonly placeholder: _angular_core.InputSignal<string>;
-    readonly helperText: _angular_core.InputSignal<string>;
-    readonly required: _angular_core.InputSignal<boolean>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly readonly: _angular_core.InputSignal<boolean>;
-    readonly prefix: _angular_core.InputSignal<string>;
-    readonly suffix: _angular_core.InputSignal<string>;
-    readonly type: _angular_core.InputSignal<string>;
-    readonly name: _angular_core.InputSignal<string>;
-    protected readonly _id: string;
-    protected readonly _helperId: string;
-    protected readonly _value: _angular_core.WritableSignal<string>;
-    protected readonly _disabledByForm: _angular_core.WritableSignal<boolean>;
-    protected readonly _isDisabled: _angular_core.Signal<boolean>;
-    protected readonly hostClasses: _angular_core.Signal<string>;
-    private _onChange;
-    private _onTouched;
-    writeValue(value: string): void;
-    registerOnChange(fn: (value: string) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
-    protected _onInput(event: Event): void;
-    protected _onBlur(): void;
+    readonly required: _angular_core.InputSignal<boolean>;
+    protected readonly _describedBy: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaInput, "tala-input", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=leading-icon]", "[slot=trailing-icon]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaInput, "input[talaInput]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface SelectOptionTemplateContext {
+    $implicit: SelectOption;
+    selected: boolean;
+    focused: boolean;
+}
+interface SelectValueTemplateContext {
+    $implicit: SelectOption;
+}
+/**
+ * Apply to an `ng-template` projected into `tala-select` to override how each
+ * option is rendered inside the dropdown list.
+ */
+declare class TalaSelectOptionTemplate {
+    static ngTemplateContextGuard(_dir: TalaSelectOptionTemplate, ctx: unknown): ctx is SelectOptionTemplateContext;
+    readonly templateRef: TemplateRef<SelectOptionTemplateContext>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaSelectOptionTemplate, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TalaSelectOptionTemplate, "ng-template[talaSelectOption]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Apply to an `ng-template` projected into `tala-select` to override how the
+ * chosen value is rendered — the trigger label for `single`/`searchable`, or
+ * each chip for `multi`.
+ */
+declare class TalaSelectValueTemplate {
+    static ngTemplateContextGuard(_dir: TalaSelectValueTemplate, ctx: unknown): ctx is SelectValueTemplateContext;
+    readonly templateRef: TemplateRef<SelectValueTemplateContext>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaSelectValueTemplate, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TalaSelectValueTemplate, "ng-template[talaSelectValue]", never, {}, {}, never, never, true, never>;
 }
 
 type SelectType = 'single' | 'searchable' | 'multi';
@@ -89,7 +208,7 @@ interface SelectOption {
     label: string;
     disabled?: boolean;
 }
-declare class TalaSelect implements ControlValueAccessor {
+declare class TalaSelect implements FormValueControl<string | string[]> {
     private static _nextId;
     private readonly _elementRef;
     readonly type: _angular_core.InputSignal<SelectType>;
@@ -103,31 +222,25 @@ declare class TalaSelect implements ControlValueAccessor {
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly loading: _angular_core.InputSignal<boolean>;
     readonly width: _angular_core.InputSignal<string>;
+    readonly value: _angular_core.ModelSignal<string | string[]>;
+    readonly touched: _angular_core.ModelSignal<boolean>;
     protected readonly _id: string;
     protected readonly _helperId: string;
     protected readonly _listboxId: string;
     protected readonly _isOpen: _angular_core.WritableSignal<boolean>;
-    protected readonly _value: _angular_core.WritableSignal<string | string[]>;
     protected readonly _searchQuery: _angular_core.WritableSignal<string>;
     protected readonly _focusedIndex: _angular_core.WritableSignal<number>;
-    protected readonly _disabledByForm: _angular_core.WritableSignal<boolean>;
-    protected readonly _isDisabled: _angular_core.Signal<boolean>;
     protected readonly _hostWidth: _angular_core.Signal<string>;
     protected readonly _filteredOptions: _angular_core.Signal<SelectOption[]>;
     protected readonly _hasValue: _angular_core.Signal<boolean>;
     protected readonly _displayValue: _angular_core.Signal<string>;
-    protected readonly _selectedLabels: _angular_core.Signal<{
-        value: string;
-        label: string;
-    }[]>;
+    protected readonly _selectedOption: _angular_core.Signal<SelectOption | undefined>;
+    protected readonly _selectedOptions: _angular_core.Signal<SelectOption[]>;
+    protected readonly _optionTemplate: _angular_core.Signal<TalaSelectOptionTemplate | undefined>;
+    protected readonly _valueTemplate: _angular_core.Signal<TalaSelectValueTemplate | undefined>;
     protected readonly hostClasses: _angular_core.Signal<string>;
-    private _onChange;
-    private _onTouched;
     _onDocumentClick(target: EventTarget | null): void;
-    writeValue(value: string | string[]): void;
-    registerOnChange(fn: (value: string | string[]) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
+    focus(options?: FocusOptions): void;
     protected _onTriggerClick(event: MouseEvent): void;
     protected _onTriggerKeydown(event: KeyboardEvent): void;
     protected _selectOption(opt: SelectOption, event: Event): void;
@@ -137,8 +250,63 @@ declare class TalaSelect implements ControlValueAccessor {
     protected _onDropdownClick(event: MouseEvent): void;
     protected _onSearchKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaSelect, "tala-select", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaSelect, "tala-select", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, ["_optionTemplate", "_valueTemplate"], never, true, never>;
+}
+
+type TextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'label' | 'caption' | 'code' | 'docTitle' | 'docSection';
+type TextSize = 'xs' | 'sm' | 'md' | 'lg';
+type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+declare class TalaText {
+    /**
+     * Sets the text variant/semantic type.
+     * Determines the HTML semantics and typography styles applied to the element.
+     *
+     * @default 'body'
+     * @example
+     * // Heading variant
+     * <h1 talaText="h1">Heading 1</h1>
+     * // Body text with custom size
+     * <p talaText="body">Body text</p>
+     * // Code block
+     * <code talaText="code">const x = 42;</code>
+     */
+    readonly talaText: _angular_core.InputSignal<TextVariant>;
+    /**
+     * Controls the font size relative to the current variant.
+     * Size mapping varies by variant:
+     * - Ignored for headings (h1-h6), code, and documentation text
+     * - body: 'sm' | 'md' (default) | 'lg'
+     * - label: 'xs' | 'sm' | 'md' (default) | 'lg'
+     * - caption: 'sm' (default) | 'lg'
+     *
+     * @default 'md'
+     * @example
+     * <p talaText="body" [size]="'lg'">Large body text</p>
+     */
+    readonly size: _angular_core.InputSignal<TextSize>;
+    /**
+     * Controls the font weight.
+     * Weight application varies by variant:
+     * - Ignored for headings (h1-h6), code, caption, and documentation text
+     * - For body/label: 'regular' (default) | 'medium' | 'semibold' | 'bold'
+     *
+     * @default 'regular'
+     * @example
+     * <p talaText="body" [weight]="'bold'">Bold body text</p>
+     */
+    readonly weight: _angular_core.InputSignal<TextWeight>;
+    private readonly normalizedVariant;
+    private readonly normalizedSize;
+    private readonly normalizedWeight;
+    protected readonly classes: _angular_core.Signal<string>;
+    private readonly variantClass;
+    private readonly weightClass;
+    private readonly bodySizeKey;
+    private readonly labelSizeKey;
+    private readonly captionSizeKey;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaText, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaText, "[talaText]", never, { "talaText": { "alias": "talaText"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "weight": { "alias": "weight"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { TalaAvatar, TalaAvatarGroup, TalaButton, TalaInput, TalaSelect };
-export type { AvatarShape, AvatarSize, AvatarStatus, ButtonSize, ButtonType, ButtonVariant, InputSize, InputStatus, SelectOption, SelectSize, SelectStatus, SelectType };
+export { TALA_FORM_FIELD_CONTROL, TALA_FORM_FIELD_HOST, TalaAlert, TalaAvatar, TalaAvatarGroup, TalaButton, TalaFormField, TalaInput, TalaSelect, TalaSelectOptionTemplate, TalaSelectValueTemplate, TalaText };
+export type { AlertAction, AlertType, AlertVariant, AvatarShape, AvatarSize, AvatarStatus, ButtonSize, ButtonVariant, InputSize, InputStatus, SelectOption, SelectOptionTemplateContext, SelectSize, SelectStatus, SelectType, SelectValueTemplateContext, TalaFormFieldControl, TalaFormFieldHost, TextSize, TextVariant, TextWeight };

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: '' }];
-}
-```