@mhmo91/schmancy 0.8.4 → 0.9.2

package/types/src/directives/cursor-glow.d.ts

@@ -0,0 +1,38 @@
+import { type ElementPart } from 'lit/directive.js';
+import { AsyncDirective } from 'lit/async-directive.js';
+export interface CursorGlowOptions {
+    /** Glow radius in pixels (default: 200) */
+    radius?: number;
+    /** Glow color — CSS color value (default: primary color) */
+    color?: string;
+    /** Glow opacity 0-1 (default: 0.12) */
+    intensity?: number;
+}
+/**
+ * Cursor glow directive — a soft radial light follows the cursor across the surface.
+ *
+ * @example
+ * ```html
+ * <schmancy-surface type="glass" ${cursorGlow()}>content</schmancy-surface>
+ * <div ${cursorGlow({ radius: 300, intensity: 0.2 })}>hero panel</div>
+ * ```
+ */
+declare class CursorGlowDirective extends AsyncDirective {
+    private element;
+    private glowEl?;
+    private readonly teardown$;
+    private radius;
+    private color;
+    private intensity;
+    private prevKey?;
+    private didSetPosition;
+    private cachedRect?;
+    render(_options?: CursorGlowOptions): any;
+    update(part: ElementPart, [options]: [CursorGlowOptions?]): any;
+    reconnected(): void;
+    private ensureGlowElement;
+    private setupTracking;
+    disconnected(): void;
+}
+export declare const cursorGlow: (_options?: CursorGlowOptions) => import("lit-html/directive").DirectiveResult<typeof CursorGlowDirective>;
+export {};

package/types/src/directives/cycle-text.d.ts

@@ -0,0 +1,44 @@
+import { AsyncDirective } from 'lit/async-directive.js';
+import type { ElementPart } from 'lit/directive.js';
+export type CycleTransition = 'fade' | 'slide' | 'typewriter';
+export interface CycleTextOptions {
+    /** Transition between items (default: 'fade') */
+    transition?: CycleTransition;
+    /** Default hold duration per item in ms (default: 2000). Overridden by child data-hold. */
+    hold?: number;
+    /** Transition duration in ms (default: 300) */
+    duration?: number;
+    /** Initial delay before first cycle in ms (default: 0) */
+    delay?: number;
+    /** 'replace' cycles one at a time; 'add' accumulates items then resets (default: 'replace') */
+    mode?: 'replace' | 'add';
+    /** Separator between accumulated items in add mode (default: ', ') */
+    separator?: string;
+}
+declare class CycleTextDirective extends AsyncDirective {
+    private element;
+    private items;
+    private subscription;
+    private typewriterSub;
+    private currentAnimation;
+    private addDisplayEl;
+    private disconnecting$;
+    private initialized;
+    render(_options?: CycleTextOptions): symbol;
+    update(part: ElementPart, [options]: [CycleTextOptions?]): symbol;
+    disconnected(): void;
+    reconnected(): void;
+    private startCycling;
+    private startReplaceCycling;
+    private startAddCycling;
+    /** Types text character by character, appending to existing content. Completes after all chars typed. */
+    private typewriterAdd;
+    private transitionItems;
+    private fadeTransition;
+    /** Counter-style slide: both animate simultaneously in same grid cell */
+    private slideTransition;
+    private typewriterTransition;
+    private cleanup;
+}
+export declare const cycleText: (_options?: CycleTextOptions) => import("lit-html/directive").DirectiveResult<typeof CycleTextDirective>;
+export {};

package/types/src/directives/depth-of-field.d.ts

