svelte-fluentui 1.0.0-rc01

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 KeenMate
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,191 @@
+# Svelte FluentUI
+
+A comprehensive Svelte wrapper library for Microsoft FluentUI web components (v2.6.x), providing a seamless way to use FluentUI components in Svelte applications.
+
+## Features
+
+- 🎨 **Complete FluentUI Component Set** - Wraps all major FluentUI web components
+- 🔧 **TypeScript Support** - Full type definitions for all components
+- 📱 **Responsive Design** - Built-in responsive layout components
+- 🎯 **Svelte 5 Compatible** - Works with the latest Svelte features
+- 🎨 **SCSS & Tailwind CSS** - Flexible styling options
+- 📦 **Tree-shakeable** - Import only what you need
+
+## Installation
+
+```bash
+npm install svelte-fluentui
+```
+
+## Quick Start
+
+```svelte
+<script>
+  import { Button, TextField, Card } from 'svelte-fluentui'
+</script>
+
+<Card>
+  <TextField placeholder="Enter your name" />
+  <Button appearance="accent">Submit</Button>
+</Card>
+```
+
+## Available Components
+
+### Form Controls
+- `Button` - Various button styles and appearances
+- `TextField` - Text input with validation
+- `NumberField` - Numeric input control
+- `Textarea` - Multi-line text input
+- `Checkbox` - Checkbox input
+- `Radio` / `RadioGroup` - Radio button controls
+- `Switch` - Toggle switch
+- `Select` - Dropdown selection
+- `Combobox` - Searchable dropdown
+- `Slider` - Range slider control
+- `Search` - Search input field
+
+### Data Display
+- `DataGrid` / `DataGridRow` / `DataGridCell` - Data table components
+- `Card` - Content container
+- `Badge` - Status indicators
+- `ProgressBar` - Progress indication
+- `Tooltip` - Contextual information
+- `Calendar` - Date picker and calendar
+
+### Navigation
+- `Tabs` / `Tab` / `TabPanel` - Tab navigation
+- `Breadcrumb` / `BreadcrumbItem` - Breadcrumb navigation
+- `Menu` / `MenuItem` - Context menus
+- `AppBar` / `AppBarItem` - Application bar
+- `NavMenu` / `NavItem` / `NavLink` - Navigation components
+- `Anchor` - Link component
+
+### Layout
+- `Stack` - Flexible layout container
+- `Layout` - Page layout wrapper
+- `Header` / `Footer` / `BodyContent` - Layout sections
+- `Spacer` - Spacing utility
+- `Divider` - Visual separator
+
+### Feedback
+- `Dialog` - Modal dialogs
+- `Toast` - Notification messages
+- `Accordion` / `AccordionItem` - Collapsible content
+
+### Utilities
+- `Listbox` / `Option` - List selection
+- `Tree` / `TreeItem` - Hierarchical data
+- `Toolbar` - Action toolbars
+- `Paginator` - Pagination control
+
+## Usage Examples
+
+### Form with Validation
+```svelte
+<script>
+  import { TextField, Button, Stack } from 'svelte-fluentui'
+
+  let email = ''
+  let password = ''
+</script>
+
+<Stack orientation="vertical" gap="16">
+  <TextField
+    bind:value={email}
+    type="email"
+    placeholder="Enter email"
+    required
+  />
+  <TextField
+    bind:value={password}
+    type="password"
+    placeholder="Enter password"
+    required
+  />
+  <Button appearance="accent">Sign In</Button>
+</Stack>
+```
+
+### Data Grid
+```svelte
+<script>
+  import { DataGrid, DataGridRow, DataGridCell } from 'svelte-fluentui'
+
+  const users = [
+    { name: 'Alice', email: 'alice@example.com', role: 'Admin' },
+    { name: 'Bob', email: 'bob@example.com', role: 'User' }
+  ]
+</script>
+
+<DataGrid>
+  {#each users as user}
+    <DataGridRow>
+      <DataGridCell>{user.name}</DataGridCell>
+      <DataGridCell>{user.email}</DataGridCell>
+      <DataGridCell>{user.role}</DataGridCell>
+    </DataGridRow>
+  {/each}
+</DataGrid>
+```
+
+### Navigation Layout
+```svelte
+<script>
+  import { Layout, Header, NavMenu, NavItem, BodyContent } from 'svelte-fluentui'
+</script>
+
+<Layout>
+  <Header slot="header">
+    <h1>My App</h1>
+  </Header>
+
+  <NavMenu slot="navigation">
+    <NavItem href="/">Home</NavItem>
+    <NavItem href="/about">About</NavItem>
+    <NavItem href="/contact">Contact</NavItem>
+  </NavMenu>
+
+  <BodyContent>
+    <!-- Main content here -->
+  </BodyContent>
+</Layout>
+```
+
+## Development
+
+Clone the repository and install dependencies:
+
+```bash
+git clone https://github.com/KeenMate/svelte-fluentui.git
+cd svelte-fluentui
+npm install
+```
+
+Start the development server:
+
+```bash
+npm run dev
+```
+
+Visit `http://localhost:5173` to see the component showcase and examples.
+
+## Building
+
+Build the library:
+
+```bash
+npm run build
+```
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT © [KeenMate](https://github.com/KeenMate)
+
+## Credits
+
+Built on top of [Microsoft FluentUI Web Components](https://github.com/microsoft/fluentui) v2.6.x.

package/dist/actions/use-actions.d.ts

@@ -0,0 +1 @@
+export default function useActions(node: HTMLElement, options?: ((node: HTMLElement) => any) | null | undefined): any;

package/dist/actions/use-actions.js

@@ -0,0 +1,6 @@
+export default function useActions(node, options) {
+    if (!options) {
+        return;
+    }
+    return options(node);
+}

package/dist/components/Accordion.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">import { fluentAccordion, provideFluentDesignSystem } from "@fluentui/web-components";
+import { setContext } from "svelte";
+provideFluentDesignSystem().register(fluentAccordion());
+let { value = $bindable(), multi = undefined, children = undefined, ...restProps } = $props();
+const ctx = $state({ value: toContextValue(value) });
+setContext("fluent-accordion", ctx);
+$effect(() => {
+    ctx.value = toContextValue(value);
+});
+// $effect(() => {
+// 	if ($state.snapshot(internalValue) !== value) {
+// 		internalValue = value
+// 	}
+// })
+function handleAccordionChange(ev) {
+    const accordionItemTarget = ev.target;
+    if (ev.target?.nodeName !== "FLUENT-ACCORDION-ITEM") {
+        return;
+    }
+    // to allow fluent-accordion-item to update HTML attributes that are to be relied upon
+    window.requestAnimationFrame(() => {
+        const accordionItemId = accordionItemTarget.dataset.customId;
+        const accordionItemIsExpanded = accordionItemTarget.attributes["expanded"]?.value === "";
+        // console.log("Accordion change", {
+        // 	ev,
+        // 	accordionItemTarget,
+        // 	accordionItemId,
+        // 	expandedValue: accordionItemTarget.attributes["expanded" as unknown as number]?.value,
+        // 	accordionItemIsExpanded
+        // })
+        if (ev.target?.nodeName !== "FLUENT-ACCORDION-ITEM") {
+            return;
+        }
+        if (multi) {
+            let tmp = typeof value === "string" ? [$state.snapshot(value)] : value?.slice() || [];
+            if (accordionItemIsExpanded) {
+                tmp.push(accordionItemId);
+            }
+            else {
+                tmp = tmp.filter((x) => x !== accordionItemId);
+            }
+            setExpanded(tmp);
+        }
+        else {
+            setExpanded(accordionItemIsExpanded ? accordionItemId : null);
+        }
+    });
+}
+function setExpanded(newValue) {
+    if (multi && newValue?.length === 0) {
+        newValue = null;
+    }
+    value = newValue;
+    // ctx.value = toContextValue(newValue)
+}
+function toContextValue(value) {
+    if (multi) {
+        return typeof value === "string" ? [$state.snapshot(value)] : $state.snapshot(value);
+    }
+    else {
+        return typeof value === "string" ? [value] : null;
+    }
+}
+</script>
+
+<fluent-accordion expand-mode={multi} {...restProps} onchange={handleAccordionChange}>
+	{@render children?.()}
+</fluent-accordion>

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

@@ -0,0 +1,11 @@
+import type { SlotType } from "../types/index.js";
+type ValueType = string | string[] | null | undefined;
+type Props = {
+    value?: ValueType;
+    multi?: boolean;
+    children?: SlotType;
+    [prop: string]: any;
+};
+declare const Accordion: import("svelte").Component<Props, {}, "value">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/AccordionItem.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">import { fluentAccordionItem, provideFluentDesignSystem } from "@fluentui/web-components";
+import { getContext } from "svelte";
+provideFluentDesignSystem().register(fluentAccordionItem());
+let { id, headingLevel = undefined, expanded = undefined, header = undefined, heading = undefined, start = undefined, end = undefined, icon = undefined, children = undefined, onChange = undefined, ...restProps } = $props();
+const ctx = getContext("fluent-accordion");
+$inspect(id, expanded, ctx.value);
+function handleOnChange(ev) {
+    // console.log("Accordion item change", ev)
+    const target = ev.target;
+    onChange?.(ev, target.attributes["expanded"]?.value === "");
+}
+</script>
+
+<!-- todo: investigate flicker during switching of accordions -->
+<fluent-accordion-item
+	{id}
+	data-custom-id={id}
+	heading-level={headingLevel}
+	expanded={expanded === undefined && ctx.value !== undefined ? !!ctx.value?.includes(id) : expanded}
+	{...restProps}
+	onchange={handleOnChange}
+>
+	<div slot="heading">
+		{#if heading}
+			{@render heading()}
+		{:else}
+			{header}
+		{/if}
+	</div>
+
+	{#if start}
+		<div slot="start">
+			{@render start()}
+		</div>
+	{/if}
+	{#if end}
+		<div slot="end">
+			{@render end()}
+		</div>
+	{/if}
+	{#if icon}
+		<div slot="expanded-icon">
+			{@render icon(true)}
+		</div>
+		<div slot="collapsed-icon">
+			{@render icon(false)}
+		</div>
+	{/if}
+
+	{@render children?.()}
+</fluent-accordion-item>
+

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

@@ -0,0 +1,17 @@
+import type { SlotType } from "../types/index.js";
+type Props = {
+    id: string;
+    headingLevel?: string | number;
+    header?: string;
+    expanded?: boolean;
+    heading?: SlotType;
+    start?: SlotType;
+    end?: SlotType;
+    icon?: SlotType;
+    children?: SlotType;
+    onChange?: (ev: Event, isExpanded: boolean) => void;
+    [prop: string]: any;
+};
+declare const AccordionItem: import("svelte").Component<Props, {}, "">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/Anchor.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">import { fluentAnchor, provideFluentDesignSystem } from "@fluentui/web-components";
+import useActions from "../actions/use-actions.js";
+provideFluentDesignSystem().register(fluentAnchor());
+let element;
+let { id = undefined, class: className = "", style = "", download = undefined, href = undefined, hreflang = undefined, ping = undefined, referrerpolicy = undefined, rel = undefined, target = undefined, type = undefined, appearance = undefined, iconStart = undefined, iconEnd = undefined, children = undefined, preventDefault = false, use = undefined, onClick = undefined, ...restProps } = $props();
+$effect(() => {
+    const a = element.shadowRoot?.querySelector("a");
+    if (a)
+        use?.(a);
+});
+function handleClick(event) {
+    if (preventDefault) {
+        event.preventDefault();
+    }
+    if (onClick) {
+        onClick(event);
+    }
+}
+</script>
+
+<fluent-anchor
+	bind:this={element}
+	{id}
+	class={className}
+	{style}
+	{download}
+	{href}
+	{hreflang}
+	{ping}
+	{referrerpolicy}
+	{rel}
+	{target}
+	{type}
+	{appearance}
+	onclick={handleClick}
+	{...restProps}
+>
+	{#if iconStart}
+		<span slot={children ? "start" : undefined}>
+			{@render iconStart?.()}
+		</span>
+	{/if}
+
+	{#if children}
+		{@render children?.()}
+	{/if}
+
+	{#if iconEnd}
+		<span slot={children ? "end" : undefined}>
+			{@render iconEnd?.()}
+		</span>
+	{/if}
+</fluent-anchor>

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

@@ -0,0 +1,25 @@
+import type { SlotType } from "../types/index.js";
+type Props = {
+    id?: string;
+    class?: string;
+    style?: string;
+    download?: string;
+    href?: string;
+    hreflang?: string;
+    ping?: string;
+    referrerpolicy?: string;
+    rel?: string;
+    target?: string;
+    type?: string;
+    appearance?: "neutral" | "accent" | "hypertext" | "stealth" | "transparent";
+    iconStart?: SlotType;
+    iconEnd?: SlotType;
+    children?: SlotType;
+    preventDefault?: boolean;
+    use?: ((node: HTMLElement) => any) | undefined;
+    onClick?: (event: MouseEvent) => void;
+    [prop: string]: any;
+};
+declare const Anchor: import("svelte").Component<Props, {}, "">;
+type Anchor = ReturnType<typeof Anchor>;
+export default Anchor;

package/dist/components/Badge.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">import { fluentBadge, provideFluentDesignSystem } from "@fluentui/web-components";
+provideFluentDesignSystem().register(fluentBadge());
+let { color = undefined, appearance = undefined, circular = undefined, children = undefined, onClick = undefined, ...restProps } = $props();
+</script>
+
+<fluent-badge
+	{...restProps}
+	{color}
+	{appearance}
+	{circular}
+	onclick={onClick}
+>
+	{@render children?.()}
+</fluent-badge>

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

@@ -0,0 +1,15 @@
+import type { SlotType } from "../types/index.js";
+type Props = {
+    /**
+     * for `color` prop to work a CSS variable `--badge-color-[color]` must be defined
+     */
+    color?: string;
+    appearance?: string;
+    circular?: boolean;
+    children?: SlotType;
+    onClick?: (ev: MouseEvent) => void;
+    [prop: string]: any;
+};
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/Breadcrumb.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">import { fluentBreadcrumb, provideFluentDesignSystem } from "@fluentui/web-components";
+provideFluentDesignSystem().register(fluentBreadcrumb());
+let { children = undefined, ...restProps } = $props();
+</script>
+
+<fluent-breadcrumb {...restProps}>
+	{@render children?.()}
+</fluent-breadcrumb>

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

@@ -0,0 +1,8 @@
+import type { SlotType } from "../types/index.js";
+type Props = {
+    children?: SlotType;
+    [prop: string]: any;
+};
+declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/BreadcrumbItem.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">import { fluentBreadcrumbItem, provideFluentDesignSystem } from "@fluentui/web-components";
+provideFluentDesignSystem().register(fluentBreadcrumbItem());
+let { href = undefined, separator = undefined, children = undefined, ...restProps } = $props();
+</script>
+
+<fluent-breadcrumb-item
+	{...restProps}
+	{href}
+>
+	{#if separator}
+		<span slot="separator">
+			{@render separator?.()}
+		</span>
+	{/if}
+
+	{@render children?.()}
+</fluent-breadcrumb-item>

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

@@ -0,0 +1,10 @@
+import type { SlotType } from "../types/index.js";
+type Props = {
+    href?: string;
+    separator?: SlotType;
+    children?: SlotType;
+    [prop: string]: any;
+};
+declare const BreadcrumbItem: import("svelte").Component<Props, {}, "">;
+type BreadcrumbItem = ReturnType<typeof BreadcrumbItem>;
+export default BreadcrumbItem;

package/dist/components/Button.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { fluentButton, provideFluentDesignSystem } from "@fluentui/web-components";
+provideFluentDesignSystem().register(fluentButton());
+let { appearance = undefined, autofocus = undefined, disabled = undefined, form = undefined, formaction = undefined, formenctype = undefined, formmethod = undefined, formnovalidate = undefined, formtarget = undefined, name = undefined, type = undefined, value = undefined, start = undefined, end = undefined, children = undefined, style = "", onClick = undefined, ...restProps } = $props();
+</script>
+
+<fluent-button
+	{type}
+	{name}
+	{value}
+	{appearance}
+	{formaction}
+	{form}
+	{formenctype}
+	{formmethod}
+	{formnovalidate}
+	{formtarget}
+	{disabled}
+	{style}
+	{...restProps}
+	onclick={onClick}
+>
+	
+		{@render start?.()}
+	
+	{@render children?.()}
+	{#if end}
+		<template slot="end">
+			{@render end()}
+		</template>
+	{/if}
+</fluent-button>

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

@@ -0,0 +1,24 @@
+import type { SlotType } from "../types/index.js";
+type Props = {
+    appearance?: string;
+    autofocus?: string;
+    disabled?: string;
+    form?: string;
+    formaction?: string;
+    formenctype?: string;
+    formmethod?: string;
+    formnovalidate?: string;
+    formtarget?: string;
+    name?: string;
+    type?: string;
+    value?: string;
+    start?: SlotType;
+    end?: SlotType;
+    children?: SlotType;
+    style?: string;
+    onClick?: (ev: MouseEvent) => void;
+    [prop: string]: any;
+};
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;