@skdx/vue 0.27.0 → 0.29.0

package/dist/file-upload/context.d.ts

@@ -1,19 +1,13 @@
 import type { ComputedRef, InjectionKey, Ref } from 'vue';
-/**
- * Per-file upload status. `SkdxFileUpload` performs no transport of its own,
- * so this is pushed onto `SkdxFileUploadItem` by whoever owns the upload.
- */
+/** Per-file upload status, owned by the component's parent rather than by FileUpload itself. */
 export type FileUploadFileStatus = 'idle' | 'uploading' | 'complete' | 'error';
-/**
- * Why one file was refused. Built-in codes are `file-invalid-type` (fails
- * `accept`), `file-too-large` / `file-too-small` (fails `maxFileSize` /
- * `minFileSize`), and `too-many-files` (would exceed `maxFiles`); a `validate`
- * callback contributes its own codes alongside them.
- */
+/** Where the device camera should open, when the root's `capture` is set. */
+export type FileUploadCapture = 'user' | 'environment';
+/** A file rejection with its reasons, from a built-in code or a custom `validator` code. */
 export interface FileUploadRejection {
-    /** The file that was refused. It is never added to the file list. */
+    /** Rejected file (not added to list). */
     file: File;
-    /** Every reason it was refused, built-in codes first. Never empty. */
+    /** Rejection reasons (built-in codes first, never empty). */
     errors: string[];
 }
 /** @internal Injection key a FileUpload provides so its parts can read/drive shared state. */
@@ -21,26 +15,70 @@ export interface FileUploadContext {
     inputRef: Ref<HTMLInputElement | null>;
     files: ComputedRef<File[]>;
     disabled: ComputedRef<boolean>;
+    /** Selection shown but cannot be changed. */
+    readOnly: ComputedRef<boolean>;
     accept: ComputedRef<string | undefined>;
     multiple: ComputedRef<boolean>;
+    /** Forwarded to input as `webkitdirectory`. */
+    directory: ComputedRef<boolean>;
+    /** Forwarded to input as `capture`. */
+    capture: ComputedRef<FileUploadCapture | undefined>;
     addFiles: (files: FileList | File[]) => void;
-    removeFile: (index: number) => void;
+    /** Remove one file by identity. */
+    removeFile: (file: File) => void;
+    /** Empty file list. */
+    clearFiles: () => void;
     openPicker: () => void;
+    /** Generate delete button accessible name from file name. */
+    removeLabel: ComputedRef<(fileName: string) => string>;
+    /** Label id (points to mounted `SkdxFileUploadLabel`; `aria-labelledby`). */
+    labelId: string;
+    /** Whether `SkdxFileUploadLabel` is mounted (prevents dangling IDREF). */
+    labelPresent: Ref<boolean>;
+    /**
+     * Description id for required/validity state. Only exists while `required`,
+     * so reference is withheld otherwise (dangling IDREF is *no* description).
+     */
+    descriptionId: string;
+    /**
+     * Whether root is `required`. Conveyed via `descriptionId` (not
+     * `aria-required` / `aria-invalid` which don't work on `role="button"`).
+     */
+    required: ComputedRef<boolean>;
+    /**
+     * Whether field fails `required` constraint (required with no files).
+     * Dropzone publishes `data-invalid` from this.
+     */
+    invalid: ComputedRef<boolean>;
 }
-/** @internal Injection key the FileUpload root provides so its Dropzone, Trigger, and file List share the file collection and add/remove/open-picker actions. */
+/**
+ * Dropzone description conveying required/missing, since `role="button"` supports neither `aria-required` nor `aria-invalid`.
+ * @internal
+ */
+export declare function requiredDescription(invalid: boolean): string;
+/** @internal Injection key for FileUpload parts (Dropzone, Trigger, List). */
 export declare const FILE_UPLOAD_CONTEXT: InjectionKey<FileUploadContext>;
