@apliteni/apliteni-ui 0.76.1 → 0.78.0

package/src/index.css

@@ -24,6 +24,7 @@
 @import "./styles/segmented.css";
 @import "./styles/tabs.css";
 @import "./styles/input.css";
+@import "./styles/file-drop.css";
 @import "./styles/dropdown.css";
 @import "./styles/tooltip.css";
 @import "./styles/nav.css";

package/src/inline.js

@@ -38,6 +38,7 @@ export const styles = {
   segmented: read('styles/segmented.css'),
   tabs: read('styles/tabs.css'),
   input: read('styles/input.css'),
+  fileDrop: read('styles/file-drop.css'),
   dropdown: read('styles/dropdown.css'),
   tooltip: read('styles/tooltip.css'),
   nav: read('styles/nav.css'),
@@ -73,6 +74,7 @@ export const cssText = [
   styles.segmented,
   styles.tabs,
   styles.input,
+  styles.fileDrop,
   styles.dropdown,
   styles.tooltip,
   styles.nav,

package/src/styles/card.css

@@ -22,6 +22,12 @@
    the rounded corners / clipping its last column. Clipping to the card's
    border-box also keeps zebra stripes from escaping the radius. */
 .ui-card:has(> .ui-table) { overflow-x: auto; }
+/* Which makes the card a keyboard stop whenever no cell holds a control, so it
+   answered with the native outline. It is a scroll region, so it takes --ring-scroll:
+   the band drawn inward, inside the card's 24px padding and clear of the table.
+   --elev-rest is left alone: the band is an outline, not a layer of the shadow list.
+   why: docs/specification.md#the-focus-ring */
+.ui-card:has(> .ui-table):focus-visible { outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }
 
 /* Vertical stacks space cards with the container's gap — see .ui-card-stack.
    (No `.ui-card + .ui-card` margin: it leaks into grid/flex rows and misaligns.) */

package/src/styles/command-palette.css

@@ -143,6 +143,14 @@
   overflow-y: auto;
   padding: var(--space-2);
 }
+/* Rows are `role="option" tabindex="-1"`, so the LIST takes the keyboard stop. The
+   wired palette's Tab trap holds one item and never hands it over; the markup the
+   kit publishes as a string, rendered open without the wiring, has no trap and did
+   arrive at the native outline. The band is drawn INWARD, on the list: the panel clips
+   with `overflow: hidden`, so an outset one is cut off, and the panel is not the box
+   that scrolls. The list's own 8px of padding is where it lands.
+   why: docs/specification.md#the-focus-ring */
+.ui-cmdk__list:focus-visible { outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }
 .ui-cmdk__group + .ui-cmdk__group { margin-top: var(--space-2); }
 
 /* Sentence case at 13px medium — the kit's label role, not a heading and not a

package/src/styles/confirm.css

@@ -99,16 +99,27 @@
   color: var(--strong);
 }
 .ui-confirm__body {
-  margin: 0;
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
+  /* The padding is the ring's clearance from the glyphs, as on .ui-table-scroll; the
+     negative margin spends it out of the panel's --space-5, not out of the text
+     column the three slots share. #531 */
+  margin: 0 calc(-1 * var(--space-1));
+  padding: var(--space-1);
   font-family: var(--font-sans);
   font-size: var(--text-sm);
   font-weight: var(--weight-normal);
   line-height: 1.55;
   color: var(--text);
 }
+/* A consequence long enough to scroll is a keyboard stop, and answered with the
+   native outline. The wired dialog's trap wraps between the two answers, which both
+   follow it; the markup the kit publishes as a string, rendered open without the
+   wiring, has no trap and makes it the first stop. The band is drawn INWARD, inside
+   the --space-1 above, which is what keeps it off the glyphs.
+   why: docs/specification.md#the-focus-ring */
+.ui-confirm__body:focus-visible { outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }
 .ui-confirm__acts {
   display: flex;
   flex: none;

package/src/styles/drawer.css

@@ -180,6 +180,12 @@
   font-size: var(--text-sm);
   line-height: 1.55;
 }
