svelte-fluentui 1.0.0-rc21 → 1.0.0-rc22

package/README.md

@@ -2,6 +2,12 @@
 
 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.0.0-rc22
+
+- **`InputFile` chips mode now has an overall progress footer** — the same `Pause all` / `Resume all` / `Retry all` controls plus the aggregate progress bar that list/popover modes already had. Works for both `chipsPosition` values; rendered as a sibling below the chips so layout stays sane regardless of position.
+- **`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
@@ -13,23 +19,6 @@ A comprehensive Svelte wrapper library for Microsoft FluentUI web components (v2
 - **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
 
-## What's New in v1.0.0-rc20
-
-- **`Calendar` / `DatePicker` — visual states finally render + 7 new DatePicker passthroughs + `cellSize` / `gap` resize knobs** — the CSS for today's accent circle, selected border, out-of-range strikethrough, faded-inactive days, and multi-select range fills was copied from FluentUI Blazor with attribute selectors that never matched the Svelte port's a11y-correct `data-*` / `aria-*` attributes — all silently dead. Selectors now aligned across all three views (days / months / years) and disabled months/years got a strikethrough treatment to match. DatePicker forwards seven previously-internal Calendar capabilities — `selectableDates` (inverse predicate), `disabledSelectable`, `disabledCheckAllDaysOfMonthYear`, `dayFormat`, `animatePeriodChanges`, `day` snippet (custom cell rendering), `onPickerMonthChange` callback. New `cellSize` / `gap` props on Calendar (and forwarded by DatePicker) resize the whole picker uniformly — accepts numbers (px) or any CSS length string
-- **`TimePicker` — booking-style disabled slots + UX polish** — new `disabledTimes: string[]` and `disabledTimeFunc: (h, m, s) => boolean` props for per-slot disabling beyond the existing `minTime`/`maxTime` range. Disabled cells render with strikethrough + dimmed and stop reacting to clicks; the OK button is gated on the current triplet's validity. Popup now auto-centers each column's selected (or first enabled) row on open, so 15-minute slots from 9–12 don't dump the user at hour 0 with everything above the fold disabled. Clock-icon button now actually opens the popup (was double-toggling due to event bubble); clear button no longer re-opens after clearing
-- **`TextField` — `maxlength` / `minlength` / `pattern` props + `start` snippet restored** — three native input validation attributes that `<fluent-text-field>` 2.6 doesn't forward to its shadow `<input>` are now wired via a generalized shadow-DOM helper (`setAttributeOnShadowInput`). They participate in `:invalid` styling and `ValidityState.{tooLong, tooShort, patternMismatch}`, so they compose with the existing `checkValidity()` / `<Field>` integration. The `start` slot — for leading icons / prefixes — was removed during an earlier refactor and is back, matching the `start`/`end` slot pair that Button / Search / NumberField / MenuButton already had
-- **`Checkbox` — external label + `labelPosition` to complete the form-control parity sweep** — closes the migration started in rc19 for `NumberField` and `Switch`. `Checkbox` now also emits a sibling `<label for={id} class="fluent-label">` (with shadow `::part(label)` hidden) and accepts `labelPosition: "top" | "start"` (default `"start"` keeps the historical inline layout). All `<Field>`-wrapped form controls now share a uniform label idiom regardless of which control is inside
-- **`InputFile` — drop-zone limit hints + `formatLimits` composer + `totalMaxSize` cap** — the card drop zone now advertises every configured constraint (`minFileSize`, `maxFileCount`, `minFiles`) instead of silently rejecting them post-pick. Five new `InputFileLabels` entries for full i18n. New `formatLimits?: (info) => string | null` composes the whole limits block into one line (returning a non-empty string replaces the four default lines). New `totalMaxSize: number` caps combined bytes across all accepted files — there was no clean way to express "the whole upload payload must stay under N bytes" before
-- **Smaller form-control additions** — `<Stack wrap>` for multi-line flex (Blazor `Wrap` parity), `<Button title="…">` for native HTML tooltips on hover (Blazor `Title` parity)
-- **Docs — `Ctrl/Cmd+K` command palette over the nav registry** — modal search with fuzzy scoring over a flattened list of every sidebar entry — so any new component page is automatically searchable, no separate index to maintain. Keyboard nav, scroll-into-view for the active row, group label chips. Topnav gets a "Search…" pill showing `⌘K` on Mac and `Ctrl K` elsewhere
-- **Popover scroll containers — `overscroll-behavior: contain`** — TimePicker columns, Autocomplete dropdown, ContextMenu, Select, MenuButton, GridCellEditor combobox, and the docs CommandPalette no longer let wheel/touch scroll leak through to the page when you hit the edge of the popover list
-
-## What's New in v1.0.0-rc19
-
-- **`NumberField` external label rendering with new `id` and `labelTemplate` props** — `label` used to slot into the shadow `::part(label)`, which meant `NumberField` labels never matched the visual treatment of `TextField` / `Select` / `Autocomplete` (all of which render an external `.fluent-label`). Now `label` (string) and the new `labelTemplate` (Snippet) render as a sibling `<label for={id} class="fluent-label">` above the input, the shadow `::part(label)` is hidden, and a new `id` prop wires the external label to the input. Net effect: `<Field>`-wrapped NumberFields finally look identical to wrapped TextFields, and `labelTemplate` lets consumers mix icons / rich markup into the label
-- **`Switch` `labelPosition: "top" | "start"` prop + external label rendering** — same migration as NumberField: `label` / `labelTemplate` / `children` now render through a single external `.fluent-label`, the shadow `::part(label)` is hidden, and the new `labelPosition` flips between stacked-above (`"top"`, default) and inline-before (`"start"`) layouts. `checkedMessage` / `uncheckedMessage` slots inside the toggle are unchanged. Demo page at `/components/forms/switch` adds a radio control to flip positions side-by-side
-- **`<fluent-menu>` popover wrappers — gray-pixel corners + invisible elevation on dark themes** — `MenuButton`, `QuickGrid` context menu, and `Tabs` overflow menu all wrap `<fluent-menu>` in a portaled `<div>` that Floating UI's `size` middleware caps with `max-height` + `overflow-y: auto`. The wrapper had no `border-radius`, so its square corners peeked out behind the inner menu's rounded corners as gray pixels against any non-white surface. Same wrappers relied on `<fluent-menu>`'s shadow-DOM elevation, which is barely visible against dark themes. All three wrappers now paint `background: transparent` + matching `border-radius` (`var(--layer-corner-radius, …)`) + the same elevation shadow that `ContextMenu` already uses
-
 ## Features
 
 - 🎨 **Complete FluentUI Component Set** - Wraps all major FluentUI web components

package/dist/components/InputFile.svelte

@@ -1461,6 +1461,75 @@
 		{/if}
 	{/snippet}
 
+	{#snippet overallFooter()}
+		{#if uploadFileCallback && items.length > 0}
+			<div class="file-list-footer">
+				<div
+					class="footer-progress"
+					role="progressbar"
+					aria-valuenow={Math.round(overallProgress)}
+					aria-valuemin="0"
+					aria-valuemax="100"
+				>
+					<div class="footer-progress-fill" style:width="{overallProgress}%"></div>
+				</div>
+				<div class="footer-stats">
+					<span class="footer-stats-text">
+						{labels.totalProgress({
+							completed: completedCount,
+							failed: failedCount,
+							total: items.length,
+							uploadedBytes,
+							totalBytes,
+							percent: overallProgress
+						})}
+					</span>
+					{#if anyUploading || anyPaused || anyFailed}
+						<div class="footer-actions">
+							{#if anyUploading}
+								<button
+									type="button"
+									class="footer-action-button"
+									onclick={(e) => {
+										e.stopPropagation()
+										pauseAll()
+									}}
+								>
+									{labels.pauseAll}
+								</button>
+							{/if}
+							{#if anyPaused}
+								<button
+									type="button"
+									class="footer-action-button"
+									onclick={(e) => {
+										e.stopPropagation()
+										resumeAll()
+									}}
+								>
+									{labels.resumeAll}
+								</button>
+							{/if}
+							{#if anyFailed}
+								<button
+									type="button"
+									class="footer-action-button"
+									onclick={(e) => {
+										e.stopPropagation()
+										retryAll()
+									}}
+								>
+									{labels.retryAll}
+								</button>
+							{/if}
+						</div>
+					{/if}
+					<span class="footer-stats-percent">{Math.round(overallProgress)}%</span>
+				</div>
+			</div>
+		{/if}
+	{/snippet}
+
 	{#if listAppearance === "chips" && items.length > 0}
 		<!-- chips-row only renders when there are items to show. With zero items,
 		     fall through to the plain selector-wrap so the card stays at its
@@ -1481,6 +1550,7 @@
 				{@render chipsList()}
 			</div>
 		</div>
+		{@render overallFooter()}
 	{:else}
 		<div class="fluent-inputfile__selector-wrap" bind:this={selectorWrapEl}>
 			{@render selectorBlock()}
@@ -1687,72 +1757,7 @@
 				{/if}
 			</div>
 
-			{#if uploadFileCallback && items.length > 0}
-				<div class="file-list-footer">
-					<div
-						class="footer-progress"
-						role="progressbar"
-						aria-valuenow={Math.round(overallProgress)}
-						aria-valuemin="0"
-						aria-valuemax="100"
-					>
-						<div class="footer-progress-fill" style:width="{overallProgress}%"></div>
-					</div>
-					<div class="footer-stats">
-						<span class="footer-stats-text">
-							{labels.totalProgress({
-								completed: completedCount,
-								failed: failedCount,
-								total: items.length,
-								uploadedBytes,
-								totalBytes,
-								percent: overallProgress
-							})}
-						</span>
-						{#if anyUploading || anyPaused || anyFailed}
-							<div class="footer-actions">
-								{#if anyUploading}
-									<button
-										type="button"
-										class="footer-action-button"
-										onclick={(e) => {
-											e.stopPropagation()
-											pauseAll()
-										}}
-									>
-										{labels.pauseAll}
-									</button>
-								{/if}
-								{#if anyPaused}
-									<button
-										type="button"
-										class="footer-action-button"
-										onclick={(e) => {
-											e.stopPropagation()
-											resumeAll()
-										}}
-									>
-										{labels.resumeAll}
-									</button>
-								{/if}
-								{#if anyFailed}
-									<button
-										type="button"
-										class="footer-action-button"
-										onclick={(e) => {
-											e.stopPropagation()
-											retryAll()
-										}}
-									>
-										{labels.retryAll}
-									</button>
-								{/if}
-							</div>
-						{/if}
-						<span class="footer-stats-percent">{Math.round(overallProgress)}%</span>
-					</div>
-				</div>
-			{/if}
+			{@render overallFooter()}
 		</div>
 	{/snippet}
 

package/dist/version.d.ts

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

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-rc21";
+export const VERSION = "1.0.0-rc22";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-fluentui",
-	"version": "1.0.0-rc21",
+	"version": "1.0.0-rc22",
 	"description": "A Svelte wrapper library for Microsoft FluentUI web components",
 	"license": "MIT",
 	"author": "KeenMate",
@@ -11,7 +11,7 @@
 	"bugs": {
 		"url": "https://github.com/KeenMate/svelte-fluentui/issues"
 	},
-	"homepage": "https://github.com/KeenMate/svelte-fluentui#readme",
+	"homepage": "https://svelte-fluentui.keenmate.dev",
 	"scripts": {
 		"dev": "svelte-package --watch",
 		"package": "npm run package:pre-build && svelte-kit sync && svelte-package && npm run package:post-build && publint",