@mhmo91/schmancy 0.8.6 → 0.9.3

package/types/mixins/baseElement.d.ts

@@ -8,5 +8,17 @@ export declare class IBaseMixin {
     classMap: typeof classMap;
     styleMap: typeof styleMap;
     discover<T extends HTMLElement>(tag: string): Observable<T | null>;
+    readonly stableId: string;
+    uid: string;
+    /**
+     * Current locale from theme context. Use with Intl.NumberFormat/DateTimeFormat.
+     * Defaults to navigator.language if no theme provider is found.
+     * @example new Intl.NumberFormat(this.locale).format(1234.56)
+     */
+    readonly locale: string;
+    dispatchScopedEvent<T>(eventName: string, detail?: T, options?: {
+        bubbles?: boolean;
+        composed?: boolean;
+    }): void;
 }
 export declare const BaseElement: <T extends Constructor<LitElement>>(superClass: T) => Constructor<IBaseMixin> & T;

package/types/mixins/discovery.service.d.ts

@@ -1,4 +1,23 @@
 import { Observable } from 'rxjs';
+/**
+ * Global discovery event names
+ */
+declare const DISCOVER_EVENT = "schmancy-discover";
+declare const DISCOVER_RESPONSE_EVENT = "schmancy-discover-response";
+/**
+ * Discovery request detail
+ */
+interface DiscoverRequest {
+    selector: string;
+    requestId: string;
+}
+/**
+ * Discovery response detail
+ */
+interface DiscoverResponse {
+    requestId: string;
+    element: HTMLElement;
+}
 /**
  * Discover a component in the DOM using the WhereAreYou/HereIAm pattern.
  *
@@ -15,3 +34,56 @@ export declare function discoverComponent<T extends HTMLElement>(componentTag: s
  * @returns Observable that emits the first discovered component or null if none found
  */
 export declare function discoverAnyComponent<T extends HTMLElement>(...componentTags: string[]): Observable<T | null>;
+/**
+ * Universal element discovery - finds ANY element by CSS selector across shadow DOM boundaries.
+ * Uses event-based discovery pattern - no DOM traversal needed.
+ *
+ * How it works:
+ * 1. Broadcasts a discovery request event on window
+ * 2. All $LitElement components receive this event and check their shadow DOM
+ * 3. If a match is found, they respond with the element
+ *
+ * @param selector - CSS selector (e.g., '#my-id', '.my-class', '[data-attr]')
+ * @param timeout - How long to wait for a response in milliseconds (default: 150)
+ * @returns Observable that emits the discovered element or null if not found
+ *
+ * @example
+ * ```typescript
+ * // Find element by ID across shadow boundaries
+ * discoverElement('#app-card-melanie').subscribe(el => {
+ *   if (el) console.log('Found:', el)
+ * })
+ *
+ * // Find element by class
+ * discoverElement('.special-button').subscribe(el => {...})
+ * ```
+ */
+export declare function discoverElement<T extends HTMLElement>(selector: string, timeout?: number): Observable<T | null>;
+/**
+ * Discover multiple elements matching a selector.
+ * Collects all responses within the timeout period.
+ *
+ * @param selector - CSS selector
+ * @param timeout - How long to collect responses (default: 150ms)
+ * @returns Observable that emits array of discovered elements
+ */
+export declare function discoverAllElements<T extends HTMLElement>(selector: string, timeout?: number): Observable<T[]>;
+/**
+ * Smart discovery - automatically detects if input is a CSS selector or component tag.
+ *
+ * @param query - CSS selector (starts with #, ., [) OR component tag name
+ * @param timeout - How long to wait (default: 150ms)
+ * @returns Observable that emits the discovered element or null
+ *
+ * @example
+ * ```typescript
+ * // CSS selector - uses discoverElement
+ * discover('#my-element').subscribe(...)
+ *
+ * // Component tag - uses discoverComponent
+ * discover('schmancy-fancy').subscribe(...)
+ * ```
+ */
+export declare function discover<T extends HTMLElement>(query: string, timeout?: number): Observable<T | null>;
+export { DISCOVER_EVENT, DISCOVER_RESPONSE_EVENT };
+export type { DiscoverRequest, DiscoverResponse };

package/types/mixins/index.d.ts

@@ -1,5 +1,7 @@
 export * from './baseElement';
 export * from './constructor';
