fluentui-svelte 0.1.0

package/dist/components/date-picker/date-picker.svelte

@@ -0,0 +1,381 @@
+<script lang="ts">
+	import type { DatePickerProps } from './types.js';
+	import { Flyout, Button, Divider } from '../../index.js';
+	import { on } from 'svelte/events';
+	import { tick } from 'svelte';
+	import { PREFIX } from '../../internal/constants.js';
+	import { floating } from '../../internal/index.js';
+	import { flip, hide, offset, shift } from '@floating-ui/dom';
+	import DynamicCarousel from '../../internal/components/dynamic-carousel/dynamic-carousel.svelte';
+	import { CheckmarkRegular, DismissRegular } from 'fluentui-icons-svelte';
+
+	let {
+		format = 'dd/MM/yyyy',
+		value = $bindable(''),
+		open = $bindable(false),
+		hideYears = false,
+		hideMonths = false,
+		hideDays = false,
+		minYear = new Date().getFullYear() - 100,
+		maxYear = new Date().getFullYear() + 100,
+		disabledDates = [],
+		disabledMonths = [],
+		disabledYears = [],
+		ref = $bindable(),
+		wrapperRef = $bindable(),
+		wrapperAttributes,
+		inputElement = $bindable(),
+		inputProps,
+		popupLabel = 'Choose a date',
+		...attributes
+	}: DatePickerProps = $props();
+
+	const FALLBACK_ID = $props.id();
+	const POPUP_ID = `${PREFIX}datepicker-${FALLBACK_ID}-popup`;
+
+	let popupRef: HTMLElement | undefined = $state();
+
+	/** Closing always hands the focus back, so the keyboard never lands nowhere. */
+	function closePopup() {
+		open = false;
+		ref?.focus();
+	}
+
+	// Escape has to work from inside the popup too, and the popup is not a descendant
+	// of the trigger, so the listener goes on the document.
+	$effect(() => {
+		if (!open) return;
+
+		return on(document, 'keydown', (event: KeyboardEvent) => {
+			if (event.key !== 'Escape') return;
+			event.preventDefault();
+			closePopup();
+		});
+	});
+
+	// Move into the dialog on open: the first wheel, so the arrows work straight away.
+	$effect(() => {
+		if (!open || !popupRef) return;
+
+		tick().then(() => {
+			(popupRef?.querySelector<HTMLElement>('[role="listbox"]') ?? popupRef)?.focus();
+		});
+	});
+
+	type Column = 'month' | 'day' | 'year';
+
+	const MONTH_NAMES = [
+		'January',
+		'February',
+		'March',
+		'April',
+		'May',
+		'June',
+		'July',
+		'August',
+		'September',
+		'October',
+		'November',
+		'December'
+	];
+	const LABELS: Record<Column, string> = { month: 'Month', day: 'Day', year: 'Year' };
+
+	// Working selection (actual values). Kept in sync with `value` while the popup is closed,
+	// so each open starts from the committed value and Cancel/dismiss discards edits.
+	let month = $state(new Date().getMonth()); // 0-11
+	let day = $state(new Date().getDate()); // 1-31 (raw intent; clamped for display via effectiveDay)
+	let year = $state(new Date().getFullYear());
+
+	// Descending list of selectable years within [minYear, maxYear].
+	const yearsList = $derived(Array.from({ length: Math.max(0, maxYear - minYear) + 1 }, (_, i) => maxYear - i));
+	const yearStrings = $derived(yearsList.map(String));
+
+	// Days available in the selected month/year (leap-year aware): new Date(y, m + 1, 0) === last day.
+	const daysInMonth = $derived(new Date(year, month + 1, 0).getDate());
+	const effectiveDay = $derived(Math.min(day, daysInMonth));
+	const dayList = $derived(Array.from({ length: daysInMonth }, (_, i) => (i + 1).toString().padStart(2, '0')));
+
+	const yearIdx = $derived(Math.max(0, yearsList.indexOf(year)));
+
+	// The trigger shows the committed value; `true` once `value` holds a full date.
+	const hasValue = $derived(/^\d{4}-\d{2}-\d{2}$/.test(value ?? ''));
+
+	// Parsed committed value used for the trigger label, so the trigger reflects `value`
+	const committed = $derived(parseValue(value));
+
+	// Columns to render, ordered by `format` and filtered by the hide* flags.
+	const columns = $derived.by<Column[]>(() => {
+		const base: Column[] = format === 'dd/MM/yyyy' ? ['day', 'month', 'year'] : ['month', 'day', 'year'];
+		const hidden: Record<Column, boolean> = { month: hideMonths, day: hideDays, year: hideYears };
+		return base.filter((c) => !hidden[c]);
+	});
+
+	// --- disabled** → disabled carousel indices (arrays of real, 0-based indices) ---
+	const disabledYearsSet = $derived(new Set(disabledYears.map((d) => d.getFullYear())));
+	const disabledYearIdx = $derived(yearsList.flatMap((y, i) => (disabledYearsSet.has(y) ? [i] : [])));
+	const disabledMonthIdx = $derived(
+		MONTH_NAMES.flatMap((_, i) =>
+			disabledMonths.some((d) => d.getFullYear() === year && d.getMonth() === i) ? [i] : []
+		)
+	);
+	const disabledDayIdx = $derived(
+		dayList.flatMap((_, i) =>
+			disabledDates.some((d) => d.getFullYear() === year && d.getMonth() === month && d.getDate() === i + 1) ? [i] : []
+		)
+	);
+
+	// Whether the currently composed date lands on a disabled value (blocks Confirm as a backstop;
+	// the carousels already skip disabled items while scrolling).
+	const isSelectionDisabled = $derived(
+		disabledYearsSet.has(year) ||
+			disabledMonths.some((d) => d.getFullYear() === year && d.getMonth() === month) ||
+			disabledDates.some((d) => d.getFullYear() === year && d.getMonth() === month && d.getDate() === effectiveDay)
+	);
+
+	const pad = (n: number) => n.toString().padStart(2, '0');
+
+	function parseValue(v: string) {
+		const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(v ?? '');
+		const t = new Date();
+		const raw = m ? { y: +m[1], mo: +m[2] - 1, d: +m[3] } : { y: t.getFullYear(), mo: t.getMonth(), d: t.getDate() };
+		const y = Math.min(maxYear, Math.max(minYear, raw.y));
+		const mo = Math.min(11, Math.max(0, raw.mo));
+		const dim = new Date(y, mo + 1, 0).getDate();
+		const d = Math.min(dim, Math.max(1, raw.d));
+		return { y, mo, d };
+	}
+
+	// Keep the working selection synced with `value` while the popup is closed.
+	$effect(() => {
+		if (!open) {
+			const { y, mo, d } = parseValue(value);
+			year = y;
+			month = mo;
+			day = d;
+		}
+	});
+
+	function confirm() {
+		value = `${year}-${pad(month + 1)}-${pad(effectiveDay)}`;
+		closePopup();
+	}
+
+	function cancel() {
+		closePopup();
+	}
+
+	// Trigger label per column
+	function display(col: Column): string {
+		if (!hasValue) return LABELS[col];
+		if (col === 'month') return MONTH_NAMES[committed.mo];
+		if (col === 'day') return pad(committed.d);
+		return String(committed.y);
+	}
+</script>
+
+<div class="fs-date-picker-wrapper" bind:this={wrapperRef} {...wrapperAttributes}>
+	<!-- A real button: Enter and Space, the disabled state and High Contrast styling all
+	     come for free, and the hidden input cannot live inside it. -->
+	<button
+		type="button"
+		class="fs-date-picker"
+		aria-haspopup="dialog"
+		aria-expanded={open}
+		aria-controls={open ? POPUP_ID : undefined}
+		onclick={() => (open = !open)}
+		bind:this={ref}
+		{...attributes}
+	>
+		{#each columns as col, idx (col)}
+			{#if idx > 0}
+				<Divider as="span" vertical aria-hidden="true" />
+			{/if}
+			<span class="picker-content">{display(col)}</span>
+		{/each}
+	</button>
+
+	<!-- Carries the value into a form. `hidden` keeps it out of the tab order and out of
+	     the accessibility tree, and a hidden control is still submitted. -->
+	<input type="date" hidden {value} bind:this={inputElement} {...inputProps} />
+</div>
+
+{#if open}
+	<Flyout
+		{@attach floating(ref, {
+			placement: 'bottom',
+			middleware: [
+				offset(({ rects }) => {
+					return -rects.reference.height / 2 - rects.floating.height / 2;
+				}),
+				flip(),
+				shift(),
+				hide()
+			],
+			strategy: 'fixed'
+		})}
+		reference={ref}
+		id={POPUP_ID}
+		role="dialog"
+		aria-modal="true"
+		aria-label={popupLabel}
+		tabindex={-1}
+		bind:ref={popupRef}
+		class="date-picker-flyout"
+	>
+		<div class="carousel-wrapper">
+			<div class="selection-bar"></div>
+			{#each columns as col (col)}
+				<div class="carousel-col col-{col}">
+					{#if col === 'month'}
+						<DynamicCarousel
+							values={MONTH_NAMES}
+							selectedIndex={month}
+							disabledIndices={disabledMonthIdx}
+							onSelected={(_, i) => (month = i)}
+						/>
+					{:else if col === 'day'}
+						{#key `${year}-${month}`}
+							<DynamicCarousel
+								values={dayList}
+								selectedIndex={effectiveDay - 1}
+								disabledIndices={disabledDayIdx}
+								onSelected={(_, i) => (day = i + 1)}
+							/>
+						{/key}
+					{:else}
+						<DynamicCarousel
+							values={yearStrings}
+							selectedIndex={yearIdx}
+							disabledIndices={disabledYearIdx}
+							onSelected={(_, i) => (year = yearsList[i])}
+						/>
+					{/if}
+				</div>
+			{/each}
+		</div>
+		<div class="action-bar">
+			<Button class="justify" appearance="subtle" aria-label="Confirm" disabled={isSelectionDisabled} onclick={confirm}>
+				<CheckmarkRegular />
+			</Button>
+			<Button class="justify" appearance="subtle" aria-label="Cancel" onclick={cancel}>
+				<DismissRegular />
+			</Button>
+		</div>
+	</Flyout>
+{/if}
+
+<style>
+	/* Layout-neutral: the button keeps the box the wrapper used to have. */
+	.fs-date-picker-wrapper {
+		display: contents;
+	}
+	.fs-date-picker {
+		display: flex;
+		position: relative;
+		border-radius: var(--fs-control-border-radius);
+		font-size: var(--fs-body-font-size);
+		line-height: var(--fs-body-line-height);
+		color: var(--fs-text-primary);
+		background: var(--fs-control-fill-default);
+		border: none;
+		padding: 1px;
+		cursor: pointer;
+		outline: none;
+		user-select: none;
+		&:after {
+			content: '';
+			inset: 0;
+			position: absolute;
+			padding: 0.063rem;
+			mask:
+				linear-gradient(#fff 0 0) content-box,
+				linear-gradient(#fff 0 0);
+			mask-composite: exclude;
+			border-radius: inherit;
+		}
+		&::after {
+			background: var(--fs-elevation-control-border);
+		}
+		&:hover {
+			background: var(--fs-control-fill-secondary);
+		}
+		&:active {
+			color: var(--fs-text-secondary);
+			&::after {
+				background: var(--fs-control-stroke-default);
+			}
+		}
+		&:disabled,
+		&.disabled {
+			background: var(--fs-control-fill-disabled) !important;
+			color: var(--fs-text-disabled) !important;
+			&::after {
+				background: var(--fs-control-stroke-default) !important;
+			}
+		}
+		& .picker-content {
+			display: flex;
+			align-items: center;
+			padding: 0.375rem 1.626rem 0.5rem 1.626rem;
+			&:first-child {
+				padding-right: 2rem;
+			}
+		}
+	}
+	:global(.date-picker-flyout) {
+		flex-direction: column;
+		position: fixed !important;
+		top: 0;
+		left: 0;
+		max-width: min-content;
+		padding: 0 !important;
+		z-index: 10;
+		& .wrapper {
+			gap: 0 !important;
+		}
+		& .carousel-wrapper {
+			display: flex;
+			position: relative;
+			width: max-content;
+			min-width: max-content;
+			padding: 0 0.4rem !important;
+		}
+		& .carousel-col {
+			&.col-month {
+				width: 130px;
+			}
+			&.col-day {
+				width: 60px;
+			}
+			&.col-year {
+				width: 80px;
+			}
+			& :global(.fs-dynamic-carousel) {
+				width: 100%;
+			}
+			&:not(:last-child) :global(.fs-dynamic-carousel-track) {
+				border-right: 1px solid var(--fs-control-stroke-default);
+			}
+		}
+		& .selection-bar {
+			position: absolute;
+			top: 50%;
+			left: 0.4rem;
+			width: calc(100% - 0.8rem);
+			height: 40px;
+			background: var(--fs-accent-fill-default);
+			transform: translateY(-50%);
+			border-radius: var(--fs-control-border-radius);
+			z-index: -1;
+		}
+		& .action-bar {
+			display: flex;
+			width: 100%;
+			padding: 0.2rem;
+			border-top: 1px solid var(--fs-control-stroke-default);
+			& :global(.justify) {
+				flex: 1;
+			}
+		}
+	}
+</style>

package/dist/components/date-picker/date-picker.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DatePickerProps } from './types.ts';
+declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "ref" | "value" | "wrapperRef" | "open" | "inputElement">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/date-picker/docs/llms.md

@@ -0,0 +1,52 @@
+# Date Picker
+
+An input for selecting a date from carousel-style day, month, and year columns. The value uses the `YYYY-MM-DD` format.
+
+## Usage
+
+```svelte
+<script>
+	import { DatePicker } from 'fluentui-svelte';
+
+	let value = $state('');
+</script>
+
+<DatePicker bind:value />
+```
+
+## Examples
+
+### Date Format
+
+Use the `format` prop to switch between `dd/MM/yyyy` and `MM/dd/yyyy`.
+
+```svelte
+<DatePicker format="dd/MM/yyyy" />
+<DatePicker format="MM/dd/yyyy" />
+```
+
+### Hiding Columns
+
+Use `hideDays`, `hideMonths`, or `hideYears` to hide individual selector columns (for example, a month/year-only picker).
+
+```svelte
+<DatePicker hideDays />
+```
+
+## Component Props
+
+| Name             | Type                           | Description                                                                   |
+| ---------------- | ------------------------------ | ----------------------------------------------------------------------------- |
+| `value`          | bindable `string`              | Selected date as `YYYY-MM-DD` (matches the underlying `<input type="date">`). |
+| `format`         | `'MM/dd/yyyy' \| 'dd/MM/yyyy'` | The display format of the date. Default: `'dd/MM/yyyy'`.                      |
+| `open`           | bindable `boolean`             | Whether the picker flyout is open.                                            |
+| `hideYears`      | `boolean`                      | Hide the year selector column.                                                |
+| `hideMonths`     | `boolean`                      | Hide the month selector column.                                               |
+| `hideDays`       | `boolean`                      | Hide the day selector column.                                                 |
+| `minYear`        | `number`                       | Earliest selectable year. Default: current year − 100.                        |
+| `maxYear`        | `number`                       | Latest selectable year. Default: current year.                                |
+| `disabledDates`  | `Date[]`                       | Specific days (year-month-day) that cannot be selected.                       |
+| `disabledMonths` | `Date[]`                       | Specific months (by month + year) that cannot be selected.                    |
+| `disabledYears`  | `Date[]`                       | Specific years (by year) that cannot be selected.                             |
+| `element`        | bindable `HTMLElement`         | The DOM reference of the date picker root element.                            |
+| `inputElement`   | bindable `HTMLInputElement`    | The DOM reference of the underlying input element.                            |

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1 @@
+export { default as DatePicker } from './date-picker.svelte';

package/dist/components/date-picker/index.js

@@ -0,0 +1 @@
+export { default as DatePicker } from './date-picker.svelte';

package/dist/components/date-picker/types.d.ts

@@ -0,0 +1,74 @@
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes } from 'svelte/elements';
+/** @propsmith DatePickerProps */
+export type DatePickerProps = {
+    /** Selected date as `YYYY-MM-DD` (matches the underlying `<input type="date">`).
+     * @default ''
+     * @bindable
+     */
+    value?: string;
+    /** The order the three columns are laid out in.
+     * @default 'dd/MM/yyyy'
+     */
+    format?: 'MM/dd/yyyy' | 'dd/MM/yyyy';
+    /** Controls the open state of the picker.
+     * @default false
+     * @bindable
+     */
+    open?: boolean;
+    /** Removes the year column.
+     * @default false
+     */
+    hideYears?: boolean;
+    /** Removes the month column.
+     * @default false
+     */
+    hideMonths?: boolean;
+    /** Removes the day column.
+     * @default false
+     */
+    hideDays?: boolean;
+    /** The first year offered by the year column.
+     * @default Current - 100
+     */
+    minYear?: number;
+    /** The last year offered by the year column.
+     * @default Current + 100
+     */
+    maxYear?: number;
+    /** Specific days (year-month-day) that cannot be selected.
+     * @default []
+     */
+    disabledDates?: Date[];
+    /** Specific months (by month + year) that cannot be selected.
+     * @default []
+     */
+    disabledMonths?: Date[];
+    /** Specific years (by year) that cannot be selected.
+     * @default []
+     */
+    disabledYears?: Date[];
+    /** The DOM reference of the trigger button.
+     * @bindable
+     */
+    ref?: HTMLButtonElement;
+    /** The DOM reference of the element wrapping the trigger and its input.
+     * @bindable
+     */
+    wrapperRef?: HTMLDivElement;
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
+     */
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
+    /** The DOM reference of the underlying input element.
+     * @bindable
+     */
+    inputElement?: HTMLInputElement;
+    /** HTML attributes for the underlying input element. Give it a `name` to submit the
+     * value with a form.
+     */
+    inputProps?: HTMLInputAttributes;
+    /** The accessible name of the popup, which is announced as a dialog.
+     * @default 'Choose a date'
+     */
+    popupLabel?: string;
+} & HTMLButtonAttributes;

package/dist/components/date-picker/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/dialog/dialog-actions.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { getTabspotAttributes } from 'tabspot';
+	import type { DialogActionsProps } from './types.js';
+
+	let { ref = $bindable(), position = 'end', fluid, children }: DialogActionsProps = $props();
+
+	// The bar is one tab stop holding a row of buttons: without the mover the root would
+	// take the tab stop and then offer no way to reach the rest of the buttons.
+	const tabspotAttributes = getTabspotAttributes({
+		root: {},
+		mover: { axis: 'horizontal' }
+	});
+</script>
+
+<div class={['dialog-actions', `justify-${position}`, { fluid }]} bind:this={ref} {...tabspotAttributes}>
+	{@render children?.()}
+</div>
+
+<style>
+	.dialog-actions {
+		grid-row: 3 / 3;
+		display: flex;
+		padding: 1.4rem 2rem;
+		gap: 0.5rem;
+		border-top: 1px solid var(--fs-card-stroke-default);
+		background: var(--fs-solid-background-base);
+		&.justify-start {
+			justify-content: flex-start;
+		}
+		&.justify-center {
+			justify-content: center;
+		}
+		&.justify-end {
+			justify-content: flex-end;
+		}
+	}
+</style>

package/dist/components/dialog/dialog-actions.svelte.d.ts

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

package/dist/components/dialog/dialog-content.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { DialogContentProps } from './types.js';
+
+	let { children }: DialogContentProps = $props();
+</script>
+
+<div class="dialog-content">
+	{@render children?.()}
+</div>
+
+<style>
+	.dialog-content {
+		grid-row: 2 / 2;
+		padding: 1.4rem 2rem 2rem 2rem;
+		overflow-y: auto;
+	}
+</style>

package/dist/components/dialog/dialog-content.svelte.d.ts

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

package/dist/components/dialog/dialog-surface.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { onClickOutside } from 'runed';
+	import type { DialogSurfaceProps } from './types.js';
+	import { getDialogContext } from './dialog.svelte.js';
+	import { Button } from '../../index.js';
+	import DismissFilled from 'fluentui-icons-svelte/DismissFilled.svelte';
+
+	let { ref = $bindable(), children, ...attributes }: DialogSurfaceProps = $props();
+
+	const CONTEXT = getDialogContext();
+
+	if (!CONTEXT) {
+		throw new Error('DialogSurface must be used within a Dialog component');
+	}
+
+	const { config, methods, state: _state } = CONTEXT;
+
+	const { closeDialog } = methods;
+
+	const { type } = config;
+
+	if (type !== 'alert') {
+		onClickOutside(
+			() => ref,
+			() => closeDialog()
+		);
+	}
+
+	$effect(() => {
+		if (!ref) return;
+		_state.dialogRef = ref;
+	});
+</script>
+
+<dialog open={_state.open} class="fs-dialog" aria-labelledby={_state.titleId} bind:this={ref} {...attributes}>
+	<div class="dialog-wrapper">
+		{#if config.type === 'non-modal'}
+			<Button class="close-icon" appearance="subtle" onclick={() => methods.closeDialog()} aria-label="Close dialog">
+				<DismissFilled />
+			</Button>
+		{/if}
+		{@render children?.()}
+	</div>
+</dialog>
+
+<style>
+	.fs-dialog {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		padding: 0;
+		transform: translate(-50%, -50%);
+		border: unset;
+		z-index: 1100;
+		width: 35vw;
+		min-width: 20rem;
+		overflow: visible;
+		background: var(--fs-solid-background-base);
+		border-radius: var(--fs-control-overlay-border-radius);
+		&::backdrop {
+			background-color: var(--fs-smoke-background-default);
+			backdrop-filter: blur(0.25rem);
+		}
+		& .dialog-wrapper {
+			position: relative;
+			box-shadow: var(--fs-shadow-dialog);
+			border-radius: var(--fs-control-overlay-border-radius);
+			border: 1px solid var(--fs-control-surface-stroke-flyout);
+			display: grid;
+			grid-template-rows: auto 1fr;
+			width: 100%;
+			max-height: 95vh;
+			overflow: hidden;
+			background: var(--fs-layer-alt);
+			&::before {
+				content: '';
+				position: absolute;
+				background: var(--fs-acrilic-noise);
+				background-size: 2.5rem;
+				filter: grayscale(1);
+				opacity: 0.065;
+				border-radius: calc(var(--fs-control-overlay-border-radius) - 0.063rem);
+				pointer-events: none;
+				inset: 0;
+				z-index: 0;
+			}
+			& :global(.close-icon) {
+				position: absolute;
+				padding: 0.5rem;
+				top: 0.5rem;
+				right: 0.5rem;
+			}
+		}
+	}
+</style>

package/dist/components/dialog/dialog-surface.svelte.d.ts

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