@marianmeres/stuic 3.104.0 → 3.106.0

package/dist/actions/validate.svelte.js

@@ -173,6 +173,15 @@ export function validate(el, fn) {
         const _doValidate = () => {
             if (!enabled)
                 return;
+            // A focused, dirty field torn down by a route change fires a final
+            // synchronous `change`/`blur` while being removed from the DOM. That
+            // removal runs inside Svelte's flush, so writing `validation` state here
+            // would throw `state_unsafe_mutation`. By then the node is already
+            // detached (`isConnected === false`) and the field is going away — skip.
+            // No-op for normal interactive validation and for the synchronous
+            // imperative `validate()` path, both of which run while connected.
+            if (!el.isConnected)
+                return;
             el.checkValidity();
             // Store customValidator message directly - hidden inputs (type="hidden")
             // don't populate el.validationMessage even when setCustomValidity() is called.
@@ -210,9 +219,6 @@ export function validate(el, fn) {
                 return m;
             }, []);
             // console.log(1111, validityState, el);
-            // hm... Uncaught Svelte error: state_unsafe_mutation...
-            // the `tick` await helps, but I'm not really sure I understand the internals...
-            // tick().then(() => {
             setValidationResult?.({
                 validity: validityState,
                 reasons,
@@ -224,7 +230,6 @@ export function validate(el, fn) {
                     el.validationMessage ||
                     "This field is invalid. Please review and try again."),
             });
-            // });
         };
         // Expose the current validator to the host so it can trigger validation
         // imperatively (e.g., on submit). The closure captures the current

package/dist/components/Button/Button.svelte

@@ -32,6 +32,14 @@
 		unstyled?: boolean;
 		/** Render as rounded-full */
 		roundedFull?: boolean;
+		/**
+		 * Trim the icon-side horizontal padding down to the vertical padding, so a
+		 * leading/trailing icon sits the same distance from the edge as a rounded icon
+		 * (aspect1) button. Pair with `roundedFull` for the "rounded icon button with
+		 * label" pill look (e.g. a "Back" button: prev arrow + label). Size-aware and
+		 * RTL-aware (`leading` = start side, `trailing` = end side).
+		 */
+		iconEdge?: "leading" | "trailing";
 		/** Render as aspect ratio 1 */
 		aspect1?: boolean;
 		/** Icon-only button (implies aspect1, adds data-icon-button for global CSS targeting) */
@@ -104,6 +112,7 @@
 		raised = false,
 		unstyled = false,
 		roundedFull = false,
+		iconEdge,
 		aspect1 = false,
 		iconButton = false,
 		tooltip: _tooltip,
@@ -168,6 +177,7 @@
 		data-raised={!unstyled && raised ? "true" : undefined}
 		data-checked={roleSwitch && checked ? "true" : undefined}
 		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
+		data-icon-edge={!unstyled && iconEdge ? iconEdge : undefined}
 		data-aspect1={!unstyled && _isAspect1 ? "true" : undefined}
 		data-icon-button={!unstyled && _isIconButton ? "true" : undefined}
 		data-x={!unstyled && !!_xProps ? "true" : undefined}
@@ -213,6 +223,7 @@
 		data-raised={!unstyled && raised ? "true" : undefined}
 		data-checked={roleSwitch && checked ? "true" : undefined}
 		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
+		data-icon-edge={!unstyled && iconEdge ? iconEdge : undefined}
 		data-aspect1={!unstyled && _isAspect1 ? "true" : undefined}
 		data-icon-button={!unstyled && _isIconButton ? "true" : undefined}
 		data-x={!unstyled && !!_xProps ? "true" : undefined}

package/dist/components/Button/Button.svelte.d.ts

@@ -27,6 +27,14 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     unstyled?: boolean;
     /** Render as rounded-full */
     roundedFull?: boolean;
+    /**
+     * Trim the icon-side horizontal padding down to the vertical padding, so a
+     * leading/trailing icon sits the same distance from the edge as a rounded icon
+     * (aspect1) button. Pair with `roundedFull` for the "rounded icon button with
+     * label" pill look (e.g. a "Back" button: prev arrow + label). Size-aware and
+     * RTL-aware (`leading` = start side, `trailing` = end side).
+     */
+    iconEdge?: "leading" | "trailing";
     /** Render as aspect ratio 1 */
     aspect1?: boolean;
     /** Icon-only button (implies aspect1, adds data-icon-button for global CSS targeting) */

package/dist/components/Button/README.md

