svelte-fluentui 1.0.0 → 1.1.0

package/README.md

@@ -2,6 +2,14 @@
 
 A comprehensive Svelte wrapper library for Microsoft FluentUI web components (v2.6.x), providing a seamless way to use FluentUI components in Svelte applications.
 
+## What's New in v1.1.0
+
+- **`Calendar` — new `disabled` prop for whole-control disabled state** — Calendar previously had `readonly` (blocks interaction, sets `aria-readonly`) but no host-level `disabled`. New `disabled?: boolean` blocks all interaction (day/month/year cells, title-button view switching, prev/next navigation) AND adds visual de-emphasis via `aria-disabled="true"`: drops opacity to `var(--disabled-opacity)`, sets `cursor: not-allowed` on interactive cells. Per-cell `aria-disabled` strikethrough rules are untouched — the new selectors only fire when the HOST has `aria-disabled`. Propagates through the recursive Calendar instances (month/year picker views) and through `DatePicker` to the inner Calendar. Demo "Calendar states" at `/components/forms/calendar` shows Normal / Readonly / Disabled side-by-side.
+- **`DatePicker` & `TimePicker` — new `openOnInputClick` prop (default `true`)** — FluentUI Blazor's pickers open their popup whenever the user clicks the input field, not just the trigger icon. DatePicker previously required clicking the calendar icon; TimePicker had wrapper-click wired but it *toggled* (a second click inside the open picker closed it). New prop enables Blazor-equivalent behavior on both: clicking anywhere on the input opens the popup (does not toggle, so clicks inside an already-open picker keep it open), while the icon button keeps its explicit toggle role. Set `openOnInputClick={false}` to require the icon as the sole entry point.
+- **`Listbox` & `Combobox` — `readonly` prop removed (BREAKING for type-checked consumers)** — Audit of input wrappers caught two cases where the Svelte wrapper exposed a `readonly` prop that the underlying FluentUI component silently ignored: `<fluent-listbox>` and `<fluent-combobox>` have no `readOnly` property in fast-foundation. In Listbox the prop was declared but never forwarded — pure dead code. In Combobox it was forwarded but ignored by the web component. Consumers passing `readonly` will see a TypeScript error; switch to `disabled` for non-interactive comboboxes. The remaining 14 input wrappers (TextField, Textarea, NumberField, Search, Checkbox, Switch, Radio, RadioGroup, Slider, Select, Autocomplete, DatePicker, TimePicker, InputFile) are unchanged.
+- **`Textarea` — drag-resize no longer collapses the focus indicator** — FluentUI's shadow-DOM `:active::after` rule shrank the bottom indicator to a 40%-wide centered stub during any `:active` state, which fired during the resize drag and read as a focus loss. Override injected via `adoptedStyleSheets` restores the full-width indicator while dragging.
+- **Playwright e2e suite** — New `playwright.config.ts` targets fixture pages under `docs/src/routes/test/<feature>/+page.svelte` (intentionally separate from showcase pages so specs stay stable). First feature covered is Autocomplete with 567 lines of specs across two fixture pages.
+
 ## What's New in v1.0.0
 
 The first stable release. Headline changes since the rc series:
