winui-svelte 0.0.4 → 0.0.6

package/dist/renderer/host/implicit-layout-animation.d.ts

@@ -0,0 +1,50 @@
+import type { Visual } from "#winui/microsoft/ui/composition/Visual";
+import type { UIElement } from "#winui/microsoft/ui/xaml/UIElement";
+/** The curves an implicit layout animation can follow. */
+export declare const LayoutEasing: {
+    readonly EASE: "ease";
+    readonly EASE_IN: "ease-in";
+    readonly EASE_OUT: "ease-out";
+    readonly EASE_IN_OUT: "ease-in-out";
+    readonly LINEAR: "linear";
+    readonly EMPHASIZED: "cubic-bezier(0.05, 0.7, 0.1, 1)";
+};
+/** One of the values of `LayoutEasing`. */
+export type LayoutEasing = typeof LayoutEasing[keyof typeof LayoutEasing];
+/** What `implicitLayoutAnimation` can be told; every member has a default. */
+export interface ImplicitLayoutAnimationOptions {
+    /** Milliseconds; default: 260, the length Windows' own settings pages slide with. */
+    readonly duration?: number;
+    /** Default: `LayoutEasing.EASE_OUT`. */
+    readonly easing?: LayoutEasing;
+    /** What the animation reads of the system; default: the real one, a test replaces it. */
+    readonly host?: ImplicitLayoutHost;
+}
+/**
+ * What the animation needs of the system, which a test replaces: the visual
+ * of an element, and whether the user asked for reduced motion (with a way to
+ * hear it change).
+ */
+export interface ImplicitLayoutHost {
+    visualOf(element: UIElement): Pick<Visual, "compositor" | "implicitAnimations">;
+    isMotionReduced(): boolean;
+    onMotionChanged(callback: () => void): () => void;
+}
+/**
+ * Makes the children of a panel slide to their new places instead of jumping
+ * when the layout moves them (an expander above them opens, an item is
+ * removed): the animation WinUI runs on a visual's `Offset` property, started
+ * by the composition layer itself whenever the offset changes. Put it on the
+ * panel whose children move: `@attach implicitLayoutAnimation({ duration: 260 })`.
+ *
+ * A child gets the animation when the panel first lays it out after it was
+ * added, so an item that appears does not slide in from the corner, and the
+ * ones already there slide over to make room. A user who turned Windows'
+ * animation effects off gets the plain jump, and the slide returns if they turn
+ * them back on.
+ *
+ * @param options - Duration and easing.
+ * @returns The attachment to put after `@attach`.
+ */
+export declare function implicitLayoutAnimation({ duration, easing, host }?: ImplicitLayoutAnimationOptions): (node: object) => (() => void) | undefined;
+//# sourceMappingURL=implicit-layout-animation.d.ts.map

package/dist/renderer/host/implicit-layout-animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"implicit-layout-animation.d.ts","sourceRoot":"","sources":["../../../src/renderer/host/implicit-layout-animation.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wCAAwC,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAOpE,0DAA0D;AAC1D,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,2CAA2C;AAC3C,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE1E,8EAA8E;AAC9E,MAAM,WAAW,8BAA8B;IAC7C,qFAAqF;IACrF,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,wCAAwC;IACxC,QAAQ,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC;IAE/B,yFAAyF;IACzF,QAAQ,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAED;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,OAAO,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,YAAY,GAAG,oBAAoB,CAAC,CAAC;IAChF,eAAe,IAAI,OAAO,CAAC;IAC3B,eAAe,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;CACnD;AAqGD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAwC,EACxC,MAA8B,EAC9B,IAAiB,EAClB,GAAE,8BAAmC,IAC5B,MAAM,MAAM,8BAarB"}

package/dist/renderer/host/implicit-layout-animation.js