-/** @internal Returns whether a File satisfies the accept patterns, matching by extension, wildcard MIME (type/*), or exact MIME; true when accept is empty. */
+/** @internal What one `SkdxFileUploadItem` publishes to the parts nested inside it. */
+export interface FileUploadItemContext {
+    /** The file this row shows, and the identity its delete button removes by. */
+    file: ComputedRef<File>;
+}
+/** @internal Injection key for parts nested in one Item (Name, SizeText, Preview, Delete). */
+export declare const FILE_UPLOAD_ITEM_CONTEXT: InjectionKey<FileUploadItemContext>;
+/** @internal Removal announcement: names a single file, counts multiple rather than naming them all. */
+export declare function removalAnnouncement(fileNames: readonly string[]): string;
+/** @internal Focuses the next delete button (or previous, or dropzone/trigger) before removal, so focus never drops to `<body>`. */
+export declare function moveFocusBeforeRemoval(button: Element): void;
+/** @internal Whether file matches accept patterns (extension, wildcard MIME, or exact). */
 export declare function matchesAccept(file: File, accept?: string): boolean;
-/** @internal The checks the `validate` prop and the size/type props feed. */
+/** @internal The checks the `validator` prop and the size/type props feed. */
 export interface FileUploadValidateOptions {
-    accept?: string;
-    maxFileSize?: number;
-    minFileSize?: number;
-    validate?: (file: File) => string[] | null | undefined;
+    accept?: string | undefined;
+    maxFileSize?: number | undefined;
+    minFileSize?: number | undefined;
+    validator?: ((file: File) => string[] | null | undefined) | undefined;
 }
-/**
- * @internal Every reason one incoming file is refused, in contract order.
- * Empty means the file is accepted. `too-many-files` is not decided here: it
- * depends on how many files were already accepted in this same batch.
- */
+/** @internal All rejection reasons for a file; empty means accepted. `too-many-files` is not included, since it depends on batch state. */
 export declare function fileErrors(file: File, options: FileUploadValidateOptions): string[];
+/** @internal Batch commit announcement of added count and deduplicated rejection reasons. */
+export declare function commitAnnouncement(added: number, rejectedReasons: readonly string[]): string;

package/dist/file-upload/context.js

@@ -1 +1 @@
-var e=/* @__PURE__ */Symbol("skdx-file-upload-context");function t(e,t){if(!t)return!0;const i=t.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean);if(0===i.length)return!0;const s=e.name.toLowerCase(),o=e.type.toLowerCase();return i.some(e=>e.startsWith(".")?s.endsWith(e):e.endsWith("/*")?o.startsWith(e.slice(0,-1)):o===e)}function i(e,i){const s=[];return t(e,i.accept)||s.push("file-invalid-type"),void 0!==i.maxFileSize&&e.size>i.maxFileSize&&s.push("file-too-large"),void 0!==i.minFileSize&&e.size<i.minFileSize&&s.push("file-too-small"),s.push(...i.validate?.(e)??[]),s}export{e as FILE_UPLOAD_CONTEXT,i as fileErrors,t as matchesAccept};
+function e(e){return e?"Required. No file selected":"Required"}var t=/* @__PURE__ */Symbol("skdx-file-upload-context"),i=/* @__PURE__ */Symbol("skdx-file-upload-item-context");function o(e){return 0===e.length?"":1===e.length?`${e[0]} removed`:`${e.length} files removed`}function n(e){const t=e.closest('[data-part="root"]');if(!t)return;const i=[...t.querySelectorAll('[data-part="item-delete"]')],o=i.indexOf(e);(i[o+1]??i[o-1]??t.querySelector('[data-part="dropzone"], [data-part="trigger"]'))?.focus()}function r(e,t){if(!t)return!0;const i=t.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean);if(0===i.length)return!0;const o=e.name.toLowerCase(),n=e.type.toLowerCase();return i.some(e=>e.startsWith(".")?o.endsWith(e):e.endsWith("/*")?n.startsWith(e.slice(0,-1)):n===e)}function s(e,t){const i=[];return r(e,t.accept)||i.push("file-invalid-type"),void 0!==t.maxFileSize&&e.size>t.maxFileSize&&i.push("file-too-large"),void 0!==t.minFileSize&&e.size<t.minFileSize&&i.push("file-too-small"),i.push(...t.validator?.(e)??[]),i}function l(e,t){const i=[];if(e>0&&i.push(`${e} ${1===e?"file":"files"} added`),t.length>0){const e=[...new Set(t)].join(", "),o=t.length;i.push(`${o} ${1===o?"file":"files"} refused: ${e}`)}return i.join(". ")}export{t as FILE_UPLOAD_CONTEXT,i as FILE_UPLOAD_ITEM_CONTEXT,l as commitAnnouncement,s as fileErrors,r as matchesAccept,n as moveFocusBeforeRemoval,o as removalAnnouncement,e as requiredDescription};

