@apliteni/apliteni-ui 0.131.0 → 0.133.0

package/src/index.d.ts

@@ -95,6 +95,38 @@ export declare function dropdownHeightFit(
   dd: Element | null | undefined,
   panel: Element | null | undefined,
 ): number | null;
+/** Stop an open panel's height where it cuts a row through the middle, so the list
+ *  reads as going on: the smaller of its cap and its measured room. Call it with the
+ *  panel laid out and its room written.
+ *  why: docs/components.md#the-dropdown-panel */
+export declare function dropdownSnap(
+  dd: Element | null | undefined,
+  panel: Element | null | undefined,
+): void;
+/** Lift an open panel out of a Modal or Drawer body too short to hold its field and
+ *  the panel's floor, so it opens over the body the way a portalled panel does, or put a
+ *  lifted one back. Returns whether the panel is lifted.
+ *  why: docs/components.md#the-dropdown-panel */
+export declare function dropdownLift(
+  dd: Element | null | undefined,
+  panel: Element | null | undefined,
+): boolean;
+/** Scroll the body an open panel sits in the least distance that shows the whole
+ *  panel and its field's label, with the room under the panel kept. Returns the distance scrolled, 0 when
+ *  nothing moved. why: docs/components.md#the-dropdown-panel */
+export declare function dropdownReveal(
+  dd: Element | null | undefined,
+  panel: Element | null | undefined,
+): number;
+/** Give an open panel its box, and take the box away from a shut one once its fade is
+ *  over, so a shut panel adds no scroll room. Returns a function that cancels a
+ *  collapse still waiting. why: docs/components.md#the-dropdown-panel */
+export declare function dropdownRest(
+  dd: Element | null | undefined,
+  panel: Element | null | undefined,
+  open: boolean,
+  wait?: number,
+): () => void;
 export declare function backLink(opts?: Record<string, unknown>): string;
 export declare function statBand(opts?: Record<string, unknown>): string;
 export declare function commandPalette(opts?: Record<string, unknown>): string;

package/src/logic/dropdown.js

@@ -37,3 +37,25 @@ export const dropdownAvail = ({ anchorTop, anchorBottom, viewport, gap, inset, m
   const room = Math.max(up ? anchorTop - gap : viewport - anchorBottom - gap, 0);
   return room < min ? Infinity : Math.max(room - inset, min);
 };
+
+/**
+ * Where a capped panel stops so that its last row is cut through the middle: the
+ * list then reads as going on, and a half row is the least that says so. `rows` are
+ * the rows' tops and heights from the panel's top edge, scrolled to its start;
+ * `below` is the panel's box under the part that scrolls; `content` is the panel's
+ * full height; `ceiling` is the tallest it may be. `reach`, past the ceiling, is room
+ * that may be spent to stop at the next half row instead of a whole row short: the
+ * least of it that does so is taken. Returns the height, or `null` where the panel fits
+ * whole under the ceiling or no row's middle fits under it.
+ */
+export const dropdownStop = ({ rows, below, content, ceiling, reach = ceiling }) => {
+  if (!(content > ceiling)) return null;
+  let stop = null;
+  let over = null;
+  for (const { top, height } of rows) {
+    const cut = Math.floor(top + height / 2 + below);
+    if (cut <= ceiling && (stop === null || cut > stop)) stop = cut;
+    else if (cut > ceiling && cut <= reach && (over === null || cut < over)) over = cut;
+  }
+  return over ?? stop;
+};

package/src/styles/card.css

@@ -93,6 +93,10 @@
   /* Title to description: the step, not the 5px it was. why: docs/foundations.md#spacing-and-rhythm */
   margin: 0 0 var(--space-2);
 }