@@ -0,0 +1,38 @@
+import { type ElementPart } from 'lit/directive.js';
+import { AsyncDirective } from 'lit/async-directive.js';
+export interface DepthOfFieldOptions {
+    /** When true, blur is applied. When false, blur is removed. */
+    active: boolean;
+    /** Max blur radius in pixels (default: 8) */
+    maxBlur?: number;
+    /** Duration of blur transition in ms (default: 400) */
+    duration?: number;
+}
+/**
+ * Depth-of-field directive — progressive blur on background content.
+ *
+ * Reactive: responds to `active` changing. Uses `style.scale` instead of
+ * `style.transform` to avoid conflicts with other directives.
+ *
+ * @example
+ * ```html
+ * <main ${depthOfField({ active: this.dialogOpen, maxBlur: 8 })}>
+ *   page content
+ * </main>
+ * ```
+ */
+declare class DepthOfFieldDirective extends AsyncDirective {
+    private element;
+    private maxBlur;
+    private duration;
+    private isBlurred;
+    private transitionSet;
+    render(_options: DepthOfFieldOptions): any;
+    update(part: ElementPart, [options]: [DepthOfFieldOptions]): any;
+    private applyBlur;
+    private clearBlur;
+    disconnected(): void;
+    reconnected(): void;
+}
+export declare const depthOfField: (_options: DepthOfFieldOptions) => import("lit-html/directive").DirectiveResult<typeof DepthOfFieldDirective>;
+export {};

package/types/src/directives/drag.d.ts

@@ -1,17 +1,19 @@
-import { Directive, Part, PartInfo } from 'lit/directive.js';
+import { Directive, type ElementPart, type PartInfo } from 'lit/directive.js';
 export type SchmancyDropEvent = CustomEvent<{
     source: string;
     destination: string;
+    /** Where the item was dropped relative to the destination: above or below its midpoint */
+    position?: 'before' | 'after';
 }>;
 export declare class DragDirective extends Directive {
     private element?;
     private id;
+    private registeredId?;
     private destroy$;
     constructor(partInfo: PartInfo);
-    private handleDragStart;
-    private handleDragEnd;
-    update(part: Part, [id]: [string]): symbol;
+    update(part: ElementPart, [id]: [string]): symbol;
     disconnected(): void;
+    reconnected(): void;
     render(_id: string): symbol;
 }
 export declare const drag: (_id: string) => import("lit-html/directive").DirectiveResult<typeof DragDirective>;
@@ -20,11 +22,9 @@ export declare class DropDirective extends Directive {
     private destinationId;
     private destroy$;
     constructor(partInfo: PartInfo);
-    private handleDragOver;
-    private handleDragLeave;
-    private handleDrop;
-    update(part: Part, [destinationId]: [string]): symbol;
+    update(part: ElementPart, [destinationId]: [string]): symbol;
     disconnected(): void;
+    reconnected(): void;
     render(_destinationId: string): symbol;
 }
 export declare const drop: (_destinationId: string) => import("lit-html/directive").DirectiveResult<typeof DropDirective>;

package/types/src/directives/gravity.d.ts

@@ -0,0 +1,40 @@
+import { type ElementPart } from 'lit/directive.js';
+import { AsyncDirective } from 'lit/async-directive.js';
+export interface GravityOptions {
+    /** Mass: 0.5 (light/bouncy) to 2.0 (heavy/damped). Default: 1.0 */
+    mass?: number;
+    /** Fall distance in pixels (default: 30) */
+    distance?: number;
+    /** Delay before falling in ms (default: 0) */
+    delay?: number;
+    /** Stagger delay per item for lists — multiply by index (default: 0) */
+    stagger?: number;
+}
+/**
+ * Gravity directive — elements fall into place and settle with mass-based bounce.
+ *
+ * Only animates ONCE on first render. Re-renders do not re-trigger.
+ * Disconnecting and reconnecting re-triggers the animation.
+ *
+ * @example
+ * ```html
+ * <schmancy-card ${gravity()}>content</schmancy-card>
+ *
+ * ${repeat(items, item => item.id, (item, i) => html`
+ *   <div ${gravity({ stagger: 50 * i, mass: 0.8 })}>...</div>
+ * `)}
+ * ```
+ */
+declare class GravityDirective extends AsyncDirective {
+    private element;
+    private animation?;
+    private hasAnimated;
+    private options?;
+    render(_options?: GravityOptions): any;
+    update(part: ElementPart, [options]: [GravityOptions?]): any;
+    reconnected(): void;
+    private animate;
+    disconnected(): void;
+}
+export declare const gravity: (_options?: GravityOptions) => import("lit-html/directive").DirectiveResult<typeof GravityDirective>;
+export {};

