fluentui-svelte 0.1.0

package/dist/components/dropdown/docs/llms.md

@@ -0,0 +1,70 @@
+# Dropdown
+
+The Dropdown lets users select one or more options from a list of `DropdownOption` children. Options can render rich content, such as a `Persona`, and the current selection is exposed through a bindable `value`.
+
+## Usage
+
+```svelte
+<script>
+	import { Dropdown, DropdownOption } from 'fluentui-svelte';
+</script>
+
+<Dropdown>
+	<DropdownOption value="A" text="Option A">Option A</DropdownOption>
+	<DropdownOption value="B" text="Option B">Option B</DropdownOption>
+</Dropdown>
+```
+
+## Examples
+
+### Custom Option Content
+
+Options can render any content, such as a `Persona`. Pass a `text` prop so the closed dropdown can still display the selection.
+
+```svelte
+<Dropdown>
+	<DropdownOption value="John Doe" text="John Doe">
+		<Persona
+			name="John Doe"
+			primaryText="Software Engineer"
+			presence={{ status: 'available' }}
+			avatar={{ color: 'colorful', idForColor: '' }}
+		/>
+	</DropdownOption>
+	<DropdownOption value="B" text="Option B">Option B</DropdownOption>
+	<DropdownOption value="C" text="Option C">Option C</DropdownOption>
+</Dropdown>
+```
+
+### Multiple Selection
+
+Set the `multiple` prop to allow selecting more than one option.
+
+```svelte
+<Dropdown multiple>
+	<DropdownOption value="A" text="Option A">Option A</DropdownOption>
+	<DropdownOption value="B" text="Option B">Option B</DropdownOption>
+	<DropdownOption value="C" text="Option C">Option C</DropdownOption>
+</Dropdown>
+```
+
+## Component Props
+
+| Name              | Type                          | Description                                                           |
+| ----------------- | ----------------------------- | --------------------------------------------------------------------- |
+| `value`           | bindable `string \| string[]` | The selected value, or an array of values when `multiple` is set.     |
+| `multiple`        | `boolean`                     | Allow selecting more than one option.                                 |
+| `placeholder`     | `string`                      | Text shown when no option is selected. Default: `'Select an option'`. |
+| `disabled`        | `boolean`                     | Disables user interaction.                                            |
+| `flyoutMaxHeight` | `number`                      | Maximum height of the options flyout before it scrolls.               |
+| `name`            | `string`                      | Name of the underlying form control.                                  |
+| `ref`             | bindable `HTMLElement`        | The DOM reference of the dropdown element.                            |
+| `children`        | `Snippet`                     | The `DropdownOption` items to render.                                 |
+
+## DropdownOption Props
+
+| Name       | Type      | Description                                                                    |
+| ---------- | --------- | ------------------------------------------------------------------------------ |
+| `value`    | `string`  | The value of the option, used for selection.                                   |
+| `text`     | `string`  | Plain-text label used to display the selection when the flyout is closed.      |
+| `children` | `Snippet` | The content rendered for the option (can be rich content such as a `Persona`). |

package/dist/components/dropdown/dropdown-context.d.ts

@@ -0,0 +1,2 @@
+import type { DropdownContext } from './types.ts';
+export declare const getDropdownContext: () => DropdownContext | null, setDropdownContext: (context: DropdownContext) => void;

package/dist/components/dropdown/dropdown-context.js

@@ -0,0 +1,2 @@
+import { createFSContext } from '../../internal/index.js';
+export const [getDropdownContext, setDropdownContext] = createFSContext();

