@apliteni/apliteni-ui 0.96.0 → 0.97.0

package/guidelines/button-labels.md

@@ -14,22 +14,22 @@
 
 <!-- rule: glyph-repeats-the-verb -->
 
-**Rule:** Add a glyph beside a label only when it depicts that label’s action, and treat every button in a row the same way.
+**Rule:** Add a glyph beside a label only when it depicts that label’s action, and treat a row’s buttons alike.
 
 **Except:** A dismissing action beside a committing one is not a peer, and stays plain.
 
 **Do:** The arrow downloads, the sheets copy.
 
-**Don't:** A table is what is exported, not the export, and the plain neighbour reads as lesser.
+**Don't:** A table is what is exported, not the export; the plain neighbour reads as lesser.
 
 ## Earn a wordless button
 
 <!-- rule: wordless-earns-it -->
 
-**Rule:** Drop a button’s words only when its glyph is learned everywhere, its action is on the closed list, and its name is left to assistive technology and a hover title.
+**Rule:** Drop a button’s words only when its glyph is learned everywhere, its action is on the closed list, and its name reaches assistive technology and a hover title.
 
-**Except:** [Icon-only controls](https://ui.apli.tech/storybook/?path=/story/guidelines-iconography--iconography) is the list, and it grows by decision. The folded rail shows its names beside the glyphs instead, so those carry no title.
+**Except:** [Icon-only controls](https://ui.apli.tech/storybook/?path=/story/guidelines-iconography--iconography) is the list. The folded rail shows its names beside the glyphs, so they carry no title.
 
 **Do:** Overflow is on that list; the funnel is not.
 
-**Don't:** A funnel could filter, sort or export, and the cog gave up the word that said which.
+**Don't:** A funnel could filter, sort or export; the cog gave up the word that said which.

package/guidelines/iconography.md

@@ -8,7 +8,7 @@
 
 **Why:** Without a legend, readers need labels for unfamiliar glyphs.
 
-**Except:** The list grows by decision, not review debate, and [Earn a wordless button](https://ui.apli.tech/storybook/?path=/story/guidelines-button-labels--button-labels) states the three tests an entry passes. Today: `x` (close or dismiss), `copy` (copy to clipboard), `moreHorizontal` (overflow menu), `moreVertical` (overflow menu), `chevronDown` (expand or collapse), `chevronUp` (expand or collapse). The shell’s own chrome — theme toggle, sidebar toggle, collapsed-rail links — is wordless by a separate decision, not by passing those tests.
+**Except:** [Earn a wordless button](https://ui.apli.tech/storybook/?path=/story/guidelines-button-labels--button-labels) sets the three tests an entry passes, and the list grows by decision. Today: `x` to close or dismiss, `copy` to copy to clipboard, `moreHorizontal` and `moreVertical` for an overflow menu, `chevronDown` and `chevronUp` to expand or collapse. The shell’s chrome — theme toggle, sidebar toggle, collapsed-rail links — is wordless by a separate decision.
 
 **Do:** Show an overflow menu without words; keep the Settings label.
 
@@ -18,15 +18,15 @@
 
 <!-- rule: meaning -->
 
-**Rule:** A circled glyph represents a state; a bare glyph represents an action.
+**Rule:** A circled glyph is a state; a bare glyph is an action.
 
 **Why:** Two meanings force readers to decide from context each time.
 
-**Except:** Most glyphs show a thing, not a state or action, including `globe`, `database`, and `layers`. This split guides component choices, not catalogue organisation.
+**Except:** Most glyphs show a thing, not a state or action, including `globe`, `database` and `layers`. The split guides component choice, not the catalogue.
 
-**Do:** Use `circleX` to report failure and the bare `x` to close a toast.
+**Do:** `circleX` reports the failure; the bare `x` closes the toast.
 
-**Don't:** Use the same `x` for two different meanings.
+**Don't:** The same `x` carries both meanings.
 
 ## Preserve glyph paths
 
@@ -34,13 +34,13 @@
 
 **Rule:** Use the Lucide path unchanged, and state when a glyph name differs.
 
-**Why:** The shared source keeps the set consistent, while the commit records its origin.
+**Why:** One source keeps the set consistent, and a recorded rename still traces back to it.
 
-**Except:** A brand mark without a Lucide original is allowed. `github` and `linkedin` are the vendor’s own marks and belong in BRAND.
+**Except:** A brand mark with no Lucide original is allowed: `github` and `linkedin` are the vendor’s own marks and belong in BRAND.
 
-**Do:** Keep the Lucide path unchanged and document a different name.
+**Do:** `circleCheck` is Lucide’s circle-check-big, path unchanged and name recorded.
 
-**Don't:** Redraw a Lucide path or rename the glyph without recording its original name.
+**Don't:** A redrawn path, or a rename nobody recorded.
 
 ## Status stroke width
 
@@ -48,10 +48,10 @@
 
 **Rule:** Stroke a status glyph at 1.5 CSS px or wider, or require 4.5:1 text contrast instead of 3:1 graphic contrast.
 
-**Why:** Visible width is `stroke-width × box ÷ 24`; below 1.5 CSS px, the stroke reads as a text stem and needs 4.5:1, while above it uses WCAG 1.4.11’s 3:1 graphic bar.
+**Why:** Visible width is `stroke-width × box ÷ 24`; below 1.5 CSS px a stroke reads as a text stem and needs 4.5:1; above it, WCAG 1.4.11’s 3:1 graphic bar applies.
 
 **Except:** Non-status glyphs, such as close buttons and chevrons, have no five-status pair to measure; their control owns their contrast.
 
-**Do:** Use a stroke at least 1.5 CSS px wide before using the 3:1 graphic contrast minimum.
+**Do:** A 1.5 CSS px stroke, held to 3:1.
 
-**Don't:** Accept a thinner status stroke at only 3:1 contrast.
+**Don't:** A thinner stroke, still only 3:1.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.96.0",
+  "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,