svelte-fluentui 1.3.0 → 1.3.2

package/README.md

@@ -2,23 +2,18 @@
 
 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.3.0
-
-- **`Panel` — new slide-in side-panel primitive** — fixed-position, edge-anchored container with a single `children` slot and CSS-driven open/close transitions. Props cover physical sides (`left`/`right`), logical sides (`start`/`end` that follow RTL), `width`, `overlay`, `closeOnOutsideClick`, `closeOnEscape`, and a new `top` offset so the panel + overlay can sit below a sticky header (e.g. TopNav) and leave the trigger button clickable. Portals to `document.body` with direction captured before portal so locally-RTL wrappers still anchor correctly. First-class demo at `/components/navigation-layout/panel`.
-- **`TopNav` drawer rebuilt on `Panel`; container queries replace media queries** — the bespoke `.mobile-sidebar` div with hand-rolled `left: -280px` / `transition` CSS is gone, replaced with `<Panel side="start" width="280px" top="{height}px">` so Escape-close, portal, overlay outside-click, and `aria-modal` all come for free. The collapse breakpoint is now an `@container topnav (max-width: 960px)` query keyed on the nav's own width (aligns with Grid's `md`), so behavior is intrinsic to the bar regardless of where it's mounted. `items` auto-populate the drawer, the hamburger only renders when there's content to open, and the action slot now stays visible at every width.
-- **`TopNav` — `brandTemplate`, `drawerContent`, and `collapse` snippets/props** — `brandTemplate` replaces the default `<a>` brand rendering so consumers can compose logo + wordmark + version badge as one unit; `drawerContent: Snippet<[() => void]>` renders custom content inside the mobile drawer and receives a `closeDrawer` callback so link clicks can dismiss the drawer before navigation; `collapse: "auto" | "always" | "never"` overrides the container-query state when the consumer drives sidebar visibility from its own responsive breakpoint. First demo page added at `/components/navigation-layout/topnav`.
-- **`Footer` — `start` / `center` / `end` named snippets with a truly-centered grid layout** — Footer previously had a single `children` slot, so a "© left, brand center, version right" arrangement required inline `justify-content: space-between` and hoping the middle item floated where you wanted. The new snippets switch Footer into a CSS Grid (`1fr auto 1fr`) where the center column is genuinely centered regardless of side-section widths, with explicit `grid-column` placement so a missing section doesn't reflow the others. New `stack` prop (default `true`) collapses to a single inline-start column below 600px via a container query keyed on the footer itself. RTL flips `start` ↔ `end` automatically.
-- **`Footer` — class namespaced as `.fluent-footer`, wired to the dedicated theme tokens, thin-strip bug fixed** — the rendered class went from generic `.footer` (collided with anything else using that name) to `.fluent-footer`, the rule now reads from `--fluent-footer-bg/text/border` (which were defined in the theme system but unused) with the previous neutral-layer values as fallback, a duplicate Blazor-port `.footer` rule was deleted, and `min-height: 48px` + `padding: 0.75rem 1rem` replaces the original horizontal-only padding so a default Footer is no longer a ~24px thin strip. First dedicated demo page at `/components/navigation-layout/footer`.
-- **Docs site dogfoods the new primitives** — the hand-rolled `<div class="topnav">` with ~90 lines of parallel CSS is replaced with `<TopNav class="docs-topnav" collapse="always">` using `brandTemplate` for the brand+version pair and `drawerContent` for the mobile sidebar nav. The sidebar nav is extracted into a single `{#snippet sidebarNav(closeDrawer)}` rendered both as the desktop sidebar and inside the TopNav drawer, with the sidebar/hamburger handoff at `lg` (1280px) instead of `md` so laptops at 1280×800 stay roomy. The footer at the bottom of every page now uses the three-part layout (© + MIT / attribution / GitHub + npm + version chip).
-
-## What's New in v1.2.0
-
-- **`Divider` — `orientation` and `role` props now forwarded** — the wrapper previously only exposed `class` and `style`, so vertical dividers and `role="presentation"` (for decorative separators that should be skipped by screen readers) weren't expressible through the Svelte API. `<fluent-divider>` natively supports both via fast-foundation; the wrapper just forwards them. Defaults preserved (`orientation="horizontal"`, `role="separator"`) so every existing call site renders identically. First proper demo page at `/components/divider` — the previous `/divider` route was an HMR sandbox and the components-list link to `/components/divider` was a 404.
-- **`Select` rewritten as a custom component** — the wrapped `<fluent-select>` rendered its dropdown listbox inside its own shadow DOM with a static `--max-height`, so inside Dialogs and other overflow-hidden ancestors the option list extended past the viewport with no scroll cutoff. New custom Select portals the listbox to `document.body` via `PositioningRegion` (Floating-UI), so it escapes any clipping ancestor and stays inside the viewport regardless of where the trigger sits. Full keyboard wiring (Arrow/Home/End/Enter/Space/Escape/Tab, single-char type-ahead with cycle-through-matches), multi-mode renders an always-expanded inline listbox matching FluentUI Blazor, and a hidden `<input>` keeps native form submission working. Public API mostly preserved; `value` widened to `string | string[]` for multi mode, `open` is now bindable, and `position` means "force placement" rather than the old static attribute.
-- **`PositioningRegion` — new `availableHeight` prop** — writes the computed remaining viewport height into the `--available-height` CSS custom property on the floating element on every reposition, so dropdowns can cap their max-height with `max-height: var(--available-height, <fallback>)` instead of hard-coding a value that overflows on small screens or near viewport edges. Works alongside `matchWidth` in a single `size()` middleware pass.
-- **`.fluent-value-label` — new canonical class for inline value labels next to a control** — separates field labels (the bold, stacked-above text that names a form field) from value labels (the inline text next to a single control that describes the value, e.g. "Remember me" next to a checkbox). Value labels are normal weight with a pointer cursor, matching FluentUI Blazor's pickers and `<fluent-radio>`'s slotted label. `data-disabled` / `data-readonly` on the wrapper drive a `not-allowed` cursor when the host is inactive.
-- **`Checkbox` & `Switch` — inline label fixes** — labels were rendering bold with a text cursor (using the field-label class) and clicks on the label didn't reliably toggle the control when no `id` was passed. Switched to the new `.fluent-value-label` class, and a stable per-instance `fallbackId` is now used as `<label for>` / element `id` when the caller didn't supply one, so label-click-to-toggle works regardless of whether an `id` was passed in. Applies across all three `labelPosition` values (`top` / `start` / `end`).
-- **`Select` & `Combobox` — field-label class consolidated to shared `.fluent-label`** — both components had component-scoped `.select-label` / `.combobox-label` rules that duplicated the canonical `.fluent-label` declarations from `assets/styles/components.scss`. A single library-wide tweak to label styling now lives in one place. After this change, every component that renders a stacked field label uses `.fluent-label`, Field uses its BEM-namespaced `fluent-field__label`, and Checkbox/Switch use `.fluent-value-label` — three classes total, each with a clear semantic role.
+## What's New in v1.3.2
+
+- **`TopNav` — hamburger flexibility via `menuToggleSize` + `menuToggleTemplate`** — `menuToggleSize` (default `42`) flows through a `--topnav-toggle-size` CSS variable so the glyph and close-icon scale proportionally with the box. `menuToggleTemplate: Snippet<[{open, toggle}]>` lets consumers render any button shape — text + chevron, brand-styled accent button, custom SVG — and still wire up state correctly. Both paths render inside a wrapper that owns the visibility/order/collapse rules, so custom templates automatically inherit hide-when-wide / show-when-narrow / stay-visible-when-pinned behavior.
+- **`TopNav` — default hamburger is now a plain `<button>` instead of a fluent-button** — the previous default rendered `<Button appearance="stealth">` which still carried button chrome (hover background fill, boxed visual weight). Replaced with a vanilla `<button>` styled `background: transparent; border: none; padding: 0`, with `opacity: 0.7` on hover and a `:focus-visible` accent outline for keyboard nav. Reads as just the icon, not a button containing an icon. Click target still fills the full `menuToggleSize` box for touch reachability.
+- **`Badge` — new `radius` prop overrides the binary rounded-rect / pill shape with an arbitrary border-radius** — Badge had exactly two shape modes (default 4px corner / `circular={true}` pill) mirroring Microsoft's FluentUI Badge `shape` prop. The new `radius?: string` accepts any CSS length (`8px`, `0.5rem`, `var(--my-radius)`) and emits inline `border-radius`, winning over both class rules via CSS specificity. Plays nicely with `circular={true}` — the circular sizing wins, the radius wins, so you get pill-sized badges with non-pill corners if you want.
+
+## What's New in v1.3.1
+
+- **`Panel` — new `pinned` prop renders the panel as an inline `<aside>` instead of a portal'd overlay** — flips the rendering entirely: no portal, no backdrop, no transforms, no escape/outside-click handlers, `position: relative` so it participates in the parent's flex/grid layout, `align-self: stretch` so it fills its grid cell vertically. `open` is still respected so the panel can hide and let its grid cell collapse. Explicit z-index forms its own stacking context so overlay Panels opened on top still layer above as expected.
+- **`TopNav` — new `drawerPinned` + `drawerWidth` props turn the drawer into a permanent left rail with an always-visible hamburger toggle** — composes Panel's `pinned` so the same `drawerContent` snippet that renders the mobile overlay drawer also renders the desktop rail. `drawerWidth` (default `"280px"`) propagates to both modes. The hamburger stays visible when pinned so the user can collapse the rail back away, and an effect re-syncs the drawer's `open` state to `drawerPinned` on viewport flips (narrow→wide auto-opens, wide→narrow auto-closes).
+- **Docs layout switched to a single nav surface at every width via `drawerPinned`** — the duplicate desktop sidebar `GridItem` is gone; TopNav's drawer now renders as a pinned `<aside>` at ≥1024px and collapses to the hamburger overlay below. The layout uses CSS Grid with `grid-template-areas` and a `matchMedia` listener to drive `drawerPinned`. The pinned rail is `position: sticky` below the topnav and the scrollbar sits flush with the rail's inside edge.
+- **`TopNav` — tightened horizontal padding from `1.5rem` to `0.5rem`** — the bar's inside edges felt cramped relative to the rest of the content. Brand + hamburger now sit closer to the inline-start edge and the action slot sits closer to the inline-end edge.
 
 ## Features
 

