@vectoriox/iox-ui 4.29.1 → 4.30.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-ui",
-  "version": "4.29.1",
+  "version": "4.30.1",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/styles/iox-forms.css

@@ -0,0 +1,56 @@
+/* Form state visibility — the ONE copy.
+ *
+ * Which state block a visitor (or an author on the canvas) sees is decided here, keyed on the form
+ * host's `data-iox-state`. That attribute is written by BOTH the builder's canvas state switcher and
+ * the runtime's submit lifecycle, so the block an author designs is exactly the block a visitor
+ * gets — one mechanism, two drivers, no plumbing down the tree.
+ *
+ * It lives in a plain CSS asset because THREE renderers need it and none of them share a component:
+ *   · the SSR engine's string renderer emits plain markup (no Angular components at all),
+ *   · the engine's component path renders IoxFormComponent,
+ *   · the builder canvas renders the container twin, which is a different component again.
+ * A component-scoped copy in each would be three copies that drift. Consumers add this file to
+ * their `angular.json` styles.
+ *
+ * ⚠️ The selectors deliberately out-specify `.iox-node-{id}` (0,3,0 vs 0,1,0): the state machine owns
+ * visibility, the author owns everything else about the block.
+ */
+
+/* ⚠️ SPECIFICITY IS LOAD-BEARING HERE, and getting it wrong is silent.
+ *
+ * A node's own rule is `.iox-node-{id} { display: block }` — (0,1,0) — and it is injected into a
+ * runtime <style> element that comes AFTER this file. So a bare `.iox-form-success { display: none }`
+ * would TIE on specificity and lose on source order, leaving both state blocks permanently visible.
+ * Scoping the hide to `.iox-form` makes it (0,2,0), and the reveal (0,3,0) beats that in turn. */
+.iox-form .iox-form-success,
+.iox-form .iox-form-error { display: none; }
+
+.iox-form[data-iox-state="success"] .iox-form-success { display: block; }
+.iox-form[data-iox-state="error"]   .iox-form-error   { display: block; }
+
+/* A submitted form hides its inputs: the success message REPLACES them, rather than sitting under a
+   form the visitor might fill in and send a second time. An error leaves them alone — the visitor
+   has to be able to fix and retry. */
+.iox-form[data-iox-state="success"] .iox-field,
+.iox-form[data-iox-state="success"] .iox-field-group,
+.iox-form[data-iox-state="success"] .iox-submit { display: none; }
+
+/* Same trap as above: the builder's canvas hosts carry `.container-root` too, and the node rule
+   still wins a tie — these are (0,3,0), so they hold. */
+
+/* Structural base styles, shared by the string-rendered markup and both component paths. */
+.iox-form           { box-sizing: border-box; }
+.iox-field          { box-sizing: border-box; display: block; }
+.iox-field__label   { display: block; }
+.iox-field__control { box-sizing: border-box; font: inherit; color: inherit; }
+.iox-field__group   { display: flex; flex-direction: column; gap: 4px; }
+.iox-field__option  { display: flex; align-items: center; gap: 8px; }
+.iox-field__help    { margin: 4px 0 0; }
+.iox-field__error   { margin: 4px 0 0; }
+.iox-submit         { font: inherit; border: none; cursor: pointer; }
+
+/* Visually hidden, still announced — a label may be hidden, never deleted. */
+.iox-field__label--hidden {
+    position: absolute; width: 1px; height: 1px; margin: -1px;
+    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
+}