fluentui-svelte 0.1.0

package/dist/components/calendar-view/calendar-view-item.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+	import type { CalendarViewItemProps } from './types.js';
+
+	let {
+		selected,
+		disabled,
+		current,
+		outOfRange,
+		blackout,
+		rangePosition,
+		variant = 'day',
+		header = '',
+		children,
+		buttonAttributes,
+		...attributes
+	}: CalendarViewItemProps = $props();
+</script>
+
+<div
+	class={[
+		'fs-calendar-view-item',
+		`variant-${variant === 'day' ? 'day' : 'month-year'}`,
+		rangePosition && `in-range range-${rangePosition}`
+	]}
+	role="gridcell"
+	aria-selected={!!selected || rangePosition !== undefined}
+	{...attributes}
+>
+	<button
+		type="button"
+		class={['calendar-item-button', { selected, disabled, current, blackout }, outOfRange && 'out-of-range']}
+		aria-disabled={disabled}
+		{disabled}
+		{...buttonAttributes}
+	>
+		{#if header}
+			<small>{header}</small>
+		{/if}
+		{@render children?.()}
+	</button>
+</div>
+
+<style>
+	.fs-calendar-view-item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 0;
+
+		/* ==== range band — tweak me ====================================================
+		   Painted on the cell rather than on the button, so it runs edge to edge while
+		   the button stays a circle inside it. Rows are separate grids, so a range that
+		   spans weeks breaks at the row edge, which is what a calendar should look like.
+		   Logical radii, so the band rounds on the correct side in RTL too. */
+		&.in-range {
+			background-color: color-mix(in srgb, var(--fs-accent-fill-default), transparent 88%);
+		}
+		&.range-start {
+			border-start-start-radius: 999px;
+			border-end-start-radius: 999px;
+		}
+		&.range-end {
+			border-start-end-radius: 999px;
+			border-end-end-radius: 999px;
+		}
+		/* ==== /range band ============================================================ */
+
+		& .calendar-item-button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: var(--fs-body2-font-size);
+			color: var(--fs-text-primary);
+			border: 1px solid transparent;
+			border-radius: 999px;
+			background: var(--fs-fill-subtle-transparent);
+			cursor: pointer;
+			position: relative;
+			outline: none;
+			gap: 0.5rem;
+			width: 100%;
+			user-select: none;
+			aspect-ratio: 1;
+			&:hover {
+				background-color: var(--fs-subtle-fill-secondary);
+			}
+			&:focus-visible {
+				outline: 0.125rem var(--fs-focus-stroke-outer) solid;
+				outline-offset: 0.063rem;
+			}
+			&:active {
+				color: var(--fs-text-tertiary);
+				background: var(--fs-subtle-fill-tertiary);
+				&::after {
+					background: var(--fs-control-stroke-default);
+				}
+			}
+			&.out-of-range {
+				color: var(--fs-text-secondary);
+				&:active {
+					color: var(--fs-text-tertiary);
+				}
+			}
+			&.disabled {
+				cursor: not-allowed;
+				color: var(--fs-text-disabled);
+				background-color: var(--fs-subtle-fill-disabled);
+				&.blackout:after {
+					content: none;
+				}
+			}
+			&.blackout {
+				pointer-events: none;
+				&::after {
+					content: '';
+					transform-origin: center;
+					position: absolute;
+					transform: matrix(-0.71, -0.71, -0.71, 0.71, 0, 0);
+					border-block-start: 1px solid var(--fs-control-strong-stroke-default);
+					width: 70%;
+					height: 1px;
+				}
+			}
+			&.selected {
+				color: var(--fs-accent-text-primary);
+				border: 1px solid var(--fs-accent-fill-default);
+				&:hover {
+					background-color: var(--fs-subtle-fill-secondary);
+					color: var(--fs-accent-text-secondary);
+				}
+				&:active {
+					background-color: var(--fs-subtle-fill-tertiary);
+					color: var(--fs-accent-text-tertiary);
+				}
+				&.disabled {
+					background-color: var(--fs-subtle-fill-disabled);
+					color: var(--fs-text-disabled);
+				}
+				&.current {
+					box-shadow: inset 0 0 0 1px var(--fs-text-on-accent-primary);
+				}
+				&.blackout::after {
+					border-block-start-color: var(--fs-accent-tertiary);
+				}
+			}
+			&.current {
+				color: var(--fs-text-on-accent-primary);
+				background-color: var(--fs-accent-fill-default);
+				&:hover {
+					background-color: var(--fs-accent-fill-secondary);
+					color: var(--fs-text-on-accent-secondary);
+				}
+				&:active {
+					background-color: var(--fs-accent-fill-tertiary);
+					color: var(--fs-text-on-accent-secondary);
+				}
+				&.disabled {
+					background-color: var(--fs-accent-fill-disabled);
+					color: var(--fs-text-disabled);
+				}
+				&.blackout::after {
+					border-block-start-color: var(--fs-accent-tertiary);
+				}
+			}
+			& small {
+				pointer-events: none;
+				position: absolute;
+				inline-size: 100%;
+				text-align: center;
+				color: inherit;
+				line-height: 12px;
+				font-size: var(--fs-caption2-font-size);
+				font-weight: 500;
+				inset: 0;
+			}
+		}
+		&.variant-month-year small {
+			inset-block-start: 9.58px;
+		}
+	}
+</style>

