@ui-sdk/vue 0.0.0-stage → 0.1.0-beta.1

package/dist/popover.d.ts

@@ -0,0 +1,211 @@
+import type { Anchor, ChangeDetails, DismissAttemptDetails, Side } from "@ui-sdk/core";
+import { type PopoverController, type PopoverDismissReason, type PopoverFinalFocus, type PopoverInitialFocus, type PopoverOpenChangeReason, type PopoverPayloadChangeReason } from "@ui-sdk/core/popover";
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+type OpenDetails = ChangeDetails<PopoverOpenChangeReason>;
+type PayloadDetails = ChangeDetails<PopoverPayloadChangeReason>;
+/**
+ * Rich content in a floating panel, opened from a button. Put its trigger and content inside.
+ * @stable
+ */
+declare const Popover: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modal: {
+        type: PropType<boolean | "trap-focus">;
+        default: undefined;
+    };
+    openOnHover: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    delay: NumberConstructor;
+    closeDelay: NumberConstructor;
+    presentation: PropType<"auto" | "popover" | "sheet">;
+    controller: PropType<PopoverController<any>>;
+    dismissible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: PropType<Element | DocumentFragment | null>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (_open: boolean) => true;
+    "update:modelValue": (_open: boolean) => true;
+    openChange: (_open: boolean, _details: OpenDetails) => true;
+    openChangeComplete: (_open: boolean) => true;
+    dismissAttempt: (_details: DismissAttemptDetails<PopoverDismissReason>) => true;
+    payloadChange: (_payload: unknown, _details: PayloadDetails) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modal: {
+        type: PropType<boolean | "trap-focus">;
+        default: undefined;
+    };
+    openOnHover: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    delay: NumberConstructor;
+    closeDelay: NumberConstructor;
+    presentation: PropType<"auto" | "popover" | "sheet">;
+    controller: PropType<PopoverController<any>>;
+    dismissible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: PropType<Element | DocumentFragment | null>;
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_open: boolean) => any) | undefined;
+    "onUpdate:open"?: ((_open: boolean) => any) | undefined;
+    onOpenChange?: ((_open: boolean, _details: OpenDetails) => any) | undefined;
+    onOpenChangeComplete?: ((_open: boolean) => any) | undefined;
+    onPayloadChange?: ((_payload: unknown, _details: PayloadDetails) => any) | undefined;
+    onDismissAttempt?: ((_details: DismissAttemptDetails<PopoverDismissReason>) => any) | undefined;
+}>, {
+    open: boolean;
+    debug: boolean;
+    defaultOpen: boolean;
+    modal: boolean | "trap-focus";
+    openOnHover: boolean;
+    dismissible: boolean;
+    modelValue: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * The button that opens the popover. A trigger outside the popover connects through `controller`.
+ * @stable
+ */
+declare const PopoverTrigger: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    focusableWhenDisabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    payload: PropType<unknown>;
+    shortcut: StringConstructor;
+    controller: PropType<PopoverController<any>>;
+}>, () => unknown, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    focusableWhenDisabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    payload: PropType<unknown>;
+    shortcut: StringConstructor;
+    controller: PropType<PopoverController<any>>;
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    focusableWhenDisabled: boolean;
+}, PartSlots<import("@ui-sdk/core/popover").PopoverPrimitive, "trigger">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+/**
+ * The panel itself, positioned against its trigger, named by its title and described by its description.
+ * @stable
+ */
+declare const PopoverContent: import("./popup.js").PayloadPart<import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    side: PropType<Side>;
+    align: PropType<"start" | "center" | "end">;
+    sideOffset: NumberConstructor;
+    alignOffset: NumberConstructor;
+    collisionPadding: NumberConstructor;
+    arrowPadding: NumberConstructor;
+    anchor: PropType<Anchor | string | null>;
+    initialFocus: PropType<PopoverInitialFocus>;
+    finalFocus: PropType<PopoverFinalFocus>;
+    keepMounted: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: PropType<Element | DocumentFragment | null>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    side: PropType<Side>;
+    align: PropType<"start" | "center" | "end">;
+    sideOffset: NumberConstructor;
+    alignOffset: NumberConstructor;
+    collisionPadding: NumberConstructor;
+    arrowPadding: NumberConstructor;
+    anchor: PropType<Anchor | string | null>;
+    initialFocus: PropType<PopoverInitialFocus>;
+    finalFocus: PropType<PopoverFinalFocus>;
+    keepMounted: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: PropType<Element | DocumentFragment | null>;
+}>> & Readonly<{}>, {
+    keepMounted: boolean;
+}, PartSlots<import("@ui-sdk/core/popover").PopoverPrimitive, "content">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">>;
+/**
+ * The popover's title, which names it. A level 2 heading by default.
+ * @stable
+ */
+declare const PopoverTitle: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "h2">;
+/**
+ * Describes the popover while it's rendered. A paragraph by default.
+ * @stable
+ */
+declare const PopoverDescription: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "p">;
+/**
+ * A button that closes the popover.
+ * @stable
+ */
+declare const PopoverClose: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "button">;
+/**
+ * An arrow on the panel's edge that points at its trigger.
+ * @stable
+ */
+declare const PopoverArrow: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core").PopupPartState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core").PopupPartState>>>, "div">;
+/**
+ * Shows a trigger's shortcut, like ⌘I, inside the trigger. Hidden from screen readers, which hear
+ * aria-keyshortcuts.
+ * @stable
+ */
+declare const PopoverShortcut: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    shortcut: StringConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    shortcut: StringConstructor;
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/popover").PopoverPrimitive, "shortcut">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+export { createPopoverController } from "@ui-sdk/core/popover";
+export type { PopoverApi, PopoverArrowState, PopoverContentProps, PopoverContentState, PopoverController, PopoverDismissReason, PopoverFinalFocus, PopoverInitialFocus, PopoverOpenChangeReason, PopoverOptions, PopoverPayloadChangeReason, PopoverPrimitive, PopoverShortcutProps, PopoverShortcutState, PopoverTriggerProps, PopoverTriggerState, } from "@ui-sdk/core/popover";
+export { Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverShortcut, PopoverTitle, PopoverTrigger, };

