@db-ux/v-core-components 5.5.0 → 5.6.1

package/dist/index.d.ts

@@ -44,6 +44,12 @@ export * from './components/custom-select-list-item/index.js';
 export * from './components/custom-select-list-item/model.js';
 export * from './components/custom-select-list/model.js';
 export * from './components/custom-select/model.js';
+export * from './components/dialog/index.js';
+export * from './components/dialog-footer/index.js';
+export * from './components/dialog-footer/model.js';
+export * from './components/dialog-header/index.js';
+export * from './components/dialog-header/model.js';
+export * from './components/dialog/model.js';
 export * from './components/divider/index.js';
 export * from './components/divider/model.js';
 export * from './components/drawer/index.js';
@@ -70,6 +76,8 @@ export * from './components/input/index.js';
 export * from './components/input/model.js';
 export * from './components/link/index.js';
 export * from './components/link/model.js';
+export * from './components/loading-indicator/index.js';
+export * from './components/loading-indicator/model.js';
 export * from './components/navigation/index.js';
 export * from './components/navigation-item/index.js';
 export * from './components/navigation-item/model.js';
@@ -78,6 +86,10 @@ export * from './components/notification/index.js';
 export * from './components/notification/model.js';
 export * from './components/page/index.js';
 export * from './components/page/model.js';
+export * from './components/pagination/index.js';
+export * from './components/pagination-item/index.js';
+export * from './components/pagination-item/model.js';
+export * from './components/pagination/model.js';
 export * from './components/popover/index.js';
 export * from './components/popover/model.js';
 export * from './components/radio/index.js';
@@ -128,7 +140,10 @@ export * from './components/tooltip/index.js';
 export * from './components/tooltip/model.js';
 export * from './shared/constants.js';
 export * from './shared/model.js';
+export * from './utils/dialog/index.js';
+export * from './utils/dialog/ponyfill.js';
 export * from './utils/document-click-listener.js';
+export * from './utils/document-keydown-listener.js';
 export * from './utils/document-scroll-listener.js';
 export * from './utils/floating-components.js';
 export * from './utils/index.js';

package/dist/shared/constants.d.ts

@@ -3,12 +3,14 @@ export declare const DEFAULT_LABEL: string;
 export declare const DEFAULT_PLACEHOLDER: string;
 export declare const DEFAULT_MESSAGE: string;
 export declare const DEFAULT_LABEL_ID_SUFFIX: string;
+export declare const DEFAULT_HEADING_ID_SUFFIX: string;
 export declare const DEFAULT_SELECT_ID_SUFFIX: string;
 export declare const DEFAULT_MESSAGE_ID_SUFFIX: string;
 export declare const DEFAULT_VALID_MESSAGE_ID_SUFFIX: string;
 export declare const DEFAULT_INVALID_MESSAGE_ID_SUFFIX: string;
 export declare const DEFAULT_PLACEHOLDER_ID_SUFFIX: string;
 export declare const DEFAULT_DATALIST_ID_SUFFIX: string;
+export declare const DEFAULT_PROGRESS_ID_SUFFIX: string;
 export declare const DEFAULT_VALID_MESSAGE: string;
 export declare const DEFAULT_INVALID_MESSAGE: string;
 export declare const DEFAULT_REMOVE: string;
@@ -21,6 +23,8 @@ export declare const DEFAULT_SCROLL_RIGHT: string;
 export declare const DEFAULT_ICON: string;
 export declare const DEFAULT_BURGER_MENU: string;
 export declare const DEFAULT_ROWS: number;
+export declare const DEFAULT_LOADING_TIMEOUT_ACTIVE: number;
+export declare const DEFAULT_LOADING_TIMEOUT: number;
 export declare const DEFAULT_CLOSE_BUTTON: string;
 export declare const MAIN_CONTENT_ID: string;
 export declare const DENSITY_CONST: string;

package/dist/shared/model.d.ts