+export * from './discovery.service';
 export * from './formField.mixin';
 export * from './litElement.mixin';
+export * from './surface.mixin';
 export * from './tailwind.mixin';

package/types/mixins/surface.mixin.d.ts

@@ -0,0 +1,39 @@
+import type { Constructor } from './constructor';
+import { LitElement } from 'lit';
+import type { TSurfaceColor } from '../src/types/surface';
+export type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto';
+export type SchmancySurfaceRounded = 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all';
+export type SchmancySurfaceElevation = 0 | 1 | 2 | 3 | 4 | 5;
+export declare class ISurfaceMixin {
+    fill: SchmancySurfaceFill;
+    rounded: SchmancySurfaceRounded;
+    elevation: SchmancySurfaceElevation;
+    type: TSurfaceColor;
+    clickable: boolean;
+}
+/**
+ * SurfaceMixin - Adds surface styling properties AND styles to any LitElement
+ *
+ * Uses Lit's finalizeStyles hook to inject surfaceStyles CSS for all surface type selectors.
+ * This is the recommended pattern for mixins that need to add styles.
+ *
+ * Provides these reflected properties:
+ * - `fill`: 'all' | 'width' | 'height' | 'auto' - Controls element dimensions
+ * - `rounded`: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' - Corner rounding
+ * - `elevation`: 0-5 - Shadow depth level
+ * - `type`: TSurfaceColor - Surface color variant (26+ options)
+ *
+ * Usage:
+ * ```typescript
+ * import { SurfaceMixin } from '@mixins/surface.mixin'
+ *
+ * @customElement('my-component')
+ * class MyComponent extends SurfaceMixin(TailwindElement(css`
+ *   :host { display: block; }
+ * `)) {
+ *   // Component now has type, fill, rounded, elevation properties
+ *   // AND surfaceStyles are automatically included
+ * }
+ * ```
+ */
+export declare const SurfaceMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ISurfaceMixin> & T;

package/types/src/area/area.service.d.ts

