@apliteni/apliteni-ui 0.96.1 → 0.97.0

package/package.json

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

package/react/README.md

@@ -658,9 +658,10 @@ size. Neither has a filled disc behind it.
 there is no backdrop layer and no `backdrop` prop. Pass `title`, one short `body`
 line, and React `actions`. There is no `eyebrow` prop: a confirmation carries one
 title and at most one line under it, so put the outcome in the title rather than in a
-label above it. A kit `Button` carries the focus ring already; a router link or
-a plain `<a>` must also take `className="ui-focusable"`, or it falls back to the
-browser's own focus outline. An omitted or empty `actions`
+label above it. A kit `Button` carries the focus ring already, and so does
+a router link or a plain `<a>`: the kit rings every anchor on `:focus-visible`. A
+focusable that is neither — a `div` or `span` given `tabIndex` — still needs
+`className="ui-focusable"`, or it falls back to the browser's own focus outline. An omitted or empty `actions`
 leaves out the actions row. Hero and split default to h1; compact defaults to h2.
 `level` overrides the heading rank, and a value outside 1–6 falls back to that layout
 default. `confetti` enables the existing decorative animation. All three components

package/src/styles/base.css

@@ -141,6 +141,13 @@ svg:where(:not([width]):not([height])) {
    .ui-focusable, in the vanilla topbar, React ThemeToggle and the React shell's bar
    alike, so keyboard focus on it fell back to the browser's own outline in all three.
    It has no class of its own to opt in with; it joins the list instead. Found on #385. */
+/* `a` is here as an ELEMENT, not a class, because a link in running text is the one
+   control a consumer writes with no class on it at all — so it took the browser's
+   outline, which #457 refused. The net is over every anchor; a component that rings
+   its own anchor outranks this at two classes and keeps the shape it chose. The band
+   sits at whatever corner the link carries, which is the rule .ui-table's links
+   already take. Found on #586, decided on #587. */
+a:focus-visible,
 .ui-focusable:focus-visible,
 .ui-snippet :focus-visible,
 .ui-btn:focus-visible,

package/src/styles/table.css

@@ -145,14 +145,12 @@
   top: 50%;
   translate: 0 -50%;
 }
-/* And on keyboard focus every link in a table takes the kit ring, at whatever corner it
-   carries, so none falls back to the browser's own outline. `.ui-btn` has the ring already.
-   why: guidelines/state-set.md#focus-rings
-   held by: src/styles/table-focus.test.js */
-.ui-table a:not(.ui-btn):focus-visible {
-  outline: var(--ring);
-  outline-offset: var(--ring-offset);
-}
+/* No focus rule here any more. #510 gave a cell link the ring with a rule of this file's
+   own, because `base.css` reached no bare `a`; #587 put `a` on that shared list, so this
+   one painted the same two declarations a second time. The guarantee is unchanged and
+   still held by src/styles/table-focus.test.js — the corner the band follows is the
+   `border-radius` above, which is this file's and stays.
+   why: guidelines/state-set.md#focus-rings */
 
 .ui-table__num { text-align: right; font-variant-numeric: tabular-nums; }
 /* A numeric column is sized to its content while .ui-table__title claims the rest,