package/types/src/directives/index.d.ts

@@ -1,5 +1,19 @@
+export * from './animate-text';
 export * from './color';
+export * from './confirm-click';
+export * from './cursor-glow';
+export * from './cycle-text';
+export * from './depth-of-field';
 export * from './drag';
-export * from './guard';
-export * from './height';
+export * from './gravity';
+export * from './intersect';
+export * from './layout';
+export * from './liquid';
+export * from './living-border';
+export * from './long-press';
+export * from './magnetic';
+export * from './nebula';
+export * from './reduced-motion';
+export * from './reveal';
 export * from './ripple';
+export * from './typewriter';

package/types/src/directives/intersect.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Intersect Directive - Simplified IntersectionObserver for Lit
+ *
+ * Automatically handles observer setup and cleanup. Replaces manual
+ * IntersectionObserver management across the codebase.
+ *
+ * @example
+ * ```ts
+ * // Basic - callback when visible
+ * html`<div ${intersect(() => this.loadData())}>Lazy content</div>`
+ *
+ * // Once mode - fires only once then disconnects
+ * html`<img ${intersect(() => this.loadImage(), { once: true })} />`
+ *
+ * // With options
+ * html`<div ${intersect(
+ *   (isVisible) => isVisible && this.playAnimation(),
+ *   { threshold: 0.5, rootMargin: '100px' }
+ * )}>Animated content</div>`
+ *
+ * // Enter/exit callbacks
+ * html`<video ${intersect({
+ *   onEnter: () => this.play(),
+ *   onExit: () => this.pause()
+ * })}>Video</video>`
+ * ```
+ */
+import { AsyncDirective } from 'lit/async-directive.js';
+import type { ElementPart } from 'lit';
+export interface IntersectOptions {
+    /** Fire callback only once then disconnect (default: false) */
+    once?: boolean;
+    /** IntersectionObserver threshold (default: 0) */
+    threshold?: number | number[];
+    /** IntersectionObserver rootMargin (default: '0px') */
+    rootMargin?: string;
+    /** Delay in ms before triggering callback (default: 0) */
+    delay?: number;
+}
+export interface IntersectCallbacks {
+    /** Called when element enters viewport */
+    onEnter?: () => void;
+    /** Called when element exits viewport */
+    onExit?: () => void;
+    /** IntersectionObserver options */
+    options?: IntersectOptions;
+}
+type IntersectCallback = (isVisible: boolean, entry: IntersectionObserverEntry) => void;
+declare class IntersectDirective extends AsyncDirective {
+    private state;
+    render(_callbackOrOptions: IntersectCallback | IntersectCallbacks, _options?: IntersectOptions): symbol;
+    update(part: ElementPart, [callbackOrOptions, options]: [IntersectCallback | IntersectCallbacks, IntersectOptions?]): symbol;
+    private triggerCallback;
+    private cleanup;
+    private pause;
+    disconnected(): void;
+    reconnected(): void;
+}
+export declare const intersect: (_callbackOrOptions: IntersectCallbacks | IntersectCallback, _options?: IntersectOptions) => import("lit-html/directive").DirectiveResult<typeof IntersectDirective>;
+export {};

package/types/src/directives/layout.d.ts

