fluentui-svelte 0.1.0

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

@@ -0,0 +1,67 @@
+# Label
+
+A Label provides an accessible caption for a form control. It supports different sizes and weights, can be marked as required or disabled, and can be positioned relative to the control it wraps.
+
+## Usage
+
+```svelte
+<script>
+	import { Label } from 'fluentui-svelte';
+</script>
+
+<Label label="Email" />
+```
+
+## Examples
+
+### Size
+
+Use the `size` prop to control the label text size.
+
+```svelte
+<Label size="small" label="Small" />
+<Label size="medium" label="Medium" />
+<Label size="large" label="Large" />
+```
+
+### Weight
+
+Use the `weight` prop to switch between a regular and a semibold label.
+
+```svelte
+<Label weight="regular" label="Regular" />
+<Label weight="semibold" label="Semibold" />
+```
+
+### Label Position
+
+Use the `labelPosition` prop to place the label text relative to the wrapped control.
+
+```svelte
+<Label labelPosition="before" label="Before" />
+<Label labelPosition="after" label="After" />
+<Label labelPosition="above" label="Above" />
+<Label labelPosition="below" label="Below" />
+```
+
+### Required
+
+Pass a `required` object to mark the label as required and render a required indicator.
+
+```svelte
+<Label label="Email" required={{ message: 'Required field' }} />
+```
+
+## Component Props
+
+| Name            | Type                                        | Description                                                                     |
+| --------------- | ------------------------------------------- | ------------------------------------------------------------------------------- |
+| `label`         | `string`                                    | The text content of the label. Default: `'Label Element'`.                      |
+| `size`          | `'small' \| 'medium' \| 'large'`            | The size of the label text. Default: `'medium'`.                                |
+| `weight`        | `'regular' \| 'semibold'`                   | The font weight of the label. Default: `'regular'`.                             |
+| `labelPosition` | `'before' \| 'after' \| 'above' \| 'below'` | Position of the label text relative to the wrapped content. Default: `'after'`. |
+| `required`      | `{ message?: string; abbr?: string }`       | Marks the label as required and renders a required indicator (default `*`).     |
+| `disabled`      | `boolean`                                   | Renders the label in a disabled style and disables pointer events.              |
+| `class`         | `string`                                    | Additional classes applied to the label element.                                |
+| `ref`           | bindable `HTMLLabelElement`                 | The DOM reference of the label element.                                         |
+| `children`      | `Snippet`                                   | The content wrapped by the label (typically a form control).                    |

