npm - @apliteni/apliteni-ui - Versions diffs - 0.23.4 → 0.25.0 - Mend

@apliteni/apliteni-ui 0.23.4 → 0.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md +21 -1
package/package.json +1 -1
package/src/components/dropdown.js +129 -7
package/src/index.css +6 -1
package/src/styles/base.css +22 -0
package/src/styles/confirm.css +4 -1
package/src/styles/drawer.css +4 -0
package/src/styles/dropdown.css +38 -1
package/src/styles/layout.css +3 -0
package/src/styles/topbar.css +4 -0
package/src/tokens/tokens.css +11 -2

package/README.md CHANGED Viewed

@@ -48,7 +48,7 @@ npm install @apliteni/apliteni-ui
 ## Use it
 ```js
-import '@apliteni/apliteni-ui/css';           // once, at app root (needs the Poppins font)
+import '@apliteni/apliteni-ui/css';           // once, at app root (load the two fonts too — see below)
 import { button, card, topbar, wireTopbar } from '@apliteni/apliteni-ui';
 el.innerHTML = topbar({ word: 'Strategy', account: { name, email } })
@@ -56,6 +56,26 @@ el.innerHTML = topbar({ word: 'Strategy', account: { name, email } })
 wireTopbar(document);                          // theme toggle, menus, segmented, copy buttons
 ```
+### The two fonts
+The kit names two families and bundles neither, so the host page loads them. Poppins is
+`--font-display` — headings, brand marks, large readouts. IBM Plex Sans is `--font-sans` —
+tables, fields, paragraphs, chat, which is most of an application. Weights 300-700 in both:
+```html
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap">
+```
+Load only one of them and the other falls through to the system stack behind it, without
+saying so. Want the old
+single-family look back? Set both roles to the same family in your own stylesheet, after the
+kit's:
+```css
+:root { --font-sans: var(--font-display); }
+```
 ### Reuse the account page
 The whole `/account` layout (topbar + sticky sidebar + page body) ships as one

package/package.json CHANGED Viewed

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

package/src/components/dropdown.js CHANGED Viewed