@@ -0,0 +1,62 @@
+import { ElementPart } from 'lit/directive.js';
+import { AsyncDirective } from 'lit/async-directive.js';
+import { Observable } from 'rxjs';
+/**
+ * RxJS wrapper for ResizeObserver - auto-cleans on unsubscribe
+ */
+export declare function fromResizeObserver(element: Element): Observable<ResizeObserverEntry[]>;
+/**
+ * fullHeight directive - fills remaining viewport space
+ *
+ * Reactive sources:
+ * - Parent ResizeObserver (layout shifts)
+ * - Window resize / visualViewport (viewport changes)
+ * - Orientation change (device rotation)
+ * - Focus out (mobile keyboard dismiss)
+ * - Theme fullscreen toggle
+ *
+ * Performance:
+ * - distinctUntilChanged prevents redundant style writes
+ * - debounceTime(16) batches rapid events (~60fps)
+ * - Single shared stream for global events
+ */
+declare class FullHeight extends AsyncDirective {
+    private element;
+    private disconnecting$;
+    private calculateHeight;
+    private applyStyles;
+    private setupHeightStream;
+    render(): void;
+    update(part: ElementPart): void;
+    disconnected(): void;
+    reconnected(): void;
+}
+export declare const fullHeight: () => import("lit-html/directive").DirectiveResult<typeof FullHeight>;
+/**
+ * fullWidth directive - fills remaining horizontal viewport space
+ *
+ * Reactive sources:
+ * - Element ResizeObserver (detects when element moves/resizes)
+ * - Parent ResizeObserver (layout shifts, e.g., sidebar)
+ * - Window resize / visualViewport (viewport changes)
+ * - Orientation change (device rotation)
+ * - Theme fullscreen toggle (sidebar visibility)
+ *
+ * Performance:
+ * - distinctUntilChanged prevents redundant style writes
+ * - debounceTime(16) batches rapid events (~60fps)
+ * - Single shared stream for global events
+ */
+declare class FullWidth extends AsyncDirective {
+    private element;
+    private disconnecting$;
+    private calculateWidth;
+    private applyStyles;
+    private setupWidthStream;
+    render(): void;
+    update(part: ElementPart): void;
+    disconnected(): void;
+    reconnected(): void;
+}
+export declare const fullWidth: () => import("lit-html/directive").DirectiveResult<typeof FullWidth>;
+export {};

package/types/src/directives/liquid.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Liquid Glass Directive — Apple WWDC 2025 Liquid Glass
+ *
+ * Pure CSS, zero DOM mutation. Applies only inline styles to the host element:
+ * - backdrop-filter: blur + saturate + brightness (glass material)
+ * - background: semi-transparent tint (glass visibility layer)
+ * - box-shadow: Fresnel edge glow (inset) + depth shadow (outer)
+ * - border: thin luminous edge
+ *
+ * Does NOT insert any child elements, so it's safe on flex/grid containers.
+ *
+ * Usage:
+ * ```ts
+ * html`<div ${liquid()}>Content</div>`
+ * html`<div ${liquid({ intensity: 'strong' })}>Thick glass</div>`
+ * html`<div ${liquid({ active: false })}>No glass</div>`
+ * ```
+ */
+import { AsyncDirective } from 'lit/async-directive.js';
+import type { ElementPart } from 'lit';
+export interface LiquidOptions {
+    /** Whether the effect is active. Default: true */
+    active?: boolean;
+    /** Glass thickness. Default: 'medium' */
+    intensity?: 'light' | 'medium' | 'strong';
+}
+declare class LiquidDirective extends AsyncDirective {
+    private state;
+    render(_options?: LiquidOptions): symbol;
+    update(part: ElementPart, [options]: [LiquidOptions?]): symbol;
+    private activate;
+    private applyStyles;
+    private cleanup;
+    disconnected(): void;
+    reconnected(): void;
+}
+export declare const liquid: (_options?: LiquidOptions) => import("lit-html/directive").DirectiveResult<typeof LiquidDirective>;
+export {};

package/types/src/directives/living-border.d.ts