@@ -0,0 +1,121 @@
+import { nativeControl } from "./control.js";
+import { read } from "./reflect.js";
+import { timeSpanOf } from "../../components/convert.js";
+import { parseEasing } from "../../css/translate/easing.js";
+import { isMotionReducedBySystem } from "../../window/reduced-motion.js";
+import { systemSettingsStore } from "../../window/settings-store.js";
+import { ElementCompositionPreview } from "#winui/microsoft/ui/xaml/hosting/ElementCompositionPreview";
+const DEFAULT_DURATION_MILLISECONDS = 260;
+const OFFSET_PROPERTY = "Offset";
+const FINAL_VALUE = "this.FinalValue";
+const END_OF_ANIMATION = 1;
+/** The curves an implicit layout animation can follow. */
+export const LayoutEasing = {
+    EASE: "ease",
+    EASE_IN: "ease-in",
+    EASE_OUT: "ease-out",
+    EASE_IN_OUT: "ease-in-out",
+    LINEAR: "linear",
+    EMPHASIZED: "cubic-bezier(0.05, 0.7, 0.1, 1)"
+};
+const systemHost = {
+    visualOf: element => ElementCompositionPreview.getElementVisual(element),
+    isMotionReduced: isMotionReducedBySystem,
+    onMotionChanged: callback => systemSettingsStore().subscribe(callback)
+};
+function isContainer(value) {
+    const children = read(value, "children");
+    const isIterable = typeof children === "object" && children !== null && Symbol.iterator in children;
+    return isIterable && typeof read(value, "onLayoutUpdated") === "function";
+}
+function offsetCollection({ compositor, duration, easing }) {
+    const curve = parseEasing(easing);
+    const isBezier = curve?.kind === "bezier";
+    const animation = compositor.createVector3KeyFrameAnimation();
+    animation.target = OFFSET_PROPERTY;
+    animation.duration = timeSpanOf(duration);
+    if (isBezier) {
+        animation.insertExpressionKeyFrame(END_OF_ANIMATION, FINAL_VALUE, compositor.createCubicBezierEasingFunction({
+            x: curve.x1,
+            y: curve.y1
+        }, {
+            x: curve.x2,
+            y: curve.y2
+        }));
+    }
+    else {
+        animation.insertExpressionKeyFrame(END_OF_ANIMATION, FINAL_VALUE);
+    }
+    const collection = compositor.createImplicitAnimationCollection();
+    collection.insert(OFFSET_PROPERTY, animation);
+    return collection;
+}
+function start({ container, host, duration, easing }) {
+    const animated = new Set();
+    let collection = null;
+    function release() {
+        collection?.clear();
+        collection = null;
+        animated.clear();
+    }
+    function follow() {
+        const isReduced = host.isMotionReduced();
+        if (isReduced) {
+            release();
+            return;
+        }
+        for (const child of container.children) {
+            const isKnown = animated.has(child);
+            if (isKnown) {
+                continue;
+            }
+            const visual = host.visualOf(child);
+            collection ??= offsetCollection({
+                compositor: visual.compositor,
+                duration,
+                easing
+            });
+            visual.implicitAnimations = collection;
+            animated.add(child);
+        }
+    }
+    follow();
+    const stops = [container.onLayoutUpdated(follow), host.onMotionChanged(follow)];
+    return () => {
+        for (const stop of stops) {
+            stop();
+        }
+        release();
+    };
+}
+/**
+ * Makes the children of a panel slide to their new places instead of jumping
+ * when the layout moves them (an expander above them opens, an item is
+ * removed): the animation WinUI runs on a visual's `Offset` property, started
+ * by the composition layer itself whenever the offset changes. Put it on the
+ * panel whose children move: `@attach implicitLayoutAnimation({ duration: 260 })`.
+ *
+ * A child gets the animation when the panel first lays it out after it was
+ * added, so an item that appears does not slide in from the corner, and the
+ * ones already there slide over to make room. A user who turned Windows'
+ * animation effects off gets the plain jump, and the slide returns if they turn
+ * them back on.
+ *
+ * @param options - Duration and easing.
+ * @returns The attachment to put after `@attach`.
+ */
+export function implicitLayoutAnimation({ duration = DEFAULT_DURATION_MILLISECONDS, easing = LayoutEasing.EASE_OUT, host = systemHost } = {}) {
+    return (node) => {
+        const container = nativeControl(node);
+        if (!isContainer(container)) {
+            return;
+        }
+        return start({
+            container,
+            host,
+            duration,
+            easing
+        });
+    };
+}
+//# sourceMappingURL=implicit-layout-animation.js.map

