@apliteni/apliteni-ui 0.25.0 → 0.25.3

package/package.json

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

package/react/README.md

@@ -31,6 +31,14 @@ import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 
 Components: `DataTable`, `Modal`, `Button`, `Badge`, `Card`, `Icon`.
 
+## What the Modal does with focus
+
+Opening moves focus to the first eligible control in the body, in DOM order, or to
+the dialog itself if none exists. Links and disclosure summaries are eligible; hidden
+controls, disabled controls, controls inside a closed disclosure and elements with a
+negative tabindex are skipped. Tab and Shift+Tab wrap at the ends of the same list.
+Escape and a click on the scrim dismiss the dialog and return focus to its opener.
+
 ## Work on them
 
 From the repo root — one `npm install` covers the workspace:

package/react/dist/index.js

@@ -84,7 +84,25 @@ function Card({ title, sub, children }) {
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), details > summary:first-of-type';
+function tabbable(el) {
+  const tabindex = el.getAttribute("tabindex");
+  if (tabindex !== null && Number(tabindex) < 0) return false;
+  if (el.matches(":disabled")) return false;
+  for (let node = el; node; node = node.parentElement) {
+    if (node.inert || node.hasAttribute("inert") || node.hasAttribute("hidden")) return false;
+    const holder = node.parentElement;
+    const folded = holder?.tagName === "DETAILS" && !holder.open;
+    if (folded && node !== holder.querySelector(":scope > summary")) return false;
+  }
+  return typeof el.checkVisibility !== "function" || el.checkVisibility({ visibilityProperty: true });
+}
+var tabbablesIn = (root) => Array.from(root.querySelectorAll(FOCUSABLE)).filter(tabbable);
+var dismissOnScrim = (onClose) => (e) => {
+  if (e.target !== e.currentTarget) return;
+  e.preventDefault();
+  onClose();
+};
 function Modal({ open, title, onClose, footer, children }) {
   const panel = useRef(null);
   useEffect(() => {
@@ -95,7 +113,7 @@ function Modal({ open, title, onClose, footer, children }) {
         return;
       }
       if (e.key !== "Tab" || !panel.current) return;
-      const items = Array.from(panel.current.querySelectorAll(FOCUSABLE));
+      const items = tabbablesIn(panel.current);
       if (items.length === 0) {
         e.preventDefault();
         panel.current.focus();
@@ -112,7 +130,7 @@ function Modal({ open, title, onClose, footer, children }) {
       if (!e.shiftKey && active === last) {
         e.preventDefault();
         first.focus();
-      } else if (e.shiftKey && active === first) {
+      } else if (e.shiftKey && (active === first || active === panel.current)) {
         e.preventDefault();
         last.focus();
       }
@@ -133,16 +151,13 @@ function Modal({ open, title, onClose, footer, children }) {
   }, [open]);
   useEffect(() => {
     if (!open) return;
-    const target = panel.current?.querySelector(
-      ".rx-modal__body input, .rx-modal__body select, .rx-modal__body textarea, .rx-modal__body button"
-    ) || panel.current;
+    const body = panel.current?.querySelector(".rx-modal__body");
+    const target = (body ? tabbablesIn(body) : [])[0] || panel.current;
     target?.focus();
   }, [open]);
   if (!open) return null;
   return createPortal(
-    /* @__PURE__ */ jsx5("div", { className: "rx-scrim", onMouseDown: (e) => {
-      if (e.target === e.currentTarget) onClose();
-    }, children: /* @__PURE__ */ jsxs3("div", { className: "rx-modal", role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, ref: panel, children: [
+    /* @__PURE__ */ jsx5("div", { className: "rx-scrim", onMouseDown: dismissOnScrim(onClose), children: /* @__PURE__ */ jsxs3("div", { className: "rx-modal", role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, ref: panel, children: [
       /* @__PURE__ */ jsxs3("div", { className: "rx-modal__head", children: [
         /* @__PURE__ */ jsx5("div", { className: "rx-modal__title", children: title }),
         /* @__PURE__ */ jsx5(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })

package/src/styles/callout.css

@@ -83,7 +83,7 @@
 .ui-toast__action { flex: none; align-self: center; background: none; border: 0; padding: 4px 9px; border-radius: var(--radius-xs); font: inherit; font-weight: var(--weight-medium); color: var(--toast-action-ink); cursor: pointer; }
 .ui-toast__action:hover { background: color-mix(in srgb, var(--bg) 55%, transparent); }
 
-.ui-toast__close { flex: none; align-self: flex-start; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; position: relative; }
+.ui-toast__close { flex: none; align-self: flex-start; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; position: relative; font: inherit; }
 .ui-toast__close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }
 /* The target, not the ink. WCAG 2.5.8 measures what a pointer can land on, and
    the drawn button is 19x19 — a 15px glyph in 2px of padding. Growing the box

package/src/styles/card.css

@@ -43,6 +43,13 @@
 /* Interactive card (link / button semantics) */
 .ui-card--interactive {
   cursor: pointer;
+  /* Written as a <button>, the card would take the browser's frame, centred text
+     and `font: 400 13.3333px Arial` — a shorthand, so `font: inherit` and not the
+     family longhand. .ui-card already states its own background, and the light
+     theme's border rule is (0,3,0) so `border: 0` here cannot reach it. #251 */
+  border: 0;
+  text-align: left;
+  font: inherit;
   transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease);
 }
 .ui-card--interactive:hover {

package/src/styles/drawer.css

@@ -142,6 +142,7 @@
   background: transparent;
   border: 1px solid transparent;
   border-radius: var(--radius-sm);
+  font: inherit;
   transition:
     color var(--dur-fast) var(--ease),
     background var(--dur-fast) var(--ease),

package/src/styles/dropdown.css

@@ -102,15 +102,27 @@
 }
 .ui-dropdown__panel--portal.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
 
-/* Item row — [icon] [main: label + desc] [badge] [tick] */
+/* Item row — [icon] [main: label + desc] [badge] [tick]. A row is a <div>, an
+   <a href> or a <button>: `is-selected` and __tick below mean a row gets
+   chosen, and choosing is a button's job. So the tag's own styling is reset
+   here, the way .ui-nav__item resets it, and the three render identically.
+   why: docs/specification.md#a-dropdown-row-is-a-div-a-link-or-a-button */
 .ui-dropdown__item {
   display: flex;
   gap: 11px;
   align-items: center;
+  width: 100%;
   padding: 9px 12px;
+  border: 0;
   border-radius: var(--radius-sm);
+  background: none;
   cursor: pointer;
+  text-align: left;
   text-decoration: none;
+  /* `font`, not `font-family`: the UA writes one shorthand, `font: 400 13.3333px
+     Arial`, so answering its family alone leaves the size and the line-height
+     standing. The same answer .ui-toast__action gives. */
+  font: inherit;
   color: var(--text);
   transition: background var(--dur-fast) var(--ease);
 }

package/src/styles/feedback.css

@@ -22,6 +22,16 @@
   transform: translate(-50%, -100%) translateY(-4px) scale(.82); transform-origin: bottom center;
   display: inline-flex; align-items: center; gap: 9px;
   background: var(--ui-fb-pill-grad); color: var(--accent-contrast);
+  /* The pill is a click target the kit renders as a bare <div>, so the consumer who
+     needs it from the keyboard writes it as a <button> — which brings a 2px outset
+     frame around the gradient, a centred line and `font: 400 13.3333px Arial`. Stated
+     here rather than taken from the element. `font` and not `font-family`, because
+     Chrome's rule is the shorthand; the three longhands after it keep what the pill
+     wants and only the leading comes from the shorthand, which is the 1.62 the pill
+     already inherits as a div. `text-align` paints nothing on an inline-flex box
+     either way and is declared because leaving it to the element is the dependency
+     this refuses. why: #251 */
+  border: 0; text-align: center; font: inherit;
   font-family: var(--font-sans); font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: .01em;
   padding: 9px 17px 9px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap; overflow: hidden;
   box-shadow: 0 10px 26px var(--ui-fb-pill-glow),
@@ -68,7 +78,7 @@
 .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: 13px; 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-2); color: var(--dim); border: 0; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; flex: none; }
+.ui-fbc__x { margin-left: auto; background: var(--surface-2); 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 svg { width: 14px; height: 14px; stroke-width: 2.7; }
 .ui-fbc__quote { margin: 14px 20px 0; background: var(--surface-2); border-radius: 12px; padding: 12px 15px; display: flex; gap: 11px; }

package/src/styles/topbar.css

@@ -79,6 +79,7 @@
   color: var(--text);
   border: 1px solid var(--border);
   border-radius: 10px;
+  font: inherit;
   transition:
     transform var(--dur-fast) var(--ease),
     background var(--dur-fast) var(--ease),
@@ -146,6 +147,17 @@
   padding: 10px 13px;
   border-radius: 10px;
   cursor: pointer;
+  /* What a browser paints on a <button> before any author rule runs. A consumer
+     reaches for <button> whenever the row has to work from the keyboard, so the
+     row states these rather than taking them from the element. `font` and not
+     `font-family`: Chrome's rule is the shorthand `font: 400 13.3333px Arial`,
+     and answering the family alone leaves a row 2.25px shorter in type 1.17px
+     smaller. Any font longhand a rule keeps goes after it. why: #251 */
+  width: 100%;
+  background: none;
+  border: 0;
+  text-align: left;
+  font: inherit;
   transition: background var(--dur-fast) var(--ease);
 }
 .vopt:hover { background: var(--surface); }
@@ -178,6 +190,7 @@
   border: 1px solid var(--border);
   background: linear-gradient(145deg, var(--accent-strong), var(--purple));
   color: var(--accent-contrast);
+  font: inherit;
   font-weight: 600;
   font-size: 12.5px;
   display: grid;