@karyl-chan/ui 0.4.0 → 0.5.0

package/src/lib/focus.ts

@@ -0,0 +1,67 @@
+/**
+ * Focus helpers for dialog-style overlays (focus-in on open, Tab trap,
+ * focus restore on close).
+ */
+
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  "audio[controls]",
+  "video[controls]",
+  "summary",
+  '[contenteditable]:not([contenteditable="false"])',
+  "[tabindex]",
+].join(",");
+
+function isVisible(el: HTMLElement): boolean {
+  if (el.closest("[hidden], [inert]")) return false;
+  // `checkVisibility` covers display:none / visibility:hidden ancestors.
+  // Environments without it (older engines, jsdom) count it as visible.
+  const check = (el as HTMLElement & { checkVisibility?: () => boolean })
+    .checkVisibility;
+  return typeof check === "function" ? check.call(el) : true;
+}
+
+/** Tabbable descendants of `container`, in DOM order. */
+export function getFocusable(container: HTMLElement): HTMLElement[] {
+  return Array.from(
+    container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+  ).filter((el) => el.tabIndex >= 0 && isVisible(el));
+}
+
+/**
+ * Keep Tab / Shift+Tab cycling inside `container`. Call from the
+ * container's keydown handler; returns true when it handled the key.
+ */
+export function trapTabKey(event: KeyboardEvent, container: HTMLElement): boolean {
+  if (event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey) {
+    return false;
+  }
+  const items = getFocusable(container);
+  if (items.length === 0) {
+    event.preventDefault();
+    container.focus();
+    return true;
+  }
+  const first = items[0];
+  const last = items[items.length - 1];
+  const active = document.activeElement as HTMLElement | null;
+  const inside = !!active && container.contains(active);
+  if (event.shiftKey) {
+    if (!inside || active === first || active === container) {
+      event.preventDefault();
+      last.focus();
+      return true;
+    }
+  } else if (!inside || active === last) {
+    event.preventDefault();
+    first.focus();
+    return true;
+  }
+  return false;
+}

package/src/stores/toastStore.ts

@@ -1,24 +1,62 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
+/**
+ * Toast severity. `error` / `warn` are announced assertively
+ * (role="alert"); `info` / `success` politely (role="status").
+ */
+export type ToastType = "error" | "warn" | "info" | "success";
+
+export interface ToastOptions {
+  /**
+   * Auto-dismiss delay in ms. Default 4000. `0` makes the toast sticky:
+   * it stays until the user closes it (close button) or `dismiss(id)`.
+   */
+  duration?: number;
+}
+
 export interface ToastItem {
   id: number;
   message: string;
-  type: "error" | "info";
+  type: ToastType;
+  /** Auto-dismiss delay in ms; `0` = sticky. Always set by `show()`. */
+  duration?: number;
 }
 
+/** Default auto-dismiss delay, unchanged from the original store. */
+export const DEFAULT_TOAST_DURATION = 4000;
+
 let nextId = 0;
 
 export const useToastStore = defineStore("toast", () => {
   const items = ref<ToastItem[]>([]);
+  const timers = new Map<number, ReturnType<typeof setTimeout>>();
 
-  function show(message: string, type: ToastItem["type"] = "error") {
+  /**
+   * Show a toast. `type` defaults to `'error'` (the original behaviour).
+   * Returns the toast id, usable with `dismiss(id)`.
+   */
+  function show(
+    message: string,
+    type: ToastType = "error",
+    options: ToastOptions = {},
+  ): number {
     const id = nextId++;
-    items.value = [...items.value, { id, message, type }];
-    setTimeout(() => dismiss(id), 4000);
+    const raw = options.duration ?? DEFAULT_TOAST_DURATION;
+    const duration = Number.isFinite(raw) && raw > 0 ? raw : 0;
+    items.value = [...items.value, { id, message, type, duration }];
+    if (duration > 0) {
+      timers.set(id, setTimeout(() => dismiss(id), duration));
+    }
+    return id;
   }
 
   function dismiss(id: number) {
+    const timer = timers.get(id);
+    if (timer !== undefined) {
+      clearTimeout(timer);
+      timers.delete(id);
+    }
     items.value = items.value.filter((t) => t.id !== id);
   }
 

package/src/tokens.css

@@ -57,6 +57,12 @@
 
     --pill-bg: #f3f4f6;
 
+    /* Unread / mention indicator (UnreadPill etc.). Same in both themes. */
+    --unread-accent: #f23f43;
+
+    /* Monospaced stack for IDs, keys, code-ish values. */
+    --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
+
     --transition-fast: 0.12s;
     --transition-base: 0.15s;
     --transition-slow: 0.2s;