bestax-mcp 1.14.6 → 1.14.7

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.29.0"
+    "version": "5.30.0"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -40,6 +40,7 @@
         "Tag",
         "Tags",
         "Title",
+        "ToggleButton",
         "UnorderedList"
       ]
     },
@@ -55,6 +56,7 @@
         "Carousel",
         "Collapse",
         "Collapses",
+        "ContextMenu",
         "Dialog",
         "Dropdown",
         "HoverCard",
@@ -381,6 +383,17 @@
       "propCount": 6,
       "exampleCount": 10
     },
+    {
+      "name": "ContextMenu",
+      "kind": "component",
+      "category": "components",
+      "purpose": "The `ContextMenu` component opens a menu of actions where you right-click an element, such as a table row or a card, or long press it on a touch screen.",
+      "slug": "components/contextmenu",
+      "import": "import { ContextMenu } from '@allxsmith/bestax-bulma';",
+      "compound": true,
+      "propCount": 10,
+      "exampleCount": 9
+    },
     {
       "name": "Control",
       "kind": "component",
@@ -1096,6 +1109,17 @@
       "propCount": 17,
       "exampleCount": 7
     },
+    {
+      "name": "ToggleButton",
+      "kind": "component",
+      "category": "elements",
+      "purpose": "The `ToggleButton` component renders a button that stays pressed until it's pressed again, and says whether it's on through `aria-pressed`.",
+      "slug": "elements/togglebutton",
+      "import": "import { ToggleButton } from '@allxsmith/bestax-bulma';",
+      "compound": false,
+      "propCount": 14,
+      "exampleCount": 11
+    },
     {
       "name": "Tooltip",
       "kind": "component",
@@ -1104,8 +1128,8 @@
       "slug": "components/tooltip",
       "import": "import { Tooltip } from '@allxsmith/bestax-bulma';",
       "compound": false,
-      "propCount": 13,
-      "exampleCount": 10
+      "propCount": 14,
+      "exampleCount": 11
     },
     {
       "name": "UnorderedList",
@@ -1236,52 +1260,52 @@
     "--bulma-breadcrumb-item-padding-horizontal": ["Breadcrumb"],
     "--bulma-breadcrumb-item-padding-vertical": ["Breadcrumb"],
     "--bulma-breadcrumb-item-separator-color": ["Breadcrumb"],
-    "--bulma-button-active-background-l-delta": ["Button"],
-    "--bulma-button-active-border-color": ["Button"],
-    "--bulma-button-active-border-l-delta": ["Button"],
-    "--bulma-button-active-color": ["Button"],
-    "--bulma-button-background-l": ["Button"],
-    "--bulma-button-background-l-delta": ["Button"],
-    "--bulma-button-border-color": ["Button"],
-    "--bulma-button-border-l": ["Button"],
-    "--bulma-button-border-l-delta": ["Button"],
-    "--bulma-button-border-style": ["Button"],
-    "--bulma-button-border-width": ["Button"],
-    "--bulma-button-color-l": ["Button"],
-    "--bulma-button-disabled-background-color": ["Button"],
-    "--bulma-button-disabled-border-color": ["Button"],
-    "--bulma-button-disabled-opacity": ["Button"],
-    "--bulma-button-disabled-shadow": ["Button"],
-    "--bulma-button-family": ["Button"],
-    "--bulma-button-focus-border-color": ["Button"],
-    "--bulma-button-focus-border-l-delta": ["Button"],
-    "--bulma-button-focus-box-shadow-color": ["Button"],
-    "--bulma-button-focus-box-shadow-size": ["Button"],
-    "--bulma-button-ghost-background": ["Button"],
-    "--bulma-button-ghost-border-color": ["Button"],
-    "--bulma-button-ghost-color": ["Button"],
-    "--bulma-button-ghost-decoration": ["Button"],
-    "--bulma-button-ghost-hover-color": ["Button"],
-    "--bulma-button-ghost-hover-decoration": ["Button"],
-    "--bulma-button-h": ["Button"],
-    "--bulma-button-hover-background-l-delta": ["Button"],
-    "--bulma-button-hover-border-l-delta": ["Button"],
-    "--bulma-button-l": ["Button"],
-    "--bulma-button-outer-shadow-a": ["Button"],
-    "--bulma-button-outer-shadow-h": ["Button"],
-    "--bulma-button-outer-shadow-l": ["Button"],
-    "--bulma-button-outer-shadow-s": ["Button"],
-    "--bulma-button-padding-horizontal": ["Button"],
-    "--bulma-button-padding-vertical": ["Button"],
-    "--bulma-button-s": ["Button"],
-    "--bulma-button-static-background-color": ["Button"],
-    "--bulma-button-static-border-color": ["Button"],
-    "--bulma-button-static-color": ["Button"],
-    "--bulma-button-text-color": ["Button"],
-    "--bulma-button-text-decoration": ["Button"],
-    "--bulma-button-text-hover-background-color": ["Button"],
-    "--bulma-button-text-hover-color": ["Button"],
-    "--bulma-button-weight": ["Button"],
+    "--bulma-button-active-background-l-delta": ["Button", "ToggleButton"],
+    "--bulma-button-active-border-color": ["Button", "ToggleButton"],
+    "--bulma-button-active-border-l-delta": ["Button", "ToggleButton"],
+    "--bulma-button-active-color": ["Button", "ToggleButton"],
+    "--bulma-button-background-l": ["Button", "ToggleButton"],
+    "--bulma-button-background-l-delta": ["Button", "ToggleButton"],
+    "--bulma-button-border-color": ["Button", "ToggleButton"],
+    "--bulma-button-border-l": ["Button", "ToggleButton"],
+    "--bulma-button-border-l-delta": ["Button", "ToggleButton"],
+    "--bulma-button-border-style": ["Button", "ToggleButton"],
+    "--bulma-button-border-width": ["Button", "ToggleButton"],
+    "--bulma-button-color-l": ["Button", "ToggleButton"],
+    "--bulma-button-disabled-background-color": ["Button", "ToggleButton"],
+    "--bulma-button-disabled-border-color": ["Button", "ToggleButton"],
+    "--bulma-button-disabled-opacity": ["Button", "ToggleButton"],
+    "--bulma-button-disabled-shadow": ["Button", "ToggleButton"],
+    "--bulma-button-family": ["Button", "ToggleButton"],
+    "--bulma-button-focus-border-color": ["Button", "ToggleButton"],
+    "--bulma-button-focus-border-l-delta": ["Button", "ToggleButton"],
+    "--bulma-button-focus-box-shadow-color": ["Button", "ToggleButton"],
+    "--bulma-button-focus-box-shadow-size": ["Button", "ToggleButton"],
+    "--bulma-button-ghost-background": ["Button", "ToggleButton"],
+    "--bulma-button-ghost-border-color": ["Button", "ToggleButton"],
+    "--bulma-button-ghost-color": ["Button", "ToggleButton"],
+    "--bulma-button-ghost-decoration": ["Button", "ToggleButton"],
+    "--bulma-button-ghost-hover-color": ["Button", "ToggleButton"],
+    "--bulma-button-ghost-hover-decoration": ["Button", "ToggleButton"],
+    "--bulma-button-h": ["Button", "ToggleButton"],
+    "--bulma-button-hover-background-l-delta": ["Button", "ToggleButton"],
+    "--bulma-button-hover-border-l-delta": ["Button", "ToggleButton"],
+    "--bulma-button-l": ["Button", "ToggleButton"],
+    "--bulma-button-outer-shadow-a": ["Button", "ToggleButton"],
+    "--bulma-button-outer-shadow-h": ["Button", "ToggleButton"],
+    "--bulma-button-outer-shadow-l": ["Button", "ToggleButton"],
+    "--bulma-button-outer-shadow-s": ["Button", "ToggleButton"],
+    "--bulma-button-padding-horizontal": ["Button", "ToggleButton"],
+    "--bulma-button-padding-vertical": ["Button", "ToggleButton"],
+    "--bulma-button-s": ["Button", "ToggleButton"],
+    "--bulma-button-static-background-color": ["Button", "ToggleButton"],
+    "--bulma-button-static-border-color": ["Button", "ToggleButton"],
+    "--bulma-button-static-color": ["Button", "ToggleButton"],
+    "--bulma-button-text-color": ["Button", "ToggleButton"],
+    "--bulma-button-text-decoration": ["Button", "ToggleButton"],
+    "--bulma-button-text-hover-background-color": ["Button", "ToggleButton"],
+    "--bulma-button-text-hover-color": ["Button", "ToggleButton"],
+    "--bulma-button-weight": ["Button", "ToggleButton"],
     "--bulma-card-background-color": ["Card"],
     "--bulma-card-color": ["Card"],
     "--bulma-card-content-background-color": ["Card"],
@@ -1373,6 +1397,8 @@
     "--bulma-content-table-foot-cell-color": ["Content"],
     "--bulma-content-table-head-cell-border-width": ["Content"],
     "--bulma-content-table-head-cell-color": ["Content"],
+    "--bulma-context-menu-max-height": ["ContextMenu"],
+    "--bulma-context-menu-z-index": ["ContextMenu"],
     "--bulma-control-border-width": ["Control"],
     "--bulma-control-focus-shadow-l": ["Control"],
     "--bulma-control-height": ["Control"],
@@ -1886,7 +1912,7 @@
     "--bulma-loading-cancel-hover-color": ["Loading"],
     "--bulma-loading-cancel-radius": ["Loading"],
     "--bulma-loading-cancel-size": ["Loading"],
-    "--bulma-loading-color": ["Button"],
+    "--bulma-loading-color": ["Button", "ToggleButton"],
     "--bulma-loading-content-gap": ["Loading"],
     "--bulma-loading-icon-border-width": ["Loading"],
     "--bulma-loading-icon-border-width-large": ["Loading"],

package/data/components/Button.json

@@ -97,8 +97,8 @@
       "code": "function example() {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const [tag, setTag] = React.useState<string>();\n\n  return (\n    <>\n      <Button color=\"primary\" ref={buttonRef}>\n        Target\n      </Button>\n      <Button ml=\"2\" onClick={() => setTag(buttonRef.current?.tagName)}>\n        Read the tag from its ref\n      </Button>\n      <p>Rendered element: {tag ?? '—'}</p>\n    </>\n  );\n}"
     }
   ],
