fluentui-svelte 0.6.0 → 0.7.0

package/dist/components/app-surface/app-surface.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { getAppWindowContext } from '../app-window/app-window.js';
+	import type { AppSurfaceProps } from './types.js';
+
+	let {
+		ref = $bindable(),
+		mode = 'layer',
+		active,
+		class: classes,
+		children,
+		...attributes
+	}: AppSurfaceProps = $props();
+
+	const appWindow = getAppWindowContext();
+	const effectiveActive = $derived(active ?? appWindow?.state.active ?? false);
+	const noRadius = $derived(!!appWindow?.state.sideNav?.floating && appWindow.state.sideNav.collapsed);
+	const navPosition = $derived(appWindow?.state.sideNav?.position);
+
+	const unregister = appWindow?.methods.registerAppSurface({
+		get ref() {
+			return ref ?? null;
+		}
+	});
+
+	onDestroy(() => unregister?.());
+</script>
+
+<!--
+	@component
+	An app surface is the area of an app that holds its content, next to the navigation. It is square on its own;
+	next to a `SideNav` it rounds the corner that faces it and the one across from it. It is either a `layer` over the
+	window or the `mica` of the window itself, in the colors of an active or an inactive window.
+
+	- Usage:
+	```tsx
+	<script>
+		import { AppSurface, AppWindow } from 'fluentui-svelte';
+	</script>
+
+	<AppWindow width={480} height={320}>
+		<AppSurface>
+			<p>The content of the app.</p>
+		</AppSurface>
+	</AppWindow>
+	```
+-->
+<div
+	bind:this={ref}
+	class={[
+		'fs-app-surface',
+		mode,
+		effectiveActive ? 'active' : 'inactive',
+		{ 'nav-left': navPosition === 'left', 'nav-right': navPosition === 'right', 'no-radius': noRadius },
+		classes
+	]}
+	{...attributes}
+>
+	{@render children?.()}
+</div>
+
+<style>
+	.fs-app-surface {
+		box-sizing: border-box;
+		flex: 1 1 auto;
+		min-block-size: 0;
+		overflow: auto;
+		color: var(--fs-text-primary);
+		background: var(--fs-app-surface-background);
+		background-clip: padding-box;
+		border: 1px solid var(--fs-app-surface-stroke);
+		/* Square unless a SideNav is next to it: then the corner that faces it and the one across from it are rounded. They swap sides with the navigation, and with the writing direction. */
+		&.nav-left {
+			border-start-start-radius: var(--fs-control-overlay-border-radius);
+			border-end-end-radius: var(--fs-control-overlay-border-radius);
+		}
+		&.nav-right {
+			border-start-end-radius: var(--fs-control-overlay-border-radius);
+			border-end-start-radius: var(--fs-control-overlay-border-radius);
+		}
+		&.no-radius {
+			border-radius: 0;
+		}
+		&.layer {
+			--fs-app-surface-background: var(--fs-solid-background-tertiary);
+			--fs-app-surface-stroke: var(--fs-card-stroke-default);
+			&.inactive {
+				--fs-app-surface-background: var(--fs-layer-default);
+			}
+		}
+		&.mica {
+			--fs-app-surface-background: var(--fs-solid-background-base);
+			--fs-app-surface-stroke: var(--fs-control-surface-stroke-default);
+		}
+	}
+</style>

package/dist/components/app-surface/app-surface.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { AppSurfaceProps } from './types.ts';
+/**
+ * An app surface is the area of an app that holds its content, next to the navigation. It is square on its own;
+ * next to a `SideNav` it rounds the corner that faces it and the one across from it. It is either a `layer` over the
+ * window or the `mica` of the window itself, in the colors of an active or an inactive window.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { AppSurface, AppWindow } from 'fluentui-svelte';
+ * </script>
+ *
+ * <AppWindow width={480} height={320}>
+ * 	<AppSurface>
+ * 		<p>The content of the app.</p>
+ * 	</AppSurface>
+ * </AppWindow>
+ * ```
+ */
+declare const AppSurface: import("svelte").Component<AppSurfaceProps, {}, "ref">;
+type AppSurface = ReturnType<typeof AppSurface>;
+export default AppSurface;