@@ -20,6 +20,7 @@ A flexible button component with semantic intents, visual variants, sizes, and o
 | `iconSwap`   | `[string \| Snippet, string \| Snippet]`                           | -         | Two icon states with swap animation (implies iconButton) |
 | `x`          | `boolean \| XProps`                                                | -         | Normalized "X" icon button shortcut (close/dismiss) |
 | `nav`        | `"prev" \| "next" \| ButtonNavProps`                               | -         | Normalized prev/next icon button shortcut (arrow by default; `x` wins on conflict) |
+| `iconEdge`   | `"leading" \| "trailing"`                                          | -         | Trim icon-side padding to the y-padding (pill + edge-flush icon; pair with `roundedFull`) |
 | `class`      | `string`                                                           | -         | Additional CSS classes                            |
 
 ## Snippet Props
@@ -134,6 +135,26 @@ Global CSS targeting for all icon buttons:
 }
 ```
 
+### Pill with edge-flush icon (`iconEdge`)
+
+The "rounded icon button with label" look: a pill-shaped button whose leading (or
+trailing) icon sits the same distance from the edge as a rounded icon (nav) button.
+`iconEdge` trims the icon-side horizontal padding down to the vertical padding — it's
+size-aware and uses logical properties, so `leading`/`trailing` follow text direction
+(RTL-safe). It does NOT round the button on its own; pair it with `roundedFull`.
+
+```svelte
+<Button roundedFull iconEdge="leading">{@html iconArrowLeft({ size: 24 })} Back</Button>
+<Button roundedFull iconEdge="trailing">Next {@html iconArrowRight({ size: 24 })}</Button>
+```
+
+Notes:
+
+- `iconEdge` is composable — it only trims padding, so it also works on a
+  default-radius (non-pill) button if you want the icon flush without the pill shape.
+- You compose the icon + label yourself in `children` (no default icon, unlike `nav`),
+  so it works with any icon. Use `size: 24` to match the nav button's arrow.
+
 ### Custom Styling
 
 ```svelte
@@ -199,6 +220,7 @@ The component uses data attributes for styling:
 - `data-raised` - Present when raised
 - `data-checked` - Present when roleSwitch is enabled and checked
 - `data-rounded-full` - Present when roundedFull
+- `data-icon-edge` - Set to `"leading"` or `"trailing"` when iconEdge is set
 - `data-aspect1` - Present when aspect1 (or iconButton, or x, or nav)
 - `data-icon-button` - Present when iconButton (or x, or nav)
 - `data-x` - Present when x is set

package/dist/components/Button/index.css

@@ -422,6 +422,38 @@
 		padding: var(--stuic-button-padding-y-xl);
 	}
 
+	/* ============================================================================
+	   ICON EDGE
+	   Trim the icon-side horizontal padding down to the vertical padding, so a
+	   leading/trailing icon sits the same distance from the edge as a rounded icon
+	   (aspect1) button. Pair with [data-rounded-full] for the "rounded icon button
+	   with label" pill look. Logical props => leading/trailing follow text direction.
+	   ============================================================================ */
+	.stuic-button[data-icon-edge="leading"][data-size="sm"] {
+		padding-inline-start: var(--stuic-button-padding-y-sm);
+	}
+	.stuic-button[data-icon-edge="leading"][data-size="md"] {
+		padding-inline-start: var(--stuic-button-padding-y-md);
+	}
+	.stuic-button[data-icon-edge="leading"][data-size="lg"] {
+		padding-inline-start: var(--stuic-button-padding-y-lg);
+	}
+	.stuic-button[data-icon-edge="leading"][data-size="xl"] {
+		padding-inline-start: var(--stuic-button-padding-y-xl);
+	}
+	.stuic-button[data-icon-edge="trailing"][data-size="sm"] {
+		padding-inline-end: var(--stuic-button-padding-y-sm);
+	}
+	.stuic-button[data-icon-edge="trailing"][data-size="md"] {
+		padding-inline-end: var(--stuic-button-padding-y-md);
+	}
+	.stuic-button[data-icon-edge="trailing"][data-size="lg"] {
+		padding-inline-end: var(--stuic-button-padding-y-lg);
+	}
+	.stuic-button[data-icon-edge="trailing"][data-size="xl"] {
+		padding-inline-end: var(--stuic-button-padding-y-xl);
+	}
+
 	/* ============================================================================
 	   ICON BUTTON
 	   Semantic marker for icon-only buttons. Layout is handled by [data-aspect1].

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.104.0",
+	"version": "3.106.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",