svelte-fluentui 1.3.2 → 1.4.0

package/README.md

@@ -2,18 +2,17 @@
 
 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.2
+## What's New in v1.4.0
 
-- **`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.
+- **`MultiSplitter` — full rewrite as a Svelte 5 port of pureadmin.io's `pa-splitter`** — The old wrapper was a near-empty shell; the new component (`src/lib/components/layout/MultiSplitter.svelte` + `MultiSplitterPane.svelte`) is a real N-pane resizable container with drag-to-resize using a REBALANCE model (CLASSIC + TUNNEL absorbers so slack can punch through a rail wall), minimize-to-rail via the `minimize` prop with a configurable snap threshold, full keyboard nav + ARIA on the gutter, `localStorage` persistence via the `id` prop, and auto-accordion mode when the container can't fit all panes' mins. Drag math is rAF-throttled with a 2px jitter floor; pane Cards auto-adapt to railed state with the first child becoming a rotated rail title in horizontal orientation. Three callbacks (`onresize`, `oncollapse`, `onexpand`) and full type exports (`MultiSplitterResizeDetail`, `MultiSplitterToggleDetail`).
+- **`MultiSplitter` — gutter drag against a railed pane is a one-way valve: inward inert, outward expands** — Earlier iterations either flipped the rail open instantly on `pointerdown` (the user saw the card "expand" just from pressing the gutter) or refused to expand from any drag at all. Final behaviour: inward drag (toward the rail) bails before reaching the drag math so the gutter doesn't move; outward drag past 2px releases the rail, fires `onexpand`, and grows the pane following the cursor with the rail floor clamping until `primary.min` is reached. Dblclick and rail-body click stay as alternative expand gestures. The result matches what users actually expect from a collapsed pane — you can pull it open but you can't accidentally crush it further.
+- **`Select` — encapsulated in a single render root via `display: contents`** — The component renders 2-4 sibling elements at root depending on mode (label + hidden source mirror + trigger + optional hidden form input in single mode; label + inline listbox in multi mode). That meant a consumer dropping `<Select>` into a flex or grid had to reason about the internal sibling structure to align it. Wrapped everything in `<div class="select-root">` with `display: contents` so the wrapper is invisible to flex/grid layout (children still participate as direct items of the consumer's container), but the component now reads as a single logical root from the outside. Zero behaviour change for existing layout code.
 
-## What's New in v1.3.1
+## What's New in v1.3.3
 
-- **`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.
+- **Custom-element attribute bindings stop stringifying `undefined` / `null` / `false`** — Recurring regression (last fixed ~5 months ago, reintroduced during the structural rework) that affected 22 wrappers including `TextField`, `Textarea`, `Switch`, `Slider`, `Checkbox`, `Button`, `Anchor`, `Accordion(Item)`, `BreadcrumbItem`, `DataGrid(Row/Cell)`, `Dialog`, `Listbox`, `MenuButton`, `Option`, `TabPanel`, `Toolbar`, `NumberField`, `Combobox`, plus `Paginator` and `QuickGrid` sub-buttons. Svelte 5 sets properties on custom elements rather than attributes, and FAST's `@attr` decorators stringify whatever they receive — so unset props were rendering as `title="undefined"`, `readonly="false"`, `disabled="false"`, etc. The `readonly`/`disabled` cases were the worst symptom because `[readonly]` and `[disabled]` CSS attribute-presence selectors match regardless of value, leaving an enabled field with a not-allowed cursor. All affected wrappers converted to the conditional-spread pattern (`{...(title ? { title } : {})}`) which physically omits the attribute from the template when unset. Variants `{...(value != null ? { value } : {})}` for inputs (so `value=""` still renders) and `{...(attr !== undefined ? { attr } : {})}` for numeric props (so `0` survives) are used where falsy values are meaningful.
+
+- **`TextField` demo page — new Readonly and Disabled example sections** — The `/components/forms/text-field` showcase previously demonstrated only the basic input and `autocomplete` variants; the readonly and disabled states (the surface that exposed the bug above) had no live example. Added Readonly with outline + filled variants and Disabled with three variants (outline + placeholder, outline + value, filled + value).
 
 ## Features
 

package/dist/components/Accordion.svelte