package/dist/components/label/label.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import type { LabelProps } from './types.js';
+
+	let {
+		ref = $bindable(),
+		class: classes,
+		disabled,
+		required,
+		size = 'medium',
+		weight = 'regular',
+		label = 'Label Element',
+		labelPosition = 'after',
+		children,
+		...attributes
+	}: LabelProps = $props();
+</script>
+
+<label
+	class={[
+		'fs-label',
+		`size-${size}`,
+		`weight-${weight}`,
+		classes,
+		{ disabled, required },
+		(labelPosition === 'above' || labelPosition === 'below') && 'column'
+	]}
+	bind:this={ref}
+	{...attributes}
+>
+	{#if labelPosition === 'before' || labelPosition === 'above'}
+		<span>
+			{label}
+			{#if required}
+				<abbr title={required.message || label}>{required.abbr ?? '*'}</abbr>
+			{/if}
+		</span>
+	{/if}
+
+	{@render children?.()}
+
+	{#if labelPosition === 'after' || labelPosition === 'below'}
+		<span>
+			{label}
+			{#if required}
+				<abbr title={required.message || label}>{required.abbr ?? '*'}</abbr>
+			{/if}
+		</span>
+	{/if}
+</label>
+
+<style>
+	.fs-label {
+		display: inline-flex;
+		align-items: center;
+		user-select: none;
+		&.column {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+		&.size-small {
+			font-size: var(--fs-caption-font-size);
+			letter-spacing: 0.04em;
+			gap: 0.25rem;
+		}
+		&.size-medium {
+			font-size: var(--fs-body-font-size);
+			gap: 0.375rem;
+		}
+		&.size-large {
+			font-size: var(--fs-subtitle2-font-size);
+			gap: 0.5rem;
+		}
+		&.weight-regular {
+			font-weight: 400;
+		}
+		&.weight-semibold {
+			font-weight: 600;
+		}
+		&.disabled {
+			color: var(--fs-text-disabled);
+			pointer-events: none;
+		}
+		&.required {
+			& abbr {
+				text-decoration: none;
+				color: var(--fs-system-critical);
+				font-size: inherit;
+				line-height: 0;
+			}
+			&.disabled abbr {
+				color: var(--fs-text-disabled);
+			}
+		}
+	}
+</style>

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

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

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

@@ -0,0 +1,32 @@
+import type { HTMLLabelAttributes } from 'svelte/elements';
+import type { Sizes } from '../../types/index.js';
+/** @propsmith LabelProps */
+export type LabelProps = {
+    /** The text of the label. Falls back to the rendered children.
+     * @default 'Label Element'
+     */
+    label?: string;
+    /** The size of the label text.
+     * @default 'medium'
+     */
+    size?: Sizes;
+    /** The weight of the label text.
+     * @default 'regular'
+     */
+    weight?: 'regular' | 'semibold';
+    /** Where the label sits relative to the field it describes.
+     * @default 'after'
+     */
+    labelPosition?: 'before' | 'after' | 'above' | 'below';
+    /** Marks the field as required, and describes why through the given message. */
+    required?: {
+        abbr?: string;
+        message: string;
+    };
+    /** Renders the label as disabled, to match the field it describes. */
+    disabled?: boolean;
+    /** The DOM reference of the label element.
+     * @bindable
+     */
+    ref?: HTMLLabelElement;
+} & HTMLLabelAttributes;

package/dist/components/label/types.js

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

package/dist/components/list-view/docs/llms.md

@@ -0,0 +1,110 @@
+# ListView
+
+The ListView is a component for rendering a set of vertically stacked items. These items can be focusable, selectable, have one primary action and one or more secondary actions, and support keyboard navigation and accessibility features.
+
+## Usage
+
+```svelte
+<script>
+	import { ListView, ListViewItem } from 'fluentui-svelte';
+	let list = ['A', 'B', 'C'];
+	let selected = ['A'];
+</script>
+
+<ListView selectedItems={selected}>
+	{#each list as item (item)}
+		<ListViewItem value={item}>{item}</ListViewItem>
+	{/each}
+</ListView>
+```
+
+## ListView API
+
+> **Best practices:** Please check the Fluent UI React List best practices for guidance.
+
+### As
+
+You can control which tag the ListView component should use: ul, ol, or div. Default: ul.
+
+### Shape
+
+Instead of setting this on every ListViewItem, you can set it here and every item will inherit it. Possible values are rounded, circular, or square. Default: rounded.
+
+### Navigation Mode
+
+This option allows you to set keyboard navigation based on your needs. For view-only data, you do not need to set this unless the items perform some action. If your items have multiple actionable elements within the ListViewItem, like buttons or menus, you can set this to composite.
+
+## Examples
+
+### Value
+
+Sets the value of the current item. You must set this when using the ListView selection system or if items change dynamically.
+
+### On Action
+
+This event is triggered when clicking or tapping the element. It executes the primary action and, if the role is not row, it also executes the selection itself.
+
+### Selection Mode
+
+Use `selectionMode` (`single`, `multiselect`, or `extended`) to control how items are selected.
+
+```svelte
+<ListView selectionMode="multiselect" selectedItems={['Apple']}>
+	{#each ['Apple', 'Banana', 'Cherry'] as item (item)}
+		<ListViewItem value={item}>{item}</ListViewItem>
+	{/each}
+</ListView>
+```
+
+### Checkmark
+
+Add and configure a checkbox for the element. You can use the same props for the Checkbox component. Note: every actionable element inside this ListViewItem must call e.stopPropagation().
+
+```svelte
+<ListViewItem
+	value="card"
+	role="row"
+	checkmark={{ style: 'position: absolute; top: 10px; left: 10px; z-index: 10;' }}
+	onAction={(e, d) => alert('Triggered Primary Action')}
+>
+	<div style="...">
+		Card Content Inside ListItem
+		<Button
+			onclick={(e) => {
+				e.stopPropagation();
+				alert('Installing');
+			}}>Install</Button
+		>
+	</div>
+</ListViewItem>
+```
+
+## ListView Props
+
+| Name                | Type                        | Description                                                                                   |
+| ------------------- | --------------------------- | --------------------------------------------------------------------------------------------- |
+| `as`                | `string`                    | The HTML tag to use for the list container. Possible values: ul, ol, div.                     |
+| `selectionMode`     | `string`                    | Selection mode for the list. Possible values: single, multiselect, extended.                  |
+| `navigationMode`    | `string`                    | Navigation mode for keyboard navigation. Possible values: items, composite.                   |
+| `selectedItems`     | `string[]`                  | The currently selected item values.                                                           |
+| `shape`             | `string`                    | The shape of the list items. Possible values: rounded, circular, square.                      |
+| `onSelectionChange` | `(Event, string[]) => void` | Callback fired when the selection changes.                                                    |
+| `element`           | Dynamic                     | Reference to the list DOM element. Depends on the selected as value.                          |
+| `children`          | Only `ListViewItem`         | The ListViewItem children of the list.                                                        |
+| Element Attributes  | Dynamic                     | Based on the chosen as value, you will have autocomplete for all HTML attributes of that tag. |
+
+## ListViewItem Props
+
+| Name               | Type                           | Description                                                                                   |
+| ------------------ | ------------------------------ | --------------------------------------------------------------------------------------------- |
+| `as`               | `string`                       | The HTML tag to use for the item container. Possible values: li, a, div.                      |
+| `active`           | `boolean`                      | Whether the item is currently active or selected.                                             |
+| `shape`            | `string`                       | The shape of the item. Possible values: rounded, circular, square.                            |
+| `value`            | `string`                       | The value of the item used for selection.                                                     |
+| `onAction`         | `(MouseEvent, string) => void` | Callback fired when the item is activated.                                                    |
+| `onFocus`          | `(Event, string) => void`      | Callback fired when the item receives focus.                                                  |
+| `role`             | `string`                       | ARIA role for the item. Possible values: treeitem, menuitem, option, row.                     |
+| `disabled`         | `boolean`                      | Whether the item is disabled.                                                                 |
+| `checkmark`        | `object`                       | Props for the checkmark or checkbox.                                                          |
+| `children`         | `Snippet`                      | The content of the item.                                                                      |
+| Element Attributes | Dynamic                        | Based on the chosen as value, you will have autocomplete for all HTML attributes of that tag. |

package/dist/components/list-view/list-view-item.svelte

@@ -0,0 +1,168 @@
+<script lang="ts" generics="T extends 'li' | 'a' | 'div' = 'li'">
+	import { onMount } from 'svelte';
+	import { COMPONENT_NAME, getListViewContext, ITEM_TAG } from './utils.js';
+	import Checkbox from '../checkbox/checkbox.svelte';
+	import { invokeHandlers, isObjectEmpty } from '../../internal/index.js';
+	import type { ListViewItemProps, ListViewItemDOM } from './types.js';
+	import { getTabspotAttributes } from 'tabspot';
+
+	const ID = $props.id();
+
+	let {
+		as = 'li' as T,
+		ref = $bindable(),
+		shape,
+		disabled,
+		active: _active,
+		role: _role,
+		checkmark,
+		value = COMPONENT_NAME + '-' + ID,
+		class: classes,
+		onAction,
+		onfocus,
+		children,
+		...attributes
+	}: ListViewItemProps<T> = $props();
+
+	// svelte-ignore state_referenced_locally
+	if (!ITEM_TAG.includes(as)) throw new Error(`Invalid tag: ${as}. Must be one of ${ITEM_TAG.join(', ')}`);
+
+	const CONTEXT = getListViewContext();
+
+	if (!CONTEXT) throw new Error('ListViewItem must be used within a ListView');
+
+	const { shape: _shape } = CONTEXT.config;
+	const { state: _state } = CONTEXT;
+	const { handleSelection, registerItem, unregisterItem, getChildrenRole } = CONTEXT.methods;
+	const role = $derived(_role || getChildrenRole(as));
+
+	let active = $derived(_state.selectedItems.includes(value));
+
+	// A row is a level of its own: right enters the cells, left comes back out. Anything
+	// that is not a row navigates as a plain item of the list above it.
+	const tabspotAttrs = $derived(
+		(role === 'row'
+			? getTabspotAttributes({
+					mover: {
+						axis: 'vertical'
+					},
+					grouper: { enterDirection: 'right', exitDirection: 'left' }
+				})
+			: null) ?? {}
+	);
+
+	onMount(() => {
+		registerItem?.(ID, value as string, !!disabled);
+		return () => unregisterItem?.(ID);
+	});
+</script>
+
+<svelte:element
+	this={as}
+	{role}
+	data-value={value}
+	aria-selected={role === 'option' ? active : undefined}
+	aria-disabled={disabled || undefined}
+	bind:this={ref as ListViewItemDOM[T]}
+	class={[
+		'fs-list-view-item',
+		shape ? shape : _shape,
+		classes,
+		{ disabled },
+		role !== 'row' && 'indicator',
+		(_active || active) && 'active',
+		!disabled && role && 'interactive'
+	]}
+	{...tabspotAttrs}
+	onfocus={(e: FocusEvent) => invokeHandlers(e, disabled, [(event: FocusEvent) => onfocus?.(event, value || '')])}
+	onclick={(e: MouseEvent) => {
+		invokeHandlers(
+			e,
+			disabled,
+			role !== 'row'
+				? [
+						(event: MouseEvent) => handleSelection?.(event, value),
+						(event: MouseEvent) => onAction?.(event, value || '')
+					]
+				: [(event: MouseEvent) => onAction?.(event, value || '')]
+		);
+	}}
+	{...attributes}
+>
+	{#if checkmark}
+		<Checkbox {disabled} bind:checked={active} tabindex={-1} {...!isObjectEmpty(checkmark) ? checkmark : {}} />
+	{/if}
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.fs-list-view-item {
+		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.713rem 0.4rem 0.713rem;
+		position: relative;
+		outline: none;
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		text-decoration: none;
+		user-select: none;
+		&[disabled],
+		&[aria-disabled='true'] {
+			cursor: not-allowed;
+			background: var(--fs-subtle-fill-transparent) !important;
+			color: var(--fs-text-disabled) !important;
+		}
+
+		&.interactive {
+			cursor: pointer;
+			&:focus-visible,
+			&[data-active='true'] {
+				outline: 0.125rem var(--fs-focus-stroke-outer) solid;
+				outline-offset: 0.063rem;
+			}
+			&.indicator {
+				&:hover {
+					background: var(--fs-subtle-fill-secondary);
+				}
+				&:active {
+					color: var(--fs-text-tertiary);
+					background: var(--fs-subtle-fill-tertiary);
+				}
+				&::after {
+					content: '';
+					position: absolute;
+					top: 50%;
+					left: 0;
+					width: 3px;
+					height: 0;
+					transform: translateY(-50%);
+					background-color: var(--fs-accent-fill-default);
+					border-radius: var(--fs-control-border-radius);
+					pointer-events: none;
+				}
+				&.active {
+					background: var(--fs-subtle-fill-tertiary);
+					&::after {
+						transition: height var(--fs-normal-duration) var(--fs-fast-dismiss);
+						height: 50%;
+					}
+				}
+			}
+		}
+		&.disabled {
+			cursor: not-allowed;
+			color: var(--fs-text-disabled) !important;
+		}
+		&.rounded,
+		&.rounded:after {
+			border-radius: var(--fs-control-border-radius);
+		}
+		&.circular,
+		&.circular:after {
+			border-radius: 50vw;
+		}
+	}
+</style>

package/dist/components/list-view/list-view-item.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { ListViewItemProps } from './types.ts';
+declare function $$render<T extends 'li' | 'a' | 'div' = 'li'>(): {
+    props: ListViewItemProps<T>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends 'li' | 'a' | 'div' = 'li'> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends 'li' | 'a' | 'div' = 'li'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends 'li' | 'a' | 'div' = 'li'>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ListViewItem: $$IsomorphicComponent;
+type ListViewItem<T extends 'li' | 'a' | 'div' = 'li'> = InstanceType<typeof ListViewItem<T>>;
+export default ListViewItem;

package/dist/components/list-view/list-view.svelte

@@ -0,0 +1,137 @@
+<script lang="ts" generics="Tag extends 'ul' | 'ol' | 'div' = 'ul'">
+	import type { ListViewContext, ListViewProps, ListViewDOM } from './types.js';
+	import { getRole, TAG, setListViewContext } from './utils.js';
+	import { getTabspotAttributes } from 'tabspot';
+
+	let {
+		as = 'ul' as Tag,
+		ref = $bindable(),
+		selectionMode = 'none',
+		navigationMode = 'items',
+		shape = 'rounded',
+		selectedItems = $bindable([]),
+		onSelectionChange,
+		disableTabspot = false,
+		children,
+		...attributes
+	}: ListViewProps<Tag> = $props();
+
+	// svelte-ignore state_referenced_locally
+	if (!TAG.includes(as)) throw new Error(`Invalid tag: ${as}. Must be one of ${TAG.join(', ')}`);
+
+	const ROLE = $derived(getRole(as, selectionMode, navigationMode));
+
+	const MULTISELECTABLE = $derived(selectionMode === 'multiselect' || selectionMode === 'extended');
+
+	const tabspotAttrs = $derived(
+		!disableTabspot &&
+			getTabspotAttributes({
+				root: {
+					manageSpecialKeys: true
+				},
+				mover: {
+					axis: 'vertical',
+					items: '.fs-list-view-item'
+				}
+			})
+	);
+
+	let anchorIndex: number | null = $state(null);
+
+	let items: {
+		id: string;
+		value: string;
+		disabled: boolean;
+	}[] = $state([]);
+
+	const config: ListViewContext['config'] = $derived({
+		shape
+	});
+
+	const _state: ListViewContext['state'] = {
+		get selectedItems() {
+			return selectedItems;
+		},
+		set selectedItems(v) {
+			selectedItems = v;
+		},
+		get anchorIndex() {
+			return anchorIndex;
+		},
+		set anchorIndex(v) {
+			anchorIndex = v;
+		}
+	};
+
+	let methods: ListViewContext['methods'] = {
+		handleSelection: (e: MouseEvent, value: string) => {
+			if (selectionMode === 'none') return;
+
+			const itemIndex = items.findIndex((item) => item.value === value);
+			if (itemIndex === -1) return;
+
+			const item = items[itemIndex];
+			if (item.disabled) return;
+
+			if (selectionMode === 'extended' && e.shiftKey && anchorIndex !== null) {
+				const start = Math.min(anchorIndex, itemIndex);
+				const end = Math.max(anchorIndex, itemIndex);
+				const rangeValues = items
+					.slice(start, end + 1)
+					.filter((i) => !i.disabled)
+					.map((i) => i.value);
+				const newSelectedItems = Array.from(new Set([..._state.selectedItems, ...rangeValues]));
+				_state.selectedItems = newSelectedItems;
+			} else if (MULTISELECTABLE && (e.ctrlKey || e.metaKey)) {
+				_state.selectedItems = _state.selectedItems.includes(value)
+					? _state.selectedItems.filter((v) => v !== value)
+					: [..._state.selectedItems, value];
+				_state.anchorIndex = itemIndex;
+			} else {
+				_state.selectedItems = [value];
+				_state.anchorIndex = itemIndex;
+			}
+			onSelectionChange?.(e, _state.selectedItems);
+		},
+		registerItem: (id: string, value: string, disabled: boolean) => {
+			items.push({ id, value, disabled });
+		},
+		unregisterItem: (id: string) => {
+			items = items.filter((item) => item.id !== id);
+		},
+		getChildrenRole: (_tag: 'li' | 'a' | 'div') => {
+			if (ROLE === 'grid') return 'row';
+			if (ROLE === 'listbox') return 'option';
+			return _tag !== 'li' ? 'listitem' : undefined;
+		}
+	};
+
+	// svelte-ignore state_referenced_locally
+	const CONTEXT: ListViewContext = { config, state: _state, events: null, methods };
+
+	setListViewContext(CONTEXT);
+</script>
+
+<svelte:element
+	this={as}
+	bind:this={ref as ListViewDOM[Tag]}
+	class="fs-list-view"
+	role={ROLE}
+	aria-multiselectable={MULTISELECTABLE || undefined}
+	{...tabspotAttrs}
+	{...attributes}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.fs-list-view {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		width: 100%;
+		& :global(.fs-list-view-item) {
+			margin: 0.3rem 0;
+		}
+	}
+</style>

package/dist/components/list-view/list-view.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { ListViewProps } from './types.ts';
+declare function $$render<Tag extends 'ul' | 'ol' | 'div' = 'ul'>(): {
+    props: ListViewProps<Tag>;
+    exports: {};
+    bindings: "ref" | "selectedItems";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Tag extends 'ul' | 'ol' | 'div' = 'ul'> {
+    props(): ReturnType<typeof $$render<Tag>>['props'];
+    events(): ReturnType<typeof $$render<Tag>>['events'];
+    slots(): ReturnType<typeof $$render<Tag>>['slots'];
+    bindings(): "ref" | "selectedItems";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Tag extends 'ul' | 'ol' | 'div' = 'ul'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Tag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Tag>['props']>, ReturnType<__sveltets_Render<Tag>['events']>, ReturnType<__sveltets_Render<Tag>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Tag>['bindings']>;
+    } & ReturnType<__sveltets_Render<Tag>['exports']>;
+    <Tag extends 'ul' | 'ol' | 'div' = 'ul'>(internal: unknown, props: ReturnType<__sveltets_Render<Tag>['props']> & {}): ReturnType<__sveltets_Render<Tag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ListView: $$IsomorphicComponent;
+type ListView<Tag extends 'ul' | 'ol' | 'div' = 'ul'> = InstanceType<typeof ListView<Tag>>;
+export default ListView;