package/dist/components/Badge.svelte

@@ -18,6 +18,7 @@
 		fill?: string
 		appearance?: BadgeAppearance
 		circular?: boolean
+		radius?: string
 		children?: SlotType
 		onclick?: (ev: MouseEvent) => void
 		class?: string
@@ -29,6 +30,7 @@
 		fill = undefined,
 		appearance = "lightweight",
 		circular = false,
+		radius = undefined,
 		children = undefined,
 		onclick = undefined,
 		class: className = "",
@@ -51,7 +53,9 @@
 		return styles
 	})
 
-	let computedStyle = $derived([colorStyles, style].filter(Boolean).join(" "))
+	let radiusStyle = $derived(radius ? `border-radius: ${radius};` : "")
+
+	let computedStyle = $derived([colorStyles, radiusStyle, style].filter(Boolean).join(" "))
 
 	let classes = $derived.by(() => {
 		let cls = ["badge"]

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

@@ -15,6 +15,7 @@ type Props = {
     fill?: string;
     appearance?: BadgeAppearance;
     circular?: boolean;
+    radius?: string;
     children?: SlotType;
     onclick?: (ev: MouseEvent) => void;
     class?: string;

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

@@ -764,7 +764,7 @@ declare function $$render<T>(): {
                     row: T;
                     rowIndex: number;
                 }) => void | Promise<void>) | undefined;
-            }, "title" | "group" | "icon" | "id" | "row">> & Omit<{
+            }, "group" | "title" | "icon" | "id" | "row">> & Omit<{
                 id: string;
                 icon: string;
                 title: string;
@@ -778,7 +778,7 @@ declare function $$render<T>(): {
                     row: T;
                     rowIndex: number;
                 }) => void | Promise<void>) | undefined;
-            }, "title" | "group" | "icon" | "id" | "row">;
+            }, "group" | "title" | "icon" | "id" | "row">;
             rowIndex: number;
             row: T;
         }) => void) | undefined;