svelte-fluentui 1.0.0-rc21 → 1.0.0

package/README.md

@@ -2,6 +2,28 @@
 
 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
+
+The first stable release. Headline changes since the rc series:
+
+- **`Calendar` — generic `highlightDates` + `selectDates` function-prop split (replaces `selectDatesHover`)** — two consumer-supplied pure functions of shape `(date: Date) => Date[]` drive the hover preview and the click selection separately, so you can preview a week on hover but commit only 3 days on click. Multiple mode UNIONS the returned group with the existing array (clicked day toggles the whole group); range mode replaces. Consumer functions are authoritative — the calendar no longer re-filters against `disabledDateFunc`, so consumers are free to skip disabled days, jump past them to reach a target count, or include them deliberately for special highlighting. Two new demos: "Range with SelectOneWeek" (hovering any day highlights Mon→Sun, click commits the whole week) and "Multiple with Select3Days" (hover/click selects the day ± 1 neighbor).
+- **`Calendar` — `maxSelectableDays` + `onSelectionError` callback with structured payload** — multiple/range modes now gate every selection against an upper bound. Overflow does NOT modify `selectedDates`; instead fires `onSelectionError({code, message, attempted, current, max})` with a discriminated-union `code` (`"max_selectable_days_exceeded"` for now, future codes won't break consumer dispatch). New exported `CalendarSelectionError` type. Demo "Multiple (max 5 days)" shows the Alert-remount pattern for repeat-error feedback.
+- **`Calendar` — `onDayHover?(date: Date | null) => void` pure-observation callback** — fires with the hovered `Date` regardless of `selectMode` / disabled state (so tooltips can react to inactive days too), and with `null` when the cursor leaves the grid. Distinct from `highlightDates` (which DRIVES rendering); `onDayHover` is for tooltips, analytics, "currently hovering" readouts.
+- **`Calendar` — public type re-exports** — `CalendarView`, `CalendarSelectMode`, `CalendarSelectionError`, `CalendarSelectionErrorCode` now importable from the package entry point.
+- **`Checkbox` — three state-driven message props (`checkedMessage` / `uncheckedMessage` / `intermediateMessage`)** — Switch already had `checkedMessage` / `uncheckedMessage`; Checkbox catches up plus the three-state variant for `withIntermediate`. All three accept `string | Snippet`, rendered as a sibling `.checkbox-message` after the box.
+- **`Checkbox` — `labelPosition="end"` (now the default)** — was `"start"` (label on the LEFT, atypical for forms). New default puts the label after the box `[☐] Label text`. Implemented via flex `order` so a trailing status message stays after the [box, label] pair without flipping.
+- **Docs — per-page SEO metadata via shared `<Meta>` component on all 63 routes** — every page now emits its own `<title>`, description, keywords, canonical, Open Graph, and Twitter Card tags. Browser tabs, bookmarks, and JS-capable crawlers (Google) get the per-page tags; non-JS crawlers (Slack, Discord, Facebook, LinkedIn, X) still see the static `app.html` fallback since the docs site runs as a pure SPA.
+- **Docs — every `<h1>` / `<h2>` / `<h3>` in component pages is now a shareable anchor with a copy-link button on hover** — pure post-render DOM decoration at the layout level, so it works on every existing and future component page automatically. Stable slugified ids, `-2`/`-3` suffixes on collisions, copy-to-clipboard with flash feedback.
+- **Docs — shared `<References>` component replaces hand-rolled references cards on 48 pages** — single source of truth for the references block; `na: true` / `custom: true` variants for "Not available in FluentUI Web Components" and "Custom component" disabled spans with tooltips. Format tweaks now live in one file instead of 48.
+- **Docs — API tables relocated to the BOTTOM of every component page, AFTER the Examples** — the previous layout forced visitors to scroll past dense reference material to reach the examples. New order: `[title + description] → [References] → [Examples] → [API tables]`.
+- **`InputFile` — 2547-line component split across six files for maintainability** — types extracted to `InputFile.types.ts`, utilities + default labels to `InputFile.utils.ts`, ~725 lines of inline CSS to an external SCSS partial, and the three `selectorAppearance` variants pulled into `InputFileSelectorCard.svelte` / `InputFileSelectorButton.svelte` / `InputFileSelectorMinimal.svelte`. Public API unchanged; type-check clean.
+
+### Previously (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 +35,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
@@ -471,7 +476,7 @@ npm install svelte-fluentui
 ```js
 // In any browser console, after the page has loaded svelte-fluentui:
 window.components["svelte-fluentui"].version()
-// => "1.0.0-rc08"
+// => "1.0.0"
 ```
 
 Also available as a direct import: