@jonmilner/ui 0.2.3 → 0.2.4

package/dist/docs/Button.md

@@ -73,7 +73,7 @@ The labelled action: a `<button type="button">` with the house look, or a link s
 ## Accessibility
 
 - A button that goes somewhere is a link (`as="a"` with `href`); one that does something is a button.
-- Disabled and loading buttons stay in the tab order, so keyboard and screen reader users find them; Enter and Space do nothing while either is set.
+- Disabled and loading buttons stay in the tab order, so keyboard and screen reader users find them; Enter and Space do nothing while either is set. The blocked click still bubbles to an ancestor's `onClick` (see Clickable's Rules).
 - State is never color alone: disabled adds a dashed border, loading shows the dots. Under forced colors the button keeps its system colors (`LinkText` fill for `primary` and `danger`, a `CanvasText` border for `secondary`) and a disabled one is `GrayText`. Hover draws no tint there, so the system pairs keep their contrast.
 - Under reduced motion the dots hold still.
 - Text on every variant passes 4.5:1 at rest and on hover in light and dark modes.

package/dist/docs/Clickable.md

@@ -21,11 +21,26 @@ The low-level base for everything a user presses: a `<button type="button">` by
 - `busy` renders `aria-busy="true"` and blocks activation the same way. Pair it with a visible change (a spinner or new label).
 - Set state with `disabled` and `busy`, not `aria-disabled` and `aria-busy`. A raw attribute still blocks the click, since JSX cannot reject hyphenated attributes, but the props are the API.
 - `as="button"` gets `type="button"`; pass `type="submit"` for a form's submit button. A component passed as `as` gets no `type`; it sets its own.
-- Only `onClick` is blocked. Do not put actions in `onPointerDown`, `onMouseDown` or `onKeyDown`.
+- Only `onClick` and `onAuxClick` are blocked. Do not put actions in `onPointerDown`, `onMouseDown` or `onKeyDown`.
 - Layout and the target size are default style props (`display="inline-flex"`, centered, `minInlineSize` and `minBlockSize` `"xs"`, 24px). Raise them freely; never set them below `"xs"`.
 - Style props win over the stripped chrome, so `padding`, `color` and `backgroundColor` apply as given.
 - The focus ring is the library's one ring (`outline` in the `focus` color, `Highlight` under forced colors). Do not restyle `:focus-visible` or `outline`.
 - A client component (`'use client'`): it wraps `onClick`. Server components can render it with serializable props.
+- A blocked click still bubbles: Clickable never calls `stopPropagation`, so an ancestor's `onClick` and `onAuxClick` run, unlike a native disabled button, which fires no click. A row handler or analytics listener sees it. An ancestor that must not act on a disabled or busy child checks with `closest`, since the target can be a span inside the control:
+
+```tsx
+// Clicking the disabled Delete still reaches the row; the check keeps `select` from running.
+<li
+  onClick={(event) => {
+    if ((event.target as Element).closest('[aria-disabled="true"], [aria-busy="true"]')) return;
+    select();
+  }}
+>
+  <Clickable disabled onClick={remove}>
+    Delete
+  </Clickable>
+</li>
+```
 
 ## Do
 

package/dist/docs/IconButton.md

@@ -62,7 +62,7 @@ A compact button whose only visible content is an icon, for an action the icon m
 
 - The `label` is announced as the button's name; the icon is hidden from assistive technology.
 - The label is not shown on hover or focus. Sighted users who don't recognise the icon get no text, so keep IconButton to widely understood icons.
-- A disabled IconButton stays in the tab order, and Enter and Space do nothing. State is never color alone: disabled adds a dashed border.
+- A disabled IconButton stays in the tab order, and Enter and Space do nothing; the blocked click still bubbles to an ancestor's `onClick` (see Clickable's Rules). State is never color alone: disabled adds a dashed border.
 - Every size is at least 24 by 24 CSS px (WCAG 2.2 target size); the icon on each variant passes 4.5:1 at rest and on hover in light and dark modes. Under forced colors it keeps Button's system colors.
 
 ## Props

package/dist/docs/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "components": [
     {
       "name": "AlertDialog",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jonmilner/ui",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "files": [
     "dist",
     "THIRD_PARTY_NOTICES.md"