@apliteni/apliteni-ui 0.129.0 → 0.130.0

package/package.json

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

package/react/README.md

@@ -585,6 +585,13 @@ or neutral. Notices disappear after five seconds, pausing while hovered or focus
 Danger notices are announced assertively; other tones are polite. An `action` with a `label` and
 `onClick` stays until selected or dismissed. New notices appear at the bottom.
 
+Pass `compact: true` to show only the title, or `dismissible: false` to hide the
+close button. Hiding the close button keeps the five-second timer for notices
+without actions; notices with actions remain until their action is selected, so a
+notice with an action and no close button has no other dismissal affordance.
+Pass `timer: 12` to dismiss a notice after that many seconds. Pass `timer: false` or `timer: 0`
+to keep a notice until it is dismissed.
+
 ```tsx
 function SaveButton() {
   const push = useToast();

package/react/dist/index.d.ts

@@ -778,6 +778,9 @@ declare const SearchField: react.ForwardRefExoticComponent<Omit<InputHTMLAttribu
 
 type ToastNotice = {
     tone?: 'success' | 'danger' | 'warn' | 'info' | 'neutral';
+    compact?: boolean;
+    dismissible?: boolean;
+    timer?: boolean | number;
     title: string;
     text?: string;
     action?: {

package/react/dist/index.js

@@ -3432,11 +3432,13 @@ function Notice({ notice, remove }) {
   const root = useRef18(null);
   const [leaving2, setLeaving] = useState12(false);
   const dismissed = useRef18(false);
-  const remaining = useRef18(5e3);
   const [hovered, setHovered] = useState12(false);
   const [focused, setFocused] = useState12(false);
   const paused = hovered || focused;
   const tone = notice.tone ?? "success";
+  const timed = !notice.action && notice.timer !== false && notice.timer !== 0;
+  const duration = typeof notice.timer === "number" ? notice.timer * 1e3 : 5e3;
+  const remaining = useRef18(duration);
   const dismiss = useCallback5(() => {
     if (dismissed.current) return;
     dismissed.current = true;
@@ -3458,19 +3460,19 @@ function Notice({ notice, remove }) {
     }
   }, [leaving2, remove]);
   useEffect12(() => {
-    if (leaving2 || notice.action || paused) return;
+    if (leaving2 || !timed || paused) return;
     const started = Date.now();
     const timer = setTimeout(dismiss, remaining.current);
     return () => {
       clearTimeout(timer);
       remaining.current = Math.max(0, remaining.current - (Date.now() - started));
     };
-  }, [dismiss, leaving2, notice.action, paused]);
+  }, [dismiss, leaving2, paused, timed]);
   return /* @__PURE__ */ jsxs27(
     "div",
     {
       ref: root,
-      className: `ui-toast ui-toast--${tone} ui-toast--soft${leaving2 ? " is-leaving" : ""}`,
+      className: `ui-toast ui-toast--${tone} ui-toast--soft${notice.compact ? " ui-toast--compact" : ""}${leaving2 ? " is-leaving" : ""}`,
       role: tone === "danger" ? "alert" : "status",
       "aria-live": tone === "danger" ? "assertive" : "polite",
       onMouseEnter: () => setHovered(true),
@@ -3483,7 +3485,7 @@ function Notice({ notice, remove }) {
         /* @__PURE__ */ jsx32("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx32(Icon, { name: glyphs[tone] }) }),
         /* @__PURE__ */ jsxs27("div", { className: "ui-toast__body", children: [
           /* @__PURE__ */ jsx32("div", { className: "ui-toast__title", children: notice.title }),
-          notice.text && /* @__PURE__ */ jsx32("div", { className: "ui-toast__text", children: notice.text })
+          !notice.compact && notice.text && /* @__PURE__ */ jsx32("div", { className: "ui-toast__text", children: notice.text })
         ] }),
         notice.action && /* @__PURE__ */ jsx32(
           "button",
@@ -3500,13 +3502,13 @@ function Notice({ notice, remove }) {
             children: notice.action.label
           }
         ),
-        /* @__PURE__ */ jsx32("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx32(Icon, { name: "x" }) }),
-        !notice.action && /* @__PURE__ */ jsx32(
+        notice.dismissible !== false && /* @__PURE__ */ jsx32("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx32(Icon, { name: "x" }) }),
+        timed && /* @__PURE__ */ jsx32(
           "span",
           {
             className: "ui-toast__timer is-running",
             "aria-hidden": "true",
-            style: { animationPlayState: paused ? "paused" : "running" }
+            style: { animationDuration: `${duration}ms`, animationPlayState: paused ? "paused" : "running" }
           }
         )
       ]

package/src/components/toasts.js

@@ -16,6 +16,9 @@ import { toast } from './index.js';
 const reduceMotion = () =>
   typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
 
+const resolve = (container) =>
+  (typeof container === 'string' ? document.querySelector(container) : container) || null;
+
 // Slide-and-fade a toast out, then remove it. Idempotent.
 export function dismissToast(el) {
   if (!el || el.dataset.leaving) return;
@@ -36,20 +39,41 @@ function wireToast(el) {
   el.querySelector('.ui-toast__close')?.addEventListener('click', () => dismissToast(el));
 
   const bar = el.querySelector('[data-toast-timer]');
-  if (bar && !reduceMotion()) {
+  if (bar) {
     bar.classList.add('is-running');
     const dur = parseFloat(getComputedStyle(el).getPropertyValue('--toast-dur')) || 5;
-    let timer = setTimeout(() => dismissToast(el), dur * 1000);
-    el.addEventListener('mouseenter', () => { clearTimeout(timer); bar.style.animationPlayState = 'paused'; });
-    el.addEventListener('mouseleave', () => {
-      bar.style.animationPlayState = 'running';
-      const left = (parseFloat(getComputedStyle(bar).transform.split(',')[0].slice(7)) || 1);
-      timer = setTimeout(() => dismissToast(el), dur * 1000 * left);
-    });
-  } else if (bar && reduceMotion()) {
-    // No animated bar under reduced motion, but still auto-dismiss on time.
-    const dur = parseFloat(getComputedStyle(el).getPropertyValue('--toast-dur')) || 5;
-    setTimeout(() => dismissToast(el), dur * 1000);
+    let remaining = dur * 1000;
+    let started = Date.now();
+    let timer = setTimeout(() => dismissToast(el), remaining);
+    // The line's own pause lives in the sheet, on :hover and :focus-within, so
+    // it covers a keyboard reader too. What is left here is the countdown that
+    // has to stop with it. This runs even under reduced motion, where the line
+    // is hidden but the reader still gets the same hold.
+    let held = false;
+    const hold = () => {
+      if (held) return;
+      held = true;
+      clearTimeout(timer);
+      const visualLeft = !reduceMotion()
+        ? parseFloat(getComputedStyle(bar).transform.split(',')[0].slice(7))
+        : NaN;
+      remaining = Number.isFinite(visualLeft)
+        ? dur * 1000 * visualLeft
+        : Math.max(0, remaining - (Date.now() - started));
+    };
+    const release = () => {
+      if (!held || el.matches(':hover, :focus-within')) return;
+      held = false;
+      started = Date.now();
+      timer = setTimeout(() => dismissToast(el), remaining);
+    };
+    el.addEventListener('mouseenter', hold);
+    el.addEventListener('mouseleave', release);
+    el.addEventListener('focusin', hold);
+    // At focusout the old target has already blurred and the new one has not
+    // focused yet, so :focus-within reads false even for a move from the close
+    // button to the action. relatedTarget is the only thing that knows.
+    el.addEventListener('focusout', (e) => { if (!el.contains(e.relatedTarget)) release(); });
   }
 
   // Swipe-to-dismiss (ignore drags that start on a button).
@@ -77,7 +101,7 @@ function wireToast(el) {
 
 // Wire every toast currently inside a container (string selector or element).
 export function wireToastStack(container) {
-  const root = typeof container === 'string' ? document.querySelector(container) : container;
+  const root = resolve(container);
   if (!root) return null;
   root.querySelectorAll('.ui-toast').forEach(wireToast);
   return root;
@@ -85,7 +109,7 @@ export function wireToastStack(container) {
 
 // Build a toast from opts, prepend it to a live stack (newest on top), wire it.
 export function pushToast(container, opts = {}) {
-  const root = typeof container === 'string' ? document.querySelector(container) : container;
+  const root = resolve(container);
   if (!root) return null;
   root.insertAdjacentHTML('afterbegin', toast(opts));
   const el = root.firstElementChild;

package/src/styles/callout.css

@@ -93,9 +93,16 @@
 .ui-toast__close:hover { color: var(--text); }
 .ui-toast__close:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--radius-xs); }
 
-/* auto-dismiss progress bar — .is-running is added by wireToastStack() */
+/* auto-dismiss progress line — .is-running is added by wireToastStack() */
 .ui-toast__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--toast-accent); opacity: 0.85; transform-origin: left; }
-.ui-toast__timer.is-running { animation: ui-toast-timer var(--toast-dur, 5s) linear forwards; /* motion: ambient — the bar spends the toast's dismiss timer, which the caller sets */ }
+.ui-toast__timer.is-running { animation: ui-toast-timer var(--toast-dur, 5s) linear forwards; /* motion: ambient — the line spends the toast's dismiss timer, which the caller sets */ }
+/* The line spends the notice's own timer, so it stops exactly when the timer
+   does: under the pointer, and while focus is anywhere inside. Holding both
+   pauses here rather than in each face's event wiring keeps the line and the
+   countdown from drifting apart, and gives a keyboard reader the same reprieve
+   a pointer reader gets. */
+.ui-toast:hover > .ui-toast__timer.is-running,
+.ui-toast:focus-within > .ui-toast__timer.is-running { animation-play-state: paused; }
 
 /* Legacy style classes share the neutral card. */
 .ui-toast--soft, .ui-toast--solid, .ui-toast--outline { background: var(--surface); color: var(--text); }
@@ -110,7 +117,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   .ui-toast, .ui-toast.is-leaving { animation: none; }
-  .ui-toast__timer.is-running { animation: none; }
+  /* A line that cannot move sits full for the whole five seconds and reads as
+     "no time spent yet" — the opposite of what it is there to say. The notice
+     still expires on time; only the false readout goes. */
+  .ui-toast__timer { display: none; }
 }
 
 /* stack container for queued toasts */