package/dist/file-upload/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./FileUpload.vue.cjs"),l=require("./FileUploadDropzone.vue.cjs"),r=require("./FileUploadTrigger.vue.cjs"),i=require("./FileUploadInput.vue.cjs"),d=require("./FileUploadItem.vue.cjs"),o=require("./FileUploadItemDelete.vue.cjs");exports.SkdxFileUpload=e.default;exports.SkdxFileUploadDropzone=l.default;exports.SkdxFileUploadInput=i.default;exports.SkdxFileUploadItem=d.default;exports.SkdxFileUploadItemDelete=o.default;exports.SkdxFileUploadTrigger=r.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./FileUpload.vue.cjs");exports.SkdxFileUpload=e.default;

package/dist/file-upload/index.d.cts

@@ -1,7 +1,2 @@
 export { default as SkdxFileUpload } from './FileUpload.vue.cjs';
-export { default as SkdxFileUploadDropzone } from './FileUploadDropzone.vue.cjs';
-export { default as SkdxFileUploadTrigger } from './FileUploadTrigger.vue.cjs';
-export { default as SkdxFileUploadInput } from './FileUploadInput.vue.cjs';
-export { default as SkdxFileUploadItem } from './FileUploadItem.vue.cjs';
-export { default as SkdxFileUploadItemDelete } from './FileUploadItemDelete.vue.cjs';
-export type { FileUploadFileStatus, FileUploadRejection } from './context.cjs';
+export type { FileUploadCapture, FileUploadFileStatus, FileUploadRejection } from './context.cjs';

package/dist/file-upload/index.d.ts

@@ -1,7 +1,2 @@
 export { default as SkdxFileUpload } from './FileUpload.vue.js';
-export { default as SkdxFileUploadDropzone } from './FileUploadDropzone.vue.js';
-export { default as SkdxFileUploadTrigger } from './FileUploadTrigger.vue.js';
-export { default as SkdxFileUploadInput } from './FileUploadInput.vue.js';
-export { default as SkdxFileUploadItem } from './FileUploadItem.vue.js';
-export { default as SkdxFileUploadItemDelete } from './FileUploadItemDelete.vue.js';
-export type { FileUploadFileStatus, FileUploadRejection } from './context.js';
+export type { FileUploadCapture, FileUploadFileStatus, FileUploadRejection } from './context.js';

package/dist/file-upload/index.js

@@ -1 +1 @@
-import e from"./FileUpload.vue.js";import o from"./FileUploadDropzone.vue.js";import l from"./FileUploadTrigger.vue.js";import p from"./FileUploadInput.vue.js";import i from"./FileUploadItem.vue.js";import r from"./FileUploadItemDelete.vue.js";export{e as SkdxFileUpload,o as SkdxFileUploadDropzone,p as SkdxFileUploadInput,i as SkdxFileUploadItem,r as SkdxFileUploadItemDelete,l as SkdxFileUploadTrigger};
+import o from"./FileUpload.vue.js";export{o as SkdxFileUpload};

package/dist/file-upload/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./FileUploadDropzone.vue.cjs"),l=require("./FileUploadInput.vue.cjs"),r=require("./FileUploadItem.vue.cjs"),i=require("./FileUploadItemDelete.vue.cjs"),d=require("./FileUploadItemGroup.vue.cjs"),o=require("./FileUploadItemName.vue.cjs"),t=require("./FileUploadItemPreview.vue.cjs"),a=require("./FileUploadItemSizeText.vue.cjs"),u=require("./FileUploadTrigger.vue.cjs"),p=require("./FileUpload.vue.cjs"),q=require("./FileUploadClear.vue.cjs"),F=require("./FileUploadLabel.vue.cjs");exports.SkdxFileUpload=p.default;exports.SkdxFileUploadClear=q.default;exports.SkdxFileUploadDropzone=e.default;exports.SkdxFileUploadInput=l.default;exports.SkdxFileUploadItem=r.default;exports.SkdxFileUploadItemDelete=i.default;exports.SkdxFileUploadItemGroup=d.default;exports.SkdxFileUploadItemName=o.default;exports.SkdxFileUploadItemPreview=t.default;exports.SkdxFileUploadItemSizeText=a.default;exports.SkdxFileUploadLabel=F.default;exports.SkdxFileUploadTrigger=u.default;

package/dist/file-upload/primitives.d.cts