+/* A body of prose scrolls, so the browser makes it a keyboard stop and it answered
+   with the native outline. The band is drawn INWARD, inside the 20px padding: the body
+   is flush with a panel that is itself flush with a screen edge, so an outset ring — on
+   either box — is painted off-screen. Measured at 390, where an outset one left no
+   indicator at all. why: docs/specification.md#the-focus-ring */
+.ui-drawer__body:focus-visible { outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }
 
 .ui-drawer__footer {
   display: flex;

package/src/styles/dropdown.css

@@ -284,6 +284,12 @@
 .ui-dropdown__search-input:focus-visible { outline: 2px solid transparent; border-color: var(--accent); box-shadow: var(--ring); }
 
 .ui-dropdown__list { max-height: 300px; overflow-y: auto; }
+/* Rows are `role="option" tabindex="-1"`, so the LIST takes the keyboard stop and
+   answered with the native outline. The band is drawn INWARD, on the list: an outset
+   one 6px inside a --radius-lg corner leaves the panel, and the panel is not the box
+   that scrolls. It lands in the rows' own 9px of padding, never on a label.
+   why: docs/specification.md#the-focus-ring */
+.ui-dropdown__list:focus-visible { outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }
 /* A row is `display: flex`, which outranks the UA's [hidden], so a row the
    query hides is put away here. */
 .ui-dropdown__list [hidden] { display: none; } /* motion: still — a row the query no longer matches is gone on the next keystroke */

package/src/styles/file-drop.css

@@ -0,0 +1,83 @@
+/* File drop — .ui-drop. One row at rest; the field-sized box stays with .ui-file.
+ * why: docs/specification.md#react-file-drop */
+.ui-drop { position: relative; }
+
+/* What the region accepts the file for, above the control. */
+.ui-drop > * + .ui-drop__row { margin-top: var(--space-3); }
+
+.ui-drop__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  /* One height at rest, whichever control is in it: the picker button carries a
+     glyph and a note beside it does not. */
+  min-height: var(--space-8);
+  gap: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+
+.ui-drop__note { margin: 0; }
+
+/* The file in hand is a stack, not a line: the name owns the top tier, what the
+   page has a rule about sits under it, and the track runs the width below both.
+   One line asked to carry all three truncates the name to nothing at 320. */
+.ui-drop__file { display: grid; flex: 1 1 auto; gap: var(--space-2); min-width: 0; }
+
+/* The name tier. Never wraps: the actions stay on the name's line at every
+   width, and the name gives way to them by truncating. */
+.ui-drop__line { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-3); min-width: 0; }
+
+/* The extension is the half that says what kind of file this is, so the stem
+   gives way and the tail never does — `frankfurt-settlement-state….pdf`, the
+   way Finder, Drive and Dropbox cut a name. */
+.ui-drop__name { display: flex; flex: 1 1 auto; min-width: var(--space-10); color: var(--strong); font-weight: var(--weight-medium); }
+.ui-drop__stem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ui-drop__ext { flex: none; }
+
+/* The facts tier: the size while it uploads, the message when it fails. Never
+   wraps either — a second tier of text here would be a third tier on the row. */
+.ui-drop__facts { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-3); min-width: 0; }
+.ui-drop__size { flex: none; white-space: nowrap; }
+.ui-drop__word { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
+
+/* A status the track does not already draw is a circled mark and a word,
+   because colour alone is not a status. */
+.ui-drop__state { display: inline-flex; flex: 0 1 auto; align-items: center; gap: var(--space-2); min-width: 0; }
+.ui-drop__state svg { width: 16px; height: 16px; flex: none; stroke-width: 2.4; }
+.ui-drop__error { color: var(--pink); }
+
+/* Closes the name's line on the edge the content ends on, in every state. */
+.ui-drop__actions { display: flex; flex: none; align-items: center; gap: var(--space-2); margin-left: auto; }
+
+/* The width of the row it reports on, so 40% reads as 40% rather than as a dash.
+   The ground is the kit's token for sunken tracks; --surface-3 was invisible. */
+.ui-drop__bar {
+  display: block;
+  width: 100%;
+  height: 6px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-2); /* ring-gap: inherit — a progress track holds no focus target. */
+  overflow: hidden;
+}
+.ui-drop__bar span { display: block; height: 100%; background: var(--accent); }
+
+/* Covers the region rather than joining it, so the row keeps its place. */
+.ui-drop__target {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3);
+  border: 1px dashed var(--accent);
+  border-radius: var(--radius-md);
+  background: var(--surface); /* ring-gap: inherit — the target is painted while a file is over the region and holds no focus target. */
+  color: var(--strong);
+  font-size: var(--text-sm);
+  text-align: center;
+}
+
+.ui-drop.is-disabled .ui-drop__row { /* muted-ink: state — the drop accepts nothing */ color: var(--disabled-ink); }
+.ui-drop.is-disabled .ui-drop__name { /* muted-ink: state — the drop accepts nothing */ color: var(--disabled-ink); }