+/* The title of a card that supports its neighbour, such as a document beside the
+   data read from it. The size, weight and rank stay the card title's.
+   why: docs/foundations.md#text-ink */
+.ui-card__title--muted { /* muted-ink: chrome — a supporting card ranks below its neighbour; the title is also the card's accessible name */ color: var(--muted); }
 .ui-card__sub {
   color: var(--text);
   font-size: var(--text-base);

package/src/styles/dropdown.css

@@ -6,6 +6,22 @@
  * ========================================================================== */
 
 .ui-dropdown { position: relative; display: inline-flex; }
+/* Inside a scrolling body the wiring writes --ui-dropdown-reach when it opens the
+   panel: the distance from the trigger to one edge inset past the panel. The panel is
+   the last thing the body holds, so the body ends where the panel ends; this 1px spot
+   lets it scroll that far. It stays through the fade and until the reader has scrolled
+   out of it, so closing does not move the field, and it paints nothing.
+   why: docs/components.md#the-dropdown-panel */
+.ui-dropdown[style*="--ui-dropdown-reach"]::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0;
+  top: 100%;
+  width: 1px;
+  height: 1px;
+  margin-top: var(--ui-dropdown-reach);
+  pointer-events: none;
+}
 
 /* Trigger — pill button: [pre] [value] [chevron] */
 .ui-dropdown__trigger {
@@ -88,12 +104,26 @@
      the screen's edge sets it to 0.
      why: docs/components.md#the-dropdown-panel */
   --ui-dropdown-edge: 8px;
+  /* What a panel that opens down inside a Modal or Drawer body keeps between its end
+     and the body's end. The drop shadow fades out over 43px in light and 15px in dark,
+     measured from pixels; the body clips whatever is left of it. 48px is the 8px
+     step above the light figure. why: docs/components.md#the-dropdown-panel */
+  --ui-dropdown-shade: 48px;
   /* The least height a capped panel keeps before it would rather spend the edge
      inset above than shrink further — three rows or so. Below it the panel
      still ends at or before the edge; it never spends room past the edge to
      reach this floor, because that room does not exist. #489
      why: docs/components.md#the-dropdown-panel */
   --ui-dropdown-min: 120px;
+  /* The tallest a panel grows before it scrolls inside itself. It is the figure the
+     reference systems settle on, 256 to 300px, and the one `scroll` and the search
+     list already used. The wiring stops the cap short of it, in the middle of a row
+     (--ui-dropdown-fit), so the last row is cut and the list is seen to go on. That
+     shows 7 whole rows and half of the eighth in a plain list, 4 and a half with a
+     description line, 5 and a half under a search field and 3 and a half with both.
+     A consumer asks for another cap with `scroll: <n>`.
+     why: docs/components.md#the-dropdown-panel */
+  --ui-dropdown-max: 300px;
   /* Named for the same reason the offset is: a block pinned to an edge has to
      bleed back through it, and #306 is a page copying the number by hand.
      why: docs/components.md#the-dropdown-panel */
@@ -142,15 +172,18 @@
   /* The cap, and the whole of #489: a panel took its content's height until that
      height ran off the screen, and then it took what was left. Two numbers decide
      it and the smaller wins — --ui-dropdown-cap is what the consumer asked for
-     (the `scroll` option writes it), --ui-dropdown-avail is the room between the
-     trigger and the viewport edge, which the wiring measures on every open and
-     every scroll. Neither is declared here: an unset cap means the consumer wants
-     the whole list, and an unset avail means nothing has measured yet, which is a
-     server-rendered page before hydration — so the fallback promises the same
-     thing at a coarser grain, the viewport less the edge inset at each end.
+     (the `scroll` option writes it, and --ui-dropdown-max stands in when it is
+     unset), --ui-dropdown-avail is the room between the trigger and the viewport
+     edge, or the body's, which the wiring measures when the panel opens. Between
+     them --ui-dropdown-fit is the height the wiring stops the smaller at, in the
+     middle of a row. An unset avail
+     means nothing has measured yet, which is a server-rendered page before
+     hydration — so the fallback promises the same thing at a coarser grain, the
+     viewport less the edge inset at each end.
      why: docs/components.md#the-dropdown-panel */
   max-height: min(
-    var(--ui-dropdown-cap, 100dvh),
+    var(--ui-dropdown-cap, var(--ui-dropdown-max)),
+    var(--ui-dropdown-fit, 100dvh),
     var(--ui-dropdown-avail, calc(100dvh - 2 * var(--ui-dropdown-edge)))
   );
   overflow-y: auto;
@@ -173,21 +206,40 @@
   z-index: var(--z-dropdown);
 }
 .ui-dropdown__panel.is-end { left: auto; right: 0; }