@@ -84,6 +84,6 @@
 	}
 </script>
 
-<fluent-accordion expand-mode={multi}  onchange={handleAccordionChange}>
+<fluent-accordion {...(multi ? { "expand-mode": multi } : {})} onchange={handleAccordionChange}>
 	{@render children?.()}
 </fluent-accordion>

package/dist/components/AccordionItem.svelte

@@ -43,14 +43,18 @@
 
 		onchange?.(ev, target.getAttribute("expanded") === "")
 	}
+
+	const isExpanded = $derived(
+		expanded === undefined && ctx.value !== undefined ? !!ctx.value?.includes(id) : expanded
+	)
 </script>
 
 <!-- todo: investigate flicker during switching of accordions -->
 <fluent-accordion-item
-	{id}
+	{...(id ? { id } : {})}
 	data-custom-id={id}
-	heading-level={headingLevel}
-	expanded={expanded === undefined && ctx.value !== undefined ? !!ctx.value?.includes(id) : expanded}
+	{...(headingLevel !== undefined ? { "heading-level": headingLevel } : {})}
+	{...(isExpanded ? { expanded: isExpanded } : {})}
 	onchange={handleOnChange}
 >
 	<div slot="heading">

package/dist/components/Anchor.svelte

@@ -68,18 +68,18 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <fluent-anchor
 	bind:this={element}