@@ -0,0 +1,39 @@
+import { type ElementPart } from 'lit/directive.js';
+import { AsyncDirective } from 'lit/async-directive.js';
+export interface LivingBorderOptions {
+    /** Animation duration in ms (default: 3000) */
+    duration?: number;
+    /** Border width in pixels (default: 1) */
+    width?: number;
+    /** Glow color (default: primary) */
+    color?: string;
+    /** Glow spread in pixels (default: 6) */
+    spread?: number;
+    /** Only animate on hover (default: false) */
+    onHover?: boolean;
+}
+/**
+ * Living border directive — a gradient light traces the element's edges.
+ *
+ * @example
+ * ```html
+ * <schmancy-card ${livingBorder()}>content</schmancy-card>
+ * <div ${livingBorder({ duration: 4000, onHover: true })}>panel</div>
+ * ```
+ */
+declare class LivingBorderDirective extends AsyncDirective {
+    private element;
+    private borderEl?;
+    private readonly teardown$;
+    private prevKey?;
+    private didSetPosition;
+    private lastOptions?;
+    render(_options?: LivingBorderOptions): any;
+    update(part: ElementPart, [options]: [LivingBorderOptions?]): any;
+    reconnected(): void;
+    private createBorderOverlay;
+    private cleanup;
+    disconnected(): void;
+}
+export declare const livingBorder: (_options?: LivingBorderOptions) => import("lit-html/directive").DirectiveResult<typeof LivingBorderDirective>;
+export {};

package/types/src/directives/long-press.d.ts

@@ -0,0 +1,38 @@
+import { Directive, ElementPart, PartInfo } from 'lit/directive.js';
+export interface LongPressOptions {
+    /** Duration in milliseconds before long-press triggers (default: 500) */
+    duration?: number;
+    /** Movement threshold in pixels that cancels the long-press (default: 10) */
+    movementThreshold?: number;
+}
+declare class LongPressDirective extends Directive {
+    constructor(partInfo: PartInfo);
+    render(_callback: () => void, _options?: LongPressOptions): any;
+    update(part: ElementPart, [callback, options]: [() => void, LongPressOptions?]): any;
+    private optionsEqual;
+    private setupLongPress;
+    disconnected(part: ElementPart): void;
+    reconnected(part: ElementPart): void;
+}
+/**
+ * Long-press gesture directive for Lit components.
+ *
+ * Detects long-press (press-and-hold) gestures with movement cancellation.
+ * Works with both touch and mouse events via PointerEvents API.
+ *
+ * @param callback - Function to call when long-press is detected
+ * @param options - Optional configuration
+ * @param options.duration - Time in ms before trigger (default: 500)
+ * @param options.movementThreshold - Max movement in px before cancel (default: 10)
+ *
+ * @example
+ * ```typescript
+ * // Basic usage
+ * html`<div ${longPress(() => this.showDialog())}></div>`
+ *
+ * // With custom options
+ * html`<div ${longPress(() => this.showMenu(), { duration: 800, movementThreshold: 15 })}></div>`
+ * ```
+ */
+export declare const longPress: (_callback: () => void, _options?: LongPressOptions) => import("lit-html/directive").DirectiveResult<typeof LongPressDirective>;
+export {};

package/types/src/directives/magnetic.d.ts

@@ -0,0 +1,35 @@
+import { type ElementPart } from 'lit/directive.js';
+import { AsyncDirective } from 'lit/async-directive.js';
+export interface MagneticOptions {
+    /** Max displacement in pixels (default: 4) */
+    strength?: number;
+    /** Activation radius in pixels (default: 100) */
+    radius?: number;
+}
+/**
+ * Magnetic directive — elements lean toward the cursor with spring physics.
+ *
+ * Uses `style.translate` (CSS individual transform) so it composes
+ * with existing transforms on the element.
+ *
+ * @example
+ * ```html
+ * <schmancy-button ${magnetic()}>Submit</schmancy-button>
+ * <schmancy-icon-button ${magnetic({ strength: 6, radius: 120 })}>add</schmancy-icon-button>
+ * ```
+ */
+declare class MagneticDirective extends AsyncDirective {
+    private element;
+    private readonly teardown$;
+    private strength;
+    private radius;
+    private prevKey?;
+    private cachedRect?;
+    render(_options?: MagneticOptions): any;
+    update(part: ElementPart, [options]: [MagneticOptions?]): any;
+    reconnected(): void;
+    private setupMagnetic;
+    disconnected(): void;
+}
+export declare const magnetic: (_options?: MagneticOptions) => import("lit-html/directive").DirectiveResult<typeof MagneticDirective>;
+export {};

