@mhmo91/schmancy 0.7.6 → 0.8.3

package/types/src/charts/types.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Data point for charts
+ */
+export interface ChartDataPoint {
+    /** X-axis label (e.g., "9 AM", "Mon") */
+    label: string;
+    /** Primary numeric value */
+    value: number;
+    /** Optional metadata for tooltips */
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Theme configuration for charts
+ */
+export interface ChartTheme {
+    /** Primary color - defaults to --schmancy-sys-color-primary */
+    primaryColor?: string;
+    /** Gradient opacity [top, bottom] - defaults to [0.4, 0.05] */
+    gradientOpacity?: [number, number];
+    /** Line stroke width - defaults to 2 */
+    strokeWidth?: number;
+    /** Normal point radius - defaults to 4 */
+    pointRadius?: number;
+    /** Peak point radius - defaults to 6 */
+    peakRadius?: number;
+}
+/** Internal processed data point with position */
+export interface ProcessedDataPoint extends ChartDataPoint {
+    x: number;
+    y: number;
+    isPeak: boolean;
+}
+/**
+ * Segment within a pill bar (for stacked bars)
+ */
+export interface PillSegment {
+    /** Segment label (e.g., "Pizza", "Drinks") */
+    label: string;
+    /** Segment value */
+    value: number;
+    /** CSS color class (e.g., "bg-primary", "bg-secondary") */
+    color?: string;
+}
+/**
+ * Data point for pills chart (horizontal bar)
+ */
+export interface PillDataPoint {
+    /** Row label (e.g., "9 AM", "Monday") */
+    label: string;
+    /** Primary value (used if no segments) */
+    value: number;
+    /** Optional segments for stacked bar */
+    segments?: PillSegment[];
+    /** Whether this is a peak/highlighted row */
+    isPeak?: boolean;
+    /** Whether this is a low/muted row */
+    isLow?: boolean;
+    /** Optional rank (1, 2, 3 for medals) */
+    rank?: number;
+    /** Optional metadata for tooltips */
+    metadata?: Record<string, unknown>;
+}

package/types/src/charts/utils.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Catmull-Rom spline interpolation for smooth curves
+ * Returns the interpolated point between p1 and p2
+ */
+export declare function catmullRomSpline(p0: {
+    x: number;
+    y: number;
+}, p1: {
+    x: number;
+    y: number;
+}, p2: {
+    x: number;
+    y: number;
+}, p3: {
+    x: number;
+    y: number;
+}, t: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Converts hex or rgb color to rgba string
+ */
+export declare function hexToRgba(color: string, alpha: number): string;
+/**
+ * Cubic ease-out animation function
+ */
+export declare function easeOutCubic(t: number): number;

package/types/src/checkbox/checkbox.d.ts

@@ -52,9 +52,10 @@ declare class SchmancyCheckboxElement extends SchmancyCheckboxElement_base {
     label?: string;
     connectedCallback(): void;
     /**
-     * @attr {sm | md | lg } size - The size of the checkbox.
+     * @attr {xxs | xs | sm | md | lg } size - The size of the checkbox.
+     * M3 aligned: 24dp (xxs) → 32dp (xs) → 40dp (sm) → 48dp (md) → 56dp (lg)
      */
-    size: 'sm' | 'md' | 'lg';
+    size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
     render(): import("lit-html").TemplateResult<1>;
 }
 export { SchmancyCheckboxElement as SchmancyCheckbox };

package/types/src/chips/chips.d.ts

@@ -26,6 +26,8 @@ export default class SchmancyChips extends SchmancyChips_base {
     set value(value: string);
     chips: (SchmancyChip | HTMLElement)[];
     wrap: boolean;
+    required: boolean;
+    justify: 'start' | 'center' | 'end';
     connectedCallback(): void;
     private updateChipStates;
     change(e: CustomEvent<SchmancyChipChangeEvent>): Promise<void>;

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

@@ -25,19 +25,13 @@ declare class DrawerService {
     /**
      * Push a component to the content drawer
      * @param options - Component configuration object with optional state/params/props
-     * @deprecated Passing a raw ComponentType is deprecated. Use DrawerPushOptions object instead.
      * @example
-     * // Recommended
      * schmancyContentDrawer.push({
      *   component: myComponent,
      *   props: { id: '123' }
      * })
-     *
-     * // Legacy (deprecated)
-     * schmancyContentDrawer.push(myComponent)
      */
-    push(options: ComponentType | DrawerPushOptions): void;
-    private normalizeOptions;
+    push(options: DrawerPushOptions): void;
 }
 export declare const schmancyContentDrawer: DrawerService;
 export {};

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

@@ -3,6 +3,13 @@ declare const SchmancyDateRangeDialog_base: CustomElementConstructor & import("@
 /**
  * Dialog content component for date range selection
  *
+ * Redesigned with chip-based horizontal flow layout:
+ * - Quick Select: Today, Yesterday, This Week, This Month
+ * - Days: Last 7/14/30/60/90 Days
+ * - Periods: Last Week, Last Month, Last Quarter, Last Year
+ * - Year to Date: This Week, This Month, This Quarter, This Year, YTD
+ * - Custom Range: Manual date inputs at the bottom
+ *
  * @element schmancy-date-range-dialog
  */
 export declare class SchmancyDateRangeDialog extends SchmancyDateRangeDialog_base {
@@ -19,10 +26,19 @@ export declare class SchmancyDateRangeDialog extends SchmancyDateRangeDialog_bas
     maxDate?: string;
     activePreset: string | null;
     presetCategories: PresetCategory[];
+    /**
+     * Reorganizes presets into the new grouped layout
+     */
+    private getPresetGroups;
     private handleFromDateChange;
     private handleToDateChange;
     private handlePresetSelection;
     private applyManualDateSelection;
     render(): import("lit-html").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-date-range-dialog': SchmancyDateRangeDialog;
+    }
+}
 export {};

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

@@ -42,9 +42,9 @@ export declare class SchmancyDateRange extends SchmancyDateRange_base {
     private presetRanges;
     private presetCategories;
     private memoizedPresets;
+    disconnectedCallback(): void;
     connectedCallback(): void;
     private setupEventHandlers;
-    disconnectedCallback(): void;
     updated(changedProps: PropertyValues): void;
     private initPresetRanges;
     private getDateFormat;

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

@@ -12,13 +12,18 @@ export default class SchmancyDetails extends SchmancyDetails_base {
     summary: string;
     get open(): boolean;
     set open(value: boolean);
-    variant: 'outlined' | 'filled' | 'elevated';
-    type?: 'success' | 'error' | 'warning';
+    indicatorPlacement: 'start' | 'end';
+    hideIndicator: boolean;
+    locked: boolean;
+    overlay: boolean;
     private _open$;
+    private _indicatorRef;
+    private _currentAnimation?;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
+    private _animateIndicator;
+    private _handleSummaryClick;
     private _handleToggle;
-    private _dispatchToggleEvent;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -67,7 +67,7 @@ export declare class ConfirmDialog extends ConfirmDialog_base {
      */
     private setupPositioning;
     /**
-     * Update dialog position using Floating UI
+     * Update dialog position using Floating UI with smart height-aware repositioning
      */
     private updatePosition;
     /**
@@ -86,10 +86,6 @@ export declare class ConfirmDialog extends ConfirmDialog_base {
      * Handle cancel action
      */
     private handleCancel;
-    /**
-     * Get the CSS class for the confirm button based on variant
-     */
-    private getConfirmButtonClass;
     render(): import("lit-html").TemplateResult<1>;
     /**
      * Static helper for even simpler API

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

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+import type { Constructor } from '../../mixins/constructor';
+import type { IBaseMixin } from '../../mixins/baseElement';
+export interface DialogPosition {
+    x: number;
+    y: number;
+}
+export interface VirtualReference {
+    getBoundingClientRect: () => DOMRect;
+}
+/**
+ * Interface for the DialogBase mixin methods
+ */
+export interface IDialogBaseMixin {
+    position: DialogPosition;
+    show(positionOrEvent?: DialogPosition | MouseEvent | TouchEvent): Promise<boolean>;
+    hide(result?: boolean): void;
+    isCentered(): 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.
+ */
+export declare const DialogBase: <T extends Constructor<LitElement & IBaseMixin>>(superClass: T) => Constructor<IDialogBaseMixin> & T;

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

@@ -1,6 +1,6 @@
 import { TemplateResult } from 'lit';
 /**
- * Dialog service options interface with component support
+ * Dialog service options interface
  */
 export interface DialogOptions {
     title?: string;
@@ -14,7 +14,6 @@ export interface DialogOptions {
         y: number;
     } | MouseEvent | TouchEvent;
     content?: TemplateResult | HTMLElement | (() => HTMLElement | TemplateResult);
-    width?: string;
     onConfirm?: () => void;
     onCancel?: () => void;
     hideActions?: boolean;
@@ -22,97 +21,35 @@ export interface DialogOptions {
 }
 /**
  * Dialog service for centralized dialog management.
- * Provides a simple API for showing dialogs with optional custom components.
+ * Uses a single unified SchmancyDialog component for all dialog types.
  */
 export declare class DialogService {
     private static instance;
     private static DEFAULT_OPTIONS;
     private activeDialogs;
-    private activeRawDialogs;
     private dialogSubject;
     private dismissSubject;
     private constructor();
-    /**
-     * Get the singleton instance
-     */
     static getInstance(): DialogService;
-    /**
-     * Sets up the main dialog opening logic using RxJS pipes
-     */
     private setupDialogOpeningLogic;
-    /**
-     * Sets up the dialog dismissal logic
-     */
     private setupDialogDismissLogic;
-    /**
-     * Show a confirmation dialog
-     * @returns Promise that resolves to true (confirm) or false (cancel)
-     */
     confirm(options: DialogOptions): Promise<boolean>;
-    /**
-     * Show a dialog with custom component content
-     * Always renders content directly without any headers or action buttons
-     * @returns Promise that resolves when dialog is closed
-     */
     component(content: TemplateResult | HTMLElement | (() => HTMLElement | TemplateResult), options?: Omit<DialogOptions, 'content' | 'message'>): Promise<boolean>;
-    /**
-     * Dismiss the most recently opened dialog (either confirm or component type)
-     * @returns true if a dialog was dismissed, false if no dialogs were open
-     */
     dismiss(): boolean;
-    /**
-     * Close the most recently opened dialog (alias for dismiss)
-     * @returns true if a dialog was closed, false if no dialogs were open
-     */
     close(): boolean;
-    /**
-     * Show a simple confirmation dialog with just a message
-     * @returns Promise that resolves to true (confirm) or false (cancel)
-     */
     ask(message: string, event?: MouseEvent | TouchEvent): Promise<boolean>;
-    /**
-     * Show a danger confirmation dialog
-     * @returns Promise that resolves to true (confirm) or false (cancel)
-     */
     danger(options: Omit<DialogOptions, 'variant'>): Promise<boolean>;
-    /**
-     * Get a centered position for the dialog
-     */
     private getCenteredPosition;
 }
 /**
- * Global dialog utility - provides a quick way to show dialogs
+ * Global dialog utility
  */
 export declare const $dialog: {
-    /**
-     * Show a confirmation dialog
-     * @returns Promise that resolves to true (confirm) or false (cancel)
-     */
     confirm: (options: DialogOptions) => Promise<boolean>;
-    /**
-     * Show a simple confirmation dialog with just a message
-     * @returns Promise that resolves to true (confirm) or false (cancel)
-     */
     ask: (message: string, event?: MouseEvent | TouchEvent) => Promise<boolean>;
-    /**
-     * Show a danger confirmation dialog
-     * @returns Promise that resolves to true (confirm) or false (cancel)
-     */
     danger: (options: Omit<DialogOptions, "variant">) => Promise<boolean>;
-    /**
-     * Show a dialog with custom component content
-     * @returns Promise that resolves when dialog is closed
-     */
     component: (content: TemplateResult | HTMLElement | (() => HTMLElement | TemplateResult), options?: Omit<DialogOptions, "content" | "message">) => Promise<boolean>;
-    /**
-     * Dismiss the most recently opened dialog
-     * @returns true if a dialog was dismissed, false if no dialogs were open
-     */
     dismiss: () => boolean;
-    /**
-     * Close the most recently opened dialog (alias for dismiss)
-     * @returns true if a dialog was closed, false if no dialogs were open
-     */
     close: () => boolean;
 };
 export default DialogService;

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

@@ -1,9 +1,27 @@
-declare const SchmancyDialog_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+declare const SchmancyDialog_base: import("@mixins/index").Constructor<import("./dialog-base.mixin").IDialogBaseMixin> & CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 /**
- * A basic dialog web component without title or actions
+ * Unified dialog component that handles both content-only and confirm modes.
  *
  * @element schmancy-dialog
- * @slot default - Content slot for dialog body
+ * @slot default - Content slot for dialog body (used in content mode)
+ * @slot content - Named slot for custom content in confirm mode
+ *
+ * @example Content mode (no buttons):
+ * ```html
+ * <schmancy-dialog>
+ *   <my-custom-content></my-custom-content>
+ * </schmancy-dialog>
+ * ```
+ *
+ * @example Confirm mode (with buttons):
+ * ```html
+ * <schmancy-dialog
+ *   title="Confirm Action"
+ *   message="Are you sure?"
+ *   confirm-text="Yes"
+ *   cancel-text="No"
+ * ></schmancy-dialog>
+ * ```
  */
 export declare class SchmancyDialog extends SchmancyDialog_base {
     /**
@@ -11,46 +29,41 @@ export declare class SchmancyDialog extends SchmancyDialog_base {
      */
     uid: string;
     /**
-     * Current position of the dialog
+     * Dialog title (enables confirm mode when set)
      */
-    private position;
+    title: string | undefined;
     /**
-     * Current active promise resolver
+     * Dialog subtitle
      */
-    private resolvePromise?;
+    subtitle: string | undefined;
     /**
-     * Store cleanup function for position auto-updates
+     * Dialog message
      */
-    private cleanupAutoUpdate?;
+    message: string | undefined;
     /**
-     * Virtual element to use as reference for positioning
+     * Text for confirm button (enables confirm mode when set with cancelText)
      */
-    private virtualReference?;
+    confirmText: string | undefined;
     /**
-     * Simple API: Show the dialog at a specific position
-     * @returns Promise that resolves when dialog is closed
+     * Text for cancel button
      */
-    show(positionOrEvent?: {
-        x: number;
-        y: number;
-    } | MouseEvent | TouchEvent): Promise<boolean>;
+    cancelText: string | undefined;
     /**
-     * Simple API: Hide the dialog
+     * Dialog variant (affects button colors in confirm mode)
      */
-    hide(result?: boolean): void;
+    variant: 'default' | 'danger';
     /**
-     * Set up position auto-updating when dialog content changes or window resizes
+     * Whether to hide action buttons (force content mode)
      */
-    private setupPositioning;
+    hideActions: boolean;
     /**
-     * Update dialog position using Floating UI
+     * Return the dialog element for positioning
      */
-    private updatePosition;
-    private resizeSubscription?;
+    protected getDialogElement(): HTMLElement | null;
     /**
-     * Handle component disconnection from DOM
+     * Check if dialog is in confirm mode (has buttons)
      */
-    disconnectedCallback(): void;
+    private get isConfirmMode();
     /**
      * Handle component connection to DOM
      */
@@ -60,18 +73,38 @@ export declare class SchmancyDialog extends SchmancyDialog_base {
      */
     private announcePresence;
     /**
-     * Handle lifecycle callback when dialog is first rendered
+     * Handle confirm action
      */
-    firstUpdated(): void;
+    private handleConfirm;
     /**
-     * Handle close action
+     * Handle cancel/close action
      */
     private handleClose;
     render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Static helper for confirm dialogs
+     */
+    static confirm(options: {
+        title?: string;
+        subtitle?: string;
+        message?: string;
+        confirmText?: string;
+        cancelText?: string;
+        variant?: 'default' | 'danger';
+        position?: {
+            x: number;
+            y: number;
+        } | MouseEvent | TouchEvent;
+        width?: string;
+    }): Promise<boolean>;
+    /**
+     * Simple shorthand - just pass message and optionally an event
+     */
+    static ask(message: string, event?: MouseEvent | TouchEvent): Promise<boolean>;
 }
+export { SchmancyDialog as ConfirmDialog };
 declare global {
     interface HTMLElementTagNameMap {
         'schmancy-dialog': SchmancyDialog;
     }
 }
-export {};

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

@@ -1,5 +1,3 @@
-export * from './dailog';
 export * from './dialog-service';
 export * from './dialog.component';
-export * from './dialog-content';
-export * from './dialog-content';
+export * from './dialog-base.mixin';

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

@@ -1,13 +1,18 @@
-import { Subject } from 'rxjs';
 import { PartInfo } from 'lit/directive.js';
 import { AsyncDirective } from 'lit/async-directive.js';
-import { LitElement } from 'lit';
+/**
+ * Directive that sets element height to fill remaining viewport space.
+ * Uses visualViewport for accurate mobile height (handles keyboard).
+ *
+ * @example
+ * html`<div ${fullHeight()}>Content</div>`
+ */
 declare class FullHeight extends AsyncDirective {
-    element: HTMLElement & LitElement;
-    disconnecting: Subject<boolean>;
+    private element;
+    private disconnecting$;
+    private updateHeight;
     render(): void;
-    constructor(_partInfo: PartInfo);
-    update(part: any): void;
+    update(part: PartInfo): void;
     disconnected(): void;
     reconnected(): void;
 }

package/types/src/icons/icon.d.ts

@@ -1,3 +1,13 @@
+/**
+ * Icon size tokens - M3 aligned with optical size optimization
+ * - xxs: 12px (opsz: 20) - fits in 24px buttons (ultra-compact)
+ * - xs: 16px (opsz: 20) - fits in 32px buttons
+ * - sm: 20px (opsz: 20) - fits in 40px buttons
+ * - md: 24px (opsz: 24) - fits in 48px buttons (default)
+ * - lg: 32px (opsz: 40) - fits in 56px buttons
+ * - Or custom string like '48px'
+ */
+export type IconSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | string;
 declare const SchmancyIcon_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 /**
  * @element schmancy-icon
@@ -35,6 +45,13 @@ export default class SchmancyIcon extends SchmancyIcon_base {
      * @values outlined | rounded | sharp
      */
     variant: 'outlined' | 'rounded' | 'sharp';
+    /**
+     * Size of the icon - M3 aligned tokens or custom string
+     * Tokens: 'xxs' (12px), 'xs' (16px), 'sm' (20px), 'md' (24px), 'lg' (32px)
+     * Custom: any CSS size string like '48px', '2rem'
+     */
+    size: IconSize;
+    private static readonly tokenSizes;
     private fill$;
     private weight$;
     private grade$;

package/types/src/index.d.ts

@@ -1,11 +1,13 @@
 export * from './animated-text';
 export * from './area';
+export * from './audio';
 export * from './autocomplete';
 export * from './badge';
 export * from './boat';
 export * from './busy';
 export * from './button';
 export * from './card';
+export * from './charts';
 export * from './checkbox';
 export * from './chips';
 export * from './code-highlight';
@@ -24,7 +26,9 @@ export * from './extra';
 export * from './form';
 export * from './icons';
 export * from './input';
+export * from './json';
 export * from './layout';
+export * from './lightbox';
 export * from './list';
 export * from './mailbox';
 export * from './map';
@@ -34,7 +38,9 @@ export * from './navigation-bar';
 export * from './navigation-rail';
 export * from './notification';
 export * from './option';
+export * from './page';
 export * from './progress';
+export * from './qr-scanner';
 export * from './radio-group';
 export * from './rxjs-utils';
 export * from './select';

package/types/src/input/input.d.ts

@@ -18,12 +18,14 @@ export type SchmancyInputInputEvent = CustomEvent<EventDetails>;
 export type SchmancyInputChangeEvent = CustomEvent<EventDetails>;
 export type SchmancyInputEnterEvent = CustomEvent<EventDetails>;
 /**
- * Size variants for the input.
- * - sm: Small, compact input (40px height)
- * - md: Medium input (50px height, default)
- * - lg: Large, spacious input (60px height)
+ * Size variants for the input - M3 spec aligned.
+ * - xxs: Ultra-compact (24dp) - for menu cards, compact UIs
+ * - xs: Dense/compact (32dp) - M3 density -3
+ * - sm: Default (40dp) - M3 density 0
+ * - md: Standard (48dp) - M3 large
+ * - lg: Extra large (56dp) - M3 extra large
  */
-export type InputSize = 'sm' | 'md' | 'lg';
+export type InputSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
 declare const SchmancyInput_base: import("@mixins/index").Constructor<import("@mixins/index").IFormFieldMixin> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 /**
  * Enhanced version of the SchmancyInput component with improved form integration
@@ -68,7 +70,7 @@ export default class SchmancyInput extends SchmancyInput_base {
     maxlength?: number;
     min?: string;
     max?: string;
-    step?: number;
+    step?: string;
     /** If true, auto-focus this input on first render. */
     autofocus: boolean;
     /** Autocomplete/autofill hints. */
@@ -79,9 +81,11 @@ export default class SchmancyInput extends SchmancyInput_base {
     tabIndex: number;
     /**
      * The size of the input.
-     * - 'sm': Small, compact size
-     * - 'md': Medium size (default)
-     * - 'lg': Large size
+     * - 'xxs': Ultra-compact size (24px) - for menu cards
+     * - 'xs': Extra small, very compact size (32px)
+     * - 'sm': Small, compact size (40px)
+     * - 'md': Medium size (default) (48px)
+     * - 'lg': Large size (56px)
      */
     size: InputSize;
     /**

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

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

package/types/src/json/json.d.ts

@@ -0,0 +1,15 @@
+declare const SchmancyJson_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+export declare class SchmancyJson extends SchmancyJson_base {
+    data: Record<string, any>;
+    highlightKeys: string[];
+    compact: boolean;
+    private highlightChanges;
+    private copyJSON;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-json': SchmancyJson;
+    }
+}
+export {};