@@ -0,0 +1,35 @@
+/**
+ * Advanced primitives for `SkdxFileUpload` — the parts the recipe composes into a custom structure.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxFileUpload, SkdxFileUploadDropzone, SkdxFileUploadItem, SkdxFileUploadItemDelete, SkdxFileUploadItemGroup, SkdxFileUploadItemName } from '@skdx/vue/primitives/file-upload';
+ * </script>
+ *
+ * <template>
+ *   <SkdxFileUpload multiple accept="image/*">
+ *     <SkdxFileUploadDropzone>Drag files here</SkdxFileUploadDropzone>
+ *     <SkdxFileUploadItemGroup>
+ *       <SkdxFileUploadItem v-for="file in files" :key="file.name" :file="file">
+ *         <SkdxFileUploadItemName />
+ *         <SkdxFileUploadItemDelete />
+ *       </SkdxFileUploadItem>
+ *     </SkdxFileUploadItemGroup>
+ *   </SkdxFileUpload>
+ * </template>
+ * ```
+ */
+export { default as SkdxFileUpload } from './FileUpload.vue.cjs';
+export { default as SkdxFileUploadDropzone } from './FileUploadDropzone.vue.cjs';
+export { default as SkdxFileUploadTrigger } from './FileUploadTrigger.vue.cjs';
+export { default as SkdxFileUploadInput } from './FileUploadInput.vue.cjs';
+export { default as SkdxFileUploadItem } from './FileUploadItem.vue.cjs';
+export { default as SkdxFileUploadItemDelete } from './FileUploadItemDelete.vue.cjs';
+export { default as SkdxFileUploadItemGroup } from './FileUploadItemGroup.vue.cjs';
+export { default as SkdxFileUploadItemName } from './FileUploadItemName.vue.cjs';
+export { default as SkdxFileUploadItemPreview } from './FileUploadItemPreview.vue.cjs';
+export { default as SkdxFileUploadItemSizeText } from './FileUploadItemSizeText.vue.cjs';
+export { default as SkdxFileUploadClear } from './FileUploadClear.vue.cjs';
+export { default as SkdxFileUploadLabel } from './FileUploadLabel.vue.cjs';
+export type { FileUploadCapture, FileUploadFileStatus, FileUploadRejection } from './context.cjs';

