fluentui-svelte 0.1.2 → 0.2.0

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

@@ -0,0 +1,206 @@
+# Card
+
+A card is a container that groups content and actions about a single topic, and can optionally be selected.
+
+## Usage
+
+```svelte
+<script>
+	import { Card, CardPreview, CardHeader, CardFooter, Button } from 'fluentui-svelte';
+</script>
+
+{#snippet footerActions()}
+	<Button>Like</Button>
+	<Button appearance="standard">Share</Button>
+{/snippet}
+
+<Card orientation="vertical">
+	<CardPreview logoSrc="/logo.png">
+		<img src="/preview.png" alt="Preview" />
+	</CardPreview>
+	<CardHeader title="FluentUI Svelte" description="5h ago · About us - Overview" />
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+	<CardFooter action={footerActions} />
+</Card>
+```
+
+## Component API
+
+A card is built out of the following components:
+
+- `Card`: the root component. It creates all the state, provides context to its parts and handles the selection.
+- `CardPreview`: the media shown at one edge of the card, with an optional logo overlaid on it.
+- `CardHeader`: the title of the card, with an optional image, description and action.
+- `CardFooter`: the actions shown at the bottom of the card.
+
+`CardPreview`, `CardHeader` and `CardFooter` read the card context, so they throw when rendered outside a `Card`.
+They are all optional, and the card renders any other content passed to it as is.
+
+The following combinations are rejected at runtime, because they cannot be resolved visually:
+
+- `showFloatingAction` without `selectable`.
+- `selected` without `selectable`.
+- `as="a"` together with `selectable`.
+- `action` on `CardHeader` or `CardFooter` inside a selectable card.
+
+## Examples
+
+### Appearance
+
+A card can have its background and borders styled for greater emphasis or to be subtle.
+
+```svelte
+<Card appearance="filled">Filled</Card>
+<Card appearance="outlined">Outlined</Card>
+<Card appearance="subtle">Subtle</Card>
+```
+
+### Orientation
+
+A card lays its parts out horizontally by default. Set `orientation` to `vertical` to stack them instead.
+
+```svelte
+<Card orientation="horizontal">
+	<CardPreview logoSrc="/logo.png">
+		<img src="/preview.png" alt="Preview" />
+	</CardPreview>
+	<CardHeader title="Horizontal" description="The default orientation" />
+</Card>
+
+<Card orientation="vertical">
+	<CardPreview logoSrc="/logo.png">
+		<img src="/preview.png" alt="Preview" />
+	</CardPreview>
+	<CardHeader title="Vertical" description="Stacks every part" />
+</Card>
+```
+
+### Selection
+
+A selectable card toggles its selection when clicked anywhere, and reports it through `onSelectionChange`. Set
+`showFloatingAction` to float a checkbox over the top right corner.
+
+```svelte
+<script>
+	let selected = $state(false);
+</script>
+
+<Card selectable showFloatingAction bind:selected onSelectionChange={(id, selected) => console.log(id, selected)}>
+	<CardHeader title="Selectable card" description={selected ? 'Selected' : 'Not selected'} />
+</Card>
+```
+
+### Header
+
+The header takes a `title`, and optionally an `image`, a `description` and an `action`. A string title renders inside
+a heading; a snippet or a component receives the id the floating checkbox is labelled by.
+
+```svelte
+<script>
+	import { Card, CardHeader, Button } from 'fluentui-svelte';
+	import { MoreHorizontalRegular } from 'fluentui-icons-svelte';
+</script>
+
+{#snippet title(attrs)}
+	<h4 class="body" {...attrs}><b>FluentUI Svelte</b> mentioned you</h4>
+{/snippet}
+
+{#snippet action()}
+	<Button appearance="subtle" aria-label="More actions"><MoreHorizontalRegular width="1em" height="1em" /></Button>
+{/snippet}
+
+<Card>
+	<CardHeader image="/logo.png" {title} description="5h ago · About us - Overview" {action} />
+</Card>
+```
+
+### Preview
+
+The preview holds the media of the card and rounds the corners it sits against. The `logoSrc` prop overlays a logo on
+the bottom left corner.
+
+```svelte
+<Card orientation="vertical">
+	<CardPreview logoSrc="/logo.png">
+		<img src="/preview.png" alt="Preview" />
+	</CardPreview>
+</Card>
+```
+
+### Footer
+
+The footer renders the actions of the card at the bottom, spread across the available width.
+
+```svelte
+<script>
+	import { Card, CardHeader, CardFooter, Button } from 'fluentui-svelte';
+</script>
+
+{#snippet action()}
+	<Button>Like</Button>
+	<Button appearance="standard">Share</Button>
+{/snippet}
+
+<Card orientation="vertical">
+	<CardHeader title="FluentUI Svelte" description="5h ago · About us - Overview" />
+	<CardFooter {action} />
+</Card>
+```
+
+## Component Props
+
+| Name                 | Type                                      | Description                                                                                       |
+| -------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| `ref`                | `HTMLElement`                             | The DOM reference of the card element.                                                            |
+| `as`                 | `string`                                  | The DOM element to render. Possible values: 'div', 'article', 'section', 'a'.                     |
+| `orientation`        | `string`                                  | The axis the card lays its parts out on. Possible values: 'horizontal', 'vertical'.               |
+| `selectable`         | `boolean`                                 | Lets the user select the card by clicking anywhere on it.                                         |
+| `showFloatingAction` | `boolean`                                 | Floats the selection checkbox over the top right corner of the card. Requires `selectable`.       |
+| `id`                 | `string`                                  | The id of the card element. Falls back to a generated one.                                        |
+| `selected`           | `boolean`                                 | Whether the card is selected. Requires `selectable`.                                              |
+| `disabled`           | `boolean`                                 | Disables user interaction.                                                                        |
+| `appearance`         | `string`                                  | The appearance of the card. Possible values: 'filled', 'outlined', 'subtle'.                      |
+| `onSelectionChange`  | `(id: string, selected: boolean) => void` | Called with the id of the card whenever its selection changes.                                    |
+| Element Attributes   |                                           | Based on the chosen component tag, you will get autocomplete for all HTML attributes of that tag. |
+
+## CardPreview
+
+The media shown at one edge of the card, with an optional logo overlaid on it.
+
+### Component Props
+
+| Name               | Type                   | Description                                                                    |
+| ------------------ | ---------------------- | ------------------------------------------------------------------------------ |
+| `ref`              | `HTMLDivElement`       | The DOM reference of the preview element.                                      |
+| `logoSrc`          | `string`               | The URL of the logo overlaid on the bottom left corner of the preview.         |
+| `logoAlt`          | `string`               | The alternative text of the logo. Empty by default, so the logo is decorative. |
+| `children`         | `Snippet`              | The media to preview, usually an image.                                        |
+| Element Attributes | HTMLElement Attributes | All other attributes can be applied to the preview element.                    |
+
+## CardHeader
+
+The title of the card, with an optional image, description and action.
+
+### Component Props
+
+| Name               | Type                             | Description                                                                           |
+| ------------------ | -------------------------------- | ------------------------------------------------------------------------------------- |
+| `ref`              | `HTMLDivElement`                 | The DOM reference of the header element.                                              |
+| `title`            | `Snippet \| Component \| string` | The title of the card. A snippet or a component receives the id of the title.         |
+| `image`            | `Snippet \| Component \| string` | The image rendered before the title. A string is used as the `src` of an `<img>`.     |
+| `imageAlt`         | `string`                         | The alternative text of a string image. Empty by default, so the image is decorative. |
+| `description`      | `Snippet \| Component \| string` | A second line of text below the title.                                                |
+| `action`           | `Snippet \| Component`           | The action rendered at the end of the header. Not available on selectable cards.      |
+| Element Attributes | HTMLElement Attributes           | All other attributes can be applied to the header element.                            |
+
+## CardFooter
+
+The actions shown at the bottom of the card.
+
+### Component Props
+
+| Name               | Type                   | Description                                                                |
+| ------------------ | ---------------------- | -------------------------------------------------------------------------- |
+| `ref`              | `HTMLDivElement`       | The DOM reference of the footer element.                                   |
+| `action`           | `Snippet \| Component` | The actions rendered inside the footer. Not available on selectable cards. |
+| Element Attributes | HTMLElement Attributes | All other attributes can be applied to the footer element.                 |

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