package/dist/components/app-surface/docs/llms.md

@@ -0,0 +1,73 @@
+# AppSurface
+
+An app surface is the area of an app that holds its content, next to the navigation. It is square on its own; next to a SideNav it rounds the corner that faces it and the one across from it. It is either a `layer` over the window or the `mica` of the window itself, in the colors of an active or an inactive window.
+
+## Usage
+
+Inside AppWindow, the surface inherits the window's active state unless active is explicitly set. Without a SideNav in the window, or on its own, it has no corner radius. With one it rounds the corner that faces the SideNav and the one across from it, following its `position`; a floating and collapsed SideNav removes the radii until either state changes.
+
+Put the content of the app inside the surface, usually in the space an `AppWindow` has left once the navigation takes its place. The surface grows to fill the room its container leaves it, scrolls its content when it does not fit, and is a `layer` unless you set another `mode`.
+
+```svelte
+<script>
+	import { AppSurface, AppWindow } from 'fluentui-svelte';
+</script>
+
+<AppWindow width={400} height={160}>
+	<AppSurface style="padding: 1rem">This is the content of the app.</AppSurface>
+</AppWindow>
+```
+
+## Examples
+
+### Mode
+
+`layer`, the default, is a layer over the window, with the stroke of a card. `mica` paints the base of the window itself, with the stroke of a control surface.
+
+```svelte
+<AppWindow width={400} height={120}>
+	<div style="display: flex; flex: 1; min-height: 0">
+		<div style="flex: none; width: 3rem"></div>
+		<AppSurface mode="layer" style="padding: 1rem">Layer</AppSurface>
+	</div>
+</AppWindow>
+
+<AppWindow width={400} height={120}>
+	<div style="display: flex; flex: 1; min-height: 0">
+		<div style="flex: none; width: 3rem"></div>
+		<AppSurface mode="mica" style="padding: 1rem">Mica</AppSurface>
+	</div>
+</AppWindow>
+```
+
+### Active and Inactive
+
+`active` tells whether the window the surface lives in is the active one. A `layer` is solid while active and translucent while inactive, which is the default; `mica` paints the same base in both states. Set it from the same focus state as the window.
+
+```svelte
+<script>
+	let active = $state(false);
+</script>
+
+<AppWindow {active} width={400} height={120}>
+	<div style="display: flex; flex: 1; min-height: 0">
+		<div style="flex: none; width: 3rem"></div>
+		<AppSurface {active} style="padding: 1rem">Layer</AppSurface>
+	</div>
+</AppWindow>
+```
+
+## Component Props
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:AppSurfaceProps -->
+
+| Name                                                | Type                      | Default   | Description                                                                                                                                                 |
+| --------------------------------------------------- | ------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                    | `HTMLElement`             |           | The DOM reference of the surface element.                                                                                                                   |
+| `mode`                                              | `'layer'` &#124; `'mica'` | `'layer'` | The material of the surface: a `layer` over the window, or the `mica` of the window itself.                                                                 |
+| `active`                                            | `boolean`                 | `false`   | Whether the window the surface lives in is active, which picks the surface color. Inherits AppWindow's active state when omitted, or false when standalone. |
+| `children`                                          | `Snippet`                 |           | The content of the surface.                                                                                                                                 |
+| `HTMLAttributes<HTMLDivElement>` without `children` |                           |           |                                                                                                                                                             |
+
+<!-- /props:AppSurfaceProps -->

