@ng-forge/dynamic-forms-ionic 0.9.0-next.9 → 0.10.0-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-forge/dynamic-forms-ionic",
-  "version": "0.9.0-next.9",
+  "version": "0.10.0-next.1",
   "description": "Ionic integration for @ng-forge/dynamic-forms. Pre-built Ionic form components for mobile and desktop.",
   "type": "module",
   "license": "MIT",
@@ -25,6 +25,16 @@
     "ng-forge"
   ],
   "sideEffects": true,
+  "exports": {
+    ".": {
+      "default": "./fesm2022/ng-forge-dynamic-forms-ionic.mjs",
+      "types": "./types/ng-forge-dynamic-forms-ionic.d.ts"
+    },
+    "./styles/defaults": "./styles/_defaults.scss",
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
   "engines": {
     "node": ">=20"
   },
@@ -33,7 +43,7 @@
     "@angular/core": "~21.2.0",
     "@angular/forms": "~21.2.0",
     "@ionic/angular": ">=7.0.0",
-    "@ng-forge/dynamic-forms": "~0.9.0-next.9",
+    "@ng-forge/dynamic-forms": "~0.10.0-next.1",
     "rxjs": ">=7.0.0"
   },
   "dependencies": {
@@ -41,14 +51,5 @@
     "tslib": "^2.3.0"
   },
   "module": "fesm2022/ng-forge-dynamic-forms-ionic.mjs",
-  "typings": "types/ng-forge-dynamic-forms-ionic.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/ng-forge-dynamic-forms-ionic.d.ts",
-      "default": "./fesm2022/ng-forge-dynamic-forms-ionic.mjs"
-    }
-  }
+  "typings": "types/ng-forge-dynamic-forms-ionic.d.ts"
 }

package/styles/_defaults.scss

@@ -0,0 +1,111 @@
+/*
+ * Ionic form defaults.
+ *
+ * Opinionated host-framework defaults for Ionic apps. Library SCSS uses
+ * `var(--df-name, structural-fallback)` for layout-essential vars so forms
+ * render usefully without any opt-in. These mixins layer in the rest —
+ * color, typography, focus accent — that an Ionic app expects.
+ *
+ * Usage (in your app's global stylesheet):
+ *
+ *   @use '@ng-forge/dynamic-forms-ionic/styles/defaults' as df;
+ *
+ *   :root {
+ *     @include df.apply-ionic-form-defaults;
+ *   }
+ *
+ * Ionic doesn't auto-style components when `.ng-invalid` is set, so error
+ * styling depends on the `.ng-touched` / `.ng-invalid` compat classes from
+ * `withLegacyStatusClasses()`. If you opt into that feature, also include
+ * `apply-ionic-legacy-error-styles` once at the document level — the mixin
+ * emits unscoped `ion-*` selectors and matches globally regardless of where
+ * it's included:
+ *
+ *   provideDynamicForm(...withIonicFields(), withLegacyStatusClasses())
+ *
+ *   @include df.apply-ionic-legacy-error-styles;
+ */
+
+@mixin form-grid-defaults {
+  --df-grid-columns: 12;
+  --df-grid-gap: 0.5rem;
+  --df-grid-row-gap: 0.5rem;
+
+  --df-grid-gap-sm: 0.5rem;
+  --df-grid-gap-md: 0.5rem;
+  --df-grid-gap-lg: 0.5rem;
+  --df-grid-gap-xl: 0.5rem;
+
+  --df-grid-row-gap-sm: 0.5rem;
+  --df-grid-row-gap-md: 0.5rem;
+  --df-grid-row-gap-lg: 0.5rem;
+  --df-grid-row-gap-xl: 0.5rem;
+
+  --df-array-item-gap: var(--df-grid-row-gap);
+
+  --df-focus-color: var(--ion-color-primary, #3880ff);
+}
+
+@mixin form-page-defaults {
+  --df-page-custom-spacing: 1.5rem;
+  --df-page-transition-duration: 0.3s;
+  --df-page-transition-timing: ease-in-out;
+  --df-page-slide-offset: -10px;
+}
+
+@mixin form-ionic-defaults {
+  --df-field-gap: 0.5rem;
+  --df-label-font-weight: 500;
+  --df-label-color: inherit;
+  --df-hint-color: var(--ion-color-medium, #92949c);
+  --df-hint-font-size: 0.875rem;
+  --df-error-color: var(--ion-color-danger, #eb445a);
+  --df-error-font-size: 0.875rem;
+}
+
+@mixin apply-ionic-form-defaults {
+  @include form-grid-defaults;
+  @include form-page-defaults;
+  @include form-ionic-defaults;
+}
+
+// Error-state colors for Ionic components, keyed on the legacy ng-touched /
+// ng-invalid classes from `withLegacyStatusClasses()`. The selectors are
+// unscoped `ion-*` element matches — include once at the document level.
+// Fallback values match Ionic's documented defaults so the rules still
+// produce sensible colors if `--ion-color-danger` isn't defined for some
+// reason (e.g. Ionic CSS not loaded yet, or themed-out).
+@mixin apply-ionic-legacy-error-styles {
+  ion-input.ng-invalid.ng-touched,
+  ion-textarea.ng-invalid.ng-touched {
+    --highlight-color: var(--ion-color-danger, #eb445a);
+    --border-color: var(--ion-color-danger, #eb445a);
+  }
+
+  ion-select.ng-invalid.ng-touched {
+    --highlight-color: var(--ion-color-danger, #eb445a);
+    --border-color: var(--ion-color-danger, #eb445a);
+  }
+
+  ion-checkbox.ng-invalid.ng-touched {
+    --checkbox-background-checked: var(--ion-color-danger, #eb445a);
+    --border-color: var(--ion-color-danger, #eb445a);
+    --border-color-checked: var(--ion-color-danger, #eb445a);
+  }
+
+  ion-radio.ng-invalid.ng-touched {
+    --color: var(--ion-color-danger, #eb445a);
+    --color-checked: var(--ion-color-danger, #eb445a);
+  }
+
+  ion-range.ng-invalid.ng-touched {
+    --bar-background: var(--ion-color-danger, #eb445a);
+    --knob-background: var(--ion-color-danger, #eb445a);
+  }
+
+  ion-toggle.ng-invalid.ng-touched {
+    --track-background: var(--ion-color-danger-tint, #f4707d);
+    --track-background-checked: var(--ion-color-danger, #eb445a);
+    --handle-background-checked: var(--ion-color-danger-contrast, #ffffff);
+  }
+}