fictoan-react 2.0.0-beta.16 → 2.0.0-beta.17

package/dist/index.css

@@ -2255,6 +2255,15 @@ form[data-form] [data-radio-group]       [data-form-spaced]:not(:first-child),
 form[data-form] [data-radio-tab-group]   [data-form-spaced]:not(:first-child) {
     margin-block-start : 0;
 }
+
+/* Generic wrapper with inheritFormSpacing acts as a vertical flow container */
+/* for its own children, using the Form's spacing as the gap. Native form */
+/* components keep their own layouts. */
+[data-form-spaced]:not([data-form-item]):not([data-form-item-group]):not([data-checkbox]):not([data-switch]) {
+    display        : flex;
+    flex-direction : column;
+    gap            : var(--form-spacing, 0);
+}
 /* For calculating padding, based on side element widths */
 :root {
     --side-element-left-width  : 0px;
@@ -2300,8 +2309,6 @@ form[data-form] [data-radio-tab-group]   [data-form-spaced]:not(:first-child) {
         font-size : calc(var(--paragraph-font-size) * 1.2);
     }
 
-/* TODO: Size-specific icon sizing */
-
 .size-tiny[data-form-item] {
         --input-icon-size : 12px;
     }
@@ -2310,6 +2317,10 @@ form[data-form] [data-radio-tab-group]   [data-form-spaced]:not(:first-child) {
         --input-icon-size : 16px;
     }
 
+.size-large[data-form-item] {
+        --input-icon-size : 32px;
+    }
+
 /* BASE INPUT FIELD ///////////////////////////////////////////////////////// */
 input[data-input-field] {
     position         : relative;
@@ -2400,7 +2411,22 @@ input[data-input-field]:invalid:not(:focus):not(:placeholder-shown) {
         height       : var(--input-icon-size);
         fill         : none;
         stroke-width : 2px;
+
+        /* Scale any wrapper (e.g. a click handler div) and the SVG itself to */
+        /* match the size-controlled wrapper. Lets library icons follow the */
+        /* input's size prop instead of sitting at their intrinsic dimensions. */
     }
+.is-icon[data-input-side-element] > * {
+            display         : flex;
+            align-items     : center;
+            justify-content : center;
+            width           : 100%;
+            height          : 100%;
+        }
+.is-icon[data-input-side-element] svg {
+            width  : 100%;
+            height : 100%;
+        }
 
 /* Enable pointer events for interactive side elements */
 [data-input-side-element].is-interactive {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name"                 : "fictoan-react",
-    "version"              : "2.0.0-beta.16",
+    "version"              : "2.0.0-beta.17",
     "description"          : "A full-featured, designer-friendly, yet performant framework with plain-English props and focus on rapid iteration.",
     "repository"           : {
         "type" : "git",