declarative-forms 2.1.0 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "declarative-forms",
-  "version": "2.1.0",
+  "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 */

package/styles/declarative-forms.css

@@ -1238,10 +1238,24 @@
   fill: var(--dl-accent);
 }
 
+/*
+ * The shimmer itself lives in the component's injected styles, but this theme
+ * paints `.input-wrapper` from a more specific selector (`.dl-form dl-select
+ * .input-wrapper`), which would otherwise win and leave the skeleton animating
+ * a flat colour — a blank field instead of a loading one. Repeat the gradient
+ * here so the theme's own background does not swallow it.
+ */
 .dl-form dl-select.dl-select-loading .input-wrapper,
 .dl-modal dl-select.dl-select-loading .input-wrapper {
   width: 100%;
   border-radius: var(--dl-radius-sm);
+  background-image: linear-gradient(
+    to right,
+    var(--dl-select-loading-col1) 10%,
+    var(--dl-select-loading-col2) 18%,
+    var(--dl-select-loading-col1) 33%
+  );
+  background-size: 800px 104px;
 }
 
 /* The popup is portalled to <body>, so it cannot be scoped to `.dl-form`. */