@apliteni/apliteni-ui 0.33.0 → 0.33.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.33.0",
+  "version": "0.33.1",
   "workspaces": [
     "react"
   ],

package/react/dist/index.css

@@ -44,7 +44,8 @@
 .rx-modal {
   width: min(480px, 92vw);
   background: var(--bg-elevated);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-strong);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
   border-radius: var(--radius-xl);
   overflow: hidden;
   transform: translateY(8px);

package/src/styles/callout.css

@@ -44,6 +44,10 @@
   width: 100%;
   max-width: var(--panel-md);
   overflow: hidden; /* clips the timer bar + left marker to the rounded corners */
+  /* A toast floats. It carries a status rather than the neutral hairline, so each
+     style below re-points --elev-edge at its own tint and leaves the outer line
+     where it already drew it. why: docs/specification.md#elevation */
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
   animation: ui-toast-in var(--dur-med) var(--ease-out) both;
 }
 
@@ -115,6 +119,7 @@
 .ui-toast--soft {
   background: var(--toast-glow);
   border: 1px solid color-mix(in srgb, var(--toast-accent) 22%, transparent);
+  --elev-edge: color-mix(in srgb, var(--toast-accent) 11%, transparent);
 }
 
 /* style: solid — the status at fill strength, inked with the pole opposite it.
@@ -128,6 +133,8 @@
   --toast-ink: var(--signal-solid-ink);
   background: var(--toast-solid);
   color: var(--toast-ink);
+  /* No inner line: a solid toast has no outer one either. It keeps the drop. */
+  --elev-edge: transparent;
 }
 .ui-toast--solid .ui-toast__title { color: var(--toast-ink); }
 /* The body copy is the quieter of the two, but it stays quiet by dilution the
@@ -147,7 +154,7 @@
 .ui-toast--solid .ui-toast__timer { background: color-mix(in srgb, var(--toast-ink) 55%, transparent); }
 
 /* style: outline — elevated card with a status-tinted border */
-.ui-toast--outline { background: var(--bg-elevated); border: 1px solid color-mix(in srgb, var(--toast-accent) 40%, transparent); }
+.ui-toast--outline { background: var(--bg-elevated); border: 1px solid color-mix(in srgb, var(--toast-accent) 40%, transparent); --elev-edge: color-mix(in srgb, var(--toast-accent) 20%, transparent); }
 
 /* compact — single line, no body text */
 .ui-toast--compact { align-items: center; padding-top: 10px; padding-bottom: 10px; }

package/src/styles/command-palette.css

@@ -69,7 +69,10 @@
   flex-direction: column;
   font-family: var(--font-sans);
   background: var(--cmdk-surface);
-  border: 1px solid var(--border);
+  /* The two-step edge and the drop: --border-strong outside, --border one pixel
+     inside it, then the broad faint drop. why: docs/specification.md#elevation */
+  border: 1px solid var(--border-strong);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
   border-radius: var(--radius-lg);
   overflow: hidden;
   opacity: 0;
@@ -79,7 +82,11 @@
     transform var(--dur-med) var(--ease);
 }
 .ui-cmdk.is-open .ui-cmdk__panel { opacity: 1; transform: translate(-50%, 0); }
-.ui-cmdk__panel:focus-visible { outline: none; box-shadow: var(--ring); }
+/* The ring is COMPOSED with the floating treatment, not written over it: a
+   box-shadow list replaces the whole list, so `box-shadow: var(--ring)` alone
+   took the panel's edge and its drop off for as long as it held focus.
+   why: docs/specification.md#elevation */
+.ui-cmdk__panel:focus-visible { outline: none; box-shadow: var(--ring), inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop); }
 
 /* -- The text box --------------------------------------------------------- */
 

package/src/styles/confirm.css

@@ -62,7 +62,10 @@
   gap: var(--space-2);
   padding: var(--space-5);
   background: var(--confirm-surface);
-  border: 1px solid var(--border);
+  /* The two-step edge and the drop: --border-strong outside, --border one pixel
+     inside it, then the broad faint drop. why: docs/specification.md#elevation */
+  border: 1px solid var(--border-strong);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
   border-radius: var(--radius-lg);
   opacity: 0;
   transform: translateY(8px);
