@apliteni/apliteni-ui 0.133.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/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 */
@@ -111,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/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

@@ -543,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); }
 }