package/dist/components/dropdown/dropdown-option.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { ListViewItem } from '../../index.js';
+	import { PREFIX } from '../../internal/constants.js';
+	import { getDropdownContext } from './dropdown-context.js';
+	import type { DropdownOptionProps } from './types.js';
+
+	const FALLBACK_ID = $props.id();
+	const ID = `${PREFIX}-dropdown-option-${FALLBACK_ID}`;
+
+	let { value, text, disabled, id = ID, ref = $bindable(), children }: DropdownOptionProps = $props();
+
+	const context = getDropdownContext();
+
+	if (!context) throw new Error('DropdownOption must be used within a Dropdown');
+
+	// Report the option's label so the trigger can show text instead of the raw value.
+	onMount(() => {
+		if (value == null) return;
+		const label = text ?? (ref?.textContent?.trim() || String(value));
+		context.methods?.registerOption(String(value), label);
+	});
+</script>
+
+<ListViewItem role="option" {value} {id} bind:ref {disabled}>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{text}
+	{/if}
+</ListViewItem>

package/dist/components/dropdown/dropdown-option.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DropdownOptionProps } from './types.ts';
+declare const DropdownOption: import("svelte").Component<DropdownOptionProps, {}, "ref">;
+type DropdownOption = ReturnType<typeof DropdownOption>;
+export default DropdownOption;

package/dist/components/dropdown/dropdown.svelte

