fluentui-svelte 0.1.0

package/dist/components/textarea/textarea.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import { PREFIX } from '../../internal/constants.js';
+	import { invokeHandlers } from '../../internal/index.js';
+	import type { TextAreaProps } from './types.js';
+
+	const FALLBACK_ID = $props.id();
+	const COMPONENT_NAME = 'textarea';
+	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
+
+	let {
+		id = ID,
+		name = id,
+		value = $bindable(''),
+		ref = $bindable(),
+		resize = 'vertical',
+		style,
+		wrapperAttributes,
+		onchange,
+		disabled = false,
+		wrapperRef = $bindable(),
+		...attributes
+	}: TextAreaProps = $props();
+</script>
+
+<!-- 
+	@component
+	A textarea allows users to enter and edit multi-line text. It supports resizing, placeholder text, and disabled/read-only states.
+
+	- Usage:
+	```tsx
+	<script>
+		import { TextArea } from 'fluentui-svelte';
+	</script>
+
+	<TextArea placeholder="Enter text..." />
+	<TextArea resize="none" disabled />
+	```
+-->
+<div class="fs-textarea" {...wrapperAttributes} bind:this={wrapperRef}>
+	<textarea
+		{name}
+		{id}
+		{disabled}
+		onchange={(e) => invokeHandlers(e, [disabled], [onchange])}
+		style="resize: {resize}; {style}"
+		bind:this={ref}
+		bind:value
+		{...attributes}></textarea>
+</div>
+
+<style>
+	.fs-textarea {
+		display: flex;
+		position: relative;
+		border-radius: var(--fs-control-border-radius);
+		background: var(--fs-control-fill-default);
+		border: none;
+		max-width: 100%;
+		width: fit-content;
+		& textarea {
+			appearance: none;
+			background: transparent;
+			outline: none;
+			border: none;
+			margin: 0;
+			z-index: 1;
+			color: var(--fs-text-primary);
+			padding: 0.375rem 0.625rem;
+			min-height: 100px;
+			min-width: 250px;
+			flex-basis: fill;
+			/* Only for Edge, Chrome */
+			field-sizing: content;
+			&::placeholder {
+				color: var(--fs-text-secondary);
+			}
+			&:read-only {
+				color: var(--fs-text-secondary);
+				resize: none !important;
+			}
+			&::-ms-reveal,
+			&::-ms-clear {
+				display: none;
+			}
+			&::-webkit-outer-spin-button,
+			&::-webkit-inner-spin-button {
+				-webkit-appearance: none;
+			}
+		}
+		&:before {
+			content: '';
+			pointer-events: none;
+			width: calc(100% + 0.125rem);
+			height: calc(100% + 0.125rem);
+			position: absolute;
+			top: -0.063rem;
+			left: -0.063rem;
+			padding: 0.063rem;
+			border-radius: 5px;
+			mask:
+				linear-gradient(#fff 0 0) content-box,
+				linear-gradient(#fff 0 0);
+			mask-composite: exclude;
+			background: var(--fs-elevation-text-border);
+			z-index: 1;
+		}
+		&:after {
+			content: '';
+			pointer-events: none;
+			width: 0;
+			height: 10px;
+			border-radius: 0px 0px 5px 5px;
+			position: absolute;
+			bottom: -0.063rem;
+			left: calc(50% - 0.063rem);
+			clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0% 100%);
+			background: transparent;
+			transition:
+				width var(--fs-fast-duration) var(--fs-point-to-point),
+				left var(--fs-fast-duration) var(--fs-point-to-point);
+			z-index: 2;
+		}
+		&:hover {
+			background: var(--fs-control-fill-secondary);
+		}
+		&:has(textarea:focus-visible):after {
+			width: calc(100% + 0.125rem);
+			left: -0.063rem;
+			background: var(--fs-accent-fill-default);
+		}
+		&:has(textarea:focus) {
+			background: var(--fs-control-fill-input-active);
+			& textarea::placeholder {
+				color: var(--fs-text-tertiary);
+			}
+		}
+		&:has(textarea:disabled) {
+			background: var(--fs-control-fill-disabled);
+			& textarea {
+				cursor: not-allowed;
+				resize: none;
+			}
+			& textarea::placeholder {
+				color: var(--fs-text-disabled);
+			}
+			&::before {
+				background: var(--fs-control-stroke-default);
+			}
+		}
+	}
+</style>

package/dist/components/textarea/textarea.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { TextAreaProps } from './types.ts';
+/**
+ * A textarea allows users to enter and edit multi-line text. It supports resizing, placeholder text, and disabled/read-only states.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { TextArea } from 'fluentui-svelte';
+ * </script>
+ *
+ * <TextArea placeholder="Enter text..." />
+ * <TextArea resize="none" disabled />
+ * ```
+ */
+declare const Textarea: import("svelte").Component<TextAreaProps, {}, "ref" | "value" | "wrapperRef">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/textarea/types.d.ts

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
+/** @propsmith TextAreaProps */
+export type TextAreaProps = {
+    /** The current value of the textarea.
+     * @default ''
+     * @bindable
+     */
+    value?: string;
+    /** The DOM reference of the textarea element.
+     * @bindable
+     */
+    ref?: HTMLElement;
+    /** The placeholder text for the textarea. */
+    placeholder?: string;
+    /** Configures the resize behavior of the textarea.
+     * @default 'vertical'
+     */
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+    /** Callback function for the change event. */
+    onChange?: (e: Event) => void;
+    /** Disables the user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
+     */
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
+    /** The DOM reference of the wrapper element.
+     * @bindable
+     */
+    wrapperRef?: HTMLDivElement;
+} & SvelteHTMLElements['textarea'];

package/dist/components/textarea/types.js

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

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

@@ -0,0 +1,47 @@
+# Time Picker
+
+An input for selecting a time from carousel-style hour, minute, and second columns, in 12- or 24-hour format.
+
+## Usage
+
+```svelte
+<script>
+	import { TimePicker } from 'fluentui-svelte';
+
+	let value = $state('');
+</script>
+
+<TimePicker bind:value format={12} />
+```
+
+## Examples
+
+### Clock Format
+
+Use the `format` prop to choose between a 24-hour clock (`24`) and a 12-hour clock with an AM/PM column (`12`).
+
+```svelte
+<TimePicker format={24} />
+<TimePicker format={12} />
+```
+
+### Hiding Columns
+
+Use `hideHours`, `hideMinutes`, or `hideSeconds` to hide individual columns. By default the seconds column is shown.
+
+```svelte
+<TimePicker format={24} hideSeconds />
+```
+
+## Component Props
+
+| Name           | Type                        | Description                                                                     |
+| -------------- | --------------------------- | ------------------------------------------------------------------------------- |
+| `value`        | bindable `string`           | Selected time as 24h `HH:mm` or `HH:mm:ss` (matches `<input type="time">`).     |
+| `format`       | `12 \| 24`                  | Clock format: `24` (00–23) or `12` (01–12 with an AM/PM column). Default: `24`. |
+| `open`         | bindable `boolean`          | Whether the picker flyout is open.                                              |
+| `hideHours`    | `boolean`                   | Hide the hours column.                                                          |
+| `hideMinutes`  | `boolean`                   | Hide the minutes column.                                                        |
+| `hideSeconds`  | `boolean`                   | Hide the seconds column.                                                        |
+| `element`      | bindable `HTMLElement`      | The DOM reference of the time picker root element.                              |
+| `inputElement` | bindable `HTMLInputElement` | The DOM reference of the underlying input element.                              |

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

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

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

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

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

@@ -0,0 +1,336 @@
+<script lang="ts">
+	import type { TimePickerProps } 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 = 24,
+		value = $bindable(''),
+		open = $bindable(false),
+		hideHours = false,
+		hideMinutes = false,
+		hideSeconds = false,
+		element = $bindable(),
+		wrapperRef = $bindable(),
+		wrapperAttributes,
+		inputElement = $bindable(),
+		inputProps,
+		popupLabel = 'Choose a time',
+		...attributes
+	}: TimePickerProps = $props();
+
+	const FALLBACK_ID = $props.id();
+	const POPUP_ID = `${PREFIX}timepicker-${FALLBACK_ID}-popup`;
+
+	let popupRef: HTMLElement | undefined = $state();
+
+	/** Closing always hands the focus back, so the keyboard never lands nowhere. */
+	function closePopup() {
+		open = false;
+		element?.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 = 'hour' | 'minute' | 'second' | 'meridiem';
+
+	const pad = (n: number) => n.toString().padStart(2, '0');
+	const HOURS_24 = Array.from({ length: 24 }, (_, i) => pad(i));
+	const HOURS_12 = Array.from({ length: 12 }, (_, i) => pad(i === 0 ? 12 : i)); // 12, 01 … 11
+	const SIXTY = Array.from({ length: 60 }, (_, i) => pad(i));
+	const MERIDIEM = ['AM', 'PM'];
+	const LABELS: Record<Column, string> = {
+		hour: 'Hour',
+		minute: 'Minute',
+		second: 'Second',
+		meridiem: 'AM/PM'
+	};
+
+	const hour12 = $derived(format === 12);
+
+	// Working selection — canonical 24h values, synced with `value` while the popup is closed.
+	let hour = $state(new Date().getHours()); // 0-23
+	let minute = $state(new Date().getMinutes()); // 0-59
+	let second = $state(new Date().getSeconds()); // 0-59
+
+	const isPM = $derived(hour >= 12);
+	// 12h wheel index: hour % 12 (0 → "12", 1 → "01", …, 11 → "11").
+	const hour12Index = $derived(hour % 12);
+
+	// Columns to render, filtered by the hide* flags; AM/PM only in 12h mode.
+	const columns = $derived.by<Column[]>(() => {
+		const cols: Column[] = [];
+		if (!hideHours) cols.push('hour');
+		if (!hideMinutes) cols.push('minute');
+		if (!hideSeconds) cols.push('second');
+		if (hour12) cols.push('meridiem');
+		return cols;
+	});
+
+	const hasValue = $derived(/^\d{2}:\d{2}(:\d{2})?$/.test(value ?? ''));
+
+	function parseValue(v: string) {
+		const m = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(v ?? '');
+		const t = new Date();
+		const raw = m
+			? { h: +m[1], mi: +m[2], s: m[3] ? +m[3] : 0 }
+			: { h: t.getHours(), mi: t.getMinutes(), s: t.getSeconds() };
+		return {
+			h: Math.min(23, Math.max(0, raw.h)),
+			mi: Math.min(59, Math.max(0, raw.mi)),
+			s: Math.min(59, Math.max(0, raw.s))
+		};
+	}
+
+	// Keep the working selection synced with `value` while the popup is closed.
+	$effect(() => {
+		if (!open) {
+			const { h, mi, s } = parseValue(value);
+			hour = h;
+			minute = mi;
+			second = s;
+		}
+	});
+
+	// 12h wheel index → canonical hour, keeping the current meridiem.
+	function setHour12(i: number) {
+		hour = (i % 12) + (isPM ? 12 : 0);
+	}
+	// AM/PM wheel index (0 = AM, 1 = PM) → canonical hour, keeping the clock hour.
+	function setMeridiem(i: number) {
+		hour = (hour % 12) + (i === 1 ? 12 : 0);
+	}
+
+	function confirm() {
+		value = `${pad(hour)}:${pad(minute)}${hideSeconds ? '' : `:${pad(second)}`}`;
+		closePopup();
+	}
+
+	function cancel() {
+		closePopup();
+	}
+
+	// Trigger label per column: the live selection while open, the committed value once set,
+	// otherwise the placeholder column name.
+	function display(col: Column): string {
+		if (!open && !hasValue) return LABELS[col];
+		if (col === 'hour') return hour12 ? HOURS_12[hour12Index] : pad(hour);
+		if (col === 'minute') return pad(minute);
+		if (col === 'second') return pad(second);
+		return isPM ? 'PM' : 'AM';
+	}
+</script>
+
+<div class="fs-time-picker-wrapper" bind:this={wrapperRef} {...wrapperAttributes}>
+	<button
+		type="button"
+		class="fs-time-picker"
+		aria-haspopup="dialog"
+		aria-expanded={open}
+		aria-controls={open ? POPUP_ID : undefined}
+		onclick={() => (open = !open)}
+		bind:this={element}
+		{...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. -->
+	<input type="time" hidden step={hideSeconds ? undefined : 1} {value} bind:this={inputElement} {...inputProps} />
+</div>
+
+{#if open}
+	<Flyout
+		{@attach floating(element, {
+			placement: 'bottom',
+			middleware: [
+				offset(({ rects }) => {
+					return -rects.reference.height / 2 - rects.floating.height / 2;
+				}),
+				flip(),
+				shift(),
+				hide()
+			],
+			strategy: 'fixed'
+		})}
+		reference={element}
+		id={POPUP_ID}
+		role="dialog"
+		aria-modal="true"
+		aria-label={popupLabel}
+		tabindex={-1}
+		bind:ref={popupRef}
+		class="time-picker-flyout"
+	>
+		<div class="carousel-wrapper">
+			<div class="selection-bar"></div>
+			{#each columns as col (col)}
+				<div class="carousel-col col-{col}">
+					{#if col === 'hour'}
+						{#if hour12}
+							<DynamicCarousel values={HOURS_12} selectedIndex={hour12Index} onSelected={(_, i) => setHour12(i)} />
+						{:else}
+							<DynamicCarousel values={HOURS_24} selectedIndex={hour} onSelected={(_, i) => (hour = i)} />
+						{/if}
+					{:else if col === 'minute'}
+						<DynamicCarousel values={SIXTY} selectedIndex={minute} onSelected={(_, i) => (minute = i)} />
+					{:else if col === 'second'}
+						<DynamicCarousel values={SIXTY} selectedIndex={second} onSelected={(_, i) => (second = i)} />
+					{:else}
+						<DynamicCarousel
+							values={MERIDIEM}
+							selectedIndex={isPM ? 1 : 0}
+							infinite={false}
+							inertia={false}
+							onSelected={(_, i) => setMeridiem(i)}
+						/>
+					{/if}
+				</div>
+			{/each}
+		</div>
+		<div class="action-bar">
+			<Button class="justify" appearance="subtle" aria-label="Confirm" onclick={confirm}>
+				<CheckmarkRegular />
+			</Button>
+			<Button class="justify" appearance="subtle" aria-label="Cancel" onclick={cancel}>
+				<DismissRegular />
+			</Button>
+		</div>
+	</Flyout>
+{/if}
+
+<style>
+	.fs-time-picker-wrapper {
+		display: contents;
+	}
+	.fs-time-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(.time-picker-flyout) {
+		flex-direction: column;
+		position: fixed !important;
+		top: 0;
+		left: 0;
+		max-width: min-content;
+		padding: 0 !important;
+		& .wrapper {
+			gap: 0 !important;
+		}
+		& .carousel-wrapper {
+			display: flex;
+			position: relative;
+			width: max-content;
+			min-width: max-content;
+			padding: 0 0.4rem !important;
+		}
+		& .carousel-col {
+			width: 64px;
+			& :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/time-picker/time-picker.svelte.d.ts

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

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

@@ -0,0 +1,54 @@
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes } from 'svelte/elements';
+/** @propsmith TimePickerProps */
+export type TimePickerProps = {
+    /** Selected time as 24h `HH:mm` or `HH:mm:ss` (matches `<input type="time">`).
+     * @default ''
+     * @bindable
+     */
+    value?: string;
+    /** Clock format: `24` (00-23) or `12` (01-12 with an AM/PM column).
+     * @default 24
+     */
+    format?: 12 | 24;
+    /** Controls the open state of the picker.
+     * @default false
+     * @bindable
+     */
+    open?: boolean;
+    /** Removes the hour column.
+     * @default false
+     */
+    hideHours?: boolean;
+    /** Removes the minute column.
+     * @default false
+     */
+    hideMinutes?: boolean;
+    /** Removes the second column.
+     * @default false
+     */
+    hideSeconds?: boolean;
+    /** The DOM reference of the trigger button.
+     * @bindable
+     */
+    element?: 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 time'
+     */
+    popupLabel?: string;
+} & HTMLButtonAttributes;

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

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

package/dist/components/toggle-switch/docs/llms.md

@@ -0,0 +1,39 @@
+# Toggle Switch
+
+A toggle switch represents a physical switch that allows someone to choose between two mutually exclusive options. For example, 'On/Off' and 'Show/Hide'. Choosing an option should produce an immediate result.
+
+## Usage
+
+```svelte
+<script>
+	import { ToggleSwitch } from 'fluentui-svelte';
+</script>
+
+<ToggleSwitch />
+<ToggleSwitch label="Toggle me" />
+<ToggleSwitch label="I'm disabled" disabled />
+```
+
+## Examples
+
+### States
+
+A toggle switch can be labeled, checked, or disabled.
+
+```svelte
+<ToggleSwitch label="Off" />
+<ToggleSwitch label="On" checked />
+<ToggleSwitch label="Disabled" disabled />
+```
+
+## Component Props
+
+| Name               | Type                  | Description                                                  |
+| ------------------ | --------------------- | ------------------------------------------------------------ |
+| `ref`              | `HTMLInputElement`    | Get the DOM reference of the input element.                  |
+| `label`            | `string`              | The label for the toggle switch.                             |
+| `labelAttributes`  | `HTMLLabelAttributes` | Attributes to be spread on the label wrapper element.        |
+| `labelElement`     | `HTMLLabelElement`    | Get the DOM reference of the label element.                  |
+| `disabled`         | `boolean`             | Whether the toggle switch is disabled.                       |
+| `checked`          | `boolean`             | Whether the toggle switch is checked (on).                   |
+| Element Attributes | `object`              | Additional attributes to apply to the toggle switch element. |