@tradalab/lyra 3.1.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tradalab/lyra",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "Tradalab UI kit — shadcn (radix-lyra) primitives, composed components, and app shell for React 19 / Next 16 / Tailwind v4.",
   "license": "UNLICENSED",
   "private": false,

package/styles/globals.css

@@ -48,6 +48,9 @@
   --color-input: var(--input);
   --color-border: var(--border);
   --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
   --color-accent-foreground: var(--accent-foreground);
   --color-accent: var(--accent);
   --color-muted-foreground: var(--muted-foreground);
@@ -85,6 +88,15 @@
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
+  /* The palette is otherwise achromatic, which left every state but a failure rendering as the
+     same grey: `secondary` and `outline` differ by a fill, not a hue, so "running" and "archived"
+     arrived as two identical pills. Measured as TEXT on --card, not picked by eye: success 5.49:1
+     light / 9.32:1 dark, warning 5.03 / 8.35, info 5.56 / 8.13. No *-foreground counterparts,
+     because nothing fills a shape with these yet and a token nothing renders is a claim nobody
+     checks. */
+  --success: oklch(0.508 0.105 165.6);
+  --warning: oklch(0.555 0.146 49);
+  --info: oklch(0.52 0.16 253);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -120,6 +132,10 @@
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
+  /* Lighter ends of the same three ramps: on a dark card the light values drop under the bar. */
+  --success: oklch(0.773 0.153 163.2);
+  --warning: oklch(0.769 0.165 70.1);
+  --info: oklch(0.75 0.14 245);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
@@ -149,3 +165,33 @@
     @apply font-sans;
   }
 }
+
+/* A sidebar row marks "you are here" with `data-active:bg-sidebar-accent`, which is the SAME
+   background `hover:` paints. Only `font-medium` separated the two, so pointing at any row made it
+   look like the open one and the open one was findable only by elimination. A rail marks POSITION,
+   which is the one thing on that row you cannot also do.
+ *
+ * Three choices that each cost a bug to learn:
+ *   - `::before`, not `box-shadow`. An unlayered box-shadow beats every layered utility whatever
+ *     its specificity, so it overwrote `focus-visible:ring-2`; since the button also carries
+ *     `outline-hidden`, the row for the current page had NO keyboard focus indicator at all.
+ *   - the attribute, not `NavItem`. Apps render `SidebarMenuButton` directly for rows that carry a
+ *     count or a custom body, and those are rows you can be standing on too.
+ *   - `--sidebar-accent-foreground` as the fallback, which measures 16.4:1 on the active row in
+ *     light and 14.5:1 in dark. `--ring` reads better in prose and measures 2.38:1 here, so it is
+ *     invisible until an app happens to remap it. An app with an accent sets
+ *     `--sidebar-active-rail` and changes nothing else. */
+@layer components {
+  [data-slot="sidebar-menu-button"][data-active="true"] {
+    position: relative;
+  }
+
+  [data-slot="sidebar-menu-button"][data-active="true"]::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 2px;
+    background: var(--sidebar-active-rail, var(--sidebar-accent-foreground));
+  }
+}