@mhmo91/schmancy 0.10.42 → 0.10.43

package/src/calendar/calendar.ts

@@ -0,0 +1,587 @@
+import dayjs from 'dayjs'
+import localeData from 'dayjs/plugin/localeData'
+import weekday from 'dayjs/plugin/weekday'
+import isBetween from 'dayjs/plugin/isBetween'
+import { css, html, PropertyValues } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { fromEvent, merge, Subject, takeUntil } from 'rxjs'
+import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators'
+import { SchmancyElement } from '@mixins/index'
+
+dayjs.extend(localeData)
+dayjs.extend(weekday)
+dayjs.extend(isBetween)
+
+// ---------------------------------------------------------------------------
+// Event detail types
+// ---------------------------------------------------------------------------
+
+/** Fired on every provisional change (including range hover-preview). */
+export type SchmancyCalendarInputEvent = CustomEvent<{
+	value: string | null
+	start: string | null
+	end: string | null
+}>
+
+/** Fired on a committed change: single click | second range endpoint | clear. */
+export type SchmancyCalendarChangeEvent = CustomEvent<{
+	value: string | null
+	start: string | null
+	end: string | null
+}>
+
+/** Fired as the dominant in-view month changes while scrolling. */
+export type SchmancyCalendarNavigateEvent = CustomEvent<{
+	month: string
+}>
+
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
+
+/** Parse a 'YYYY-MM' string into { year, month } (1-based month). */
+function parseYM(ym: string): { year: number; month: number } {
+	const [y, m] = ym.split('-').map(Number)
+	return { year: y, month: m }
+}
+
+/** Format a dayjs instance as 'YYYY-MM'. */
+function toYM(d: dayjs.Dayjs): string {
+	return d.format('YYYY-MM')
+}
+
+/** Format a dayjs instance as 'YYYY-MM-DD'. */
+function toYMD(d: dayjs.Dayjs): string {
+	return d.format('YYYY-MM-DD')
+}
+
+/** Number of months between two 'YYYY-MM' strings (inclusive). */
+function monthsBetween(from: string, to: string): number {
+	const f = parseYM(from)
+	const t = parseYM(to)
+	return (t.year - f.year) * 12 + (t.month - f.month) + 1
+}
+
+/** Add `n` months to a 'YYYY-MM' string. */
+function addMonths(ym: string, n: number): string {
+	const { year, month } = parseYM(ym)
+	const d = dayjs(new Date(year, month - 1, 1)).add(n, 'month')
+	return toYM(d)
+}
+
+/**
+ * Derive the first day of the week (0=Sun … 6=Sat) from a BCP-47 locale tag.
+ * `Intl.Locale.weekInfo.firstDay` uses 1=Mon … 7=Sun; we convert to 0-based Sun.
+ * Falls back to 0 (Sunday) when the API is unsupported or the locale is absent.
+ */
+function firstDayOfWeek(locale: string | undefined): number {
+	if (!locale) return 0
+	try {
+		const info = (new Intl.Locale(locale) as { weekInfo?: { firstDay?: number } }).weekInfo
+		if (info?.firstDay == null) return 0
+		// Intl spec: 1=Mon … 7=Sun → convert to 0-based (0=Sun … 6=Sat)
+		return info.firstDay === 7 ? 0 : info.firstDay
+	} catch {
+		return 0
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * A presentational calendar primitive with continuous vertical month-scroll.
+ * Supports single-date and date-range selection. No form-association.
+ *
+ * @element schmancy-calendar
+ * @fires input  - Every provisional change (incl. range hover-preview)
+ * @fires change - Committed change: single click | second range endpoint | clear
+ * @fires navigate - Dominant in-view month changed while scrolling
+ *
+ * @csspart scroll          - The scrollable container
+ * @csspart month-label     - Sticky month/year label
+ * @csspart weekday         - Weekday header cell
+ * @csspart grid            - Day grid for a month
+ * @csspart day             - Individual day cell
+ * @csspart day-selected    - A selected day (single mode, or both endpoints)
+ * @csspart day-range-start - Range start day
+ * @csspart day-range-end   - Range end day
+ * @csspart day-in-range    - Day inside the selected range (exclusive of endpoints)
+ * @csspart day-preview     - Day inside the hover-preview range
+ * @csspart day-today       - Today's date
+ * @csspart day-disabled    - Disabled (out-of-bounds) day
+ */
+@customElement('schmancy-calendar')
+export class SchmancyCalendar extends SchmancyElement {
+	static styles = [
+		css`
+			:host {
+				display: block;
+			}
+			[part~='scroll'] {
+				scroll-behavior: smooth;
+			}
+		`,
+	]
+
+	// -------------------------------------------------------------------------
+	// Public properties (per the plan contract)
+	// -------------------------------------------------------------------------
+
+	@property({ reflect: true }) mode: 'single' | 'range' = 'single'
+	@property() type: 'date' | 'datetime-local' = 'date'
+	@property() value?: string | null
+	@property() start?: string | null
+	@property() end?: string | null
+	@property() min?: string
+	@property() max?: string
+	@property() month?: string
+	/** BCP-47 locale tag; week-start derived from it. Stored as `calLocale` to avoid conflicting with the base-class `locale` getter. */
+	@property({ attribute: 'locale' }) calLocale?: string
+	@property({ type: Boolean, reflect: true }) disabled = false
+	@property({ type: Boolean, reflect: true }) readonly = false
+
+	// -------------------------------------------------------------------------
+	// Internal state
+	// -------------------------------------------------------------------------
+
+	/** The month the scroller is currently anchored to ('YYYY-MM'). */
+	@state() private anchorMonth: string = toYM(dayjs())
+
+	/** In range mode: the first click (pending second endpoint). */
+	@state() private pendingStart: string | null = null
+
+	/** In range mode: day the pointer is hovering over (for preview). */
+	@state() private hoverDate: string | null = null
+
+	// -------------------------------------------------------------------------
+	// Internal subjects
+	// -------------------------------------------------------------------------
+
+	/**
+	 * Emits the dominant month string whenever a scroll event occurs.
+	 * Fed by both the DOM scroller's fromEvent (via scrollerReady$) and any
+	 * future direct pushes. Merging both into a single debounced pipeline
+	 * satisfies ONE_PIPELINE_ONE_SUBSCRIBE.
+	 */
+	private readonly scroll$ = new Subject<string>()
+
+	/**
+	 * Emits the scroller HTMLElement once it is available in the DOM
+	 * (from updated()). switchMap converts it into the fromEvent stream,
+	 * which feeds scroll$ — all inside the single connectedCallback pipeline.
+	 */
+	private readonly scrollerReady$ = new Subject<HTMLElement>()
+
+	// -------------------------------------------------------------------------
+	// Lifecycle
+	// -------------------------------------------------------------------------
+
+	override connectedCallback(): void {
+		super.connectedCallback()
+
+		// Resolve initial anchor from current props.
+		if (this.month) {
+			this.anchorMonth = this.month
+		} else if (this.mode === 'range') {
+			if (this.start) this.anchorMonth = toYM(dayjs(this.start))
+			else if (this.end) this.anchorMonth = toYM(dayjs(this.end))
+			else this.anchorMonth = toYM(dayjs())
+		} else {
+			this.anchorMonth = this.value ? toYM(dayjs(this.value)) : toYM(dayjs())
+		}
+
+		// Single pipeline. Three merged sources → debounce → navigate event.
+		//   1. scroll$       — direct pushes (future programmatic use)
+		//   2. scrollerReady$ switchMapped to fromEvent(scroller, 'scroll')
+		//      — DOM scroll events once the scroller is in the shadow DOM
+		merge(
+			this.scroll$,
+			this.scrollerReady$.pipe(
+				switchMap(scroller =>
+					fromEvent(scroller, 'scroll').pipe(map(() => this.dominantMonth(scroller))),
+				),
+			),
+		)
+			.pipe(distinctUntilChanged(), debounceTime(50), takeUntil(this.disconnecting))
+			.subscribe(month => {
+				this.dispatchEvent(
+					new CustomEvent<SchmancyCalendarNavigateEvent['detail']>('navigate', {
+						detail: { month },
+						bubbles: true,
+						composed: true,
+					}),
+				)
+			})
+	}
+
+	override updated(changed: PropertyValues): void {
+		super.updated(changed)
+		// If the `month` prop changes externally, scroll to that month.
+		if (changed.has('month') && this.month && this.month !== this.anchorMonth) {
+			this.anchorMonth = this.month
+			this.scrollToMonth(this.month)
+		}
+		// Push the scroller element into the pipeline once it is in the DOM.
+		if (!this.scrollerAttached) {
+			const scroller = this.shadowRoot?.querySelector('[part="scroll"]') as HTMLElement | null
+			if (scroller) {
+				this.scrollerAttached = true
+				this.scrollerReady$.next(scroller)
+			}
+		}
+	}
+
+	// -------------------------------------------------------------------------
+	// Scroll listener gate (ensures scrollerReady$ fires exactly once)
+	// -------------------------------------------------------------------------
+
+	private scrollerAttached = false
+
+	// -------------------------------------------------------------------------
+	// Date-math helpers
+	// -------------------------------------------------------------------------
+
+	/** The scroll window start month. */
+	private windowStart(): string {
+		if (this.min) return toYM(dayjs(this.min).startOf('month'))
+		return addMonths(this.resolveAnchor(), -3)
+	}
+
+	/** The scroll window end month. */
+	private windowEnd(): string {
+		if (this.max) return toYM(dayjs(this.max).endOf('month'))
+		return addMonths(this.resolveAnchor(), 9)
+	}
+
+	/** Resolve the best anchor month from current props. */
+	private resolveAnchor(): string {
+		if (this.month) return this.month
+		if (this.mode === 'range') {
+			if (this.start) return toYM(dayjs(this.start))
+			if (this.end) return toYM(dayjs(this.end))
+		} else {
+			if (this.value) return toYM(dayjs(this.value))
+		}
+		return toYM(dayjs())
+	}
+
+	/** All months in the scroll window as 'YYYY-MM' strings. */
+	private months(): string[] {
+		const start = this.windowStart()
+		const end = this.windowEnd()
+		const count = monthsBetween(start, end)
+		return Array.from({ length: count }, (_, i) => addMonths(start, i))
+	}
+
+	/** Days of the week starting from the locale's first day (BCP-47 derived). */
+	private weekdayHeaders(): string[] {
+		const allDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+		const firstDay = firstDayOfWeek(this.calLocale)
+		return [...allDays.slice(firstDay), ...allDays.slice(0, firstDay)]
+	}
+
+	// -------------------------------------------------------------------------
+	// Dominant-month detection (for navigate events)
+	// -------------------------------------------------------------------------
+
+	private dominantMonth(scroller: HTMLElement): string {
+		const monthEls = scroller.querySelectorAll<HTMLElement>('[data-month]')
+		const scrollMid = scroller.scrollTop + scroller.clientHeight / 2
+		let best: string = this.anchorMonth
+		let bestDist = Infinity
+		for (const el of monthEls) {
+			const elMid = el.offsetTop + el.offsetHeight / 2
+			const dist = Math.abs(elMid - scrollMid)
+			if (dist < bestDist) {
+				bestDist = dist
+				best = el.dataset.month!
+			}
+		}
+		return best
+	}
+
+	private scrollToMonth(ym: string): void {
+		requestAnimationFrame(() => {
+			const scroller = this.shadowRoot?.querySelector('[part="scroll"]') as HTMLElement | null
+			if (!scroller) return
+			const el = scroller.querySelector<HTMLElement>(`[data-month="${ym}"]`)
+			if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+		})
+	}
+
+	// -------------------------------------------------------------------------
+	// Day-state helpers
+	// -------------------------------------------------------------------------
+
+	private isSelected(iso: string): boolean {
+		if (this.mode === 'single') return iso === this.value
+		return iso === this.start || iso === this.end
+	}
+
+	private isRangeStart(iso: string): boolean {
+		return this.mode === 'range' && iso === this.start
+	}
+
+	private isRangeEnd(iso: string): boolean {
+		return this.mode === 'range' && iso === this.end
+	}
+
+	private isInRange(iso: string): boolean {
+		if (this.mode !== 'range' || !this.start || !this.end) return false
+		const d = dayjs(iso)
+		const s = dayjs(this.start)
+		const e = dayjs(this.end)
+		const [lo, hi] = s.isBefore(e) ? [s, e] : [e, s]
+		return d.isAfter(lo) && d.isBefore(hi)
+	}
+
+	private isInPreview(iso: string): boolean {
+		if (this.mode !== 'range' || !this.pendingStart || !this.hoverDate) return false
+		const d = dayjs(iso)
+		const s = dayjs(this.pendingStart)
+		const h = dayjs(this.hoverDate)
+		const [lo, hi] = s.isBefore(h) ? [s, h] : [h, s]
+		return (d.isAfter(lo) && d.isBefore(hi)) || d.isSame(lo) || d.isSame(hi)
+	}
+
+	private isToday(iso: string): boolean {
+		return iso === toYMD(dayjs())
+	}
+
+	private isDisabled(iso: string): boolean {
+		if (this.disabled) return true
+		if (this.min && iso < this.min) return true
+		if (this.max && iso > this.max) return true
+		return false
+	}
+
+	// -------------------------------------------------------------------------
+	// Click / hover / keyboard handlers
+	// -------------------------------------------------------------------------
+
+	private handleDayClick(iso: string): void {
+		if (this.isDisabled(iso) || this.readonly) return
+
+		if (this.mode === 'single') {
+			this.value = iso
+			this.emit('change', { value: iso, start: null, end: null })
+			return
+		}
+
+		// Range mode
+		if (this.pendingStart === null) {
+			// First click — set pending start, emit `input`
+			this.pendingStart = iso
+			this.hoverDate = iso
+			this.emit('input', { value: null, start: iso, end: null })
+		} else {
+			// Second click — commit range
+			const [s, e] = this.pendingStart <= iso ? [this.pendingStart, iso] : [iso, this.pendingStart]
+			this.pendingStart = null
+			this.hoverDate = null
+			this.start = s
+			this.end = e
+			this.emit('change', { value: null, start: s, end: e })
+		}
+	}
+
+	private handleDayHover(iso: string): void {
+		if (this.mode !== 'range' || this.pendingStart === null) return
+		this.hoverDate = iso
+		const [s, e] = this.pendingStart <= iso ? [this.pendingStart, iso] : [iso, this.pendingStart]
+		this.emit('input', { value: null, start: s, end: e })
+	}
+
+	private handleKeyDown(e: KeyboardEvent, iso: string): void {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault()
+			this.handleDayClick(iso)
+		}
+	}
+
+	// -------------------------------------------------------------------------
+	// Event emission helper
+	// -------------------------------------------------------------------------
+
+	private emit(
+		eventName: 'input' | 'change',
+		detail: { value: string | null; start: string | null; end: string | null },
+	): void {
+		this.dispatchEvent(
+			new CustomEvent(eventName, {
+				detail,
+				bubbles: true,
+				composed: true,
+			}),
+		)
+	}
+
+	// -------------------------------------------------------------------------
+	// Render
+	// -------------------------------------------------------------------------
+
+	render() {
+		const months = this.months()
+		const weekdays = this.weekdayHeaders()
+
+		return html`
+			<div
+				part="scroll"
+				class="overflow-y-auto h-full"
+				role="grid"
+				aria-label="Calendar"
+				aria-multiselectable="${this.mode === 'range' ? 'true' : 'false'}"
+			>
+				${repeat(
+					months,
+					ym => ym,
+					ym => this.renderMonth(ym, weekdays),
+				)}
+			</div>
+			<div id="live-status" role="status" aria-live="polite" class="sr-only"></div>
+		`
+	}
+
+	private renderMonth(ym: string, weekdays: string[]) {
+		const { year, month } = parseYM(ym)
+		const firstDay = dayjs(new Date(year, month - 1, 1))
+		const daysInMonth = firstDay.daysInMonth()
+
+		// Offset relative to the locale's first day of week.
+		const localeFirstDay = firstDayOfWeek(this.calLocale)
+		// firstDay.day() returns 0=Sun … 6=Sat; adjust for locale offset
+		const startOffset = (firstDay.day() - localeFirstDay + 7) % 7
+
+		const monthLabel = firstDay.format('MMMM YYYY')
+
+		// Build flat cell array: leading empties + actual days
+		const cells: Array<{ iso: string | null; day: number | null }> = []
+		for (let i = 0; i < startOffset; i++) cells.push({ iso: null, day: null })
+		for (let d = 1; d <= daysInMonth; d++) {
+			cells.push({ iso: `${year}-${String(month).padStart(2, '0')}-${String(d).padStart(2, '0')}`, day: d })
+		}
+		// Pad to a full last week
+		while (cells.length % 7 !== 0) cells.push({ iso: null, day: null })
+
+		// Group into 7-day rows for proper ARIA grid structure
+		const rows: Array<typeof cells> = []
+		for (let r = 0; r < cells.length; r += 7) rows.push(cells.slice(r, r + 7))
+
+		return html`
+			<div data-month="${ym}" class="flex flex-col">
+				<!-- Sticky month label -->
+				<div
+					part="month-label"
+					class="sticky top-0 z-10 bg-surface-default px-3 py-2 font-medium text-sm text-on-surface"
+				>
+					<slot name="month-label">${monthLabel}</slot>
+				</div>
+
+				<!-- Weekday header row -->
+				<div role="row" part="weekday" class="grid grid-cols-7 gap-0 px-3">
+					${weekdays.map(
+						d => html`<div role="columnheader" class="text-center text-xs text-on-surface-variant py-1">${d}</div>`,
+					)}
+				</div>
+
+				<!-- Day grid — each week is a row for ARIA grid conformance -->
+				<div part="grid" class="flex flex-col px-3 pb-4">
+					${repeat(
+						rows,
+						(_, i) => `${ym}-row-${i}`,
+						(row, ri) => html`
+							<div role="row" class="grid grid-cols-7">
+								${repeat(
+									row,
+									(_, ci) => `${ym}-${ri * 7 + ci}`,
+									cell => {
+										if (!cell.iso) return html`<div role="gridcell" aria-hidden="true" class="h-9"></div>`
+										return this.renderDay(cell.iso, cell.day!)
+									},
+								)}
+							</div>
+						`,
+					)}
+				</div>
+			</div>
+		`
+	}
+
+	private renderDay(iso: string, day: number) {
+		const disabled = this.isDisabled(iso)
+		const selected = this.isSelected(iso)
+		const rangeStart = this.isRangeStart(iso)
+		const rangeEnd = this.isRangeEnd(iso)
+		const inRange = this.isInRange(iso)
+		const inPreview = this.isInPreview(iso)
+		const isToday = this.isToday(iso)
+		const isEndpoint = rangeStart || rangeEnd
+
+		const parts = [
+			'day',
+			selected ? 'day-selected' : '',
+			rangeStart ? 'day-range-start' : '',
+			rangeEnd ? 'day-range-end' : '',
+			inRange ? 'day-in-range' : '',
+			inPreview ? 'day-preview' : '',
+			isToday ? 'day-today' : '',
+			disabled ? 'day-disabled' : '',
+		]
+			.filter(Boolean)
+			.join(' ')
+
+		// classMap keys must be single CSS class tokens (no spaces).
+		const classes = classMap({
+			'h-9': true,
+			'w-full': true,
+			flex: true,
+			'items-center': true,
+			'justify-center': true,
+			'text-sm': true,
+			'rounded-full': true,
+			'cursor-pointer': true,
+			'select-none': true,
+			'bg-primary-default': selected || isEndpoint,
+			'text-on-primary': selected || isEndpoint,
+			'bg-primary-container': inRange,
+			'text-on-primary-container': inRange,
+			'rounded-none': inRange || (inPreview && !selected),
+			'bg-primary-container/50': inPreview && !selected && !isEndpoint,
+			'text-on-surface': inPreview && !selected && !isEndpoint,
+			'font-semibold': isToday && !selected,
+			'ring-1': isToday && !selected,
+			'ring-primary-default': isToday && !selected,
+			'opacity-30': disabled,
+			'cursor-not-allowed': disabled,
+			'pointer-events-none': disabled,
+			'hover:bg-surface-variant': !disabled && !selected && !isEndpoint && !inRange && !inPreview,
+		})
+
+		return html`
+			<div
+				part="${parts}"
+				class="${classes}"
+				role="gridcell"
+				aria-label="${iso}"
+				aria-selected="${selected || isEndpoint || inRange ? 'true' : 'false'}"
+				aria-disabled="${disabled ? 'true' : 'false'}"
+				tabindex="${disabled ? '-1' : '0'}"
+				@click="${() => this.handleDayClick(iso)}"
+				@mouseenter="${() => this.handleDayHover(iso)}"
+				@keydown="${(e: KeyboardEvent) => this.handleKeyDown(e, iso)}"
+			>
+				${day}
+			</div>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-calendar': SchmancyCalendar
+	}
+}

package/src/calendar/index.ts

@@ -0,0 +1,2 @@
+export { SchmancyCalendar } from './calendar'
+export type { SchmancyCalendarInputEvent, SchmancyCalendarChangeEvent, SchmancyCalendarNavigateEvent } from './calendar'

package/src/card/actions.ts

@@ -8,15 +8,17 @@ import { customElement } from 'lit/decorators.js'
  */
 @customElement('schmancy-card-action')
 export default class SchmancyCardAction extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: flex;
-		gap: 0.5rem;
-		padding: 0.5rem 1rem;
-		align-items: center;
-		justify-content: flex-end;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: flex;
+				gap: 0.5rem;
+				padding: 0.5rem 1rem;
+				align-items: center;
+				justify-content: flex-end;
+			}
+		`,
+	]
 	protected render(): unknown {
 		return html`<slot></slot>`
 	}