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

package/dist/pagination.d.ts

@@ -0,0 +1,201 @@
+import type { ChangeDetails } from "@ui-sdk/core";
+import { type PaginationController, type PaginationPageChangeReason } from "@ui-sdk/core/pagination";
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * A navigation landmark around the page links. Name it with `aria-label`.
+ * @stable
+ */
+declare const Pagination: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    page: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    defaultPage: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    pageCount: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    total: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    siblings: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    boundaries: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    getHref: PropType<(page: number) => string>;
+    controller: PropType<PaginationController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => 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) & {
+    state: NoInfer<import("@ui-sdk/core/pagination").PaginationState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (_page: number) => true;
+    "update:modelValue": (_page: number) => true;
+    pageChange: (_page: number, _details: ChangeDetails<PaginationPageChangeReason>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    page: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    defaultPage: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    pageCount: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    total: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    siblings: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    boundaries: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    getHref: PropType<(page: number) => string>;
+    controller: PropType<PaginationController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_page: number) => any) | undefined;
+    "onUpdate:page"?: ((_page: number) => any) | undefined;
+    onPageChange?: ((_page: number, _details: ChangeDetails<PaginationPageChangeReason>) => any) | undefined;
+}>, {
+    debug: boolean;
+    total: number;
+    page: number;
+    siblings: number;
+    modelValue: number;
+    pageCount: number;
+    defaultPage: number;
+    boundaries: number;
+    pageSize: number;
+}, PartSlots<import("@ui-sdk/core/pagination").PaginationPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "nav">;
+/**
+ * The list of pages and steps. Its default slot gets `{ state }`, whose `items` are the pages to show.
+ * @stable
+ */
+declare const PaginationList: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/pagination").PaginationState>>>, 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/pagination").PaginationState>>>, "ul">;
+/**
+ * One entry in the list, around a link, a step or an ellipsis.
+ * @stable
+ */
+declare const PaginationItem: 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<{}>>, "li">;
+/**
+ * A gap in the range. Hidden from screen readers, since the links around it
+ * say which pages there are. Shows "…" unless it has content.
+ * @stable
+ */
+declare const PaginationEllipsis: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => 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) & {
+    state: {};
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/pagination").PaginationPrimitive, "ellipsis">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+/**
+ * A page. The current one has `aria-current="page"`. Shows its number unless it has content.
+ * @stable
+ */
+declare const PaginationLink: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    page: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>, (() => 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) & {
+    state: NoInfer<import("@ui-sdk/core/pagination").PaginationLinkState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    page: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/pagination").PaginationPrimitive, "link">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "a">;
+/**
+ * Goes to the previous page. `aria-disabled` on the first page, where it stays focusable.
+ * @stable
+ */
+declare const PaginationPrevious: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => 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) & {
+    state: NoInfer<import("@ui-sdk/core/pagination").PaginationStepState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/pagination").PaginationPrimitive, "previous">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "a">;
+/**
+ * Goes to the next page. `aria-disabled` on the last page, where it stays focusable.
+ * @stable
+ */
+declare const PaginationNext: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => 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) & {
+    state: NoInfer<import("@ui-sdk/core/pagination").PaginationStepState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/pagination").PaginationPrimitive, "next">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "a">;
+/**
+ * Goes to the first page. `aria-disabled` there.
+ * @stable
+ */
+declare const PaginationFirst: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => 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) & {
+    state: NoInfer<import("@ui-sdk/core/pagination").PaginationStepState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/pagination").PaginationPrimitive, "first">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "a">;
+/**
+ * Goes to the last page. `aria-disabled` there.
+ * @stable
+ */
+declare const PaginationLast: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => 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) & {
+    state: NoInfer<import("@ui-sdk/core/pagination").PaginationStepState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/pagination").PaginationPrimitive, "last">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "a">;
+export { createPaginationController, paginationRange, } from "@ui-sdk/core/pagination";
+export type { PaginationChangeOptions, PaginationController, PaginationLinkProps, PaginationLinkState, PaginationOptions, PaginationPageChangeReason, PaginationPrimitive, PaginationRangeItem, PaginationRangeOptions, PaginationState, PaginationStepState, } from "@ui-sdk/core/pagination";
+export { Pagination, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, };

package/dist/pagination.js

@@ -0,0 +1,146 @@
+// src/pagination.ts
+import {
+  pagination as paginationPrimitive
+} from "@ui-sdk/core/pagination";
+import {
+  defineComponent,
+  inject,
+  provide
+} from "vue";
+import { slotContent } from "./children.js";
+import { createParts, withElement } from "./create-parts.js";
+import { orModel, usePart, usePrimitive } from "./use-primitive.js";
+import {
+  createPaginationController,
+  paginationRange
+} from "@ui-sdk/core/pagination";
+var TagKey = /* @__PURE__ */ Symbol("pagination-tag");
+function useTag(part) {
+  const tag = inject(TagKey, null);
+  if (!tag) {
+    throw new Error(`${part} must be used inside <Pagination>.`);
+  }
+  return tag;
+}
+var parts = createParts(paginationPrimitive, { list: "ul", item: "li" });
+var Pagination = withElement(
+  "nav",
+  defineComponent({
+    name: "Pagination",
+    inheritAttrs: false,
+    props: {
+      page: { type: Number, default: void 0 },
+      modelValue: { type: Number, default: void 0 },
+      defaultPage: { type: Number, default: void 0 },
+      pageCount: { type: Number, default: void 0 },
+      total: { type: Number, default: void 0 },
+      pageSize: { type: Number, default: void 0 },
+      siblings: { type: Number, default: void 0 },
+      boundaries: { type: Number, default: void 0 },
+      getHref: Function,
+      controller: Object,
+      debug: { type: Boolean, default: void 0 }
+    },
+    emits: {
+      "update:page": (_page) => true,
+      "update:modelValue": (_page) => true,
+      pageChange: (_page, _details) => true
+    },
+    slots: Object,
+    setup(props, { emit }) {
+      const pagination = usePrimitive(paginationPrimitive, () => ({
+        page: orModel(props.page, props.modelValue),
+        defaultPage: props.defaultPage,
+        pageCount: props.pageCount,
+        total: props.total,
+        pageSize: props.pageSize,
+        siblings: props.siblings,
+        boundaries: props.boundaries,
+        getHref: props.getHref,
+        controller: props.controller,
+        debug: props.debug,
+        // The change event runs first, so canceling it also keeps v-model as it was.
+        onPageChange: (page, details) => {
+          emit("pageChange", page, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:page", page);
+          emit("update:modelValue", page);
+        }
+      }));
+      provide(TagKey, () => props.getHref ? "a" : "button");
+      return usePart(pagination, "root", void 0, void 0, "nav");
+    }
+  })
+);
+var PaginationList = parts.List;
+var PaginationItem = parts.Item;
+var PaginationEllipsis = withElement(
+  "span",
+  defineComponent({
+    name: "PaginationEllipsis",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      return usePart(paginationPrimitive, "ellipsis", void 0, void 0, {
+        tag: "span",
+        children: (state) => slotContent(slots.default, { state }) ?? "\u2026"
+      });
+    }
+  })
+);
+var PaginationLink = withElement(
+  "a",
+  defineComponent({
+    name: "PaginationLink",
+    inheritAttrs: false,
+    props: { page: { type: Number, required: true } },
+    slots: Object,
+    setup(props, { slots }) {
+      const tag = useTag("PaginationLink");
+      const part = () => ({ page: props.page, id: String(props.page) });
+      return usePart(paginationPrimitive, "link", part, void 0, {
+        get tag() {
+          return tag();
+        },
+        children: (state) => slotContent(slots.default, { state }) ?? String(props.page)
+      });
+    }
+  })
+);
+function stepPart(name, slot) {
+  return withElement(
+    "a",
+    defineComponent({
+      name,
+      inheritAttrs: false,
+      slots: Object,
+      setup() {
+        const tag = useTag(name);
+        return usePart(paginationPrimitive, slot, void 0, void 0, {
+          get tag() {
+            return tag();
+          }
+        });
+      }
+    })
+  );
+}
+var PaginationPrevious = stepPart("PaginationPrevious", "previous");
+var PaginationNext = stepPart("PaginationNext", "next");
+var PaginationFirst = stepPart("PaginationFirst", "first");
+var PaginationLast = stepPart("PaginationLast", "last");
+export {
+  Pagination,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationItem,
+  PaginationLast,
+  PaginationLink,
+  PaginationList,
+  PaginationNext,
+  PaginationPrevious,
+  createPaginationController,
+  paginationRange
+};

package/dist/password-input.d.ts

@@ -0,0 +1,144 @@
+import type { ChangeDetails } from "@ui-sdk/core";
+import { type InputValueChangeReason, type PasswordInputController, type PasswordInputOptions, type PasswordInputVisibleChangeReason } from "@ui-sdk/core/password-input";
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * Holds the field and its toggle. Presses on its own text and icons focus the field.
+ * @stable
+ */
+declare const PasswordInput: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultVisible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    autoComplete: PropType<PasswordInputOptions["autoComplete"]>;
+    name: StringConstructor;
+    form: StringConstructor;
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: PropType<PasswordInputController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => 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) & {
+    state: NoInfer<import("@ui-sdk/core/password-input").PasswordInputState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: string) => true;
+    "update:modelValue": (_value: string) => true;
+    valueChange: (_value: string, _details: ChangeDetails<InputValueChangeReason>) => true;
+    "update:visible": (_visible: boolean) => true;
+    visibleChange: (_visible: boolean, _details: ChangeDetails<PasswordInputVisibleChangeReason>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultVisible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    autoComplete: PropType<PasswordInputOptions["autoComplete"]>;
+    name: StringConstructor;
+    form: StringConstructor;
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: PropType<PasswordInputController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
+    "onUpdate:value"?: ((_value: string) => any) | undefined;
+    onValueChange?: ((_value: string, _details: ChangeDetails<InputValueChangeReason>) => any) | undefined;
+    "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
+    onVisibleChange?: ((_visible: boolean, _details: ChangeDetails<PasswordInputVisibleChangeReason>) => any) | undefined;
+}>, {
+    value: string;
+    disabled: boolean;
+    debug: boolean;
+    defaultValue: string;
+    required: boolean;
+    visible: boolean;
+    readOnly: boolean;
+    modelValue: string;
+    defaultVisible: boolean;
+}, PartSlots<import("@ui-sdk/core/password-input").PasswordInputPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * The native <input>. Its type follows whether the password is shown, and
+ * form attributes come from <PasswordInput>.
+ * @stable
+ */
+declare const PasswordInputControl: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: StringConstructor;
+}>, (() => 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) & {
+    state: NoInfer<import("@ui-sdk/core/password-input").PasswordInputState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: StringConstructor;
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/password-input").PasswordInputPrimitive, "control">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "input">;
+/**
+ * Shows and hides the password. Name it by what it does, like "Show password":
+ * it's a toggle button, and `aria-pressed` says whether the password is shown.
+ * @stable
+ */
+declare const PasswordInputToggle: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/password-input").PasswordInputState>>>, 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/password-input").PasswordInputState>>>, "button">;
+export { createPasswordInputController } from "@ui-sdk/core/password-input";
+export type { InputValueChangeReason, PasswordInputController, PasswordInputOptions, PasswordInputPrimitive, PasswordInputState, PasswordInputVisibleChangeReason, } from "@ui-sdk/core/password-input";
+export { PasswordInput, PasswordInputControl, PasswordInputToggle };

