@apliteni/apliteni-ui 0.132.0 → 0.136.0

package/src/components/feedback.js

@@ -100,7 +100,7 @@ export function wireFeedback(opts = {}) {
   const minChars = opts.minChars == null ? 3 : opts.minChars;
   const sectionFn = typeof opts.section === 'function' ? opts.section : defaultSection;
   const onSend = typeof opts.onSend === 'function' ? opts.onSend : async () => ({ ok: false, error: 'No submit handler configured.' });
-  let pending = null, markSpan = null;
+  let pending = null, markSpan = null, opening = 0;
 
   function showPill(range) {
     const r = range.getBoundingClientRect();
@@ -141,6 +141,7 @@ export function wireFeedback(opts = {}) {
 
   function open() {
     if (!pending) return;
+    opening++;
     hidePill();
     quoteEl.textContent = pending.text.length > 200 ? pending.text.slice(0, 200) + '…' : pending.text;
     chip.textContent = pending.label || 'this page';
@@ -154,7 +155,7 @@ export function wireFeedback(opts = {}) {
   pill.addEventListener('mousedown', (e) => e.preventDefault());
   pill.addEventListener('click', open);
 
-  function close() { composer.classList.remove('show'); scrim.classList.remove('show'); clearHighlight(); pending = null; }
+  function close() { opening++; composer.classList.remove('show'); scrim.classList.remove('show'); clearHighlight(); pending = null; }
   q('[data-fb-close]').addEventListener('click', close);
   q('[data-fb-cancel]').addEventListener('click', close);
   q('[data-fb-done-close]').addEventListener('click', close);
@@ -168,12 +169,14 @@ export function wireFeedback(opts = {}) {
   }
   sendBtn.addEventListener('click', async () => {
     if (sendBtn.disabled || !pending) return;
+    const sentOpening = opening;
     errEl.classList.remove('show'); sendBtn.disabled = true; sendLb.innerHTML = '<span class="ui-fbspin"></span>Sending';
     const payload = { note: note.value.trim(), excerpt: pending.text, anchor: pending.anchor, sectionLabel: pending.label, sectionTitle: pending.title };
     try {
       const res = await onSend(payload);
+      if (opening !== sentOpening) return;
       if (!res || !res.ok) { fail(res && res.error); return; }
       form.style.display = 'none'; done.style.display = ''; clearHighlight();
-    } catch (e) { fail(); }
+    } catch (e) { if (opening === sentOpening) fail(); }
   });
 }

package/src/components/footer.js

@@ -13,18 +13,20 @@ const cx = (...a) => a.filter(Boolean).join(' ');
 // Minimal brand-glyph set for the optional social row. Feather-ish where generic,
 // simplified brand marks otherwise. Kept local so the footer is self-contained
 // (the shared icon set is line-only and has no brand glyphs).
+// LinkedIn: Font Awesome Free brands/linkedin.svg, CC BY 4.0.
 const SOCIAL = {
   github: '<path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.53 2.34 1.09 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.64 0 0 .84-.27 2.75 1.02a9.5 9.5 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.37.2 2.39.1 2.64.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2z"/>',
   x: '<path d="M4 3h4.5l4 5.5L17.5 3H21l-6.5 8.5L21 21h-4.5l-4.3-5.9L7 21H3.5l6.8-8.9z"/>',
-  linkedin: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 10v6M8 7v.01M12 16v-3a2 2 0 0 1 4 0v3" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>',
+  linkedin: '<path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>',
   mail: '<rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="m3 7 9 6 9-6" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>',
 };
 
 function socialLink({ label, href = '#', icon: ic = 'github' } = {}) {
   const glyph = SOCIAL[ic] || SOCIAL.github;
-  const fill = ic === 'github' || ic === 'x' ? 'currentColor' : 'none';
+  const fill = ic === 'mail' ? 'none' : 'currentColor';
+  const viewBox = ic === 'linkedin' ? '0 0 448 512' : '0 0 24 24';
   return `<a class="ui-footer__social" href="${esc(safeUrl(href))}" aria-label="${esc(label || ic)}">` +
-    `<svg viewBox="0 0 24 24" fill="${fill}" aria-hidden="true">${glyph}</svg></a>`;
+    `<svg viewBox="${viewBox}" fill="${fill}" aria-hidden="true">${glyph}</svg></a>`;
 }
 
 function linkList(links = []) {

package/src/components/index.js

@@ -48,9 +48,11 @@ export function button({
 }
 
 // ---- Badge / Pill --------------------------------------------------------
+// Neutral is written out rather than left implied: a status column reading its tone off the
+// class list found nothing on two of four rows, and the tone a chip is in is not a default
+// the markup should have to know. The base class carries the same fill either way. #459
 export function badge(label, variant = 'neutral') {
-  const v = variant === 'neutral' ? '' : `ui-badge--${variant}`;
-  return `<span class="${esc(cx('ui-badge', v))}">${esc(label)}</span>`;
+  return `<span class="${esc(cx('ui-badge', `ui-badge--${variant}`))}">${esc(label)}</span>`;
 }
 export function pill(label, variant) {
   return `<span class="${esc(cx('ui-pill', variant && `ui-pill--${variant}`))}">${esc(label)}</span>`;

package/src/styles/button.css

@@ -15,7 +15,7 @@
   font-family: var(--font-sans);
   font-size: var(--btn-font);
   font-weight: var(--weight-medium);
-  line-height: 1;
+  line-height: var(--leading-tight);
   border-radius: var(--radius-sm);
   padding: var(--btn-pad-y) var(--btn-pad-x);
   cursor: pointer;

package/src/styles/card.css

@@ -46,15 +46,14 @@
    why: docs/foundations.md#spacing-and-rhythm */
 .ui-card--fit { width: fit-content; max-width: 100%; }
 
-/* An accent-tinted card, e.g. a highlighted plan / success surface. The accent edge is
-   the card's own hairline re-coloured: an inset ring over it would draw two. #295
+/* An accent-tinted card, e.g. a highlighted plan / success surface. It draws no accent
+   ring: the tint carries the signal and the edge is the plain card edge. #295
    The strength is --card-tint, per theme: light mixes down from white, so a tint that
-   works in dark sinks a light card below the page. Each variant edges itself in its own
-   colour. why: docs/foundations.md#elevation */
+   works in dark sinks a light card below the page. The accent card keeps the plain
+   edge. why: docs/foundations.md#elevation */
 .ui-card--accent {
   --ui-card-ground: color-mix(in srgb, var(--accent) var(--card-tint), var(--surface));
   background: color-mix(in srgb, var(--accent) var(--card-tint), var(--surface));
-  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
 }
 .ui-card--live {
   --ui-card-ground: color-mix(in srgb, var(--green) var(--card-tint), var(--surface));
@@ -77,6 +76,7 @@
    change of level. why: docs/foundations.md#elevation */
 .ui-card--interactive:hover { transform: translateY(-2px); }
 .ui-card--interactive:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
+.ui-card--interactive .ui-card__sub:last-child { margin-bottom: 0; }
 
 /* card() emits the title as an h2, so the text face is named here rather than
    left to the element. why: docs/foundations.md#labels-and-titles */
@@ -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);
@@ -107,6 +111,23 @@
   gap: var(--space-5);
   padding: var(--space-4) 2px;
 }
+/* A choice that does not fit beside its label drops under it whole, never into a column. */
+.ui-card__row:has(> .ui-seg) { flex-wrap: wrap; }
+.ui-card__row:has(> .ui-seg) > :first-child { flex: 1 1 10rem; min-width: 0; }
+.ui-card__row > .ui-seg { flex: none; flex-wrap: nowrap; }
+.ui-card__row > .ui-seg button { white-space: nowrap; }
+@media (max-width: 560px) {
+  .ui-card__row { flex-direction: column; align-items: flex-start; }
+  .ui-card__row > :first-child { width: 100%; }
+  .ui-card__row:has(> .ui-seg) > :first-child { flex: none; }
+}
+/* The Theme choice needs 195px and the narrowest settings row gives it 160. Its pills
+   give up inline padding as the viewport narrows. Other choices keep their tap width. */
+@media (max-width: 560px) {
+  .ui-card__row--tight-choice > .ui-seg:not(.ui-seg--sm):not(.ui-seg--underline) button {
+    padding-inline: clamp(var(--space-1), calc(var(--space-3) - (360px - 100vw) * 0.3), var(--space-3));
+  }
+}
 .ui-card__row + .ui-card__row { border-top: 1px solid var(--border); }
 .ui-card__row .lab { color: var(--strong); font-size: var(--text-md); font-weight: var(--weight-medium); }
 .ui-card__row .hint { color: var(--text); font-size: calc(var(--text-sm) + 0.5px); margin-top: 3px; }

package/src/styles/feedback.css

@@ -45,6 +45,7 @@
     opacity var(--dur-fast) var(--ease);
 }
 .ui-fbpill.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -100%) translateY(-9px) scale(1); }
+.ui-fbpill:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-fbpill.show:hover { transform: translate(-50%, -100%) translateY(-12px) scale(1.04); }
 .ui-fbpill:active { transform: translate(-50%, -100%) translateY(-8px) scale(.98); }
 .ui-fbpill svg { width: 16px; height: 16px; stroke-width: 2.4; color: currentColor; }
@@ -78,14 +79,14 @@
 .ui-fbcomposer.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
 
 .ui-fbc__head { display: flex; align-items: center; gap: 12px; padding: 17px 20px 0; }
-.ui-fbc__chip { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: .01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.ui-fbc__chip { display: inline-flex; align-items: center; gap: 8px; color: var(--strong); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: .01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .ui-fbc__chip svg { width: 14px; height: 14px; flex: none; opacity: .85; stroke-width: 2.7; }
 .ui-fbc__x { margin-left: auto; background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ /* muted-ink: glyph — dismiss icon */ color: var(--dim); border: 0; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; flex: none; font: inherit; }
 .ui-fbc__x:hover { color: var(--strong); }
 .ui-fbc__x:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-fbc__x svg { width: 14px; height: 14px; stroke-width: 2.7; }
 .ui-fbc__quote { margin: 14px 20px 0; background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ border-radius: 12px; padding: 12px 15px; display: flex; gap: 11px; }
-.ui-fbc__qm { color: var(--accent); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: .9; flex: none; opacity: .55; }
+.ui-fbc__qm { color: var(--text); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: .9; flex: none; opacity: .55; }
 .ui-fbc__quote q { quotes: none; color: var(--text); font-style: italic; font-size: calc(var(--text-sm) + 0.5px); line-height: 1.55; }
 .ui-fbc__body { padding: 14px 20px 0; }
 .ui-fbcomposer textarea {
@@ -129,7 +130,7 @@
 @keyframes uiFbCkSpring { 0% { transform: scale(1.32); } 62% { transform: scale(.965); } 82% { transform: scale(1.02); } 100% { transform: scale(1); } }
 
 /* Error banner */
-.ui-fbc__err { margin: 14px 20px 0; background: color-mix(in srgb, var(--pink) 14%, transparent); /* code-bg: inherit — text-only validation message has no nested focus target. */ color: var(--pink); font-size: var(--text-sm); padding: 11px 15px; border-radius: 11px; display: none; }
+.ui-fbc__err { margin: 14px 20px 0; background: color-mix(in srgb, var(--pink) 14%, transparent); /* code-bg: inherit — text-only validation message has no nested focus target. */ color: var(--chip-danger-ink); font-size: var(--text-sm); padding: 11px 15px; border-radius: 11px; display: none; }
 .ui-fbc__err.show { display: block; }
 /* A failed send's line fades in; wireFeedback() adds the class as it shows it. */
 .ui-fbc__err.is-entering { animation: m-fade var(--dur-fast) var(--ease-out) both; }

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/footer.css

@@ -73,8 +73,9 @@
 /* Link columns */
 .ui-footer__nav {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
-  gap: 30px 56px;
+  flex: 1 1 400px;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: 30px 40px;
 }
 .ui-footer__col-title {
   /* rank: label */
@@ -129,7 +130,7 @@
    fourth value of the footer's own: docs/foundations.md#breakpoints. */
 @media (max-width: 720px) {
   .ui-footer__top { flex-direction: column; gap: 30px; }
-  .ui-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; }
+  .ui-footer__nav { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; }
   .ui-footer__brand { max-width: none; }
 }
 @media (max-width: 560px) {

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
@@ -541,10 +543,10 @@
   .ui-app__drawer .ui-app__user-trigger { min-height: 44px; }
   .ui-app__main { padding: 28px var(--space-4) 56px; }
   .ui-app__main h1 { font-size: calc(var(--text-xl) + 3px); }
-  /* A settings row is label-beside-control down to the width where the control
-     no longer fits beside anything; below that it stacks. Scoped to the shell
-     rather than written into card.css, because a card row outside a shell is
-     somebody else's container to size — see the report. */
+  /* A settings row is label-beside-control, and below this step any control that does
+     not fit beside its label drops under it. A row that holds a choice wraps this way at
+     every width, in card.css. Scoped to the shell, because a card row outside a shell
+     is somebody else's container to size. */
   .ui-app__main .ui-card__row { flex-wrap: wrap; gap: var(--space-3); }
 }