@blotch/dolan 0.0.0-stage → 22.2.0

package/dist/ui/components/tabs/tabs.ts

@@ -0,0 +1,317 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  inject,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import {
+  type AnimationHandle,
+  DURATION,
+  EASING,
+  directionalSlideIn,
+  revealIn,
+} from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+@Component({
+  selector: 'ui-tabs',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiTabs {
+  readonly value = model<string>('');
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly changed = output<string>();
+
+  // Direction tracking for content slide animations. Each UiTabsTrigger
+  // registers itself in order via registerTab(), building an ordered list.
+  // When the active tab changes, we compare the old and new index in this
+  // list to determine slide direction (1 = right, -1 = left). This creates
+  // a spatial relationship: tabs feel like they're arranged left-to-right,
+  // with content sliding in from the direction of the selected tab.
+  readonly #tabOrder: string[] = [];
+  #previousValue: string | undefined;
+  readonly direction = signal<1 | -1>(1);
+
+  protected readonly containerClass = computed(() =>
+    cn('flex-col flex', this.userClass()),
+  );
+
+  constructor() {
+    // Reactively compute direction when the active value changes.
+    // This handles both internal select() calls and external model changes.
+    effect(() => {
+      const currentValue = this.value();
+      if (this.#previousValue === undefined) {
+        this.#previousValue = currentValue;
+        return;
+      }
+      // Defensive: signal dedupes same-value writes so the effect never re-runs
+      // with an unchanged `currentValue`. Kept for safety on-device.
+      /* v8 ignore next 1 */
+      if (currentValue === this.#previousValue) return;
+
+      const prevIndex = this.#tabOrder.indexOf(this.#previousValue);
+      const nextIndex = this.#tabOrder.indexOf(currentValue);
+      // The `prevIndex !== nextIndex` check is defensive — the earlier
+      // `if (currentValue === this.#previousValue) return;` guard makes an
+      // equal-index case unreachable in normal flow.
+      if (
+        prevIndex !== -1 &&
+        nextIndex !== -1 &&
+        /* v8 ignore next 1 */ prevIndex !== nextIndex
+      ) {
+        this.direction.set(nextIndex > prevIndex ? 1 : -1);
+      }
+      this.#previousValue = currentValue;
+    });
+  }
+
+  /**
+   * Called by UiTabsTrigger to register ordering for direction detection.
+   */
+  registerTab(value: string): void {
+    if (!this.#tabOrder.includes(value)) {
+      this.#tabOrder.push(value);
+    }
+  }
+
+  select(value: string): void {
+    this.value.set(value);
+    this.changed.emit(value);
+  }
+}
+
+@Component({
+  selector: 'ui-tabs-list',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="listClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiTabsList {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly listClass = computed(() =>
+    cn(
+      // `self-start` keeps the tab bar hugging its triggers. The parent <ui-tabs>
+      // is a `flex flex-col` column, and in Lynx's linear/flex layout a child with
+      // no explicit width stretches to fill the parent's cross axis — so without
+      // it the muted pill spans the full width, leaving empty space around the
+      // tabs. Same lever as the badge fix: Lynx has no `inline-flex`, so
+      // align-self is how you opt a child into shrink-to-fit.
+      'flex-row items-center self-start rounded-lg bg-muted p-1 flex',
+      this.userClass(),
+    ),
+  );
+}
+
+@Component({
+  selector: 'ui-tabs-trigger',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view #trigger [class]="triggerClass()" (bindtap)="select()">
+      <text [class]="textClass()"><ng-content /></text>
+    </view>
+  `,
+})
+export class UiTabsTrigger {
+  readonly #tabs = inject(UiTabs);
+
+  readonly triggerValue = input.required<string>({ alias: 'value' });
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly triggerRef = viewChild<ElementRef>('trigger');
+  #anim?: AnimationHandle;
+  #previousActive?: boolean;
+
+  protected readonly isActive = computed(
+    () => this.#tabs.value() === this.triggerValue(),
+  );
+
+  constructor() {
+    // Register this trigger with the parent for direction detection
+    effect(() => {
+      this.#tabs.registerTab(this.triggerValue());
+    });
+
+    // Animate trigger background on selection change
+    effect(() => {
+      const active = this.isActive();
+      const el = this.triggerRef()?.nativeElement;
+      if (!el || this.#previousActive === undefined) {
+        this.#previousActive = active;
+        return;
+      }
+      // Defensive: `isActive` computed dedupes same-value emissions so the
+      // effect never re-runs with an unchanged `active`. Kept for safety.
+      /* v8 ignore next 1 */
+      if (active === this.#previousActive) return;
+      this.#previousActive = active;
+
+      this.#anim?.cancel();
+
+      if (active) {
+        // Activation: spring-based scale + opacity for a lively entrance
+        this.#anim = el.animate(
+          [
+            { transform: 'scaleX(0.95)', opacity: 0.7 },
+            { transform: 'scaleX(1)', opacity: 1 },
+          ],
+          {
+            duration: DURATION.normal,
+            easing: EASING.springSubtle,
+            fill: 'forwards',
+          },
+        );
+      } else {
+        // Deactivation: quick shrink + fade for a graceful exit
+        this.#anim = el.animate(
+          [
+            { transform: 'scaleX(1)', opacity: 1 },
+            { transform: 'scaleX(0.97)', opacity: 0.7 },
+          ],
+          {
+            duration: DURATION.fast,
+            easing: EASING.accelerate,
+            fill: 'forwards',
+          },
+        );
+      }
+    });
+  }
+
+  protected readonly triggerClass = computed(() =>
+    cn(
+      // No `flex-1` here: now that the list shrinks to fit its content (see
+      // `self-start` in UiTabsList), stretching triggers to equal width is
+      // pointless, and `flex-basis: 0` growth combined with Lynx treating
+      // `min-content` as `0px` would let triggers collapse to zero width and
+      // clip their labels. Content-sized triggers match shadcn's default
+      // inline tabs.
+      'items-center rounded-sm px-3 py-1.5 flex justify-center',
+      this.isActive() ? 'bg-background' : 'bg-transparent',
+      this.userClass(),
+    ),
+  );
+
+  protected readonly textClass = computed(() =>
+    cn(
+      'text-sm font-medium',
+      this.isActive() ? 'text-foreground' : 'text-muted-foreground',
+    ),
+  );
+
+  select(): void {
+    this.#tabs.select(this.triggerValue());
+  }
+}
+
+@Component({
+  selector: 'ui-tabs-content',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    // Hide the WHOLE host when inactive so it reserves no layout space.
+    //
+    // The caller writes `class="flex-1"` on <ui-tabs-content>, and Angular
+    // applies that to the host element. All three content hosts live as siblings
+    // inside the flex-col <ui-tabs>, so three flex-1 hosts each grow to fill a
+    // third of the available height — pushing each panel lower than the last
+    // (the "Done tab starts at the very bottom" stacking). Hiding only the inner
+    // view doesn't help: the flex-1 host still claims its third.
+    //
+    // Toggling the host's own `display` collapses inactive hosts to 0×0 (Lynx
+    // `display: none`) so they claim no space at all, while the single active
+    // host keeps its flex-1 and fills the tabs area. `flex-direction: column`
+    // makes the host lay its content out vertically when shown.
+    '[style.display]': "isActive() ? 'flex' : 'none'",
+    '[style.flexDirection]': "'column'",
+  },
+  template: `
+    <view #content [class]="contentClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiTabsContent {
+  readonly #tabs = inject(UiTabs);
+
+  readonly contentValue = input.required<string>({ alias: 'value' });
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly contentRef = viewChild<ElementRef>('content');
+  #anim?: AnimationHandle;
+  #isFirstRender = true;
+
+  protected readonly isActive = computed(
+    () => this.#tabs.value() === this.contentValue(),
+  );
+
+  constructor() {
+    // Animate content reveal when tab becomes active.
+    //
+    // The panel is ALWAYS rendered and shown/hidden via the host's `display`
+    // (see the `host` block) rather than wrapped in `@if`. On Lynx, destroying a
+    // subtree that holds projected `<ng-content>` sends that content through the
+    // renderer's "park on the page root" path (it must keep still-alive
+    // projected nodes from dying), which drops inactive panels at the bottom of
+    // the page and made re-showing them unreliable — the symptom was tab content
+    // that vanished and never came back. Keeping every panel mounted and only
+    // toggling `display` never destroys or re-parents anything: inactive panels
+    // collapse to 0×0 (Lynx `display: none`) so they take no space, and the
+    // active one simply reappears in place.
+    effect(() => {
+      if (!this.isActive()) return;
+      // Defer one tick so the display flip to 'flex' has applied before we animate.
+      setTimeout(() => {
+        const el = this.contentRef()?.nativeElement;
+        if (!el) return;
+
+        this.#anim?.cancel();
+
+        if (this.#isFirstRender) {
+          // First render: subtle vertical reveal (no directional context yet)
+          this.#isFirstRender = false;
+          this.#anim = revealIn(el, { fromY: 6, duration: DURATION.normal });
+        } else {
+          // Subsequent renders: direction-aware horizontal slide
+          const dir = this.#tabs.direction();
+          this.#anim = directionalSlideIn(el, dir, {
+            distance: 24,
+            duration: 300,
+          });
+        }
+      }, 0);
+    });
+  }
+
+  // Visibility is controlled at the host (see `host` block); the inner view is
+  // always a normal flex column that fills the shown host.
+  protected readonly contentClass = computed(() =>
+    cn('mt-2 flex-col flex', this.userClass()),
+  );
+}

package/dist/ui/components/textarea/index.ts

@@ -0,0 +1 @@
+export { UiTextarea } from './textarea';

package/dist/ui/components/textarea/textarea.test.ts

@@ -0,0 +1,138 @@
+import { signal } from '@angular/core';
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { describe, expect, it, vi } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { UiTextarea } from './textarea';
+
+describe('UiTextarea', () => {
+  it('renders with default configuration', async () => {
+    const { container } = await render(UiTextarea);
+    expect(container).toBeTruthy();
+  });
+
+  it('onInput() updates the model and emits `changed`', async () => {
+    const { componentRef } = await render(UiTextarea);
+    const inst = componentRef.instance as unknown as UiTextarea & {
+      onInput: (e: { detail: { value: string } }) => void;
+    };
+    const emitted: string[] = [];
+    inst.changed.subscribe((v) => emitted.push(v));
+    inst.onInput({ detail: { value: 'hello' } });
+    expect(inst.value()).toBe('hello');
+    expect(emitted).toEqual(['hello']);
+  });
+
+  it('onInput() is a no-op when disabled', async () => {
+    const { componentRef } = await render(UiTextarea);
+    const inst = componentRef.instance as unknown as UiTextarea & {
+      onInput: (e: { detail: { value: string } }) => void;
+    };
+    setInputSignal(inst.disabled, true);
+    const emitted = vi.fn();
+    inst.changed.subscribe(emitted);
+    inst.onInput({ detail: { value: 'blocked' } });
+    expect(inst.value()).toBe('');
+    expect(emitted).not.toHaveBeenCalled();
+  });
+
+  it('onFocus/onBlur emit and update state', async () => {
+    const { componentRef } = await render(UiTextarea);
+    const inst = componentRef.instance as unknown as UiTextarea & {
+      onFocus: () => void;
+      onBlur: () => void;
+    };
+    const focused = vi.fn();
+    const blurred = vi.fn();
+    inst.focused.subscribe(focused);
+    inst.blurred.subscribe(blurred);
+    inst.onFocus();
+    inst.onBlur();
+    expect(focused).toHaveBeenCalledTimes(1);
+    expect(blurred).toHaveBeenCalledTimes(1);
+  });
+
+  it('error input triggers the shake effect', async () => {
+    // Same pattern as UiInput: JIT + jsdom doesn't populate template-ref
+    // viewChild queries. Monkey-patch containerRef so the effect body's `el`
+    // check passes and the shake path executes.
+    const { componentRef, container } = await render(UiTextarea);
+    const inst = componentRef.instance as UiTextarea;
+    const view = container.querySelector('view') as Element;
+    (inst as unknown as { containerRef: unknown }).containerRef = signal({
+      nativeElement: view,
+    });
+    setInputSignal(inst.error, 'Too short');
+    await waitForUpdate();
+    await waitForUpdate();
+    expect(container.textContent).toContain('Too short');
+    // Clear then re-trigger to cover the cancel path.
+    setInputSignal(inst.error, '');
+    await waitForUpdate();
+    await waitForUpdate();
+    setInputSignal(inst.error, 'Retry');
+    await waitForUpdate();
+    await waitForUpdate();
+    expect(container.textContent).toContain('Retry');
+  });
+
+  it('renders helper text when no error is present', async () => {
+    const { componentRef, container } = await render(UiTextarea);
+    const inst = componentRef.instance as UiTextarea;
+    setInputSignal(inst.helperText, 'Notes here');
+    await waitForUpdate();
+    expect(container.textContent).toContain('Notes here');
+  });
+
+  it('renders the label when provided', async () => {
+    const { componentRef, container } = await render(UiTextarea);
+    const inst = componentRef.instance as UiTextarea;
+    setInputSignal(inst.label, 'Description');
+    await waitForUpdate();
+    expect(container.textContent).toContain('Description');
+  });
+
+  it('computes a min-height wrapper style when only minLines is set', async () => {
+    // Exercises the `max != null ? ... : ''` false branch of wrapperStyle.
+    const { componentRef, container } = await render(UiTextarea);
+    const inst = componentRef.instance as UiTextarea;
+    setInputSignal(inst.minLines, 5);
+    await waitForUpdate();
+    // 5 * 20 + 20 = 120px
+    const wrapper = container.querySelector('[style*="min-height"]');
+    expect(wrapper?.getAttribute('style')).toContain('min-height: 120px');
+    expect(wrapper?.getAttribute('style')).not.toContain('max-height');
+  });
+
+  it('adds max-height to wrapper style when maxLines is set', async () => {
+    const { componentRef, container } = await render(UiTextarea);
+    const inst = componentRef.instance as UiTextarea;
+    setInputSignal(inst.maxLines, 4);
+    await waitForUpdate();
+    const wrapper = container.querySelector('[style*="max-height"]');
+    expect(wrapper?.getAttribute('style')).toContain('max-height: 100px');
+  });
+
+  it('makes the wrapper a stacking context so the field scrolls with it', async () => {
+    // On Lynx a z-indexed element inside a scroll-view only follows the scroll
+    // when an ancestor inside the scroll content is a stacking context. Without
+    // z-0 on the wrapper, the native field (and its placeholder) stays fixed on
+    // screen while the page scrolls.
+    const { container } = await render(UiTextarea);
+    const wrapper = container.querySelector(
+      '[class*="rounded-xl"][class*="bg-muted"]',
+    );
+    expect(wrapper?.getAttribute('class')?.split(/\s+/)).toContain('z-0');
+  });
+
+  it('applies the disabled dim class when disabled', async () => {
+    // Covers the true branch of `disabled() && 'opacity-50'` in textareaWrapperClass.
+    const { componentRef, container } = await render(UiTextarea);
+    const inst = componentRef.instance as UiTextarea;
+    setInputSignal(inst.disabled, true);
+    await waitForUpdate();
+    const wrapper = container.querySelector(
+      '[class*="rounded-xl"][class*="bg-muted"]',
+    );
+    expect(wrapper?.getAttribute('class')).toContain('opacity-50');
+  });
+});

package/dist/ui/components/textarea/textarea.ts

@@ -0,0 +1,221 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { type FormValueControl } from '@angular/forms/signals';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { type AnimationHandle, shake } from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+@Component({
+  selector: 'ui-textarea',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view #container [class]="containerClass()">
+      @if (label()) {
+        <text [class]="labelClass()">{{ label() }}</text>
+      }
+      <!-- The min/max height lives on this wrapper, not the textarea: a native
+           Lynx textarea only auto-grows when it drives its container's height
+           (via height:100% below). Pinning min/max-height on the textarea itself
+           locks it to a fixed box that scrolls but never grows. -->
+      <view [class]="textareaWrapperClass()" [style]="wrapperStyle()">
+        <!-- Focus ring on its own overlay layer so it can fade (see input.ts for
+             the full rationale): box-shadow is animatable:no on Lynx, opacity is,
+             so we transition the layer's opacity. First child = painted behind
+             the textarea on Lynx (strict source order). Source order alone is NOT
+             enough on web: CSS paints a positioned (absolute) sibling above a
+             static one regardless of source order, so this transparent overlay
+             would swallow every tap — no focus, no typing. The textarea below
+             carries position:relative + z-index:1 so it sits above the overlay on
+             BOTH platforms (required on web). The wrapper's z-0 makes it the
+             stacking context for that z-index; without it Lynx stacks the native
+             textarea against an ancestor outside the scroll-view, so it stays
+             fixed on screen while the page scrolls. No pointer-events
+             (which errors the Lynx build). OUTSET only; Lynx doesn't render inset
+             box-shadows. -->
+        <view
+          class="rounded-xl opacity-0 absolute bottom-0 left-0 right-0 top-0"
+          [style.transition]="'opacity 150ms ease'"
+          [style.box-shadow]="ringShadow()"
+          [style.opacity]="ringVisible() ? 1 : 0"
+        ></view>
+        <!-- [attr.disabled]="disabled() || undefined": passing 'undefined'
+             removes the attribute entirely; passing 'false' would set
+             disabled="false" which Lynx still treats as disabled. -->
+        <!-- [value] not [attr.value]: same reason as UiInput — routes through
+             LynxTextarea.ngOnChanges so value changes call invoke("setValue")
+             rather than the ineffective __SetAttribute path. -->
+        <!-- [attr.enable-scroll-bar]: only surface the scrollbar once maxLines is
+             set (i.e. the field can actually scroll). Native scrolling past
+             max-height works regardless; this just shows the indicator.
+             height:100% makes the textarea fill (and grow) the wrapper; the
+             pinned line-height keeps the wrapper's line math exact. -->
+        <!-- [attr.placeholder]: suppress the placeholder whenever a value is
+             present. The browser hides a placeholder under a value automatically,
+             but Lynx's iOS textarea renders the placeholder as a separate overlay
+             view that only hides on textViewDidChange — so an initial value set via
+             the setValue UIMethod leaves the placeholder stacked on top of it. Not
+             emitting the attribute when there's a value matches web semantics and
+             avoids the overlap on all platforms. -->
+        <textarea
+          [attr.placeholder]="value() ? null : placeholder()"
+          [value]="value()"
+          [attr.disabled]="disabled() || undefined"
+          [attr.enable-scroll-bar]="maxLines() != null ? 'true' : null"
+          class="text-sm text-foreground"
+          style="border: none; background: transparent; height: 100%; width: 100%; line-height: 20px; position: relative; z-index: 1;"
+          (bindinput)="onInput($any($event))"
+          (bindfocus)="onFocus()"
+          (bindblur)="onBlur()"
+        ></textarea>
+      </view>
+      @if (error()) {
+        <text [class]="errorClass()">{{ error() }}</text>
+      } @else if (helperText()) {
+        <text [class]="helperClass()">{{ helperText() }}</text>
+      }
+    </view>
+  `,
+})
+export class UiTextarea implements FormValueControl<string> {
+  readonly value = model<string>('');
+  readonly label = input<string>('');
+  readonly placeholder = input<string>('');
+  readonly helperText = input<string>('');
+  readonly error = input<string>('');
+  readonly disabled = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  // SwiftUI-style lineLimit(min...max). The field opens at minLines, grows with
+  // content, then stops at maxLines and scrolls internally. maxLines defaults to
+  // undefined so the field grows unbounded (the previous behavior) unless capped.
+  readonly minLines = input(3);
+  readonly maxLines = input<number>();
+
+  readonly changed = output<string>();
+  readonly focused = output<void>();
+  readonly blurred = output<void>();
+
+  readonly containerRef = viewChild<ElementRef>('container');
+  readonly #isFocused = signal(false);
+  #shakeAnim?: AnimationHandle;
+  #previousError = '';
+
+  constructor() {
+    // Shake when an error first appears
+    effect(() => {
+      const err = this.error();
+      const el = this.containerRef()?.nativeElement;
+      if (err && !this.#previousError && el) {
+        this.#shakeAnim?.cancel();
+        this.#shakeAnim = shake(el);
+      }
+      this.#previousError = err;
+    });
+  }
+
+  protected readonly containerClass = computed(() =>
+    cn('flex-col gap-1.5 flex', this.userClass()),
+  );
+
+  protected readonly labelClass = computed(() =>
+    cn('text-sm font-medium text-foreground'),
+  );
+
+  protected readonly textareaWrapperClass = computed(() =>
+    cn(
+      // No min-height here — the minimum is now enforced by the textarea's own
+      // min-height (minLines) so callers can go below the old 3-line floor.
+      // z-0: stacking context for the textarea's z-index (see the template
+      // comment) so the native textarea scrolls with its wrapper.
+      'z-0 rounded-xl bg-muted px-3.5 py-2.5',
+      this.disabled() && 'opacity-50',
+    ),
+  );
+
+  /**
+   * Focus ring, drawn as an OUTSET box-shadow on a dedicated overlay layer (see
+   * the template comment, and input.ts for the full rationale). Two stacked
+   * outset shadows: a solid 1px ring hugging the edge (reads as a crisp border)
+   * and a softer 3px ring around it. Focus pairs var(--ring) with the translucent
+   * var(--ring-subtle); error uses solid var(--destructive) for both. Always set
+   * (never null) so the shadow stays painted while the layer fades out —
+   * visibility is driven by ringVisible()/opacity. On its own layer (not folded
+   * into wrapperStyle()) so the wrapper's whole-string [style] and this per-key
+   * box-shadow never collide. Colors resolve at runtime and track dark mode.
+   */
+  protected readonly ringShadow = computed(() =>
+    this.error()
+      ? '0 0 0 1px var(--destructive), 0 0 0 3px var(--destructive)'
+      : '0 0 0 1px var(--ring), 0 0 0 3px var(--ring-subtle)',
+  );
+
+  /**
+   * Whether the focus ring is shown. The overlay's opacity transitions between 0
+   * and 1 on this, fading the ring in/out (opacity is animatable on Lynx;
+   * box-shadow is not). Shown while focused, or while an error is present.
+   */
+  protected readonly ringVisible = computed(
+    () => this.#isFocused() || this.error() !== '',
+  );
+
+  // Sizing lives on the wrapper so the textarea (height:100%) grows it with
+  // content between min and max, then scrolls at the cap — the native textarea
+  // does not auto-grow on its own. The textarea's pinned line-height (20px, the
+  // text-sm line box) makes N lines map to exactly N*20px, independent of
+  // platform font metrics or Tailwind default drift. Lynx views are border-box,
+  // so these heights include the wrapper's py-2.5 (20px) vertical padding.
+  // maxLines is omitted when unset so the field keeps growing unbounded (the
+  // previous default).
+  protected readonly wrapperStyle = computed(() => {
+    const lineHeight = 20;
+    const verticalPadding = 20; // py-2.5 → 10px top + 10px bottom
+    const max = this.maxLines();
+    return [
+      `min-height: ${this.minLines() * lineHeight + verticalPadding}px`,
+      max != null ? `max-height: ${max * lineHeight + verticalPadding}px` : '',
+    ]
+      .filter(Boolean)
+      .join('; ');
+  });
+
+  protected readonly helperClass = computed(() =>
+    cn('text-xs text-muted-foreground'),
+  );
+
+  protected readonly errorClass = computed(() =>
+    cn('text-xs text-destructive'),
+  );
+
+  protected onFocus(): void {
+    this.#isFocused.set(true);
+    this.focused.emit();
+  }
+
+  protected onBlur(): void {
+    this.#isFocused.set(false);
+    this.blurred.emit();
+  }
+
+  /**
+   * Lynx input events carry the updated value in `event.detail.value`,
+   * not in `event.target.value` as on the web — hence the custom type.
+   */
+  protected onInput(event: { detail: { value: string } }): void {
+    if (this.disabled()) return;
+    this.value.set(event.detail.value);
+    this.changed.emit(event.detail.value);
+  }
+}

package/dist/ui/components/toast/index.ts

@@ -0,0 +1,9 @@
+export { UiToaster } from './toast';
+export {
+  toast,
+  dismissToast,
+  toasts,
+  type ToastAction,
+  type ToastData,
+  type ToastOptions,
+} from './toast-state';