@apliteni/apliteni-ui 0.77.0 → 0.79.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/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/tap-zone.css

@@ -27,6 +27,11 @@
   /* 44 − 24: two zones fit between two of the smallest marks the kit draws. */
   --tap-gap: var(--space-5, 20px);
 
+  /* For a container of BORDERED controls at the smallest mark: `100%` on the
+     layer is the padding box, so one of those measures two less there and
+     --tap-gap stops its layer short. The floor, less that box. */
+  --tap-gap-bordered: calc(var(--tap-min) - var(--tap-aa) + 2px);
+
   /* Clear space to the nearest neighbour, declared by the container that knows
      its own gap; a zone takes half on each side.
 
@@ -50,7 +55,12 @@
     .ui-toast__action,
     .ui-drawer__close,
     .ui-snippet__copy,
-    .ui-footer__social
+    .ui-footer__social,
+    /* Already relative in react/src/DatePicker.css — restated because this
+       gate reads the kit's own sheets and cannot see that one, and a carrier
+       whose containing block it cannot find is a layer that measures against
+       whatever ancestor happens to be positioned. */
+    .ui-datepicker__opt
   ) { position: relative; }
 
   /* The layer: centred, transparent, sized to the floor, clamped to half the
@@ -64,7 +74,8 @@
     .ui-drawer__close,
     .ui-snippet__copy,
     .ui-footer__social,
-    .ui-switch
+    .ui-switch,
+    .ui-datepicker__opt
   )::after {
     content: "";
     position: absolute;
@@ -128,6 +139,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,
@@ -155,6 +175,26 @@
     --tap-clear-y: var(--tap-gap);
   }
 
+  /* `.ui-seg`'s shape at seven columns: cells packed across — that tight track
+     IS the control — opening down, where the sheet has the room. The rows
+     inherit both clearances. React-only, so the browser half below reports no
+     subject and react/src/DatePicker.test.tsx holds these declarations. */
+  .ui-datepicker__grid {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--space-1, 4px);
+    --tap-clear-y: var(--tap-gap);
+  }
+
+  /* Neither axis is opened: the room is already there, a hundred pixels to the
+     caption and twelve to the grid, which is how `.ui-tabs__list` declares its
+     own. The bordered step, because both controls are bordered at --tap-aa. */
+  .ui-datepicker__head { --tap-clear-x: var(--tap-gap-bordered); --tap-clear-y: var(--tap-gap-bordered); }
+
+  /* The row scrolls, so its own block padding is the clearance — anything
+     past the chip is clipped rather than hit. The chips are already wider
+     than the floor, so the gap across stays the kit's. */
+  .ui-datepicker__presets { --tap-clear-x: var(--space-1, 4px); --tap-clear-y: var(--tap-gap-bordered); }
+
   /* Both ways: fixed squares cannot overflow the way labels can, and a drawer
      header spends its column gap on the title. Not the accent picker — its
      swatches are on no carrier list, so opening it bought no reach. */