svelte-fluentui 1.2.0 → 1.3.1

package/README.md

@@ -2,22 +2,21 @@
 
 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.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.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.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.
+
+## 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).
 
 ## Features
 

package/dist/assets/styles/fluent-ui/fluent-components.scss

@@ -1068,16 +1068,6 @@ div[dragged-over="true"] {
 	animation: blinker 1s linear infinite;
 }
 
-/* _content/Microsoft.FluentUI.AspNetCore.Components/Components/Footer/FluentFooter.razor.rz.scp.css */
-.footer {
-	display: flex;
-	z-index: 10;
-	flex-direction: row;
-	font-family: var(--body-font);
-	font-weight: normal;
-	font-size: var(--type-ramp-minus-1-font-size);
-	line-height: var(--type-ramp-minus-1-line-height);
-}
 
 /* _content/Microsoft.FluentUI.AspNetCore.Components/Components/Forms/FluentValidationMessage.razor.rz.scp.css */
 .validation-message {

package/dist/assets/styles/layout.scss

@@ -35,12 +35,50 @@
 }
 
 // Footer component
-.footer {
+.fluent-footer {
 	display: flex;
 	align-items: center;
-	background-color: var(--neutral-layer-4);
-	color: var(--neutral-foreground-rest);
-	border-top: 1px solid var(--neutral-stroke-layer-rest);
-	padding: 0 1rem;
+	background-color: var(--fluent-footer-bg, var(--neutral-layer-4));
+	color: var(--fluent-footer-text, var(--neutral-foreground-rest));
+	border-top: 1px solid var(--fluent-footer-border, var(--neutral-stroke-layer-rest));
+	padding: 0.75rem 1rem;
+	min-height: 48px;
+	z-index: 10;
 	transition: background-color 0.3s ease, color 0.3s ease;
 }
+
+// Three-part mode: switch to CSS Grid so the center column is truly centered
+// (1fr | auto | 1fr — side columns absorb equal slack regardless of widths).
+// Explicit grid-column placement so a missing section doesn't shift the
+// remaining ones into the wrong column.
+.fluent-footer--three-part {
+	display: grid;
+	grid-template-columns: 1fr auto 1fr;
+	gap: 1rem;
+}
+
+.fluent-footer__start  { grid-column: 1; justify-self: start; }
+.fluent-footer__center { grid-column: 2; justify-self: center; }
+.fluent-footer__end    { grid-column: 3; justify-self: end; }
+
+// Stacking on narrow widths — opt-in via the `stack` prop (default true).
+// Container query keyed on the footer itself so behavior is intrinsic to
+// the bar's width, not the viewport (mirrors TopNav's approach).
+.fluent-footer--stacks {
+	container-type: inline-size;
+	container-name: fluent-footer;
+}
+
+@container fluent-footer (max-width: 600px) {
+	.fluent-footer--stacks {
+		grid-template-columns: 1fr;
+		gap: 0.5rem;
+	}
+
+	.fluent-footer--stacks .fluent-footer__start,
+	.fluent-footer--stacks .fluent-footer__center,
+	.fluent-footer--stacks .fluent-footer__end {
+		grid-column: 1;
+		justify-self: start;
+	}
+}

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

@@ -32,7 +32,7 @@ declare function $$render<T>(): {
             filter?: ((filterValue: string, row: T) => boolean | null) | undefined;
             isEditable?: boolean | ((row: T) => boolean) | undefined;
             editor?: "number" | "select" | "text" | "custom" | "autocomplete" | "combobox" | "checkbox" | "date";
-            editTrigger?: "button" | "click" | "dblclick" | "always" | "navigate";
+            editTrigger?: "click" | "dblclick" | "button" | "always" | "navigate";
             editorOptions?: {
                 options?: {
                     [key: string]: unknown;
@@ -123,7 +123,7 @@ declare function $$render<T>(): {
         style?: string;
         cellTemplate?: SlotType;
         editable?: boolean;
-        editTrigger?: "button" | "click" | "dblclick" | "always" | "navigate";
+        editTrigger?: "click" | "dblclick" | "button" | "always" | "navigate";
         dropdownShowOnFocus?: boolean;
         isRowEditable?: boolean | ((row: T) => boolean) | undefined;
         checkboxAlwaysEditable?: boolean;
@@ -201,7 +201,7 @@ declare function $$render<T>(): {
                     filter?: ((filterValue: string, row: T) => boolean | null) | undefined;
                     isEditable?: boolean | ((row: T) => boolean) | undefined;
                     editor?: "number" | "select" | "text" | "custom" | "autocomplete" | "combobox" | "checkbox" | "date";
-                    editTrigger?: "button" | "click" | "dblclick" | "always" | "navigate";
+                    editTrigger?: "click" | "dblclick" | "button" | "always" | "navigate";
                     editorOptions?: {
                         options?: {
                             [key: string]: unknown;
@@ -310,7 +310,7 @@ declare function $$render<T>(): {
                     filter?: ((filterValue: string, row: T) => boolean | null) | undefined;
                     isEditable?: boolean | ((row: T) => boolean) | undefined;
                     editor?: "number" | "select" | "text" | "custom" | "autocomplete" | "combobox" | "checkbox" | "date";
-                    editTrigger?: "button" | "click" | "dblclick" | "always" | "navigate";
+                    editTrigger?: "click" | "dblclick" | "button" | "always" | "navigate";
                     editorOptions?: {
                         options?: {
                             [key: string]: unknown;
@@ -418,7 +418,7 @@ declare function $$render<T>(): {
                     filter?: ((filterValue: string, row: T) => boolean | null) | undefined;
                     isEditable?: boolean | ((row: T) => boolean) | undefined;
                     editor?: "number" | "select" | "text" | "custom" | "autocomplete" | "combobox" | "checkbox" | "date";
-                    editTrigger?: "button" | "click" | "dblclick" | "always" | "navigate";
+                    editTrigger?: "click" | "dblclick" | "button" | "always" | "navigate";
                     editorOptions?: {
                         options?: {
                             [key: string]: unknown;
@@ -529,7 +529,7 @@ declare function $$render<T>(): {
                     filter?: ((filterValue: string, row: T) => boolean | null) | undefined;
                     isEditable?: boolean | ((row: T) => boolean) | undefined;
                     editor?: "number" | "select" | "text" | "custom" | "autocomplete" | "combobox" | "checkbox" | "date";
-                    editTrigger?: "button" | "click" | "dblclick" | "always" | "navigate";
+                    editTrigger?: "click" | "dblclick" | "button" | "always" | "navigate";
                     editorOptions?: {
                         options?: {
                             [key: string]: unknown;
@@ -638,7 +638,7 @@ declare function $$render<T>(): {
                 filter?: ((filterValue: string, row: T) => boolean | null) | undefined;
                 isEditable?: boolean | ((row: T) => boolean) | undefined;
                 editor?: "number" | "select" | "text" | "custom" | "autocomplete" | "combobox" | "checkbox" | "date";
-                editTrigger?: "button" | "click" | "dblclick" | "always" | "navigate";
+                editTrigger?: "click" | "dblclick" | "button" | "always" | "navigate";
                 editorOptions?: {
                     options?: {
                         [key: string]: unknown;

package/dist/components/layout/Footer.svelte

@@ -2,20 +2,46 @@
 	import type {SlotType} from "../../types/index.js"
 
 	type Props = {
+		start?: SlotType
+		center?: SlotType
+		end?: SlotType
 		children?: SlotType
+		/** Stack to a single column below 600px container width. Only applies in 3-part mode. */
+		stack?: boolean
 		class?: string
 		style?: string
 	}
 
 	let {
+		start = undefined,
+		center = undefined,
+		end = undefined,
 		children = undefined,
+		stack = true,
 		class: className = "",
 		style = ""
 	}: Props = $props()
 
-	let element: HTMLElement | undefined = $state()
+	const hasThreeParts = $derived(!!start || !!center || !!end)
 </script>
 
-<footer bind:this={element}  {style} class="footer {className}">
-	{@render children?.()}
+<footer
+	{style}
+	class="fluent-footer {className}"
+	class:fluent-footer--three-part={hasThreeParts}
+	class:fluent-footer--stacks={hasThreeParts && stack}
+>
+	{#if hasThreeParts}
+		{#if start}
+			<div class="fluent-footer__start">{@render start()}</div>
+		{/if}
+		{#if center}
+			<div class="fluent-footer__center">{@render center()}</div>
+		{/if}
+		{#if end}
+			<div class="fluent-footer__end">{@render end()}</div>
+		{/if}
+	{:else}
+		{@render children?.()}
+	{/if}
 </footer>

package/dist/components/layout/Footer.svelte.d.ts

@@ -1,6 +1,11 @@
 import type { SlotType } from "../../types/index.js";
 type Props = {
+    start?: SlotType;
+    center?: SlotType;
+    end?: SlotType;
     children?: SlotType;
+    /** Stack to a single column below 600px container width. Only applies in 3-part mode. */
+    stack?: boolean;
     class?: string;
     style?: string;
 };

package/dist/components/layout/Panel.svelte

@@ -0,0 +1,311 @@
+<script lang="ts" module>
+	type PanelHandle = {
+		closeOnEscape: () => boolean
+		hide: () => void
+	}
+	const openPanelStack: PanelHandle[] = []
+	let escListenerAttached = false
+
+	function handleGlobalEscape(e: KeyboardEvent) {
+		if (e.key !== "Escape") return
+		const top = openPanelStack[openPanelStack.length - 1]
+		if (!top) return
+		if (!top.closeOnEscape()) return
+		e.preventDefault()
+		e.stopPropagation()
+		top.hide()
+	}
+
+	function pushPanel(handle: PanelHandle) {
+		openPanelStack.push(handle)
+		if (!escListenerAttached && typeof document !== "undefined") {
+			document.addEventListener("keydown", handleGlobalEscape, true)
+			escListenerAttached = true
+		}
+	}
+
+	function popPanel(handle: PanelHandle) {
+		const idx = openPanelStack.lastIndexOf(handle)
+		if (idx >= 0) openPanelStack.splice(idx, 1)
+		if (openPanelStack.length === 0 && escListenerAttached && typeof document !== "undefined") {
+			document.removeEventListener("keydown", handleGlobalEscape, true)
+			escListenerAttached = false
+		}
+	}
+</script>
+
+<script lang="ts">
+	import {onDestroy} from "svelte"
+	import type {SlotType} from "../../types/index.js"
+
+	type Side = "left" | "right" | "start" | "end"
+
+	type Props = {
+		open?: boolean
+		side?: Side
+		width?: string
+		top?: string
+		overlay?: boolean
+		closeOnOutsideClick?: boolean
+		closeOnEscape?: boolean
+		pinned?: boolean
+		onclose?: () => void
+		children?: SlotType
+		class?: string
+		style?: string
+	}
+
+	let {
+		open = $bindable(false),
+		side = "right",
+		width = "320px",
+		top = "0",
+		overlay = true,
+		closeOnOutsideClick = true,
+		closeOnEscape = true,
+		pinned = false,
+		onclose = undefined,
+		children = undefined,
+		class: className = undefined,
+		style = undefined
+	}: Props = $props()
+
+	let panelEl: HTMLElement | undefined = $state()
+	let isRTL = $state(false)
+
+	const handle: PanelHandle = {
+		closeOnEscape: () => closeOnEscape,
+		hide: () => close()
+	}
+
+	let wasOpen = false
+	$effect(() => {
+		if (pinned) return
+		if (open && !wasOpen) {
+			pushPanel(handle)
+			wasOpen = true
+		} else if (!open && wasOpen) {
+			popPanel(handle)
+			wasOpen = false
+		}
+	})
+
+	// Document-level outside-click detection — only needed when there's no
+	// overlay to catch the click. Deferred to the next task so the same click
+	// that opened the panel doesn't immediately close it.
+	$effect(() => {
+		if (pinned || !open || overlay || !closeOnOutsideClick) return
+		const id = setTimeout(() => {
+			document.addEventListener("pointerdown", handleOutsideClick, true)
+		}, 0)
+		return () => {
+			clearTimeout(id)
+			document.removeEventListener("pointerdown", handleOutsideClick, true)
+		}
+	})
+
+	function handleOutsideClick(e: PointerEvent) {
+		if (!panelEl) return
+		if (panelEl.contains(e.target as Node)) return
+		close()
+	}
+
+	onDestroy(() => {
+		if (wasOpen) popPanel(handle)
+	})
+
+	function close() {
+		open = false
+		onclose?.()
+	}
+
+	function onOverlayClick() {
+		if (closeOnOutsideClick) close()
+	}
+
+	// Combined: capture the original parent's direction BEFORE moving the node
+	// under <body>. Doing both in one action avoids relying on Svelte's
+	// multi-action source-order. We set `dir="rtl"` (so `inset-inline-*`
+	// resolves correctly) AND flip an isRTL flag (so a class-based selector can
+	// drive the rest of the styling without depending on attribute matching).
+	function setupRoot(node: HTMLElement) {
+		const parent = node.parentElement
+		if (parent && getComputedStyle(parent).direction === "rtl") {
+			node.setAttribute("dir", "rtl")
+			isRTL = true
+		}
+		document.body.appendChild(node)
+		return {
+			destroy() {
+				node.parentNode?.removeChild(node)
+			}
+		}
+	}
+</script>
+
+{#if pinned}
+	{#if open}
+		<aside
+			class="fluent-panel fluent-panel--pinned fluent-panel--pinned-{side} {className || ''}"
+			style="width: {width}; {style || ''}"
+		>
+			{@render children?.()}
+		</aside>
+	{/if}
+{:else}
+	<div
+		class="fluent-panel-root fluent-panel-root--{side} {className || ''}"
+		class:fluent-panel-root--open={open}
+		class:fluent-panel-root--rtl={isRTL}
+		style="--panel-top: {top};"
+		aria-hidden={!open}
+		use:setupRoot
+	>
+		{#if overlay}
+			<div
+				class="fluent-panel-overlay"
+				role="button"
+				tabindex={-1}
+				aria-label="Close panel"
+				onclick={onOverlayClick}
+				onkeydown={(e) => (e.key === "Enter" || e.key === " ") && onOverlayClick()}
+			></div>
+		{/if}
+
+		<div
+			bind:this={panelEl}
+			class="fluent-panel"
+			role="dialog"
+			aria-modal={overlay}
+			style="width: {width}; {style || ''}"
+		>
+			{@render children?.()}
+		</div>
+	</div>
+{/if}
+
+<style lang="scss">
+	.fluent-panel-root {
+		position: fixed;
+		top: var(--panel-top, 0);
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: var(--fluent-z-modal, 1050);
+		// Never block the page — only the overlay and the panel surface
+		// (re-enabled below) capture pointer events.
+		pointer-events: none;
+	}
+
+	.fluent-panel-overlay {
+		position: absolute;
+		inset: 0;
+		background-color: rgba(0, 0, 0, 0);
+		cursor: pointer;
+		pointer-events: none;
+		transition: background-color 0.25s ease;
+		z-index: var(--fluent-z-modal-backdrop, 1040);
+	}
+
+	.fluent-panel {
+		position: absolute;
+		top: 0;
+		height: 100%;
+		max-width: 90vw;
+		background-color: var(--neutral-layer-1, #ffffff);
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		pointer-events: none;
+		transition: transform 0.25s ease, visibility 0.25s ease;
+		visibility: hidden;
+		z-index: calc(var(--fluent-z-modal, 1050) + 1);
+	}
+
+	// Closed-state per-side transforms — declared BEFORE the --open rule so
+	// the open rule wins on source order at equal specificity.
+
+	// Physical sides — never flip with direction.
+	.fluent-panel-root--right .fluent-panel {
+		right: 0;
+		box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
+		transform: translateX(100%);
+	}
+
+	.fluent-panel-root--left .fluent-panel {
+		left: 0;
+		box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
+		transform: translateX(-100%);
+	}
+
+	// Logical sides — follow the writing direction (start = left in LTR, right in RTL).
+	.fluent-panel-root--start .fluent-panel {
+		inset-inline-start: 0;
+		box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
+		transform: translateX(-100%);
+	}
+
+	.fluent-panel-root--start.fluent-panel-root--rtl .fluent-panel {
+		inset-inline-start: unset;
+		right: 0;
+		box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
+		transform: translateX(100%);
+	}
+
+	.fluent-panel-root--end .fluent-panel {
+		inset-inline-end: 0;
+		box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
+		transform: translateX(100%);
+	}
+
+	.fluent-panel-root--end.fluent-panel-root--rtl .fluent-panel {
+		inset-inline-end: unset;
+		left: 0;
+		box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
+		transform: translateX(-100%);
+	}
+
+	.fluent-panel-root--open .fluent-panel-overlay {
+		background-color: rgba(0, 0, 0, 0.3);
+		pointer-events: auto;
+	}
+
+	// Match the (0,3,0) specificity of the RTL side overrides so the open
+	// transform wins on source order (this rule is last).
+	.fluent-panel-root.fluent-panel-root--open .fluent-panel {
+		transform: translateX(0);
+		visibility: visible;
+		pointer-events: auto;
+	}
+
+	// Pinned: render in normal flow as a regular column. None of the
+	// floating-panel positioning, transforms, or visibility gymnastics apply
+	// — caller is responsible for placing the <aside> via parent layout.
+	//
+	// `z-index` is explicit (not auto) so pinned forms its own stacking
+	// context — keeps overlay drawers (z-index 1050+) and their backdrops
+	// (1040) reliably above any pinned drawer, regardless of paint order.
+	// Override via --fluent-z-panel-pinned on the consumer side if multiple
+	// pinned panels need to layer relative to each other.
+	.fluent-panel--pinned {
+		position: relative;
+		top: auto;
+		height: auto;
+		max-width: none;
+		transform: none;
+		visibility: visible;
+		pointer-events: auto;
+		transition: none;
+		flex-shrink: 0;
+		align-self: stretch;
+		box-shadow: none;
+		border-inline-end: 1px solid var(--neutral-stroke-layer-rest, #e0e0e0);
+		z-index: var(--fluent-z-panel-pinned, 1);
+	}
+
+	.fluent-panel--pinned-end,
+	.fluent-panel--pinned-right {
+		border-inline-end: none;
+		border-inline-start: 1px solid var(--neutral-stroke-layer-rest, #e0e0e0);
+	}
+</style>

package/dist/components/layout/Panel.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { SlotType } from "../../types/index.js";
+type Side = "left" | "right" | "start" | "end";
+type Props = {
+    open?: boolean;
+    side?: Side;
+    width?: string;
+    top?: string;
+    overlay?: boolean;
+    closeOnOutsideClick?: boolean;
+    closeOnEscape?: boolean;
+    pinned?: boolean;
+    onclose?: () => void;
+    children?: SlotType;
+    class?: string;
+    style?: string;
+};
+declare const Panel: import("svelte").Component<Props, {}, "open">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;