package/dist/components/app-surface/types.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/** @propsmith AppSurfaceProps */
+export type AppSurfaceProps = {
+    /** The DOM reference of the surface element.
+     * @bindable
+     */
+    ref?: HTMLElement;
+    /** The material of the surface: a `layer` over the window, or the `mica` of the window itself.
+     * @default 'layer'
+     */
+    mode?: 'layer' | 'mica';
+    /** Whether the window the surface lives in is active, which picks the surface color. Inherits AppWindow's active state when omitted, or false when standalone.
+     * @default false
+     */
+    active?: boolean;
+    /** The content of the surface. */
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

package/dist/components/app-surface/types.js

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

package/dist/components/app-window/app-window.d.ts

@@ -0,0 +1,3 @@
+import type { AppWindowContext } from './types.ts';
+/** Returns the nearest AppWindow context, or null for standalone components. */
+export declare const getAppWindowContext: () => AppWindowContext | null, setAppWindowContext: (context: AppWindowContext) => void;

package/dist/components/app-window/app-window.js

@@ -0,0 +1,3 @@
+import { createFSContext } from '../../internal/index.js';
+/** Returns the nearest AppWindow context, or null for standalone components. */
+export const [getAppWindowContext, setAppWindowContext] = createFSContext();

package/dist/components/app-window/app-window.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+	import { Flyout } from '../../index.js';
+	import { toLength } from '../../internal/index.js';
+	import { setAppWindowContext } from './app-window.js';
+	import type {
+		AppWindowContext,
+		AppWindowGlobalNav,
+		AppWindowPart,
+		AppWindowProps,
+		AppWindowSideNav
+	} from './types.js';
+
+	let {
+		ref = $bindable(null),
+		width = '100%',
+		height = '100%',
+		active = false,
+		maximized = $bindable(false),
+		minimized = $bindable(false),
+		class: classes,
+		style,
+		children,
+		...attributes
+	}: AppWindowProps = $props();
+
+	let sideNav = $state.raw<AppWindowSideNav | null>(null);
+	let titleBar = $state.raw<AppWindowPart | null>(null);
+	let globalNav = $state.raw<AppWindowGlobalNav | null>(null);
+	let appSurface = $state.raw<AppWindowPart | null>(null);
+
+	const context: AppWindowContext = {
+		config: {
+			get width() {
+				return width;
+			},
+			get height() {
+				return height;
+			}
+		},
+		state: {
+			get ref() {
+				return ref;
+			},
+			get active() {
+				return active;
+			},
+			get maximized() {
+				return maximized;
+			},
+			get minimized() {
+				return minimized;
+			},
+			get sideNav() {
+				return sideNav;
+			},
+			get titleBar() {
+				return titleBar;
+			},
+			get globalNav() {
+				return globalNav;
+			},
+			get appSurface() {
+				return appSurface;
+			}
+		},
+		events: null,
+		methods: {
+			registerSideNav: (part) => {
+				sideNav = part;
+				return () => {
+					if (sideNav === part) sideNav = null;
+				};
+			},
+			registerTitleBar: (part) => {
+				titleBar = part;
+				return () => {
+					if (titleBar === part) titleBar = null;
+				};
+			},
+			registerGlobalNav: (part) => {
+				globalNav = part;
+				return () => {
+					if (globalNav === part) globalNav = null;
+				};
+			},
+			registerAppSurface: (part) => {
+				appSurface = part;
+				return () => {
+					if (appSurface === part) appSurface = null;
+				};
+			}
+		}
+	};
+	setAppWindowContext(context);
+</script>
+
+<!--
+	@component
+	An app window is the surface of an app: a Mica window with its own border and a shell shadow that tells whether it is
+	the active window. It is a `Flyout` underneath, sized with `width` and `height`, which are `100%` unless you say otherwise.
+	Place page content in an `AppSurface` or another scrollable container; the window itself clips overflow.
+
+	- Usage:
+	```tsx
+	<script>
+		import { AppSurface, AppWindow, TitleBar, TitleBarRightControls } from 'fluentui-svelte';
+	</script>
+
+	<AppWindow width={480} height={320}>
+		<TitleBar>
+			{#snippet rightControls()}
+				<TitleBarRightControls />
+			{/snippet}
+		</TitleBar>
+		<AppSurface>The content of the app.</AppSurface>
+	</AppWindow>
+	```
+-->
+<Flyout
+	bind:ref
+	class={['fs-app-window', active ? 'active' : 'inactive', classes]}
+	style="width: {toLength(width)}; height: {toLength(height)}; {style ?? ''}"
+	{...attributes}
+>
+	{@render children?.()}
+</Flyout>
+
+<style>
+	/* The window restyles the `Flyout` it is made of, which is why every selector is one class more specific than its own. */
+	:global(.fs-flyout.fs-app-window.active),
+	:global(.fs-flyout.fs-app-window.inactive) {
+		box-sizing: border-box;
+		flex-direction: column;
+		padding: 0;
+		overflow: hidden;
+		background: var(--fs-solid-background-base);
+		border-color: var(--fs-control-surface-stroke-default);
+	}
+	:global(.fs-flyout.fs-app-window.active) {
+		box-shadow: var(--fs-shell-shadow-active);
+	}
+	:global(.fs-flyout.fs-app-window.inactive) {
+		box-shadow: var(--fs-shell-shadow-inactive);
+	}
+	/* A direct SideNav and AppSurface share the body row below an optional TitleBar. */
+	:global(.fs-flyout.fs-app-window:has(> .fs-side-nav)) {
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr);
+		grid-template-rows: auto minmax(0, 1fr);
+	}
+	:global(.fs-flyout.fs-app-window:has(> .fs-side-nav) > .fs-title-bar) {
+		grid-column: 1 / -1;
+		grid-row: 1;
+	}
+	:global(.fs-flyout.fs-app-window > .fs-side-nav) {
+		grid-column: 1;
+		grid-row: 2;
+	}
+	/* A navigation on the right swaps the columns with the surface. */
+	:global(.fs-flyout.fs-app-window:has(> .fs-side-nav.position-right)) {
+		grid-template-columns: minmax(0, 1fr) auto;
+	}
+	:global(.fs-flyout.fs-app-window > .fs-side-nav.position-right) {
+		grid-column: 2;
+	}
+	:global(.fs-flyout.fs-app-window:has(> .fs-side-nav.position-right) > .fs-app-surface) {
+		grid-column: 1;
+	}
+	:global(.fs-flyout.fs-app-window > .fs-side-nav.floating) {
+		grid-column: 1 / -1;
+	}
+	:global(.fs-flyout.fs-app-window:has(> .fs-side-nav) > .fs-app-surface) {
+		grid-column: 2;
+		grid-row: 2;
+		min-inline-size: 0;
+	}
+	/* Keep server-rendered corners in sync before the parts register during hydration. */
+	:global(.fs-flyout.fs-app-window:has(> .fs-side-nav.floating.collapsed) > .fs-app-surface) {
+		border-radius: 0;
+	}
+	/* Mica has no acrylic noise. */
+	:global(.fs-flyout.fs-app-window.active::before),
+	:global(.fs-flyout.fs-app-window.inactive::before) {
+		display: none;
+	}
+	@media (forced-colors: active) {
+		:global(.fs-flyout.fs-app-window.active),
+		:global(.fs-flyout.fs-app-window.inactive) {
+			background: ButtonFace;
+			border-color: GrayText;
+		}
+	}
+</style>

