@loomui-ng/ui 0.0.0-stage → 0.1.0

package/types/loomui-ng-ui-toggle.d.ts

@@ -0,0 +1,63 @@
+import { ControlValueAccessor } from "@angular/forms";
+import { VariantProps } from "class-variance-authority";
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+/** Classes derived from the live Toggle (docs/behavior-specs/toggle.md); pl/pr → ps/pe for RTL. */
+export declare const toggleVariants: (props?: ({
+  variant?: "default" | "outline" | null | undefined;
+  size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ToggleVariants = VariantProps<typeof toggleVariants>;
+/** <button uiToggle [(pressed)]="bold" aria-label="Toggle bold">B</button> */
+export declare class UiToggle implements ControlValueAccessor {
+  readonly pressed: import("@angular/core").ModelSignal<boolean>;
+  readonly variant: import("@angular/core").InputSignal<NonNullable<"default" | "outline" | null | undefined>>;
+  readonly size: import("@angular/core").InputSignal<NonNullable<"default" | "sm" | "lg" | null | undefined>>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  private readonly cvaDisabled;
+  protected readonly isDisabled: import("@angular/core").Signal<boolean>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  private onChange;
+  protected onTouched: () => void;
+  protected toggle(): void;
+  writeValue(v: boolean | null): void;
+  registerOnChange(fn: (v: boolean) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(d: boolean): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiToggle, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiToggle, "button[uiToggle], ui-toggle", ["uiToggle"], {
+    "pressed": {
+      "alias": "pressed";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "pressed": "pressedChange";
+  }, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_TOGGLE: readonly [typeof UiToggle];

package/types/loomui-ng-ui-tooltip.d.ts

@@ -0,0 +1,63 @@
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiLayerRoot, UiPopperContentBase } from "@loomui-ng/ui/utils";
+import * as i0 from "@angular/core";
+/**
+ * <div uiTooltip class="contents">
+ *   <button uiButton uiTooltipTrigger>Hover</button>
+ *   <div uiTooltipContent>Add to library</div>
+ * </div>
+ *
+ * Observed on live site: content `data-state="delayed-open"` when opened by hover; a visually-hidden
+ * `role="tooltip"` copy of the text is inside the content and referenced by the trigger's aria-describedby.
+ */
+export declare class UiTooltip extends UiLayerRoot {
+  /** Hover-open delay in ms (shadcn default is 0). */
+  readonly delay: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly openedBy: import("@angular/core").WritableSignal<"hover" | "focus">;
+  private timer;
+  constructor();
+  show(by: 'hover' | 'focus'): void;
+  hide(graceMs?: number): void;
+  cancelHide(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiTooltip, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiTooltip, "[uiTooltip], ui-tooltip", ["uiTooltip"], {
+    "delay": {
+      "alias": "delay";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiTooltipTrigger {
+  protected readonly tip: UiTooltip;
+  constructor();
+  protected onEnter(e: PointerEvent): void;
+  protected onFocus(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiTooltipTrigger, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiTooltipTrigger, "[uiTooltipTrigger], ui-tooltip-trigger", never, {}, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiTooltipContent extends UiPopperContentBase {
+  protected readonly root: UiTooltip;
+  protected readonly varPrefix = "--radix-tooltip";
+  protected readonly classes: import("@angular/core").Signal<string>;
+  private sr;
+  private arrow;
+  constructor();
+  protected onAttached(): void;
+  protected onDetached(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiTooltipContent, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiTooltipContent, "[uiTooltipContent], ui-tooltip-content", never, {}, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_TOOLTIP: readonly [typeof UiTooltip, typeof UiTooltipTrigger, typeof UiTooltipContent];

package/types/loomui-ng-ui-typography.d.ts

@@ -0,0 +1,42 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'blockquote' | 'list' | 'code' | 'lead' | 'large' | 'small' | 'muted';
+export declare const typographyClasses: Record<TypographyVariant, string>;
+/**
+ * Typographic styles as a directive: <h1 uiTypography="h1">Title</h1>, <p uiTypography="lead">…</p>, or as an element:
+ * <ui-typography variant="h1">Title</ui-typography>.
+ * Deviation: the live docs Typography page now redirects to "Typeset" (a CSS system with its own builder). This ships the
+ * classic shadcn typography recipe (class strings from the former docs page) as a thin directive; Typeset is not reproduced.
+ */
+export declare class UiTypography {
+  /** Attribute form: `<p uiTypography="lead">`. */
+  readonly attrVariant: import("@angular/core").InputSignal<"" | TypographyVariant>;
+  /** Element form: `<ui-typography variant="lead">`. */
+  readonly elVariant: import("@angular/core").InputSignal<"" | TypographyVariant>;
+  readonly variant: import("@angular/core").Signal<TypographyVariant>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiTypography, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiTypography, "[uiTypography], ui-typography", never, {
+    "attrVariant": {
+      "alias": "uiTypography";
+      "required": false;
+      "isSignal": true;
+    };
+    "elVariant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_TYPOGRAPHY: readonly [typeof UiTypography];

package/types/loomui-ng-ui-utils.d.ts

@@ -0,0 +1,392 @@
+import { ClassValue } from "clsx";
+import * as i0 from "@angular/core";
+import { ElementRef, InjectionToken, Injector, WritableSignal } from "@angular/core";
+import { Directionality } from "@angular/cdk/bidi";
+import { ConnectedPosition, Overlay, OverlayRef } from "@angular/cdk/overlay";
+import { FocusKeyManager, FocusableOption } from "@angular/cdk/a11y";
+import { ControlValueAccessor } from "@angular/forms";
+export declare function cn(...inputs: ClassValue[]): string;
+/** Unique, stable-per-session id like `ui-dialog-3`. */
+export declare const nextId: (prefix: string) => string;
+/**
+ * Radix (via `aria-hidden`) hides everything outside a modal layer from assistive tech.
+ * Marks every <body> child except the CDK overlay container with aria-hidden + data-aria-hidden,
+ * and returns a function that restores the previous state.
+ */
+export declare function hideOthers(keep: Element): () => void;
+/**
+ * Resolves when the element's CSS animations (tw-animate-css `animate-out`) have finished, or after a
+ * fallback timeout so we never keep an overlay mounted forever (reduced motion, no animation, hidden tab).
+ */
+export declare function whenAnimationDone(el: HTMLElement | null, fallbackMs?: number): Promise<void>;
+/**
+ * State holder shared by every overlay root (Dialog, Sheet, Popover, DropdownMenu, Select, Tooltip).
+ * `open` is the source of truth; `mounted` stays true until the exit animation finishes so the content can
+ * play tw-animate-css `animate-out` with data-state="closed" (observed on the live site).
+ */
+export declare abstract class UiLayerRoot {
+  readonly open: import("@angular/core").ModelSignal<boolean>;
+  readonly id: string;
+  readonly mounted: import("@angular/core").WritableSignal<boolean>;
+  readonly state: import("@angular/core").WritableSignal<"open" | "closed">;
+  readonly trigger: import("@angular/core").WritableSignal<HTMLElement | null>;
+  readonly contentEl: import("@angular/core").WritableSignal<HTMLElement | null>;
+  /** Virtual anchor (context menus open at the pointer instead of a trigger element). */
+  readonly anchorPoint: import("@angular/core").WritableSignal<{
+    x: number;
+    y: number;
+  } | null>;
+  /** Panes of nested layers (sub-menus): clicks inside them are not "outside" for this layer. */
+  readonly childPanes: Set<HTMLElement>;
+  constructor();
+  toggle(): void;
+  close(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiLayerRoot, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiLayerRoot, never, never, {
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "open": "openChange";
+  }, never, never, true, never>;
+}
+export type Side = 'top' | 'right' | 'bottom' | 'left';
+export type Align = 'start' | 'center' | 'end';
+interface Meta {
+  side: Side;
+  align: Align;
+}
+/** Preferred placement first, then the opposite side as a flip fallback (what Radix/floating-ui do). */
+export declare function buildPositions(side: Side, align: Align, sideOffset: number, rtl: boolean): {
+  positions: ConnectedPosition[];
+  meta: WeakMap<ConnectedPosition, Meta>;
+};
+/**
+ * Base for popper-based content (Popover, DropdownMenu, Select, Tooltip). The host element is declared inline,
+ * hidden, and moved into a CDK connected overlay (DomPortal) while `root.mounted()`.
+ */
+export declare abstract class UiPopperContentBase {
+  protected abstract readonly root: UiLayerRoot;
+  /** CSS custom-property prefix used by shadcn classes, e.g. `--radix-popover`. */
+  protected abstract readonly varPrefix: string;
+  readonly side: import("@angular/core").InputSignal<Side>;
+  readonly align: import("@angular/core").InputSignal<Align>;
+  readonly sideOffset: import("@angular/core").InputSignal<number>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly el: HTMLElement;
+  protected readonly overlay: Overlay;
+  protected readonly dir: Directionality;
+  protected readonly injector: Injector;
+  protected overlayRef: OverlayRef | null;
+  private lastActive;
+  /** Hook for subclasses. Return false to skip default focus handling. */
+  protected onAttached(): void;
+  protected onDetached(): void;
+  /** Whether outside pointer / Esc should close. Tooltip overrides to false. */
+  protected closeOnOutside: boolean;
+  protected restoreFocusOnClose: boolean;
+  protected matchTriggerWidth: boolean;
+  protected init(): void;
+  private attach;
+  private detach;
+  /** Hook: sub-menus register their pane with the parent layer. */
+  protected registerChildPane(): void;
+  private setVars;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiPopperContentBase, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiPopperContentBase, never, never, {
+    "side": {
+      "alias": "side";
+      "required": false;
+      "isSignal": true;
+    };
+    "align": {
+      "alias": "align";
+      "required": false;
+      "isSignal": true;
+    };
+    "sideOffset": {
+      "alias": "sideOffset";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * Shared engine for Dialog and Sheet (Radix Dialog equivalent); state lives in UiLayerRoot.
+ * Contract (see docs/behavior-specs/dialog.md): portal to <body>, overlay + content as siblings, focus trap,
+ * first tabbable focused on open, focus restored to the trigger on close, Esc / overlay click dismiss,
+ * aria-hidden on everything else, body scroll lock, content stays mounted with data-state="closed"
+ * until the exit animation finishes.
+ */
+export declare abstract class UiModalRoot extends UiLayerRoot {
+  readonly titleId: string;
+  readonly descriptionId: string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiModalRoot, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiModalRoot, never, never, {}, {}, never, never, true, never>;
+}
+export interface ModalContentConfig {
+  slot: string;
+  backdropClass: string;
+  /** false for Alert Dialog: clicking the overlay does not dismiss. Default true. */
+  closeOnBackdrop?: boolean;
+  /** CSS selector of the element to focus on open (Alert Dialog focuses Cancel). Default: first tabbable. */
+  initialFocusSelector?: string;
+}
+/** Base for the content directive: moves the host element into a CDK overlay while mounted. */
+export declare abstract class UiModalContentBase {
+  protected abstract readonly root: UiModalRoot;
+  protected abstract readonly config: ModalContentConfig;
+  protected readonly el: HTMLElement;
+  private readonly overlay;
+  private readonly trapFactory;
+  private readonly injector;
+  private overlayRef;
+  private trap;
+  private restoreAria;
+  private lastActive;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected init(): void;
+  private attach;
+  private detach;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiModalContentBase, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiModalContentBase, never, never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * Shared kit behind DropdownMenu, ContextMenu and Menubar (Radix Menu equivalent): items, sub-menus, roving focus,
+ * typeahead and keyboard rules live here; the three components only add their own roots, triggers and classes.
+ */
+export declare class UiMenuSelectEvent {
+  defaultPrevented: boolean;
+  preventDefault(): void;
+}
+/** What an item/content needs from "its" menu (a root menu or a sub-menu). */
+export interface MenuCtx {
+  readonly manager: WritableSignal<FocusKeyManager<UiMenuItemBase> | null>;
+  readonly contentEl: WritableSignal<HTMLElement | null>;
+  readonly childPanes: Set<HTMLElement>;
+  readonly dirIsRtl: () => boolean;
+  /** Close the whole menu tree (after selecting an item). */
+  closeAll(): void;
+  /** Menubar: ArrowLeft/Right inside an open menu moves to the neighbouring menu. */
+  horizontal?(dir: 'prev' | 'next'): void;
+}
+export declare const UI_MENU_CTX: InjectionToken<MenuCtx>;
+export declare const UI_MENU_ITEM: InjectionToken<UiMenuItemBase>;
+export declare const UI_MENU_SUB: InjectionToken<UiMenuSubBase>;
+export declare abstract class UiMenuRootBase extends UiLayerRoot implements MenuCtx {
+  /** Set by the trigger when opened with the keyboard so the content can focus the first/last item. */
+  keyboardOpen: 'first' | 'last' | null;
+  readonly manager: WritableSignal<FocusKeyManager<UiMenuItemBase> | null>;
+  readonly triggerId: WritableSignal<string>;
+  private readonly directionality;
+  dirIsRtl: () => boolean;
+  closeAll(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiMenuRootBase, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiMenuRootBase, never, never, {}, {}, never, never, true, never>;
+}
+export declare abstract class UiMenuItemBase implements FocusableOption {
+  readonly ctx: MenuCtx;
+  protected readonly el: HTMLElement;
+  readonly disabledInput: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly select: import("@angular/core").OutputEmitterRef<UiMenuSelectEvent>;
+  readonly highlighted: WritableSignal<boolean>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  get disabled(): boolean;
+  focus(): void;
+  getLabel(): string;
+  protected onFocus(): void;
+  protected onBlur(): void;
+  protected onPointerMove(): void;
+  protected onPointerLeave(): void;
+  protected keepFocusOnLeave(): boolean;
+  /** Run by click or Enter/Space. */
+  activate(): void;
+  protected beforeSelect(): void;
+  /** Sub-menu triggers override to open on ArrowRight/ArrowLeft (direction-aware). */
+  openOnArrow(): boolean;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiMenuItemBase, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiMenuItemBase, never, never, {
+    "disabledInput": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "select": "select";
+  }, never, never, true, never>;
+}
+/** Host bindings shared by every menu item directive (spread into `host`; override `data-slot`). */
+export declare const MENU_ITEM_HOST: {
+  tabindex: string;
+  '[attr.data-disabled]': string;
+  '[attr.aria-disabled]': string;
+  '[attr.data-highlighted]': string;
+  '(focus)': string;
+  '(blur)': string;
+  '(pointermove)': string;
+  '(pointerleave)': string;
+  '(click)': string;
+};
+/** A sub-menu root: it is itself a menu context nested in its parent's. */
+export declare abstract class UiMenuSubBase extends UiMenuRootBase {
+  readonly parent: MenuCtx;
+  closeAll(): void;
+  dirIsRtl: () => boolean;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiMenuSubBase, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiMenuSubBase, never, never, {}, {}, never, never, true, never>;
+}
+export declare abstract class UiMenuSubTriggerBase extends UiMenuItemBase {
+  protected readonly sub: UiMenuSubBase;
+  /** The trigger is an item of the PARENT menu (the nearest UI_MENU_CTX is the sub-menu it opens). */
+  readonly ctx: MenuCtx;
+  private timer;
+  constructor();
+  activate(): void;
+  openOnArrow(): boolean;
+  protected keepFocusOnLeave(): boolean;
+  protected onPointerMove(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiMenuSubTriggerBase, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiMenuSubTriggerBase, never, never, {}, {}, never, never, true, never>;
+}
+export declare abstract class UiMenuContentBase extends UiPopperContentBase {
+  protected abstract readonly menu: UiMenuRootBase;
+  protected abstract menuItems(): readonly UiMenuItemBase[];
+  private manager;
+  /** Content of a sub-menu closes itself on the "back" arrow. */
+  protected isSub: boolean;
+  protected onAttached(): void;
+  protected onDetached(): void;
+  protected onMenuKeydown(e: KeyboardEvent): void;
+  protected registerChildPane(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiMenuContentBase, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiMenuContentBase, never, never, {}, {}, never, never, true, never>;
+}
+export declare const ELEMENT_ORIGIN: Record<string, string>;
+/**
+ * Applied (as a host directive) to every Loom UI directive that also has a custom-element selector, e.g. <ui-button>.
+ * On native elements it does nothing. On a custom element it restores what the native tag provided for free:
+ *  - the implicit ARIA role and, for buttons/links, a tab stop;
+ *  - Enter / Space activation for button-like elements (Enter for links), skipped when the component already handled the key;
+ *  - `href` navigation for link-like elements, `for` association for label-like elements.
+ * Directives keep full control: anything they set themselves (role, tabindex, …) is never overwritten.
+ */
+export declare class UiElementHost {
+  private readonly el;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiElementHost, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiElementHost, never, never, {}, {}, never, never, true, never>;
+}
+/**
+ * Base for the custom-element wrappers around native form controls (`<ui-input>`, `<ui-textarea>`, `<ui-native-select>`, …).
+ * A custom element cannot be a form control, so the wrapper renders the real control inside its template (template ref
+ * `#control`) and forwards the common attributes. It implements ControlValueAccessor, so `ngModel`, reactive forms and
+ * `[(value)]`-style one-way binding keep working. `aria-label` / `aria-describedby` are forwarded to the inner control.
+ */
+export declare abstract class UiNativeControl implements ControlValueAccessor {
+  readonly control: import("@angular/core").Signal<ElementRef<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>>;
+  readonly id: import("@angular/core").InputSignal<string>;
+  readonly name: import("@angular/core").InputSignal<string>;
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /** Initial / one-way value. With forms, the form owns the value. */
+  readonly value: import("@angular/core").InputSignal<string>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly autocomplete: import("@angular/core").InputSignal<string>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly ariaDescribedby: import("@angular/core").InputSignal<string>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly current: import("@angular/core").WritableSignal<string>;
+  private readonly cvaDisabled;
+  protected readonly isDisabled: import("@angular/core").Signal<boolean>;
+  private onChange;
+  protected onTouched: () => void;
+  focus(options?: FocusOptions): void;
+  protected onInput(e: Event): void;
+  writeValue(v: string | null): void;
+  registerOnChange(fn: (v: string) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(d: boolean): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiNativeControl, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiNativeControl, never, never, {
+    "id": {
+      "alias": "id";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "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;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "autocomplete": {
+      "alias": "autocomplete";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "aria-label";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaDescribedby": {
+      "alias": "aria-describedby";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/loomui-ng-ui.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Primary entry point. Components live in secondary entry points: import from '@loomui-ng/ui/button', '@loomui-ng/ui/dialog', …
+ * Theme stylesheet: '@loomui-ng/ui/styles/loomui.css'.
+ */
+export declare const LOOMUI_VERSION = "0.1.0";

package/typography/README.md

@@ -0,0 +1,29 @@
+# Typography
+
+```ts
+import { UI_TYPOGRAPHY } from '@loomui-ng/ui/typography';
+// add to the component `imports` array
+```
+
+```html
+<h1 uiTypography="h1">Title</h1>
+<p uiTypography="lead">Intro</p>
+<code uiTypography="code">npm i</code>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-typography variant="h1">Title</ui-typography>
+<ui-typography variant="lead">Intro</ui-typography>
+<ui-typography variant="code">npm i</ui-typography>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `attrVariant` | `TypographyVariant \| ''` | `''` |
+| `elVariant` | `TypographyVariant \| ''` | `''` |
+
+Parts (selectors): `[uiTypography], ui-typography`.
+
+Spec: `docs/behavior-specs/typography.md` · Manual test: `docs/manual-tests/typography.md`