fluentui-svelte 0.1.2 → 0.2.1

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

@@ -40,7 +40,11 @@ export type ButtonProps<T extends ButtonGenerics = 'button'> = {
     /** The icon used to indicate the button triggers a menu.
      * @type Snippet | Component
      */
-    indicatorIcon?: Snippet<unknown[]> | Component<Record<string, unknown>>;
+    indicatorIcon?: Snippet<[{
+        class: string;
+    }]> | Component<{
+        class: string;
+    }>;
 } & PolymorphicProps<T>;
 export type ButtonElementDOMType = {
     button: HTMLButtonElement;

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

@@ -20,13 +20,23 @@ The `CalendarDatePicker` combines a button trigger with a `CalendarView` popup.
 
 ## 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.                |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:CalendarDatePickerProps -->
+
+| Name                                                                                             | Type                                                | Default                                                 | Description                                                                                   |
+| ------------------------------------------------------------------------------------------------ | --------------------------------------------------- | ------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                                                                 | `HTMLDivElement`                                    |                                                         | The DOM reference of the picker element.                                                      |
+| `value` _bindable_                                                                               | `Date` &#124; `null`                                | `null`                                                  | The selected date.                                                                            |
+| `format`                                                                                         | `Intl.DateTimeFormatOptions`                        | `{ year: 'numeric', month: 'numeric', day: 'numeric' }` | The options used to format the date rendered on the trigger.                                  |
+| `calendarPosition`                                                                               | `Partial<ComputePositionConfig>`                    |                                                         | The floating UI configuration object of the calendar popup. Keys left out keep their default. |
+| `onChange`                                                                                       | `(event: Event, value: Date` &#124; `null) => void` |                                                         | Called whenever the selected date changes.                                                    |
+| `popupLabel`                                                                                     | `string`                                            | `'Choose a date'`                                       | The accessible name of the calendar popup, which is announced as a dialog.                    |
+| `triggerRef` _bindable_                                                                          | `HTMLButtonElement`                                 |                                                         | The DOM reference of the trigger button.                                                      |
+| `popupRef` _bindable_                                                                            | `HTMLDivElement`                                    |                                                         | The DOM reference of the calendar popup.                                                      |
+| `locale`, `blackoutDates`, `headers`, `minDate`, `maxDate`, `weekStart` from `CalendarViewProps` |                                                     |                                                         |                                                                                               |
+| Element Attributes (`div`)                                                                       |                                                     |                                                         |                                                                                               |
+
+<!-- /props:CalendarDatePickerProps -->
 
 `locale`, `blackoutDates`, `headers`, `minDate`, `maxDate` and `weekStart` are forwarded
 straight to the underlying `CalendarView`. All `div` HTML attributes are forwarded to the

package/dist/components/calendar-view/calendar-view-header.svelte

@@ -7,9 +7,9 @@
 		throw new Error('CalendarViewHeader must be used within a CalendarView');
 	}
 
-	let locale = context.config.locale;
+	let locale = $derived(context.config.locale);
 
-	let weekStart = context.config.weekStart;
+	let weekStart = $derived(context.config.weekStart);
 </script>
 
 <!--

package/dist/components/calendar-view/calendar-view-header.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CalendarViewHeader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CalendarViewHeader = InstanceType<typeof CalendarViewHeader>;
+declare const CalendarViewHeader: import("svelte").Component<Record<string, never>, {}, "">;
+type CalendarViewHeader = ReturnType<typeof CalendarViewHeader>;
 export default CalendarViewHeader;

package/dist/components/calendar-view/calendar-view-months.svelte

@@ -22,7 +22,7 @@
 
 	const { selectMonth, updatePage } = CalendarContext.methods;
 
-	let { locale, minDate, headers, maxDate, selectionMode } = CalendarContext.config;
+	let { locale, minDate, headers, maxDate, selectionMode } = $derived(CalendarContext.config);
 
 	let { value, range, page, pageAnimationDirection } = $derived(CalendarContext.state);
 

package/dist/components/calendar-view/calendar-view-years.svelte

@@ -21,7 +21,7 @@
 
 	const { selectYear, updatePage } = CalendarContext.methods;
 