package/dist/components/app-window/app-window.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { AppWindowProps } from './types.ts';
+/**
+ * An app window is the surface of an app: a Mica window with its own border and a shell shadow that tells whether it is
+ * the active window. It is a `Flyout` underneath, sized with `width` and `height`, which are `100%` unless you say otherwise.
+ * Place page content in an `AppSurface` or another scrollable container; the window itself clips overflow.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { AppSurface, AppWindow, TitleBar, TitleBarRightControls } from 'fluentui-svelte';
+ * </script>
+ *
+ * <AppWindow width={480} height={320}>
+ * 	<TitleBar>
+ * 		{#snippet rightControls()}
+ * 			<TitleBarRightControls />
+ * 		{/snippet}
+ * 	</TitleBar>
+ * 	<AppSurface>The content of the app.</AppSurface>
+ * </AppWindow>
+ * ```
+ */
+declare const AppWindow: import("svelte").Component<AppWindowProps, {}, "ref" | "maximized" | "minimized">;
+type AppWindow = ReturnType<typeof AppWindow>;
+export default AppWindow;

package/dist/components/app-window/docs/llms.md

@@ -0,0 +1,119 @@
+# AppWindow
+
+An app window is the surface of an app: a Mica window with its own border and a shell shadow that tells the active window from the inactive ones. It is built on the Flyout, so it takes its content the same way, and it fills the space around it unless you give it a size.
+
+## Usage
+
+Start with a `TitleBar` if the window has one, then place page content in an `AppSurface` or another scrollable container. The window itself clips overflow. It is `100%` wide and tall unless you give it a `width` and a `height`.
+
+```svelte
+<script>
+	import {
+		AppSurface,
+		AppWindow,
+		AutoSuggestBox,
+		TitleBar,
+		TitleBarLeftControls,
+		TitleBarRightControls
+	} from 'fluentui-svelte';
+	import { AppsRegular } from 'fluentui-icons-svelte';
+</script>
+
+<AppWindow width={400} height={200}>
+	<TitleBar>
+		{#snippet leftControls()}
+			<TitleBarLeftControls appIcon={AppsRegular} appName="FluentUI App" />
+		{/snippet}
+		{#snippet rightControls()}
+			<TitleBarRightControls />
+		{/snippet}
+	</TitleBar>
+	<AppSurface style="padding: 1rem">This is the content of the window.</AppSurface>
+</AppWindow>
+```
+
+## Examples
+
+### Size
+
+`width` and `height` take a number in pixels or any CSS length. By default they take `100%` of their container.
+
+```svelte
+<AppWindow width={200} height={100} />
+<AppWindow width="14rem" height="6rem" />
+
+<div style="width: 260px; height: 120px">
+	<AppWindow />
+</div>
+```
+
+### Active and Inactive
+
+`active` picks the shell shadow the window casts: the lighter one of an inactive window, which is the default, or the deeper one of the active window. Set it from the focus state of the window your app lives in.
+
+```svelte
+<script>
+	let active = $state(false);
+</script>
+
+<AppWindow {active} width={400} height={160} />
+```
+
+### With a Title Bar
+
+The window paints the Mica background, so a `TitleBar` inside it stays transparent and sits right on it.
+
+```svelte
+<AppWindow width={400} height={220}>
+	<TitleBar searchMinWidth={120}>
+		{#snippet leftControls()}
+			<TitleBarLeftControls appIcon={AppsRegular} appName="FluentUI App" />
+		{/snippet}
+		{#snippet search()}
+			<AutoSuggestBox placeholder="Search" aria-label="Search" />
+		{/snippet}
+		{#snippet rightControls()}
+			<TitleBarRightControls />
+		{/snippet}
+	</TitleBar>
+	<AppSurface style="padding: 1rem">This is the content of the window.</AppSurface>
+</AppWindow>
+```
+
+## Shared window context
+
+AppWindow creates a context per instance. Descendant components can call the exported `getAppWindowContext()` during initialization; it returns null outside AppWindow. Call it inside a child component, rather than in the parent that renders AppWindow.
+
+`config.width` and `config.height` expose window dimensions. `state` contains the window `ref`, `active`, `maximized`, `minimized`, and registered `sideNav`, `titleBar`, `globalNav` and `appSurface` parts. Parts are null until mounted and are cleared on unmount. SideNav exposes live `collapsed`, `floating`, `position` and `ref` getters, and `setCollapsed(event, collapsed)`. `globalNav` is the global navigation button of the TitleBar (`TitleBarLeftControls`): its `ref` and `enabled`, which tells SideNav to hide its own hamburger. Nested AppWindow instances have independent contexts.
+
+The host reports maximized/minimized through AppWindow props; these flags do not invoke native APIs or hide the window. TitleBarRightControls inherits maximized unless explicitly overridden. AppSurface inherits active unless overridden and removes its corner radii while its window's SideNav is floating and collapsed.
+
+```svelte
+<!-- WindowStatus.svelte -->
+<script>
+	import { getAppWindowContext } from 'fluentui-svelte';
+	const appWindow = getAppWindowContext();
+</script>
+
+<p>Maximized: {appWindow?.state.maximized ?? false}</p>
+<p>Minimized: {appWindow?.state.minimized ?? false}</p>
+<p>Navigation collapsed: {appWindow?.state.sideNav?.collapsed ?? false}</p>
+```
+
+## Component Props
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:AppWindowProps -->
+
+| Name                                                | Type                        | Default  | Description                                                                                                                                           |
+| --------------------------------------------------- | --------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                    | `HTMLElement` &#124; `null` |          | The DOM reference of the window element.                                                                                                              |
+| `width`                                             | `number` &#124; `string`    | `'100%'` | The width of the window. A number is in pixels, a string is any CSS length.                                                                           |
+| `height`                                            | `number` &#124; `string`    | `'100%'` | The height of the window. A number is in pixels, a string is any CSS length.                                                                          |
+| `active`                                            | `boolean`                   | `false`  | Whether the window is the active one, which picks the shell shadow it casts: a deeper one while active, a lighter one while inactive.                 |
+| `maximized` _bindable_                              | `boolean`                   | `false`  | The maximized state reported by the host. Shared through AppWindow context and inherited by TitleBarRightControls when its maximized prop is omitted. |
+| `minimized` _bindable_                              | `boolean`                   | `false`  | The minimized state reported by the host. Shared with window descendants; it does not call a native window API or hide the component.                 |
+| `children`                                          | `Snippet`                   |          | The content of the window, such as a `TitleBar` and the page below it.                                                                                |
+| `HTMLAttributes<HTMLDivElement>` without `children` |                             |          |                                                                                                                                                       |
+
+<!-- /props:AppWindowProps -->

