fluentui-svelte 0.1.0

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

@@ -0,0 +1,165 @@
+<script lang="ts">
+	import ChevronDownFilled from 'fluentui-icons-svelte/ChevronDownFilled.svelte';
+	import { selectDirection } from './dropdown-select.svelte.js';
+	import type { DropdownSelectProps } from './types.js';
+
+	let {
+		hidePlaceholder,
+		placeholder = 'Native Select Dropdown',
+		ref = $bindable(),
+		children,
+		wrapperRef = $bindable(),
+		wrapperProps,
+		multiple,
+		value = $bindable(multiple ? [] : ''),
+		...attributes
+	}: DropdownSelectProps = $props();
+</script>
+
+<div class="fs-dropdown" bind:this={wrapperRef} {...wrapperProps}>
+	{#if !multiple}
+		<ChevronDownFilled class="indicator" />
+	{/if}
+	<!-- 
+		Due to svelte limitation: "'multiple' attribute must be static if select uses two-way binding"...
+		We need to use a if block with the same structure 
+	-->
+	{#if multiple}
+		<select class="fs-dropdown-select" {@attach selectDirection()} multiple bind:value bind:this={ref} {...attributes}>
+			<button>
+				<selectedcontent></selectedcontent>
+			</button>
+			{#if !hidePlaceholder}
+				<option class="fs-dropdown-placeholder" disabled selected hidden value="">{placeholder}</option>
+			{/if}
+			{@render children?.()}
+		</select>
+	{:else}
+		<select class="fs-dropdown-select" {@attach selectDirection()} bind:value bind:this={ref} {...attributes}>
+			<button>
+				<selectedcontent></selectedcontent>
+			</button>
+			{#if !hidePlaceholder}
+				<option class="fs-dropdown-placeholder" disabled selected hidden value="">{placeholder}</option>
+			{/if}
+			{@render children?.()}
+		</select>
+	{/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;
+		&:before {
+			content: '';
+			pointer-events: none;
+			width: calc(100%);
+			height: calc(100%);
+			position: absolute;
+			top: 0;
+			left: 0;
+			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;
+		}
+		&:has(:focus-visible, :focus-within):after,
+		&:has(:open):after {
+			width: calc(100%);
+			left: 0;
+			background-color: var(--fs-accent-fill-default);
+		}
+		& .fs-dropdown-select {
+			border-radius: 0;
+			background: unset;
+			appearance: base-select;
+			width: 100%;
+			height: 100%;
+			padding: 0.25rem 2.2rem 0.25rem 0.8rem;
+			border: none;
+			font-size: var(--fs-body-font-size);
+			color: var(--fs-text-secondary);
+			cursor: pointer;
+			outline: none;
+			&::-ms-expand {
+				display: none;
+			}
+			&:has(option:checked:not(.fs-dropdown-placeholder)) {
+				color: var(--fs-text-primary);
+			}
+			&,
+			&::picker(select) {
+				appearance: base-select;
+			}
+			&::picker(select) {
+				padding: 0.3rem;
+				min-height: max-content;
+				border-radius: 0 0 var(--fs-control-border-radius) var(--fs-control-border-radius);
+				border: 1px solid var(--fs-control-surface-stroke-flyout);
+				background: var(--fs-acrylic-background-default);
+				box-shadow: var(--fs-shadow-card);
+			}
+			&::picker-icon {
+				display: none;
+			}
+			&[multiple] {
+				padding: 0.3rem;
+			}
+			&:global(.popover-up)::picker(select) {
+				border-radius: var(--fs-control-border-radius) var(--fs-control-border-radius) 0 0;
+			}
+		}
+		&:global(:has(.open.popover-up):not(:has([multiple])))::before {
+			border-radius: 0 0 var(--fs-control-border-radius) var(--fs-control-border-radius);
+		}
+		&:global(:has(.open):not(:has(.popover-up, [multiple])))::before {
+			border-radius: var(--fs-control-border-radius) var(--fs-control-border-radius) 0 0;
+		}
+		&:global(:has(.open):not(:has(.popover-up, [multiple])))::after {
+			border-radius: 0;
+		}
+		& selectedcontent :global(:has(.value-text) :not(.value-text)),
+		& selectedcontent :global(.checkmark) {
+			display: none;
+		}
+		&:global(:has(.fs-dropdown-select-option:checked) .fs-dropdown-select-option:not(:checked) .option-content) {
+			/* Calc padding + checkmark width + gap */
+			padding: 0.275rem 0.5rem 0.4rem calc(0.5rem + 1rem + 0.5rem);
+		}
+		& :global(.indicator) {
+			width: 1rem;
+			position: absolute;
+			right: 0.6rem;
+			pointer-events: none;
+			color: var(--fs-text-secondary);
+		}
+		& :global(select:-internal-list-box:focus option:checked) {
+			background: red !important;
+		}
+	}
+</style>

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

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

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

@@ -0,0 +1,48 @@
+import { onClickOutside } from 'runed';
+export function selectDirection() {
+    return (node) => {
+        // No needed when multiple is enabled
+        if (node.multiple)
+            return;
+        let cleanup = $state(null);
+        let isOpen = $state(false);
+        function updateDirection() {
+            const positionArea = window?.getComputedStyle(node, '::picker(select)').positionArea;
+            node.classList.toggle('popover-up', positionArea.includes('start'));
+            if (isOpen) {
+                node.classList.add('open');
+            }
+            else {
+                node.classList.remove('open');
+            }
+        }
+        function onToggle() {
+            if (!isOpen) {
+                window.addEventListener('scroll', updateDirection, { passive: true, capture: true });
+                const ro = new ResizeObserver(updateDirection);
+                ro.observe(document.documentElement);
+                updateDirection();
+                cleanup = () => {
+                    window.removeEventListener('scroll', updateDirection, { capture: true });
+                    ro.disconnect();
+                    isOpen = false;
+                    cleanup = null;
+                    node.classList.remove('popover-up');
+                    node.classList.remove('open');
+                };
+                isOpen = true;
+            }
+            else {
+                cleanup?.();
+            }
+        }
+        onClickOutside(() => node, () => {
+            cleanup?.();
+        });
+        node.addEventListener('click', onToggle);
+        return () => {
+            cleanup?.();
+            node.removeEventListener('click', onToggle);
+        };
+    };
+}

package/dist/components/dropdown-select/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DropdownSelect } from './dropdown-select.svelte';
+export { default as SelectOption } from './dropdown-select-option.svelte';

package/dist/components/dropdown-select/index.js

@@ -0,0 +1,2 @@
+export { default as DropdownSelect } from './dropdown-select.svelte';
+export { default as SelectOption } from './dropdown-select-option.svelte';

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

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLOptionAttributes, HTMLSelectAttributes } from 'svelte/elements';
+/** @propsmith DropdownSelectProps */
+export type DropdownSelectProps = {
+    /** 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 while no option is selected.
+     * @default 'Native Select Dropdown'
+     */
+    placeholder?: string;
+    /** Keeps the placeholder out of the option list once a value is selected. */
+    hidePlaceholder?: boolean;
+    /** The DOM reference of the select element.
+     * @bindable
+     */
+    ref?: HTMLSelectElement;
+    /** The DOM reference of the wrapper element.
+     * @bindable
+     */
+    wrapperRef?: HTMLDivElement;
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
+     */
+    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+} & HTMLSelectAttributes;
+/** @propsmith DropdownSelectOptionProps */
+export type DropdownSelectOptionProps = {
+    /** The value reported to the select when the option is picked. */
+    value?: string;
+    /** The label of the option. Falls back to the rendered children. */
+    text?: string;
+    /** Disables the user interaction. */
+    disabled?: boolean;
+    /** The DOM reference of the option element.
+     * @bindable
+     */
+    ref?: HTMLElement;
+    /** The content of the option, used when no `text` is given. */
+    children?: Snippet;
+} & HTMLOptionAttributes;

package/dist/components/dropdown-select/types.js

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

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

@@ -0,0 +1,88 @@
+# Expander
+
+Control that displays a header and a collapsible content area.
+
+## Usage
+
+A basic expander expects a header and its content. You can configure the header by passing the `header` property. Content can be provided as child elements of the component. By default, the content container has no padding, this allows you to use 100% of the content width if needed.
+
+```svelte
+<script>
+	import { Expander } from 'fluentui-svelte';
+</script>
+
+<Expander header="Expander Title">
+	<p>This is the content of the expander</p>
+</Expander>
+```
+
+## 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
+
+### Controlling Expansion
+
+Expanders can be either expanded or collapsed. This can be controlled by setting the `expanded` property.
+
+```svelte
+<Expander header="Expander Title" expanded>
+	<p>This is the content of the expander</p>
+</Expander>
+```
+
+### Opening Direction
+
+An expander doesn't have to expand downwards. You can control an expander's expansion direction using the `direction` property. To create an upwards-expanding expander, set `direction` to `up`.
+
+```svelte
+<Expander header="Expander Title" direction="up">
+	<p>This is the content of the expander</p>
+</Expander>
+```
+
+### Adding an Icon
+
+You can easily add an icon to an expander's header using the `Icon` prop. You can pass either a Snippet or a Component. When using Snippet, you have two options:
+
+- Apply the styles to the icon yourself
+- Spread the Snippet props into the SVG element
+
+```svelte
+<script>
+	import { Expander } from 'fluentui-svelte';
+	/** As component */
+	import { InfoRegular } from 'fluentui-icons-svelte';
+</script>
+
+<!-- As Snippet -->
+{#snippet IconSnippet(props)}
+	<!-- Spread props from Expander Component -->
+	<svg {...props} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<path d="M6.747..." />
+	</svg>
+{/snippet}
+
+<Expander header="Expander Title" direction="up" Icon={InfoRegular}>
+	<p>This is the content of the expander</p>
+</Expander>
+<Expander header="Expander Title" direction="up" Icon={IconSnippet}>
+	<p>This is the content of the expander</p>
+</Expander>
+```
+
+## Component Props
+
+| Name          | Type                   | Description                                                               |
+| ------------- | ---------------------- | ------------------------------------------------------------------------- |
+| `header`      | `string`               | Label of the expander.                                                    |
+| `description` | `string`               | Description to render below the header.                                   |
+| `direction`   | `string`               | The opening direction of the expander. Possible values: `'down'`, `'up'`. |
+| `justify`     | `boolean`              | Whether the expander is justified to the full width of the container.     |
+| `disabled`    | `boolean`              | Disables the user interaction.                                            |
+| `animation`   | `object`               | The animation configuration.                                              |
+| `expanded`    | `boolean`              | Controls the opening state of the expander.                               |
+| `element`     | `HTMLDetailsElement`   | The DOM reference of the expander element.                                |
+| `Icon`        | `Snippet \| Component` | The icon to display before the label.                                     |
+| `children`    | `Snippet`              | The children elements to render inside the expander.                      |

package/dist/components/expander/expander.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+	import { Button } from '../../index.js';
+	import { Expander, invokeHandlers, RenderSoC } from '../../internal/index.js';
+	import { getReducedMotion } from '../../providers/fluentui-svelte/fluentui-svelte.js';
+	import ChevronUpFilled from 'fluentui-icons-svelte/ChevronUpFilled.svelte';
+	import type { Action } from 'svelte/action';
+	import type { ExpanderProps } from './types.js';
+
+	let {
+		header,
+		description,
+		disabled = false,
+		direction = 'down',
+		animation,
+		justify = false,
+		ref = $bindable(),
+		expanded = $bindable(false),
+		children,
+		Icon,
+		summaryRef = $bindable(),
+		summaryProps,
+		...attributes
+	}: ExpanderProps = $props();
+
+	const handleClick = () => (expanded = !expanded);
+
+	const reducedMotion = getReducedMotion();
+
+	let supportInterpolation = $state(false);
+
+	const expander: Action<HTMLDetailsElement> = (element) => {
+		supportInterpolation = CSS.supports('interpolate-size', 'allow-keywords');
+		let cleanEvent: (() => void) | null = null;
+		if (!supportInterpolation) {
+			const duration = animation?.duration || 400;
+			const easing =
+				animation?.easing ||
+				getComputedStyle(document.documentElement).getPropertyValue('--fs-point-to-point') ||
+				'ease-in-out';
+			cleanEvent = new Expander(element, direction, duration, easing, reducedMotion).cleanEvent;
+		}
+		return {
+			destroy: () => {
+				cleanEvent?.();
+			}
+		};
+	};
+</script>
+
+<!-- 
+@component
+
+The expander is a collapsible container that can be used to hide or show content. 
+It is used to reduce the amount of information displayed on the screen and to 
+improve the user experience.
+
+- Usage:
+```tsx
+<script>
+  import { Expander } from 'fluentui-svelte';
+</script>
+
+<Expander label="Expander label" description="Expander description">
+  <p>Expander content</p>
+</Expander>
+```
+-->
+<details
+	bind:this={ref}
+	bind:open={expanded}
+	use:expander
+	class={['fs-expander', direction, { disabled, justify }]}
+	{...attributes}
+>
+	<summary
+		class="fs-summary"
+		onclick={(e) => invokeHandlers(e, [disabled], [supportInterpolation && (() => e.preventDefault()), handleClick])}
+		bind:this={summaryRef}
+		{...summaryProps}
+	>
+		<span class="row">
+			{#if Icon}
+				<span class="icon">
+					<RenderSoC SoC={Icon} />
+				</span>
+			{/if}
+			<span class="title-wrapper">
+				{header}
+				{#if description}
+					<small class="description">
+						{description}
+					</small>
+				{/if}
+			</span>
+		</span>
+		<Button as="div" {disabled} appearance="subtle">
+			<ChevronUpFilled
+				class={`button-icon ${direction === 'down' ? (expanded ? '' : 'flip') : expanded ? 'flip' : ''}`}
+			/>
+		</Button>
+	</summary>
+	<div class="content {direction}">
+		{@render children?.()}
+	</div>
+</details>
+
+<style>
+	.fs-expander {
+		display: flex;
+		flex-direction: column;
+		flex: 0 1 auto;
+		width: max-content;
+		&.justify {
+			width: 100%;
+		}
+		&.up {
+			flex-direction: column-reverse;
+		}
+		& .row {
+			display: flex;
+			align-items: center;
+			gap: 0.625rem;
+			width: 100%;
+		}
+		& .fs-summary {
+			user-select: none;
+			display: flex;
+			justify-content: space-between;
+			list-style: none;
+			background-clip: padding-box;
+			border: 0.063rem solid var(--fs-card-stroke-default);
+			border-radius: var(--fs-control-border-radius);
+			background-color: var(--fs-card-background-default);
+			padding: 0.5rem 0.5rem 0.5rem 1rem;
+			outline: none;
+			cursor: pointer;
+			& .title-wrapper {
+				line-height: var(--fs-body2-line-height);
+				font-size: var(--fs-body2-font-size);
+				color: var(--fs-text-primary);
+				font-weight: 400;
+				display: flex;
+				flex-direction: column;
+				flex-wrap: wrap;
+				gap: 0rem;
+				padding-right: 1rem;
+				& .description {
+					font-size: var(--fs-caption-font-size);
+					color: var(--fs-text-secondary);
+					margin: 0;
+					width: 100%;
+				}
+			}
+			& .icon {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 1.2rem;
+				max-width: 1.2rem;
+				height: 1.2rem;
+				color: var(--fs-text-primary);
+				& :global(svg) {
+					color: var(--fs-text-primary);
+				}
+			}
+			&:hover {
+				/* In the official documentation, this should NOT happen, however, in Windows 11 you can see that they do! and the button stops having hover effects at the same time. */
+				/* background-color: var(--fs-card-background-secondary); */
+				& :global(.fs-button.subtle) {
+					background: var(--fs-subtle-fill-secondary);
+				}
+			}
+			&:focus-visible {
+				outline: 0.125rem var(--fs-focus-stroke-outer) solid;
+				outline-offset: 0.063rem;
+			}
+			&:active {
+				& :global(.fs-button.subtle) {
+					background: var(--fs-subtle-fill-tertiary);
+				}
+			}
+			& :global(.button-icon) {
+				transition: transform var(--fs-slow-duration) var(--fs-fast-dismiss);
+				width: 1.2rem;
+				color: var(--fs-text-primary);
+			}
+			& :global(.flip) {
+				transform: rotate(180deg);
+			}
+		}
+		& .content {
+			background-clip: padding-box;
+			border: 0.063rem solid var(--fs-card-stroke-default);
+			background-color: var(--fs-card-background-secondary);
+			&.up {
+				border-bottom: none;
+				border-top-right-radius: var(--fs-control-border-radius);
+				border-top-left-radius: var(--fs-control-border-radius);
+			}
+			&.down {
+				border-top: none;
+				border-bottom-right-radius: var(--fs-control-border-radius);
+				border-bottom-left-radius: var(--fs-control-border-radius);
+			}
+		}
+		&[open] {
+			&.up .fs-summary {
+				border-top-right-radius: 0;
+				border-top-left-radius: 0;
+			}
+			&.down .fs-summary {
+				border-bottom-right-radius: 0;
+				border-bottom-left-radius: 0;
+			}
+		}
+		&.disabled {
+			& .fs-summary {
+				cursor: not-allowed;
+			}
+			& .title-wrapper {
+				color: var(--fs-text-disabled);
+			}
+			& :global(.button-icon *) {
+				color: var(--fs-text-disabled) !important;
+				fill: var(--fs-text-disabled) !important;
+			}
+		}
+	}
+	@supports (interpolate-size: allow-keywords) {
+		:root {
+			interpolate-size: allow-keywords;
+		}
+		::details-content {
+			display: contents;
+		}
+		.content {
+			transition:
+				height var(--fs-normal-duration) var(--fs-point-to-point),
+				content-visibility var(--fs-normal-duration) allow-discrete;
+			height: 0;
+			overflow: clip;
+			visibility: hidden;
+		}
+		[open] .content {
+			visibility: visible;
+			height: max-content;
+		}
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import { Expander } from '../../internal/index.js';
+import type { ExpanderProps } from './types.ts';
+/**
+ * The expander is a collapsible container that can be used to hide or show content.
+ * It is used to reduce the amount of information displayed on the screen and to
+ * improve the user experience.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * import { Expander } from 'fluentui-svelte';
+ * </script>
+ *
+ * <Expander label="Expander label" description="Expander description">
+ * <p>Expander content</p>
+ * </Expander>
+ * ```
+ */
+declare const Expander: import("svelte").Component<ExpanderProps, {}, "ref" | "expanded" | "summaryRef">;
+type Expander = ReturnType<typeof Expander>;
+export default Expander;

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

@@ -0,0 +1,47 @@
+import type { Component, Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLDetailsAttributes, SVGAttributes } from 'svelte/elements';
+/** @propsmith ExpanderProps */
+export type ExpanderProps = {
+    /** Label of the expander. */
+    header: string;
+    /** Description to render below the header. */
+    description?: string;
+    /** Set the opening direction of the expander.
+     * @default 'down'
+     */
+    direction?: 'down' | 'up';
+    /** The expander is justified to the full width of the container.
+     * @default false
+     */
+    justify?: boolean;
+    /** Disables the user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /** The animation configuration. Reduced motion is always honoured over this. */
+    animation?: {
+        duration: number;
+        easing: string;
+    };
+    /** Control the opening state of the expander.
+     * @default false
+     * @bindable
+     */
+    expanded?: boolean;
+    /** The DOM reference of the expander element.
+     * @bindable
+     */
+    ref?: HTMLDetailsElement;
+    /** The icon to display before the label.
+     * @type Snippet | Component
+     */
+    Icon?: Snippet<[SVGAttributes<SVGElement>] | []> | Component<SVGAttributes<SVGElement>>;
+    /** The DOM reference of the summary element.
+     * @bindable
+     */
+    summaryRef?: HTMLElement;
+    /** The props to spread on the summary element.
+     * @type HTMLAttributes
+     */
+    summaryProps?: HTMLAttributes<HTMLElement>;
+} & HTMLDetailsAttributes;

package/dist/components/expander/types.js

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