@@ -71,7 +74,11 @@
     transform var(--dur-med) var(--ease);
 }
 .ui-confirm.is-open .ui-confirm__panel { opacity: 1; transform: none; }
-.ui-confirm__panel:focus-visible { outline: none; box-shadow: var(--ring); }
+/* The ring is COMPOSED with the floating treatment, not written over it: a
+   box-shadow list replaces the whole list, so `box-shadow: var(--ring)` alone
+   took the panel's edge and its drop off for as long as it held focus.
+   why: docs/specification.md#elevation */
+.ui-confirm__panel:focus-visible { outline: none; box-shadow: var(--ring), inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop); }
 
 /* -- Slots ----------------------------------------------------------------- */
 /* The question and the answers keep their size; the consequence between them is

package/src/styles/drawer.css

@@ -58,9 +58,19 @@
   display: flex;
   flex-direction: column;
   background: var(--drawer-surface);
+  /* A drawer is flush to a screen edge, so it has one edge rather than four and the
+     two-step edge runs along that one: --border-strong on the edge rule below, the
+     inner line one pixel inside it. This is the one floating surface that writes no
+     inset RING — a full ring would draw 1px lines across the top and bottom of a
+     full-height panel, where there is no edge — so it composes its own directional
+     line with the drops instead. The line is a variable so the focus rule can
+     compose all three layers without knowing which edge it is on; its default is a
+     no-op layer rather than `none`, which is valid only alone and would invalidate
+     the list. why: docs/specification.md#elevation */
+  --drawer-line: 0 0 0 0 transparent;
+  box-shadow: var(--drawer-line), var(--elev-drop);
   transition: transform var(--dur-med) var(--ease);
 }
-.ui-drawer__panel:focus-visible { outline: none; box-shadow: var(--ring); }
 .ui-drawer.is-open .ui-drawer__panel { transform: none; }
 
 /* -- Edge anchoring + slide-in direction ---------------------------------- */
@@ -72,12 +82,14 @@
 }
 .ui-drawer--right .ui-drawer__panel {
   right: 0;
-  border-left: 1px solid var(--border);
+  border-left: 1px solid var(--border-strong);
+  --drawer-line: inset 1px 0 0 var(--border);
   transform: translateX(100%);
 }
 .ui-drawer--left .ui-drawer__panel {
   left: 0;
-  border-right: 1px solid var(--border);
+  border-right: 1px solid var(--border-strong);
+  --drawer-line: inset -1px 0 0 var(--border);
   transform: translateX(-100%);
 }
 .ui-drawer--top .ui-drawer__panel,
@@ -88,15 +100,23 @@
 }
 .ui-drawer--top .ui-drawer__panel {
   top: 0;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-strong);
+  --drawer-line: inset 0 -1px 0 var(--border);
   transform: translateY(-100%);
 }
 .ui-drawer--bottom .ui-drawer__panel {
   bottom: 0;
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-strong);
+  --drawer-line: inset 0 1px 0 var(--border);
   transform: translateY(100%);
 }
 
+/* The ring is COMPOSED with the floating treatment rather than written over it — a
+   box-shadow list replaces the whole list, so a bare `box-shadow: var(--ring)` would
+   take the drawer's edge and its drop off for as long as it held focus.
+   why: docs/specification.md#elevation */
+.ui-drawer__panel:focus-visible { outline: none; box-shadow: var(--ring), var(--drawer-line), var(--elev-drop); }
+
 /* -- Sizes ----------------------------------------------------------------- */
 /* left|right → width; top|bottom → height. Same names, axis chosen by side. */
 .ui-drawer--right.ui-drawer--sm, .ui-drawer--left.ui-drawer--sm { --drawer-w: var(--panel-sm); }

package/src/styles/dropdown.css

@@ -60,7 +60,10 @@
   /* The floating step, not the sunken one — a panel held open over a card cannot be
      painted the colour of an inset. why: docs/specification.md#elevation */
   background: var(--bg-elevated);
