@heyramzi/ui 2.19.2 → 2.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.19.2",
+  "version": "2.20.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",

package/src/record/info-list.svelte

@@ -171,7 +171,7 @@
 			{/each}
 		</span>
 	{:else if row.tone && row.value}
-		<StatusBadge tone={row.tone} capitalize={false}>{row.value}</StatusBadge>
+		<StatusBadge tone={row.tone} capitalize={false} class="w-fit max-w-full">{row.value}</StatusBadge>
 	{:else if row.href && row.value}
 		<a
 			href={row.href}

package/src/tokens/craft.css

@@ -149,3 +149,42 @@
   --transition-duration-overlay: var(--duration-overlay);
   --transition-duration-loop: var(--duration-loop);
 }
+
+/* ── Row actions ─────────────────────────────────────────────
+   `hover-row` marks the host, `row-action` each action: hidden under a pointer
+   until hover or keyboard focus, always shown on touch. */
+@layer components {
+  .row-action {
+    opacity: 0;
+    transition: opacity var(--duration-quick) var(--ease-smooth-out);
+  }
+
+  .hover-row:has(:focus-visible) .row-action,
+  .row-action:is(
+      :focus-visible,
+      :has(:focus-visible),
+      [data-state="open"],
+      [aria-expanded="true"],
+      :has([data-state="open"], [aria-expanded="true"])
+    ) {
+    opacity: 1;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .hover-row:hover .row-action {
+      opacity: 1;
+    }
+  }
+
+  @media (hover: none), (any-pointer: coarse) {
+    .row-action {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .row-action {
+      transition: none;
+    }
+  }
+}