package/dist/popover.js

@@ -0,0 +1,258 @@
+// src/popover.ts
+import {
+  popover as popoverPrimitive
+} from "@ui-sdk/core/popover";
+import {
+  defineComponent,
+  h,
+  inject,
+  onMounted,
+  provide,
+  ref,
+  useId
+} from "vue";
+import { slotContent } from "./children.js";
+import {
+  containerProp,
+  renderPopup,
+  renderUnbound,
+  sheetViewport,
+  useConnectedPart,
+  useControllerEntry,
+  useControllerTarget,
+  usePopupContainer,
+  withPayload
+} from "./popup.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  orModel,
+  useHandle,
+  usePart,
+  usePrimitive,
+  useScope
+} from "./use-primitive.js";
+import { renderless } from "./renderless.js";
+import { createPopoverController } from "@ui-sdk/core/popover";
+var ContainerKey = /* @__PURE__ */ Symbol("popover-container");
+var TriggerKey = /* @__PURE__ */ Symbol("popover-trigger");
+var parts = createParts(popoverPrimitive, {
+  title: "h2",
+  description: "p",
+  close: "button",
+  arrow: "div"
+});
+var Popover = /* @__PURE__ */ renderless(
+  defineComponent({
+    name: "Popover",
+    props: {
+      open: optionalBoolean,
+      modelValue: optionalBoolean,
+      defaultOpen: optionalBoolean,
+      modal: {
+        type: [Boolean, String],
+        default: void 0
+      },
+      openOnHover: optionalBoolean,
+      delay: Number,
+      closeDelay: Number,
+      presentation: String,
+      controller: Object,
+      dismissible: optionalBoolean,
+      debug: optionalBoolean,
+      container: containerProp
+    },
+    emits: {
+      "update:open": (_open) => true,
+      "update:modelValue": (_open) => true,
+      openChange: (_open, _details) => true,
+      openChangeComplete: (_open) => true,
+      dismissAttempt: (_details) => true,
+      payloadChange: (_payload, _details) => true
+    },
+    setup(props, { slots, emit }) {
+      provide(ContainerKey, () => props.container);
+      const popover = usePrimitive(popoverPrimitive, () => ({
+        ...props,
+        open: orModel(props.open, props.modelValue),
+        container: void 0,
+        onOpenChange: (open, details) => {
+          emit("openChange", open, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:open", open);
+          emit("update:modelValue", open);
+        },
+        onOpenChangeComplete: (open) => emit("openChangeComplete", open),
+        onDismissAttempt: (details) => emit("dismissAttempt", details),
+        onPayloadChange: (payload, details) => emit("payloadChange", payload, details)
+      }));
+      useControllerEntry(() => props.controller, popover);
+      return () => slots.default?.();
+    }
+  })
+);
+var PopoverTrigger = withElement(
+  "button",
+  defineComponent({
+    name: "PopoverTrigger",
+    inheritAttrs: false,
+    props: {
+      disabled: optionalBoolean,
+      focusableWhenDisabled: optionalBoolean,
+      payload: null,
+      // A keyboard shortcut that presses the trigger, like "mod+i".
+      shortcut: String,
+      // Connects a trigger outside the popover to the popover with this controller.
+      controller: Object
+    },
+    slots: Object,
+    setup(props, { slots, attrs }) {
+      const connected = useControllerTarget(
+        popoverPrimitive,
+        () => props.controller
+      );
+      provide(TriggerKey, {
+        shortcut: () => props.shortcut,
+        popover: connected
+      });
+      const id = useId();
+      const part = () => ({
+        id,
+        disabled: props.disabled,
+        focusableWhenDisabled: props.focusableWhenDisabled,
+        payload: props.payload,
+        shortcut: props.shortcut
+      });
+      return useConnectedPart(
+        connected,
+        (popover) => usePart(popover, "trigger", part, void 0, "button"),
+        // Until the popover it names mounts, a trigger outside the popover is a plain button.
+        () => renderUnbound(
+          "button",
+          {
+            type: "button",
+            disabled: props.disabled && !props.focusableWhenDisabled,
+            "aria-disabled": props.disabled && props.focusableWhenDisabled || void 0,
+            ...attrs
+          },
+          { slots, state: { open: false, disabled: !!props.disabled } }
+        )
+      );
+    }
+  })
+);
+var PopoverContent = withPayload(
+  withElement(
+    "div",
+    defineComponent({
+      name: "PopoverContent",
+      inheritAttrs: false,
+      props: {
+        side: String,
+        align: String,
+        sideOffset: Number,
+        alignOffset: Number,
+        collisionPadding: Number,
+        arrowPadding: Number,
+        anchor: [Object, String],
+        initialFocus: [
+          String,
+          Object,
+          Function
+        ],
+        finalFocus: [String, Object, Function],
+        keepMounted: optionalBoolean,
+        // Renders the popup into this element instead of in place.
+        container: containerProp
+      },
+      slots: Object,
+      setup(props) {
+        const popover = useHandle(popoverPrimitive);
+        const fromRoot = inject(ContainerKey, () => void 0);
+        const target = usePopupContainer(() => props.container ?? fromRoot());
+        const content = () => {
+          const { container, ...content2 } = props;
+          return content2;
+        };
+        const part = usePart(popover, "content", content);
+        return () => {
+          const element = part();
+          if (!element) {
+            return null;
+          }
+          return renderPopup(sheetViewport(popover, element), target());
+        };
+      }
+    })
+  )
+);
+var PopoverTitle = parts.Title;
+var PopoverDescription = parts.Description;
+var PopoverClose = parts.Close;
+var PopoverArrow = parts.Arrow;
+var ShortcutBinding = defineComponent({
+  name: "PopoverShortcutBinding",
+  inheritAttrs: false,
+  props: {
+    popover: { type: Object, required: true },
+    shortcut: String
+  },
+  setup(props, { slots }) {
+    return usePart(
+      props.popover,
+      "shortcut",
+      () => ({ shortcut: props.shortcut }),
+      void 0,
+      {
+        tag: "span",
+        children: (state) => slotContent(slots.default, { state }) ?? state.text
+      }
+    );
+  }
+});
+var PopoverShortcut = withElement(
+  "span",
+  defineComponent({
+    name: "PopoverShortcut",
+    inheritAttrs: false,
+    props: {
+      // The keys to show. Inside a trigger, its shortcut.
+      shortcut: String
+    },
+    slots: Object,
+    setup(props, { slots, attrs }) {
+      const context = useScope(popoverPrimitive)?.handle;
+      const trigger = inject(TriggerKey, null);
+      if (!context && !trigger) {
+        throw new Error("Popover parts must be used inside <Popover>.");
+      }
+      const mounted = ref(!!context);
+      onMounted(() => mounted.value = true);
+      return () => {
+        const popover = context ?? (mounted.value ? trigger?.popover() : void 0);
+        if (!popover) {
+          return null;
+        }
+        const shortcut = props.shortcut ?? trigger?.shortcut();
+        return h(
+          ShortcutBinding,
+          { ...attrs, key: popover.instance.id, popover, shortcut },
+          slots
+        );
+      };
+    }
+  })
+);
+export {
+  Popover,
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverShortcut,
+  PopoverTitle,
+  PopoverTrigger,
+  createPopoverController
+};

package/dist/popup.d.ts

@@ -0,0 +1,60 @@
+import type { Primitive } from "@ui-sdk/core";
+import { type PropType, type VNode } from "vue";
+import type { PrimitiveHandle, StateSlotFunctions } from "./use-primitive.js";
+type PopupContainer = Element | DocumentFragment | null | undefined;
+declare const containerProp: PropType<Element | DocumentFragment | null>;
+declare function usePopupContainer(own: () => PopupContainer): () => PopupContainer;
+declare function renderPopup(element: VNode | VNode[], container: PopupContainer): VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[];
+/**
+ * Wraps a popup's content in the full-screen viewport a sheet sits in, while
+ * its `viewport` slot is present: always for a drawer, and for a popup while
+ * it presents as a sheet. The viewport is what goes into the top layer. Its
+ * attributes are a subset of the content's, so the content's render keeps it current.
+ */
+declare function sheetViewport(popup: PrimitiveHandle<Primitive>, element: VNode | VNode[]): VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[];
+/**
+ * Where an input renders while its popup presents as a sheet: in a header the
+ * content renders at its top. The root calls `provideSheetHeader()`, the
+ * content renders the header with `useSheetHeader()`, and the input renders
+ * into it with `useInSheetHeader()`, so there's one input at a time.
+ */
+declare function provideSheetHeader(): void;
+/** Call in the content's `setup`. Returns the render step for the header, while the popup's `header` slot is present. */
+declare function useSheetHeader(popup: PrimitiveHandle<Primitive>): () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null;
+/** Call in the input's `setup`. Returns the render step that moves the input into the sheet's header while there is one. */
+declare function useInSheetHeader(): (element: VNode | VNode[]) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[];
+type Component = new (...args: any[]) => {
+    $slots: object;
+};
+type SlotState<Part extends Component> = InstanceType<Part>["$slots"] extends {
+    default?: (scope: {
+        state: infer State;
+    }) => unknown;
+} ? State : never;
+type PayloadPart<Part extends Component> = Part & (new <Payload = unknown>(...args: any[]) => Omit<InstanceType<Part>, "$slots"> & {
+    $slots: Readonly<StateSlotFunctions<SlotState<Part> & {
+        payload: Payload | undefined;
+    }>>;
+});
+/**
+ * Types a popup's content part by its payload: `const DayContent =
+ * TooltipContent<Day>` is the same component, with a `Day` as its state's
+ * payload. The payload's type is the app's; the part hands its state on as it is.
+ */
+declare const withPayload: <Part extends Component>(part: Part) => PayloadPart<Part>;
+export { provideConnected, renderUnbound, useConnectedHandle, useConnectedPart, useControllerEntry, useControllerTarget, } from "./controller-target.js";
+export { containerProp, type PayloadPart, type PopupContainer, provideSheetHeader, renderPopup, sheetViewport, useInSheetHeader, usePopupContainer, useSheetHeader, withPayload, };

package/dist/popup.js

@@ -0,0 +1,89 @@
+// src/popup.ts
+import { portalTarget } from "@ui-sdk/core/renderer";
+import {
+  Teleport,
+  defineComponent,
+  h,
+  inject,
+  provide,
+  shallowRef
+} from "vue";
+import { useKeptAway } from "./lifecycle.js";
+import {
+  provideConnected,
+  renderUnbound,
+  useConnectedHandle,
+  useConnectedPart,
+  useControllerEntry,
+  useControllerTarget
+} from "./controller-target.js";
+var containerProp = Object;
+var InheritedContainer = /* @__PURE__ */ Symbol("popup-container");
+function usePopupContainer(own) {
+  const inherited = inject(InheritedContainer, () => void 0);
+  return () => own() ?? inherited();
+}
+var ContainerScope = defineComponent({
+  name: "PopupContainerScope",
+  props: { container: Object },
+  setup(props, { slots }) {
+    provide(InheritedContainer, () => props.container);
+    return () => slots.default?.();
+  }
+});
+var PopupTeleport = defineComponent({
+  name: "PopupTeleport",
+  props: {
+    to: {
+      type: Object,
+      required: true
+    }
+  },
+  slots: Object,
+  setup(props, { slots }) {
+    const isAway = useKeptAway();
+    return () => h(
+      Teleport,
+      { to: props.to, disabled: isAway.value },
+      slots.default()
+    );
+  }
+});
+function renderPopup(element, container) {
+  const target = portalTarget(container);
+  const content = container ? [h(ContainerScope, { container }, () => element)] : [].concat(element);
+  return target ? h(PopupTeleport, { to: target }, () => content) : content.length === 1 ? content[0] : content;
+}
+function sheetViewport(popup, element) {
+  return popup.present("viewport") ? h("div", popup.slot("viewport", {}), [].concat(element)) : element;
+}
+var SheetHeaderKey = /* @__PURE__ */ Symbol("sheet-header");
+function provideSheetHeader() {
+  provide(SheetHeaderKey, shallowRef(null));
+}
+function useSheetHeader(popup) {
+  const header = inject(SheetHeaderKey, { value: null });
+  const ref = (el) => header.value = el ?? null;
+  return () => popup.present("header") ? h("div", popup.slot("header", {}, { ref })) : null;
+}
+function useInSheetHeader() {
+  const header = inject(SheetHeaderKey, { value: null });
+  return (element) => header.value ? h(Teleport, { to: header.value }, [].concat(element)) : element;
+}
+var withPayload = (part) => part;
+export {
+  containerProp,
+  provideConnected,
+  provideSheetHeader,
+  renderPopup,
+  renderUnbound,
+  sheetViewport,
+  useConnectedHandle,
+  useConnectedPart,
+  useControllerEntry,
+  useControllerTarget,
+  useInSheetHeader,
+  usePopupContainer,
+  useSheetHeader,
+  withPayload
+};

package/dist/preferences.d.ts

@@ -0,0 +1,44 @@
+import { type PreferenceLike } from "@ui-sdk/core";
+import { type PropType, type SlotsType, type VNode } from "vue";
+/**
+ * Shows preferences on `data-*` attributes, so CSS styles by them from the
+ * first paint: global ones on `<html>`, the rest on its own element, which
+ * has `display: contents`. On the server it renders one inline script as its
+ * first child, which puts every saved value on its attribute as the page
+ * loads, before hydration. Content that reads a preference, through
+ * `usePreference`, catches up after hydration.
+ * @experimental
+ */
+declare const Preferences: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** The preferences to show, from `createPreference` or `createColorScheme`. */
+    preferences: {
+        type: PropType<readonly PreferenceLike[]>;
+        required: true;
+    };
+    /** The nonce your Content Security Policy gives inline scripts. */
+    nonce: StringConstructor;
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** The preferences to show, from `createPreference` or `createColorScheme`. */
+    preferences: {
+        type: PropType<readonly PreferenceLike[]>;
+        required: true;
+    };
+    /** The nonce your Content Security Policy gives inline scripts. */
+    nonce: StringConstructor;
+}>> & Readonly<{}>, {}, SlotsType<{
+    default?: () => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * A preference's state, like `{ value: "dark" }`, or a color scheme's, as a
+ * computed ref. It's the server's until mounted, so the page hydrates without
+ * a mismatch, and the saved value right after.
+ * @experimental
+ */
+declare function usePreference<State>(preference: {
+    get: () => State;
+    initialState: State;
+    subscribe: (listener: () => void) => () => void;
+}): import("vue").ComputedRef<any>;
+export { Preferences, usePreference };