fluentui-svelte 0.1.0

package/dist/components/button/button.svelte

@@ -0,0 +1,203 @@
+<script lang="ts" generics="T extends ButtonGenerics = 'button'">
+	import { invokeHandlers, RenderSoC } from '../../internal/index.js';
+	import ChevronDownFilled from 'fluentui-icons-svelte/ChevronDownFilled.svelte';
+	import type { ButtonGenerics, ButtonProps } from './types.js';
+
+	let {
+		as = 'button' as T,
+		appearance = 'accent',
+		class: classes,
+		shape = 'rounded',
+		disabled,
+		ref = $bindable(),
+		onclick,
+		onkeydown,
+		isMenuButton,
+		indicatorPosition = 'after',
+		indicatorIcon,
+		disabledFocusable = false,
+		tabindex: _tabIndex,
+		children,
+		...attributes
+	}: ButtonProps<T> = $props();
+
+	// svelte-ignore state_referenced_locally
+	if (as !== 'button' && as !== 'a' && as !== 'div') {
+		throw new Error(`Invalid 'as' prop value: ${as}. Expected 'button', 'a', or 'div'.`);
+	}
+</script>
+
+<!-- 
+	@component
+	A button triggers an action or event when activated and supports three visual appearances (accent, standar & subtle).
+	- Usage:
+    ```tsx
+    <script>
+      import { Button } from 'fluentui-svelte';
+    </script>
+
+    <Button>Click me!</Button>
+    <Button as="a">I'm an Anchor!</Button>
+    <Button appearance="standard" disabled>You can't click me!</Button>
+    ```
+ -->
+<svelte:element
+	this={as}
+	bind:this={ref}
+	disabled={disabled && as !== 'div' ? true : undefined}
+	aria-disabled={disabled && as !== 'div' ? true : undefined}
+	class={['fs-button', shape, appearance, classes]}
+	tabindex={_tabIndex ?? (as !== 'div' && (disabledFocusable || disabled) ? -1 : undefined)}
+	onclick={(e: MouseEvent) => invokeHandlers(e, [as === 'div', disabled], [onclick])}
+	onkeydown={(e: KeyboardEvent) => invokeHandlers(e, [as === 'div', disabled], [onkeydown])}
+	{...attributes}
+>
+	{#if isMenuButton && indicatorPosition === 'before'}
+		{#if indicatorIcon}
+			<RenderSoC SoC={indicatorIcon} class="indicator" args={[{ class: 'indicator' }]} />
+		{:else}
+			<ChevronDownFilled class="indicator" />
+		{/if}
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{:else}
+		{appearance[0].toUpperCase() + appearance.slice(1) + ' Button'}
+	{/if}
+
+	{#if isMenuButton && indicatorPosition === 'after'}
+		{#if indicatorIcon}
+			<RenderSoC SoC={indicatorIcon} class="indicator" args={[{ class: 'indicator' }]} />
+		{:else}
+			<ChevronDownFilled class="indicator" />
+		{/if}
+	{/if}
+</svelte:element>
+
+<style>
+	.fs-button {
+		border-radius: var(--fs-control-border-radius);
+		font-size: var(--fs-body-font-size);
+		line-height: var(--fs-body-line-height);
+		color: var(--fs-text-primary);
+		background: transparent;
+		border: none;
+		padding: 0.375rem 0.813rem 0.5rem 0.813rem;
+		cursor: pointer;
+		position: relative;
+		outline: none;
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		text-align: center;
+		justify-content: center;
+		user-select: none;
+		&:not([type])[href] {
+			text-decoration: none;
+		}
+		&:disabled,
+		&[disabled] {
+			cursor: not-allowed;
+		}
+		&:not(.subtle):after {
+			content: '';
+			inset: 0;
+			position: absolute;
+			padding: 0.063rem;
+			mask:
+				linear-gradient(#fff 0 0) content-box,
+				linear-gradient(#fff 0 0);
+			mask-composite: exclude;
+			border-radius: inherit;
+		}
+		&:focus-visible {
+			outline: 0.125rem var(--fs-focus-stroke-outer) solid;
+			outline-offset: 0.063rem;
+		}
+		& :global(svg.indicator) {
+			width: 1rem;
+			height: auto;
+			pointer-events: none;
+		}
+	}
+	.fs-button.accent {
+		color: var(--fs-text-on-accent-primary);
+		background: var(--fs-accent-fill-default);
+		&::after {
+			background: var(--fs-elevation-accent-control-border);
+		}
+		&:hover {
+			background: var(--fs-accent-fill-secondary);
+			&::after {
+				background: var(--fs-elevation-accent-control-border);
+			}
+		}
+		&:active {
+			color: var(--fs-text-on-accent-secondary);
+			&::after {
+				background: var(--fs-control-stroke-on-accent-default);
+			}
+		}
+		&:disabled,
+		&[disabled] {
+			background: var(--fs-accent-fill-disabled) !important;
+			color: var(--fs-text-on-accent-disabled) !important;
+			&::after {
+				background: var(--fs-elevation-accent-control-disabled) !important;
+			}
+		}
+	}
+	.fs-button.standard {
+		background: var(--fs-control-fill-default);
+		&::after {
+			background: var(--fs-elevation-control-border);
+		}
+		&:hover {
+			background: var(--fs-control-fill-secondary);
+		}
+		&:active {
+			color: var(--fs-text-secondary);
+			&::after {
+				background: var(--fs-control-stroke-default);
+			}
+		}
+		&:disabled,
+		&[disabled] {
+			background: var(--fs-control-fill-disabled) !important;
+			color: var(--fs-text-disabled) !important;
+			&::after {
+				background: var(--fs-control-stroke-default) !important;
+			}
+		}
+	}
+	.fs-button.subtle {
+		&::after {
+			background: var(--fs-control-fill-transparent);
+		}
+		&:hover {
+			background: var(--fs-subtle-fill-secondary);
+		}
+		&:active {
+			color: var(--fs-text-tertiary);
+			background: var(--fs-subtle-fill-tertiary);
+			&::after {
+				background: var(--fs-control-stroke-default);
+			}
+		}
+		&:disabled,
+		&[disabled] {
+			background: var(--fs-subtle-fill-transparent) !important;
+			color: var(--fs-text-disabled) !important;
+		}
+	}
+	.fs-button.rounded {
+		border-radius: var(--fs-control-border-radius);
+	}
+	.fs-button.circular {
+		border-radius: 50vw;
+	}
+	.fs-button.square {
+		border-radius: 0;
+	}
+</style>

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

@@ -0,0 +1,38 @@
+import type { ButtonGenerics, ButtonProps } from './types.ts';
+declare function $$render<T extends ButtonGenerics = 'button'>(): {
+    props: ButtonProps<T>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends ButtonGenerics = 'button'> {
+    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 ButtonGenerics = 'button'>(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 ButtonGenerics = 'button'>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A button triggers an action or event when activated and supports three visual appearances (accent, standar & subtle).
+ * - Usage:
+ *    ```tsx
+ *    <script>
+ *      import { Button } from 'fluentui-svelte';
+ *    </script>
+ *
+ *    <Button>Click me!</Button>
+ *    <Button as="a">I'm an Anchor!</Button>
+ *    <Button appearance="standard" disabled>You can't click me!</Button>
+ *    ```
+ */
+declare const Button: $$IsomorphicComponent;
+type Button<T extends ButtonGenerics = 'button'> = InstanceType<typeof Button<T>>;
+export default Button;

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

@@ -0,0 +1,102 @@
+# Button
+
+A button triggers an action or event when activated and supports three visual appearances: accent, standard, and subtle.
+
+## Usage
+
+```svelte
+<script>
+	import { Button } from 'fluentui-svelte';
+</script>
+
+<Button>I am a Button</Button>
+```
+
+## Component API
+
+A brief explanation of the props that really need explaining. You can see the rest of the props in the Component Props table below.
+
+## Examples
+
+### As
+
+You can control which tag the button component should use: button, a, or div.
+
+```svelte
+<Button>I am a Button</Button>
+<Button as="a" href="/">I am a Anchor</Button>
+<Button as="div">I am a Div</Button>
+```
+
+### Shape
+
+A button can be rounded, circular, or square. Default: rounded.
+
+```svelte
+<Button shape="circular" />
+<Button />
+<Button shape="square" />
+```
+
+### Appearance
+
+A button can have its content and borders styled for greater emphasis or to be subtle.
+
+```svelte
+<Button appearance="accent" />
+<Button appearance="standard" />
+<Button appearance="subtle" />
+```
+
+## Component Props
+
+| Name                | Type                   | Description                                                                                       |
+| ------------------- | ---------------------- | ------------------------------------------------------------------------------------------------- |
+| `ref`               | `HTMLElement`          | The DOM reference of the button element.                                                          |
+| `as`                | `string`               | The DOM element to render. Possible values: 'button', 'a', 'div'.                                 |
+| `disabled`          | `boolean`              | Disables user interaction.                                                                        |
+| `shape`             | `string`               | The shape of the button or buttons. Possible values: 'circular', 'rounded', 'square'.             |
+| `appearance`        | `string`               | The appearance of the button or buttons. Possible values: 'accent', 'standard', 'subtle'.         |
+| `disabledFocusable` | `boolean`              | Allows the button to be focusable even when disabled.                                             |
+| `isMenuButton`      | `boolean`              | Adds an icon that indicates the button triggers a menu.                                           |
+| `indicatorPosition` | `'before' \| 'after'`  | The position of the icon. Possible values: 'before', 'after'.                                     |
+| `indicatorIcon`     | `Snippet \| Component` | The icon used as the menu indicator. Defaults to a chevron-down icon.                             |
+| Element Attributes  |                        | Based on the chosen component tag, you will get autocomplete for all HTML attributes of that tag. |
+
+## Split Button
+
+A split button is a special type of button that combines a standard button with a menu button to provide users with a primary action and additional options.
+
+### Usage
+
+```svelte
+<script>
+	import { SplitButton } from 'fluentui-svelte';
+</script>
+
+<SplitButton />
+<SplitButton appearance="standard" />
+<SplitButton appearance="subtle" />
+<SplitButton shape="circular" />
+<SplitButton shape="circular" appearance="standard" />
+<SplitButton shape="circular" appearance="subtle" />
+```
+
+### Adding a Menu
+
+To add a menu to the split button, please refer to the Menu documentation for details on how to create menus and pass them as a prop to the SplitButton component.
+
+### Component Props
+
+| Name                      | Type                    | Description                                                                               |
+| ------------------------- | ----------------------- | ----------------------------------------------------------------------------------------- |
+| `wrapperRef`              | `HTMLDivElement`        | The DOM reference of the split button wrapper element.                                    |
+| `primaryButtonRef`        | `HTMLButtonElement`     | The DOM reference of the primary button element.                                          |
+| `primaryButtonProps`      | `ButtonProps<'button'>` | Additional props to pass to the primary button.                                           |
+| `menuTriggerRef`          | `HTMLButtonElement`     | The DOM reference of the menu trigger button element.                                     |
+| `menuTriggerProps`        | `ButtonProps<'button'>` | Additional props to pass to the menu trigger button.                                      |
+| `class`                   | `string`                | Additional classes to add to the split button wrapper element.                            |
+| `shape`                   | `string`                | The shape of the button or buttons. Possible values: 'circular', 'rounded', 'square'.     |
+| `appearance`              | `string`                | The appearance of the button or buttons. Possible values: 'accent', 'standard', 'subtle'. |
+| `disabled`                | `boolean`               | Disables user interaction.                                                                |
+| WrapperElement Attributes | HTMLElement Attributes  | All other attributes can be applied to the split button wrapper element.                  |

package/dist/components/button/split-button.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import Button from './button.svelte';
+	import ChevronDownFilled from 'fluentui-icons-svelte/ChevronDownFilled.svelte';
+	import type { SplitButtonProps } from './types.js';
+
+	let {
+		class: classes,
+		appearance = 'accent',
+		shape = 'rounded',
+		disabled = false,
+		wrapperRef = $bindable(),
+		primaryButtonProps,
+		menuTriggerProps,
+		primaryButtonRef = $bindable(),
+		menuTriggerRef = $bindable(),
+		children,
+		...attributes
+	}: SplitButtonProps = $props();
+</script>
+
+<div class={['fs-split-button', classes]} role="group" bind:this={wrapperRef} {...attributes}>
+	<Button as="button" {appearance} {shape} {disabled} bind:ref={primaryButtonRef} {...primaryButtonProps}>
+		{#if children}
+			{@render children()}
+		{:else}
+			{appearance[0].toUpperCase() + appearance.slice(1) + ' Button'}
+		{/if}
+	</Button>
+	<Button
+		as="button"
+		class="menu-button"
+		{appearance}
+		{shape}
+		{disabled}
+		bind:ref={menuTriggerRef}
+		{...menuTriggerProps}
+	>
+		<ChevronDownFilled class="indicator" />
+	</Button>
+</div>
+
+<style>
+	.fs-split-button {
+		display: inline-flex;
+		align-items: stretch;
+		& :global(:first-child) {
+			border-top-right-radius: 0 !important;
+			border-bottom-right-radius: 0 !important;
+			z-index: 1;
+		}
+		& :global(:last-child) {
+			z-index: 0;
+			border-top-left-radius: 0 !important;
+			border-bottom-left-radius: 0 !important;
+			margin-left: -1px;
+			&::after {
+				padding-left: 0;
+			}
+		}
+		& :global(svg.indicator) {
+			width: 1rem;
+			margin: 0;
+			pointer-events: none;
+		}
+	}
+</style>

package/dist/components/button/split-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SplitButtonProps } from './types.ts';
+declare const SplitButton: import("svelte").Component<SplitButtonProps, {}, "wrapperRef" | "primaryButtonRef" | "menuTriggerRef">;
+type SplitButton = ReturnType<typeof SplitButton>;
+export default SplitButton;

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

@@ -0,0 +1,84 @@
+import type { Component, Snippet } from 'svelte';
+import type { Appearances, BeforeOrAfter, PolymorphicProps, Shapes } from '../../types/index.js';
+export type ButtonGenerics = 'button' | 'a' | 'div';
+/** @propsmith ButtonProps */
+export type ButtonProps<T extends ButtonGenerics = 'button'> = {
+    /** The DOM reference of the button element.
+     * @type ButtonElementDOMType[T]
+     * @bindable
+     */
+    ref?: ButtonElementDOMType[T];
+    /** The DOM element to render.
+     * @type 'button' | 'a' | 'div'
+     * @default 'button'
+     */
+    as?: T;
+    /** Disables the user interaction. */
+    disabled?: boolean;
+    /** A button can be rounded, circular, or square.
+     * @default 'rounded'
+     */
+    shape?: Shapes;
+    /** A button can have its content and borders styled for greater emphasis or to be subtle.
+     * @default 'accent'
+     */
+    appearance?: Appearances;
+    /** When set, allows the button to be focusable even when it has been disabled.
+     *
+     * This is used in scenarios where it is important to keep a consistent tab order for screen reader and keyboard
+     * users. The primary example of this pattern is when the disabled button is in a menu or a commandbar, and is
+     * seldom used for standalone buttons.
+     * @default false
+     */
+    disabledFocusable?: boolean;
+    /** Add an icon that indicates the button triggers a menu. */
+    isMenuButton?: boolean;
+    /** Position of the menu indicator relative to the button content.
+     * @default 'after'
+     */
+    indicatorPosition?: BeforeOrAfter;
+    /** The icon used to indicate the button triggers a menu.
+     * @type Snippet | Component
+     */
+    indicatorIcon?: Snippet<unknown[]> | Component<Record<string, unknown>>;
+} & PolymorphicProps<T>;
+export type ButtonElementDOMType = {
+    button: HTMLButtonElement;
+    a: HTMLAnchorElement;
+    div: HTMLDivElement;
+};
+/** @propsmith SplitButtonProps */
+export type SplitButtonProps = {
+    /** Both buttons can have their content and borders styled for greater emphasis or to be subtle.
+     * @default 'accent'
+     */
+    appearance?: Appearances;
+    /** Both buttons can be rounded, circular, or square.
+     * @default 'rounded'
+     */
+    shape?: Shapes;
+    /** Disables the user interaction on both buttons.
+     * @default false
+     */
+    disabled?: boolean;
+    /** The props to spread on the primary button.
+     * @type ButtonProps
+     */
+    primaryButtonProps: ButtonProps<'button'>;
+    /** The props to spread on the button that opens the menu.
+     * @type ButtonProps
+     */
+    menuTriggerProps: ButtonProps<'button'>;
+    /** The DOM reference of the element wrapping both buttons.
+     * @bindable
+     */
+    wrapperRef?: HTMLDivElement;
+    /** The DOM reference of the primary button.
+     * @bindable
+     */
+    primaryButtonRef?: HTMLButtonElement;
+    /** The DOM reference of the button that opens the menu.
+     * @bindable
+     */
+    menuTriggerRef?: HTMLButtonElement;
+} & PolymorphicProps<'div'>;

package/dist/components/button/types.js

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

package/dist/components/calendar-date-picker/calendar-date-picker.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { Button, CalendarView } from '../../index.js';
+	import { CalendarLtrRegular } from 'fluentui-icons-svelte';
+	import type { CalendarDatePickerProps } from './types.js';
+	import { onMount, tick } from 'svelte';
+	import { on } from 'svelte/events';
+	import { PREFIX } from '../../internal/constants.js';
+	import { flip, hide, offset, shift } from '@floating-ui/dom';
+
+	let {
+		value = $bindable(null),
+		locale = 'en-US',
+		format = {
+			year: 'numeric',
+			month: 'numeric',
+			day: 'numeric'
+		},
+		calendarPosition: _positionConfig,
+		blackoutDates,
+		ref = $bindable(),
+		headers,
+		maxDate,
+		minDate,
+		weekStart,
+		onChange,
+		triggerRef = $bindable(),
+		popupRef = $bindable(),
+		popupLabel = 'Choose a date',
+		...attributes
+	}: CalendarDatePickerProps = $props();
+
+	const FALLBACK_ID = $props.id();
+	const POPUP_ID = `${PREFIX}calendardatepicker-${FALLBACK_ID}-popup`;
+
+	let open = $state(false);
+
+	/** Closing always hands the focus back to the trigger button. */
+	function closePopup() {
+		open = false;
+		triggerRef?.focus();
+	}
+
+	let positionConfig = $derived({
+		..._positionConfig,
+		placement: _positionConfig?.placement ?? 'bottom-start',
+		middleware: _positionConfig?.middleware ?? [offset(8), flip(), shift({ padding: 8 }), hide()]
+	});
+
+	onMount(() => {
+		const off = on(document, 'click', (event: MouseEvent) => {
+			if (ref && !ref.contains(event.target as Node)) {
+				open = false;
+			}
+		});
+
+		return () => off();
+	});
+
+	$effect(() => {
+		if (!open) return;
+
+		return on(document, 'keydown', (event: KeyboardEvent) => {
+			if (event.key !== 'Escape') return;
+			event.preventDefault();
+			closePopup();
+		});
+	});
+
+	// Move into the dialog on open
+	$effect(() => {
+		if (!open || !popupRef) return;
+
+		tick().then(() => {
+			(popupRef?.querySelector<HTMLElement>('[role="gridcell"] button') ?? popupRef)?.focus();
+		});
+	});
+</script>
+
+<div class="fs-calendar-date-picker" bind:this={ref} {...attributes}>
+	<Button
+		appearance="standard"
+		aria-haspopup="dialog"
+		aria-expanded={open}
+		aria-controls={open ? POPUP_ID : undefined}
+		bind:ref={triggerRef}
+		onclick={() => (open = !open)}
+	>
+		{#if value}
+			{value.toLocaleDateString(locale, format)}
+		{:else}
+			Pick a date
+		{/if}
+		<CalendarLtrRegular width="1rem" />
+	</Button>
+	{#if open}
+		<CalendarView
+			bind:value
+			bind:ref={popupRef}
+			id={POPUP_ID}
+			role="dialog"
+			aria-modal="true"
+			aria-label={popupLabel}
+			tabindex={-1}
+			floating={{ ref, positionConfig }}
+			onChange={onChange as any}
+			{blackoutDates}
+			{headers}
+			{maxDate}
+			{minDate}
+			{weekStart}
+		/>
+	{/if}
+</div>
+
+<style>
+	.fs-calendar-date-picker {
+		position: relative;
+	}
+</style>

package/dist/components/calendar-date-picker/calendar-date-picker.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarDatePickerProps } from './types.js';
+declare const CalendarDatePicker: import("svelte").Component<CalendarDatePickerProps, {}, "ref" | "value" | "triggerRef" | "popupRef">;
+type CalendarDatePicker = ReturnType<typeof CalendarDatePicker>;
+export default CalendarDatePicker;

package/dist/components/calendar-date-picker/docs/llms.md

@@ -0,0 +1,33 @@
+# Calendar Date Picker
+
+A button trigger paired with a CalendarView popup for selecting a single date.
+
+## Usage
+
+```svelte
+<script>
+	import { CalendarDatePicker } from 'fluentui-svelte';
+
+	let value = $state(null);
+</script>
+
+<CalendarDatePicker bind:value />
+```
+
+## Component API
+
+The `CalendarDatePicker` combines a button trigger with a `CalendarView` popup. Clicking the trigger opens the calendar, and selecting a day updates the bound `value` and closes the popup. Because it builds on `CalendarView`, calendar props such as `blackoutDates`, `minDate`, `maxDate`, `weekStart` and `headers` are forwarded straight to the popup calendar.
+
+## Component Props
+
+| Name               | Type                             | Default                                                 | Description                                               |
+| ------------------ | -------------------------------- | ------------------------------------------------------- | --------------------------------------------------------- |
+| `ref`              | bindable `HTMLDivElement`        |                                                         | The DOM reference of the picker element.                  |
+| `value`            | bindable `Date \| null`          | `null`                                                  | The selected date.                                        |
+| `format`           | `Intl.DateTimeFormatOptions`     | `{ year: 'numeric', month: 'numeric', day: 'numeric' }` | The options used to format the date shown on the trigger. |
+| `calendarPosition` | `Partial<ComputePositionConfig>` |                                                         | The floating UI configuration object of the popup.        |
+| `onChange`         | `(event, value) => void`         |                                                         | Called whenever the selected date changes.                |
+
+`locale`, `blackoutDates`, `headers`, `minDate`, `maxDate` and `weekStart` are forwarded
+straight to the underlying `CalendarView`. All `div` HTML attributes are forwarded to the
+root element.