package/dist/components/calendar-view/calendar-view-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarViewItemProps } from './types.js';
+declare const CalendarViewItem: import("svelte").Component<CalendarViewItemProps, {}, "">;
+type CalendarViewItem = ReturnType<typeof CalendarViewItem>;
+export default CalendarViewItem;

package/dist/components/calendar-view/calendar-view-months.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { circOut } from 'svelte/easing';
+	import CalendarViewItem from './calendar-view-item.svelte';
+	import {
+		compareDates,
+		getCalendarMonths,
+		getCalendarViewContext,
+		getMonthLocale,
+		indexOfDate,
+		rangeCovers
+	} from './calendar-view.svelte.js';
+	import { createCalendarNavigation, MONTH_GRID } from './calendar-view-grid.js';
+	import { getGlobalFSContext } from '../../providers/fluentui-svelte/fluentui-svelte.js';
+	import { getCSSDuration } from '../../internal/index.js';
+
+	const CalendarContext = getCalendarViewContext();
+
+	if (!CalendarContext) {
+		throw new Error('CalendarViewMonths must be used within a CalendarView');
+	}
+
+	const { selectMonth, updatePage } = CalendarContext.methods;
+
+	let { locale, minDate, headers, maxDate, selectionMode } = CalendarContext.config;
+
+	let { value, range, page, pageAnimationDirection } = $derived(CalendarContext.state);
+
+	let calendarMonths = $derived(getCalendarMonths(page));
+
+	let bodyElement: HTMLElement | null = $state(null);
+
+	let pageAnimationDuration: number = $derived(getCSSDuration ? getCSSDuration('--fs-normal-duration') : 333);
+
+	const getFirstFocusableMonth = () =>
+		calendarMonths.find(
+			(d) =>
+				compareDates(d, page, 'year') &&
+				(!minDate ||
+					new Date(minDate.getFullYear(), minDate.getMonth(), 1) <= new Date(d.getFullYear(), d.getMonth(), 1)) &&
+				(!maxDate || maxDate >= d)
+		);
+
+	const isDisabled = (month: Date) => {
+		return (
+			(minDate && minDate.getMonth() > month.getMonth() && minDate.getFullYear() === month.getFullYear()) ||
+			(maxDate && maxDate < month)
+		);
+	};
+
+	const isSelected = (month: Date) => {
+		// A month the range merely passes through counts as selected: it is one cell
+		// standing for the whole month, and the band belongs to the day view.
+		if (selectionMode === 'range') return rangeCovers(month, range, 'month');
+
+		return (
+			value !== null &&
+			(Array.isArray(value) ? indexOfDate(value, month, 'month') > -1 : compareDates(value, month, 'month'))
+		);
+	};
+
+	/** What the grid as a whole is showing. */
+	let pageLabel = $derived(new Intl.DateTimeFormat(locale, { year: 'numeric' }).format(page));
+
+	/** "January 2026" rather than a bare "Jan". */
+	const monthLabel = (month: Date) => new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long' }).format(month);
+
+	const globalContext = getGlobalFSContext();
+
+	const navigate = createCalendarNavigation({
+		grid: MONTH_GRID,
+		body: () => bodyElement,
+		page: () => page,
+		disabled: (month) => !!isDisabled(month),
+		blackout: () => false,
+		updatePage
+	});
+
+	// Tabspot reports what it cannot decide — running out of cells, or landing on a
+	// month this page does not own — and the calendar answers by turning the page.
+	$effect(() => {
+		const root = bodyElement?.closest<HTMLElement>('[data-calendar-grid]');
+		const instance = globalContext?.state.tabspotInstance;
+
+		if (!root || !instance) return;
+
+		return instance.subscribe(root, navigate);
+	});
+</script>
+
+{#key page}
+	<div
+		bind:this={bodyElement}
+		class="fs-calendar-view-months"
+		data-calendar-page
+		role="grid"
+		aria-label={pageLabel}
+		aria-multiselectable={selectionMode !== 'single' || undefined}
+		in:fly={{
+			opacity: 1,
+			duration: pageAnimationDirection !== 'neutral' ? pageAnimationDuration : 0,
+			easing: circOut,
+			y: pageAnimationDirection === 'neutral' ? 0 : pageAnimationDirection === 'up' ? -295 : 295
+		}}
+		out:fly={{
+			opacity: 0.5,
+			duration: pageAnimationDirection !== 'neutral' ? pageAnimationDuration : 0,
+			easing: circOut,
+			y: pageAnimationDirection === 'neutral' ? 0 : pageAnimationDirection === 'up' ? 295 : -295
+		}}
+	>
+		{#each Array(4) as _, row (row)}
+			<div class="fs-calendar-view-row" role="row">
+				{#each calendarMonths.slice(row * 4, row * 4 + 4) as month, i (row * 4 + i)}
+					{@const selected = isSelected(month)}
+					{@const inYear = month.getFullYear() === page.getFullYear()}
+					{@const firstFocusableMonth = getFirstFocusableMonth()}
+					{@const disabled = isDisabled(month)}
+					{@const header = (headers && month.getMonth() === 0 && month.getFullYear().toString()) || ''}
+
+					<CalendarViewItem
+						{disabled}
+						{header}
+						{selected}
+						variant="monthYear"
+						outOfRange={!inYear}
+						current={compareDates(month, new Date(), 'month')}
+						buttonAttributes={{
+							tabindex: firstFocusableMonth && compareDates(firstFocusableMonth, month, 'month') ? 0 : -1,
+							'aria-label': monthLabel(month),
+							'data-date': month.getTime(),
+							onclick: (e: MouseEvent) => {
+								selectMonth(e, month);
+							}
+						}}
+					>
+						{getMonthLocale(month.getMonth(), {
+							locale,
+							format: 'short'
+						})}
+					</CalendarViewItem>
+				{/each}
+			</div>
+		{/each}
+	</div>
+{/key}
+
+<style>
+	.fs-calendar-view-months {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		inline-size: 100%;
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		padding: 0.5rem;
+		& .fs-calendar-view-row {
+			display: grid;
+			grid-template-columns: repeat(4, 1fr);
+			grid-auto-rows: 1fr;
+			grid-gap: 0.5rem;
+		}
+	}
+</style>

package/dist/components/calendar-view/calendar-view-months.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CalendarViewMonths: import("svelte").Component<Record<string, never>, {}, "">;
+type CalendarViewMonths = ReturnType<typeof CalendarViewMonths>;
+export default CalendarViewMonths;

package/dist/components/calendar-view/calendar-view-years.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { circOut } from 'svelte/easing';
+	import CalendarViewItem from './calendar-view-item.svelte';
+	import {
+		compareDates,
+		getCalendarViewContext,
+		getCalendarYears,
+		indexOfDate,
+		rangeCovers
+	} from './calendar-view.svelte.js';
+	import { createCalendarNavigation, YEAR_GRID } from './calendar-view-grid.js';
+	import { getGlobalFSContext } from '../../providers/fluentui-svelte/fluentui-svelte.js';
+	import { getCSSDuration } from '../../internal/index.js';
+
+	const CalendarContext = getCalendarViewContext();
+
+	if (!CalendarContext) {
+		throw new Error('CalendarViewYears must be used within a CalendarView');
+	}
+
+	const { selectYear, updatePage } = CalendarContext.methods;
+
+	let { locale, minDate, maxDate, selectionMode } = CalendarContext.config;
+
+	let { value, range, page, pageAnimationDirection } = $derived(CalendarContext.state);
+
+	let calendarYears = $derived(getCalendarYears(page));
+
+	let bodyElement: HTMLElement | null = $state(null);
+
+	let pageAnimationDuration = $derived(getCSSDuration ? getCSSDuration('--fs-normal-duration') : 333);
+
+	const getFirstFocusableYear = () =>
+		calendarYears.find(
+			(d) =>
+				compareDates(d, page, 'decade') &&
+				(!minDate || minDate.getFullYear() <= d.getFullYear()) &&
+				(!maxDate || maxDate >= d)
+		);
+
+	const isDisabled = (year: Date) => {
+		return (minDate && minDate.getFullYear() > year.getFullYear()) || (maxDate && maxDate < year);
+	};
+
+	const isSelected = (year: Date) => {
+		// Same reading as the month view: the cell stands for the whole year, so the
+		// range only has to touch it.
+		if (selectionMode === 'range') return rangeCovers(year, range, 'year');
+
+		return (
+			value !== null &&
+			(Array.isArray(value) ? indexOfDate(value, year, 'year') > -1 : compareDates(value, year, 'year'))
+		);
+	};
+
+	/** The decade the grid is showing, e.g. "2020 – 2029". */
+	let pageLabel = $derived.by(() => {
+		const start = Math.floor(page.getFullYear() / 10) * 10;
+
+		return new Intl.DateTimeFormat(locale, { year: 'numeric' }).formatRange(
+			new Date(start, 0, 1),
+			new Date(start + 9, 0, 1)
+		);
+	});
+
+	const yearLabel = (year: Date) => new Intl.DateTimeFormat(locale, { year: 'numeric' }).format(year);
+
+	const globalContext = getGlobalFSContext();
+
+	const navigate = createCalendarNavigation({
+		grid: YEAR_GRID,
+		body: () => bodyElement,
+		page: () => page,
+		disabled: (year) => !!isDisabled(year),
+		blackout: () => false,
+		updatePage
+	});
+
+	// Tabspot reports what it cannot decide — running out of cells, or landing on a
+	// year this page does not own — and the calendar answers by turning the page.
+	$effect(() => {
+		const root = bodyElement?.closest<HTMLElement>('[data-calendar-grid]');
+		const instance = globalContext?.state.tabspotInstance;
+
+		if (!root || !instance) return;
+
+		return instance.subscribe(root, navigate);
+	});
+</script>
+
+{#key page}
+	<div
+		bind:this={bodyElement}
+		class="fs-calendar-view-months"
+		data-calendar-page
+		role="grid"
+		aria-label={pageLabel}
+		aria-multiselectable={selectionMode !== 'single' || undefined}
+		in:fly={{
+			opacity: 1,
+			duration: pageAnimationDirection !== 'neutral' ? pageAnimationDuration : 0,
+			easing: circOut,
+			y: pageAnimationDirection === 'neutral' ? 0 : pageAnimationDirection === 'up' ? -155 : 155
+		}}
+		out:fly={{
+			opacity: 0.5,
+			duration: pageAnimationDirection !== 'neutral' ? pageAnimationDuration : 0,
+			easing: circOut,
+			y: pageAnimationDirection === 'neutral' ? 0 : pageAnimationDirection === 'up' ? 155 : -155
+		}}
+	>
+		{#each Array(4) as _, row (row)}
+			<div class="fs-calendar-view-row" role="row">
+				{#each calendarYears.slice(row * 4, row * 4 + 4) as year, i (row * 4 + i)}
+					{@const selected = isSelected(year)}
+					{@const inDecade = compareDates(year, page, 'decade')}
+					{@const firstFocusableYear = getFirstFocusableYear()}
+					{@const disabled = isDisabled(year)}
+
+					<CalendarViewItem
+						{disabled}
+						{selected}
+						variant="monthYear"
+						outOfRange={!inDecade}
+						current={compareDates(year, new Date(), 'year')}
+						buttonAttributes={{
+							tabindex: firstFocusableYear && compareDates(firstFocusableYear, year, 'year') ? 0 : -1,
+							'aria-label': yearLabel(year),
+							'data-date': year.getTime(),
+							onclick: (e: MouseEvent) => {
+								selectYear(e, year);
+							}
+						}}
+					>
+						{year.getFullYear()}
+					</CalendarViewItem>
+				{/each}
+			</div>
+		{/each}
+	</div>
+{/key}
+
+<style>
+	.fs-calendar-view-months {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		inline-size: 100%;
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		padding: 0.5rem;
+		& .fs-calendar-view-row {
+			display: grid;
+			grid-template-columns: repeat(4, 1fr);
+			grid-auto-rows: 1fr;
+			grid-gap: 0.5rem;
+		}
+	}
+</style>

package/dist/components/calendar-view/calendar-view-years.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CalendarViewYears: import("svelte").Component<Record<string, never>, {}, "">;
+type CalendarViewYears = ReturnType<typeof CalendarViewYears>;
+export default CalendarViewYears;