package/dist/renderer/host/implicit-layout-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"implicit-layout-animation.js","sourceRoot":"","sources":["../../../src/renderer/host/implicit-layout-animation.ts"],"names":[],"mappings":"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"}

package/dist/renderer/host/motion-preference.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Whether an element carries the class that keeps its motion under reduced motion.
+ *
+ * @param node - The tree's element.
+ * @returns True for an element with `winui-motion-always`.
+ */
+export declare function keepsMotion(node: object): boolean;
+/**
+ * Whether reduced motion takes the motion from an element: the setting is on
+ * (Windows' by default) and the element does not keep its motion.
+ *
+ * @param input - The tree's element, and the setting when it is not Windows'.
+ * @returns True when the element's animations are skipped.
+ */
+export declare function isMotionReducedFor({ node, isMotionReduced }: {
+    node: object;
+    isMotionReduced?: () => boolean;
+}): boolean;
+//# sourceMappingURL=motion-preference.d.ts.map

package/dist/renderer/host/motion-preference.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-preference.d.ts","sourceRoot":"","sources":["../../../src/renderer/host/motion-preference.ts"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,WAGvC;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,IAAI,EAAE,eAAyC,EAAE,EAAE;IACtF,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,MAAM,OAAO,CAAC;CACjC,WAEA"}

package/dist/renderer/host/motion-preference.js

@@ -0,0 +1,26 @@
+import { read } from "./reflect.js";
+import { MOTION_ALWAYS_CLASS } from "../../motion.js";
+import { isMotionReducedBySystem } from "../../window/reduced-motion.js";
+// Whether the user's reduced-motion setting takes the motion from an element:
+// the one answer the element animation engine and the scroll timelines share.
+/**
+ * Whether an element carries the class that keeps its motion under reduced motion.
+ *
+ * @param node - The tree's element.
+ * @returns True for an element with `winui-motion-always`.
+ */
+export function keepsMotion(node) {
+    const classes = read(node, "className");
+    return typeof classes === "string" && classes.split(" ").includes(MOTION_ALWAYS_CLASS);
+}
+/**
+ * Whether reduced motion takes the motion from an element: the setting is on
+ * (Windows' by default) and the element does not keep its motion.
+ *
+ * @param input - The tree's element, and the setting when it is not Windows'.
+ * @returns True when the element's animations are skipped.
+ */
+export function isMotionReducedFor({ node, isMotionReduced = isMotionReducedBySystem }) {
+    return isMotionReduced() && !keepsMotion(node);
+}
+//# sourceMappingURL=motion-preference.js.map

package/dist/renderer/host/motion-preference.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-preference.js","sourceRoot":"","sources":["../../../src/renderer/host/motion-preference.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAExE,8EAA8E;AAC9E,8EAA8E;AAE9E;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,IAAY;IACtC,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACxC,OAAO,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AACzF,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAE,IAAI,EAAE,eAAe,GAAG,uBAAuB,EAGnF;IACC,OAAO,eAAe,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AACjD,CAAC"}

package/dist/renderer/host/values.d.ts

@@ -18,7 +18,7 @@ export declare function boxed(value: Boxable): object;
  * @param value - A boxed value, or an object that is not one.
  * @returns The string, number, boolean or bigint inside a box; null for null or undefined; any other object as it is.
  */
-export declare function unboxed(value: unknown): string | number | bigint | boolean | string[] | number[] | Uint8Array<ArrayBufferLike> | bigint[] | boolean[] | import("@microsoft/dynwinrt").DynWinRtValue | null;
+export declare function unboxed(value: unknown): string | number | bigint | boolean | string[] | Uint8Array<ArrayBufferLike> | number[] | bigint[] | boolean[] | import("@microsoft/dynwinrt").DynWinRtValue | null;
 /**
  * A `Thickness`, from its four sides.
  *

package/dist/renderer/host/view-transition-names.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Gives a control a view transition name.
+ *
+ * @param input - The control and its name.
+ * @returns What takes the name away again.
+ */
+export declare function nameForTransition({ control, name }: {
+    control: object;
+    name: string;
+}): () => void;
+/** Every control that has a view transition name, with its name. */
+export declare function transitionNames(): [object, string][];
+//# sourceMappingURL=view-transition-names.d.ts.map