-  "accessibility": "- **Labeling:** Always provide descriptive content for buttons for screen readers.\n- **States:** The `isDisabled` and `disabled` props ensure correct `aria-disabled` and `disabled` attributes.\n- **Keyboard:** When rendered as `<a>`, disabled buttons are not focusable.\n- **Focus:** Use `isFocused` and `isActive` for visual feedback, but rely on browser focus for actual accessibility.\n\n:::note\nIf your button has only an icon, use `aria-label` to provide accessible text.\n:::",
-  "related": ["Buttons", "Icon", "useBulmaClasses"],
+  "accessibility": "- **Labeling:** Always provide descriptive content for buttons for screen readers.\n- **States:** The `isDisabled` and `disabled` props ensure correct `aria-disabled` and `disabled` attributes.\n- **Keyboard:** When rendered as `<a>`, disabled buttons are not focusable.\n- **Focus:** Use `isFocused` and `isActive` for visual feedback, but rely on browser focus for actual accessibility.\n- **Toggles:** `isActive` tells a screen reader nothing. A button that turns something on or off is a [`ToggleButton`](https://bestax.io/docs/api/elements/togglebutton), which sets `aria-pressed`.\n\n:::note\nIf your button has only an icon, use `aria-label` to provide accessible text.\n:::",
+  "related": ["Buttons", "Icon", "ToggleButton", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/elements-button--default",
   "summary": "The `Button` component provides a flexible and highly customizable button for your Bulma React UI.",
   "import": "import { Button } from '@allxsmith/bestax-bulma';",
@@ -223,7 +223,7 @@
           "name": "isActive",
           "type": "boolean",
           "default": "false",
-          "description": "Applies active styling (visual only).",
+          "description": "Applies active styling (visual only), with no `aria-pressed`. For a button that stays pressed, use `ToggleButton`.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Buttons.json

@@ -38,8 +38,8 @@
       "code": "<Buttons>\n  <Buttons.Button color=\"primary\">Save</Buttons.Button>\n  <Buttons.Button>Cancel</Buttons.Button>\n  <Buttons.LinkButton>Learn more</Buttons.LinkButton>\n</Buttons>"
     }
   ],
-  "accessibility": "- Grouping buttons in a `<div class=\"buttons\">` has no negative impact on accessibility.\n- Ensure each `Button` has a clear label (text or `aria-label`).\n- If grouping radio or toggle buttons, consider `aria-pressed` or `aria-checked` for stateful controls.\n\n:::tip\nYou can use all Bulma helper props (spacing, color, alignment) with `Buttons` for even more control.\n:::",
-  "related": ["Button", "useBulmaClasses"],
+  "accessibility": "- Grouping buttons in a `<div class=\"buttons\">` has no negative impact on accessibility.\n- Ensure each `Button` has a clear label (text or `aria-label`).\n- For a set of toggles that each turn on and off on their own, use [`ToggleButton`](https://bestax.io/docs/api/elements/togglebutton) in `Buttons hasAddons`, and give the `Buttons` `role=\"group\"` and an `aria-label`. A set where only one can be on is a radio group, so use [`Radios`](https://bestax.io/docs/api/form/radios) for it.\n\n:::tip\nYou can use all Bulma helper props (spacing, color, alignment) with `Buttons` for even more control.\n:::",
+  "related": ["Button", "ToggleButton", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/elements-button--default",
   "summary": "The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features.",
   "import": "import { Buttons } from '@allxsmith/bestax-bulma';",
@@ -257,7 +257,7 @@
           "name": "isActive",
           "type": "boolean",
           "default": "false",
-          "description": "Applies active styling (visual only).",
+          "description": "Applies active styling (visual only), with no `aria-pressed`. For a button that stays pressed, use `ToggleButton`.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -433,7 +433,7 @@
           "name": "isActive",
           "type": "boolean",
           "default": "false",
-          "description": "Applies active styling (visual only).",
+          "description": "Applies active styling (visual only), with no `aria-pressed`. For a button that stays pressed, use `ToggleButton`.",
           "required": false,
           "inherited": true,
           "deprecated": false

package/data/components/ContextMenu.json

@@ -0,0 +1,213 @@
+{
+  "name": "ContextMenu",
+  "kind": "component",
+  "category": "components",
+  "slug": "components/contextmenu",
+  "docsUrl": "https://bestax.io/docs/api/components/contextmenu",
+  "examples": [
+    {
+      "title": "Basic ContextMenu",
+      "code": "<ContextMenu\n  aria-label=\"Actions for report.pdf\"\n  trigger={\n    <Box tabIndex={0} p=\"6\" textAlign=\"centered\">\n      report.pdf: right-click here, or long press on a touch screen\n    </Box>\n  }\n>\n  <ContextMenu.Item as=\"button\">Rename</ContextMenu.Item>\n  <ContextMenu.Item as=\"button\">Duplicate</ContextMenu.Item>\n  <ContextMenu.Divider />\n  <ContextMenu.Item as=\"button\" color=\"danger\">\n    Delete\n  </ContextMenu.Item>\n</ContextMenu>"
+    },
+    {
+      "title": "On Table Rows",
+      "code": "function example() {\n  const [openFor, setOpenFor] = useState<string | null>(null);\n  const [last, setLast] = useState('nothing yet');\n  const files = ['report.pdf', 'budget.xlsx', 'notes.txt'];\n\n  return (\n    <>\n      <Paragraph mb=\"3\">Last action: {last}</Paragraph>\n      <Table isFullwidth>\n        <Table.Tbody>\n          {files.map(name => {\n            const actions = (\n              <>\n                <ContextMenu.Item\n                  as=\"button\"\n                  onClick={() => setLast(`Rename ${name}`)}\n                >\n                  Rename\n                </ContextMenu.Item>\n                <ContextMenu.Item\n                  as=\"button\"\n                  onClick={() => setLast(`Duplicate ${name}`)}\n                >\n                  Duplicate\n                </ContextMenu.Item>\n                <ContextMenu.Divider />\n                <ContextMenu.Item\n                  as=\"button\"\n                  color=\"danger\"\n                  onClick={() => setLast(`Delete ${name}`)}\n                >\n                  Delete\n                </ContextMenu.Item>\n              </>\n            );\n            return (\n              <ContextMenu\n                key={name}\n                aria-label={`Actions for ${name}`}\n                onOpenChange={open =>\n                  setOpenFor(current =>\n                    open ? name : current === name ? null : current\n                  )\n                }\n                trigger={\n                  <Table.Tr isSelected={openFor === name}>\n                    <Table.Td>{name}</Table.Td>\n                    <Table.Td>\n                      <Dropdown label=\"Actions\" right>\n                        {actions}\n                      </Dropdown>\n                    </Table.Td>\n                  </Table.Tr>\n                }\n              >\n                {actions}\n              </ContextMenu>\n            );\n          })}\n        </Table.Tbody>\n      </Table>\n    </>\n  );\n}"
+    },
+    {
+      "title": "On Touch Screens",
+      "code": "<ContextMenu\n  aria-label=\"Actions for IMG_0042.jpg\"\n  trigger={\n    <Box tabIndex={0} interaction=\"unselectable\" p=\"6\" textAlign=\"centered\">\n      IMG_0042.jpg: long press, and no text gets selected\n    </Box>\n  }\n>\n  <ContextMenu.Item as=\"button\">Copy link</ContextMenu.Item>\n  <ContextMenu.Item as=\"button\">Download</ContextMenu.Item>\n</ContextMenu>"
+    },
+    {
+      "title": "Keeping It Open",
+      "code": "function example() {\n  const [hidden, setHidden] = useState(false);\n  const [extensions, setExtensions] = useState(true);\n\n  return (\n    <ContextMenu\n      aria-label=\"View options\"\n      closeOnClick={false}\n      trigger={\n        <Box tabIndex={0} p=\"6\" textAlign=\"centered\">\n          Hidden files are {hidden ? 'shown' : 'hidden'}, extensions are{' '}\n          {extensions ? 'shown' : 'hidden'}\n        </Box>\n      }\n    >\n      <ContextMenu.Item\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={hidden}\n        onClick={() => setHidden(value => !value)}\n      >\n        Show hidden files\n      </ContextMenu.Item>\n      <ContextMenu.Item\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={extensions}\n        onClick={() => setExtensions(value => !value)}\n      >\n        Show extensions\n      </ContextMenu.Item>\n    </ContextMenu>\n  );\n}"
+    },
+    {
+      "title": "Disabled Items",
+      "code": "<ContextMenu\n  aria-label=\"Clipboard\"\n  trigger={\n    <Box tabIndex={0} p=\"6\" textAlign=\"centered\">\n      Right-click for the clipboard\n    </Box>\n  }\n>\n  <ContextMenu.Item as=\"button\" disabled>\n    Cut\n  </ContextMenu.Item>\n  <ContextMenu.Item as=\"button\" disabled>\n    Copy\n  </ContextMenu.Item>\n  <ContextMenu.Item as=\"button\">Paste</ContextMenu.Item>\n</ContextMenu>"
+    },
+    {
+      "title": "Nested Regions",
+      "code": "<ContextMenu\n  aria-label=\"Board\"\n  trigger={\n    <Box p=\"5\">\n      <Paragraph mb=\"4\">Right-click between the cards for the board</Paragraph>\n      <ContextMenu\n        aria-label=\"Actions for Write the docs\"\n        trigger={\n          <Card tabIndex={0}>\n            <Card.Content>Write the docs</Card.Content>\n          </Card>\n        }\n      >\n        <ContextMenu.Item as=\"button\">Move to Done</ContextMenu.Item>\n        <ContextMenu.Item as=\"button\">Archive</ContextMenu.Item>\n      </ContextMenu>\n    </Box>\n  }\n>\n  <ContextMenu.Item as=\"button\">New card</ContextMenu.Item>\n  <ContextMenu.Item as=\"button\">Rename board</ContextMenu.Item>\n</ContextMenu>"
+    },
+    {
+      "title": "Turning It Off",
+      "code": "function example() {\n  const [disabled, setDisabled] = useState(false);\n\n  return (\n    <>\n      <Switch\n        mb=\"3\"\n        checked={disabled}\n        onChange={event => setDisabled(event.target.checked)}\n      >\n        Use the browser's menu\n      </Switch>\n      <ContextMenu\n        aria-label=\"Actions for notes.txt\"\n        disabled={disabled}\n        trigger={\n          <Box tabIndex={0} p=\"6\" textAlign=\"centered\">\n            notes.txt\n          </Box>\n        }\n      >\n        <ContextMenu.Item as=\"button\">Rename</ContextMenu.Item>\n        <ContextMenu.Item as=\"button\">Delete</ContextMenu.Item>\n      </ContextMenu>\n    </>\n  );\n}"
+    },
+    {
+      "title": "Where the Menu Goes",
+      "code": "function RenameDialog({ active, onClose }) {\n  const [overlays, setOverlays] = useState<HTMLElement | null>(null);\n\n  return (\n    <Modal active={active} onClose={onClose}>\n      <ConfigProvider portalContainer={overlays ?? undefined}>\n        <ContextMenu\n          aria-label=\"Actions for report.pdf\"\n          trigger={<Box tabIndex={0}>report.pdf</Box>}\n        >\n          <ContextMenu.Item as=\"button\">Rename</ContextMenu.Item>\n        </ContextMenu>\n      </ConfigProvider>\n      <div ref={setOverlays} />\n    </Modal>\n  );\n}"
+    },
+    {
+      "title": "Compound (dot-notation) usage",
+      "code": "<ContextMenu\n  aria-label=\"Actions for notes.txt\"\n  trigger={\n    <Box tabIndex={0} p=\"6\" textAlign=\"centered\">\n      notes.txt\n    </Box>\n  }\n>\n  <ContextMenu.Item as=\"button\">Open</ContextMenu.Item>\n  <ContextMenu.Item as=\"button\">Rename</ContextMenu.Item>\n  <ContextMenu.Divider />\n  <ContextMenu.Item as=\"button\">Delete</ContextMenu.Item>\n</ContextMenu>"
+    }
+  ],
+  "accessibility": "`ContextMenu` follows the [WAI-ARIA menu pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/),\nwithout a menubar or submenus:\n\n- **Opening:** APG names \"a command, such as Shift + F10 in Windows, that opens a context specific\n  menu\". That's the browser's `contextmenu` event, which <kbd>Shift</kbd>+<kbd>F10</kbd> and the\n  context menu key fire on Windows and Linux, and VoiceOver's <kbd>VO</kbd>+<kbd>Shift</kbd>+<kbd>M</kbd>\n  fires on macOS. `ContextMenu` adds no key handler of its own, so the menu never opens twice for\n  one key.\n- **Focus on open** goes to the first enabled item, or to the menu itself when there's none.\n- <kbd>ArrowDown</kbd> and <kbd>ArrowUp</kbd> move to the next and previous item, wrapping, and\n  <kbd>Home</kbd> and <kbd>End</kbd> go to the first and last.\n- **Typing** a letter moves to the next item whose text starts with what's been typed. Letters typed\n  in quick succession add up to one search, and the same letter again cycles through the items that\n  start with it. Each opening starts a new search.\n- <kbd>Enter</kbd> and <kbd>Space</kbd> activate the focused item the way a click does, so its\n  `onClick` runs, and a key held down activates it once.\n- <kbd>Escape</kbd> closes the menu and returns focus to what had it before the menu opened. It\n  stops there, so a `Popover` or a `Modal` around the menu stays open.\n- <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> close it and return focus too. The menu sits at\n  the end of the page, so letting Tab go on from it would skip the rest of the page.\n- An item that runs closes the menu and returns focus, unless it moved focus somewhere else, such as\n  into a `Modal` it opened or a rename field.\n\nRoles and names:\n\n- The menu is `role=\"menu\"`, named by the `aria-label` or `aria-labelledby` you pass. There's no\n  button to borrow a name from, and a development build warns when a menu opens without one.\n- Items are `menuitem` by default, and `menuitemcheckbox` or `menuitemradio` with `aria-checked`\n  through the item's `role`. A divider is an `<hr>`, which is a separator.\n- Disabled items, a `button` with `disabled` or an item with `aria-disabled=\"true\"`, are skipped by\n  the arrow keys and by typing, as in `Dropdown`.\n- The trigger gets no ARIA, no role and no tab stop. `aria-haspopup` describes a popup that opens\n  when an element is activated, and a right-click on a row isn't that. So nothing tells a screen\n  reader user the menu is there, and on macOS only VoiceOver opens it from the keyboard: every action\n  in it has to be reachable from a visible control as well, which\n  [WCAG 2.1.1](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) asks for.\n\nAnd around it:\n\n- The menu isn't modal. A press outside it closes it and does whatever it does, the rest of the page\n  stays reachable, and nothing locks scrolling.\n- Nothing listens on the page while the menu is closed and no finger is held on its trigger, so a\n  table with a menu on every row adds no listeners until one is used.\n- The menu doesn't animate.",
+  "related": [
+    "ConfigProvider",
+    "Dropdown",
+    "HoverCard",
+    "Popover",
+    "Portal",
+    "useBulmaClasses"
+  ],
+  "storybook": "https://bestax.io/storybook/?path=/story/components-contextmenu--default",
+  "summary": "The `ContextMenu` component opens a menu of actions where you right-click an element, such as a table row or a card, or long press it on a touch screen. Shift+F10 and the context menu key open it too, where the browser fires `contextmenu` for them, which Windows and Linux do. The menu is Dropdown's markup, portaled into the `portalContainer` a `ConfigProvider` sets, or the end of the trigger's own document's `<body>`, so it never has server markup. It opens below and to the right of the point, flips above or to the left where there's no room, moves in where it fits neither way, and scrolls inside when it's taller than the viewport. It doesn't follow the trigger, since scrolling closes it. Inside a `Modal` or a shadow root, point `portalContainer` inside it, so screen readers that honor `aria-modal` reach the menu and the shadow root's styles apply. Opening moves focus to the first enabled item. The arrow keys, Home, End and typing move between items, and Enter and Space activate one. Escape, Tab, an item, a press outside, scrolling, resizing and the window losing focus close it, handing focus back to what had it unless an item moved it somewhere else. For a menu opened from a button use `Dropdown`.",
+  "import": "import { ContextMenu } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/components/ContextMenu.tsx",
+  "rootClass": "context-menu",
+  "parts": [
+    {
+      "path": "ContextMenu",
+      "summary": "The `ContextMenu` component opens a menu of actions where you right-click an element, such as a table row or a card, or long press it on a touch screen. Shift+F10 and the context menu key open it too, where the browser fires `contextmenu` for them, which Windows and Linux do. The menu is Dropdown's markup, portaled into the `portalContainer` a `ConfigProvider` sets, or the end of the trigger's own document's `<body>`, so it never has server markup. It opens below and to the right of the point, flips above or to the left where there's no room, moves in where it fits neither way, and scrolls inside when it's taller than the viewport. It doesn't follow the trigger, since scrolling closes it. Inside a `Modal` or a shadow root, point `portalContainer` inside it, so screen readers that honor `aria-modal` reach the menu and the shadow root's styles apply. Opening moves focus to the first enabled item. The arrow keys, Home, End and typing move between items, and Enter and Space activate one. Escape, Tab, an item, a press outside, scrolling, resizing and the window losing focus close it, handing focus back to what had it unless an item moved it somewhere else. For a menu opened from a button use `Dropdown`.",
+      "component": null,
+      "props": [
+        {
+          "name": "trigger",
+          "type": "React.ReactElement",
+          "default": null,
+          "description": "The element a right-click, Shift+F10, the context menu key or a long press opens the menu from: a table row, a card, an image. It's cloned, not wrapped, so a row stays a row, which means it has to be a single element that passes `className` and the `onContextMenu`, `onPointerDown`, `onPointerMove`, `onPointerUp`, `onPointerCancel` and `onTouchEnd` handlers to its DOM node. Its own handlers for those run first, and one that calls `preventDefault()` on `contextmenu` keeps the menu closed. A `ContextMenu` inside it opens instead of this one. It gets no ARIA and no tab stop, since it can be any element and a right-click isn't an activation. Keyboard users reach it through something focusable inside it, such as the row's own `Dropdown` button, or a `tabIndex={0}` you give it, and press Shift+F10 or the context menu key there. It gets `-webkit-touch-callout: none`, so iOS doesn't put its own callout for a link or an image over the menu. A long press still selects text the way it does anywhere, so give a region where it shouldn't `interaction=\"unselectable\"`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The menu's items: `ContextMenu.Item` and `ContextMenu.Divider`, the same components as `Dropdown.Item` and `Dropdown.Divider`. Every action in it needs a visible way in as well, such as a `Dropdown` on the same row: nothing tells a screen reader user the menu is there, and on macOS only VoiceOver opens it from the keyboard.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void",
+          "default": null,
+          "description": "Called with `true` when the menu opens and `false` when it closes, whatever closed it, such as for highlighting the row whose menu is open. Nothing fires after ContextMenu unmounts. There's no `open` prop to go with it: a menu opened from code has no point to open at.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "closeOnClick",
+          "type": "boolean",
+          "default": "true",
+          "description": "Close the menu when an item is clicked, or activated with Enter or Space. A click on a divider or between items leaves it open either way.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false",
+          "description": "Leave the trigger to the browser: a right-click shows the browser's own menu, a long press does what it does anywhere, and an open menu closes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "default": null,
+          "description": "The menu's accessible name, such as \"Actions for report.pdf\". There's no button to borrow a name from, so pass this or `aria-labelledby`, and a development build warns when the menu opens with neither.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional classes for the menu (`role=\"menu\"`). The trigger keeps its own.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <div> attributes and Bulma helper props",
+      "types": []
+    },
+    {
+      "path": "ContextMenu.Item",
+      "summary": "Bulma Dropdown item.",
+      "component": "DropdownItem",
+      "props": [
+        {
+          "name": "as",
+          "type": "'a' | 'div' | 'button'",
+          "default": "'a'",
+          "description": "The element type to render. `'button'` renders `type=\"button\"` unless you pass `type=\"submit\"` or `type=\"reset\"`, so an item inside a form does not submit it.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "active",
+          "type": "boolean",
+          "default": "false",
+          "description": "Whether the item is active.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false",
+          "description": "Marks the item as disabled; disabled items are skipped during keyboard navigation. Use with `as=\"button\"` for a native disabled control, or pair with `aria-disabled` on a link.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Item content.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "Remaining props of the element selected by as and Bulma helper props",
+      "types": []
+    },
+    {
+      "path": "ContextMenu.Divider",
+      "summary": "Bulma Dropdown divider.",
+      "component": "DropdownDivider",
+      "props": [],
+      "extraProps": [],
+      "catchAll": null,
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-context-menu-z-index",
+      "sass": "$context-menu-z-index",
+      "default": "$extras-z-index-tooltip",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-context-menu-max-height",
+      "sass": "$context-menu-max-height",
+      "default": "calc(100dvh - 1rem)",
+      "scope": "element"
+    }
+  ]
+}

package/data/components/DateTimeInput.json

@@ -170,7 +170,7 @@
       "code": "<DateTimeInput label=\"Input only\" popover={false} defaultValue={new Date()} />"
     }
   ],
-  "accessibility": "- Trigger uses `role=\"combobox\"` with `aria-haspopup=\"dialog\"`, `aria-expanded`, and `aria-controls`.\n- Popover panel has `role=\"dialog\"` with an accessible name. Opening it puts focus on the focused date.\n- Closing the popover with `Escape`, the ✓ button or `Enter` on a time wheel returns focus to the input, whether the input or the launcher opened it. Under `openOnFocus` that returning focus leaves the popover closed; focusing or clicking the input again opens it. Closing it commits nothing by itself: an empty field stays empty, and leaving afterwards commits only what you typed, so seconds the display leaves out are kept.\n- Calendar uses `role=\"grid\"`; cells expose `aria-selected`, `aria-disabled`, and `aria-current=\"date\"`.\n- Roving `tabindex` keeps a single day focusable at a time, and focus moves with it, inline as in the popover. When the focused date is disabled, that cell is the nearest enabled day of the month.\n- Each time wheel uses `role=\"spinbutton\"` with `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and `aria-valuetext`. The values drawn above and below are click targets hidden from assistive technology, which reads the value from the spinbutton.\n- The footer's confirm button exposes an accessible label (`Done`); the Reset button reverts your edits to the value the popover opened with.\n- Tab order walks from the calendar to the footer (Reset / ✓), and from the time wheels to the footer while they are open.",
+  "accessibility": "- Trigger uses `role=\"combobox\"` with `aria-haspopup=\"dialog\"`, `aria-expanded`, and `aria-controls`.\n- Popover panel has `role=\"dialog\"` with an accessible name. Opening it puts focus on the focused date.\n- Closing the popover with `Escape`, the ✓ button or `Enter` on a time wheel returns focus to the input, whether the input or the launcher opened it. Under `openOnFocus` that returning focus leaves the popover closed; focusing or clicking the input again opens it. Closing it commits nothing by itself: an empty field stays empty, and leaving afterwards commits only what you typed, so seconds the display leaves out are kept.\n- Calendar uses `role=\"grid\"`; cells expose `aria-selected`, `aria-disabled`, and `aria-current=\"date\"`.\n- Roving `tabindex` keeps a single day focusable at a time, and focus moves with it, inline as in the popover. When the focused date is disabled, that cell is the nearest enabled day of the month.\n- Each time wheel uses `role=\"spinbutton\"` with `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and `aria-valuetext`. The values drawn above and below are click targets hidden from assistive technology, which reads the value from the spinbutton.\n- In a 12-hour picker, AM/PM is one of those wheels, reading `AM` or `PM`. Its accessible name is `AM/PM` unless `labels.ampm` sets another.\n- The footer's confirm button exposes an accessible label (`Done`); the Reset button reverts your edits to the value the popover opened with.\n- Tab order walks from the calendar to the footer (Reset / ✓), and from the time wheels to the footer while they are open.",
   "related": ["DateInput", "Input", "TimeInput"],
   "storybook": "https://bestax.io/storybook/?path=/story/form-datetimeinput",
   "summary": "The `DateTimeInput` combines a calendar and a time **wheel spinner** in a single popover — an iOS-style layout.",
@@ -718,7 +718,7 @@
           "name": "labels",
           "type": "PickerLabels",
           "default": null,
-          "description": "Optional translatable string overrides.",
+          "description": "Optional translatable string overrides. In a 12-hour picker, `ampm` names the AM/PM column, `'AM/PM'` by default.",
           "required": false,
           "inherited": true,
           "deprecated": false

package/data/components/Dropdown.json

@@ -43,7 +43,7 @@
     }
   ],
   "accessibility": "- The dropdown root is a `<div class=\"dropdown\">` with ARIA roles/attributes for menu and trigger.\n- The trigger button uses `aria-haspopup`, `aria-controls`, and `aria-expanded`.\n- Menu items are focusable and use `role=\"menuitem\"`. An item given `role=\"menuitemcheckbox\"` or `role=\"menuitemradio\"` stays in the arrow-key order.\n- The items are the only focusable things inside `role=\"menu\"`. A click between them, on a divider say, focuses the menu itself, so the arrow keys still reach the items from there.\n- `Dropdown.Item as=\"button\"` defaults to `type=\"button\"`, so a menu item inside a form doesn't\n  submit it. Pass `type=\"submit\"` or `type=\"reset\"` and yours is used instead; any other value\n  renders `type=\"button\"`.\n- Clicking outside closes the dropdown in most cases.\n\n`Dropdown` implements the [WAI-ARIA Menu Button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/)\nout of the box:\n\n- On the trigger: <kbd>ArrowDown</kbd> or <kbd>Enter</kbd>/<kbd>Space</kbd> open the menu and\n  focus the first item; <kbd>ArrowUp</kbd> opens the menu and focuses the last item;\n  <kbd>Escape</kbd> closes an open menu.\n- Inside the menu: <kbd>ArrowDown</kbd>/<kbd>ArrowUp</kbd> move between items and wrap around;\n  <kbd>Home</kbd>/<kbd>End</kbd> jump to the first/last item; <kbd>Escape</kbd> closes the menu\n  and returns focus to the trigger; <kbd>Tab</kbd> closes the menu and lets focus continue\n  naturally.\n- On an item: <kbd>Enter</kbd> or <kbd>Space</kbd> activates it the way a click does, so its\n  `onClick` runs and the menu closes unless `closeOnClick` is `false`. That includes the\n  default anchor without an `href` and `as=\"div\"`, which the browser would not activate on\n  its own.\n- When running an item closes the menu, by click or by key, focus goes back to the trigger,\n  as it does for <kbd>Escape</kbd>. An item whose `onClick` moves focus somewhere else keeps\n  it there.\n- Disabled items (a `Dropdown.Item` rendered with a native `disabled` attribute or\n  `aria-disabled=\"true\"`) and dividers are skipped during arrow-key navigation.\n\n:::note\nThere is no typeahead and no built-in outside-click handling inside the menu beyond the\nexisting click-outside-to-close behavior — add those yourself if your use case needs them.\n:::",
-  "related": ["Button", "Popover", "useBulmaClasses"],
+  "related": ["Button", "ContextMenu", "Popover", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/components-dropdown--default",
   "summary": "The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.",
   "import": "import { Dropdown, Button, Field, Control, Span } from '@allxsmith/bestax-bulma';",

package/data/components/HoverCard.json

@@ -30,7 +30,7 @@
       "code": "function example() {\n  const [open, setOpen] = useState(false);\n  const [following, setFollowing] = useState(false);\n\n  return (\n    <>\n      <Paragraph mb=\"3\">\n        The card is {open ? 'open' : 'closed'}\n        {following ? ', and you follow Ada' : ''}.\n      </Paragraph>\n      <HoverCard\n        open={open}\n        onOpenChange={setOpen}\n        trigger={<Link href=\"#ada\">Ada Lovelace</Link>}\n      >\n        <Paragraph mb=\"3\">Analytical Engine team</Paragraph>\n        <Button\n          size=\"small\"\n          color=\"primary\"\n          onClick={() => {\n            setFollowing(true);\n            setOpen(false);\n          }}\n        >\n          Follow\n        </Button>\n      </HoverCard>\n    </>\n  );\n}"
     }
   ],
-  "accessibility": "`HoverCard` is built to\n[WCAG's Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)\ncriterion, condition by condition:\n\n- **Dismissible:** <kbd>Escape</kbd> closes the card wherever focus is, without moving the pointer\n  or focus. The keypress belongs to whatever has focus. When that's the card, its trigger or\n  nothing, the card takes it, so a `Popover` or `Modal` around it stays open. When it's something\n  else, such as a field elsewhere on the page or a `Modal` opened from the card, the card still\n  closes and the key goes on to it. With one card inside another, the inner one closes first.\n  Focus that was in the card goes back to the trigger, and the card stays closed until the pointer\n  or focus leaves and comes back.\n- **Hoverable:** the pointer can move from the trigger onto the card. `closeDelay` covers the gap\n  between them, and the card takes pointer events, unlike a tooltip.\n- **Persistent:** no timer closes a card that's hovered or focused. Focus inside the card holds it\n  however it got there. Whether a click focuses what it lands on is up to the browser, though:\n  Safari and Firefox on macOS don't focus a button on click, so there a clicked button doesn't keep\n  the card open once the pointer moves away.\n\nAnd around it:\n\n- Keyboard focus on the trigger opens the card, as hover does. Focus that a press brings doesn't,\n  and neither does a touch pointer, so tapping the trigger on a phone just does what the trigger\n  does. Clicking the trigger never toggles the card.\n- By default, then, a phone or tablet never opens the card, so whatever it shows has to be\n  reachable from the trigger as well. `openOnTap` opens it with a tap, for a trigger with no tap\n  action of its own. While a tap holds it open, a tap outside the trigger and the card closes it.\n- The trigger gets `aria-expanded` and `aria-controls`, which say it's expanded and name the card\n  only while the card is on the page. It gets no role, no tab stop and no `aria-haspopup`, so the trigger element itself has to\n  take focus, such as a link or a button. A link inside a `<span>` doesn't do, since focus comes\n  back to the trigger and its ARIA is on it. A development build warns when the trigger can't take\n  focus.\n- The card is a plain element with an `id` and no role. It isn't a dialog, since focus doesn't move\n  into it, and it isn't a tooltip, since it can hold links. In place, a screen reader meets it\n  right after the trigger, Tab goes from the trigger into its links and buttons, and tabbing past\n  them closes it.\n- With `appendToBody` the card sits in the Tab order where its container is. By default that's\n  the end of `<body>`, so it comes last: Tab reaches it only after the rest of the page, and focus\n  leaving the trigger on the way closes it. Keyboard users can open it, read it and close it, so\n  whatever it links to should be reachable from the page as well.\n- Opening the card moves no focus, and nothing traps it. Links and buttons belong in a card; a form\n  belongs in a `Popover`, which opens on purpose and holds focus.\n- The fade-in is turned off under `prefers-reduced-motion: reduce`.",
+  "accessibility": "`HoverCard` is built to\n[WCAG's Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)\ncriterion, condition by condition:\n\n- **Dismissible:** <kbd>Escape</kbd> closes the card wherever focus is, without you moving the\n  pointer or focus. In controlled use it asks to close through `onOpenChange`, so the card closes\n  when you set `open` to `false`. The keypress belongs to whatever has focus. When that's the card,\n  its trigger or nothing, the card takes it, so a `Popover` or `Modal` around it stays open. When\n  it's something else, such as a field elsewhere on the page or a `Modal` opened from the card, the\n  card still closes and the key goes on to it. With one card inside another, the inner one closes\n  first. Focus that was in the card goes back to the trigger, and the card stays closed until the\n  pointer or focus leaves and comes back, or, with `openOnTap`, until the next tap on the trigger.\n- **Hoverable:** the pointer can move from the trigger onto the card. `closeDelay` covers the gap\n  between them, and the card takes pointer events.\n- **Persistent:** no timer closes a card that's hovered or focused. Focus inside the card holds it\n  however it got there. Whether a click focuses what it lands on is up to the browser, though:\n  Safari and Firefox on macOS don't focus a button on click, so there a clicked button doesn't keep\n  the card open once the pointer moves away.\n\nAnd around it:\n\n- Keyboard focus on the trigger opens the card, as hover does. Focus that a press brings doesn't,\n  and neither does a touch pointer, so tapping the trigger on a phone just does what the trigger\n  does. Clicking the trigger never toggles the card.\n- By default, then, a phone or tablet never opens the card, so whatever it shows has to be\n  reachable from the trigger as well. `openOnTap` opens it with a tap, for a trigger with no tap\n  action of its own. While a tap holds it open, a tap outside the trigger and the card closes it.\n- The trigger gets `aria-expanded` and `aria-controls`, which say it's expanded and name the card\n  only while the card is on the page. It gets no role, no tab stop and no `aria-haspopup`, so the trigger element itself has to\n  take focus, such as a link or a button. A link inside a `<span>` doesn't do, since focus comes\n  back to the trigger and its ARIA is on it. A development build warns when the trigger can't take\n  focus.\n- The card is a plain element with an `id` and no role. It isn't a dialog, since focus doesn't move\n  into it, and it isn't a tooltip, since it can hold links. In place, a screen reader meets it\n  right after the trigger, Tab goes from the trigger into its links and buttons, and tabbing past\n  them closes it.\n- With `appendToBody` the card sits in the Tab order where its container is. By default that's\n  the end of `<body>`, so it comes last: Tab reaches it only after the rest of the page, and focus\n  leaving the trigger on the way closes it. Keyboard users can open it, read it and close it, so\n  whatever it links to should be reachable from the page as well.\n- Opening the card moves no focus, and nothing traps it. Links and buttons belong in a card; a form\n  belongs in a `Popover`, which opens on purpose and holds focus.\n- The fade-in is turned off under `prefers-reduced-motion: reduce`.",
   "related": ["Media", "Popover", "Portal", "Tooltip", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/components-hovercard--default",
   "summary": "The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it. Nothing moves focus when the card opens, and nothing traps it. In place, the card comes right after the trigger, so Tab goes from the trigger into its links and tabbing past them closes it. The pointer can move onto the card, Escape closes it from anywhere, and by default touch doesn't open it, so tapping the trigger just does what the trigger does. `openOnTap` opens it with a tap, for a trigger with no tap action of its own. For hints with nothing to click use `Tooltip`, and for content opened on purpose, such as a form, use `Popover`.",

package/data/components/LinkButton.json

@@ -154,7 +154,7 @@
           "name": "isActive",
           "type": "boolean",
           "default": "false",
-          "description": "Applies active styling (visual only).",
+          "description": "Applies active styling (visual only), with no `aria-pressed`. For a button that stays pressed, use `ToggleButton`.",
           "required": false,
           "inherited": true,
           "deprecated": false

package/data/components/Popover.json

@@ -40,6 +40,7 @@
   ],
   "accessibility": "`Popover` follows the [WAI-ARIA dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)\nfor a non-modal dialog:\n\n- The panel is a `role=\"dialog\"` without `aria-modal`. It is named by its `Popover.Header` through\n  `aria-labelledby`, or by `ariaLabel`, which takes precedence. A development build warns when an\n  open panel has neither.\n- The trigger gets `aria-haspopup=\"dialog\"`, `aria-expanded`, and `aria-controls` pointing at the\n  panel while it is open.\n- Opening moves focus to the first control in the panel, or to the panel itself when it has none.\n  Closing hands focus back to the trigger, as long as focus is still in the panel then, so a click\n  that put it somewhere else keeps it there.\n- Tab and Shift+Tab wrap inside the open panel, which the pattern asks of non-modal dialogs too.\n  Pointer focus, the screen reader's reading cursor and the rest of the page stay free: nothing\n  outside is hidden or made inert, and the page still scrolls. `trapFocus={false}` lets Tab leave.\n- <kbd>Escape</kbd> closes the popover while focus is in the panel or on the trigger. A dialog\n  nested inside the panel, such as a date picker's calendar or another popover, takes its own\n  Escape first.\n- <kbd>Enter</kbd> and <kbd>Space</kbd> toggle a trigger the browser doesn't click on its own.\n- The open animation is turned off under `prefers-reduced-motion: reduce`.",
   "related": [
+    "ContextMenu",
     "Dropdown",
     "HoverCard",
     "Modal",
@@ -348,7 +349,7 @@
           "name": "isActive",
           "type": "boolean",
           "default": "false",
-          "description": "Applies active styling (visual only).",
+          "description": "Applies active styling (visual only), with no `aria-pressed`. For a button that stays pressed, use `ToggleButton`.",
           "required": false,
           "inherited": true,
           "deprecated": false

package/data/components/TimeInput.json

@@ -178,7 +178,7 @@
       "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Time\"\n      labelProps={{ htmlFor: 'time-field-control' }}\n    >\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"clock\">\n            <TimeInput id=\"time-field-control\" placeholder=\"HH:MM\" />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     }
   ],
-  "accessibility": "- Trigger uses `role=\"combobox\"` with `aria-haspopup=\"dialog\"`, `aria-expanded`, and `aria-controls`.\n- Popover panel has `role=\"dialog\"` with an accessible name.\n- Each spinner column has `role=\"spinbutton\"` with `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and `aria-valuetext`. The values drawn above and below are click targets hidden from assistive technology, which reads the value from the spinbutton.\n- AM/PM toggle exposes `aria-pressed`.\n- Honors `prefers-reduced-motion`.",
+  "accessibility": "- Trigger uses `role=\"combobox\"` with `aria-haspopup=\"dialog\"`, `aria-expanded`, and `aria-controls`.\n- Popover panel has `role=\"dialog\"` with an accessible name.\n- Each spinner column has `role=\"spinbutton\"` with `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and `aria-valuetext`. The values drawn above and below are click targets hidden from assistive technology, which reads the value from the spinbutton.\n- In a 12-hour picker, AM/PM is one of those spinbutton columns rather than a toggle button. Its `aria-valuetext` reads `AM` or `PM`; `↑`, `PageUp` and `End` move it to PM, and `↓`, `PageDown` and `Home` move it to AM. It stops at either end instead of wrapping around. Its accessible name is `AM/PM` unless `labels.ampm` sets another.\n- Honors `prefers-reduced-motion`.",
   "related": ["DateInput", "DateTimeInput", "Input"],
   "storybook": "https://bestax.io/storybook/?path=/story/form-timeinput",
   "summary": "The `TimeInput` component is a form input that opens a popover spinner for time-of-day selection.",
@@ -582,7 +582,7 @@
           "name": "hourFormat",
           "type": "'12' | '24'",
           "default": "'24'",
-          "description": "Hour format. `'12'` shows an AM/PM toggle.",
+          "description": "Hour format. `'12'` adds an AM/PM column to the wheels.",
           "required": false,
           "inherited": true,
           "deprecated": false
@@ -654,7 +654,7 @@
           "name": "labels",
           "type": "PickerLabels",
           "default": null,
-          "description": "Optional translatable string overrides.",
+          "description": "Optional translatable string overrides. In a 12-hour picker, `ampm` names the AM/PM column, `'AM/PM'` by default.",
           "required": false,
           "inherited": true,
           "deprecated": false