@@ -0,0 +1,309 @@
+<script lang="ts">
+	import { onClickOutside } from 'runed';
+	import ChevronDownFilled from 'fluentui-icons-svelte/ChevronDownFilled.svelte';
+	import { Flyout, ListView, ListViewItem } from '../../index.js';
+	import type { DropdownProps } from './types.js';
+	import { tick } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { setTabspotAttributes, unsetTabspotSection } from 'tabspot';
+	import { PREFIX } from '../../internal/constants.js';
+	import { getGlobalFSContext } from '../../providers/fluentui-svelte/fluentui-svelte.js';
+	import { setDropdownContext } from './dropdown-context.js';
+
+	const FALLBACK_ID = $props.id();
+	const ID = `${PREFIX}-dropdown-${FALLBACK_ID}`;
+
+	let {
+		id = ID,
+		name = id,
+		placeholder = 'Select an option',
+		multiple,
+		value = $bindable(multiple ? [] : ''),
+		disabled,
+		flyoutMaxHeight,
+		ref = $bindable(),
+		wrapperProps,
+		buttonRef = $bindable(),
+		buttonProps,
+		flyoutRef = $bindable(),
+		flyoutProps,
+		listboxRef = $bindable(),
+		listboxProps,
+		onclick,
+		children
+	}: DropdownProps = $props();
+
+	let open = $state(false);
+
+	let roundClass = $state('bottom');
+
+	const globalFSContext = getGlobalFSContext();
+
+	const OPEN_KEYS = ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Enter', ' '];
+
+	// Options only mount while the flyout is open, so we cache the last-known text
+	// for every value here to keep rendering the selection once the list is closed.
+	const optionLabels = new SvelteMap<string, string>();
+
+	setDropdownContext({
+		config: null,
+		state: null,
+		events: null,
+		methods: {
+			registerOption: (optionValue: string, text: string) => optionLabels.set(optionValue, text)
+		}
+	});
+
+	const selectedValues = $derived(multiple ? (Array.isArray(value) ? value : []) : value ? [value as string] : []);
+
+	const hasValue = $derived(selectedValues.length > 0);
+
+	const displayLabel = $derived(
+		hasValue ? selectedValues.map((v) => optionLabels.get(v) ?? v).join(', ') : placeholder
+	);
+
+	onClickOutside(
+		() => ref,
+		() => closeDropdown()
+	);
+
+	function handlePlacementChange(newPlacement: string) {
+		roundClass = newPlacement.includes('-') ? newPlacement.split('-')[0] : newPlacement;
+	}
+
+	async function openDropdown() {
+		if (disabled || open) return;
+		open = true;
+		await tick();
+		globalFSContext?.state?.tabspotInstance?.rebuild(ref);
+	}
+
+	function closeDropdown() {
+		if (!open) return;
+		open = false;
+		globalFSContext?.state?.tabspotInstance?.update({});
+	}
+
+	async function handleKeyDown(e: KeyboardEvent) {
+		if (disabled) return;
+
+		const { key } = e;
+
+		if (OPEN_KEYS.includes(key)) {
+			e.preventDefault();
+			await openDropdown();
+			return;
+		}
+
+		if (key === 'Escape' && open) {
+			e.preventDefault();
+			closeDropdown();
+		}
+	}
+
+	async function handleClick(e: MouseEvent) {
+		if (open) closeDropdown();
+		else await openDropdown();
+		onclick?.(e);
+	}
+
+	// Force rebuild of tabspot handling tree
+	$effect(() => {
+		if (!ref) return;
+
+		if (!open) {
+			unsetTabspotSection(ref, 'root');
+			return;
+		}
+
+		setTabspotAttributes({
+			config: {
+				root: {
+					manageSpecialKeys: true
+				},
+				mover: {
+					axis: 'vertical',
+					items: '.fs-list-view-item',
+					activation: {
+						controller: `#${id}-button`,
+						mode: 'activedescendant',
+						mark: {
+							attribute: 'data-active'
+						}
+					}
+				}
+			},
+			element: ref,
+			merge: true
+		});
+	});
+</script>
+
+<div class={['fs-dropdown', `square-${roundClass}`, { open, disabled }]} bind:this={ref} {...wrapperProps}>
+	<ChevronDownFilled class="indicator" />
+	<button
+		bind:this={buttonRef}
+		type="button"
+		role="combobox"
+		onclick={handleClick}
+		onkeydown={handleKeyDown}
+		aria-controls={`${id}-listbox`}
+		aria-expanded={open}
+		id={`${id}-button`}
+		aria-haspopup="listbox"
+		{disabled}
+		class={['fs-dropdown-button', hasValue && 'has-value']}
+		{...buttonProps}
+	>
+		{displayLabel}
+	</button>
+
+	<input type="hidden" {name} {value} {id} {disabled} />
+
+	{#if open}
+		<Flyout
+			style={flyoutMaxHeight ? `max-height: ${flyoutMaxHeight};` : ''}
+			offset={0}
+			bind:ref={flyoutRef}
+			{...flyoutProps}
+			floating
+			roundCorners="bottom"
+			reference={ref}
+			id={`${id}-flyout`}
+			onPlacementChange={(place) => handlePlacementChange(place)}
+			placementConfig={{ allowedPlacements: ['bottom', 'top'] }}
+			class="fs-dropdown-flyout {roundClass === 'top' ? 'top-shadow' : ''} {flyoutProps?.class}"
+		>
+			<ListView
+				bind:ref={listboxRef}
+				bind:selectedItems={
+					() => {
+						if (multiple) {
+							return (value as string[]) || [];
+						} else {
+							return value ? [value as string] : [];
+						}
+					},
+					(v) => {
+						if (multiple) {
+							value = v || [];
+						} else {
+							value = v?.[0] || '';
+						}
+					}
+				}
+				selectionMode={multiple ? 'multiselect' : 'single'}
+				onSelectionChange={() => {
+					if (!multiple) closeDropdown();
+				}}
+				navigationMode="items"
+				id={`${id}-listbox`}
+				role="listbox"
+				disableTabspot
+				{...listboxProps}
+			>
+				{#if !children}
+					<ListViewItem disabled>No options available</ListViewItem>
+				{:else}
+					{@render children?.()}
+				{/if}
+			</ListView>
+		</Flyout>
+	{/if}
+</div>
+
+<style>
+	.fs-dropdown {
+		display: flex;
+		align-items: center;
+		position: relative;
+		border-radius: var(--fs-control-border-radius);
+		background: var(--fs-control-fill-default);
+		min-width: 10rem;
+		cursor: pointer;
+		&:before {
+			content: '';
+			pointer-events: none;
+			width: calc(100% + 0.1rem);
+			height: calc(100% + 0.1rem);
+			position: absolute;
+			top: -0.05rem;
+			left: -0.05rem;
+			padding: 0.05rem;
+			border-radius: 0.313rem;
+			mask:
+				linear-gradient(#fff 0 0) content-box,
+				linear-gradient(#fff 0 0);
+			mask-composite: exclude;
+			background: var(--fs-elevation-text-border);
+			z-index: 1;
+		}
+		&:after {
+			content: '';
+			pointer-events: none;
+			width: 0;
+			height: 10px;
+			border-radius: 0px 0px 5px 5px;
+			position: absolute;
+			bottom: -0.063rem;
+			left: calc(50% - 0.063rem);
+			clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0% 100%);
+			background: transparent;
+			transition:
+				width var(--fs-normal-duration) var(--fs-point-to-point),
+				left var(--fs-normal-duration) var(--fs-point-to-point);
+			z-index: 2;
+		}
+		& .fs-dropdown-button {
+			all: unset;
+			width: 100%;
+			padding: 0.275rem 2.2rem 0.4rem 0.713rem;
+			border-radius: var(--fs-control-border-radius);
+			font-size: var(--fs-body-font-size);
+			color: var(--fs-text-primary);
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			color: var(--fs-text-secondary);
+		}
+		&.open.square-top {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+			&::after,
+			&::before {
+				border-top-left-radius: 0;
+				border-top-right-radius: 0;
+			}
+		}
+		&.open.square-bottom {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+			&::after,
+			&::before {
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+		}
+		& :global(.fs-flyout) {
+			padding: 0 5px;
+			width: calc(100% + 2px);
+			z-index: 1;
+			&:global(.top-shadow) {
+				box-shadow: 0 -0.5rem 0.8rem #00000024;
+			}
+		}
+		&:has(:focus-visible):after,
+		&.open:after {
+			width: calc(100% + 0.125rem);
+			left: -0.063rem;
+			background-color: var(--fs-accent-fill-default);
+		}
+		& :global(> .indicator) {
+			width: 1rem;
+			position: absolute;
+			right: 0.6rem;
+			pointer-events: none;
+			color: var(--fs-text-secondary);
+		}
+	}
+</style>

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

@@ -0,0 +1,4 @@
+import type { DropdownProps } from './types.ts';
+declare const Dropdown: import("svelte").Component<DropdownProps, {}, "ref" | "value" | "flyoutRef" | "buttonRef" | "listboxRef">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/components/dropdown/types.d.ts

@@ -0,0 +1,82 @@
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes } from 'svelte/elements';
+import type { ListViewProps, ListViewItemProps } from '../list-view/types.ts';
+import type { FlyoutProps } from '../flyout/types.ts';
+import type { FSContext } from '../../internal/index.js';
+/** The value shape of a dropdown that allows more than one selection. */
+export type DropdownMultipleValue = {
+    multiple: true;
+    value?: string[];
+};
+/** The value shape of a dropdown that allows a single selection. */
+export type DropdownSingleValue = {
+    multiple?: false;
+    value?: string;
+};
+/** @propsmith DropdownProps */
+export type DropdownProps = {
+    /** The selected value. An array of values when `multiple` is set.
+     * @type string | string[]
+     * @default multiple ? [] : ''
+     * @bindable
+     */
+    value?: string | string[];
+    /** Allows more than one option to be selected at a time. */
+    multiple?: boolean;
+    /** The text shown by the trigger while no option is selected.
+     * @default 'Select an option'
+     */
+    placeholder?: string;
+    /** Disables the user interaction. */
+    disabled?: boolean;
+    /** The name submitted with the form. Falls back to the id of the dropdown.
+     * @default id
+     */
+    name?: string | null;
+    /** The DOM reference of the dropdown element.
+     * @bindable
+     */
+    ref?: HTMLDivElement;
+    /** Called when the dropdown is clicked. */
+    onclick?: (e: MouseEvent) => void;
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
+     */
+    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+    /** The DOM reference of the button that opens the dropdown.
+     * @bindable
+     */
+    buttonRef?: HTMLButtonElement;
+    /** The attributes to spread on the button that opens the dropdown.
+     * @type HTMLButtonAttributes
+     */
+    buttonProps?: HTMLButtonAttributes;
+    /** The DOM reference of the hidden input holding the value. */
+    inputRef?: HTMLInputElement;
+    /** The DOM reference of the flyout element.
+     * @bindable
+     */
+    flyoutRef?: HTMLDivElement;
+    /** The props to spread on the flyout.
+     * @type FlyoutProps
+     */
+    flyoutProps?: FlyoutProps;
+    /** The maximum height of the flyout, as a CSS length. */
+    flyoutMaxHeight?: string;
+    /** The DOM reference of the listbox element.
+     * @bindable
+     */
+    listboxRef?: HTMLUListElement;
+    /** The props to spread on the listbox rendered inside the flyout.
+     * @type ListViewProps
+     */
+    listboxProps?: Omit<ListViewProps<'ul'>, 'ref' | 'children' | 'selectedItems' | 'selectionMode'>;
+} & (DropdownMultipleValue | DropdownSingleValue) & Omit<HTMLInputAttributes, 'value' | 'onclick'>;
+/** @propsmith DropdownOptionProps */
+export type DropdownOptionProps = {
+    /** The text shown by the dropdown once the option is selected. Falls back to the rendered children. */
+    text?: string;
+} & ListViewItemProps<'li'>;
+export type DropdownContext = FSContext<null, null, null, {
+    /** Options report their display text so the trigger can show a label instead of the raw value. */
+    registerOption: (value: string, text: string) => void;
+}>;

package/dist/components/dropdown/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/dropdown-select/docs/llms.md

@@ -0,0 +1,72 @@
+# Dropdown Select
+
+The Dropdown Select is a dropdown built on the native `<select>` element. It lets users choose one option, or several with the `multiple` prop, from a list of `DropdownSelectOption` children.
+
+> **Early access:** The API, features, and behavior of the component are subject to significant changes. This component will be rebuilt using the FloatingUI Svelte package, which is still under active development. We strongly advise against using this component in production environments at this time.
+
+## Usage
+
+```svelte
+<script>
+	import { DropdownSelect, DropdownSelectOption } from 'fluentui-svelte';
+</script>
+
+<DropdownSelect>
+	<DropdownSelectOption value="A">Option A</DropdownSelectOption>
+	<DropdownSelectOption value="B">Option B</DropdownSelectOption>
+	<DropdownSelectOption value="C">Option C</DropdownSelectOption>
+</DropdownSelect>
+```
+
+## Examples
+
+### Custom Option Content
+
+Options can render rich content such as a `Persona`. Provide a `text` prop for the plain-text selection label.
+
+```svelte
+<DropdownSelect>
+	<DropdownSelectOption value="John Doe" text="John Doe">
+		<Persona
+			name="John Doe"
+			primaryText="Software Engineer"
+			presence={{ status: 'available' }}
+			avatar={{ color: 'colorful', idForColor: '' }}
+		/>
+	</DropdownSelectOption>
+	<DropdownSelectOption value="B">Option B</DropdownSelectOption>
+	<DropdownSelectOption value="C">Option C</DropdownSelectOption>
+</DropdownSelect>
+```
+
+### Multiple Selection
+
+Set the `multiple` prop to allow selecting more than one option.
+
+```svelte
+<DropdownSelect multiple>
+	<DropdownSelectOption value="A">Option A</DropdownSelectOption>
+	<DropdownSelectOption value="B">Option B</DropdownSelectOption>
+	<DropdownSelectOption value="C">Option C</DropdownSelectOption>
+</DropdownSelect>
+```
+
+## Component Props
+
+| Name              | Type                          | Description                                                                 |
+| ----------------- | ----------------------------- | --------------------------------------------------------------------------- |
+| `value`           | bindable `string \| string[]` | The selected value, or an array of values when `multiple` is set.           |
+| `multiple`        | `boolean`                     | Allow selecting more than one option.                                       |
+| `placeholder`     | `string`                      | Text shown when no option is selected. Default: `'Native Select Dropdown'`. |
+| `hidePlaceholder` | `boolean`                     | Hides the placeholder option.                                               |
+| `ref`             | bindable `HTMLSelectElement`  | The DOM reference of the underlying `<select>` element.                     |
+| `wrapperRef`      | bindable `HTMLDivElement`     | The DOM reference of the wrapper element.                                   |
+| `children`        | `Snippet`                     | The `DropdownSelectOption` items to render.                                 |
+
+## DropdownSelectOption Props
+
+| Name       | Type      | Description                                                             |
+| ---------- | --------- | ----------------------------------------------------------------------- |
+| `value`    | `string`  | The value of the option, used for selection.                            |
+| `text`     | `string`  | Plain-text label used to display the selection when the list is closed. |
+| `children` | `Snippet` | The content rendered for the option.                                    |

package/dist/components/dropdown-select/dropdown-select-option.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { DropdownSelectOptionProps } from './types.js';
+	import CheckmarkFilled from 'fluentui-icons-svelte/CheckmarkFilled.svelte';
+
+	let {
+		value,
+		text,
+		disabled,
+		ref = $bindable(),
+		class: classes,
+		children,
+		...attributes
+	}: DropdownSelectOptionProps = $props();
+</script>
+
+<option class="fs-dropdown-select-option {classes}" {value} {disabled} bind:this={ref} {...attributes}>
+	<span class="option-content">
+		<CheckmarkFilled class="checkmark" width="16" height="16" />
+		{#if text}
+			<span class="value-text">{text}</span>
+		{/if}
+		<span>
+			{@render children?.()}
+		</span>
+	</span>
+</option>
+
+<style>
+	.fs-dropdown-select-option {
+		padding: 0 !important;
+		display: flex;
+		border-radius: var(--fs-control-border-radius);
+
+		/* User-Agent Override Styles Hack  */
+		transition: background calc(infinity * 1s) !important;
+
+		&::checkmark,
+		& :global(.checkmark),
+		& .value-text {
+			display: none;
+		}
+		& .option-content {
+			border-radius: var(--fs-control-border-radius);
+			font-size: var(--fs-body2-font-size);
+			color: var(--fs-text-primary);
+			border: none;
+			padding: 0.275rem 0.5rem 0.4rem 0.5rem;
+			position: relative;
+			outline: none;
+			display: flex;
+			width: 100%;
+			gap: 0.5rem;
+			align-items: center;
+			text-decoration: none;
+			user-select: none;
+			max-height: unset;
+		}
+		&:not(:last-child) {
+			margin-bottom: 0.25rem;
+		}
+		&[disabled] {
+			cursor: not-allowed;
+			background: var(--fs-subtle-fill-transparent) !important;
+			color: var(--fs-text-disabled) !important;
+		}
+		&[hidden] {
+			display: none;
+		}
+		&:checked {
+			background: var(--fs-subtle-fill-secondary);
+			padding: 0.275rem 0.5rem 0.4rem 0.5rem;
+			& :global(.checkmark) {
+				display: flex;
+			}
+			&::after {
+				opacity: 1;
+			}
+		}
+		&:hover .option-content {
+			background: var(--fs-subtle-fill-secondary);
+		}
+		&:focus-visible {
+			outline: 0.125rem var(--fs-focus-stroke-outer) solid;
+			outline-offset: 0.063rem;
+		}
+	}
+</style>

package/dist/components/dropdown-select/dropdown-select-option.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DropdownSelectOptionProps } from './types.ts';
+declare const DropdownSelectOption: import("svelte").Component<DropdownSelectOptionProps, {}, "ref">;
+type DropdownSelectOption = ReturnType<typeof DropdownSelectOption>;
+export default DropdownSelectOption;