package/src/styles/table.css

@@ -188,7 +188,13 @@
 .ui-table--compact th:last-child,
 .ui-table--compact td:last-child { padding-right: var(--space-3); }
 .ui-table-scroll { overflow: auto; max-height: var(--ui-table-height, 70vh); padding: 0 var(--space-1); }
-.ui-table-scroll:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+/* The kit's first ringed scroller, and a scroll region inside a card like the rest, so
+   it draws the band inward too rather than spending a halo across the card around it.
+   It had no room of its own to draw in — the padding above is horizontal — which is the
+   second reason the band is an outline: it is painted over the rows, in the cell padding
+   of the first and last, rather than under them. #531
+   why: docs/specification.md#the-focus-ring */
+.ui-table-scroll:focus-visible { outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }
 .ui-table--sticky { border-collapse: separate; border-spacing: 0; }
 .ui-table--sticky thead th { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--table-bg); --ring-gap: var(--table-bg); padding-top: var(--space-2); }
 .ui-table--pinned .ui-table__identity, .ui-table--pinned .ui-table__selection { position: sticky; left: 0; z-index: var(--z-base); background: var(--table-bg); --ring-gap: var(--table-bg); border-right: 1px solid var(--border); }

package/src/styles/tap-zone.css

@@ -128,6 +128,15 @@
      mark's zone 9px inside `Revoke`. Nothing down, because a dense table's
      rows share an edge and its padding is not clearance to spend. */
   .ui-table__act .ui-btn + .ui-btn { margin-inline-start: var(--tap-gap) !important; }
+
+  /* A file drop's pair opens both ways: the row's own floor leaves clearance
+     under a button shorter than the target, and the panel's padding is below. */
+  .ui-drop__row { --tap-clear-y: var(--tap-gap); }
+  .ui-drop__actions {
+    gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--tap-gap);
+    --tap-clear-y: var(--tap-gap);
+  }
   .ui-table__act { --tap-clear-x: var(--tap-gap); --tap-clear-y: 0px; }
 
   /* Down only, like the nine rows below: a toast is a full row at this width,

package/src/tokens/tokens.css

@@ -269,6 +269,13 @@
   --ring-gap-width: 1px;
   --ring-gap: var(--bg);
   --ring: 0 0 0 var(--ring-gap-width) var(--ring-gap), 0 0 0 calc(var(--ring-gap-width) + var(--ring-width)) var(--ring-color), 0 0 12px 2px color-mix(in srgb, var(--ring-color) 45%, transparent);
+  /* What a scroll region inside a surface takes: --ring's gap and band, drawn inward,
+     no halo. An OUTLINE, because an inset shadow is painted under the box's own
+     children and a table scrolled under one erases it. The gap is left unpainted, so
+     neither half reads --ring-gap and neither is recomposed per surface. Chosen by
+     Artur on #531 round r30. why: docs/specification.md#the-focus-ring */
+  --ring-scroll: var(--ring-width) solid var(--ring-color);
+  --ring-scroll-offset: calc(-1 * (var(--ring-gap-width) + var(--ring-width)));
 
   /* The ink a cast shadow is made of, and the specular white that reads as gloss on a
      raised surface. Effects mix these instead of writing rgba(). */
@@ -569,7 +576,9 @@
 .ui-success { --code-bg: var(--wash-code-bg); }
 
 /* A container focused itself paints outside its own surface; descendants only
- * inherit its inside gap again after focus moves to them. */
+ * inherit its inside gap again after focus moves to them. A scroll region inside one
+ * needs no entry here: --ring-scroll paints no gap of its own, so the 1px it leaves is
+ * whatever the region is already standing on. #531 */
 .ui-card:focus-visible,
 .ui-cmdk__panel:focus-visible,
 .ui-confirm__panel:focus-visible,