@@ -76,6 +76,8 @@ function ddBody({ items, sections }, listbox) {
  * @param {string} [o.header]      raw HTML pinned to the top of the panel
  * @param {string} [o.footer]      raw HTML pinned to the bottom of the panel
  * @param {string} [o.align]       'start' (default) | 'end' — the edge the panel hugs
+ * @param {string} [o.direction]   'down' (default) | 'up' | 'auto' — the way it opens
+ * @param {boolean} [o.portal]     mount the panel on <body>, for a clipping or sticky ancestor
  * @param {boolean|number} [o.scroll] true, or a maxHeight in px, to cap and scroll
  * @param {boolean} [o.open]       render already-open (handy for screenshots)
  * @param {string} [o.ariaLabel]   accessible name for the panel and trigger
@@ -84,7 +86,8 @@ function ddBody({ items, sections }, listbox) {
 export function dropdown({
   label, value, placeholder = 'Select…', variant, items, sections,
   header = '', footer = '', triggerContent, triggerClass = '', chevron = true,
-  align = 'start', scroll = false, open = false, ariaLabel, id, panelClass = '',
+  align = 'start', direction = 'down', portal = false,
+  scroll = false, open = false, ariaLabel, id, panelClass = '',
 } = {}) {
   const flat = sections ? sections.flatMap((s) => s.items || []) : (items || []);
   const isSelect = variant === 'select' || (variant == null && flat.some((it) => it && (it.selected || it.value != null)));
@@ -104,15 +107,30 @@ export function dropdown({
     ariaLabel && triggerContent != null ? `aria-label="${esc(ariaLabel)}"` : '',
   ].filter(Boolean).join(' ');
+  // `is-open` beside `open` because the descendant selector the panel normally
+  // takes its open state from stops matching once wireDropdown() portals it.
   const panelAttrs = [
-    `class="${cx('ui-dropdown__panel', align === 'end' && 'is-end', scroll && 'is-scroll', panelClass)}"`,
+    `class="${cx(
+      'ui-dropdown__panel',
+      align === 'end' && 'is-end',
+      direction === 'up' && 'is-up',
+      scroll && 'is-scroll',
+      portal && 'ui-dropdown__panel--portal',
+      portal && open && 'is-open',
+      panelClass,
+    )}"`,
     'data-dropdown-panel',
     `role="${listRole}"`,
     ariaLabel ? `aria-label="${esc(ariaLabel)}"` : '',
     scroll && scroll !== true ? `style="max-height:${typeof scroll === 'number' ? scroll + 'px' : esc(scroll)}"` : '',
   ].filter(Boolean).join(' ');
-  return `<div class="${cx('ui-dropdown', open && 'open')}" data-dropdown${isSelect ? ' data-dropdown-select' : ''}${id ? ` id="${esc(id)}"` : ''}>` +
+  const ddAttrs = 'data-dropdown'
+    + (isSelect ? ' data-dropdown-select' : '')
+    + (direction === 'auto' ? ' data-dropdown-direction="auto"' : '')
+    + (portal ? ' data-dropdown-portal' : '');
+  return `<div class="${cx('ui-dropdown', open && 'open')}" ${ddAttrs}${id ? ` id="${esc(id)}"` : ''}>` +
     `<button ${triggerAttrs}>${trig}${chevron ? '<span class="ui-dropdown__chevron" aria-hidden="true"></span>' : ''}</button>` +
     `<div ${panelAttrs}>${header}${ddBody({ items, sections }, isSelect)}${footer}</div>` +
     `</div>`;
@@ -129,16 +147,74 @@ export function dropdown({
 // document. Safe to call repeatedly (e.g. Storybook re-renders).
 let _ddGlobalWired = false;
+// The trigger-to-panel offset is --ui-dropdown-gap in src/styles/dropdown.css.
+// This is the fallback for a document that has not loaded the sheet;
+// src/components/dropdown.test.js pins the two to each other.
+const DD_GAP = 9;
+// A portalled panel is no longer a descendant of its container, so everything
+// below asks the container for its panel rather than querying inside it.
+const ddPanelOf = (dd) => dd.__ddPanel || dd.querySelector('[data-dropdown-panel]');
+function ddGap(panel) {
+  const declared = parseFloat(getComputedStyle(panel).getPropertyValue('--ui-dropdown-gap'));
+  return Number.isFinite(declared) ? declared : DD_GAP;
+}
 function ddItemsOf(dd) {
-  const panel = dd.querySelector('[data-dropdown-panel]');
+  const panel = ddPanelOf(dd);
   if (!panel) return [];
   return Array.from(panel.querySelectorAll('[data-dd-item]'))
     .filter((el) => el.getAttribute('aria-disabled') !== 'true');
 }
+// `auto` is the only direction the wiring decides; `up` and the default are the
+// panel's own class, set once at render. Flip only when below is too tight AND
+// above is roomier, so a panel that fits nowhere still opens the way it says.
+function ddResolveDirection(dd, panel) {
+  if (dd.getAttribute('data-dropdown-direction') !== 'auto') return;
+  const trigger = dd.querySelector('[data-dropdown-trigger]');
+  if (!trigger || typeof trigger.getBoundingClientRect !== 'function') return;
+  const t = trigger.getBoundingClientRect();
+  const below = window.innerHeight - t.bottom;
+  panel.classList.toggle('is-up', below < panel.offsetHeight + ddGap(panel) && t.top > below);
+}
+// Nothing lays a portalled panel out any more, so these four inline values are
+// its layout. Inline, so no rule in any sheet can pin the opposite edge.
+function positionPortalPanel(dd, panel) {
+  const trigger = dd.querySelector('[data-dropdown-trigger]');
+  if (!trigger || typeof trigger.getBoundingClientRect !== 'function') return;
+  const t = trigger.getBoundingClientRect();
+  const gap = ddGap(panel);
+  const s = panel.style;
+  if (panel.classList.contains('is-up')) {
+    s.top = 'auto';
+    s.bottom = `${window.innerHeight - t.top + gap}px`;
+  } else {
+    s.bottom = 'auto';
+    s.top = `${t.bottom + gap}px`;
+  }
+  if (panel.classList.contains('is-end')) {
+    s.left = 'auto';
+    s.right = `${window.innerWidth - t.right}px`;
+  } else {
+    s.right = 'auto';
+    s.left = `${t.left}px`;
+  }
+}
+// A panel left on <body> outlives the container that owned it — a re-render
+// replaces the container and the old panel has nothing pointing at it.
+function sweepOrphanPanels() {
+  document.querySelectorAll('body > [data-dropdown-panel][data-dropdown-portal]')
+    .forEach((p) => { if (!p.__ddOwner || !p.__ddOwner.isConnected) p.remove(); });
+}
 function closeDropdown(dd) {
   if (!dd.classList.contains('open')) return;
   dd.classList.remove('open');
+  ddPanelOf(dd)?.classList.remove('is-open');
   dd.querySelector('[data-dropdown-trigger]')?.setAttribute('aria-expanded', 'false');
 }
@@ -148,6 +224,11 @@ function closeAllDropdowns(except) {
 function openDropdown(dd, focusIdx) {
   closeAllDropdowns(dd);
+  const panel = ddPanelOf(dd);
+  if (panel) {
+    ddResolveDirection(dd, panel);
+    if (dd.__ddPanel) { positionPortalPanel(dd, panel); panel.classList.add('is-open'); }
+  }
   dd.classList.add('open');
   dd.querySelector('[data-dropdown-trigger]')?.setAttribute('aria-expanded', 'true');
   if (focusIdx != null) {
@@ -161,7 +242,7 @@ function openDropdown(dd, focusIdx) {
 function selectOption(dd, item) {
   if (!dd.hasAttribute('data-dropdown-select')) return;
   ddItemsOf(dd).forEach((el) => el.setAttribute('aria-selected', el === item ? 'true' : 'false'));
-  dd.querySelectorAll('[data-dd-item].is-selected').forEach((el) => el.classList.remove('is-selected'));
+  ddPanelOf(dd)?.querySelectorAll('[data-dd-item].is-selected').forEach((el) => el.classList.remove('is-selected'));
   item.classList.add('is-selected');
   const valueEl = dd.querySelector('[data-dropdown-trigger] .ui-dropdown__value');
   const label = item.querySelector('.ui-dropdown__label');
@@ -177,6 +258,23 @@ export function wireDropdown(root = document) {
     const panel = dd.querySelector('[data-dropdown-panel]');
     if (!trigger) return;
+    // Portal: lift the panel onto <body>. An ancestor whose overflow is not
+    // `visible` clips it on both axes, and one that is `position: sticky` opens
+    // a stacking context whatever z-index the panel carries — the app rail is
+    // both at once. why: docs/specification.md#the-dropdown-panel
+    if (panel && dd.hasAttribute('data-dropdown-portal')) {
+      sweepOrphanPanels();
+      panel.setAttribute('data-dropdown-portal', '');
+      panel.__ddOwner = dd;
+      dd.__ddPanel = panel;
+      document.body.appendChild(panel);
+      if (dd.classList.contains('open')) {
+        ddResolveDirection(dd, panel);
+        positionPortalPanel(dd, panel);
+        panel.classList.add('is-open');
+      }
+    }
     trigger.addEventListener('click', (e) => {
       e.stopPropagation();
       if (dd.classList.contains('open')) closeDropdown(dd);
@@ -196,7 +294,7 @@ export function wireDropdown(root = document) {
       });
     }
-    dd.addEventListener('keydown', (e) => {
+    const onKeydown = (e) => {
       const open = dd.classList.contains('open');
       const onTrigger = e.target === trigger;
       if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && (onTrigger || open)) {
@@ -217,7 +315,22 @@ export function wireDropdown(root = document) {
       } else if (e.key === 'Tab' && open) {
         closeDropdown(dd);
       }
-    });
+    };
+    dd.addEventListener('keydown', onKeydown);
+    if (dd.__ddPanel) {
+      // A portalled panel is no longer inside the container, so a keystroke on
+      // an item never bubbles to it. Bound here only, or it would fire twice.
+      dd.__ddPanel.addEventListener('keydown', onKeydown);
+      // It is also placed once, on open, and a trigger whose box changes after
+      // that — a webfont arriving, a longer label — leaves it adrift. Scroll
+      // and resize do not see a reflow; this does.
+      if (typeof ResizeObserver === 'function') {
+        new ResizeObserver(() => {
+          if (dd.classList.contains('open')) positionPortalPanel(dd, dd.__ddPanel);
+        }).observe(trigger);
+      }
+    }
   });
   if (!_ddGlobalWired) {
@@ -228,5 +341,14 @@ export function wireDropdown(root = document) {
       const open = document.querySelector('[data-dropdown].open');
       if (open) { closeDropdown(open); open.querySelector('[data-dropdown-trigger]')?.focus(); }
     });
+    // Viewport coordinates go stale the moment anything scrolls. Capture, so a
+    // scroll inside the rail the panel was lifted out of counts too.
+    const reposition = () => {
+      document.querySelectorAll('[data-dropdown].open').forEach((dd) => {
+        if (dd.__ddPanel) positionPortalPanel(dd, dd.__ddPanel);
+      });
+    };
+    window.addEventListener('scroll', reposition, true);
+    window.addEventListener('resize', reposition);
   }
 }

package/src/index.css CHANGED Viewed

@@ -4,7 +4,12 @@
  * addressable — package.json `exports` has no wildcard for ./styles/*, so a deep
  * path into src/styles/ does not resolve. To take one component, read it by name
  * through `apliteni-ui/inline` (`import { topbarCss } from …`).
- * Requires the Poppins font (loaded by the host page or Storybook preview).
+ * Requires two families, loaded by the host page or the Storybook preview:
+ * Poppins (--font-display, headings and brand marks) and IBM Plex Sans
+ * (--font-sans, everything else). Weights 300-700 in both. Neither is
+ * bundled; a family that never loads falls back to the system stack behind
+ * it, in silence.
+ * why: docs/specification.md#typefaces
  * ========================================================================== */
 @import "./tokens/brand.generated.css";
 @import "./tokens/tokens.css";

package/src/styles/base.css CHANGED Viewed

@@ -35,6 +35,28 @@ a {
   text-decoration: none;
 }
+/* -- The two typeface roles -----------------------------------------------
+ * A heading is the display face, running text is the text face, and the
+ * ELEMENT decides which — never the size. A size threshold would change a
+ * heading's typeface halfway through a resize, which is the one thing a
+ * reader notices. A component that wants a heading tag set in the text face
+ * says so on its own rule, which outranks this one at (0,1,0); .ui-drawer__title
+ * and .ui-confirm__title are the two that do.
+ * why: docs/specification.md#typefaces */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+}
+/* The browser default for b/strong is 700, and at the 13px the kit's tables and
+ * chat feeds run at, 700 stops reading as emphasis and starts reading as a
+ * filled-in shape. The semibold step is the emphasis; the bold step stays
+ * available to anything that asks for it by name.
+ * why: docs/specification.md#typefaces */
+b,
+strong {
+  font-weight: var(--weight-semibold);
+}
 /* Ambient blurred glow — the deck's signature background depth.
    Place <span class="ui-glow ui-glow--purple"> absolutely inside a positioned
    parent. Two colour variants ship; scale/position with inline styles. */

package/src/styles/confirm.css CHANGED Viewed

@@ -85,7 +85,10 @@
 /* -- Slots ----------------------------------------------------------------- */
 /* The question and the answers keep their size; the consequence between them is
    the one that gives, and scrolls — the same split the drawer's header / body /
-   footer makes. */
+   footer makes. The title is an h2 and opts out of the display face base.css
+   gives a heading, for the same reason .ui-drawer__title does: at --text-md it
+   is the question on a dialog, set at the size the answer beneath it is set at.
+   why: docs/specification.md#typefaces */
 .ui-confirm__title {
   margin: 0;
   flex: none;

package/src/styles/drawer.css CHANGED Viewed

@@ -119,6 +119,10 @@
   border-bottom: 1px solid var(--border);
   flex: none;
 }
+/* An h2, and base.css would give it the display face. It opts out: at 15px in a
+   panel header it is a label on a piece of UI rather than a heading anybody
+   reads, and the display face at that size is exactly what #253 was about.
+   why: docs/specification.md#typefaces */
 .ui-drawer__title {
   margin: 0;
   font-family: var(--font-sans);

package/src/styles/dropdown.css CHANGED Viewed

@@ -41,8 +41,20 @@
 /* Panel — the popover surface */
 .ui-dropdown__panel {
+  /* One number for the trigger-to-panel offset, read by both edges here and by
+     the portal's JS, so an upward panel cannot drift from a downward one.
+     why: docs/specification.md#the-dropdown-panel */
+  --ui-dropdown-gap: 9px;
+  /* The panel states its own role rather than inheriting one, because `portal:
+     true` moves it onto <body> and an inherited face is then decided by where
+     the panel was MOUNTED rather than by what it is. Measured: the same dropdown
+     inside a display-face subtree resolved to var(--font-display) in place and
+     var(--font-sans) once portalled — a positioning flag changing the typeface.
+     A list of item rows is text, so it is the text face in both placements.
+     why: docs/specification.md#typefaces */
+  font-family: var(--font-sans);
   position: absolute;
-  top: calc(100% + 9px);
+  top: calc(100% + var(--ui-dropdown-gap));
   left: 0;
   min-width: 240px;
   background: var(--surface-2);
@@ -63,8 +75,33 @@
 }
 .ui-dropdown__panel.is-end { left: auto; right: 0; }
 .ui-dropdown__panel.is-scroll { max-height: 300px; overflow-y: auto; }
+/* Opening upward. The kit releases its own `top` here so that nothing outside
+   the kit has to: an absolute box with both edges pinned is stretched between
+   them, and a consumer who set `bottom` and left our `top` standing got a
+   fourteen-pixel panel. The entry travel is mirrored too, so the panel arrives
+   from the trigger whichever way it opens.
+   why: docs/specification.md#the-dropdown-panel */
+.ui-dropdown__panel.is-up {
+  top: auto;
+  bottom: calc(100% + var(--ui-dropdown-gap));
+  transform: translateY(6px);
+}
 .ui-dropdown.open .ui-dropdown__panel { opacity: 1; visibility: visible; transform: translateY(0); }
+/* Portalled panel — wireDropdown() moves it onto <body>, clear of every
+   ancestor's overflow and every ancestor's stacking context. The descendant
+   selector above stops matching the moment it leaves the trigger's subtree, so
+   its open state is a class of its own; the wiring writes the viewport
+   coordinates inline, and these `auto`s are what it writes over.
+   why: docs/specification.md#the-dropdown-panel */
+.ui-dropdown__panel--portal {
+  position: fixed;
+  top: auto; right: auto; bottom: auto; left: auto;
+}
+.ui-dropdown__panel--portal.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
 /* Item row — [icon] [main: label + desc] [badge] [tick] */
 .ui-dropdown__item {
   display: flex;

package/src/styles/layout.css CHANGED Viewed

@@ -55,6 +55,9 @@
   gap: var(--space-2);
   padding: 2px 6px;
   text-decoration: none;
+  /* display: brand — the rail's lockup is the same mark topbar.css sets, and the
+     two have to be the same face or the shell reads as two products. */
+  font-family: var(--font-display);
   font-weight: var(--weight-semibold);
   letter-spacing: var(--tracking-tight);
 }

package/src/styles/topbar.css CHANGED Viewed

@@ -30,6 +30,10 @@
   display: inline-flex;
   align-items: center;
   gap: 9px;
+  /* display: brand — a wordmark is the mark, not text. It is two words beside a
+     glyph and it is what the product is recognised by, so it keeps the display
+     face at every size it is set at, including the 13px below. */
+  font-family: var(--font-display);
   font-weight: 600;
   color: var(--strong);
   text-decoration: none;

package/src/tokens/tokens.css CHANGED Viewed

@@ -42,8 +42,17 @@
   --container: 1120px;
   --measure: 860px;
-  /* -- Typography --------------------------------------------------------- */
-  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  /* -- Typography ---------------------------------------------------------
+   * Two roles, not one family. --font-display is the brand voice — headings,
+   * brand lockups, large readouts — and --font-sans is what an application is
+   * actually made of: tables, fields, paragraphs, chat. Poppins is a geometric
+   * display grotesque and holds its character at heading sizes; at 13-14px it
+   * smears, worst of all in Cyrillic, which is where the kit spends most of its
+   * pixels. IBM Plex Sans is humanist and narrower, and its Cyrillic was drawn
+   * by the same team as its Latin.
+   * why: docs/specification.md#typefaces */
+  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
   --text-xs:   11px;