package/dist/file-upload/primitives.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Advanced primitives for `SkdxFileUpload` — the parts the recipe composes into a custom structure.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxFileUpload, SkdxFileUploadDropzone, SkdxFileUploadItem, SkdxFileUploadItemDelete, SkdxFileUploadItemGroup, SkdxFileUploadItemName } from '@skdx/vue/primitives/file-upload';
+ * </script>
+ *
+ * <template>
+ *   <SkdxFileUpload multiple accept="image/*">
+ *     <SkdxFileUploadDropzone>Drag files here</SkdxFileUploadDropzone>
+ *     <SkdxFileUploadItemGroup>
+ *       <SkdxFileUploadItem v-for="file in files" :key="file.name" :file="file">
+ *         <SkdxFileUploadItemName />
+ *         <SkdxFileUploadItemDelete />
+ *       </SkdxFileUploadItem>
+ *     </SkdxFileUploadItemGroup>
+ *   </SkdxFileUpload>
+ * </template>
+ * ```
+ */
+export { default as SkdxFileUpload } from './FileUpload.vue.js';
+export { default as SkdxFileUploadDropzone } from './FileUploadDropzone.vue.js';
+export { default as SkdxFileUploadTrigger } from './FileUploadTrigger.vue.js';
+export { default as SkdxFileUploadInput } from './FileUploadInput.vue.js';
+export { default as SkdxFileUploadItem } from './FileUploadItem.vue.js';
+export { default as SkdxFileUploadItemDelete } from './FileUploadItemDelete.vue.js';
+export { default as SkdxFileUploadItemGroup } from './FileUploadItemGroup.vue.js';
+export { default as SkdxFileUploadItemName } from './FileUploadItemName.vue.js';
+export { default as SkdxFileUploadItemPreview } from './FileUploadItemPreview.vue.js';
+export { default as SkdxFileUploadItemSizeText } from './FileUploadItemSizeText.vue.js';
+export { default as SkdxFileUploadClear } from './FileUploadClear.vue.js';
+export { default as SkdxFileUploadLabel } from './FileUploadLabel.vue.js';
+export type { FileUploadCapture, FileUploadFileStatus, FileUploadRejection } from './context.js';

package/dist/file-upload/primitives.js

@@ -0,0 +1 @@
+import e from"./FileUploadDropzone.vue.js";import o from"./FileUploadInput.vue.js";import l from"./FileUploadItem.vue.js";import p from"./FileUploadItemDelete.vue.js";import a from"./FileUploadItemGroup.vue.js";import i from"./FileUploadItemName.vue.js";import m from"./FileUploadItemPreview.vue.js";import r from"./FileUploadItemSizeText.vue.js";import d from"./FileUploadTrigger.vue.js";import t from"./FileUpload.vue.js";import s from"./FileUploadClear.vue.js";import F from"./FileUploadLabel.vue.js";export{t as SkdxFileUpload,s as SkdxFileUploadClear,e as SkdxFileUploadDropzone,o as SkdxFileUploadInput,l as SkdxFileUploadItem,p as SkdxFileUploadItemDelete,a as SkdxFileUploadItemGroup,i as SkdxFileUploadItemName,m as SkdxFileUploadItemPreview,r as SkdxFileUploadItemSizeText,F as SkdxFileUploadLabel,d as SkdxFileUploadTrigger};

package/dist/floating-panel/FloatingPanel.vue.d.cts

@@ -1,176 +1,130 @@
-import { type FloatingPanelGeometry, type FloatingPanelGesture, type FloatingPanelPosition, type FloatingPanelSize, type FloatingPanelStage } from './context.cjs';
+import type { FloatingPanelGeometry, FloatingPanelGesture, FloatingPanelPosition, FloatingPanelSize, FloatingPanelStage } from './context.cjs';
 /**
- * The Vue implementation of the shared FloatingPanel contract (see
- * `@skdx/shared`'s `floatingPanelContract`). Root of a draggable, resizable,
- * **non-modal** floating panel — the movable window pattern. Owns open state,
- * position, size and stage, and hands them down to `SkdxFloatingPanelTrigger` /
- * `SkdxFloatingPanelPortal` / `SkdxFloatingPanelContent` /
- * `SkdxFloatingPanelHeader` / `SkdxFloatingPanelTitle` /
- * `SkdxFloatingPanelCloseTrigger` / `SkdxFloatingPanelResizeTrigger` /
- * `SkdxFloatingPanelStageTrigger` via context. Renders no DOM element itself.
- *
- * Non-modal is not a default here, it is the point: there is no backdrop, no
- * focus trap, and no scroll lock, so the page behind the panel stays fully
- * usable while it is open. Focus still returns to the trigger on close, but
- * only when it would otherwise be stranded.
- *
- * All four of `open`, `position`, `size` and `stage` work controlled
- * (`v-model:open`, `v-model:position`, `v-model:size`, `v-model:stage`) or
- * uncontrolled (`default-open`, `default-position`, `default-size`,
- * `default-stage`), independently of one another.
+ * A draggable, resizable, non-modal floating panel drawing the derived anatomy: portalled panel, header, and body slot.
  *
  * @example
  * ```vue
