@vanilla-bean/components 1.1.0 → 2.0.0

package/components/Calendar/Calendar.js

@@ -3,7 +3,7 @@ import { styled } from '../../styled';
 import { Component } from '../../Component';
 
 import CalendarEvent from './CalendarEvent';
-import Toolbar from './Toolbar';
+import Toolbar, { VIEWS } from './Toolbar';
 import { getDaysInMonth, toNth } from './utils';
 
 const StyledComponent = styled(
@@ -18,12 +18,17 @@ const StyledComponent = styled(
 			& tr.title {
 				font-size: 1.3em;
 				height: 1.3em;
-				color: ${colors.black};
-				background-color: ${colors.lightest(colors.gray)};
+				color: ${colors.lightest(colors.gray)};
+				background-color: ${colors.darkest(colors.gray)};
 
 				& td {
 					text-align: center;
 				}
+
+				& td:hover {
+					background-color: unset;
+					color: unset;
+				}
 			}
 		}
 
@@ -47,11 +52,11 @@ const StyledComponent = styled(
 			& div.time-block {
 				height: 3em;
 				cursor: pointer;
-				color: black;
-				background-color: ${colors.light(colors.gray)};
+				color: ${colors.lighter(colors.gray)};
+				background-color: ${colors.darker(colors.gray)};
 
 				&:nth-child(odd) {
-					background-color: ${colors.lighter(colors.gray)};
+					background-color: ${colors.darkest(colors.gray)};
 				}
 
 				&:last-of-type{
@@ -61,8 +66,15 @@ const StyledComponent = styled(
 				& span.time {
 					font-size: 12px;
 					margin: 2px;
+					padding: 1px 3px;
 					pointer-events: none;
 				}
+
+				&:hover span.time {
+					background-color: ${colors.light(colors.selected)};
+					color: ${colors.mostReadable(colors.light(colors.selected), [colors.white, colors.black])};
+					font-weight: 700;
+				}
 			}
 		}
 	`,
@@ -99,40 +111,63 @@ const MonthDayCell = styled(
 		position: relative;
 		border-collapse: collapse;
 		vertical-align: top;
-		background-color: ${colors.lighter(colors.gray)};
+		background-color: ${colors.darker(colors.gray)};
 		cursor: pointer;
 		padding: 3px;
+		/* definite height so the inner flex column can fill the cell */
+		height: 1px;
+
+		& div.cell-body {
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+		}
 
 		& span.day-title {
 			display: block;
 			font-size: 1em;
 			padding: 2px;
-			background-color: ${colors.black.setAlpha(0.2)};
-			color: ${colors.black};
+			background-color: ${colors.alpha(colors.black, 0.2)};
+			color: ${colors.lightest(colors.gray)};
 			cursor: pointer;
 		}
 
-		&:hover {
-			background-color: ${colors.blue};
+		& div.event-container {
+			background: ${colors.alpha(colors.black, 0.05)};
+			flex: 1;
+			min-height: 0;
+			margin-top: 2px;
+			border-radius: 6px;
+			padding: 3px;
+		}
 
-			& span.day-title {
-				background-color: ${colors.white.setAlpha(0.3)};
-			}
+		/* Pin the box color - the page theme's global td:hover darkening must not show through */
+		&:hover {
+			background-color: ${colors.darker(colors.gray)};
 		}
 
-		&.today {
-			background-color: ${colors.purple};
+		&:hover span.day-title,
+		&.today:hover span.day-title,
+		&.not-in-month:hover span.day-title {
+			background-color: ${colors.light(colors.selected)};
+			color: ${colors.mostReadable(colors.light(colors.selected), [colors.white, colors.black])};
+			font-weight: 700;
+		}
 
-			& span.day-title {
-				background-color: ${colors.white.setAlpha(0.3)};
-			}
+		&.today span.day-title {
+			box-shadow: inset 0 -3px 0 ${colors.selected};
+			color: ${colors.white};
+			font-weight: 700;
 		}
 
 		&.not-in-month {
-			background: #222;
-
 			& span.day-title {
 				color: ${colors.gray};
+				background: ${colors.alpha(colors.black, 0.3)};
+			}
+
+			& div.event-container {
+				background: ${colors.alpha(colors.black, 0.3)};
 			}
 		}
 	`,
@@ -142,19 +177,28 @@ const WeekDayCell = styled(
 	Component,
 	({ colors }) => `
 		cursor: pointer;
-		background-color: ${colors.lighter(colors.gray)};
+		background-color: ${colors.darker(colors.gray)};
 		min-height: 14.285714285714286%;
 
-		&.today {
-			background-color: ${colors.blue};
-		}
-
 		& div.day-title {
 			cursor: pointer;
 			padding: 6px;
-			background-color: ${colors.black.setAlpha(0.2)};
+			background-color: ${colors.alpha(colors.black, 0.2)};
 			font-size: 1em;
-			color: black;
+			color: ${colors.lightest(colors.gray)};
+		}
+
+		&:hover div.day-title,
+		&.today:hover div.day-title {
+			background-color: ${colors.light(colors.selected)};
+			color: ${colors.mostReadable(colors.light(colors.selected), [colors.white, colors.black])};
+			font-weight: 700;
+		}
+
+		&.today div.day-title {
+			box-shadow: inset 0 -3px 0 ${colors.selected};
+			color: ${colors.white};
+			font-weight: 700;
 		}
 
 		& .event {
@@ -209,27 +253,64 @@ export const MONTHS = [
  * @returns {Calendar} Calendar component instance
  */
 class Calendar extends StyledComponent {
-	constructor(options = {}, ...children) {
-		super(
-			{
-				view: 'month',
-				height: '420px',
-				registeredEvents: new Set(['selectDay', 'selectTime', 'selectEvent', 'newEvent']),
-				...options,
-				events: (options.events || []).map(eventItem => new CalendarEvent(eventItem)),
+	static schema = {
+		height: {
+			default: '420px',
+			set(value) {
+				this.elem.style.height = value;
 			},
-			...children,
-		);
-	}
+		},
+		// Date state read from this.options by the view renderers; navigation methods
+		// (setDate, next, previous) mutate several keys then re-render once
+		view: {
+			default: 'month',
+			enum: ['month', 'week', 'day'],
+			set() {
+				if (!this.rendered) return;
+				this.adjustDateToView();
+				this.renderView();
+			},
+		},
+		views: { default: VIEWS },
+		events: {
+			get default() {
+				return [];
+			},
+			set(value) {
+				// Normalize raw event objects; the re-assignment re-enters this set with instances only
+				if (value?.some(eventItem => !(eventItem instanceof CalendarEvent))) {
+					this.options.events = value.map(eventItem =>
+						eventItem instanceof CalendarEvent ? eventItem : new CalendarEvent(eventItem),
+					);
+					return;
+				}
 
-	static handlers = {
-		height(value) {
-			this.elem.style.height = value;
+				if (this.rendered) this.renderView();
+			},
 		},
+		year: {},
+		month: {},
+		day: {},
+		weekday: {},
+		display24h: { default: false },
 	};
 
+	static events = ['selectDay', 'selectTime', 'selectEvent', 'newEvent'];
+
+	static prepareOptions(options) {
+		return {
+			...options,
+			events: options.events.map(eventItem => new CalendarEvent(eventItem)),
+		};
+	}
+
 	build() {
-		this.toolbar = new Toolbar({ appendTo: this, calendar: this, views: this.options.views, view: this.options.view });
+		this.toolbar = new Toolbar({
+			appendTo: this,
+			calendar: this,
+			views: this.options.views,
+			view: this.options.subscriber('view'),
+		});
 		this.wrapper = new CalendarWrapper({ appendTo: this });
 
 		if (this.options.month == null) {
@@ -240,9 +321,7 @@ class Calendar extends StyledComponent {
 			this.adjustDateToView();
 		}
 
-		if (this.options.view === 'day') this.renderDay();
-		else if (this.options.view === 'week') this.renderWeek();
-		else this.renderMonth();
+		this.renderView();
 
 		this.wrapper.elem.scrollTop = 0;
 
@@ -360,7 +439,6 @@ class Calendar extends StyledComponent {
 
 			const weekdayCell = new WeekDayCell({
 				addClass: isToday ? 'today' : undefined,
-				data: { at: cDay.getTime() },
 				onPointerPress: ({ target }) => {
 					this.emit('selectDay', { target, date: cellDate });
 				},
@@ -449,12 +527,12 @@ class Calendar extends StyledComponent {
 				const td = new MonthDayCell({
 					tag: 'td',
 					addClass: isCurrentMonth && currentDay === dayX ? 'today' : undefined,
-					data: { at: date.getTime() },
 					appendTo: tr,
 					onPointerPress: event => {
 						this.emit('selectDay', { target: event.target, date });
 					},
-					append: [
+					append: new Component(
+						{ addClass: 'cell-body' },
 						new Component({
 							tag: 'span',
 							textContent: date.getDate(),
@@ -464,7 +542,7 @@ class Calendar extends StyledComponent {
 							},
 						}),
 						eventContainer,
-					],
+					),
 				});
 
 				if (dayX <= 0 || dayX > month.numberOfDays) td.addClass('not-in-month');
@@ -620,18 +698,20 @@ class Calendar extends StyledComponent {
 	 * @returns {Calendar} This calendar instance for method chaining
 	 */
 	setView(view) {
-		if (this.options.view !== view) {
-			this.options.view = view;
+		if (this.options.view !== view) this.options.view = view;
 
-			this.adjustDateToView();
-			this.wrapper.empty();
+		return this;
+	}
 
-			if (view === 'day') this.renderDay();
-			else if (view === 'week') this.renderWeek();
-			else this.renderMonth();
-		}
+	/**
+	 * Clears the wrapper and renders the current view.
+	 */
+	renderView() {
+		this.wrapper.empty();
 
-		return this;
+		if (this.options.view === 'day') this.renderDay();
+		else if (this.options.view === 'week') this.renderWeek();
+		else this.renderMonth();
 	}
 
 	/**

package/components/Calendar/CalendarEvent.js

@@ -7,12 +7,18 @@ const StyledEvent = styled(
 	Component,
 	({ colors }) => `
 		cursor: pointer;
-		color: ${colors.black};
-		background-color: ${colors.yellow};
+		color: ${colors.mostReadable(colors.selected, [colors.white, colors.black])};
+		background-color: ${colors.selected};
 
 		& div {
 			pointer-events: none;
 		}
+
+		&:hover,
+		&:focus-visible {
+			outline: 2px solid ${colors.light(colors.selected)};
+			outline-offset: -2px;
+		}
 	`,
 );
 
@@ -51,10 +57,9 @@ export default class CalendarEvent {
 		};
 
 		this.eventElem = new StyledEvent({
-			data: { at: this.at },
 			className: 'event',
 			role: 'button',
-			tabindex: '0',
+			tabIndex: 0,
 			'aria-label': `${this.label}, ${formattedTime}${this.duration ? formatDuration(this.duration, ', ') : ''}`,
 			style: { backgroundColor: this.color },
 			append: [

package/components/Calendar/Toolbar.js

@@ -22,24 +22,30 @@ const Right = styled(
 	`,
 );
 
-const VIEWS = ['day', 'week', 'month'];
+export const VIEWS = Object.freeze(['day', 'week', 'month']);
 
 class Toolbar extends Component {
-	constructor({ calendar, view, ...options } = {}, ...children) {
-		super(
-			{
-				...options,
-				style: {
-					display: 'flex',
-					justifyContent: 'space-between',
-					...options.style,
-				},
+	static schema = {
+		views: { default: VIEWS },
+		calendar: {},
+		view: {
+			set(value) {
+				for (const [view, button] of Object.entries(this._viewButtons || {})) {
+					button.toggleClass('pressed', view === value);
+				}
 			},
-			...children,
-		);
+		},
+	};
 
-		this.calendar = calendar;
-		this._currentView = view;
+	static prepareOptions(options) {
+		return {
+			...options,
+			style: {
+				display: 'flex',
+				justifyContent: 'space-between',
+				...options.style,
+			},
+		};
 	}
 
 	build() {
@@ -51,7 +57,7 @@ class Toolbar extends Component {
 						textContent: { next: '>', today: 'Today', previous: '<' }[action],
 						'aria-label': action,
 						onPointerPress: () => {
-							this.calendar[action]();
+							this.options.calendar[action]();
 						},
 					}),
 			),
@@ -59,17 +65,19 @@ class Toolbar extends Component {
 
 		this.title = new Title({ appendTo: this });
 
+		this._viewButtons = {};
+
 		new Right({
 			appendTo: this,
-			append: (this.options.views || VIEWS).map(
+			append: this.options.views.map(
 				view =>
-					new Button({
-						addClass: [`set-${view}`, ...(view === this._currentView ? ['pressed'] : [])],
+					(this._viewButtons[view] = new Button({
+						addClass: [`set-${view}`],
 						textContent: capitalize(view),
 						onPointerPress: () => {
-							this.calendar.setView(view);
+							this.options.calendar.setView(view);
 						},
-					}),
+					})),
 			),
 		});
 	}

package/components/Calendar/index.js

@@ -1,2 +1,3 @@
 export { default as Calendar, DAYS, MONTHS } from './Calendar';
+export { default as CalendarEvent } from './CalendarEvent';
 export * from './utils';

package/components/Code/Code.js

@@ -4,8 +4,6 @@ import { Component } from '../../Component';
 import { Button } from '../Button';
 import { Notify } from '../Notify';
 
-const defaultOptions = { tag: 'code', language: 'javascript', multiline: 'auto' };
-
 /**
  * Code display component with syntax highlighting and optional copy functionality.
  *
@@ -21,21 +19,34 @@ const defaultOptions = { tag: 'code', language: 'javascript', multiline: 'auto'
  * @returns {Code} Code component instance
  */
 class Code extends Component {
-	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
-
-	constructor(options = {}, ...children) {
-		if ((options.multiline || defaultOptions.multiline) === 'auto') {
-			options.multiline = (options.code || '').includes('\n');
-		}
+	static schema = {
+		language: {
+			default: 'javascript',
+			set(value) {
+				if (this.options.multiline && this._code) {
+					this._code.removeClass(/\blanguage-\S+\b/g);
+					this._code.addClass(`language-${value}`);
+				}
 
-		super(
-			{
-				...defaultOptions,
-				...options,
-				...(options.multiline ? { tag: 'pre' } : { tag: 'code' }),
+				this.removeClass(/\blanguage-\S+\b/g);
+				this.addClass(`language-${value}`);
 			},
-			...children,
-		);
+		},
+		code: {
+			set(value) {
+				(this.options.multiline && this._code ? this._code : this).elem.textContent = value;
+			},
+		},
+		// Resolved in prepareOptions (decides the tag); read from this.options in build()
+		multiline: { default: 'auto' },
+		copyButton: { default: false },
+	};
+
+	static prepareOptions(options) {
+		const multiline =
+			(options.multiline ?? 'auto') === 'auto' ? (options.code || '').includes('\n') : options.multiline;
+
+		return { ...options, multiline, tag: multiline ? 'pre' : 'code' };
 	}
 
 	build() {
@@ -64,21 +75,6 @@ class Code extends Component {
 				}),
 			);
 	}
-
-	static handlers = {
-		language(value) {
-			if (this.options.multiline && this._code) {
-				this._code.removeClass(/\blanguage-\S+\b/g);
-				this._code.addClass(`language-${value}`);
-			}
-
-			this.removeClass(/\blanguage-\S+\b/g);
-			this.addClass(`language-${value}`);
-		},
-		code(value) {
-			(this.options.multiline && this._code ? this._code : this).elem.textContent = value;
-		},
-	};
 }
 
 export default Code;

package/components/Code/Code.lld.md

@@ -15,7 +15,7 @@ Code display that automatically promotes from inline to block when the content s
 - the `language` option adds a `language-{name}` class; highlighting libraries target this class by convention
   - does the language option add an identifiable class to the code element?
 
-## Copy confirms success visually — clipboard writes can fail silently
+## Copy confirms success visually - clipboard writes can fail silently
 
 - the copy button shows a notification on success so the user knows the copy worked rather than discovering it failed on paste
   - does a successful copy show the user a confirmation?

package/components/ColorPicker/ColorPicker.js

@@ -143,8 +143,6 @@ const ColorSwatch = styled(
 	{ icon: 'fill-drip' },
 );
 
-const defaultOptions = { tag: 'div', value: '#666', onChange: () => {} };
-
 /**
  * Interactive color picker component with HSL controls and color swatches.
  *
@@ -159,19 +157,53 @@ const defaultOptions = { tag: 'div', value: '#666', onChange: () => {} };
  * @returns {ColorPicker} ColorPicker component instance
  */
 class ColorPicker extends StyledInput {
-	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
-
-	constructor(options = {}, ...children) {
-		options = { ...defaultOptions, ...options };
-
-		if (options.value === 'random') options.value = randomColor().toHslString();
-
-		super(options, ...children);
+	static schema = {
+		tag: { default: 'div' },
+		value: {
+			default: '#666',
+			set(value) {
+				if (!value) return;
+
+				const { h, sv, v, color, hslString } = this.parseValue(value);
+
+				this.hslString = hslString;
+				this.color = color;
+				// Preserve hue when achromatic (sv=0 loses hue info) or when TinyColor
+				// wraps 360 to 0 (same color, different position on the slider)
+				const isCircularWrap = sv > 0 && h === 0 && this.hue > 350;
+				if (!isCircularWrap) this.hue = sv > 0 ? h : (this.hue ?? h);
+				this.sv = sv;
+				this.v = v;
+
+				this.elem.style.backgroundColor = hslString;
+
+				this.pickerArea?.elem && (this.pickerArea.elem.style.backgroundColor = `hsl(${this.hue}, 100%, 50%)`);
+
+				const tryPosition = () => {
+					if (this.pickerArea?.elem?.clientWidth > 0) {
+						this._positionIndicators();
+					} else {
+						requestAnimationFrame(tryPosition);
+					}
+				};
+				requestAnimationFrame(tryPosition);
+			},
+		},
+		onChange: { default: () => {} },
+		swatches: {
+			get default() {
+				return [];
+			},
+		},
+	};
 
-		this.pointers = {};
+	static prepareOptions(options) {
+		return options.value === 'random' ? { ...options, value: randomColor().toHslString() } : options;
 	}
 
 	build() {
+		this.pointers = {};
+
 		this.textInput = new Input({
 			type: 'text',
 			value: this.options.subscriber('value', value => this.hslString || value),
@@ -204,23 +236,21 @@ class ColorPicker extends StyledInput {
 		sizeObserver.observe(this.pickerArea.elem);
 		this.addCleanup('sizeObserver', () => sizeObserver.disconnect());
 
-		if (this.options.swatches) {
-			this.options.swatches.forEach(color => {
-				new ColorSwatch({
-					appendTo: this.elem,
-
-					onPointerPress: () => this.change(color),
-					...(color === 'random'
-						? { addClass: ['rainbow'] }
-						: {
-								style: {
-									backgroundColor: color,
-									color: theme.colors.mostReadable(color, [theme.colors.white, theme.colors.black]),
-								},
-							}),
-				});
+		this.options.swatches.forEach(color => {
+			new ColorSwatch({
+				appendTo: this.elem,
+
+				onPointerPress: () => this.change(color),
+				...(color === 'random'
+					? { addClass: ['rainbow'] }
+					: {
+							style: {
+								backgroundColor: color,
+								color: theme.colors.mostReadable(color, [theme.colors.white, theme.colors.black]),
+							},
+						}),
 			});
-		}
+		});
 	}
 
 	/**
@@ -283,7 +313,7 @@ class ColorPicker extends StyledInput {
 
 		const clamp = (val, min, max) => Math.min(max, Math.max(min, val));
 
-		// HSV: x = saturation, y = (1 - value) — matches the gradient exactly
+		// HSV: x = saturation, y = (1 - value) - matches the gradient exactly
 		const pickerX = clamp((this.sv ?? 0) * pickerW, 0, pickerW);
 		const pickerY = clamp((1 - (this.v ?? 1)) * pickerH, 0, pickerH);
 		this.pickerIndicator.elem.style.transform = `translate3d(${pickerX}px, ${pickerY}px, 0)`;
@@ -292,36 +322,6 @@ class ColorPicker extends StyledInput {
 		this._setHueBackground(this.hue ?? 0, hueW);
 	}
 
-	static handlers = {
-		value(value) {
-			if (!value) return;
-
-			const { h, sv, v, color, hslString } = this.parseValue(value);
-
-			this.hslString = hslString;
-			this.color = color;
-			// Preserve hue when achromatic (sv=0 loses hue info) or when TinyColor
-			// wraps 360 to 0 (same color, different position on the slider)
-			const isCircularWrap = sv > 0 && h === 0 && this.hue > 350;
-			if (!isCircularWrap) this.hue = sv > 0 ? h : (this.hue ?? h);
-			this.sv = sv;
-			this.v = v;
-
-			this.elem.style.backgroundColor = hslString;
-
-			this.pickerArea?.elem && (this.pickerArea.elem.style.backgroundColor = `hsl(${this.hue}, 100%, 50%)`);
-
-			const tryPosition = () => {
-				if (this.pickerArea?.elem?.clientWidth > 0) {
-					this._positionIndicators();
-				} else {
-					requestAnimationFrame(tryPosition);
-				}
-			};
-			requestAnimationFrame(tryPosition);
-		},
-	};
-
 	getPosition({ clientX, clientY }) {
 		return { x: clientX, y: clientY };
 	}