fluentui-svelte 0.1.2 → 0.2.1

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/providers/fluentui-svelte/fluentui-svelte.svelte

@@ -20,21 +20,19 @@
 	// Syncing
 	let reducedMotion = $derived(userReducedMotion.current ?? prefersReducedMotion.current);
 
-	const _state: FSProviderContext['state'] = {
-		get tabspotInstance() {
-			return tabspotInstance;
-		},
-		get reducedMotion() {
-			return reducedMotion;
-		},
-		get theme() {
-			return mode.current;
-		}
-	};
-
-	setGlobalFSContext({
+	const context: FSProviderContext = $state({
 		config: null,
-		state: _state,
+		state: {
+			get tabspotInstance() {
+				return tabspotInstance;
+			},
+			get reducedMotion() {
+				return reducedMotion;
+			},
+			get theme() {
+				return mode.current;
+			}
+		},
 		events: null,
 		methods: {
 			setReducedMotion: (value) => {
@@ -46,6 +44,8 @@
 		}
 	});
 
+	setGlobalFSContext(context);
+
 	onMount(() => {
 		tabspotInstance ??= tabspot();
 
@@ -57,7 +57,7 @@
 	$effect(() => {
 		const root = document.documentElement;
 
-		root.dataset.fsReducedMotion = String(_state.reducedMotion);
+		root.dataset.fsReducedMotion = String(context.state.reducedMotion);
 
 		return () => {
 			delete root.dataset.fsReducedMotion;

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.1",
   "description": "Modern Fluent UI 2 Components for Svelte 5",
   "author": {
     "name": "Jorge Acosta",