@@ -46,6 +46,8 @@ declare class AreaService implements AreaSubscription {
     getState<T = unknown>(areaName: string): Observable<T>;
     /**
      * Get params from an area with type safety
+     * Emits current value immediately on subscription via startWith
+     * URL query params are MERGED with route params (URL takes precedence for redirects like _rp_oid)
      */
     params<T extends Record<string, unknown> = Record<string, unknown>>(areaName: string): Observable<T>;
     /**

package/types/src/badge/badge.d.ts

@@ -1,7 +1,7 @@
 /**
  * Badge color types for predefined styles
  */
-export type BadgeColor = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'neutral';
+export type BadgeColor = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'neutral' | 'surface';
 /**
  * Badge size variants
  */

package/types/src/boat/boat.d.ts

@@ -1,45 +1,52 @@
-type BoatState = 'hidden' | 'minimized' | 'expanded';
+type Corner = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+type BoatState = 'collapsed' | 'expanded';
 declare const SchmancyBoat_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 export default class SchmancyBoat extends SchmancyBoat_base {
-    get state(): BoatState;
-    set state(value: BoatState);
     id: string;
-    get lowered(): boolean;
-    set lowered(value: boolean);
     icon?: string;
     label?: string;
-    badge?: string | number;
-    private containerRef;
-    private contentRef;
-    private iconRef;
-    private headerRef;
-    private currentAnimation?;
-    private readonly ANIMATION_CONFIG;
-    private currentState;
-    private isContentVisible;
-    private isAnimating;
-    private isLowered;
+    /** Override the expanded panel width (e.g. '320px', '24rem'). Defaults to responsive sizing. */
+    expandedWidth?: string;
+    /** When true, uses a lower elevation shadow in the minimized (FAB) state. */
+    lowered: boolean;
+    /** Corner the boat is anchored to. */
+    corner: Corner;
+    /** Whether the panel is open. */
+    open: boolean;
+    /**
+     * State property.
+     * Maps 'expanded' → open=true, 'collapsed' → open=false (FAB visible).
+     */
+    get state(): BoatState;
+    set state(val: BoatState);
     private isDragging;
-    private position;
-    private anchor;
+    private _position;
+    private _currentCorner;
+    private _containerRef;
+    private _contentRef;
+    private _headerRef;
+    private _currentAnimation?;
+    private get panelWidth();
+    private get isBottomCorner();
+    private get closedClipPath();
+    private get openClipPath();
+    private get elevation();
+    private _applyContainerPosition;
+    private _loadPosition;
+    private _savePosition;
+    private _validateBounds;
+    private _reorientToNearestCorner;
+    private _setupDrag;
     connectedCallback(): void;
-    private animateToState;
-    private performTransition;
-    private createAnimations;
-    private getStyleForState;
-    private getResponsiveWidth;
-    private updateExpandedWidth;
     firstUpdated(): void;
-    private applyInitialStyles;
-    toggleState(): void;
-    close(): void;
-    private closeAndAddToNav;
-    private calculateDragPosition;
-    private savePosition;
-    private setupDragPipeline;
-    private updateContainerPosition;
-    private updateAnchor;
     disconnectedCallback(): void;
+    private _animateOpen;
+    private _animateClose;
+    toggle(): void;
+    expand(): void;
+    /** Alias for expand() — kept for backwards compatibility. */
+    show(): void;
+    close(): void;
     protected render(): unknown;
 }
 declare global {

package/types/src/button/icon-button.d.ts

@@ -59,6 +59,16 @@ export declare class SchmnacyIconButton extends SchmnacyIconButton_base {
      * @attr
      */
     text: boolean;
+    /**
+     * Icon name - use this instead of slot content to prevent translation breaking icons.
+     * Example: <schmancy-icon-button icon="add"></schmancy-icon-button>
+     * @attr
+     */
+    icon?: string;
+    private _capturedIcon?;
+    connectedCallback(): void;
+    private _captureIconFromChildren;
+    private _handleSlotChange;
     set ariaLabel(value: string);
     get ariaLabel(): string;
     /** Sets focus in the button. */

package/types/src/chips/filter-chip.d.ts

@@ -23,18 +23,12 @@ export declare class SchmancyFilterChip extends SchmancyFilterChip_base {
     private _selected;
     get selected(): boolean;
     set selected(value: boolean);
-    /** Optional icon to display (Material Symbols name) */
-    icon: string;
     /** Whether to show a remove button */
     removable: boolean;
     /** Whether the chip is disabled */
     disabled: boolean;
     /** Whether to use elevated style with shadow */
     elevated: boolean;
-    private hover$;
-    private pressed$;
-    private focused$;
-    iconSlotElements: Element[];
     constructor();
     protected static shadowRootOptions: {
         delegatesFocus: boolean;
@@ -51,12 +45,6 @@ export declare class SchmancyFilterChip extends SchmancyFilterChip_base {
     private handleClick;
     private handleRemove;
     private handleKeyDown;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    private handleMouseDown;
-    private handleMouseUp;
-    private handleFocus;
-    private handleBlur;
     protected render(): unknown;
 }
 export { SchmancyFilterChip as SchmancyChip };

package/types/src/connectivity/connectivity-status.d.ts

@@ -0,0 +1,25 @@
+declare const SchmancyConnectivityStatus_base: import("../../mixins").Constructor<CustomElementConstructor> & import("../../mixins").Constructor<import("@mixins/tailwind.mixin").ITailwindElementMixin> & import("../../mixins").Constructor<import("lit").LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
+/**
+ * @element schmancy-connectivity-status
+ * A beautiful connectivity status component that monitors online/offline state
+ * and shows subtle animated banners when connectivity changes.
+ *
+ * @example
+ * <!-- Add once to your app root -->
+ * <schmancy-connectivity-status></schmancy-connectivity-status>
+ */
+export declare class SchmancyConnectivityStatus extends SchmancyConnectivityStatus_base {
+    private bannerRef;
+    private surfaceRef;
+    private iconRef;
+    private messageRef;
+    connectedCallback(): void;
+    private updateBanner;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-connectivity-status': SchmancyConnectivityStatus;
+    }
+}
+export {};

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

@@ -0,0 +1 @@
+export * from './connectivity-status';

package/types/src/content-drawer/drawer.service.d.ts

@@ -16,6 +16,8 @@ export type DrawerPushOptions = {
 };
 declare class DrawerService {
     private $drawer;
+    private pushCounter;
+    private isDismissing$;
     constructor();
     private dispatchToggleEvent;
     private dispatchRenderEvent;
@@ -24,6 +26,7 @@ declare class DrawerService {
     private handlePush;
     /**
      * Push a component to the content drawer
+     * Every push is guaranteed to render (auto-incremented unique ID prevents deduplication)
      * @param options - Component configuration object with optional state/params/props
      * @example
      * schmancyContentDrawer.push({

package/types/src/date-range/date-range.d.ts

@@ -34,6 +34,8 @@ export declare class SchmancyDateRange extends SchmancyDateRange_base {
     placeholder: string;
     clearable: boolean;
     step?: 'day' | 'week' | 'month' | 'year' | number;
+    /** When true, collapses to just an icon button on mobile screens */
+    collapse: boolean;
     private isOpen;
     private selectedDateRange;
     private activePreset;

package/types/src/details/details.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const SchmancyDetails_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+declare const SchmancyDetails_base: import("@mixins/index").Constructor<import("@mixins/index").ISurfaceMixin> & import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 export default class SchmancyDetails extends SchmancyDetails_base {
     protected static shadowRootOptions: {
         mode: "open";
@@ -14,16 +14,40 @@ export default class SchmancyDetails extends SchmancyDetails_base {
     set open(value: boolean);
     indicatorPlacement: 'start' | 'end';
     hideIndicator: boolean;
+    indicatorRotate: number;
     locked: boolean;
     overlay: boolean;
+    summaryPadding: string;
+    contentPadding: string;
     private _open$;
     private _indicatorRef;
+    private _contentRef;
     private _currentAnimation?;
+    private _indicatorIsOpen;
+    private _closing;
+    private _closeSub?;
+    /** True when browser handles close animation natively via ::details-content */
+    private _nativeAnim;
+    /**
+     * Lazy rendering: tracks if content has ever been opened.
+     * Once true, content stays rendered (even when closed) for smooth animations.
+     */
+    private _hasOpened;
+    constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
-    private _animateIndicator;
     private _handleSummaryClick;
     private _handleToggle;
+    /**
+     * Fallback close: trigger CSS grid+opacity transition, then close native <details>.
+     * The CSS transition (400ms) handles the visual collapse — no WAAPI needed.
+     */
+    private _startClose;
+    private _handleIndicatorSlotChange;
+    private _updateIndicatorSlot;
+    /** Idempotent indicator rotation — skips if already at target state */
+    private _animateIndicator;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/types/src/dialog/dialog-base.mixin.d.ts

@@ -13,14 +13,18 @@ export interface VirtualReference {
  */
 export interface IDialogBaseMixin {
     position: DialogPosition;
+    isMobile: boolean;
+    dragOffset: number;
     show(positionOrEvent?: DialogPosition | MouseEvent | TouchEvent): Promise<boolean>;
-    hide(result?: boolean): void;
+    hide(result?: boolean): Promise<void>;
     isCentered(): boolean;
+    isAnimating(): boolean;
 }
 /**
  * Dialog mixin with smart positioning using Floating UI.
  *
- * Uses autoPlacement to find the position with MOST available space,
- * minimizing the need for content scrolling.
+ * On mobile (< 640px), automatically switches to bottom sheet mode
+ * with swipe-to-dismiss gesture. On tablet/desktop, if content exceeds
+ * a viewport-dependent threshold, also opens as bottom sheet.
  */
 export declare const DialogBase: <T extends Constructor<LitElement & IBaseMixin>>(superClass: T) => Constructor<IDialogBaseMixin> & T;

package/types/src/dialog/dialog-service.d.ts

@@ -19,6 +19,23 @@ export interface DialogOptions {
     hideActions?: boolean;
     targetContainer?: HTMLElement;
 }
+/**
+ * Prompt dialog options
+ */
+export interface PromptOptions {
+    title?: string;
+    message?: string;
+    label?: string;
+    placeholder?: string;
+    defaultValue?: string;
+    inputType?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    confirmText?: string;
+    cancelText?: string;
+    position?: {
+        x: number;
+        y: number;
+    } | MouseEvent | TouchEvent;
+}
 /**
  * Dialog service for centralized dialog management.
  * Uses a single unified SchmancyDialog component for all dialog types.
@@ -29,7 +46,10 @@ export declare class DialogService {
     private activeDialogs;
     private dialogSubject;
     private dismissSubject;
+    private lastClickPosition;
+    private clickTrackingInitialized;
     private constructor();
+    private setupClickPositionTracking;
     static getInstance(): DialogService;
     private setupDialogOpeningLogic;
     private setupDialogDismissLogic;
@@ -39,7 +59,12 @@ export declare class DialogService {
     close(): boolean;
     ask(message: string, event?: MouseEvent | TouchEvent): Promise<boolean>;
     danger(options: Omit<DialogOptions, 'variant'>): Promise<boolean>;
-    private getCenteredPosition;
+    /**
+     * Shows a prompt dialog with an input field.
+     * Returns the input value if confirmed, null if cancelled.
+     */
+    prompt(options: PromptOptions): Promise<string | null>;
+    private getDefaultPosition;
 }
 /**
  * Global dialog utility
@@ -48,6 +73,7 @@ export declare const $dialog: {
     confirm: (options: DialogOptions) => Promise<boolean>;
     ask: (message: string, event?: MouseEvent | TouchEvent) => Promise<boolean>;
     danger: (options: Omit<DialogOptions, "variant">) => Promise<boolean>;
+    prompt: (options: PromptOptions) => Promise<string | null>;
     component: (content: TemplateResult | HTMLElement | (() => HTMLElement | TemplateResult), options?: Omit<DialogOptions, "content" | "message">) => Promise<boolean>;
     dismiss: () => boolean;
     close: () => boolean;

package/types/src/dialog/dialog.component.d.ts

@@ -57,9 +57,39 @@ export declare class SchmancyDialog extends SchmancyDialog_base {
      */
     hideActions: boolean;
     /**
-     * Return the dialog element for positioning
+     * Slotted children in the named "content" slot (confirm mode custom content)
+     */
+    private _contentSlotElements;
+    /**
+     * Ref to the confirm mode wrapper div
+     */
+    private _confirmDialogRef;
+    /**
+     * Ref to the content mode section element
+     */
+    private _contentDialogRef;
+    /**
+     * Ref to the backdrop element for animations
+     */
+    private _backdropRef;
+    /**
+     * Ref to the drag handle element for swipe gestures
+     */
+    private _dragHandleRef;
+    /**
+     * Return the dialog element for positioning/size measurement.
+     * In content mode, returns the first slotted child (the actual component).
+     * In confirm mode, returns the wrapper div.
      */
     protected getDialogElement(): HTMLElement | null;
+    /**
+     * Return the backdrop element for animations
+     */
+    protected getBackdropElement(): HTMLElement | null;
+    /**
+     * Return the drag handle element for swipe gestures
+     */
+    protected getDragHandleElement(): HTMLElement | null;
     /**
      * Check if dialog is in confirm mode (has buttons)
      */
@@ -80,6 +110,10 @@ export declare class SchmancyDialog extends SchmancyDialog_base {
      * Handle cancel/close action
      */
     private handleClose;
+    /**
+     * Render drag handle for mobile bottom sheet
+     */
+    private renderDragHandle;
     render(): import("lit-html").TemplateResult<1>;
     /**
      * Static helper for confirm dialogs

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

@@ -0,0 +1,67 @@
+import { AsyncDirective } from 'lit/async-directive.js';
+import type { ElementPart } from 'lit/directive.js';
+export type AnimationType = 'typewriter' | 'fade-up' | 'word-reveal' | 'blur-reveal' | 'cyber-glitch';
+export type AnimationPresetName = 'smooth' | 'snappy' | 'bouncy' | 'gentle';
+export interface AnimateTextOptions {
+    animation: AnimationType;
+    delay?: number;
+    duration?: number;
+    stagger?: number;
+    preset?: AnimationPresetName;
+    /**
+     * Provide text explicitly instead of reading from element.textContent.
+     * REQUIRED when the element contains Lit bindings (${...}), because
+     * animateText replaces innerHTML which destroys Lit's ChildPart markers.
+     */
+    text?: string;
+    /** Re-animate every time the element re-enters the viewport (default: false) */
+    restart?: boolean;
+}
+declare class AnimateTextDirective extends AsyncDirective {
+    private element;
+    private originalContent;
+    private animations;
+    private disconnecting$;
+    private initialized;
+    render(_options: AnimateTextOptions): symbol;
+    update(part: ElementPart, [options]: [AnimateTextOptions]): symbol;
+    disconnected(): void;
+    reconnected(): void;
+    private initialize;
+    private cleanup;
+    /** Cancel all running Web Animation API animations. */
+    private cancelAnimations;
+    /** Cancel running animations and reset element to pre-animation state. */
+    private resetToInitial;
+    /**
+     * Calculate accumulated opacity by walking up DOM tree.
+     * CSS opacity doesn't inherit as computed value - must multiply ancestors.
+     * Also handles shadow DOM: when slotted, checks the slot's container opacity.
+     * NOTE: Skips the element itself since we intentionally set its opacity to 0.
+     */
+    private getAccumulatedOpacity;
+    /**
+     * Walk up from a slot element through its shadow DOM ancestors.
+     * Stops when parentElement is null (shadow root boundary).
+     */
+    private getSlotAncestorOpacity;
+    private createVisibilityObservable$;
+    private runAnimation$;
+    private animateFadeUp$;
+    /**
+     * Walk childNodes: wrap text nodes as word-spans, preserve element children in place.
+     * Returns the ordered list of HTMLElements to animate (one per word + one per child element).
+     * Element children are MOVED (not cloned) to preserve Lit directive bindings.
+     */
+    private wrapTextNodes;
+    private animateBlurReveal$;
+    private animateWordReveal$;
+    /**
+     * Cyber-glitch: Futuristic character-by-character reveal with scale + blur
+     * Each character pops in with overshoot spring physics
+     */
+    private animateCyberGlitch$;
+    private animateTypewriter$;
+}
+export declare const animateText: (_options: AnimateTextOptions) => import("lit-html/directive").DirectiveResult<typeof AnimateTextDirective>;
+export {};

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

@@ -1,5 +1,4 @@
-import { Part } from 'lit';
-import { Directive, PartInfo } from 'lit/directive.js';
+import { Directive, ElementPart, PartInfo } from 'lit/directive.js';
 export type ColorConfig = {
     bgColor?: string;
     color?: string;
@@ -7,7 +6,7 @@ export type ColorConfig = {
 declare class ColorDirective extends Directive {
     private config;
     constructor(partInfo: PartInfo);
-    update(part: Part, [config]: [ColorConfig]): void;
+    update(part: ElementPart, [config]: [ColorConfig]): void;
     render(config: ColorConfig): unknown;
 }
 declare const color: (config: ColorConfig) => import("lit-html/directive").DirectiveResult<typeof ColorDirective>;

package/types/src/directives/confirm-click.d.ts

@@ -0,0 +1,38 @@
+import { Directive, ElementPart, PartInfo } from 'lit/directive.js';
+export interface ConfirmClickOptions {
+    /** Auto-reset timeout in ms (default: 3000) */
+    timeout?: number;
+    /** Override icon for confirmation state (default: inherits from host element) */
+    icon?: string;
+}
+declare class ConfirmClickDirective extends Directive {
+    constructor(partInfo: PartInfo);
+    render(_callback: () => void, _options?: ConfirmClickOptions): any;
+    update(part: ElementPart, [callback, options]: [() => void, ConfirmClickOptions?]): any;
+    private optionsEqual;
+    private setupClickListener;
+    private showOverlay;
+    private hideOverlay;
+    private cleanup;
+    disconnected(part: ElementPart): void;
+    reconnected(part: ElementPart): void;
+}
+/**
+ * Two-stage click confirmation directive with animated canvas countdown.
+ *
+ * First click shows an in-place overlay with a depleting ring that
+ * visually communicates the confirmation window. Second click confirms.
+ * Auto-resets when the ring empties, or on outside click / Escape.
+ *
+ * @param callback - Function to call on confirmed second click
+ * @param options - Optional configuration
+ * @param options.timeout - Countdown duration in ms (default: 3000)
+ * @param options.icon - Override icon (default: inherits from host element)
+ *
+ * @example
+ * ```typescript
+ * html`<schmancy-icon-button ${confirmClick(() => this.deleteItem(item))}>delete</schmancy-icon-button>`
+ * ```
+ */
+export declare const confirmClick: (_callback: () => void, _options?: ConfirmClickOptions) => import("lit-html/directive").DirectiveResult<typeof ConfirmClickDirective>;
+export {};