-  border: 1px solid var(--border);
+  /* The two-step edge and the drop: --border-strong outside, --border one pixel
+     inside it, then the broad faint drop. why: docs/specification.md#elevation */
+  border: 1px solid var(--border-strong);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
   border-radius: var(--radius-lg);
   padding: 6px;
   opacity: 0;

package/src/styles/layout.css

@@ -238,10 +238,16 @@
 /* The label IS the chip. `fixed` is the fallback placement, out of the rail's own
    clip; the @supports branch below pins it to the row and is the only one that
    survives a scroll. The toggle's selector is unscoped, because it is wordless at
-   both widths. why: docs/specification.md#the-page-shell */
+   both widths.
+
+   It floats by role — a readout placed over the page for as long as a pointer
+   rests on a row — so it takes the floating treatment the hover readout takes,
+   which is the same shape on the same step: the two-step edge and the drops.
+   why: docs/specification.md#the-page-shell
+   why: docs/specification.md#elevation */
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item:is(:hover, :focus-visible) > .ui-nav__label,
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-app__user-trigger:is(:hover, :focus-visible) > .ui-app__who,
-.ui-app__rail .ui-app__fold:is(:hover, :focus-visible) > .ui-nav__label { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface-3); color: var(--strong); box-shadow: var(--shadow-md); opacity: 1; pointer-events: none; }
+.ui-app__rail .ui-app__fold:is(:hover, :focus-visible) > .ui-nav__label { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; border: 1px solid var(--border-strong); box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop); border-radius: var(--radius-xs); background: var(--surface-3); color: var(--strong); opacity: 1; pointer-events: none; }
 @supports (anchor-name: --a) and (anchor-scope: --a) {
   .ui-app.is-collapsed,
   .ui-app:has(.ui-app__fold) { anchor-scope: --ui-rail; }
@@ -343,7 +349,7 @@
   .ui-app__rail .ui-nav__item,
   .ui-app__rail .ui-app__user-trigger { min-height: 44px; }
   .ui-app__rail .ui-nav__item:is(:hover, :focus-visible) > .ui-nav__label,
-  .ui-app__rail .ui-app__user-trigger:is(:hover, :focus-visible) > .ui-app__who { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface-3); color: var(--strong); box-shadow: var(--shadow-md); opacity: 1; pointer-events: none; }
+  .ui-app__rail .ui-app__user-trigger:is(:hover, :focus-visible) > .ui-app__who { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; border: 1px solid var(--border-strong); box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop); border-radius: var(--radius-xs); background: var(--surface-3); color: var(--strong); opacity: 1; pointer-events: none; }
   @supports (anchor-name: --a) and (anchor-scope: --a) {
     .ui-app { anchor-scope: --ui-rail; }
     .ui-app__rail { anchor-name: --ui-rail; }

package/src/styles/tooltip.css

@@ -26,7 +26,10 @@
   max-width: var(--prose-caption);
   padding: var(--space-2) var(--space-3);
   background: var(--ui-tip-bg);
-  border: 1px solid var(--border);
+  /* The two-step edge and the drop: --border-strong outside, --border one pixel
+     inside it, then the broad faint drop. why: docs/specification.md#elevation */
+  border: 1px solid var(--border-strong);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
   border-radius: var(--radius-sm);
   font-family: var(--font-sans);
   font-size: var(--text-xs);

package/src/styles/topbar.css

@@ -123,7 +123,10 @@
   left: 0;
   min-width: 266px;
   background: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
-  border: 1px solid var(--border);
+  /* The two-step edge and the drop: --border-strong outside, --border one pixel
+     inside it, then the broad faint drop. why: docs/specification.md#elevation */
+  border: 1px solid var(--border-strong);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
   border-radius: 16px;
   padding: 6px;
   opacity: 0;
@@ -177,7 +180,8 @@
   transition: background var(--dur-fast) var(--ease);
 }
 /* The menu is raised, so a hovered row takes the step ABOVE it — see
-   src/styles/dropdown.css:130. why: docs/specification.md#elevation */
+   src/styles/dropdown.css:144 `.ui-dropdown__item:hover`.
+   why: docs/specification.md#elevation */
 .vopt:hover { background: var(--surface-3); }
 .vopt .vname { font-family: var(--font-sans); font-size: 12.5px; color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 .vopt .vmeta { font-size: 11px; color: var(--muted); margin-top: 2px; }
@@ -222,7 +226,10 @@
   right: 0; top: 44px;
   width: 252px;
   background: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
-  border: 1px solid var(--border);
+  /* The two-step edge and the drop: --border-strong outside, --border one pixel
+     inside it, then the broad faint drop. why: docs/specification.md#elevation */
+  border: 1px solid var(--border-strong);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
   border-radius: 14px;
   overflow: hidden;
   opacity: 0;

package/src/tokens/tokens.css

@@ -133,9 +133,10 @@
   --pink: #e97ca5;
   --amber: #ffcf6a;
 
-  /* The elevation ladder, bottom to top. Nothing casts; a surface says how high it is
-     with its step and with the hairline around it, and --muted caps how far the ladder
-     can go. why: docs/specification.md#elevation */
+  /* The elevation ladder, bottom to top. A surface says how high it is with its step and
+     with the hairline around it, and --muted caps how far the ladder can go. Nothing casts
+     below the floating step; the floating step itself adds --elev-drop under its inner
+     line and nothing else in the kit does. why: docs/specification.md#elevation */
   --bg: #0e0d14;
   --surface-2: #161520;     /* SUNKEN — fields, tracks, disabled, code */
   --surface: #211e2d;       /* the card */
@@ -214,9 +215,10 @@
   --signal-solid-info: var(--cyan);
   --signal-solid-neutral: var(--muted);
 
-  /* DEPRECATED since #295: the kit casts no shadow anywhere. Published still, so a
-     consumer reading one gets nothing rather than an unresolved var(), and a consumer who
-     wants a cast shadow sets them. Nothing in src/ reads them.
+  /* DEPRECATED since #295: no surface below the floating step casts, and the floating
+     step reads --elev-drop rather than any of these. Published still, so a consumer
+     reading one gets nothing rather than an unresolved var(), and a consumer who wants a
+     cast shadow sets them. Nothing in src/ reads them.
 
      A transparent shadow, not `none`, because these are read in a LIST. The kit's own
      pre-0.32 pattern was `box-shadow: var(--shadow-lg), var(--ring)`, and `none` is only
@@ -239,6 +241,18 @@
   --shadow-ink: #000000;
   --sheen: #ffffff;
 
+  /* The drops of the floating treatment, in Primer's --shadow-floating-* order:
+     the inner half of the two-step edge, then these. The line is NOT in this
+     token and cannot be — a var() inside a custom property is substituted on the
+     element that DECLARES it, so an --elev-edge read here resolves at :root and
+     nothing below could re-point it. A floating surface writes the pair itself:
+       box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
+     Dark spends 62% / 50% of the ink and reaches 1.20 at the drop's core, having
+     nowhere to go on a near-black page. why: docs/specification.md#elevation */
+  --elev-drop:
+    0 14px 30px -12px color-mix(in srgb, var(--shadow-ink) 62%, transparent),
+    0 3px 9px -4px color-mix(in srgb, var(--shadow-ink) 50%, transparent);
+
   /* Backdrop that dims the page behind an overlay (drawer, modal, composer). */
   --scrim: rgba(0, 0, 0, 0.58);
 
@@ -345,6 +359,13 @@
   --shadow-ink: #1e1e32;
   --sheen: #ffffff;
 
+  /* 18% / 10% against dark's 62% / 50%. Light's ink is #1e1e32 on a card at
+     #f8f9fc, and 18% is what puts the drop core at #d1d2d8 — 1.44, the strongest
+     separation either theme gets. why: docs/specification.md#elevation */
+  --elev-drop:
+    0 14px 30px -12px color-mix(in srgb, var(--shadow-ink) 18%, transparent),
+    0 3px 9px -4px color-mix(in srgb, var(--shadow-ink) 10%, transparent);
+
   --scrim: rgba(20, 22, 40, 0.38);
 
   --grad-from: var(--purple-light);