@vanilla-bean/components 1.1.0 → 2.0.0

package/index.d.ts

@@ -1,5 +1,5 @@
 // Minimal type declarations for IDE option-name recognition.
-// These are a projection of the source — not a TypeScript implementation.
+// These are a projection of the source - not a TypeScript implementation.
 // VBC is plain JavaScript. These declarations exist so your IDE can suggest
 // option names while you write. They do not constrain what the library can do.
 
@@ -55,13 +55,14 @@ export declare const theme: Theme;
 
 // ── Oxject ───────────────────────────────────────────────────────────────────
 
-export type {
+import type {
 	OxjectInstance,
 	DeriveInstance,
 	DeriveOptions,
 	Subscription,
 	SubscriberSubscription,
 } from '@vanilla-bean/oxject';
+export type { OxjectInstance, DeriveInstance, DeriveOptions, Subscription, SubscriberSubscription };
 export { Oxject, derive } from '@vanilla-bean/oxject';
 
 // ── Elem ───────────────────────────────────────────────────────────────────────
@@ -189,9 +190,33 @@ export declare function styled<T extends typeof Elem>(
 
 export declare function configured<T extends typeof Elem>(Base: T, options: Partial<ComponentOptions>): T;
 
+// ── Calendar support ───────────────────────────────────────────────────────────
+
+export declare class CalendarEvent {
+	constructor(data: Record<string, any>);
+	options: Record<string, any>;
+	at: Date;
+	label?: string;
+	notes?: string;
+	color?: string;
+	duration?: number;
+	recurring?: boolean;
+	daily?: boolean;
+	whitelist?: Array<string | number | Date>;
+	blacklist?: Array<string | number | Date>;
+	weekdays?: Record<string, boolean>;
+	year: number;
+	month: number;
+	day: number;
+	hour: number;
+	minute: number;
+	fullDate: string;
+	render(type: string, container: HTMLElement, calendar: Component): HTMLElement;
+}
+
 // ── GENERATED: Built-in components ────────────────────────────────────────────
-// This section is generated by devTools/buildTypes.js — do not edit manually.
-// Run `bun run build:types` to regenerate from JSDoc annotations.
+// This section is generated by devTools/buildTypes.js - do not edit manually.
+// Run `bun run build:types` to regenerate from static schema declarations and JSDoc annotations.
 
 export interface BottomSheetOptions extends ComponentOptions {
 	/** Called when the sheet is dismissed */
@@ -208,21 +233,21 @@ export declare class BottomSheet extends Component {
 	hide(): void;
 }
 
-export interface ButtonOptions extends ComponentOptions {
+export interface ButtonOptions extends TooltipWrapperOptions {
 	/** FontAwesome icon name (without 'fa-' prefix) */
 	icon?: string;
 	/** Tooltip text shown on hover */
 	tooltip?: string;
 }
 
-export declare class Button extends Component {
+export declare class Button extends TooltipWrapper {
 	constructor(options?: ButtonOptions, ...children: Array<Elem | HTMLElement | string>);
 }
 
 export interface CalendarOptions extends ComponentOptions {
-	/** Initial calendar view mode */
+	/** Initial calendar view mode (default: "month") */
 	view?: 'month' | 'week' | 'day';
-	/** Calendar component height */
+	/** Calendar component height (default: "420px") */
 	height?: string;
 	/** Initial year to display, defaults to current year */
 	year?: number;
@@ -232,8 +257,10 @@ export interface CalendarOptions extends ComponentOptions {
 	day?: number;
 	/** Available view modes for toolbar */
 	views?: Array<string>;
-	/** Whether to display time in 24-hour format in day view */
+	/** Whether to display time in 24-hour format in day view (default: false) */
 	display24h?: boolean;
+	events?: Array<any>;
+	weekday?: any;
 }
 
 export declare class Calendar extends Component {
@@ -250,6 +277,8 @@ export declare class Calendar extends Component {
 	goToDay(): void;
 	/** Changes the calendar view mode and updates the display. */
 	setView(view: string): Calendar;
+	/** Clears the wrapper and renders the current view. */
+	renderView(): void;
 	/** Retrieves all events occurring on a specific date. */
 	eventsAt(date: string | Date): Array<CalendarEvent>;
 	/** Adds a new event to the calendar and re-renders. */
@@ -257,13 +286,13 @@ export declare class Calendar extends Component {
 }
 
 export interface CodeOptions extends ComponentOptions {
-	/** Programming language for syntax highlighting class */
+	/** Programming language for syntax highlighting class (default: "javascript") */
 	language?: string;
-	/** Whether to render as multiline block ('auto' detects newlines) */
+	/** Whether to render as multiline block ('auto' detects newlines) (default: "auto") */
 	multiline?: string | boolean;
 	/** Code content to display */
 	code?: string;
-	/** Whether to show copy-to-clipboard button */
+	/** Whether to show copy-to-clipboard button (default: false) */
 	copyButton?: boolean;
 }
 
@@ -271,14 +300,14 @@ export declare class Code extends Component {
 	constructor(options?: CodeOptions, ...children: Array<Elem | HTMLElement | string>);
 }
 
-export interface ColorPickerOptions extends ComponentOptions {
-	/** Initial color value (CSS color, 'random' for random color) */
+export interface ColorPickerOptions extends InputOptions {
+	/** Initial color value (CSS color, 'random' for random color) (default: "#666") */
 	value?: string;
 	/** Array of predefined color values for swatch buttons */
 	swatches?: Array<string>;
 }
 
-export declare class ColorPicker extends Component {
+export declare class ColorPicker extends Input {
 	constructor(options?: ColorPickerOptions, ...children: Array<Elem | HTMLElement | string>);
 	/** Changes the color value and triggers change event. */
 	change(): void;
@@ -287,13 +316,13 @@ export declare class ColorPicker extends Component {
 }
 
 export interface DialogOptions extends ComponentOptions {
-	/** Dialog size */
+	/** Dialog size (default: "small") */
 	size?: 'small' | 'standard' | 'large';
 	/** Color variant */
 	variant?: 'info' | 'success' | 'warning' | 'error';
-	/** Auto-open delay in ms, or false to disable */
+	/** Auto-open delay in ms, or false to disable (default: 16) */
 	openOnRender?: number | boolean;
-	/** Whether to open as modal dialog */
+	/** Whether to open as modal dialog (default: true) */
 	modal?: boolean;
 	/** Header text content */
 	header?: string;
@@ -311,7 +340,7 @@ export interface DialogOptions extends ComponentOptions {
 
 export declare class Dialog extends Component {
 	constructor(options?: DialogOptions, ...children: Array<Elem | HTMLElement | string>);
-	/** Content container — primary injection point for subclass and consumer content. */
+	/** Content container - primary injection point for subclass and consumer content. */
 	readonly body: Component;
 	/** Opens the dialog, either as modal or non-modal */
 	open(): void;
@@ -345,8 +374,30 @@ export declare class Icon extends Component {
 
 export interface InputOptions extends ComponentOptions {
 	/** Input type, auto-detected from value type if not specified */
-	type?: string;
-	/** Initial input value */
+	type?:
+		| 'button'
+		| 'checkbox'
+		| 'color'
+		| 'date'
+		| 'datetime-local'
+		| 'email'
+		| 'file'
+		| 'hidden'
+		| 'image'
+		| 'month'
+		| 'number'
+		| 'password'
+		| 'radio'
+		| 'range'
+		| 'reset'
+		| 'search'
+		| 'submit'
+		| 'tel'
+		| 'text'
+		| 'time'
+		| 'url'
+		| 'week';
+	/** Initial input value (default: "") */
 	value?: any;
 	/** Placeholder text */
 	placeholder?: string;
@@ -356,7 +407,7 @@ export interface InputOptions extends ComponentOptions {
 	autocapitalize?: string;
 	/** Auto-correction behavior */
 	autocorrect?: string;
-	/** Height for textarea ('auto' for dynamic sizing) */
+	/** Height for textarea ('auto' for dynamic sizing) (default: "auto") */
 	height?: string | number;
 	/** Enable syntax highlighting for textarea */
 	syntaxHighlighting?: boolean;
@@ -375,9 +426,9 @@ export declare class Input extends Component {
 }
 
 export interface KeyboardOptions extends ComponentOptions {
-	/** Initial keyboard layout name */
+	/** Initial keyboard layout name (default: "simple") */
 	layout?: string;
-	/** Whether to provide haptic feedback on key press */
+	/** Whether to provide haptic feedback on key press (default: true) */
 	tactileResponse?: boolean;
 	/** Key configuration object mapping key names to definitions */
 	keyDefinitions?: Record<string, any>;
@@ -397,8 +448,8 @@ export declare class Keyboard extends Component {
 	onKeyPress(callback: (...args: any[]) => any): (...args: any[]) => any;
 }
 
-export interface LabelOptions extends ComponentOptions {
-	/** Label display variant */
+export interface LabelOptions extends TooltipWrapperOptions {
+	/** Label display variant (default: "simple") */
 	variant?: 'overlay' | 'collapsible' | 'inline' | 'inline-after' | 'simple';
 	/** Label text content or label component options */
 	label?: string | Record<string, any>;
@@ -410,13 +461,13 @@ export interface LabelOptions extends ComponentOptions {
 	tooltip?: string;
 }
 
-export declare class Label extends Component {
+export declare class Label extends TooltipWrapper {
 	constructor(options?: LabelOptions, ...children: Array<Elem | HTMLElement | string>);
 }
 
-export interface LinkOptions extends ComponentOptions {
-	/** Link display variant ('link', 'button') */
-	variant?: string;
+export interface LinkOptions extends TooltipWrapperOptions {
+	/** Link display variant ('link', 'button') (default: "link") */
+	variant?: 'link' | 'button';
 	/** URL to link to */
 	href?: string;
 	/** Link target attribute */
@@ -425,7 +476,7 @@ export interface LinkOptions extends ComponentOptions {
 	tooltip?: Record<string, any> | string;
 }
 
-export declare class Link extends Component {
+export declare class Link extends TooltipWrapper {
 	constructor(options?: LinkOptions, ...children: Array<Elem | HTMLElement | string>);
 }
 
@@ -442,22 +493,24 @@ export declare class List extends Component {
 	constructor(options?: ListOptions, ...children: Array<Elem | HTMLElement | string>);
 }
 
-export interface MenuOptions extends ComponentOptions {
+export interface MenuOptions extends ListOptions {
 	/** Array of menu items to render */
 	items?: Array<any>;
-	/** Handler called when menu item is selected */
+	/** Handler for the "select" CustomEvent fired when a menu item is activated; the activation event is in event.detail */
 	onSelect?: (...args: any[]) => any;
 	/** Custom component class for rendering menu items */
 	ListItemComponent?: Component;
+	/** default: "menu" */
+	role?: string;
 }
 
-export declare class Menu extends Component {
+export declare class Menu extends List {
 	constructor(options?: MenuOptions, ...children: Array<Elem | HTMLElement | string>);
 }
 
-export interface NotifyOptions extends ComponentOptions {
-	/** Notification type ('info', 'success', 'warning', 'error') */
-	type?: string;
+export interface NotifyOptions extends PopoverOptions {
+	/** Notification type ('info', 'success', 'warning', 'error') (default: "success") */
+	type?: 'info' | 'success' | 'warning' | 'error';
 	/** Auto-dismiss timeout in milliseconds */
 	timeout?: number;
 	/** Custom icon name, defaults to type-appropriate icon */
@@ -468,7 +521,7 @@ export interface NotifyOptions extends ComponentOptions {
 	y?: number;
 }
 
-export declare class Notify extends Component {
+export declare class Notify extends Popover {
 	constructor(options?: NotifyOptions, ...children: Array<Elem | HTMLElement | string>);
 }
 
@@ -476,26 +529,28 @@ export declare class Page extends Component {
 	constructor(options?: ComponentOptions, ...children: Array<Elem | HTMLElement | string>);
 }
 
-export interface PopoverOptions extends ComponentOptions {
-	/** Popover state ('auto', 'manual') */
-	state?: string;
-	/** Whether to automatically open on render */
+export interface PopoverOptions extends IconOptions {
+	/** Popover state ('auto', 'manual') (default: "manual") */
+	state?: 'auto' | 'manual';
+	/** Whether to automatically open on render (default: true) */
 	autoOpen?: boolean;
 	/** X position for the popover */
 	x?: number;
 	/** Y position for the popover */
 	y?: number;
-	/** Maximum width in pixels */
+	/** Maximum width in pixels (default: 264) */
 	maxWidth?: number;
-	/** Maximum height in pixels */
+	/** Maximum height in pixels (default: 132) */
 	maxHeight?: number;
 	/** Viewport element for edge detection */
 	viewport?: HTMLElement;
 	/** Icon to display in the popover */
 	icon?: string;
+	/** default: false */
+	outsideClose?: boolean;
 }
 
-export declare class Popover extends Component {
+export declare class Popover extends Icon {
 	constructor(options?: PopoverOptions, ...children: Array<Elem | HTMLElement | string>);
 	/** Checks if the popover is currently open. */
 	readonly isOpen: boolean;
@@ -525,7 +580,7 @@ export interface RouterOptions extends ComponentOptions {
 	notFound?: Component;
 	/** Callback fired when rendering a new view */
 	onRenderView?: (...args: any[]) => any;
-	/** Routing mode: 'hash' uses URL fragments, 'history' uses pushState */
+	/** Routing mode: 'hash' uses URL fragments, 'history' uses pushState (default: "hash") */
 	mode?: 'hash' | 'history';
 }
 
@@ -539,14 +594,16 @@ export declare class Router extends Component {
 	parseRouteParameters(path?: string): Record<string, any>;
 }
 
-export interface SelectOptions extends ComponentOptions {
+export interface SelectOptions extends InputOptions {
 	/** Array of select options */
 	options?: Array<string | Record<string, any>>;
 	/** Currently selected value */
 	value?: any;
+	/** default: "off" */
+	autocomplete?: string;
 }
 
-export declare class Select extends Component {
+export declare class Select extends Input {
 	constructor(options?: SelectOptions, ...children: Array<Elem | HTMLElement | string>);
 	/** Gets the currently selected value with enhanced option handling. */
 	readonly value: any;
@@ -564,7 +621,8 @@ export interface TableOptions extends ComponentOptions {
 	/** Currently sorted column key */
 	sortProperty?: string;
 	/** Sort direction ('asc' or 'desc') */
-	sortDirection?: string;
+	sortDirection?: 'asc' | 'desc';
+	selection?: any;
 }
 
 export declare class Table extends Component {
@@ -572,7 +630,7 @@ export declare class Table extends Component {
 }
 
 export interface TagListOptions extends ComponentOptions {
-	/** Whether tags can be added/removed */
+	/** Whether tags can be added/removed (default: false) */
 	readOnly?: boolean;
 	/** Initial array of tag text values */
 	tags?: Array<string>;
@@ -582,42 +640,42 @@ export declare class TagList extends Component {
 	constructor(options?: TagListOptions, ...children: Array<Elem | HTMLElement | string>);
 }
 
-export interface TooltipOptions extends ComponentOptions {
-	/** Tooltip position relative to parent */
+export interface TooltipOptions extends PopoverOptions {
+	/** Tooltip position relative to parent (default: "topRight") */
 	position?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
-	/** Whether tooltip opens automatically */
+	/** Whether tooltip opens automatically (default: false) */
 	autoOpen?: boolean;
 	/** Icon to display in tooltip */
 	icon?: string;
 }
 
-export declare class Tooltip extends Component {
+export declare class Tooltip extends Popover {
 	constructor(options?: TooltipOptions, ...children: Array<Elem | HTMLElement | string>);
 }
 
-export interface TooltipWrapperOptions extends ComponentOptions {
+export interface TooltipWrapperOptions extends IconOptions {
 	/** Tooltip text or configuration object */
 	tooltip?: string | Record<string, any>;
 	/** Icon to display in the component */
 	icon?: string;
 }
 
-export declare class TooltipWrapper extends Component {
+export declare class TooltipWrapper extends Icon {
 	constructor(options?: TooltipWrapperOptions, ...children: Array<Elem | HTMLElement | string>);
 }
 
 export interface WhiteboardOptions extends ComponentOptions {
-	/** Canvas background color */
+	/** Canvas background color (default: "#FFF") */
 	background?: string;
-	/** Default drawing color */
+	/** Default drawing color (default: "#000") */
 	color?: string;
-	/** Default line width for drawing */
+	/** Default line width for drawing (default: 3) */
 	lineWidth?: number;
-	/** Canvas width */
+	/** Canvas width (default: "200px") */
 	width?: string;
-	/** Canvas height */
+	/** Canvas height (default: "200px") */
 	height?: string;
-	/** Whether drawing is disabled */
+	/** Whether drawing is disabled (default: false) */
 	readOnly?: boolean;
 	/** Predefined lines to render on the canvas */
 	lines?: Array<Record<string, any>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vanilla-bean/components",
-	"version": "1.1.0",
+	"version": "2.0.0",
 	"type": "module",
 	"module": "./index.js",
 	"types": "./index.d.ts",
@@ -26,6 +26,7 @@
 		"/Component/*.js",
 		"/styled/*.js",
 		"/plugins/*.js",
+		"/devTools/*.js",
 		"/components/**/*",
 		"/theme/**/*",
 		"/utils/**/*",
@@ -86,36 +87,36 @@
 	},
 	"homepage": "https://github.com/fatlard1993/vanilla-bean-components#readme",
 	"dependencies": {
-		"@ctrl/tinycolor": "^4.1.0",
-		"@fontsource-variable/kode-mono": "^5.2.6",
-		"@fortawesome/fontawesome-free": "^7.0.0",
+		"@ctrl/tinycolor": "^4.2.0",
+		"@fontsource-variable/kode-mono": "^5.2.8",
+		"@fortawesome/fontawesome-free": "^7.3.1",
 		"@vanilla-bean/oxject": "^1.0.0",
-		"nanoid": "^5.1.5"
+		"nanoid": "6"
 	},
 	"devDependencies": {
-		"@vanilla-bean/hypertether": "^1.0.0",
-		"baseline-browser-mapping": "^2.10.38",
-		"caniuse-lite": "^1.0.30001799",
-		"@eslint/compat": "^1.3.2",
-		"@eslint/js": "^9.33.0",
-		"@happy-dom/global-registrator": "^18.0.1",
+		"@eslint/compat": "^1.4.1",
+		"@eslint/js": "^9.39.5",
+		"@happy-dom/global-registrator": "20",
 		"@testing-library/dom": "^10.4.1",
-		"@testing-library/jest-dom": "^6.6.4",
+		"@testing-library/jest-dom": "^6.9.1",
 		"@testing-library/user-event": "^14.6.1",
-		"bun-types": "^1.2.20",
-		"eslint": "^9.33.0",
-		"eslint-plugin-compat": "^6.0.2",
+		"@vanilla-bean/hypertether": "^1.0.1",
+		"baseline-browser-mapping": "^2.10.43",
+		"bun-types": "^1.3.14",
+		"caniuse-lite": "^1.0.30001805",
+		"emoji-js": "^3.9.0",
+		"eslint": "^9.39.5",
+		"eslint-plugin-compat": "^6.2.1",
 		"eslint-plugin-import": "^2.32.0",
-		"eslint-plugin-jsdoc": "^54.0.0",
+		"eslint-plugin-jsdoc": "^54.7.0",
 		"eslint-plugin-spellcheck": "0.0.20",
-		"eslint-plugin-testing-library": "^7.6.6",
-		"eslint-plugin-unicorn": "^60.0.0",
+		"eslint-plugin-testing-library": "^7.16.2",
 		"eslint-plugin-write-good-comments": "^0.2.0",
-		"globals": "^16.3.0",
-		"emoji-js": "^3.8.1",
-		"marked": "^16.1.2",
+		"globals": "17",
+		"happy-dom": "20",
+		"marked": "18",
 		"moresketchy": "wbern/MoreSketchy.js",
-		"prettier": "^3.6.2"
+		"prettier": "^3.9.5"
 	},
 	"engines": {
 		"node": ">=18"

package/spellcheck.config.cjs

@@ -24,6 +24,9 @@ module.exports = {
 		'hsv',
 		'rgb',
 		'whitespace',
+		'schemas',
+		'subclasses',
+		'destructured',
 		'splitter',
 		'recurse',
 		'debounce',