package/dist/components/app-window/types.d.ts

@@ -0,0 +1,66 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FSContext } from '../../internal/index.js';
+export type AppWindowPart = {
+    readonly ref: HTMLElement | null;
+};
+export type AppWindowSideNav = AppWindowPart & {
+    readonly collapsed: boolean;
+    readonly floating: boolean;
+    readonly position: 'left' | 'right';
+    /** Expands or collapses the navigation, as its own toggle does. */
+    setCollapsed: (event: Event, collapsed: boolean) => void;
+};
+/** The global navigation button of the title bar, which controls the SideNav of the window. */
+export type AppWindowGlobalNav = AppWindowPart & {
+    readonly enabled: boolean;
+};
+export type AppWindowContext = FSContext<{
+    readonly width: number | string;
+    readonly height: number | string;
+}, {
+    readonly ref: HTMLElement | null;
+    readonly active: boolean;
+    readonly maximized: boolean;
+    readonly minimized: boolean;
+    readonly sideNav: AppWindowSideNav | null;
+    readonly titleBar: AppWindowPart | null;
+    readonly globalNav: AppWindowGlobalNav | null;
+    readonly appSurface: AppWindowPart | null;
+}, null, {
+    registerSideNav: (part: AppWindowSideNav) => () => void;
+    registerTitleBar: (part: AppWindowPart) => () => void;
+    registerGlobalNav: (part: AppWindowGlobalNav) => () => void;
+    registerAppSurface: (part: AppWindowPart) => () => void;
+}>;
+/** @propsmith AppWindowProps */
+export type AppWindowProps = {
+    /** The DOM reference of the window element.
+     * @bindable
+     */
+    ref?: HTMLElement | null;
+    /** The width of the window. A number is in pixels, a string is any CSS length.
+     * @default '100%'
+     */
+    width?: number | string;
+    /** The height of the window. A number is in pixels, a string is any CSS length.
+     * @default '100%'
+     */
+    height?: number | string;
+    /** Whether the window is the active one, which picks the shell shadow it casts: a deeper one while active, a lighter one while inactive.
+     * @default false
+     */
+    active?: boolean;
+    /** The maximized state reported by the host. Shared through AppWindow context and inherited by TitleBarRightControls when its maximized prop is omitted.
+     * @default false
+     * @bindable
+     */
+    maximized?: boolean;
+    /** The minimized state reported by the host. Shared with window descendants; it does not call a native window API or hide the component.
+     * @default false
+     * @bindable
+     */
+    minimized?: boolean;
+    /** The content of the window, such as a `TitleBar` and the page below it. */
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

package/dist/components/app-window/types.js

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