@mhmo91/schmancy 0.7.7 → 0.8.4

package/mixins/tailwind.css

@@ -3,6 +3,11 @@
 :root {
 	font-family: var(--schmancy-font-family);
 }
+:host,
+:host *,
+* {
+	touch-action: manipulation;
+}
 @theme inline {
 	--md-ref-typeface-brand: var(--schmancy-font-family);
 	--md-ref-typeface-plain: var(--schmancy-font-family);
@@ -13,8 +18,10 @@
 	--border-style: solid;
 	--spacing: 4px;
 	--color-scrim: var(--schmancy-sys-color-scrim);
+	--color-outline-default: var(--schmancy-sys-color-outline);
+	--color-outline-variant: var(--schmancy-sys-color-outlineVariant);
+	/* Shorthand alias */
 	--color-outline: var(--schmancy-sys-color-outline);
-	--color-outlineVariant: var(--schmancy-sys-color-outlineVariant);
 	--color-surface-default: var(--schmancy-sys-color-surface-default);
 	--color-surface-dim: var(--schmancy-sys-color-surface-dim);
 	--color-surface-bright: var(--schmancy-sys-color-surface-bright);
@@ -24,27 +31,51 @@
 	--color-surface-highest: var(--schmancy-sys-color-surface-highest);
 	--color-surface-lowest: var(--schmancy-sys-color-surface-lowest);
 	--color-surface-on: var(--schmancy-sys-color-surface-on);
-	--color-surface-onVariant: var(--schmancy-sys-color-surface-onVariant);
+	--color-surface-on-variant: var(--schmancy-sys-color-surface-onVariant);
 	--color-primary-default: var(--schmancy-sys-color-primary-default);
 	--color-primary-on: var(--schmancy-sys-color-primary-on);
 	--color-primary-container: var(--schmancy-sys-color-primary-container);
-	--color-primary-onContainer: var(--schmancy-sys-color-primary-onContainer);
+	--color-primary-on-container: var(--schmancy-sys-color-primary-onContainer);
 	--color-secondary-default: var(--schmancy-sys-color-secondary-default);
 	--color-secondary-on: var(--schmancy-sys-color-secondary-on);
 	--color-secondary-container: var(--schmancy-sys-color-secondary-container);
-	--color-secondary-onContainer: var(--schmancy-sys-color-secondary-onContainer);
+	--color-secondary-on-container: var(--schmancy-sys-color-secondary-onContainer);
 	--color-tertiary-default: var(--schmancy-sys-color-tertiary-default);
 	--color-tertiary-on: var(--schmancy-sys-color-tertiary-on);
 	--color-tertiary-container: var(--schmancy-sys-color-tertiary-container);
-	--color-tertiary-onContainer: var(--schmancy-sys-color-tertiary-onContainer);
+	--color-tertiary-on-container: var(--schmancy-sys-color-tertiary-onContainer);
 	--color-error-default: var(--schmancy-sys-color-error-default);
 	--color-error-on: var(--schmancy-sys-color-error-on);
 	--color-error-container: var(--schmancy-sys-color-error-container);
-	--color-error-onContainer: var(--schmancy-sys-color-error-onContainer);
+	--color-error-on-container: var(--schmancy-sys-color-error-onContainer);
 	--color-success-default: var(--schmancy-sys-color-success-default);
 	--color-success-on: var(--schmancy-sys-color-success-on);
 	--color-success-container: var(--schmancy-sys-color-success-container);
+	--color-success-on-container: var(--schmancy-sys-color-success-onContainer);
+	--color-warning-default: var(--schmancy-sys-color-warning-default);
+	--color-warning-on: var(--schmancy-sys-color-warning-on);
+	--color-warning-container: var(--schmancy-sys-color-warning-container);
+	--color-warning-on-container: var(--schmancy-sys-color-warning-onContainer);
+
+	/* DEPRECATED: camelCase aliases for backward compatibility - use hyphenated format instead */
+	--color-outlineVariant: var(--schmancy-sys-color-outlineVariant);
+	--color-surface-onVariant: var(--schmancy-sys-color-surface-onVariant);
+	--color-primary-onContainer: var(--schmancy-sys-color-primary-onContainer);
+	--color-secondary-onContainer: var(--schmancy-sys-color-secondary-onContainer);
+	--color-tertiary-onContainer: var(--schmancy-sys-color-tertiary-onContainer);
+	--color-error-onContainer: var(--schmancy-sys-color-error-onContainer);
 	--color-success-onContainer: var(--schmancy-sys-color-success-onContainer);
+	--color-warning-onContainer: var(--schmancy-sys-color-warning-onContainer);
+
+	/* Shorthand aliases (maps to -default variant) */
+	--color-primary: var(--schmancy-sys-color-primary-default);
+	--color-secondary: var(--schmancy-sys-color-secondary-default);
+	--color-tertiary: var(--schmancy-sys-color-tertiary-default);
+	--color-error: var(--schmancy-sys-color-error-default);
+	--color-success: var(--schmancy-sys-color-success-default);
+	--color-warning: var(--schmancy-sys-color-warning-default);
+	--color-surface: var(--schmancy-sys-color-surface-default);
+
 	--shadow-0: var(--schmancy-sys-elevation-0);
 	--shadow-1: var(--schmancy-sys-elevation-1);
 	--shadow-2: var(--schmancy-sys-elevation-2);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mhmo91/schmancy",
-	"version": "0.7.7",
+	"version": "0.8.4",
 	"description": "UI library build with web components",
 	"main": "./dist/index.js",
 	"exports": {
@@ -64,7 +64,7 @@
 		"@lit/context": "^1.1.6",
 		"@material/material-color-utilities": "^0.3.0",
 		"@material/mwc-base": "^0.27.0",
-		"@material/web": "^2.4.0",
+		"@material/web": "^2.4.1",
 		"@rollup/plugin-strip": "^3.0.4",
 		"@rollup/plugin-terser": "^0.4.4",
 		"@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
@@ -72,44 +72,45 @@
 		"@webcomponents/scoped-custom-element-registry": "^0.0.10",
 		"@webcomponents/webcomponentsjs": "^2.8.0",
 		"cleave.js": "^1.6.0",
-		"dayjs": "^1.11.18",
+		"dayjs": "^1.11.19",
 		"fastest-levenshtein": "^1.0.16",
 		"highlight.js": "^11.11.1",
-		"immer": "^10.1.3",
+		"immer": "^10.2.0",
+		"jsqr": "^1.4.0",
 		"lit": "^3.3.1",
-		"playground-elements": "^0.21.1",
+		"playground-elements": "^0.21.2",
 		"rxjs": "^7.8.2",
 		"tippy.js": "^6.3.7",
 		"ts-is-present": "^1.2.2",
 		"typeit": "^8.8.7",
-		"typescript": "^5.9.2",
+		"typescript": "^5.9.3",
 		"uuid": "^13.0.0",
 		"web-component-analyzer": "^2.0.0"
 	},
 	"devDependencies": {
 		"@tailwindcss/container-queries": "^0.1.1",
-		"@tailwindcss/forms": "^0.5.10",
-		"@tailwindcss/postcss": "^4.1.13",
-		"@tailwindcss/vite": "^4.1.13",
-		"@types/node": "^24.5.2",
+		"@tailwindcss/forms": "^0.5.11",
+		"@tailwindcss/postcss": "^4.1.18",
+		"@tailwindcss/vite": "^4.1.18",
+		"@types/node": "^24.10.4",
 		"@types/uuid": "^11.0.0",
-		"@typescript-eslint/parser": "^8.44.1",
-		"@vitest/ui": "^3.2.4",
-		"autoprefixer": "^10.4.21",
+		"@typescript-eslint/parser": "^8.50.0",
+		"@vitest/ui": "^4.0.16",
+		"autoprefixer": "^10.4.23",
 		"c8": "^10.1.3",
 		"concurrently": "^9.2.1",
 		"deepmerge": "^4.3.1",
-		"eslint": "^9.36.0",
-		"happy-dom": "^18.0.1",
+		"eslint": "^9.39.2",
+		"happy-dom": "^20.0.11",
 		"postcss": "^8.5.6",
-		"prettier": "^3.6.2",
+		"prettier": "^3.7.4",
 		"rollup-plugin-copy": "^3.5.0",
-		"sass": "^1.93.2",
-		"tailwindcss": "^4.1.13",
-		"vite": "^7.1.7",
+		"sass": "^1.97.0",
+		"tailwindcss": "^4.1.18",
+		"vite": "^7.3.0",
 		"vite-plugin-sitemap": "^0.8.2",
 		"vite-plugin-webfont-dl": "^3.11.1",
-		"vitest": "^3.2.4"
+		"vitest": "^4.0.16"
 	},
 	"peerDependencies": {
 		"lit": "^3.2.1",

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

@@ -78,7 +78,7 @@ declare class AreaService implements AreaSubscription {
     /**
      * Update browser history state (called by area components)
      */
-    _updateBrowserHistory(areaName: string, route: ActiveRoute, historyStrategy?: string, clearQueryParams?: string[] | boolean | null): void;
+    _updateBrowserHistory(areaName: string, route: ActiveRoute, historyStrategy?: string, clearQueryParams?: string[] | boolean | null, customPath?: string): void;
     /**
      * Create a clean URL from area states
      */

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

@@ -12,6 +12,7 @@ export type RouteAction = {
     historyStrategy?: THistoryStrategy;
     clearQueryParams?: string[] | boolean | null;
     animationDuration?: number;
+    path?: string;
     _source?: 'programmatic' | 'browser' | 'initial';
 };
 export type ActiveRoute = {

package/types/src/audio/emotional-sounds.d.ts

@@ -0,0 +1,122 @@
+/**
+ * Schmancy Emotional Sound Library
+ *
+ * A curated collection of soft, elegant sounds organized by emotional categories.
+ * Each sound is designed to be non-intrusive, emotionally evocative, and beautiful.
+ *
+ * Inspired by the gentle sounds of nature - soft air, gentle chimes, and warm tones.
+ *
+ * @example
+ * ```typescript
+ * import { $sounds } from '@schmancy/audio'
+ *
+ * // Play a feeling
+ * $sounds.play('joyful')
+ * $sounds.play('relieved')
+ * $sounds.play('curious')
+ *
+ * // Adjust volume
+ * $sounds.setVolume(0.2)
+ *
+ * // Mute/unmute
+ * $sounds.mute()
+ * $sounds.unmute()
+ * ```
+ */
+/** Happy / Pleasant feelings */
+export type HappyFeeling = 'joyful' | 'content' | 'excited' | 'proud' | 'hopeful' | 'relieved' | 'grateful' | 'peaceful' | 'playful' | 'amused' | 'curious' | 'inspired' | 'confident' | 'loved' | 'comforted' | 'energized' | 'celebrated';
+/** Sad / Low feelings */
+export type SadFeeling = 'sad' | 'lonely' | 'disappointed' | 'heartbroken' | 'grieving' | 'hopeless' | 'empty' | 'discouraged' | 'melancholic' | 'homesick' | 'hurt' | 'miserable' | 'regretful' | 'ashamed' | 'inferior';
+/** Anxious / Fearful feelings */
+export type AnxiousFeeling = 'anxious' | 'worried' | 'afraid' | 'terrified' | 'panicked' | 'nervous' | 'uneasy' | 'insecure' | 'overwhelmed' | 'stressed' | 'tense' | 'apprehensive' | 'startled' | 'suspicious' | 'vulnerable';
+/** Angry / Frustrated feelings */
+export type AngryFeeling = 'annoyed' | 'irritated' | 'frustrated' | 'angry' | 'enraged' | 'bitter' | 'resentful' | 'jealous' | 'envious' | 'indignant' | 'impatient' | 'hostile' | 'contemptuous';
+/** Tired / Drained feelings */
+export type TiredFeeling = 'tired' | 'exhausted' | 'drained' | 'burnedOut' | 'numb' | 'bored' | 'unmotivated' | 'apathetic' | 'restless';
+/** Calm / Grounded feelings */
+export type CalmFeeling = 'calm' | 'relaxed' | 'atEase' | 'balanced' | 'stable' | 'secure' | 'safe' | 'centered' | 'grounded' | 'accepting';
+/** Connected / Social feelings */
+export type ConnectedFeeling = 'connected' | 'accepted' | 'included' | 'belonging' | 'appreciated' | 'valued' | 'respected' | 'supported' | 'protective' | 'compassionate' | 'empathetic';
+/** Mixed / Complicated feelings */
+export type MixedFeeling = 'conflicted' | 'confused' | 'ambivalent' | 'nostalgic' | 'guilty' | 'embarrassed' | 'surprised' | 'shocked' | 'awestruck' | 'skeptical';
+/** All feelings */
+export type Feeling = HappyFeeling | SadFeeling | AnxiousFeeling | AngryFeeling | TiredFeeling | CalmFeeling | ConnectedFeeling | MixedFeeling;
+/** Feeling category */
+export type FeelingCategory = 'happy' | 'sad' | 'anxious' | 'angry' | 'tired' | 'calm' | 'connected' | 'mixed';
+/**
+ * Emotional Sound Generator
+ * Creates soft, beautiful sounds using Web Audio API
+ */
+export declare class EmotionalSoundGenerator {
+    private audioContext;
+    private volume;
+    private muted;
+    private getContext;
+    /** Soft air puff - the foundation of our sound palette */
+    private puff;
+    /** Gentle tone with envelope */
+    private tone;
+    /** Warm filtered tone */
+    private warmTone;
+    /** Shimmer - multiple soft tones */
+    private shimmer;
+    private playJoyful;
+    private playContent;
+    private playExcited;
+    private playProud;
+    private playHopeful;
+    private playRelieved;
+    private playGrateful;
+    private playPeaceful;
+    private playPlayful;
+    private playAmused;
+    private playCurious;
+    private playInspired;
+    private playConfident;
+    private playLoved;
+    private playComforted;
+    private playEnergized;
+    private playCelebrated;
+    private playSad;
+    private playLonely;
+    private playDisappointed;
+    private playMelancholic;
+    private playAnxious;
+    private playWorried;
+    private playNervous;
+    private playStartled;
+    private playAnnoyed;
+    private playFrustrated;
+    private playImpatient;
+    private playTired;
+    private playExhausted;
+    private playBored;
+    private playCalm;
+    private playRelaxed;
+    private playGrounded;
+    private playSafe;
+    private playConnected;
+    private playAppreciated;
+    private playSupported;
+    private playNostalgic;
+    private playSurprised;
+    private playAwestruck;
+    private playConfused;
+    /** Set volume (0.0 - 1.0) */
+    setVolume(vol: number): void;
+    /** Get current volume */
+    getVolume(): number;
+    /** Mute all sounds */
+    mute(): void;
+    /** Unmute sounds */
+    unmute(): void;
+    /** Check if muted */
+    isMuted(): boolean;
+    /** Play a feeling */
+    play(feeling: Feeling): void;
+    /** Dispose audio context */
+    dispose(): void;
+}
+/** Global emotional sound player */
+export declare const $sounds: EmotionalSoundGenerator;
+export default EmotionalSoundGenerator;

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

@@ -0,0 +1,30 @@
+/**
+ * Schmancy Audio Module
+ *
+ * A curated library of emotional sounds for creating beautiful, empathetic interfaces.
+ *
+ * The sound system follows the same pattern as the theme system:
+ * - Default sounds as fallback
+ * - Can receive custom sound themes from AI
+ * - Reactive observables for state changes
+ *
+ * @example
+ * ```typescript
+ * import { sound } from '@schmancy/audio'
+ *
+ * // Play a feeling sound
+ * sound.play('joyful')
+ *
+ * // Set volume
+ * sound.setVolume(0.2)
+ *
+ * // Apply AI-generated sound theme
+ * sound.setTheme(aiGeneratedTheme)
+ *
+ * // Reset to defaults
+ * sound.resetTheme()
+ * ```
+ */
+export { sound, schmancySound } from './sound.service';
+export type { Feeling, FeelingCategory, FeelingSound, SoundTheme, SoundThemeSettings, GenerateSoundThemeRequest, GenerateSoundThemeResponse, HappyFeeling, SadFeeling, AnxiousFeeling, AngryFeeling, TiredFeeling, CalmFeeling, ConnectedFeeling, MixedFeeling, } from '../types/mood-audio.types';
+export { EmotionalSoundGenerator, $sounds } from './emotional-sounds';

package/types/src/audio/sound.service.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Schmancy Sound Service
+ *
+ * Centralized sound management following the theme service pattern.
+ * Provides reactive observables for sound state and methods to control sounds.
+ *
+ * @example
+ * ```typescript
+ * import { sound } from '@schmancy/audio'
+ *
+ * // Play a feeling sound
+ * sound.play('joyful')
+ *
+ * // Set volume
+ * sound.setVolume(0.2)
+ *
+ * // Apply AI-generated sound theme
+ * sound.setTheme(aiGeneratedTheme)
+ *
+ * // Reset to defaults
+ * sound.resetTheme()
+ *
+ * // Subscribe to theme changes
+ * sound.theme$.subscribe(theme => {
+ *   console.log('Current theme:', theme?.name ?? 'default')
+ * })
+ * ```
+ */
+import type { Feeling, FeelingSound, SoundTheme } from '../types/mood-audio.types';
+/**
+ * Sound Service - Provides centralized sound management for Schmancy components
+ *
+ * Following the theme service pattern:
+ * - Has default sounds as fallback
+ * - Can receive custom sound theme from AI
+ * - Reactive observables for state changes
+ * - Persists settings to session storage
+ */
+declare class SoundService {
+    private static instance;
+    /** Audio context for Web Audio API */
+    private audioContext;
+    readonly theme$: import("rxjs").Observable<SoundTheme>;
+    readonly volume$: import("rxjs").Observable<number>;
+    readonly muted$: import("rxjs").Observable<boolean>;
+    /** BehaviorSubject for current theme name (for debugging/display) */
+    private readonly _themeName$;
+    readonly themeName$: import("rxjs").Observable<string>;
+    get theme(): SoundTheme | null;
+    get volume(): number;
+    get muted(): boolean;
+    get themeName(): string;
+    private constructor();
+    private getContext;
+    /** Play a puff (breath/air) sound */
+    private playPuff;
+    /** Play a tone (musical) sound */
+    private playTone;
+    /**
+     * Set a custom sound theme (e.g., from AI generation)
+     * @param theme The sound theme to apply
+     */
+    setTheme(theme: SoundTheme): void;
+    /**
+     * Reset to default sounds (removes custom theme)
+     */
+    resetTheme(): void;
+    /**
+     * Set volume level (0.0 - 1.0)
+     * @param volume Volume level
+     */
+    setVolume(volume: number): void;
+    /**
+     * Mute all sounds
+     */
+    mute(): void;
+    /**
+     * Unmute sounds
+     */
+    unmute(): void;
+    /**
+     * Toggle mute state
+     */
+    toggleMute(): void;
+    /**
+     * Get the sound definition for a feeling
+     * Uses custom theme if available, falls back to defaults
+     */
+    getSoundForFeeling(feeling: Feeling): FeelingSound;
+    /**
+     * Get the category for a feeling
+     */
+    private getCategoryForFeeling;
+    /**
+     * Play a feeling sound
+     * @param feeling The feeling to play
+     */
+    play(feeling: Feeling): void;
+    /**
+     * Dispose audio context
+     */
+    dispose(): void;
+    /**
+     * Get singleton instance
+     */
+    static getInstance(): SoundService;
+}
+/** Global sound service singleton */
+export declare const sound: SoundService;
+export declare const schmancySound: SoundService;
+export default sound;

package/types/src/avatar.d.ts

@@ -1,4 +1,13 @@
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * M3 avatar sizes: 20dp → 24dp → 32dp → 40dp → 48dp → 64dp
+ * - xxs: Ultra-compact (20px) - for menu cards
+ * - xs: 24px - M3 compact
+ * - sm: 32px - M3 small
+ * - md: 40px - M3 medium (default)
+ * - lg: 48px - M3 large
+ * - xl: 64px - M3 extra large
+ */
+export type AvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarColor = 'primary' | 'secondary' | 'tertiary' | 'success' | 'error' | 'neutral';
 export type AvatarShape = 'circle' | 'square';
 export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away' | 'none';

package/types/src/busy/spinner.d.ts

@@ -1,7 +1,12 @@
 declare const SchmnacySpinner_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 default class SchmnacySpinner extends SchmnacySpinner_base {
     color?: 'primary' | 'on-primary' | 'secondary' | 'on-secondary' | 'tertiary' | 'on-tertiary' | 'error' | 'on-error' | 'success' | 'on-success' | 'surface' | 'on-surface' | 'surface-variant' | 'on-surface-variant';
-    size: number;
+    /**
+     * Size of the spinner - M3 aligned tokens or numeric Tailwind units
+     * Tokens: 'xxs' (12px), 'xs' (16px), 'sm' (20px), 'md' (24px), 'lg' (32px)
+     * Numeric: Tailwind units where each unit = 4px (e.g., 6 = 24px)
+     */
+    size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | number;
     glass: boolean;
     protected render(): unknown;
 }

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

@@ -4,6 +4,7 @@ export interface SchmancyButtonEventMap {
     SchmancyBlur: CustomEvent<void>;
 }
 export type ButtonVariant = 'elevated' | 'filled' | 'filled tonal' | 'tonal' | 'outlined' | 'text';
+export type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';
 declare const SchmancyButton_base: CustomElementConstructor & import("@mixins/index").Constructor<LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 /**
  * A button component.
@@ -30,6 +31,13 @@ export declare class SchmancyButton extends SchmancyButton_base {
      * @public
      */
     variant: ButtonVariant;
+    /**
+     * The color of the button.
+     * @attr
+     * @default Depends on variant: 'primary' for filled/elevated/outlined/text, 'secondary' for tonal
+     * @public
+     */
+    color?: ButtonColor;
     /**
      * The width of the button.
      * @attr
@@ -41,11 +49,11 @@ export declare class SchmancyButton extends SchmancyButton_base {
     /**
      * The size of the button.
      * @attr
-     * @type {'sm' | 'md' | 'lg'}
+     * @type {'xxs' | 'xs' | 'sm' | 'md' | 'lg'}
      * @default 'md'
      * @public
      */
-    size: 'sm' | 'md' | 'lg';
+    size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
     /**
      * The type of the button.
      * Defaults to 'button' (preventing accidental form submissions).
@@ -71,6 +79,11 @@ export declare class SchmancyButton extends SchmancyButton_base {
     focus(options?: FocusOptions): void;
     /** Removes focus from the button. */
     blur(): void;
+    /**
+     * Get the effective color based on variant if not explicitly set
+     * M3 spec: filled = primary, tonal = secondary, others = primary
+     */
+    protected get effectiveColor(): ButtonColor;
     protected get imgClasses(): string[];
     firstUpdated(): void;
     click(): void;

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

@@ -22,7 +22,7 @@ export declare class SchmnacyIconButton extends SchmnacyIconButton_base {
      * @attr
      * @default 'md'
      */
-    size: 'sm' | 'md' | 'lg' | 'xl';
+    size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /**
      * The variant of the button.
      * @attr

package/types/src/charts/area-chart.d.ts

@@ -0,0 +1,58 @@
+import { PropertyValues } from 'lit';
+import type { ChartDataPoint, ChartTheme } from './types';
+declare const SchmancyAreaChart_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+export declare class SchmancyAreaChart extends SchmancyAreaChart_base {
+    /** Chart data points */
+    data: ChartDataPoint[];
+    /** Chart height in pixels */
+    height: number;
+    /** Show grid lines */
+    showGrid: boolean;
+    /** Show x-axis labels */
+    showLabels: boolean;
+    /** Enable tooltips */
+    showTooltip: boolean;
+    /** Number of peaks to highlight */
+    peakCount: number;
+    /** Animation duration in milliseconds */
+    animationDuration: number;
+    /** Enable entrance animation */
+    animated: boolean;
+    /** Prefix for values (e.g., "EUR ") */
+    valuePrefix: string;
+    /** Suffix for values (e.g., "%") */
+    valueSuffix: string;
+    /** Decimal places for value display */
+    valueDecimals: number;
+    /** Theme overrides */
+    theme: Partial<ChartTheme>;
+    private tooltipData;
+    private animationProgress;
+    private isVisible;
+    private canvasRef;
+    private containerRef;
+    private animationFrameId;
+    private observer;
+    private processedData;
+    private resizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private cleanup;
+    private setupIntersectionObserver;
+    protected updated(changedProperties: PropertyValues): void;
+    private startAnimation;
+    private processData;
+    private getThemeValue;
+    private drawChart;
+    private formatValue;
+    private handlePointerMove;
+    private handlePointerLeave;
+    private renderMetadata;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-area-chart': SchmancyAreaChart;
+    }
+}
+export {};

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

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './utils';
+export * from './area-chart';
+export * from './pills';

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

@@ -0,0 +1,51 @@
+import { PropertyValues } from 'lit';
+import type { PillDataPoint } from './types';
+declare const SchmancyPills_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+export declare class SchmancyPills extends SchmancyPills_base {
+    /** Chart data points */
+    data: PillDataPoint[];
+    /** Prefix for values (e.g., "EUR ") */
+    valuePrefix: string;
+    /** Suffix for values (e.g., "%") */
+    valueSuffix: string;
+    /** Decimal places for value display */
+    valueDecimals: number;
+    /** Show medals for top 3 */
+    showMedals: boolean;
+    /** Show legend for segments */
+    showLegend: boolean;
+    /** Animation duration in milliseconds */
+    animationDuration: number;
+    /** Enable entrance animation */
+    animated: boolean;
+    /** Label column width (Tailwind class) */
+    labelWidth: string;
+    /** Value column width (Tailwind class) */
+    valueWidth: string;
+    private animationProgress;
+    private isVisible;
+    private categoryColorMap;
+    private observer;
+    private animationFrameId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private cleanup;
+    private setupIntersectionObserver;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private startAnimation;
+    private initializeCategoryColors;
+    private getSegmentColor;
+    private formatValue;
+    private getMedalEmoji;
+    private getMaxValue;
+    private renderBar;
+    private renderLegend;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-pills': SchmancyPills;
+    }
+}
+export {};