@@ -178,10 +178,6 @@ export type PopoverDelayType = (typeof PopoverDelayList)[number];
 export declare const PopoverWidthList: readonly ["auto", "fixed"];
 export type PopoverWidthType = (typeof PopoverWidthList)[number];
 export type PopoverProps = {
-    /**
-     * Add a delay before showing the tooltip
-     */
-    delay?: PopoverDelayType;
     /**
      * Disable animation
      */
@@ -194,6 +190,12 @@ export type PopoverProps = {
      * If the floating element is inside a fixed container we might need to force absolute position
      */
     forceAbsolute?: boolean | string;
+} & DelayProps;
+export type DelayProps = {
+    /**
+     * Add a delay before showing the component
+     */
+    delay?: PopoverDelayType;
 };
 export type NameProps = {
     /**
@@ -486,6 +488,43 @@ export type CloseEventProps<T> = {
 export type CloseEventState<T> = {
     handleClose: (event?: T | void, forceClose?: boolean) => void;
 };
+export type CancelEventProps<T> = {
+    /**
+     * Called when the native cancel event fires (e.g. Escape key on a dialog).
+     * Call event.preventDefault() to veto the native close.
+     */
+    onCancel?: (event: GeneralEvent<T>) => void;
+    /**
+     * Called when the native cancel event fires (e.g. Escape key on a dialog).
+     * Call event.preventDefault() to veto the native close.
+     */
+    cancel?: (event: GeneralEvent<T>) => void;
+};
+/**
+ * Shared internal state for the native `<dialog>`-based components (DBDialog and
+ * DBDrawer). Both drive the same open/click/cancel handlers and the id fallback,
+ * so they extend this instead of duplicating the shape. The Escape-close fallback
+ * is registered at document scope (id held in `_documentKeydownListenerCallbackId`)
+ * rather than via an element `keydown` handler, so a non-modal dialog (which does
+ * not trap focus) still dismisses on Escape from an element outside it.
+ */
+export type DialogDrawerDefaultState = {
+    resetId: () => void;
+    /**
+     * Syncs the native `<dialog>` open state to `props.open` via
+     * `syncDialogOpenState`, opening modally (`showModal()`) or non-modally
+     * (`show()`) per `isNotModal()`. Runs from an effect that observes `open`
+     * only: modality is an open-time decision of the native `<dialog>` and cannot
+     * be switched while open without a close()+reopen (which flickers, resets
+     * focus and fires an extra close/cancel), so a `backdrop` change on an open
+     * dialog updates only its appearance until the consumer closes and reopens.
+     */
+    handleDialogOpen: () => void;
+    handleClick: (event: ClickEvent<HTMLDialogElement> | any) => void;
+    handleCancel: (event: GeneralEvent<HTMLDialogElement> | any) => void;
+    isNotModal: () => boolean;
+    _documentKeydownListenerCallbackId?: string;
+};
 export declare const AlignmentList: readonly ["start", "center", "end"];
 export type AlignmentType = (typeof AlignmentList)[number];
 export type AlignmentProps = {

package/dist/utils/dialog/index.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @public
+ * Keeps the open state of a native `<dialog>` element in sync with a requested state.
+ * Calls `showModal()`, `show()` or `close()` only when the current state differs from
+ * the requested one. A requested state of `undefined`/`null` leaves the element unchanged.
+ *
+ * @param dialog The `<dialog>` element, may be unresolved
+ * @param open The requested open state, already converted via `getBoolean`
+ * @param notModal `true` opens the dialog via `show()` instead of `showModal()`
+ */
+export declare const syncDialogOpenState: (dialog?: HTMLDialogElement | null, open?: boolean, notModal?: boolean) => void;
+/**
+ * @public
+ * Resolves the closest `<dialog>` ancestor of an element without modifying it.
+ */
+export declare const resolveClosestDialog: (element?: HTMLElement | null) => HTMLDialogElement | undefined;
+/**
+ * @public
+ * Adds the header's heading id to the dialog's `aria-labelledby` token list so
+ * the visible heading is part of the accessible name, while preserving any ids the
+ * consumer added (`aria-labelledby` is a space-separated list of one or more
+ * referenced elements). The heading id is appended once (idempotent), so a consumer
+ * value composes with it rather than being clobbered.
+ *
+ * Keeps the reference out of the way when the consumer set an explicit
+ * `aria-label`: the accessible-name computation evaluates `aria-labelledby` before
+ * `aria-label`, so our reference would win and silently defeat the label. While an
+ * `aria-label` is present it removes only our own token (leaving consumer ids), and
+ * adds it back once the label is cleared - so the naming override works whether the
+ * `aria-label` was set before mount or added dynamically afterwards.
+ */
+export declare const setDialogAriaLabelledBy: (dialog: HTMLDialogElement | undefined | null, headingId: string | undefined) => void;
+/**
+ * @public
+ * Removes only the header's heading id from the dialog's `aria-labelledby` token
+ * list, leaving any consumer-supplied ids intact; clears the attribute entirely
+ * when no tokens remain. Takes the dialog element resolved at mount (held in the
+ * header's state) rather than re-resolving it, so cleanup works even when the
+ * header is already detached from the DOM (e.g. during React effect cleanup) and
+ * regardless of whether the dialog has an `id`.
+ *
+ * `headingId` is the id of the heading element the header itself renders (the
+ * `<h2>` wrapper), so removing it on unmount is correct even when the consumer's
+ * `aria-labelledby` already contained that exact token: the referenced element is
+ * removed together with the header, and a token pointing at a now-missing id
+ * contributes nothing to the accessible name. Ids are unique per document, so this
+ * token can only ever refer to the header's heading, never to an independent
+ * consumer element - those keep a different id and are preserved by the filter.
+ */
+export declare const removeDialogAriaLabelledBy: (dialog: HTMLDialogElement | undefined | null, headingId: string | undefined) => void;
+/**
+ * @public
+ * Points the dialog's own built-in close button at the dialog via `commandfor`,
+ * so the native command resolves to the correct element even when the consumer
+ * supplied no `id` (the dialog then carries a generated one). Wired from the
+ * dialog/drawer rather than the header, which mounts before the dialog id is set.
+ * No-op until both the dialog and its close button are resolved.
+ *
+ * Selects the built-in dismiss control by its `data-dialog-close-button` marker
+ * (set by DBDialogHeader / DBDrawerHeader), NOT by `[command="request-close"]`
+ * alone: a consumer may place their own request-close control in the header's
+ * `startSlot`/`endSlot` (or the content) that intentionally targets a different
+ * dialog, and a broad query would overwrite its `commandfor` and hijack it. A
+ * `data-*` marker (not a class) is used because Mitosis forwards data attributes
+ * uniformly across all four targets, whereas a `className` passed to the nested
+ * DBButton is dropped in the Vue output.
+ *
+ * DBDialog / DBDrawer call this from BOTH `onMount` and the effect on `_id`, and
+ * both calls are required - they are not a redundant double-wire. The `onMount`
+ * call covers Vue and Stencil, whose watchers (`watch`, `@Watch`) are lazy and do
+ * not fire for the initial `_id` transition on mount; the `_id` effect covers
+ * React (whose effect runs on mount) and every later id change. Being idempotent,
+ * the extra call on React mount is a harmless no-op, so do not "optimize" either
+ * call away - dropping the `onMount` one leaves Vue/Stencil unwired at mount
+ * (the close button gets no `commandfor`).
+ */
+export declare const connectCloseButton: (dialog?: HTMLDialogElement | null) => void;

package/dist/utils/dialog/ponyfill.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Ponyfill for two features that the project Browserslist does not cover yet:
+ * - the `closedby` attribute on `<dialog>`: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby
+ * - Invoker Commands (`command` / `commandfor`): https://caniuse.com/mdn-html_elements_button_commandfor
+ * Support matrix: packages/foundations/docs/BrowserSupport.md
+ * Delete this file, packages/components/src/styles/internal/_dialog-ponyfill.scss
+ * and the marked call sites in dialog.lite.tsx / drawer.lite.tsx once every target
+ * in .browserslistrc supports both features (currently blocked by Firefox ESR).
+ */
+/**
+ * @public
+ * Feature-detects whether the browser supports the `closedby` attribute
+ * on `<dialog>` elements (i.e. native light-dismiss via ESC and backdrop click).
+ * Result is cached after the first call.
+ */
+export declare const supportsClosedBy: () => boolean;
+/**
+ * @public
+ * Feature-detects whether the browser supports the `commandfor`/`command`
+ * HTML attributes for declarative button-to-element commands.
+ * Result is cached after the first call.
+ */
+export declare const supportsCommandFor: () => boolean;
+/**
+ * @public
+ * Marks the dialog for the CSS backdrop-click fallback, which extends the close button's hit area. Supporting browsers stay clean.
+ */
+export declare const markClosedByFallback: (dialog?: HTMLDialogElement | null) => void;
+/**
+ * @public
+ * Closes the dialog a request-close button targets when the native command cannot do it:
+ * no commandfor support, or a commandfor that does not resolve to an element. Honors the
+ * commandfor target rather than the closest dialog, and stays out of the way when the
+ * native command can resolve its target. Shared by DBDialog and DBDrawer. Resolves the
+ * target once per click, without retry.
+ *
+ * Bails on `event.defaultPrevented`, mirroring native command activation (which a
+ * consumer `preventDefault()` suppresses). Callers that also run a consumer `onClick`
+ * must invoke it before this fallback so that veto is honored.
+ */
+export declare const commandForCloseFallback: (event: any, dialog?: HTMLDialogElement | null) => void;
+/**
+ * @public
+ * Dismisses a non-modal dialog on Escape when the browser ignores
+ * `closedby="closerequest"`. Modal dialogs (opened via showModal) close on
+ * Escape natively, so this only steps in for non-modal ones (backdrop="none",
+ * opened via show). No-op when closedby is supported, the key is not Escape, or
+ * the event was already canceled (a consumer handler ran first and vetoed it).
+ *
+ * Registered at document scope (via DocumentKeydownListener) while the dialog is
+ * open: a non-modal dialog does not trap focus, so an Escape can be dispatched to
+ * an element outside the dialog and would never reach an element-scoped listener.
+ * Shared by DBDialog and DBDrawer.
+ */
+export declare const escapeCloseFallback: (event: any, dialog?: HTMLDialogElement | null) => void;

package/dist/utils/document-keydown-listener.d.ts

@@ -0,0 +1,8 @@
+import { AbstractDocumentListener } from './abstract-document-listener.js';
+export declare class DocumentKeydownListener extends AbstractDocumentListener {
+    private static callbacks;
+    private static _instance;
+    private static runCallbacks;
+    constructor();
+    protected getCallbacks(): Record<string, (event: any) => void>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/v-core-components",
-  "version": "5.5.0",
+  "version": "5.6.1",
   "type": "module",
   "description": "Vue components for @db-ux/core-components",
   "repository": {
@@ -28,20 +28,20 @@
     "dist/"
   ],
   "dependencies": {
-    "@db-ux/core-components": "5.5.0",
-    "@db-ux/core-foundations": "5.5.0"
+    "@db-ux/core-components": "5.6.1",
+    "@db-ux/core-foundations": "5.6.1"
   },
   "devDependencies": {
     "@playwright/experimental-ct-vue": "1.62.1",
-    "@vitejs/plugin-vue": "6.0.8",
-    "@vue/compiler-dom": "3.5.42",
+    "@vitejs/plugin-vue": "6.0.9",
+    "@vue/compiler-dom": "3.5.43",
     "cpy-cli": "7.0.0",
     "npm-run-all2": "9.0.3",
     "replace-in-file": "9.0.0",
-    "tsx": "4.23.13",
+    "tsx": "4.23.15",
     "typescript": "5.9.3",
-    "vite": "8.3.0",
-    "vue": "3.5.42",
+    "vite": "8.3.1",
+    "vue": "3.5.43",
     "vue-tsc": "3.3.11"
   },
   "publishConfig": {