package/dist/renderer/host/view-transition-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-transition-names.d.ts","sourceRoot":"","sources":["../../../src/renderer/host/view-transition-names.ts"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd,cAQA;AAED,oEAAoE;AACpE,wBAAgB,eAAe,uBAE9B"}

package/dist/renderer/host/view-transition-names.js

@@ -0,0 +1,25 @@
+// The `view-transition-name` of each control that has one, kept by the CSS
+// group that lowers the property (src/css/view-transition.ts) and read by
+// `document.startViewTransition` (src/web-apis/view-transitions.ts), which
+// pairs the controls named alike before and after an update.
+const names = new Map();
+/**
+ * Gives a control a view transition name.
+ *
+ * @param input - The control and its name.
+ * @returns What takes the name away again.
+ */
+export function nameForTransition({ control, name }) {
+    names.set(control, name);
+    return () => {
+        const isStillNamed = names.get(control) === name;
+        if (isStillNamed) {
+            names.delete(control);
+        }
+    };
+}
+/** Every control that has a view transition name, with its name. */
+export function transitionNames() {
+    return [...names];
+}
+//# sourceMappingURL=view-transition-names.js.map

package/dist/renderer/host/view-transition-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-transition-names.js","sourceRoot":"","sources":["../../../src/renderer/host/view-transition-names.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,0EAA0E;AAC1E,2EAA2E;AAC3E,6DAA6D;AAE7D,MAAM,KAAK,GAAG,IAAI,GAAG,EAAkB,CAAC;AAExC;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAE,OAAO,EAAE,IAAI,EAGhD;IACC,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACzB,OAAO,GAAG,EAAE;QACV,MAAM,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;QACjD,IAAI,YAAY,EAAE,CAAC;YACjB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,CAAC;AACJ,CAAC;AAED,oEAAoE;AACpE,MAAM,UAAU,eAAe;IAC7B,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC;AACpB,CAAC"}

package/dist/settings/SettingsCard.d.svelte.ts

@@ -0,0 +1,12 @@
+import type { SettingsCardProps } from "./settings-props.ts";
+import type { Component } from "svelte";
+
+export type { SettingsCardProps };
+
+/**
+ * A setting as a Fluent card: an icon, the name and a description on the left,
+ * its control on the right, and with `isClickEnabled` the whole card a button.
+ */
+declare const SettingsCard: Component<SettingsCardProps, Record<string, never>, "">;
+// eslint-disable-next-line no-restricted-exports -- Svelte declares a component as the default export
+export default SettingsCard;