@@ -0,0 +1,129 @@
+import type { Horientation, PolymorphicProps } from '../../types/index.js';
+import type { FSContext } from '../../internal/index.js';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Component, Snippet } from 'svelte';
+export type CardTagTypes = 'div' | 'article' | 'section' | 'a';
+/** @propsmith CardProps */
+export type CardProps<Tag extends CardTagTypes = 'div'> = {
+    /** The DOM reference of the card element.
+     * @type CardElementDOMType[Tag]
+     * @bindable
+     */
+    ref?: CardElementDOMType[Tag];
+    /** The DOM element to render.
+     * @type 'div' | 'article' | 'section' | 'a'
+     * @default 'div'
+     */
+    as?: Tag;
+    /** The axis the card lays its parts out on.
+     * @default 'horizontal'
+     */
+    orientation?: Horientation;
+    /** Lets the user select the card by clicking anywhere on it.
+     * @default false
+     */
+    selectable?: boolean;
+    /** Floats the selection checkbox over the top right corner of the card.
+     *
+     * Only available on selectable cards, and ignored when the card renders as a link.
+     * @default false
+     */
+    showFloatingAction?: boolean;
+    /** The id of the card element. Falls back to a generated one. */
+    id?: string;
+    /** Whether the card is selected. Only available on selectable cards.
+     * @default false
+     * @bindable
+     */
+    selected?: boolean;
+    /** Disables the user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /** A card can have its background and borders styled for greater emphasis or to be subtle.
+     * @default 'filled'
+     */
+    appearance?: 'filled' | 'outlined' | 'subtle';
+    /** Called with the id of the card whenever its selection changes.
+     * @type (id: string, selected: boolean) => void
+     */
+    onSelectionChange?: (id: string, selected: boolean) => void;
+} & PolymorphicProps<Tag>;
+export type CardElementDOMType = {
+    div: HTMLDivElement;
+    article: HTMLElement;
+    section: HTMLElement;
+    a: HTMLAnchorElement;
+};
+export type CardContext = FSContext<{
+    readonly as?: CardTagTypes;
+    readonly showFloatingAction?: boolean;
+    readonly appearance?: 'filled' | 'outlined' | 'subtle';
+    readonly selectable?: boolean;
+    /** The id of the card, which every part uses to build its own ids. */
+    readonly id?: string;
+}, {
+    orientation?: Horientation;
+    selected?: boolean;
+    disabled?: boolean;
+}, null, {
+    /** Toggles the selection and forwards the click to the consumer. */
+    handleAction?: (e: MouseEvent) => void;
+}>;
+/** @propsmith CardPreviewProps */
+export type CardPreviewProps = {
+    /** The DOM reference of the preview element.
+     * @bindable
+     */
+    ref?: HTMLDivElement;
+    /** The URL of the logo overlaid on the bottom left corner of the preview. */
+    logoSrc: string;
+    /** The alternative text of the logo. Empty by default, which marks the logo as decorative.
+     * @default ''
+     */
+    logoAlt?: string;
+    /** The media to preview, usually an image. */
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/** @propsmith CardHeaderProps */
+export type CardHeaderProps = {
+    /** The DOM reference of the header element.
+     * @bindable
+     */
+    ref?: HTMLDivElement;
+    /** The title of the card. A snippet or a component receives the id the floating checkbox is labelled by.
+     * @type Snippet | Component | string
+     */
+    title: Snippet<[attrs: {
+        id: string;
+    }]> | Component<{
+        id: string;
+    }> | string;
+    /** The image rendered before the title. A string is used as the `src` of an `<img>`.
+     * @type Snippet | Component | string
+     */
+    image?: Snippet | Component | string;
+    /** The alternative text of a string image. Empty by default, which marks the image as decorative.
+     * @default ''
+     */
+    imageAlt?: string;
+    /** A second line of text below the title.
+     * @type Snippet | Component | string
+     */
+    description?: Snippet | Component | string;
+    /** The action rendered at the end of the header. Not available on selectable cards.
+     * @type Snippet | Component
+     */
+    action?: Snippet | Component;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'>;
+/** @propsmith CardFooterProps */
+export type CardFooterProps = {
+    /** The DOM reference of the footer element.
+     * @bindable
+     */
+    ref?: HTMLDivElement;
+    /** The actions rendered inside the footer. Not available on selectable cards.
+     * @type Snippet | Component
+     */
+    action?: Snippet | Component;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

package/dist/components/card/types.js

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

package/dist/components/checkbox/checkbox.svelte

@@ -101,8 +101,8 @@
 			-moz-appearance: none;
 			&:indeterminate + div :global(svg.indeterminate),
 			&:checked + div :global(svg.checked) {
-				clip-path: ellipse(60px 60px at 0% 50%);
-				transition: var(--fs-slower-duration, 1s) cubic-bezier(0.55, 0, 0, 1) clip-path;
+				mask-size: 100% 100%;
+				transition: var(--fs-slower-duration, 1s) cubic-bezier(0.55, 0, 0, 1) mask-size;
 			}
 			&:is(:checked, :indeterminate) {
 				& + div {
@@ -148,7 +148,9 @@
 				width: 0;
 				fill: var(--fs-text-on-accent-primary);
 				transform-origin: 80% 20%;
-				clip-path: ellipse(0 0 at 0% 90%);
+				mask-image: linear-gradient(black, black);
+				mask-repeat: no-repeat;
+				mask-size: 0% 100%;
 			}
 		}
 		&:has(input:disabled) {

package/dist/components/menu/menu-item-checkbox.svelte

@@ -76,7 +76,7 @@
 	<span class="label" aria-label="{secondaryContent}, Use {secondaryContent}">
 		<CheckmarkFilled class="indicator" />
 		{#if Icon}
-			<RenderSoC SoC={Icon} class="menu-item-icon" args={[{ class: 'menu-item-icon' }]} />
+			<RenderSoC SoC={Icon} args={{ class: 'menu-item-icon' }} />
 		{/if}
 		{#if subText}
 			<span class="sub-text">

package/dist/components/menu/menu-item-radio.svelte

@@ -80,7 +80,7 @@
 	<span class="label" aria-label="{secondaryContent}, Use {secondaryContent}">
 		<CheckmarkFilled class="indicator" />
 		{#if Icon}
-			<RenderSoC SoC={Icon} class="menu-item-icon" args={[{ class: 'menu-item-icon' }]} />
+			<RenderSoC SoC={Icon} args={{ class: 'menu-item-icon' }} />
 		{/if}
 		{#if subText}
 			<span class="sub-text">

package/dist/components/menu/menu-item-switch.svelte

@@ -76,7 +76,7 @@
 >
 	<span class="label" aria-label="{secondaryContent}, Use {secondaryContent}">
 		{#if Icon}
-			<RenderSoC SoC={Icon} class="menu-item-icon" args={[{ class: 'menu-item-icon' }]} />
+			<RenderSoC SoC={Icon} args={{ class: 'menu-item-icon' }} />
 		{/if}
 		{#if subText}
 			<span class="sub-text">

package/dist/components/menu/menu-item.svelte

@@ -66,7 +66,7 @@
 >
 	<span class="label" aria-label={secondaryContent ? `${secondaryContent}, Use ${secondaryContent}` : undefined}>
 		{#if Icon}
-			<RenderSoC SoC={Icon} args={[{ class: 'menu-item-icon' }]} class="menu-item-icon" />
+			<RenderSoC SoC={Icon} args={{ class: 'menu-item-icon' }} />
 		{/if}
 		{#if subText}
 			<span class="sub-text">

package/dist/css/class-darkmode.css

@@ -91,7 +91,7 @@
 	--fs-control-stroke-on-accent-tertiary: #00000037;
 	--fs-control-stroke-on-accent-disabled: #00000033;
 	--fs-control-stroke-on-image: #0000006b;
-	--fs-card-stroke-default: #00000019;
+	--fs-card-stroke-default: #0000001a;
 	--fs-card-stroke-solid: #1c1c1c;
 
 	/* Control Strong Stroke */
@@ -112,6 +112,7 @@
 	/* Card Background */
 	--fs-card-background-default: #ffffff0d;
 	--fs-card-background-secondary: #ffffff08;
+	--fs-card-background-tertiary: #ffffff1c; /* 6.98% opacity */
 
 	/* Smoke Background */
 	/* --fs-smoke-background-default: #0000004d; <- Same on light/dark */
@@ -159,6 +160,7 @@
 
 	/* Shadows */
 	--fs-shadow-card: 0 0.125rem 0.25rem #00000021; /* 13% opacity */
+	--fs-shadow-card-hover: 0 0.125rem 0.25rem #00000042; /* 26% opacity */
 	--fs-shadow-tooltip: 0 0.25rem 0.5rem #00000042; /* 26% opacity */
 	--fs-shadow-flyout: 0 0.5rem 1rem #00000042; /* 26% opacity */
 	--fs-shadow-dialog: 0 2rem 4rem #0000005e, 0 1.125rem 1.313rem #0000005e; /* 37% opacity */

package/dist/css/media-darkmode.css

@@ -92,7 +92,7 @@
 		--fs-control-stroke-on-accent-tertiary: #00000037;
 		--fs-control-stroke-on-accent-disabled: #00000033;
 		--fs-control-stroke-on-image: #0000006b;
-		--fs-card-stroke-default: #00000019;
+		--fs-card-stroke-default: #0000001a;
 		--fs-card-stroke-solid: #1c1c1c;
 
 		/* Control Strong Stroke */
@@ -113,6 +113,7 @@
 		/* Card Background */
 		--fs-card-background-default: #ffffff0d;
 		--fs-card-background-secondary: #ffffff08;
+		--fs-card-background-tertiary: #ffffff1c; /* 6.98% opacity */
 
 		/* Smoke Background */
 		/* --fs-smoke-background-default: #0000004d; <- Same on light/dark */
@@ -160,6 +161,7 @@
 
 		/* Shadows */
 		--fs-shadow-card: 0 0.125rem 0.25rem #00000021; /* 13% opacity */
+		--fs-shadow-card-hover: 0 0.125rem 0.25rem #00000042; /* 26% opacity */
 		--fs-shadow-tooltip: 0 0.25rem 0.5rem #00000042; /* 26% opacity */
 		--fs-shadow-flyout: 0 0.5rem 1rem #00000042; /* 26% opacity */
 		--fs-shadow-dialog: 0 2rem 4rem #0000005e, 0 1.125rem 1.313rem #0000005e; /* 37% opacity */

package/dist/css/theme.css

@@ -129,6 +129,7 @@
 	/* Card Background */
 	--fs-card-background-default: #ffffffb3;
 	--fs-card-background-secondary: #f6f6f680;
+	--fs-card-background-tertiary: #ffffff;
 
 	/* Smoke Background */
 	--fs-smoke-background-default: #0000004d;
@@ -179,7 +180,7 @@
 	/* Border Radius */
 	--fs-control-border-radius: 0.25rem;
 	--fs-control-inner-border-radius: 0.188rem;
-	--fs-control-overlay-border-radius: 0.5rem;
+	--fs-control-overlay-border-radius: 0.4375rem;
 
 	/* Durations */
 	--fs-fast-duration: 167ms;
@@ -232,6 +233,7 @@
 
 	/* Shadows */
 	--fs-shadow-card: 0 0.125rem 0.25rem #0000000a; /* 4% opacity */
+	--fs-shadow-card-hover: 0 0.125rem 0.25rem #0000001a; /* 10% opacity */
 	--fs-shadow-tooltip: 0 0.25rem 0.5rem #00000024; /* 14% opacity */
 	--fs-shadow-flyout: 0 0.5rem 1rem #00000024; /* 14% opacity */
 	--fs-shadow-dialog: 0 2rem 4rem #00000030, 0 1.125rem 1.313rem #00000026; /* 19% and 15% opacity respectively */

package/dist/index.d.ts

@@ -5,6 +5,10 @@ export { default as Badge } from './components/badge/badge.svelte';
 export { default as BadgeIcon } from './components/badge/badge-icon.svelte';
 export { default as Button } from './components/button/button.svelte';
 export { default as SplitButton } from './components/button/split-button.svelte';
+export { default as Card } from './components/card/card.svelte';
+export { default as CardHeader } from './components/card/card-header.svelte';
+export { default as CardFooter } from './components/card/card-footer.svelte';
+export { default as CardPreview } from './components/card/card-preview.svelte';
 export { default as CalendarView } from './components/calendar-view/calendar-view.svelte';
 export { default as CalendarViewHeader } from './components/calendar-view/calendar-view-header.svelte';
 export { default as CalendarViewControls } from './components/calendar-view/calendar-view-controls.svelte';

package/dist/index.js

@@ -13,6 +13,12 @@ export { default as BadgeIcon } from './components/badge/badge-icon.svelte';
 export { default as Button } from './components/button/button.svelte';
 export { default as SplitButton } from './components/button/split-button.svelte';
 // End Button Component
+// Start Card Component
+export { default as Card } from './components/card/card.svelte';
+export { default as CardHeader } from './components/card/card-header.svelte';
+export { default as CardFooter } from './components/card/card-footer.svelte';
+export { default as CardPreview } from './components/card/card-preview.svelte';
+// End Card Component
 // Start CalendarView Component
 export { default as CalendarView } from './components/calendar-view/calendar-view.svelte';
 export { default as CalendarViewHeader } from './components/calendar-view/calendar-view-header.svelte';

package/dist/internal/components/render-soc/render-soc.svelte

@@ -1,29 +1,23 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" generics="T extends Snippet<unknown[]> | Component<any>">
+<script lang="ts" generics="Args extends Record<string, unknown>">
 	import type { Component, Snippet } from 'svelte';
 
-	// Read more about this here: https://github.com/sveltejs/svelte/issues/9774#issuecomment-2266700153
-	const isSnippet = <T extends unknown[]>(value: Snippet<T> | Component): value is Snippet<T> => value.length === 1;
+	let {
+		SoC,
+		args = {} as Args
+	}: {
+		/** A snippet or a component. Both receive `args`: the snippet as its single
+		 * argument, the component as its props. */
+		SoC: Snippet<[Args]> | Component<Args>;
+		args?: Args;
+	} = $props();
 
-	const isComponent = <T extends Record<string, any>>(value: Component<T> | Snippet): value is Component<T> =>
-		value.length === 2;
-
-	type SOCProps<G> =
-		G extends Snippet<infer A> ? { SoC: T; args: A } : G extends Component<infer P> ? { SoC: T } & P : never;
-
-	let { SoC, args, ...props }: SOCProps<T> = $props();
+	// Snippets compile to ($$anchor, ...args) so they report length 1, components to
+	// ($$anchor, $$props) so they report 2. See https://github.com/sveltejs/svelte/issues/9774
+	const isSnippet = (value: Snippet<[Args]> | Component<Args>): value is Snippet<[Args]> => value.length === 1;
 </script>
 
-{#if SoC}
-	{#if isSnippet(SoC)}
-		{#if args && Array.isArray(args)}
-			{/* @ts-expect-error - [any[]] no assignable to never */ null}
-			{@render SoC(args)}
-		{:else}
-			{/* @ts-expect-error - [] is not assignable to never */ null}
-			{@render SoC()}
-		{/if}
-	{:else if isComponent(SoC)}
-		<SoC {...props} />
-	{/if}
+{#if isSnippet(SoC)}
+	{@render SoC(args)}
+{:else}
+	<SoC {...args} />
 {/if}

package/dist/internal/components/render-soc/render-soc.svelte.d.ts

@@ -1,30 +1,30 @@
 import type { Component, Snippet } from 'svelte';
-declare function $$render<T extends Snippet<unknown[]> | Component<any>>(): {
-    props: T extends Snippet<infer A extends unknown[]> ? {
-        SoC: T;
-        args: A;
-    } : T extends Component<infer P extends Record<string, any>, {}, string> ? {
-        SoC: T;
-    } & P : never;
+declare function $$render<Args extends Record<string, unknown>>(): {
+    props: {
+        /** A snippet or a component. Both receive `args`: the snippet as its single
+         * argument, the component as its props. */
+        SoC: Snippet<[Args]> | Component<Args>;
+        args?: Args;
+    };
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends Snippet<unknown[]> | Component<any>> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<Args extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<Args>>['props'];
+    events(): ReturnType<typeof $$render<Args>>['events'];
+    slots(): ReturnType<typeof $$render<Args>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends Snippet<unknown[]> | Component<any>>(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 Snippet<unknown[]> | Component<any>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    new <Args extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Args>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Args>['props']>, ReturnType<__sveltets_Render<Args>['events']>, ReturnType<__sveltets_Render<Args>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Args>['bindings']>;
+    } & ReturnType<__sveltets_Render<Args>['exports']>;
+    <Args extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<Args>['props']> & {}): ReturnType<__sveltets_Render<Args>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const RenderSoc: $$IsomorphicComponent;
-type RenderSoc<T extends Snippet<unknown[]> | Component<any>> = InstanceType<typeof RenderSoc<T>>;
+type RenderSoc<Args extends Record<string, unknown>> = InstanceType<typeof RenderSoc<Args>>;
 export default RenderSoc;

package/dist/types/index.d.ts

@@ -20,6 +20,7 @@ export type BeforeOrAfter = 'before' | 'after';
 export type ActiveOrInactive = 'active' | 'inactive';
 export type Statuses = 'available' | 'busy' | 'offline' | 'away' | 'do-not-disturb' | 'out-of-office' | 'unknown' | 'blocked';
 export type ProgressStatus = 'paused' | 'error';
+export type Horientation = 'horizontal' | 'vertical';
 export type YAxis = 'top' | 'bottom';
 export type XAxis = 'left' | 'right';
 export type YDirection = 'up' | 'middle' | 'down';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluentui-svelte",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Modern Fluent UI 2 Components for Svelte 5",
   "author": {
     "name": "Jorge Acosta",