-	let { locale, minDate, maxDate, selectionMode } = CalendarContext.config;
+	let { locale, minDate, maxDate, selectionMode } = $derived(CalendarContext.config);
 
 	let { value, range, page, pageAnimationDirection } = $derived(CalendarContext.state);
 

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

@@ -31,8 +31,8 @@
 	import { getReducedMotion } from '../../providers/fluentui-svelte/fluentui-svelte.js';
 	import type {
 		AnimationDirection,
+		CalendarViewContext,
 		CalendarViewProps,
-		CalendarViewState,
 		DateComparisonPrecision,
 		View
 	} from './types.js';
@@ -197,59 +197,70 @@
 		updateView(e, 'months', year);
 	}
 
-	const CALENDAR_STATE: CalendarViewState = {
-		get value() {
-			return value;
-		},
-		set value(v) {
-			value = v;
-		},
-		get range() {
-			return range;
-		},
-		set range(v) {
-			range = v;
-		},
-		get view() {
-			return view;
-		},
-		set view(v) {
-			view = v;
-		},
-		get page() {
-			return page;
-		},
-		set page(v) {
-			page = v;
-		},
-		get viewAnimationDirection() {
-			return viewAnimationDirection;
-		},
-		set viewAnimationDirection(v) {
-			viewAnimationDirection = v;
-		},
-		get pageAnimationDirection() {
-			return pageAnimationDirection;
-		},
-		set pageAnimationDirection(v) {
-			pageAnimationDirection = v;
-		}
-	};
-
-	// svelte-ignore state_referenced_locally
-	setCalendarViewContext({
+	const context: CalendarViewContext = $state({
 		config: {
-			minDate,
-			maxDate,
-			locale,
-			weekStart,
-			blackoutDates,
-			selectionMode,
-			blackoutBreaksRange,
-			headers
+			get minDate() {
+				return minDate;
+			},
+			get maxDate() {
+				return maxDate;
+			},
+			get locale() {
+				return locale;
+			},
+			get weekStart() {
+				return weekStart;
+			},
+			get blackoutDates() {
+				return blackoutDates;
+			},
+			get selectionMode() {
+				return selectionMode;
+			},
+			get blackoutBreaksRange() {
+				return blackoutBreaksRange;
+			},
+			get headers() {
+				return headers;
+			}
 		},
-		get state() {
-			return CALENDAR_STATE;
+		state: {
+			get value() {
+				return value;
+			},
+			set value(v) {
+				value = v;
+			},
+			get range() {
+				return range;
+			},
+			set range(v) {
+				range = v;
+			},
+			get view() {
+				return view;
+			},
+			set view(v) {
+				view = v;
+			},
+			get page() {
+				return page;
+			},
+			set page(v) {
+				page = v;
+			},
+			get viewAnimationDirection() {
+				return viewAnimationDirection;
+			},
+			set viewAnimationDirection(v) {
+				viewAnimationDirection = v;
+			},
+			get pageAnimationDirection() {
+				return pageAnimationDirection;
+			},
+			set pageAnimationDirection(v) {
+				pageAnimationDirection = v;
+			}
 		},
 		events: {
 			onChange: (e, value) => onChange?.(e, value),
@@ -264,6 +275,9 @@
 			clearSelection
 		}
 	});
+
+	setCalendarViewContext(context);
+
 	$effect.pre(() => {
 		pageAnimationDuration = getCSSDuration('--fs-normal-duration') || 333;
 

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

@@ -82,40 +82,52 @@ changing it from the header button leaves focus on the button.
 
 ## CalendarView Props
 
-| Name                  | Type                                                  | Default                      | Description                                                                    |
-| --------------------- | ----------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------ |
-| `ref`                 | bindable `HTMLDivElement`                             |                              | The DOM reference of the calendar element.                                     |
-| `value`               | bindable `Date \| Date[] \| null`                     | `null`                       | The selected date, or an array of dates in `multiple` mode. Unused by `range`. |
-| `selectionMode`       | `'single' \| 'multiple' \| 'range'`                   | `'single'`                   | How many dates the grid hands out, and in what shape.                          |
-| `range`               | bindable `{ start: Date \| null; end: Date \| null }` | `{ start: null, end: null }` | The picked range. `end` is `null` until the range is closed.                   |
-| `blackoutBreaksRange` | `boolean`                                             | `false`                      | Stop a range from spanning a blacked-out date.                                 |
-| `blackoutDates`       | `Date[]`                                              |                              | Dates that are rendered but cannot be selected.                                |
-| `headers`             | `boolean`                                             |                              | Labels the first cell of a month or a year with its name.                      |
-| `minDate`             | `Date`                                                |                              | The earliest selectable date.                                                  |
-| `maxDate`             | `Date`                                                |                              | The latest selectable date.                                                    |
-| `view`                | `'days' \| 'months' \| 'years'`                       | `'days'`                     | The calendar page the view opens on.                                           |
-| `locale`              | `string`                                              | `'en-US'`                    | The locale used to format weekday and month names.                             |
-| `weekStart`           | `number`                                              | `1`                          | The first day of the week, where 0 is Sunday.                                  |
-| `floating`            | `CalendarViewFloating`                                |                              | Renders the calendar as a popup anchored to a reference element.               |
-| `onChange`            | `(event, value) => void`                              |                              | Called whenever the selection changes. Not called in `range` mode.             |
-| `onRangeChange`       | `(event, range) => void`                              |                              | Fired on every step of a range, including the one that leaves `end` null.      |
-| `onViewChange`        | `(event, view) => void`                               |                              | Called whenever the active calendar page changes.                              |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:CalendarViewProps -->
+
+| Name                       | Type                                                                | Default                      | Description                                                                                                                  |
+| -------------------------- | ------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_           | `HTMLDivElement`                                                    |                              | The DOM reference of the calendar element.                                                                                   |
+| `value` _bindable_         | `Date` &#124; `Date[]` &#124; `null`                                | `null`                       | The selected date, or an array of dates when `selectionMode` is `'multiple'`. Unused by `'range'`.                           |
+| `selectionMode`            | `'single'` &#124; `'multiple'` &#124; `'range'`                     | `'single'`                   | How many dates the grid hands out, and in what shape.                                                                        |
+| `range` _bindable_         | `{ start: Date` &#124; `null; end: Date` &#124; `null; }`           | `{ start: null, end: null }` | The picked range. Only read and written when `selectionMode` is `'range'`, and `end` stays `null` until the range is closed. |
+| `blackoutBreaksRange`      | `boolean`                                                           | `false`                      | Stop a range from spanning a blacked-out date.                                                                               |
+| `blackoutDates`            | `Date[]`                                                            |                              | Dates that are rendered but cannot be selected.                                                                              |
+| `headers`                  | `boolean`                                                           |                              | Labels the first cell of a month or a year with its name.                                                                    |
+| `minDate`                  | `Date`                                                              |                              | The earliest selectable date.                                                                                                |
+| `maxDate`                  | `Date`                                                              |                              | The latest selectable date.                                                                                                  |
+| `view`                     | `'days'` &#124; `'months'` &#124; `'years'`                         | `'days'`                     | The calendar page the view opens on.                                                                                         |
+| `locale`                   | `string`                                                            | `'en-US'`                    | The locale used to format weekday and month names.                                                                           |
+| `weekStart`                | `number`                                                            | `1`                          | The first day of the week, where 0 is Sunday.                                                                                |
+| `floating`                 | `CalendarViewFloating`                                              |                              | Renders the calendar as a popup anchored to a reference element instead of inline.                                           |
+| `onChange`                 | `(event: Event, value: Date` &#124; `Date[]` &#124; `null) => void` |                              | Called whenever the selection changes. Not called in `'range'` mode.                                                         |
+| `onRangeChange`            | `(event: Event, range: CalendarDateRange) => void`                  |                              | Fired on every step of a range, including the one that leaves `end` null.                                                    |
+| `onViewChange`             | `(event: Event, view: View) => void`                                |                              | Called whenever the active calendar page changes.                                                                            |
+| Element Attributes (`div`) |                                                                     |                              |                                                                                                                              |
+
+<!-- /props:CalendarViewProps -->
 
 All `div` HTML attributes are forwarded to the root element.
 
 ## CalendarViewItem Props
 
-| Name               | Type                            | Default | Description                                                                       |
-| ------------------ | ------------------------------- | ------- | --------------------------------------------------------------------------------- |
-| `selected`         | `boolean`                       |         | Renders the cell as the selected one.                                             |
-| `disabled`         | `boolean`                       |         | Disables the user interaction.                                                    |
-| `current`          | `boolean`                       |         | Marks the cell as the current date.                                               |
-| `outOfRange`       | `boolean`                       |         | Renders the cell as belonging to a neighbouring page.                             |
-| `blackout`         | `boolean`                       |         | Renders the cell as blacked out, so it reads as unavailable rather than disabled. |
-| `rangePosition`    | `'start' \| 'between' \| 'end'` |         | Set on the days a range covers, which paints the band behind them.                |
-| `header`           | `string`                        |         | A small label rendered above the cell content.                                    |
-| `variant`          | `'day' \| 'monthYear'`          | `'day'` | Which shape the cell takes: a circle for a day, a rounded rectangle otherwise.    |
-| `children`         | `Snippet`                       |         | The content of the cell.                                                          |
-| `buttonAttributes` | `HTMLButtonAttributes`          |         | The attributes to spread on the inner button element.                             |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:CalendarViewItemProps -->
+
+| Name                       | Type                                        | Default | Description                                                                                |
+| -------------------------- | ------------------------------------------- | ------- | ------------------------------------------------------------------------------------------ |
+| `selected`                 | `boolean`                                   |         | Renders the cell as the selected one.                                                      |
+| `disabled`                 | `boolean`                                   |         | Disables the user interaction.                                                             |
+| `current`                  | `boolean`                                   |         | Marks the cell as the current date.                                                        |
+| `outOfRange`               | `boolean`                                   |         | Renders the cell as belonging to a neighbouring page.                                      |
+| `blackout`                 | `boolean`                                   |         | Renders the cell as blacked out, so it reads as unavailable rather than disabled.          |
+| `rangePosition`            | `'start'` &#124; `'between'` &#124; `'end'` |         | Set on the days a range covers, which paints the band behind them.                         |
+| `header`                   | `string`                                    |         | A small label rendered above the cell content.                                             |
+| `variant`                  | `'day'` &#124; `'monthYear'`                | `'day'` | Which shape the cell takes: a circle for a day, a rounded rectangle for a month or a year. |
+| `children`                 | `Snippet`                                   |         | The content of the cell.                                                                   |
+| `buttonAttributes`         | `HTMLButtonAttributes`                      |         | The attributes to spread on the inner button element.                                      |
+| Element Attributes (`div`) |                                             |         |                                                                                            |
+
+<!-- /props:CalendarViewItemProps -->
 
 All `div` HTML attributes are forwarded to the cell element.

package/dist/components/card/card-context.svelte.d.ts

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

package/dist/components/card/card-context.svelte.js

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

package/dist/components/card/card-footer.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { CardFooterProps } from './types.js';
+	import { RenderSoC } from '../../internal/index.js';
+	import { getCardContext } from './card-context.svelte.js';
+
+	let { ref = $bindable(), class: classes, action, ...attributes }: CardFooterProps = $props();
+
+	const context = getCardContext();
+
+	if (!context) throw new Error('Card context is not available. Make sure this component is used within a Card.');
+
+	const { config } = context;
+
+	const showFloatingAction = $derived(config.showFloatingAction);
+	const selectable = $derived(config.selectable);
+
+	// Rendered through `_action`, so the invariant is enforced during SSR and on every prop update.
+	const _action = $derived.by(() => {
+		if (action && selectable) throw new Error('Action cannot be used with selectable cards.');
+		return action;
+	});
+</script>
+
+<div bind:this={ref} class={['fs-card-footer', showFloatingAction && 'with-action', classes]} {...attributes}>
+	{#if _action}
+		<RenderSoC SoC={_action} />
+	{/if}
+</div>
+
+<style>
+	.fs-card-footer {
+		display: flex;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		justify-content: space-between;
+	}
+</style>

package/dist/components/card/card-footer.svelte.d.ts

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

package/dist/components/card/card-header.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { CardHeaderProps } from './types.js';
+	import { RenderSoC } from '../../internal/index.js';
+	import { getCardContext } from './card-context.svelte.js';
+
+	let {
+		ref = $bindable(),
+		class: classes,
+		title,
+		image,
+		imageAlt = '',
+		description,
+		action,
+		...attributes
+	}: CardHeaderProps = $props();
+
+	const context = getCardContext();
+
+	if (!context) throw new Error('Card context is not available. Make sure this component is used within a Card.');
+
+	const { config } = context;
+
+	const showFloatingAction = $derived(config.showFloatingAction);
+	const selectable = $derived(config.selectable);
+	const id = $derived(config.id);
+
+	// Rendered through `_action`, so the invariant is enforced during SSR and on every prop update.
+	const _action = $derived.by(() => {
+		if (action && selectable) throw new Error('Action cannot be used with selectable cards.');
+		return action;
+	});
+</script>
+
+<div bind:this={ref} class={['fs-card-header', showFloatingAction && 'with-action', classes]} {...attributes}>
+	{#if typeof image === 'string'}
+		<img src={image} alt={imageAlt} />
+	{:else if image}
+		<RenderSoC SoC={image} />
+	{/if}
+	{#if description}
+		<div class="fs-card-header-content">
+			{#if typeof title === 'string'}
+				<h4 class="body" id={`${id}-title`}>{title}</h4>
+			{:else if title}
+				<RenderSoC SoC={title} id={`${id}-title`} />
+			{/if}
+			{#if typeof description === 'string'}
+				<p class="caption">{description}</p>
+			{:else if description}
+				<RenderSoC SoC={description} />
+			{/if}
+		</div>
+	{:else if typeof title === 'string'}
+		<h4 class="body" id={`${id}-title`}>{title}</h4>
+	{:else if title}
+		<RenderSoC SoC={title} id={`${id}-title`} />
+	{/if}
+	{#if _action}
+		<RenderSoC SoC={_action} />
+	{/if}
+</div>
+
+<style>
+	.fs-card-header {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		&.with-action:nth-child(2) {
+			padding-right: 2.4rem;
+		}
+		& :global(img) {
+			width: 48px;
+		}
+		& .fs-card-header-content {
+			display: flex;
+			flex-direction: column;
+			margin-right: auto;
+		}
+	}
+</style>

package/dist/components/card/card-header.svelte.d.ts

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

package/dist/components/card/card-preview.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { CardPreviewProps } from './types.js';
+	import { getCardContext } from './card-context.svelte.js';
+
+	let { ref = $bindable(), logoSrc, logoAlt = '', class: classes, children, ...attrs }: CardPreviewProps = $props();
+
+	const context = getCardContext();
+
+	if (!context) throw new Error('Card context is not available. Make sure this component is used within a Card.');
+
+	const { config, state: _state } = context;
+
+	const showFloatingAction = $derived(config.showFloatingAction);
+
+	const orientation = $derived(_state.orientation);
+</script>
+
+<div class={['fs-card-preview', showFloatingAction && 'with-action', orientation, classes]} bind:this={ref} {...attrs}>
+	{@render children?.()}
+	<img src={logoSrc} alt={logoAlt} class="fs-card-preview-logo" />
+</div>
+
+<style>
+	.fs-card-preview {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		overflow: hidden;
+		/* 2nd child (After floating Checkbox) */
+		&:first-child,
+		&.with-action:nth-child(2) {
+			border-radius: var(--fs-control-overlay-border-radius) var(--fs-control-overlay-border-radius) 0 0;
+		}
+		&:last-child {
+			border-radius: 0 0 var(--fs-control-overlay-border-radius) var(--fs-control-overlay-border-radius);
+		}
+		&.horizontal {
+			&:first-child,
+			&.with-action:nth-child(2) {
+				border-radius: var(--fs-control-overlay-border-radius) 0 0 var(--fs-control-overlay-border-radius);
+			}
+			&:last-child {
+				border-radius: 0 var(--fs-control-overlay-border-radius) var(--fs-control-overlay-border-radius) 0;
+			}
+		}
+		&:only-child {
+			border-radius: var(--fs-control-overlay-border-radius);
+		}
+		& :global(img:not(.fs-card-preview-logo)) {
+			width: 100%;
+			height: auto;
+		}
+		& .fs-card-preview-logo {
+			width: 32px;
+			height: auto;
+			position: absolute;
+			bottom: 0.5rem;
+			left: 0.5rem;
+			z-index: 1;
+		}
+	}
+</style>

package/dist/components/card/card-preview.svelte.d.ts

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