package/dist/settings/SettingsCard.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { placementOf } from "./settings-context.js";
+  import { DEFAULT_ACTION_GLYPH } from "./settings-props.js";
+  import type { SettingsCardProps } from "./settings-props.js";
+  import SettingsRow from "./SettingsRow.svelte";
+  import Border from "../components/generated/Border.svelte";
+  import Button from "../components/generated/Button.svelte";
+  import FontIcon from "../components/generated/FontIcon.svelte";
+
+  // One setting as a Fluent card. A card that can be clicked is a Button, so it
+  // takes focus and answers Enter and Space with no code here; one that cannot is
+  // a Border. Inside a SettingsExpander it draws flat, as the toolkit's does.
+  const props: SettingsCardProps = $props();
+  const placement = placementOf();
+  const kind = $derived({ isClickable: props.isClickEnabled === true });
+</script>
+
+{#snippet actionIcon()}
+  <FontIcon class="chevron" glyph={props.actionIcon ?? DEFAULT_ACTION_GLYPH} />
+{/snippet}
+
+{#snippet row()}
+  <SettingsRow
+    description={props.description}
+    end={kind.isClickable ? props.action ?? actionIcon : props.action}
+    header={props.header}
+    headerIcon={props.headerIcon}
+  >
+    {@render props.children?.()}
+  </SettingsRow>
+{/snippet}
+
+{#if kind.isClickable}
+  <Button
+    class="card clickable"
+    class:flat={placement.isInside}
+    automationHelpText={props.description ?? ""}
+    automationId={props.automationId ?? ""}
+    automationName={props.header}
+    isEnabled={props.isEnabled !== false}
+    onclick={() => props.onclick?.()}
+  >
+    {@render row()}
+  </Button>
+{:else}
+  <Border
+    class="card"
+    class:flat={placement.isInside}
+    automationId={props.automationId ?? ""}
+    automationName={props.header}
+  >
+    {@render row()}
+  </Border>
+{/if}
+
+<style>
+  .card {
+    justify-self: stretch;
+    min-height: 68px;
+    padding: 12px 16px;
+    border-color: var(--card-stroke-color-default);
+    border-width: 1px;
+    border-radius: 4px;
+    background-color: var(--card-background-fill-color-default);
+  }
+
+  .clickable {
+    justify-content: stretch;
+  }
+
+  .flat {
+    border-width: 0;
+    border-radius: 0;
+    background-color: var(--card-background-fill-color-secondary);
+  }
+
+  .chevron {
+    font-size: 12px;
+  }
+</style>

package/dist/settings/SettingsExpander.d.svelte.ts

@@ -0,0 +1,12 @@
+import type { SettingsExpanderProps } from "./settings-props.ts";
+import type { Component } from "svelte";
+
+export type { SettingsExpanderProps };
+
+/**
+ * A settings card that opens: its header is a card row, and its `items` (more
+ * `SettingsCard`s) slide open below it.
+ */
+declare const SettingsExpander: Component<SettingsExpanderProps, Record<string, never>, "isExpanded">;
+// eslint-disable-next-line no-restricted-exports -- Svelte declares a component as the default export
+export default SettingsExpander;

package/dist/settings/SettingsExpander.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { provideExpander } from "./settings-context.js";
+  import type { SettingsExpanderProps } from "./settings-props.js";
+  import SettingsRow from "./SettingsRow.svelte";
+  import Expander from "../components/generated/Expander.svelte";
+  import StackPanel from "../components/generated/StackPanel.svelte";
+
+  // A settings card that opens. The header is a card row inside WinUI's
+  // Expander, whose own chevron is the action; the items go in its content, and
+  // the SettingsCards among them know they are inside and draw flat.
+  let { isExpanded = $bindable(false), ...props }: SettingsExpanderProps = $props();
+  provideExpander();
+</script>
+
+{#snippet header()}
+  <SettingsRow description={props.description} header={props.header} headerIcon={props.headerIcon}>
+    {@render props.children?.()}
+  </SettingsRow>
+{/snippet}
+
+<Expander
+  class="expander"
+  automationId={props.automationId ?? ""}
+  automationName={props.header}
+  {header}
+  horizontalContentAlignment="Stretch"
+  bind:isExpanded
+>
+  <StackPanel class="items">{@render props.items?.()}</StackPanel>
+</Expander>
+
+<style>
+  .expander {
+    justify-self: stretch;
+    min-height: 68px;
+    padding: 0;
+    border-color: var(--card-stroke-color-default);
+    border-width: 1px;
+    border-radius: 4px;
+    background-color: var(--card-background-fill-color-default);
+  }
+
+  .items {
+    justify-self: stretch;
+  }
+</style>

package/dist/settings/SettingsRow.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import type { SettingsRowProps } from "./settings-props.js";
+  import FontIcon from "../components/generated/FontIcon.svelte";
+  import Grid from "../components/generated/Grid.svelte";
+  import StackPanel from "../components/generated/StackPanel.svelte";
+  import TextBlock from "../components/generated/TextBlock.svelte";
+  import { isSnippet } from "../components/runtime.js";
+  import type { Snippet } from "svelte";
+
+  // The row inside a settings card and the header of a settings expander: the
+  // icon, the texts, the control and, after it, whatever the owner puts at the end.
+  interface Props extends SettingsRowProps {
+    end?: Snippet | undefined;
+  }
+
+  const props: Props = $props();
+  const icon = $derived(props.headerIcon);
+</script>
+
+<Grid class="row">
+  {#if isSnippet(icon)}
+    <StackPanel class="icon">{@render icon()}</StackPanel>
+  {:else if icon}
+    <FontIcon class="icon glyph" glyph={icon} />
+  {/if}
+  <StackPanel class="texts">
+    <TextBlock textWrapping="Wrap">{props.header}</TextBlock>
+    {#if props.description}
+      <TextBlock class="description" textWrapping="Wrap">{props.description}</TextBlock>
+    {/if}
+  </StackPanel>
+  {#if props.children}
+    <StackPanel class="content">{@render props.children()}</StackPanel>
+  {/if}
+  {#if props.end}
+    <StackPanel class="end">{@render props.end()}</StackPanel>
+  {/if}
+</Grid>
+
+<style>
+  .row {
+    grid-template-columns: auto 1fr auto auto;
+    justify-self: stretch;
+  }
+
+  .icon {
+    grid-column: 1;
+    align-self: center;
+    margin-right: 16px;
+  }
+
+  .glyph {
+    font-size: 20px;
+  }
+
+  .texts {
+    grid-column: 2;
+    align-self: center;
+  }
+
+  .description {
+    font-size: 12px;
+    color: var(--text-fill-color-secondary);
+  }
+
+  .content {
+    flex-direction: row;
+    grid-column: 3;
+    align-self: center;
+    margin-left: 16px;
+  }
+
+  .end {
+    flex-direction: row;
+    grid-column: 4;
+    align-self: center;
+    margin-left: 16px;
+  }
+</style>

package/dist/settings/index.d.ts

@@ -0,0 +1,5 @@
+export { default as SettingsCard } from "./SettingsCard.svelte";
+export type { SettingsCardProps } from "./SettingsCard.d.svelte.ts";
+export { default as SettingsExpander } from "./SettingsExpander.svelte";
+export type { SettingsExpanderProps } from "./SettingsExpander.d.svelte.ts";
+//# sourceMappingURL=index.d.ts.map

package/dist/settings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/settings/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,YAAY,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/settings/index.js

@@ -0,0 +1,7 @@
+// The Fluent settings pages' building blocks: a card for one setting and an
+// expander that holds more of them, after the Windows Community Toolkit's
+// SettingsCard and SettingsExpander (managed code with no projectable metadata,
+// so they are built here from WinUI's own controls).
+export { default as SettingsCard } from "./SettingsCard.svelte";
+export { default as SettingsExpander } from "./SettingsExpander.svelte";
+//# sourceMappingURL=index.js.map

package/dist/settings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/settings/index.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,0EAA0E;AAC1E,gFAAgF;AAChF,qDAAqD;AAErD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/settings/settings-context.d.ts

@@ -0,0 +1,7 @@
+/** Tells the `SettingsCard`s below that they sit in an expander and draw flat; call it while a component is made. */
+export declare function provideExpander(): void;
+/** Where the component being made sits: `isInside` says whether that is in a `SettingsExpander`. */
+export declare function placementOf(): {
+    isInside: boolean;
+};
+//# sourceMappingURL=settings-context.d.ts.map

package/dist/settings/settings-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-context.d.ts","sourceRoot":"","sources":["../../src/settings/settings-context.ts"],"names":[],"mappings":"AAIA,qHAAqH;AACrH,wBAAgB,eAAe,SAE9B;AAED,oGAAoG;AACpG,wBAAgB,WAAW;;EAE1B"}

package/dist/settings/settings-context.js

@@ -0,0 +1,11 @@
+import { getContext, setContext } from "svelte";
+const EXPANDER_KEY = "winui-svelte:settings-expander";
+/** Tells the `SettingsCard`s below that they sit in an expander and draw flat; call it while a component is made. */
+export function provideExpander() {
+    setContext(EXPANDER_KEY, true);
+}
+/** Where the component being made sits: `isInside` says whether that is in a `SettingsExpander`. */
+export function placementOf() {
+    return { isInside: getContext(EXPANDER_KEY) === true };
+}
+//# sourceMappingURL=settings-context.js.map

package/dist/settings/settings-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-context.js","sourceRoot":"","sources":["../../src/settings/settings-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEhD,MAAM,YAAY,GAAG,gCAAgC,CAAC;AAEtD,qHAAqH;AACrH,MAAM,UAAU,eAAe;IAC7B,UAAU,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;AACjC,CAAC;AAED,oGAAoG;AACpG,MAAM,UAAU,WAAW;IACzB,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC;AACzD,CAAC"}

package/dist/settings/settings-props.d.ts

@@ -0,0 +1,40 @@
+import type { GlyphInput } from "../components/convert.js";
+import type { Snippet } from "svelte";
+/** The Fluent glyph a card's action shows when it can be clicked: a chevron pointing onwards. */
+export declare const DEFAULT_ACTION_GLYPH = "ChevronRight";
+/** What the header row of a settings card or expander is made of. */
+export interface SettingsRowProps {
+    /** The setting's name. */
+    header: string;
+    /** A line under the header that says what the setting does. */
+    description?: string | undefined;
+    /** An icon before the header: a Fluent glyph, or a snippet that draws one. */
+    headerIcon?: GlyphInput | Snippet | undefined;
+    /** The setting's control, on the right: a switch, a combo box, a button. */
+    children?: Snippet;
+}
+/** The props of `SettingsCard`. */
+export interface SettingsCardProps extends SettingsRowProps {
+    /** Makes the whole card a button: it takes focus, answers Enter and Space, and raises `onclick`. */
+    isClickEnabled?: boolean | undefined;
+    /** The glyph at the end of a clickable card; default: a chevron pointing right. */
+    actionIcon?: GlyphInput | undefined;
+    /** Replaces the action icon with anything else (an external-link glyph, a button). */
+    action?: Snippet;
+    /** Whether the card answers input; default: true. */
+    isEnabled?: boolean | undefined;
+    /** The id UI Automation tools and tests find the card by. */
+    automationId?: string | undefined;
+    /** Called when a clickable card is clicked or activated with the keyboard. */
+    onclick?: (() => void) | undefined;
+}
+/** The props of `SettingsExpander`: a card whose items open below it. */
+export interface SettingsExpanderProps extends SettingsRowProps {
+    /** Whether the items are shown (`bind:isExpanded`). */
+    isExpanded?: boolean | undefined;
+    /** The id UI Automation tools and tests find the expander by. */
+    automationId?: string | undefined;
+    /** The items: `SettingsCard`s, which draw flat inside the expander. */
+    items?: Snippet;
+}
+//# sourceMappingURL=settings-props.d.ts.map

package/dist/settings/settings-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-props.d.ts","sourceRoot":"","sources":["../../src/settings/settings-props.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,iGAAiG;AACjG,eAAO,MAAM,oBAAoB,iBAAiB,CAAC;AAEnD,qEAAqE;AACrE,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IAEf,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC,8EAA8E;IAC9E,UAAU,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;IAE9C,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,mCAAmC;AACnC,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,oGAAoG;IACpG,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAErC,mFAAmF;IACnF,UAAU,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAEpC,sFAAsF;IACtF,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAEhC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAElC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACpC;AAED,yEAAyE;AACzE,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAEjC,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAElC,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB"}

package/dist/settings/settings-props.js

@@ -0,0 +1,3 @@
+/** The Fluent glyph a card's action shows when it can be clicked: a chevron pointing onwards. */
+export const DEFAULT_ACTION_GLYPH = "ChevronRight";
+//# sourceMappingURL=settings-props.js.map

package/dist/settings/settings-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-props.js","sourceRoot":"","sources":["../../src/settings/settings-props.ts"],"names":[],"mappings":"AAOA,iGAAiG;AACjG,MAAM,CAAC,MAAM,oBAAoB,GAAG,cAAc,CAAC"}

package/dist/store/bindings.d.ts

@@ -0,0 +1,7 @@
+export { Package } from "#winui/windows/application-model/Package";
+export { PackageCatalog } from "#winui/windows/application-model/PackageCatalog";
+export { StartupTask } from "#winui/windows/application-model/StartupTask";
+export { StoreContext } from "#winui/windows/services/store/StoreContext";
+export type { StorePackageUpdate } from "#winui/windows/services/store/StorePackageUpdate";
+export { unpackStorePackageUpdateStatus } from "#winui/windows/services/store/StorePackageUpdateResult";
+//# sourceMappingURL=bindings.d.ts.map