package/dist/password-input.js

@@ -0,0 +1,134 @@
+// src/password-input.ts
+import {
+  passwordInput as passwordInputPrimitive
+} from "@ui-sdk/core/password-input";
+import {
+  defineComponent,
+  inject,
+  provide
+} from "vue";
+import { useFieldControl, useFieldControlId } from "./field-context.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  orModel,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { readOnlyOf } from "./text-control.js";
+import { createPasswordInputController } from "@ui-sdk/core/password-input";
+var ControlKey = /* @__PURE__ */ Symbol(
+  "password-input-control"
+);
+var parts = createParts(passwordInputPrimitive, { toggle: "button" });
+var PasswordInput = withElement(
+  "div",
+  defineComponent({
+    name: "PasswordInput",
+    inheritAttrs: false,
+    props: {
+      value: { type: String, default: void 0 },
+      modelValue: { type: String, default: void 0 },
+      defaultValue: { type: String, default: void 0 },
+      visible: optionalBoolean,
+      defaultVisible: optionalBoolean,
+      autoComplete: String,
+      name: String,
+      form: String,
+      required: optionalBoolean,
+      disabled: optionalBoolean,
+      readOnly: optionalBoolean,
+      controller: Object,
+      debug: optionalBoolean
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true,
+      "update:visible": (_visible) => true,
+      visibleChange: (_visible, _details) => true
+    },
+    slots: Object,
+    setup(props, { attrs, emit }) {
+      const field = useFieldControl();
+      const controlId = useFieldControlId();
+      const passwordInput = usePrimitive(passwordInputPrimitive, () => ({
+        value: orModel(props.value, props.modelValue),
+        defaultValue: props.defaultValue,
+        visible: props.visible,
+        defaultVisible: props.defaultVisible,
+        autoComplete: props.autoComplete,
+        name: props.name ?? field?.name(),
+        form: props.form,
+        required: props.required,
+        disabled: props.disabled || field?.disabled(),
+        readOnly: readOnlyOf(props, attrs),
+        controller: props.controller,
+        controlId,
+        debug: props.debug,
+        // The change events run first, so canceling one also keeps v-model as it was.
+        onValueChange: (value, details) => {
+          emit("valueChange", value, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:value", value);
+          emit("update:modelValue", value);
+        },
+        onVisibleChange: (visible, details) => {
+          emit("visibleChange", visible, details);
+          if (!details.canceled) {
+            emit("update:visible", visible);
+          }
+        }
+      }));
+      provide(ControlKey, {
+        field,
+        value: () => orModel(props.value, props.modelValue),
+        defaultValue: () => props.defaultValue
+      });
+      return usePart(passwordInput, "root");
+    }
+  })
+);
+var PasswordInputControl = withElement(
+  "input",
+  defineComponent({
+    name: "PasswordInputControl",
+    inheritAttrs: false,
+    props: { id: String },
+    slots: Object,
+    setup(props, { attrs }) {
+      const context = inject(ControlKey);
+      if (!context) {
+        throw new Error(
+          "PasswordInputControl must be used inside <PasswordInput>."
+        );
+      }
+      const element = () => {
+        const value = context.value();
+        return {
+          ...attrs,
+          ...value !== void 0 ? { value } : { "^value": context.defaultValue() }
+        };
+      };
+      return usePart(
+        passwordInputPrimitive,
+        "control",
+        () => ({ id: props.id }),
+        element,
+        {
+          tag: "input",
+          extend: context.field?.props
+        }
+      );
+    }
+  })
+);
+var PasswordInputToggle = parts.Toggle;
+export {
+  PasswordInput,
+  PasswordInputControl,
+  PasswordInputToggle,
+  createPasswordInputController
+};