declarative-forms 2.1.1 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "declarative-forms",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Declarative, data-driven form dialogs for the web. Zero dependencies, framework agnostic, with async options, cross-field reactivity, tabs and modal stacking.",
   "type": "module",
   "sideEffects": [
@@ -12,9 +12,14 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./styles.css": "./styles/declarative-forms.css",
     "./theme.css": "./styles/declarative-forms.css",
@@ -31,6 +36,7 @@
   ],
   "scripts": {
     "build": "tsup",
+    "prepare": "npm run build",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",

package/styles/classic.css

@@ -265,18 +265,29 @@
   background: currentColor;
 }
 
+/*
+ * Both axes are anchored explicitly. v1 set only one axis per bar and let the
+ * other resolve to the static position, which was 0 because .cancelBtn was a
+ * <div>. v2 renders it as a <button>, which centres its content, so the unset
+ * axis resolved to 6px/8px and the two bars crossed at a corner -- the X
+ * rendered as a chevron.
+ */
 .cancelBtn:before {
-  left: 6px;
+  top: 50%;
+  left: 50%;
   width: 2px;
-  margin-left: -1px;
   height: 12px;
+  margin-top: -6px;
+  margin-left: -1px;
 }
 
 .cancelBtn:after {
-  top: 6px;
+  top: 50%;
+  left: 50%;
+  width: 12px;
   height: 2px;
   margin-top: -1px;
-  width: 12px;
+  margin-left: -6px;
 }
 
 /* -------------------------------------------------------------------- form */