-/* `.is-scroll` asks for 300px specifically; the panel above caps every panel at
-   the room the viewport left either way. #489 */
-.ui-dropdown__panel.is-scroll { --ui-dropdown-cap: 300px; }
+/* `.is-scroll` asks for the standard cap by name; the panel above caps every panel
+   at the room the viewport left either way. #489 */
+.ui-dropdown__panel.is-scroll { --ui-dropdown-cap: var(--ui-dropdown-max); }
 
-/* The wiring adds this where the floor (above) left the panel uncapped: below
-   120px even spending the whole edge inset, there is no usable cap, so the
-   panel keeps its content height and the page grows to hold it instead —
-   #641's danger 1. That panel has nothing of its own to scroll, so the
-   `overflow-y: auto` above still claims a wheel over it for nothing, and
-   `overscroll-behavior: contain` then stops the gesture from reaching the
-   page that is now the only way to the rows below the fold. `visible` lets it
-   through. A panel that also carries `.is-scroll` or a numeric cap keeps
-   `auto`: that cap is still real room to scroll inside. why: dropdownAvail(),
-   src/logic/dropdown.js */
-.ui-dropdown__panel.is-unbounded { overflow-y: visible; }
+/* The wiring adds this where the room is below the floor: even spending the whole
+   edge inset, there is no usable height. The panel keeps its cap — it is never
+   taller than 300px — and scrolls inside it. Its room runs past the fold, so the
+   page is the way to the rows below it, and `overscroll-behavior: contain` above
+   would stop the wheel at the panel's own end instead of passing it on. `auto`
+   lets it through. why: dropdownAvail(), src/logic/dropdown.js */
+.ui-dropdown__panel.is-unbounded { overscroll-behavior: auto; }
+
+/* The wiring lifts a panel out of a Modal or Drawer body too short to hold the field's
+   label and trigger, the floor and the 8px edge under it. Fixed, it opens over the
+   body the way a portalled panel does, and the wiring writes its edges from the
+   trigger's. The value is the side it opens on. why: docs/components.md#the-dropdown-panel */
+.ui-dropdown__panel[data-dd-lifted] { position: fixed; }
+.ui-dropdown__panel[data-dd-lifted="up"] { transform: translateY(6px); }
+
+/* A search list that carries the consumer's own cap keeps it, and the panel is that cap
+   and the search field over it. The wiring writes the sum as --ui-dropdown-fit; this
+   lifts the standard cap out of its way. why: docs/components.md#the-dropdown-panel */
+.ui-dropdown__panel--search:has(> .ui-dropdown__list[style*="--ui-dropdown-cap"]) { --ui-dropdown-max: 100dvh; }
+
+/* A shut panel is still laid out, and a box that is laid out counts towards the
+   scroll of the body or page it sits in. The wiring collapses it once its fade is
+   over and gives the box back before the next open measures it. The width stays, so
+   the horizontal fit reads the same number. why: docs/components.md#the-dropdown-panel */
+.ui-dropdown__panel[data-dd-shut] {
+  max-height: 0;
+  padding-block: 0;
+  border-block-width: 0;
+  overflow: hidden;
+}
 
 /* Chrome makes a scroll container a keyboard stop on its own — no tabindex, no
    author rule — so `.is-scroll` took the browser's outline, black in light mode.
@@ -396,7 +448,7 @@
 
 /* The rows' own cap, read from the same property the panel reads: the `scroll`
    option lands on the list when there is a field above it. #489 */