- * <SkdxFloatingPanel :default-position="{ x: 40, y: 40 }">
- *   <SkdxFloatingPanelTrigger>Open panel</SkdxFloatingPanelTrigger>
- *   <SkdxFloatingPanelPortal>
- *     <SkdxFloatingPanelContent>
- *       <SkdxFloatingPanelHeader aria-label="Drag to move panel">
- *         <SkdxFloatingPanelTitle>Inspector</SkdxFloatingPanelTitle>
- *         <SkdxFloatingPanelCloseTrigger>Close</SkdxFloatingPanelCloseTrigger>
- *       </SkdxFloatingPanelHeader>
- *       <p>Panel body.</p>
- *       <SkdxFloatingPanelResizeTrigger direction="se" aria-label="Resize panel" />
- *     </SkdxFloatingPanelContent>
- *   </SkdxFloatingPanelPortal>
+ * <SkdxFloatingPanel v-model:open="open" title="Layers">
+ *   <p>Panel body.</p>
  * </SkdxFloatingPanel>
  * ```
  */
 type __VLS_Props = {
+    /** Whether the panel is open, for controlled usage via `v-model:open`. @default undefined — uncontrolled. */
+    open?: boolean | undefined;
+    /** Whether the panel is initially open, for uncontrolled usage. @default false — the panel is closed until `open` says otherwise.*/
+    defaultOpen?: boolean;
     /**
-     * Whether the panel is open, for controlled usage via `v-model:open`.
-     * @default undefined — uncontrolled, the panel tracks its own open state internally.
+     * The panel's heading, rendered in the derived header and omitting `aria-labelledby` when absent.
+     * @default undefined — no title is rendered.
      */
-    open?: boolean;
+    title?: string | undefined;
     /**
-     * Whether the panel is initially open, for uncontrolled usage.
-     * @default false — the panel is closed until the trigger is pressed.
+     * Window controls the derived header renders, one button per entry, each switching the panel to its `stage`.
+     * @default [] — a panel that asked for no window controls gets none.
      */
-    defaultOpen?: boolean;
+    stages?: readonly {
+        stage: FloatingPanelStage;
+        label: string;
+    }[];
+    /** Whether the derived header renders a close button. @default true */
+    dismissible?: boolean;
     /**
-     * The panel's top-left corner in CSS pixels, measured from the boundary's
-     * top-left, for controlled usage via `v-model:position`. Pair it with
-     * `@position-change` or the panel will refuse to move.
+     * The panel's top-left corner in CSS pixels, for controlled usage via `v-model:position`.
      * @default undefined — uncontrolled, the panel tracks its own position internally.
      */
-    position?: FloatingPanelPosition;
-    /**
-     * Where the panel starts, for uncontrolled usage.
-     * @default { x: 0, y: 0 } — the top-left corner of the boundary.
-     */
+    position?: FloatingPanelPosition | undefined;
+    /** Where the panel starts, for uncontrolled usage. @default { x: 0, y: 0 } — the boundary's top-left corner. */
     defaultPosition?: FloatingPanelPosition;
     /**
      * The panel's box in CSS pixels, for controlled usage via `v-model:size`.
-     * Pair it with `@size-change` or the panel will refuse to resize.
      * @default undefined — uncontrolled, the panel tracks its own size internally.
      */
-    size?: FloatingPanelSize;
-    /**
-     * The panel's starting box, for uncontrolled usage.
-     * @default { width: 320, height: 240 }
-     */
+    size?: FloatingPanelSize | undefined;
+    /** The panel's starting box, for uncontrolled usage. @default { width: 320, height: 240 } */
     defaultSize?: FloatingPanelSize;
-    /**
-     * Smallest box the panel can be resized to. Every resize is clamped to it,
-     * so a consumer never has to defend against a zero-height panel.
-     * @default { width: 160, height: 120 }
-     */
+    /** Smallest box the panel can be resized to. @default { width: 160, height: 120 } */
     minSize?: FloatingPanelSize;
-    /**
-     * Largest box the panel can be resized to.
-     * @default { width: Infinity, height: Infinity } — only the boundary limits growth.
-     */
+    /** Largest box the panel can be resized to. @default { width: Infinity, height: Infinity } — only the boundary limits growth.*/
     maxSize?: FloatingPanelSize;
     /**
-     * Element the panel may not be dragged or resized out of. Position is
-     * measured from this element's top-left corner, so it must be the panel's
-     * containing block for the published geometry to line up.
+     * Element the panel may not be dragged or resized out of.
      * @default null — the viewport constrains the panel instead.
      */
-    boundary?: HTMLElement | null;
-    /**
-     * The panel's window state, for controlled usage via `v-model:stage`.
-     * @default undefined — uncontrolled, the panel tracks its own stage internally.
-     */
-    stage?: FloatingPanelStage;
-    /**
-     * The panel's starting window state, for uncontrolled usage.
-     * @default 'default' — the panel uses its own position and size.
-     */
+    boundary?: Element | null;
+    /** The panel's window state, for controlled usage via `v-model:stage`. @default undefined — uncontrolled. */
+    stage?: FloatingPanelStage | undefined;
+    /** The panel's starting window state, for uncontrolled usage. @default 'default' — the panel uses its own position and size.*/
     defaultStage?: FloatingPanelStage;
-    /**
-     * Whether the header can move the panel. `false` leaves the header
-     * focusable only if you make it so, and drops its `move` cursor.
-     * @default true — the header is a drag handle and a keyboard mover.
-     */
+    /** Whether the header can move the panel. @default true — a drag handle and keyboard mover. */
     draggable?: boolean;
     /**
-     * Whether resize triggers do anything. `false` makes every
-     * `SkdxFloatingPanelResizeTrigger` inert and non-focusable, so a fixed-size
-     * panel can still render its grips for visual symmetry.
-     * @default true — every grip resizes and takes a tab stop.
+     * Whether the panel can be resized; `false` also makes any hand-composed grip inert.
+     * @default true
      */
     resizable?: boolean;
     /**
-     * How far one arrow key moves or resizes the panel, in pixels.
-     * Shift+arrow uses ten times this.
+     * How far one arrow key moves or resizes the panel, in pixels. Shift+arrow uses ten times this.
      * @default 10 — one arrow key is a 10px nudge, one Shift+arrow a 100px jump.
      */
     step?: number;
     /**
-     * Freezes the panel's geometry: drag, resize and stage changes are all
-     * refused and their triggers leave the tab order. Opening and closing still
-     * work — a disabled panel is inert, not unreachable.
+     * Freezes the panel's geometry — drag, resize and stage changes are all refused. Opening/closing still work.
      * @default false — the panel is fully interactive.
      */
     disabled?: boolean;
     /**
-     * Words the polite live-region message announced once per drag or resize, on
-     * release. The numbers are already rounded to whole CSS pixels. Return `''`
-     * to announce nothing.
+     * Words the polite live-region message announced once per drag or resize on release.
      * @default undefined — the built-in English wording ("Panel moved to 40, 25").
      */
-    getGestureAnnouncement?: (gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string;
+    getGestureAnnouncement?: ((gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string) | undefined;
 };
-declare var __VLS_1: {};
+declare var __VLS_22: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (open: boolean) => any;
     "open-change": (open: boolean) => any;
+    "open-change-complete": (open: boolean) => any;
     "update:position": (position: FloatingPanelPosition) => any;
     "position-change": (position: FloatingPanelPosition) => any;
+    "position-commit": (position: FloatingPanelPosition) => any;
     "update:size": (size: FloatingPanelSize) => any;
     "size-change": (size: FloatingPanelSize) => any;
+    "size-commit": (size: FloatingPanelSize) => any;
     "update:stage": (stage: FloatingPanelStage) => any;
     "stage-change": (stage: FloatingPanelStage) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:open"?: ((open: boolean) => any) | undefined;
-    "onOpen-change"?: ((open: boolean) => any) | undefined;
-    "onUpdate:position"?: ((position: FloatingPanelPosition) => any) | undefined;
-    "onPosition-change"?: ((position: FloatingPanelPosition) => any) | undefined;
-    "onUpdate:size"?: ((size: FloatingPanelSize) => any) | undefined;
-    "onSize-change"?: ((size: FloatingPanelSize) => any) | undefined;
-    "onUpdate:stage"?: ((stage: FloatingPanelStage) => any) | undefined;
-    "onStage-change"?: ((stage: FloatingPanelStage) => any) | undefined;
+    "onUpdate:open"?: (open: boolean) => any;
+    "onOpen-change"?: (open: boolean) => any;
+    "onOpen-change-complete"?: (open: boolean) => any;
+    "onUpdate:position"?: (position: FloatingPanelPosition) => any;
+    "onPosition-change"?: (position: FloatingPanelPosition) => any;
+    "onPosition-commit"?: (position: FloatingPanelPosition) => any;
+    "onUpdate:size"?: (size: FloatingPanelSize) => any;
+    "onSize-change"?: (size: FloatingPanelSize) => any;
+    "onSize-commit"?: (size: FloatingPanelSize) => any;
+    "onUpdate:stage"?: (stage: FloatingPanelStage) => any;
+    "onStage-change"?: (stage: FloatingPanelStage) => any;
 }>, {
     disabled: boolean;
-    open: boolean;
+    dismissible: boolean;
+    open: boolean | undefined;
     defaultOpen: boolean;
-    position: FloatingPanelPosition;
-    size: FloatingPanelSize;
-    boundary: HTMLElement | null;
     step: number;
+    draggable: boolean;
+    boundary: Element | null;
     resizable: boolean;
     defaultSize: FloatingPanelSize;
     minSize: FloatingPanelSize;
     maxSize: FloatingPanelSize;
+    stages: readonly {
+        stage: FloatingPanelStage;
+        label: string;
+    }[];
     defaultPosition: FloatingPanelPosition;
-    stage: FloatingPanelStage;
     defaultStage: FloatingPanelStage;
-    draggable: boolean;
-    getGestureAnnouncement: (gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;