package/types/src/directives/nebula.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Nebula Directive v3 - Surreal Dimensional Rift
+ *
+ * A surreal, otherworldly cosmic loading effect inspired by deep-space imagery
+ * but rendered as a dimensional rift — chromatic aberration channels, iridescent
+ * hue-cycling core, event horizon pulse, bioluminescent tendrils, and quantum
+ * particles — all implemented with CSS @keyframes for GPU-composited performance.
+ *
+ * ## Performance (v3 architecture):
+ * - 6 DOM layers with CSS @keyframes (no JS in hot path)
+ * - Shared NebulaCoordinator singleton (1 IntersectionObserver for all instances)
+ * - Visibility gating via CSS class toggle (`paused`/`running`)
+ * - `contain: strict` + `translateZ(0)` for compositor promotion
+ * - `animation-play-state` pauses when off-screen or tab hidden
+ *
+ * ## Visual layers (back to front):
+ * 1. Cosmic Dust + Void — static dark filaments, vignette, void pockets (multiply, zero animation cost)
+ * 2. Chromatic Red — aberration channel shifted right (screen blend)
+ * 3. Chromatic Blue — aberration channel shifted left (screen blend)
+ * 4. Iridescent Core + Event Horizon — hue-rotate cycling center (screen blend)
+ * 5. Bioluminescent Tendrils — organic breathing gas wisps (screen blend)
+ * 6. Quantum Particles — scattered hue-shifting dots (screen blend)
+ *
+ * Uses spring physics from Blackbird animation system for organic motion.
+ * Respects prefers-reduced-motion for accessibility.
+ *
+ * Usage:
+ * ```ts
+ * html`<div ${nebula()}>Content</div>`
+ * html`<div ${nebula({ active: this.loading })}>Content</div>`
+ * html`<div ${nebula({ active: true, temperature: -0.5 })}>Content</div>`
+ * ```
+ */
+import { AsyncDirective } from 'lit/async-directive.js';
+import type { ElementPart } from 'lit';
+export interface NebulaOptions {
+    /** Whether the nebula is active/visible. Default: true (auto-shows, auto-hides after autoHideDuration) */
+    active?: boolean;
+    /** Auto-hide after this duration (ms). Set to 0 to disable. Default: 3000 */
+    autoHideDuration?: number;
+    /** Render behind content instead of on top. Default: true */
+    background?: boolean;
+    /** Overall brightness/intensity (0-1). Default: 1 */
+    intensity?: number;
+    /** Blur amount multiplier. Default: 1 */
+    blur?: number;
+    /** Animation speed multiplier (0.5 = half speed, 2 = double speed). Default: 1 */
+    speed?: number;
+    /** Fade-in duration (ms). Default: 1000 */
+    fadeInDuration?: number;
+    /** Fade-out duration (ms). Default: 8000 */
+    fadeOutDuration?: number;
+    /** Opacity when idle/dimmed (0-1). Set to 0 to fully hide. Default: 0.6 */
+    idleOpacity?: number;
+    /** Whether idle state continues breathing. Default: true */
+    idleBreathe?: boolean;
+    /** Color temperature shift (-1 = cool/blue, 0 = neutral, 1 = warm/pink). Default: 0 */
+    temperature?: number;
+    /** Chromatic aberration intensity (0-1). Default: 1 */
+    chromaticAberration?: number;
+    /** Number of quantum particles. Default: 8 */
+    particleCount?: number;
+}
+declare class NebulaDirective extends AsyncDirective {
+    private state;
+    private coordinator;
+    render(_options?: NebulaOptions): symbol;
+    update(part: ElementPart, [options]: [NebulaOptions?]): symbol;
+    onVisibilityChange(isVisible: boolean): void;
+    private show;
+    private awakenOverlay;
+    private createOverlay;
+    private scheduleAutoHide;
+    private hide;
+    private cleanup;
+    disconnected(): void;
+    reconnected(): void;
+}
+export declare const nebula: (_options?: NebulaOptions) => import("lit-html/directive").DirectiveResult<typeof NebulaDirective>;
+export {};

