@lumen-stack/react 0.12.4 → 0.12.5

package/dist/styles.css

@@ -209,7 +209,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  /* 0 at rest so the collapsed label adds no gap that would shove the grip
+     off-centre; restored to 6px only once the label is revealed (below). */
+  gap: 0;
   background: var(--lumen-accent);
   color: var(--lumen-accent-fg);
   border: 0;
@@ -217,17 +219,23 @@
   font: inherit;
   font-size: var(--lumen-fs-13);
   font-weight: 500;
-  box-shadow: var(--lumen-shadow-lg);
+  /* A soft ambient shadow to ground the tab + a faint brand glow to lift it.
+     The glow tracks --lumen-accent (color-mix) so it follows a host's custom
+     accent. Near-symmetric so it reads on every edge. */
+  box-shadow:
+    0 2px 10px rgb(0 0 0 / 0.30),
+    0 0 18px color-mix(in oklab, var(--lumen-accent) 32%, transparent);
   transition:
     transform var(--lumen-dur) var(--lumen-ease),
     padding var(--lumen-dur) var(--lumen-ease),
+    box-shadow var(--lumen-dur) var(--lumen-ease),
     opacity var(--lumen-dur-fast) ease;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
 .lumen-notch-handle {
   display: block;
-  background: rgb(255 255 255 / 0.5);
+  background: rgb(255 255 255 / 0.7);
   border-radius: 999px;
 }
 .lumen-notch-label {
@@ -235,56 +243,77 @@
   align-items: center;
   gap: 6px;
   white-space: nowrap;
+  /* Collapse on BOTH axes at rest so the resting tab is symmetric and the grip
+     sits dead-centre. max-width alone hid the text but the label's main-axis
+     size still inflated the tab — its line-box height on top/bottom, its
+     vertical-text length on left/right — centering the grip in a secretly-tall
+     tab (and on the column edges, pushing it to the top). The min-*: 0 is
+     required: a flex item's automatic minimum size otherwise refuses to shrink
+     below its content, so max-*: 0 would have no effect. */
+  min-width: 0;
+  min-height: 0;
   max-width: 0;
+  max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition:
     max-width var(--lumen-dur) var(--lumen-ease),
+    max-height var(--lumen-dur) var(--lumen-ease),
     opacity var(--lumen-dur-fast) ease;
 }
 .lumen-notch-expanded .lumen-notch-label,
 .lumen-notch:hover .lumen-notch-label,
 .lumen-notch:focus-visible .lumen-notch-label {
   max-width: 12rem;
+  max-height: 12rem;
   opacity: 1;
 }
+/* On reveal: restore the handle↔label gap and lift the glow a touch. */
+.lumen-notch-expanded,
+.lumen-notch:hover,
+.lumen-notch:focus-visible {
+  gap: 6px;
+  box-shadow:
+    0 3px 14px rgb(0 0 0 / 0.34),
+    0 0 26px color-mix(in oklab, var(--lumen-accent) 52%, transparent);
+}
 .lumen-notch-top {
   top: 0;
   left: 50%;
-  transform: translate(-50%, -8px);
-  padding: 7px 14px;
+  transform: translate(-50%, 0);
+  padding: 6px 14px;
   border-radius: 0 0 999px 999px;
 }
-.lumen-notch-top .lumen-notch-handle { width: 32px; height: 4px; }
+.lumen-notch-top .lumen-notch-handle { width: 28px; height: 3px; }
 .lumen-notch-top.lumen-notch-expanded,
 .lumen-notch-top:hover,
 .lumen-notch-top:focus-visible {
   transform: translate(-50%, 0);
-  padding: 9px 16px;
+  padding: 8px 16px;
 }
 .lumen-notch-bottom {
   bottom: 0;
   left: 50%;
-  transform: translate(-50%, 8px);
-  padding: 7px 14px;
+  transform: translate(-50%, 0);
+  padding: 6px 14px;
   border-radius: 999px 999px 0 0;
 }
-.lumen-notch-bottom .lumen-notch-handle { width: 32px; height: 4px; }
+.lumen-notch-bottom .lumen-notch-handle { width: 28px; height: 3px; }
 .lumen-notch-bottom.lumen-notch-expanded,
 .lumen-notch-bottom:hover,
 .lumen-notch-bottom:focus-visible {
   transform: translate(-50%, 0);
-  padding: 9px 16px;
+  padding: 8px 16px;
 }
 .lumen-notch-right {
   right: 0;
   top: 50%;
-  transform: translate(8px, -50%);
-  padding: 14px 7px;
+  transform: translate(0, -50%);
+  padding: 14px 6px;
   border-radius: 999px 0 0 999px;
   flex-direction: column;
 }
-.lumen-notch-right .lumen-notch-handle { width: 4px; height: 32px; }
+.lumen-notch-right .lumen-notch-handle { width: 3px; height: 28px; }
 .lumen-notch-right .lumen-notch-label {
   writing-mode: vertical-rl;
   transform: rotate(180deg);
@@ -293,23 +322,23 @@
 .lumen-notch-right:hover,
 .lumen-notch-right:focus-visible {
   transform: translate(0, -50%);
-  padding: 16px 9px;
+  padding: 16px 8px;
 }
 .lumen-notch-left {
   left: 0;
   top: 50%;
-  transform: translate(-8px, -50%);
-  padding: 14px 7px;
+  transform: translate(0, -50%);
+  padding: 14px 6px;
   border-radius: 0 999px 999px 0;
   flex-direction: column;
 }
-.lumen-notch-left .lumen-notch-handle { width: 4px; height: 32px; }
+.lumen-notch-left .lumen-notch-handle { width: 3px; height: 28px; }
 .lumen-notch-left .lumen-notch-label { writing-mode: vertical-rl; }
 .lumen-notch-left.lumen-notch-expanded,
 .lumen-notch-left:hover,
 .lumen-notch-left:focus-visible {
   transform: translate(0, -50%);
-  padding: 16px 9px;
+  padding: 16px 8px;
 }
 
 /* ─── Modal shell ────────────────────────────────────────────────── */
@@ -394,8 +423,8 @@
 }
 .lumen-modal-grabber::before {
   content: "";
-  width: 36px;
-  height: 4px;
+  width: 32px;
+  height: 3px;
   border-radius: 999px;
   background: var(--lumen-border-strong);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumen-stack/react",
-  "version": "0.12.4",
+  "version": "0.12.5",
   "description": "React SDK for Lumen — screenshot capture, annotation, and feedback widget.",
   "license": "MIT",
   "publishConfig": {