@db-ux/v-core-components 5.0.4 → 5.1.0

package/dist/index.d.ts

@@ -94,6 +94,7 @@ 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/allow-discrete-ponyfill.js';
 export * from './utils/document-click-listener.js';
 export * from './utils/document-scroll-listener.js';
 export * from './utils/floating-components.js';

package/dist/shared/model.d.ts

@@ -360,6 +360,10 @@ export type FormMessageProps = {
      * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
      */
     autocomplete?: string | AutoCompleteType;
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     */
+    autoComplete?: string | AutoCompleteType;
     /**
      * Enables or disables the visibility of the message.
      */

package/dist/utils/allow-discrete-ponyfill.d.ts

@@ -0,0 +1,62 @@
+/**
+ * TODO: Remove this file once Firefox ships `allow-discrete` for `display`
+ * (https://bugzilla.mozilla.org/show_bug.cgi?id=1882408) and Safari supports
+ * `overlay` transitions. Replace all `closeDialogWithTransition()` calls with
+ * direct `dialog.close()`.
+ *
+ * This module provides a ponyfill for browsers that do not support transitioning
+ * `display` and/or `overlay` with `transition-behavior: allow-discrete`
+ * (currently Firefox and Safari). Used by the drawer to animate dialog exit
+ * transitions.
+ *
+ * Architecture:
+ * - `supportsAllowDiscreteDisplayAndOverlayTransition()` — cached feature
+ *   detection (checks both `display` transition and `overlay` support)
+ * - `closeDialogWithTransition(dialog)` — if supported natively, calls
+ *   `close()` immediately; otherwise sets `data-closing-allow-discrete-ponyfill`
+ *   on the dialog, waits `--db-transition-duration`, then calls `close()`
+ *
+ * CSS contract:
+ * - `.db-drawer` defines `--db-transition-duration` (`0s` default,
+ *   real value under `prefers-reduced-motion: no-preference`); the ponyfill
+ *   reads this custom property via `getComputedStyle`
+ * - `&[open]:not([data-closing-allow-discrete-ponyfill])` controls
+ *   `transform: none` — when the attribute is present, the transform reverts
+ *   to the off-screen value, triggering the exit animation while the dialog
+ *   is still [open]
+ *
+ * Maintenance constraints:
+ * - The attribute name `data-closing-allow-discrete-ponyfill` must stay in
+ *   sync between JS (`dataset['closingAllowDiscretePonyfill']`) and CSS
+ *   (`[data-closing-allow-discrete-ponyfill]`)
+ * - The custom property `--db-transition-duration` must stay in sync
+ *   between the SCSS declaration and the JS `getPropertyValue` call
+ */
+/**
+ * @public
+ * Feature-detects whether the browser supports transitioning the `display`
+ * and `overlay` properties when `transition-behavior: allow-discrete` is set.
+ * Both are required for a complete dialog exit animation:
+ * - `display` transitioning keeps the element visible during the exit
+ * - `overlay` transitioning keeps it in the top layer (preserving the backdrop)
+ *
+ * Returns false during SSR or before document.body is available.
+ * Result is cached after the first successful call.
+ */
+export declare const supportsAllowDiscreteDisplayAndOverlayTransition: () => boolean;
+/**
+ * @public
+ * Closes a dialog with a deferred `close()` call, allowing the CSS exit
+ * transition to play in browsers that don't support `allow-discrete` for
+ * `display` and `overlay`. Sets `data-closing-allow-discrete-ponyfill` on the
+ * dialog to signal CSS to revert the transform while the dialog is still [open].
+ *
+ * Reads `--db-transition-duration` from the dialog as the contract
+ * between CSS and JS for the transition timing.
+ *
+ * In browsers that support `allow-discrete` for `display` and `overlay`,
+ * calls `close()` immediately and lets native CSS handle the exit animation.
+ *
+ * @param dialog - The dialog element to close
+ */
+export declare const closeDialogWithTransition: (dialog: HTMLDialogElement) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/v-core-components",
-  "version": "5.0.4",
+  "version": "5.1.0",
   "type": "module",
   "description": "Vue components for @db-ux/core-components",
   "repository": {
@@ -28,8 +28,8 @@
     "dist/"
   ],
   "dependencies": {
-    "@db-ux/core-components": "5.0.4",
-    "@db-ux/core-foundations": "5.0.4"
+    "@db-ux/core-components": "5.1.0",
+    "@db-ux/core-foundations": "5.1.0"
   },
   "devDependencies": {
     "@playwright/experimental-ct-vue": "1.60.0",