package/types/src/directives/reduced-motion.d.ts

@@ -0,0 +1,2 @@
+import { BehaviorSubject } from 'rxjs';
+export declare const reducedMotion$: BehaviorSubject<boolean>;

package/types/src/directives/reveal.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Reveal Directive - Animated show/hide with zero layout shift
+ *
+ * Uses Blackbird spring physics for natural, organic motion.
+ * Element stays in DOM to prevent layout shift.
+ *
+ * Usage:
+ * ```ts
+ * // Basic - uses 'smooth' preset
+ * html`<div ${reveal(this.isVisible)}>Content</div>`
+ *
+ * // With preset - 'snappy' for quick interactions
+ * html`<div ${reveal(this.isVisible, { preset: 'snappy' })}>Content</div>`
+ *
+ * // With custom max height
+ * html`<div ${reveal(this.items.length > 1, { maxHeight: '200px' })}>Content</div>`
+ *
+ * // Bouncy for playful UI
+ * html`<div ${reveal(this.showCelebration, { preset: 'bouncy' })}>🎉 Congrats!</div>`
+ * ```
+ *
+ * Presets:
+ * - 'smooth' (default): Apple-style, subtle overshoot - 500ms
+ * - 'snappy': Quick with minimal overshoot - 300ms
+ * - 'bouncy': Playful with noticeable overshoot - 600ms
+ * - 'gentle': Slow, smooth, no overshoot - 700ms
+ *
+ * @see packages/schmancy/src/utils/animation.ts for Blackbird system
+ */
+import { AsyncDirective } from 'lit/async-directive.js';
+import type { ElementPart, PartInfo } from 'lit/directive.js';
+export type RevealPreset = 'smooth' | 'snappy' | 'bouncy' | 'gentle';
+export interface RevealOptions {
+    /** Animation preset (default: 'smooth') */
+    preset?: RevealPreset;
+    /** Max height when revealed (default: '10rem') */
+    maxHeight?: string;
+    /** Custom duration override in ms (uses preset duration if not specified) */
+    duration?: number;
+    /** Custom easing override (uses preset easing if not specified) */
+    easing?: string;
+}
+declare class RevealDirective extends AsyncDirective {
+    private initialized;
+    private element;
+    constructor(partInfo: PartInfo);
+    render(_show?: boolean, _options?: RevealOptions): symbol;
+    update(part: ElementPart, [show, options]: [boolean | undefined, RevealOptions?]): symbol;
+    private setupElement;
+    disconnected(): void;
+    reconnected(): void;
+}
+export declare const reveal: (_show?: boolean, _options?: RevealOptions) => import("lit-html/directive").DirectiveResult<typeof RevealDirective>;
+export {};

package/types/src/directives/ripple.d.ts

@@ -1,10 +1,20 @@
+import { type ElementPart } from 'lit/directive.js';
 import { AsyncDirective } from 'lit/async-directive.js';
+/**
+ * Ripple directive — Material-style ink ripple on click.
+ *
+ * @example
+ * ```html
+ * <div ${ripple()}>Click me</div>
+ * ```
+ */
 declare class RippleDirective extends AsyncDirective {
-    element: HTMLElement;
-    private subscription?;
-    render(): void;
-    addRippleEffect: (event: MouseEvent) => void;
-    update(part: any): void;
+    private element;
+    private readonly teardown$;
+    render(): any;
+    update(part: ElementPart): any;
+    reconnected(): void;
+    private addRipple;
     disconnected(): void;
 }
 export declare const ripple: () => import("lit-html/directive").DirectiveResult<typeof RippleDirective>;