-	{id}
-	class={className}
-	{style}
-	{download}
-	{href}
-	{hreflang}
-	{ping}
-	{referrerpolicy}
-	{rel}
-	{target}
-	{type}
-	{appearance}
+	{...(id ? { id } : {})}
+	{...(className ? { class: className } : {})}
+	{...(style ? { style } : {})}
+	{...(download ? { download } : {})}
+	{...(href ? { href } : {})}
+	{...(hreflang ? { hreflang } : {})}
+	{...(ping ? { ping } : {})}
+	{...(referrerpolicy ? { referrerpolicy } : {})}
+	{...(rel ? { rel } : {})}
+	{...(target ? { target } : {})}
+	{...(type ? { type } : {})}
+	{...(appearance ? { appearance } : {})}
 	onclick={handleClick}
 >
 	{#if iconStart}

package/dist/components/BreadcrumbItem.svelte

@@ -20,7 +20,7 @@
 </script>
 
 <fluent-breadcrumb-item
-	{href}
+	{...(href ? { href } : {})}
 >
 	{#if separator}
 		<span slot="separator">

package/dist/components/Button.svelte

@@ -56,22 +56,22 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_autofocus -->
 <fluent-button
-	{type}
-	{name}
-	{value}
-	{appearance}
-	{autofocus}
-	{formaction}
-	{form}
-	{formenctype}
-	{formmethod}
-	{formnovalidate}
-	{formtarget}
-	{disabled}
-	{style}
-	class={className}
-	aria-label={ariaLabel}
-	{title}
+	{...(type ? { type } : {})}
+	{...(name ? { name } : {})}
+	{...(value != null ? { value } : {})}
+	{...(appearance ? { appearance } : {})}
+	{...(autofocus ? { autofocus } : {})}
+	{...(formaction ? { formaction } : {})}
+	{...(form ? { form } : {})}
+	{...(formenctype ? { formenctype } : {})}
+	{...(formmethod ? { formmethod } : {})}
+	{...(formnovalidate ? { formnovalidate } : {})}
+	{...(formtarget ? { formtarget } : {})}
+	{...(disabled ? { disabled } : {})}
+	{...(style ? { style } : {})}
+	{...(className ? { class: className } : {})}
+	{...(ariaLabel ? { "aria-label": ariaLabel } : {})}
+	{...(title ? { title } : {})}
 	{onclick}
 >
 	{#if start}

package/dist/components/Checkbox.svelte

@@ -155,17 +155,17 @@
 	<!-- svelte-ignore a11y_autofocus -->
 	<fluent-checkbox
 		bind:this={element}
-		checked={checked === true}
-		indeterminate={checked === null}
-		{autofocus}
-		{readonly}
-		{disabled}
-		{required}
+		{...(checked === true ? { checked: true } : {})}
+		{...(checked === null ? { indeterminate: true } : {})}
+		{...(autofocus ? { autofocus } : {})}
+		{...(readonly ? { readonly } : {})}
+		{...(disabled ? { disabled } : {})}
+		{...(required ? { required } : {})}
 		id={effectiveId}
-		{name}
-		aria-label={ariaLabel || label || null}
-		class={className || null}
-		style={style || null}
+		{...(name ? { name } : {})}
+		{...(ariaLabel || label ? { "aria-label": ariaLabel || label } : {})}
+		{...(className ? { class: className } : {})}
+		{...(style ? { style } : {})}
 		onclick={handleOnClick}
 	></fluent-checkbox>
 

package/dist/components/Combobox.svelte

@@ -254,19 +254,19 @@
 <fluent-combobox
 	bind:this={element}
 	class={className}
-	style={computedStyle()}
-	{id}
-	autocomplete={autocomplete || null}
-	open={open || null}
-	current-value={currentValue || null}
-	placeholder={placeholder || null}
-	position={position}
-	disabled={disabled || null}
-	appearance={appearance || null}
-	required={required || null}
-	autofocus={autofocus || null}
-	name={name || null}
-	aria-label={ariaLabel || label || null}
+	{...(computedStyle() ? { style: computedStyle() } : {})}
+	{...(id ? { id } : {})}
+	{...(autocomplete ? { autocomplete } : {})}
+	{...(open ? { open } : {})}
+	{...(currentValue ? { "current-value": currentValue } : {})}
+	{...(placeholder ? { placeholder } : {})}
+	{...(position ? { position } : {})}
+	{...(disabled ? { disabled } : {})}
+	{...(appearance ? { appearance } : {})}
+	{...(required ? { required } : {})}
+	{...(autofocus ? { autofocus } : {})}
+	{...(name ? { name } : {})}
+	{...(ariaLabel || label ? { "aria-label": ariaLabel ?? label } : {})}
 	{...titleProps}
 	onchange={handleChange}
 >

package/dist/components/DataGrid.svelte

@@ -39,10 +39,10 @@
 
 <fluent-data-grid
 	class={className}
-	{style}
-	{id}
-	aria-rowcount={ariaRowCount}
-	generate-header={generateHeader}
+	{...(style ? { style } : {})}
+	{...(id ? { id } : {})}
+	{...(ariaRowCount !== undefined ? { "aria-rowcount": ariaRowCount } : {})}
+	{...(generateHeader ? { "generate-header": generateHeader } : {})}
 	role={role}
 	onclosecolumnoptions={handleCloseColumnOptions}
 	onclosecolumnresize={handleCloseColumnResize}

package/dist/components/DataGridCell.svelte

@@ -52,14 +52,14 @@
 <!-- svelte-ignore a11y_no_noninteractive_tabindex a11y_click_events_have_key_events -->
 <fluent-data-grid-cell
 	class={className}
-	{style}
-	grid-column={gridColumn}
-	cell-type={cellType}
-	col-index={colIndex}
-	{role}
-	tabindex={tabIndex}
-	{title}
-	aria-label={ariaLabel}
+	{...(style ? { style } : {})}
+	{...(gridColumn !== undefined ? { "grid-column": gridColumn } : {})}
+	{...(cellType ? { "cell-type": cellType } : {})}
+	{...(colIndex !== undefined ? { "col-index": colIndex } : {})}
+	{...(role ? { role } : {})}
+	{...(tabIndex !== undefined ? { tabindex: tabIndex } : {})}
+	{...(title ? { title } : {})}
+	{...(ariaLabel ? { "aria-label": ariaLabel } : {})}
 	onkeydown={handleKeyDown}
 	onclick={handleClick}
 	onfocus={handleFocus}

package/dist/components/DataGridRow.svelte

@@ -48,9 +48,9 @@
 <!-- svelte-ignore a11y_interactive_supports_focus -->
 <fluent-data-grid-row
 	class={className}
-	{style}
-	data-row-index={rowIndex}
-	row-type={rowType}
+	{...(style ? { style } : {})}
+	{...(rowIndex !== undefined ? { "data-row-index": rowIndex } : {})}
+	{...(rowType ? { "row-type": rowType } : {})}
 	role="row"
 	onkeydown={handleKeyDown}
 	onclick={handleClick}

package/dist/components/Dialog.svelte

@@ -229,12 +229,12 @@
 <fluent-dialog
 	use:portal
 	bind:this={element}
-	{modal}
+	{...(modal ? { modal } : {})}
 	hidden={!visible}
-	{trapFocus}
-	{ariaDescribedby}
-	{ariaLabelledby}
-	{ariaLabel}
+	{...(trapFocus ? { trapFocus } : {})}
+	{...(ariaDescribedby ? { ariaDescribedby } : {})}
+	{...(ariaLabelledby ? { ariaLabelledby } : {})}
+	{...(ariaLabel ? { ariaLabel } : {})}
 	class="dialog-positioned"
 	style={dialogStyle + (style ? ` ${style}` : '')}
 >

package/dist/components/Listbox.svelte

@@ -97,9 +97,9 @@
 <fluent-listbox
 	bind:this={element}
 	selected-options={selectedOptionsAttr}
-	{disabled}
-	{autofocus}
-	{name}
+	{...(disabled ? { disabled } : {})}
+	{...(autofocus ? { autofocus } : {})}
+	{...(name ? { name } : {})}
 	{...(size !== undefined ? { size } : {})}
 	aria-label={ariaLabel || null}
 	class={className || null}

package/dist/components/MenuButton.svelte

@@ -207,10 +207,10 @@
 <span bind:this={anchorEl} class="fluent-menu-button-anchor">
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<fluent-button
-		{appearance}
-		{disabled}
+		{...(appearance ? { appearance } : {})}
+		{...(disabled ? { disabled } : {})}
 		class={className}
-		{style}
+		{...(style ? { style } : {})}
 		aria-haspopup="menu"
 		aria-expanded={open}
 		onclick={toggleMenu}

package/dist/components/NumberField.svelte

@@ -187,27 +187,27 @@
 <!-- svelte-ignore a11y_autofocus -->
 <fluent-number-field
 	bind:this={element}
-	{id}
-	class={className || null}
-	style={computedStyle}
-	placeholder={placeholder || null}
-	appearance={appearance || null}
-	disabled={disabled || null}
-	readonly={readonly || null}
-	required={required || null}
-	autofocus={autofocus || null}
-	autocomplete={autocomplete || null}
+	{...(id ? { id } : {})}
+	{...(className ? { class: className } : {})}
+	{...(computedStyle ? { style: computedStyle } : {})}
+	{...(placeholder ? { placeholder } : {})}
+	{...(appearance ? { appearance } : {})}
+	{...(disabled ? { disabled } : {})}
+	{...(readonly ? { readonly } : {})}
+	{...(required ? { required } : {})}
+	{...(autofocus ? { autofocus } : {})}
+	{...(autocomplete ? { autocomplete } : {})}
 	{...(step !== undefined ? { step } : {})}
 	{...(min !== undefined ? { min } : {})}
 	{...(max !== undefined ? { max } : {})}
 	{...(minlength !== undefined ? { minlength } : {})}
 	{...(maxlength !== undefined ? { maxlength } : {})}
 	{...(size !== undefined ? { size } : {})}
-	list={list || null}
-	hide-step={hideStep || null}
-	name={name || null}
-	aria-label={ariaLabel ?? (label || null)}
-	value={value ?? ""}
+	{...(list ? { list } : {})}
+	{...(hideStep ? { "hide-step": hideStep } : {})}
+	{...(name ? { name } : {})}
+	{...(ariaLabel || label ? { "aria-label": ariaLabel ?? label } : {})}
+	{...(value != null ? { value } : {})}
 	{...titleProps}
 	oninput={handleOnInput}
 	onchange={handleOnChange}

package/dist/components/Option.svelte

@@ -55,13 +55,13 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<fluent-option
-		{value}
-		selected={selected !== undefined ? selected : (selectedValue?.value?.includes(value) || undefined)}
+		{...(value != null ? { value } : {})}
+		{...((selected !== undefined ? selected : selectedValue?.value?.includes(value)) ? { selected: true } : {})}
 		class={className}
-		{style}
-		data-option-label={label || null}
-		data-option-context={data ? JSON.stringify(data) : undefined}
-		{disabled}
+		{...(style ? { style } : {})}
+		{...(label ? { "data-option-label": label } : {})}
+		{...(data ? { "data-option-context": JSON.stringify(data) } : {})}
+		{...(disabled ? { disabled } : {})}
 		onclick={handleOnClick}
 	>
 		{#if icon}

package/dist/components/Paginator.svelte

@@ -55,7 +55,7 @@
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<fluent-button
 			onclick={() => onFirst?.()}
-			disabled={!canGoBack || disabled}
+			{...(!canGoBack || disabled ? { disabled: true } : {})}
 			title="Go to first page"
 			aria-label="Go to first page"
 		>
@@ -66,7 +66,7 @@
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<fluent-button
 			onclick={() => onPrevious?.()}
-			disabled={!canGoBack || disabled}
+			{...(!canGoBack || disabled ? { disabled: true } : {})}
 			title="Go to previous page"
 			aria-label="Go to previous page"
 		>
@@ -85,7 +85,7 @@
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<fluent-button
 			onclick={() => onNext?.()}
-			disabled={!canGoForwards || disabled}
+			{...(!canGoForwards || disabled ? { disabled: true } : {})}
 			title="Go to next page"
 			aria-label="Go to next page"
 		>
@@ -96,7 +96,7 @@
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<fluent-button
 			onclick={() => onLast?.()}
-			disabled={!canGoForwards || disabled}
+			{...(!canGoForwards || disabled ? { disabled: true } : {})}
 			title="Go to last page"
 			aria-label="Go to last page"
 		>

package/dist/components/QuickGrid.svelte

@@ -2194,7 +2194,7 @@
 						<!-- svelte-ignore a11y_click_events_have_key_events -->
 						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<fluent-menu-item
-							disabled={isDisabled || undefined}
+							{...(isDisabled ? { disabled: true } : {})}
 							class:danger={menuItem.danger}
 							onclick={() => handleContextMenuItemClick(menuItem)}
 						>

package/dist/components/Select.svelte

@@ -468,6 +468,10 @@
 	const listboxId = $derived(id ? `${id}-listbox` : undefined)
 </script>
 
+<!-- Single DOM root so consumers see one element, not 2–4 siblings. Uses
+     display:contents so it's transparent to flex/grid layout in the parent. -->
+<div class="select-root">
+
 <!-- svelte-ignore a11y_label_has_associated_control -->
 {#if hasLabel}
 	<label class="fluent-label" for={id}>
@@ -568,7 +572,16 @@
 	{/if}
 {/if}
 
+</div>
+
 <style>
+	/* Transparent to layout — wraps label + trigger + mirror + portal anchor
+	 * so consumers only see one root, but parent flex/grid still lays out the
+	 * inner elements directly. */
+	.select-root {
+		display: contents;
+	}
+
 	.required-indicator {
 		color: var(--error-foreground-rest, #d13438);
 		margin-left: 0.25rem;

package/dist/components/Slider.svelte

@@ -91,18 +91,18 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <fluent-slider
 	bind:this={element}
-	{id}
-	{min}
-	{max}
-	{step}
-	{orientation}
-	{disabled}
-	{readonly}
-	{required}
-	{name}
-	aria-label={ariaLabel || label || null}
-	class={className || null}
-	style={style || null}
+	{...(id ? { id } : {})}
+	{...(min !== undefined ? { min } : {})}
+	{...(max !== undefined ? { max } : {})}
+	{...(step !== undefined ? { step } : {})}
+	{...(orientation ? { orientation } : {})}
+	{...(disabled ? { disabled } : {})}
+	{...(readonly ? { readonly } : {})}
+	{...(required ? { required } : {})}
+	{...(name ? { name } : {})}
+	{...(ariaLabel || label ? { "aria-label": ariaLabel || label } : {})}
+	{...(className ? { class: className } : {})}
+	{...(style ? { style } : {})}
 	onchange={handleChange}
 	oninput={handleInput}
 >

package/dist/components/Switch.svelte

@@ -99,15 +99,15 @@
 	     mere presence as `true`. -->
 	<fluent-switch
 		class={className}
-		{style}
-		{readonly}
+		{...(style ? { style } : {})}
+		{...(readonly ? { readonly } : {})}
 		id={effectiveId}
-		{disabled}
-		{autofocus}
-		{name}
-		aria-label={ariaLabel || label}
-		{required}
-		checked={checked || null}
+		{...(disabled ? { disabled } : {})}
+		{...(autofocus ? { autofocus } : {})}
+		{...(name ? { name } : {})}
+		{...(ariaLabel || label ? { "aria-label": ariaLabel || label } : {})}
+		{...(required ? { required } : {})}
+		{...(checked ? { checked } : {})}
 		aria-checked={checked ? "true" : "false"}
 		onchange={handleChange}
 		role="switch"

package/dist/components/TabPanel.svelte

@@ -23,7 +23,7 @@
 	}: Props = $props()
 </script>
 
-<fluent-tab-panel class={className} {style} {id} hidden={!active} >
+<fluent-tab-panel class={className} {...(style ? { style } : {})} {...(id ? { id } : {})} hidden={!active} >
 	{#if children}
 		{@render children?.()}
 	{/if}

package/dist/components/TextField.svelte

@@ -179,20 +179,20 @@
 <!-- svelte-ignore a11y_autofocus -->
 <fluent-text-field
 	bind:this={element}
-	{id}
-	{value}
-	{placeholder}
-	{appearance}
-	{disabled}
-	{readonly}
-	{required}
-	{type}
-	{name}
-	{autofocus}
-	{autocomplete}
-	{style}
-	{title}
-	aria-label={!label && !labelTemplate ? undefined : label || undefined}
+	{...(id ? { id } : {})}
+	{...(value != null ? { value } : {})}
+	{...(placeholder ? { placeholder } : {})}
+	{...(appearance ? { appearance } : {})}
+	{...(disabled ? { disabled } : {})}
+	{...(readonly ? { readonly } : {})}
+	{...(required ? { required } : {})}
+	{...(type ? { type } : {})}
+	{...(name ? { name } : {})}
+	{...(autofocus ? { autofocus } : {})}
+	{...(autocomplete ? { autocomplete } : {})}
+	{...(style ? { style } : {})}
+	{...(title ? { title } : {})}
+	{...(label || labelTemplate ? { "aria-label": label } : {})}
 	oninput={handleOnInput}
 	onchange={handleOnChange}
 	onkeydown={handleOnKeyDown}

package/dist/components/Textarea.svelte

@@ -164,26 +164,26 @@
 <fluent-text-area
 	bind:this={element}
 	class={className}
-	{style}
-	{readonly}
-	{resize}
-	{autofocus}
-	autocomplete={autocomplete}
-	{form}
-	{list}
+	{...(style ? { style } : {})}
+	{...(readonly ? { readonly } : {})}
+	{...(resize ? { resize } : {})}
+	{...(autofocus ? { autofocus } : {})}
+	{...(autocomplete ? { autocomplete } : {})}
+	{...(form ? { form } : {})}
+	{...(list ? { list } : {})}
 	{...(maxlength !== undefined ? { maxlength } : {})}
 	{...(minlength !== undefined ? { minlength } : {})}
-	{placeholder}
+	{...(placeholder ? { placeholder } : {})}
 	{...(cols !== undefined ? { cols } : {})}
 	{...(rows !== undefined ? { rows } : {})}
-	{spellcheck}
-	{id}
-	{name}
-	{disabled}
-	{required}
-	{appearance}
-	{value}
-	aria-label={ariaLabel}
+	{...(spellcheck != null ? { spellcheck } : {})}
+	{...(id ? { id } : {})}
+	{...(name ? { name } : {})}
+	{...(disabled ? { disabled } : {})}
+	{...(required ? { required } : {})}
+	{...(appearance ? { appearance } : {})}
+	{...(value != null ? { value } : {})}
+	{...(ariaLabel ? { "aria-label": ariaLabel } : {})}
 	oninput={handleInput}
 	onchange={handleChange}
 >

package/dist/components/Toolbar.svelte

@@ -22,10 +22,10 @@
 </script>
 
 <fluent-toolbar
-	id={id}
+	{...(id ? { id } : {})}
 	class={className}
-	style={style}
-	orientation={orientation}
+	{...(style ? { style } : {})}
+	{...(orientation ? { orientation } : {})}
 >
 	{#if children}
 		{@render children?.()}