-.ui-dropdown__list { max-height: var(--ui-dropdown-cap, 300px); overflow-y: auto; overscroll-behavior: contain; }
+.ui-dropdown__list { max-height: var(--ui-dropdown-cap, var(--ui-dropdown-fit, var(--ui-dropdown-max, 300px))); overflow-y: auto; overscroll-behavior: contain; }
 /* 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

package/src/styles/file-drop.css

@@ -81,3 +81,42 @@
 
 .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); }
+
+/* The empty page's drop area: the whole region is the target, drawn as a dashed
+   box around the first-run block. A file over it turns the edge to the accent,
+   the screen's one accent line, the way .ui-drop__target draws its own. */
+.ui-drop--area { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-4); }
+.ui-drop--area.is-dragging { border-color: var(--accent); }
+@media (max-width: 560px) { .ui-drop--area { padding: var(--space-3); } }
+
+/* The whole page as a target, drawn only while a file is dragged over the page. It is the
+   empty page's drop area made large: the same dashed accent edge and radius, holding the upload
+   glyph, a line that says to drop the files and the accepted types, laid over the page content below
+   the topbar. Its ground is the page ground, slightly transparent and blurred, so the table shows
+   through softly and no row stays sharp under the words. Where the engine cannot blur the backdrop,
+   or the reader asks for less transparency, the ground is solid. The layer takes no pointer events,
+   so the drop lands on what is under it. */
+.ui-drop--page {
+  position: fixed;
+  inset: calc(var(--ui-app-band, 0px) + var(--ui-app-top, 0px) + var(--space-4)) var(--space-4) var(--space-4);
+  z-index: var(--z-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  background: var(--bg); /* code-bg: inherit — the layer holds no focus target and takes no pointer. */
+}
+@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
+  .ui-drop--page {
+    background: color-mix(in srgb, var(--bg) 80%, transparent); /* code-bg: inherit — the layer holds no focus target and takes no pointer. */
+    -webkit-backdrop-filter: blur(var(--space-2));
+    backdrop-filter: blur(var(--space-2));
+  }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .ui-drop--page {
+    background: var(--bg); /* code-bg: inherit — the layer holds no focus target and takes no pointer. */
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}

package/src/styles/layout.css

@@ -332,7 +332,7 @@
    the three heights below are for. Level, not one continuous stroke: the rail insets
    its own rule, and in light that half is 1.009:1 on the rail's ground.
    why: docs/components.md#the-second-layout */
-.ui-app { --ui-app-band: 52px; }
+.ui-app--topbar { --ui-app-band: 52px; }
 .ui-app__well { display: flex; flex-direction: column; min-width: 0; }
 .ui-app__bar {
   display: flex;
@@ -516,15 +516,17 @@
 @media (max-width: 720px) {
   /* A column, not a grid: the band sticks to the top of the shell, and a sticky grid
      item sticks only inside its own row. */
-  .ui-app { display: flex; flex-direction: column; }
+  .ui-app { display: flex; flex-direction: column; --ui-app-band: 52px; }
   .ui-app > .ui-app__rail { display: none; }
   .ui-app__well { flex: 1 1 auto; }
   .ui-app > .ui-app__main { flex: 1 1 auto; }
   .ui-app > .ui-app__bar--phone { display: flex; }
   .ui-btn.ui-app__menu { display: inline-flex; }
   .ui-app__brand--band { display: flex; }
-  /* The menu control stands at the band's start with the band's inset beside it. */
-  .ui-app__bar { padding-inline: var(--space-2) var(--space-4); }
+  /* The first visible item lines up with the page. A leading menu uses the smaller
+     inset to keep its phone position in both shells. */
+  .ui-app__bar { padding-inline: var(--space-4); }
+  .ui-app__bar:has(> .ui-app__menu:first-child) { padding-inline-start: var(--space-2); }
   /* The drawer paints itself and sits out of the flow, so its wrapper takes no height. */
   .ui-app__drawer { display: block; }
   /* The rail's rows are the drawer's rows: the column fills the panel, and the foot

package/src/styles/topbar.css

@@ -206,10 +206,10 @@
   transition: background var(--dur-fast) var(--ease);
 }
 /* Menu rows use the reading surface and an edge on hover — see
-   src/styles/dropdown.css:271 `.ui-dropdown__item:hover`.
+   src/styles/dropdown.css:323 `.ui-dropdown__item:hover`.
    why: docs/foundations.md#elevation */
 .vopt:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
-/* The row is a keyboard stop: src/components/dropdown.js:1191
+/* The row is a keyboard stop: src/components/dropdown.js:1663
    `items[next < 0 ? 0 : next]?.focus()` moves focus onto a `[data-dd-item]` with
    the arrow keys, and this is one. It takes the ring on its own 10px radius, the
    same way `.amenu a` above does. #482 */