@@ -24,17 +32,6 @@ The first stable release. Headline changes since the rc series:
 - **`package.json` `homepage` points at the docs site** — npm's "Homepage" sidebar link now goes to `svelte-fluentui.keenmate.dev` instead of duplicating the GitHub repo link. Two distinct destinations on the package page.
 - **InputFile demo playground persists in localStorage** — the live selector × list × cardSize × chipsPosition mixer at `/components/inputfile` remembers your last configuration across page reloads. Files themselves are not persisted (File objects don't survive JSON).
 
-## What's New in v1.0.0-rc21
-
-- **`InputFile` — `appearance` split into `selectorAppearance` + `listAppearance` + new `cardSize` prop** — the single `appearance` union baked the trigger visual and the file-list visual together, so combinations like "button trigger with popover list" or "card with chips below" weren't expressible. Now `selectorAppearance: "card" | "button" | "minimal"` and `listAppearance: "list" | "chips" | "popover" | "none"` are independent. All previous presets still expressible (`card + list`, `button + list`, `minimal + popover`, `card + chips`). New `cardSize: "minimal" | "compact" | "big"` resizes the card — `big` is the original tall vertical card, `compact` is a 2-row grid layout for forms where 200px felt enormous, and `minimal` collapses everything to a single inline wrapping row (icon · message · hint · hint · Browse) with `·` separators between hints
-- **`InputFile` — `expandOnDrag` + `expandOnDragTarget` props for drag-expanded overlay** — when an external file is dragged onto the page, the card temporarily expands into a larger portaled overlay so the user has a generous hit area. Rendered above the form via `use:portal` so the surrounding layout doesn't shift up and down. Overlay centre is anchored to the selector's (or `expandOnDragTarget`'s) centre via `transform: translate(-50%, -50%)` and grows symmetrically in all four directions — clamped to `90vw` / `90vh` so it never escapes the viewport. Dismissal paths cover Esc keydown (since OS-originated drags don't reliably fire `dragend` on cancel), cursor leaving the viewport (`document.dragleave` with `relatedTarget === null`), drop, and window blur. The overlay's own `dragleave` uses `relatedTarget` containment rather than `target === currentTarget` to avoid a flicker bug (`dragleave` fires when moving from a parent element into a child, same as `mouseout`)
-- **`InputFile` — popover sticky header + sticky footer with progress bar, batch actions, and three CSS-variable dimensions** — Long file lists in minimal-mode popovers used to scroll the header (file count, +Add more, Clear all) away as the user navigated; aggregate progress was nowhere visible without picking through individual rows. New sticky header pins the file count + actions + limits hint to the top; new sticky footer carries an overall progress bar (`uploadedBytes / totalBytes`), a stats line via `labels.totalProgress({completed, failed, total, uploadedBytes, totalBytes, percent})`, and conditional batch buttons — Pause all (any uploading), Resume all (any paused), Retry all (any failed). New exported instance methods `pauseAll()` / `resumeAll()` / `retryAll()` and `actions` snippet payload widened to receive them. Popover sizing is now bracketed by three CSS variables: `--fluent-inputfile-popover-width` (default `28rem`), `--fluent-inputfile-popover-min-height` (default `16rem`), `--fluent-inputfile-popover-max-height` (default `24rem`) — overridable per-theme or per-instance so the popover doesn't jump around as files are added
-- **`InputFile` — `FileUploadResult` return type + `onItemRemove(item)` callback for clean server-side upload/cleanup flows** — Previously the upload handler's `Promise<void>` return meant capturing a server-returned guid required a WeakMap + post-success `onFileUploaded` patch (fragile, two-step). Handler return widened to `Promise<void | FileUploadResult>` where `FileUploadResult = Partial<Pick<InputFileItem, "metadata" | "downloadUrl" | "thumbnailUrl" | "name">>` — restricted on purpose so handlers can't clobber `id` / `status` / `progress`. Returned fields are spread into the same `patchItem` that flips status to `"completed"`, landing the server guid atomically with the completion flag. New `onItemRemove?(item)` callback fires once per item from `removeAt` / `removeById` / row `×` / `clear()` / `reset()`, receiving the removed item with its final metadata still intact. Together they cover the canonical scenario: file picked → auto-upload → server returns guid (now on `item.metadata`) → user removes the file before submit → consumer fires `DELETE /api/files/:guid` from `onItemRemove`. Demo 16 on `/components/inputfile` shows the full flow with an in-memory fake server + activity log
-- **`InputFile` — `chipsPosition: "end" | "below"` + chip restructure to `[info | X]` with full-height remove hitbox** — When `listAppearance="chips"`, the chips previously rendered at the trailing edge of the same flex row as the selector card, leaving a tall card + short chips visually floating mid-row. New `chipsPosition` prop (default `"below"`) flips the layout: `"end"` keeps trailing-edge with an inner `.chips-wrap` so multi-row wrap doesn't anchor each row to the card's vertical centre, `"below"` stacks chips beneath the card. Chip itself restructured into `.chip-info` (filename / size / progress, fills width, non-interactive) and `.chip-remove` (full-height button covering everything from the info edge to the chip's right edge), so users no longer miss the small `×` and click empty chip space
-- **`InputFile` playground demo on `/components/inputfile`** — live controls for `selectorAppearance` / `listAppearance` / `cardSize` / `chipsPosition` / `multiple` / `disabled` / `expandOnDrag` at the top of the examples grid so consumers can try every combination without rewriting code
-- **Border-radius consolidated into a six-tier CSS-variable scale** — ~40 hardcoded `border-radius` declarations across 12 components were swept into `--fluent-border-radius-{sm,md,lg,xl,pill,circle}` (2/4/6/8/999/50%) on `:root`, backed by matching SCSS tokens (`$border-radius-sm/md/lg/xl/pill/circle`). The pre-existing `--fluent-border-radius` is preserved as a back-compat alias of `md`. Pixel-identical to the prior visual — drove tier choice off existing values per call site (4px → md, 2px → sm, etc.). Theming the library's entire corner-rounding is now a six-line variable override instead of a 40-line search-and-replace
-- **`InputFile` popover `max-height` was being silently overridden — fixed** — Floating UI's `size` middleware ran on every reposition and unconditionally wrote `floating.style.maxHeight = ${availableHeight - 16}px`, so on any window taller than the CSS cap the inline style won and the popover ballooned to ~viewport height (sticky footer ended up pinned far below the visible scroll region, looking like it was floating mid-list). Middleware now clears the inline cap, reads the CSS-rule-driven `max-height` via `getComputedStyle`, and only re-applies an inline cap when the viewport is actually tighter than the ceiling. CSS variable wins on tall screens, viewport wins on short screens
-
 ## Features
 
 - 🎨 **Complete FluentUI Component Set** - Wraps all major FluentUI web components

package/dist/components/Calendar.svelte

@@ -35,6 +35,8 @@
 		/** Gap between cells in CSS units (default 2px). */
 		gap?: string | number
 		readonly?: boolean
+		/** When true, the calendar is non-interactive AND visually de-emphasized (opacity, not-allowed cursor on interactive cells, `aria-disabled="true"` on the host). Stricter than `readonly`, which blocks interaction without visual treatment. */
+		disabled?: boolean
 		/** Hover-preview function: given the day under the cursor, returns the set of dates to visually highlight. Defaults to `[date]`. */
 		highlightDates?: (date: Date) => Date[]
 		/** Click-selection function: given the clicked day, returns the dates to select. In multiple mode, the result is unioned with existing `selectedDates` (or removed wholesale if the clicked day was already selected). In range mode, the result replaces the range. Defaults to `[date]`. */
@@ -64,6 +66,7 @@
 		    animatePeriodChanges            = undefined,
 		    disabledSelectable              = undefined,
 		    readonly                        = undefined,
+		    disabled                        = undefined,
 		    selectMode                      = "single",
 		    checkIfSelectedValueHasChanged  = undefined,
 		    dayFormat                       = undefined,
@@ -107,7 +110,9 @@
 		// year fail the disabledDateFunc check, blocking the year picker entirely.
 		disabledCheckAllDaysOfMonthYear: disabledCheckAllDaysOfMonthYear ?? true,
 		disabledSelectable:              disabledSelectable ?? false,
-		readOnly:                        readonly ?? false,
+		// Treat `disabled` as effectively-readonly for the title/month/year selection gates.
+		// The visual difference (opacity, not-allowed cursor) is layered via `aria-disabled` CSS.
+		readOnly:                        (disabled || readonly) ?? false,
 		selectMode,
 		value:                           value,
 		selectedDates:                   selectedDates,
@@ -470,6 +475,7 @@
 	class:fluent-month={view === "months"}
 	class:fluent-year={view === "years"}
 	aria-readonly={readonly ? "true" : null}
+	aria-disabled={disabled ? "true" : null}
 	style={sizeStyle || null}
 >
 	{#if !_pickerView || _pickerView === "days"}
@@ -547,9 +553,9 @@
 									data-multi-end={multipleSelection.isMultiple && selectMode === "range" && sameDay(multipleSelection.max, day)}
 									aria-label={dayProperties.title}
 									data-value={dayProperties.dayIdentifier}
-									onkeydown={ev => (ev.key === "Enter" || ev.key === " ") && onSelectDayHandlerAsync(day, dayProperties.isDisabled || dayProperties.isInactive || readonly || false)}
-									onclick={ev => onSelectDayHandlerAsync(day, dayProperties.isDisabled || dayProperties.isInactive || readonly || false)}
-									onmouseover={ev => onSelectDayMouseOverAsync(day, dayProperties.isDisabled || dayProperties.isInactive || readonly || false)}
+									onkeydown={ev => (ev.key === "Enter" || ev.key === " ") && onSelectDayHandlerAsync(day, dayProperties.isDisabled || dayProperties.isInactive || readonly || disabled || false)}
+									onclick={ev => onSelectDayHandlerAsync(day, dayProperties.isDisabled || dayProperties.isInactive || readonly || disabled || false)}
+									onmouseover={ev => onSelectDayMouseOverAsync(day, dayProperties.isDisabled || dayProperties.isInactive || readonly || disabled || false)}
 								>
 									{#if daySnippet}
 										{@render daySnippet(dayProperties)}
@@ -619,6 +625,7 @@
 			onDateSelected={pickerMonthSelectAsync}
 			checkIfSelectedValueHasChanged={false}
 			{readonly}
+			{disabled}
 			{culture}
 			{disabledSelectable}
 			{animatePeriodChanges}
@@ -636,6 +643,7 @@
 			onDateSelected={pickerYearSelectAsync}
 			checkIfSelectedValueHasChanged={false}
 			{readonly}
+			{disabled}
 			{culture}
 			disabledSelectable={disabledSelectable}
 			{animatePeriodChanges}
@@ -646,3 +654,32 @@
 		/>
 	{/if}
 </div>
+
+<style>
+	/* Visual treatment for the host-level disabled state. Per-cell `aria-disabled` (e.g. dates filtered
+	   out by minDate/maxDate/disabledDateFunc) already has its own strikethrough rule in
+	   fluent-components.scss — these selectors only target the WHOLE-control disabled state
+	   (`.fluent-calendar[aria-disabled="true"]`, etc., set when the consumer passes `disabled`). */
+	:global(.fluent-calendar[aria-disabled="true"]),
+	:global(.fluent-month[aria-disabled="true"]),
+	:global(.fluent-year[aria-disabled="true"]) {
+		opacity: var(--disabled-opacity, 0.5);
+		cursor: not-allowed;
+	}
+
+	:global(.fluent-calendar[aria-disabled="true"] .day),
+	:global(.fluent-calendar[aria-disabled="true"] .title > .label),
+	:global(.fluent-calendar[aria-disabled="true"] .change-period > .previous),
+	:global(.fluent-calendar[aria-disabled="true"] .change-period > .next),
+	:global(.fluent-month[aria-disabled="true"] .month),
+	:global(.fluent-month[aria-disabled="true"] .title > .label),
+	:global(.fluent-month[aria-disabled="true"] .change-period > .previous),
+	:global(.fluent-month[aria-disabled="true"] .change-period > .next),
+	:global(.fluent-year[aria-disabled="true"] .year),
+	:global(.fluent-year[aria-disabled="true"] .title > .label),
+	:global(.fluent-year[aria-disabled="true"] .change-period > .previous),
+	:global(.fluent-year[aria-disabled="true"] .change-period > .next) {
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+</style>

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

@@ -24,6 +24,8 @@ type Props = {
     /** Gap between cells in CSS units (default 2px). */
     gap?: string | number;
     readonly?: boolean;
+    /** When true, the calendar is non-interactive AND visually de-emphasized (opacity, not-allowed cursor on interactive cells, `aria-disabled="true"` on the host). Stricter than `readonly`, which blocks interaction without visual treatment. */
+    disabled?: boolean;
     /** Hover-preview function: given the day under the cursor, returns the set of dates to visually highlight. Defaults to `[date]`. */
     highlightDates?: (date: Date) => Date[];
     /** Click-selection function: given the clicked day, returns the dates to select. In multiple mode, the result is unioned with existing `selectedDates` (or removed wholesale if the clicked day was already selected). In range mode, the result replaces the range. Defaults to `[date]`. */

package/dist/components/Combobox.svelte

@@ -22,7 +22,6 @@
 		placeholder?: string
 		position?: "above" | "below"
 		disabled?: boolean
-		readonly?: boolean
 		appearance?: "outline" | "filled"
 		required?: boolean
 		autofocus?: boolean
@@ -51,7 +50,6 @@
 		placeholder = undefined,
 		position = undefined,
 		disabled = undefined,
-		readonly = undefined,
 		appearance = undefined,
 		required = undefined,
 		autofocus = undefined,
@@ -174,7 +172,7 @@
 			// )
 			return
 		}
-		if (untrack(() => readonly || disabled)) {
+		if (untrack(() => disabled)) {
 			selectedOptions.set(untrack(() => $state.snapshot(value)))
 			return
 		}
@@ -264,7 +262,6 @@
 	placeholder={placeholder || null}
 	position={position}
 	disabled={disabled || null}
-	readonly={readonly || null}
 	appearance={appearance || null}
 	required={required || null}
 	autofocus={autofocus || null}

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

@@ -10,7 +10,6 @@ type Props = {
     placeholder?: string;
     position?: "above" | "below";
     disabled?: boolean;
-    readonly?: boolean;
     appearance?: "outline" | "filled";
     required?: boolean;
     autofocus?: boolean;

package/dist/components/DatePicker.svelte

@@ -1,7 +1,7 @@
 <!--
  * DatePicker Component
  * Inspired by FluentUI Blazor DatePicker component
- * https://www.fluentui-blazor.net/DatePicker
+ * https://www.fluentui-blazor.net/DateTime
  *
  * Combines TextField with Calendar popup for date selection
 -->
@@ -48,6 +48,8 @@
 		firstDayOfWeek?: number | null
 		/** When true (default), the popup closes after a date is picked. */
 		autoClose?: boolean
+		/** When true (default), clicking anywhere on the input area opens the calendar popup, matching FluentUI Blazor. Set false to require clicking the calendar icon. */
+		openOnInputClick?: boolean
 		/** Bindable open state of the calendar popup. */
 		open?: boolean
 		openCalendarIconAriaLabel?: string
@@ -87,6 +89,7 @@
 		animatePeriodChanges = undefined,
 		firstDayOfWeek = undefined,
 		autoClose = true,
+		openOnInputClick = true,
 		open = $bindable(false),
 		openCalendarIconAriaLabel = "Open calendar",
 		title = undefined,
@@ -168,12 +171,21 @@
 	}
 
 	// Handle input click to open calendar
-	function handleInputClick() {
+	function handleInputClick(event?: Event) {
+		event?.stopPropagation()
 		if (!disabled && !readonly) {
 			setOpen(!isOpen)
 		}
 	}
 
+	// Handle click anywhere on the input area — opens (does not toggle) so
+	// clicking inside an already-open picker keeps it open. Matches Blazor.
+	function handleWrapperClick() {
+		if (!openOnInputClick) return
+		if (disabled || readonly) return
+		if (!isOpen) setOpen(true)
+	}
+
 	// Handle input change (manual text entry)
 	function handleInputChange(event: Event) {
 		const target = event.target as HTMLInputElement
@@ -192,7 +204,8 @@
 	}
 
 	// Handle clear
-	function handleClear() {
+	function handleClear(event?: Event) {
+		event?.stopPropagation()
 		value = null
 		inputValue = ""
 		setOpen(false)
@@ -209,7 +222,9 @@
 		</label>
 	{/if}
 
-	<div class="datepicker-wrapper" bind:this={wrapperElement}>
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="datepicker-wrapper" bind:this={wrapperElement} onclick={handleWrapperClick}>
 		<TextField
 			{id}
 			value={inputValue}
@@ -221,7 +236,7 @@
 			{appearance}
 			{title}
 			oninput={handleInputChange}
-			style="width: 100%; cursor: pointer;"
+			style={openOnInputClick && !disabled && !readonly ? "width: 100%; cursor: pointer;" : "width: 100%;"}
 		>
 			{#snippet end()}
 				<span class="end-buttons">
@@ -268,6 +283,8 @@
 						pickerMonth={value || new Date()}
 						{culture}
 						{firstDayOfWeek}
+						{disabled}
+						{readonly}
 						{disabledSelectable}
 						{disabledCheckAllDaysOfMonthYear}
 						{dayFormat}

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

@@ -35,6 +35,8 @@ type Props = {
     firstDayOfWeek?: number | null;
     /** When true (default), the popup closes after a date is picked. */
     autoClose?: boolean;
+    /** When true (default), clicking anywhere on the input area opens the calendar popup, matching FluentUI Blazor. Set false to require clicking the calendar icon. */
+    openOnInputClick?: boolean;
     /** Bindable open state of the calendar popup. */
     open?: boolean;
     openCalendarIconAriaLabel?: string;

package/dist/components/Listbox.svelte

@@ -12,7 +12,6 @@
 	type Props = {
 		value: ValueType
 		multi?: boolean
-		readonly?: boolean
 		disabled?: boolean
 		autofocus?: boolean
 		name?: string
@@ -31,7 +30,6 @@
 		value = $bindable(),
 		multi = undefined,
 		disabled = undefined,
-		readonly = undefined,
 		autofocus = undefined,
 		name = undefined,
 		label = undefined,

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

@@ -3,7 +3,6 @@ type ValueType = string | string[] | null | undefined;
 type Props = {
     value: ValueType;
     multi?: boolean;
-    readonly?: boolean;
     disabled?: boolean;
     autofocus?: boolean;
     name?: string;

package/dist/components/Textarea.svelte

@@ -5,6 +5,17 @@
 
 	provideFluentDesignSystem().register(fluentTextArea())
 
+	const activeIndicatorOverride =
+		typeof CSSStyleSheet !== "undefined"
+			? (() => {
+					const sheet = new CSSStyleSheet()
+					sheet.replaceSync(
+						":host(:not([disabled]):active)::after { left: 0; width: 100%; transform: none; }"
+					)
+					return sheet
+				})()
+			: (undefined as unknown as CSSStyleSheet)
+
 	type Props = {
 		class?: string
 		style?: string
@@ -88,6 +99,23 @@
 		}
 	})
 
+	// Neutralize FluentUI's `:active::after` rule, which collapses the focus
+	// indicator to a 40%-wide centered line while the user is dragging the
+	// resize handle. Make active match focus-within (full-width line).
+	$effect(() => {
+		if (!element || typeof CSSStyleSheet === "undefined") return
+		const adopt = () => {
+			const root = element?.shadowRoot
+			if (!root) {
+				setTimeout(adopt, 10)
+				return
+			}
+			if (root.adoptedStyleSheets.includes(activeIndicatorOverride)) return
+			root.adoptedStyleSheets = [...root.adoptedStyleSheets, activeIndicatorOverride]
+		}
+		adopt()
+	})
+
 	// Sizing: by default the host opts out of parent flex stretching (matches the
 	// Blazor demo, where a default textarea renders at its intrinsic ~20ch width).
 	// `fullWidth` opts back into stretching. `cols` sets the host attribute that

package/dist/components/TimePicker.svelte

@@ -1,7 +1,7 @@
 <!--
  * TimePicker Component
  * Inspired by FluentUI Blazor TimePicker component
- * https://www.fluentui-blazor.net/TimePicker
+ * https://www.fluentui-blazor.net/DateTime
  *
  * Provides time selection with hour, minute, and optional second/millisecond inputs
 -->
@@ -40,6 +40,8 @@
 		disabledTimes?: string[]
 		/** When true (default), the popup closes when the user clicks OK. */
 		autoClose?: boolean
+		/** When true (default), clicking anywhere on the input area opens the popup, matching FluentUI Blazor. Set false to require clicking the clock icon. */
+		openOnInputClick?: boolean
 		/** Bindable popup open state. */
 		open?: boolean
 		openClockIconAriaLabel?: string
@@ -72,6 +74,7 @@
 		disabledTimeFunc = undefined,
 		disabledTimes = undefined,
 		autoClose = true,
+		openOnInputClick = true,
 		open = $bindable(false),
 		openClockIconAriaLabel = "Open time picker",
 		title = undefined,
@@ -278,13 +281,21 @@
 
 	let displayValue = $derived(formatTime())
 
-	// Handle input click
+	// Handle clock-icon click — toggles the popup. Always available regardless of openOnInputClick.
 	function handleInputClick(e: MouseEvent) {
 		if (!disabled && !readonly) {
 			setOpen(!isOpen)
 		}
 	}
 
+	// Handle click anywhere on the input area — opens (does not toggle) so
+	// clicking inside an already-open picker keeps it open. Matches Blazor.
+	function handleWrapperClick() {
+		if (!openOnInputClick) return
+		if (disabled || readonly) return
+		if (!isOpen) setOpen(true)
+	}
+
 	// The wrapper has its own onclick for "click anywhere in field to open"; without these the click bubbles
 	// from the inner button → wrapper, toggling the popup twice (clock) or re-opening after clear (clear).
 	function handleClockButtonClick(e: MouseEvent) {
@@ -363,7 +374,7 @@
 
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="timepicker-wrapper" bind:this={wrapperElement} onclick={handleInputClick} style="cursor: pointer;">
+	<div class="timepicker-wrapper" bind:this={wrapperElement} onclick={handleWrapperClick} style:cursor={openOnInputClick && !disabled && !readonly ? "pointer" : undefined}>
 		<TextField
 			{id}
 			value={displayValue}

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

@@ -27,6 +27,8 @@ type Props = {
     disabledTimes?: string[];
     /** When true (default), the popup closes when the user clicks OK. */
     autoClose?: boolean;
+    /** When true (default), clicking anywhere on the input area opens the popup, matching FluentUI Blazor. Set false to require clicking the clock icon. */
+    openOnInputClick?: boolean;
     /** Bindable popup open state. */
     open?: boolean;
     openClockIconAriaLabel?: string;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.0.0";
+export declare const VERSION = "1.1.0";

package/dist/version.js

@@ -1,4 +1,4 @@
 // Auto-generated by scripts/pre-package.js — do NOT edit by hand.
 // In dev this file holds whatever value was committed last; on each `npm run package`
 // the pre-package script overwrites it with the current package.json version.
-export const VERSION = "1.0.0";
+export const VERSION = "1.1.0";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-fluentui",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "A Svelte wrapper library for Microsoft FluentUI web components",
 	"license": "MIT",
 	"author": "KeenMate",