bestax-mcp 1.15.0 → 1.15.2

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.32.0"
+    "version": "5.33.1"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -23,6 +23,7 @@
         "Icon",
         "IconText",
         "Image",
+        "Kbd",
         "Link",
         "LinkButton",
         "ListItem",
@@ -305,7 +306,7 @@
       "import": "import { Code } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 4,
-      "exampleCount": 9
+      "exampleCount": 8
     },
     {
       "name": "Collapse",
@@ -615,6 +616,17 @@
       "propCount": 29,
       "exampleCount": 30
     },
+    {
+      "name": "Kbd",
+      "kind": "component",
+      "category": "elements",
+      "purpose": "The `Kbd` component renders a `<kbd>` drawn as a keycap, for a key the reader presses.",
+      "slug": "elements/kbd",
+      "import": "import { Kbd } from '@allxsmith/bestax-bulma';",
+      "compound": true,
+      "propCount": 9,
+      "exampleCount": 12
+    },
     {
       "name": "Level",
       "kind": "component",
@@ -1911,6 +1923,16 @@
       "TextArea",
       "TimeInput"
     ],
+    "--bulma-kbd-background": ["Kbd"],
+    "--bulma-kbd-border-bottom-width": ["Kbd"],
+    "--bulma-kbd-border-color": ["Kbd"],
+    "--bulma-kbd-border-width": ["Kbd"],
+    "--bulma-kbd-color": ["Kbd"],
+    "--bulma-kbd-family": ["Kbd"],
+    "--bulma-kbd-padding": ["Kbd"],
+    "--bulma-kbd-radius": ["Kbd"],
+    "--bulma-kbd-size": ["Kbd"],
+    "--bulma-kbd-weight": ["Kbd"],
     "--bulma-level-item-spacing": ["Level"],
     "--bulma-link-button-ghost-color": ["LinkButton"],
     "--bulma-link-button-ghost-hover-color": ["LinkButton"],

package/data/components/Autocomplete.json

@@ -54,7 +54,7 @@
       "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Fruit\"\n      labelProps={{\n        htmlFor: 'fruit-field-control',\n        id: 'fruit-field-control-label',\n      }}\n    >\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"search\">\n            <Autocomplete\n              id=\"fruit-field-control\"\n              data={['Apple', 'Banana', 'Cherry']}\n              placeholder=\"Search fruit...\"\n            />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     }
   ],
-  "accessibility": "- The `label` prop is automatically associated with the inner text input (`htmlFor` plus a generated `id`, or your own `id` if you pass one), so clicking the label focuses the input and assistive technology announces it. Inside a labeled `Field`, that `Field`'s label names the input instead when it points at it: a `Field` that is not `grouped` or `hasAddons` points it there on its own when the Autocomplete has no `id` and no inner `Field` sits between them, and a label you wire by hand with `labelProps.htmlFor` points at the input with that `id`.\n- A user-supplied `id` is applied to the inner input (the labellable control), not the wrapper div.\n- Uses `role=\"combobox\"` with `aria-expanded`, which is true only while the list is on screen\n- Has `aria-haspopup=\"listbox\"` and `aria-autocomplete=\"list\"`, and, while the list is on screen, `aria-controls` pointing at it\n- Focus stays in the input, which points `aria-activedescendant` at the highlighted option as the arrow keys move it\n- The list is a `role=\"listbox\"` named through `aria-labelledby` by the label that names the input, when that label has an id: the `label` prop's label always has one, and so does a `Field`'s label that the `Field` wires itself. A `Field` label you wire by hand with `labelProps.htmlFor`, which is how a horizontal form names an Autocomplete in an inner `Field`, needs an `id` in its `labelProps` as well. Otherwise the list falls back to `aria-label=\"Suggestions\"`\n- Dropdown items use `role=\"option\"` with `aria-selected`\n- Disabled items have `aria-disabled`\n- The `clearable` clear button is a native button named \"Clear\": `Tab` from the input reaches it, and `Enter` or `Space` clears the input and puts focus back in it\n- Full keyboard navigation support",
+  "accessibility": "- The `label` prop is automatically associated with the inner text input (`htmlFor` plus a generated `id`, or your own `id` if you pass one), so clicking the label focuses the input and assistive technology announces it. Inside a labeled `Field`, that `Field`'s label names the input instead when it points at it: a `Field` that is not `grouped` or `hasAddons` points it there on its own when the Autocomplete has no `id` and no inner `Field` sits between them, and a label you wire by hand with `labelProps.htmlFor` points at the input with that `id`.\n- A user-supplied `id` is applied to the inner input (the labellable control), not the wrapper div.\n- Uses `role=\"combobox\"` with `aria-expanded`, which is true only while the list is on screen. When nothing matches, the dropdown shows the `empty` content but no list, so it stays false\n- Has `aria-haspopup=\"listbox\"` and `aria-autocomplete=\"list\"`, and, while the list is on screen, `aria-controls` pointing at it\n- Focus stays in the input, which points `aria-activedescendant` at the highlighted option as the arrow keys move it\n- The list is a `role=\"listbox\"` named through `aria-labelledby` by the label that names the input, when that label has an id: the `label` prop's label always has one, and so does a `Field`'s label that the `Field` wires itself. A `Field` label you wire by hand with `labelProps.htmlFor`, which is how a horizontal form names an Autocomplete in an inner `Field`, needs an `id` in its `labelProps` as well. Otherwise the list falls back to `aria-label=\"Suggestions\"`\n- The list holds only the options. The `header`, `footer` and `empty` content sit beside it in the dropdown, so a screen reader doesn't count them as options\n- When the user's typing leaves nothing that matches, the `empty` text is announced through a polite `role=\"status\"` region. That region is in the page from the start, so it's there before the message arrives. It's said once each time the matches run out, not again on every keystroke while they stay out, and the next search that comes up empty is announced too: after matches come back, after the field is emptied, or after the list closes and the user types again\n- While `loading` is on, or a `Control` with `isLoading` around the Autocomplete, the announcement waits, so the `empty` text that shows while results are on their way isn't read out. It's said once loading ends with nothing matching, for each search that comes back empty. Pass `loading` while you fetch results, as the async story in Storybook does\n- Focusing the field, opening the list with `openOnFocus` or `↓`, or emptying the field announces nothing. Without `empty`, nothing is announced at all, since there's no built-in message to say\n- `empty` is a message, so keep it to text. `Tab` closes the list, so a keyboard user can't reach a link or a button in it\n- Keep that message static, like \"No results found\". Its text is read when the matches first run out and isn't read again while they stay out, so a message that names the query, like \"No results for xyz\", is only heard for the query that ran them out\n- Dropdown items use `role=\"option\"` with `aria-selected`\n- Disabled items have `aria-disabled`\n- The `clearable` clear button is a native button named \"Clear\": `Tab` from the input reaches it, and `Enter` or `Space` clears the input and puts focus back in it\n- Full keyboard navigation support",
   "related": ["Input", "Select", "Taginput"],
   "storybook": "https://bestax.io/storybook/?path=/story/form-autocomplete",
   "summary": "The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.",
@@ -332,7 +332,7 @@
           "name": "header",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Custom header in dropdown.",
+          "description": "Custom header at the top of the dropdown. It sits above the list of options rather than in it, so assistive technology doesn't count it as one.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -341,7 +341,7 @@
           "name": "footer",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Custom footer in dropdown.",
+          "description": "Custom footer at the bottom of the dropdown. It sits below the list of options rather than in it, so assistive technology doesn't count it as one.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -350,7 +350,7 @@
           "name": "empty",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Content to show when no results.",
+          "description": "A message the dropdown shows in place of the options when nothing matches. Keep it to text: `Tab` closes the list, so a keyboard user can't reach a link or button in it. It sits beside the list of options rather than in it, so the input's `aria-expanded` stays false while it shows. When the user's typing leaves nothing that matches, a polite status region announces its text: once each time the matches run out. The text is read when they first run out, and isn't read again as it changes while they stay out, so a message that names the query is heard for that first query only. Keep it static. Opening the list without typing, or emptying the field, announces nothing. While `loading`, or a `Control` with `isLoading` around the Autocomplete, is on, it waits, and it's announced once loading ends with nothing matching. Without `empty`, the dropdown closes when nothing matches and nothing is announced.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Code.json

@@ -36,14 +36,10 @@
     {
       "title": "File Path",
       "code": "<Paragraph>\n  Edit the configuration file at <Code>src/config/settings.ts</Code> to change\n  the default values.\n</Paragraph>"
-    },
-    {
-      "title": "Keyboard Shortcuts",
-      "code": "<Paragraph>\n  Press <Code>Ctrl + C</Code> to copy and <Code>Ctrl + V</Code> to paste.\n</Paragraph>"
     }
   ],
   "accessibility": "- **Code Semantics:** Screen readers may indicate code content differently, helping users understand it's technical content.\n- **Monospace Font:** The `<code>` element typically renders in a monospace font, aiding readability of technical content.\n- **Context:** Provide context around code snippets so users understand what the code represents.\n\n:::info\nUse `Code` for short inline snippets. For multi-line code blocks that need to preserve whitespace and formatting, use the `Pre` component.\n:::",
-  "related": ["Figure", "Paragraph", "Pre", "useBulmaClasses"],
+  "related": ["Figure", "Kbd", "Paragraph", "Pre", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/elements-code--default",
   "summary": "The `Code` component renders a styled `<code>` element with Bulma helper class integration.",
   "import": "import { Code } from '@allxsmith/bestax-bulma';",

package/data/components/Kbd.json

@@ -0,0 +1,259 @@
+{
+  "name": "Kbd",
+  "kind": "component",
+  "category": "elements",
+  "slug": "elements/kbd",
+  "docsUrl": "https://bestax.io/docs/api/elements/kbd",
+  "examples": [
+    {
+      "title": "A Key",
+      "code": "<Paragraph>\n  Press <Kbd>Esc</Kbd> to close the dialog.\n</Paragraph>"
+    },
+    {
+      "title": "Combinations",
+      "code": "<Paragraph>\n  Open the command palette with{' '}\n  <Kbd.Group>\n    <Kbd>Ctrl</Kbd>\n    <Kbd>Shift</Kbd>\n    <Kbd>P</Kbd>\n  </Kbd.Group>\n  .\n</Paragraph>"
+    },
+    {
+      "title": "Sequences",
+      "code": "<Paragraph>\n  Go to your inbox with{' '}\n  <Kbd.Group separator=\"then\">\n    <Kbd>G</Kbd>\n    <Kbd>I</Kbd>\n  </Kbd.Group>\n  .\n</Paragraph>"
+    },
+    {
+      "title": "Symbol Keys",
+      "code": "<Paragraph>\n  Search with{' '}\n  <Kbd.Group>\n    <Kbd label=\"Command\">⌘</Kbd>\n    <Kbd>K</Kbd>\n  </Kbd.Group>\n  .\n</Paragraph>"
+    },
+    {
+      "title": "Keyboard Shortcuts",
+      "code": "<Paragraph>\n  Press{' '}\n  <Kbd.Group>\n    <Kbd>Ctrl</Kbd>\n    <Kbd>C</Kbd>\n  </Kbd.Group>{' '}\n  to copy and{' '}\n  <Kbd.Group>\n    <Kbd>Ctrl</Kbd>\n    <Kbd>V</Kbd>\n  </Kbd.Group>{' '}\n  to paste.\n</Paragraph>"
+    },
+    {
+      "title": "A Shortcuts Table",
+      "code": "<Table>\n  <Thead>\n    <Tr>\n      <Th>Action</Th>\n      <Th>Shortcut</Th>\n    </Tr>\n  </Thead>\n  <Tbody>\n    <Tr>\n      <Td>Command palette</Td>\n      <Td>\n        <Kbd.Group>\n          <Kbd>Ctrl</Kbd>\n          <Kbd>Shift</Kbd>\n          <Kbd>P</Kbd>\n        </Kbd.Group>\n      </Td>\n    </Tr>\n    <Tr>\n      <Td>Go to inbox</Td>\n      <Td>\n        <Kbd.Group separator=\"then\">\n          <Kbd>G</Kbd>\n          <Kbd>I</Kbd>\n        </Kbd.Group>\n      </Td>\n    </Tr>\n    <Tr>\n      <Td>Close</Td>\n      <Td>\n        <Kbd>Esc</Kbd>\n      </Td>\n    </Tr>\n  </Tbody>\n</Table>"
+    },
+    {
+      "title": "Sizes",
+      "code": "<>\n  <Title size=\"4\">\n    Press{' '}\n    <Kbd.Group>\n      <Kbd>Ctrl</Kbd>\n      <Kbd>K</Kbd>\n    </Kbd.Group>{' '}\n    to search\n  </Title>\n  <Block display=\"flex\" alignItems=\"baseline\">\n    <Kbd textSize=\"7\" mr=\"4\">\n      Esc\n    </Kbd>\n    <Kbd textSize=\"5\" mr=\"4\">\n      Esc\n    </Kbd>\n    <Kbd textSize=\"3\" mr=\"4\">\n      Esc\n    </Kbd>\n    <Kbd textSize=\"1\">Esc</Kbd>\n  </Block>\n</>"
+    },
+    {
+      "title": "In a Button",
+      "code": "<Buttons>\n  <Button color=\"primary\" aria-keyshortcuts=\"Control+S\">\n    Save\n    <Kbd.Group ml=\"2\">\n      <Kbd>Ctrl</Kbd>\n      <Kbd>S</Kbd>\n    </Kbd.Group>\n  </Button>\n  <Button aria-keyshortcuts=\"Escape\">\n    Cancel\n    <Kbd ml=\"2\">Esc</Kbd>\n  </Button>\n</Buttons>"
+    },
+    {
+      "title": "In a Tooltip",
+      "code": "<Tooltip\n  active\n  position=\"right\"\n  content={\n    <>\n      Bold{' '}\n      <Kbd.Group>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>B</Kbd>\n      </Kbd.Group>\n    </>\n  }\n>\n  <Button aria-keyshortcuts=\"Control+B\">Bold</Button>\n</Tooltip>"
+    },
+    {
+      "title": "Colors",
+      "code": "<>\n  <Notification color=\"info\">\n    Press <Kbd>Esc</Kbd> to close this panel.\n  </Notification>\n  <Notification color=\"warning\" isLight>\n    You have unsaved changes. Press{' '}\n    <Kbd.Group>\n      <Kbd>Ctrl</Kbd>\n      <Kbd>S</Kbd>\n    </Kbd.Group>{' '}\n    to save them.\n  </Notification>\n  <Paragraph>\n    Select a row and press{' '}\n    <Kbd textColor=\"danger\" colorShade=\"on-scheme\">\n      Del\n    </Kbd>{' '}\n    to delete it.\n  </Paragraph>\n</>"
+    },
+    {
+      "title": "Mac and Windows",
+      "code": "function example() {\n  const hydrated = useIsHydrated();\n  const isMac = hydrated && /Mac|iPhone|iPad/.test(navigator.userAgent);\n  return (\n    <Button aria-keyshortcuts={isMac ? 'Meta+K' : 'Control+K'}>\n      Search\n      <Kbd.Group ml=\"2\">\n        {isMac ? <Kbd label=\"Command\">⌘</Kbd> : <Kbd>Ctrl</Kbd>}\n        <Kbd>K</Kbd>\n      </Kbd.Group>\n    </Button>\n  );\n}"
+    },
+    {
+      "title": "Compound (dot-notation) usage",
+      "code": "<Paragraph>\n  Press{' '}\n  <Kbd.Group>\n    <Kbd label=\"Command\">⌘</Kbd>\n    <Kbd>Shift</Kbd>\n    <Kbd>P</Kbd>\n  </Kbd.Group>{' '}\n  on a Mac, then{' '}\n  <Kbd.Group separator=\"then\">\n    <Kbd>G</Kbd>\n    <Kbd>I</Kbd>\n  </Kbd.Group>\n  .\n</Paragraph>"
+    }
+  ],
+  "accessibility": "- **Markup:** a key is a `<kbd>`, and a combination is an outer `<kbd>` around one `<kbd>` per key,\n  the form the [HTML standard](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-kbd-element)\n  gives for keys pressed together. Neither adds a role or any `aria-*`, and neither takes focus.\n- **What a screen reader hears:** nothing marks a `<kbd>` as a key, so a screen reader reads the\n  text inside it like the rest of the sentence. The separator is text with a space either side,\n  so `Ctrl`, `Shift` and `P` read as \"Ctrl plus Shift plus P\" and never run together into one word.\n- **Symbols:** a glyph like ⌘, ⌥, ⇧, ⌃ or ⏎ needs a `label`. It goes in visually hidden text,\n  with the glyph hidden from assistive tech. Copying the key copies the label along with the glyph.\n- **Never `aria-label` on a key:** ARIA in HTML prohibits naming a `<kbd>`, so nothing obliges a\n  screen reader to read one. That's why `label` renders text instead.\n- **The shortcut lives on the control:** put\n  [`aria-keyshortcuts`](https://www.w3.org/TR/wai-aria-1.2/#aria-keyshortcuts) on the button or\n  link the shortcut triggers, in UI Events key names: `Control+Shift+P`, with `Meta` for ⌘ and\n  `Alt` for Option. `Kbd` is only the hint people see.\n- **Contrast:** the key's text is the color of the text around it and its fill is faint, so the\n  text keeps the contrast its paragraph, button or tooltip already has. `bgColor` replaces that\n  faint fill, so pair it with a `textColor` that holds contrast in both color schemes, such as\n  `textColor=\"black\"` on `bgColor=\"warning\"`.\n- **Forced colors:** in Windows high contrast mode the key keeps its border and drops its fill, so\n  it's an outlined key over whatever it sits on, a filled button or a tooltip included, rather\n  than a plate of the system's background color. Its bottom edge is a border, not a shadow, so it\n  survives too.\n- **Selectable:** the text can be selected and copied, so people can copy a shortcut out of a help\n  page.",
+  "related": [
+    "Button",
+    "ClientOnly",
+    "Code",
+    "Tag",
+    "Tooltip",
+    "useBulmaClasses"
+  ],
+  "storybook": "https://bestax.io/storybook/?path=/story/elements-kbd--default",
+  "summary": "The `Kbd` component renders a `<kbd>` drawn as a keycap, for a key the reader presses. It only shows the key: it doesn't listen for it. The key takes its colors from the text it sits in, and its size in `em`, so it fits a paragraph, a title or a filled button as it is, and `textSize` sizes it outright. For a combination or a sequence, put the keys in a `Kbd.Group`. What tells assistive tech a control has a shortcut is `aria-keyshortcuts` on that control, with `Kbd` as the hint people see next to it.",
+  "import": "import { Kbd } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/elements/Kbd.tsx",
+  "rootClass": "kbd",
+  "parts": [
+    {
+      "path": "Kbd",
+      "summary": "The `Kbd` component renders a `<kbd>` drawn as a keycap, for a key the reader presses. It only shows the key: it doesn't listen for it. The key takes its colors from the text it sits in, and its size in `em`, so it fits a paragraph, a title or a filled button as it is, and `textSize` sizes it outright. For a combination or a sequence, put the keys in a `Kbd.Group`. What tells assistive tech a control has a shortcut is `aria-keyshortcuts` on that control, with `Kbd` as the hint people see next to it.",
+      "component": null,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The key as it's printed on the keyboard: a word (`Ctrl`, `Esc`), a letter, or a symbol (`⌘`).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "What a screen reader says in place of a symbol, in your app's language: `label=\"Command\"` on `⌘`. The symbol is hidden from assistive tech with `aria-hidden`, and the label is read in its place, from text that's visually hidden. Use it for a glyph that isn't a word, such as `⌘`, `⌥`, `⇧`, `⌃` or `⏎`, and leave it off a key written as a word. Copying the key copies the label along with the glyph. Don't reach for `aria-label` instead: ARIA in HTML prohibits naming a `<kbd>`, so nothing obliges a screen reader to read it.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper. The key's edge and fill are mixed from its text color, so they follow it.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper. It replaces the key's faint fill, and the text still follows the text around it, which turns light in dark mode, so pair it with a `textColor` that reads on that color in both schemes, such as `textColor=\"black\"` on `bgColor=\"warning\"`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLElement>",
+          "default": null,
+          "description": "Ref forwarded to the `<kbd>`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard HTML attributes and Bulma helper props",
+      "types": []
+    },
+    {
+      "path": "Kbd.Group",
+      "summary": "Keys pressed together or one after another, in the outer `<kbd>` HTML gives a combination, with the separator between each pair as text. It doesn't wrap in the middle and isn't drawn as a key itself. It sets no font size, so the keys in it are the size of a key on its own.",
+      "component": null,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The keys, a `Kbd` each, in the order they're pressed. The group renders the outer `<kbd>` around them, so it doesn't go inside a `Kbd` of its own, and it puts the separator between them, so don't type one: a `+` of your own doubles up. A `null` or `false` child, or an empty Fragment, gets no separator, and the keys in a Fragment are separated like the rest. A component that renders nothing still gets one, since the group can't see what a child renders, so write a conditional key inline (`{isMac && <Kbd label=\"Command\">⌘</Kbd>}`), not in a component of its own.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "separator",
+          "type": "string",
+          "default": "'+'",
+          "description": "What goes between the keys, shown and read aloud, with a space either side. Use `'then'` for a sequence pressed one key after another. It's a string because a screen reader has to read it.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper. The keys and separators inside follow it.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLElement>",
+          "default": null,
+          "description": "Ref forwarded to the outer `<kbd>`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard HTML attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-kbd-family",
+      "sass": "$kbd-family",
+      "default": "var(--bulma-family-code)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-kbd-size",
+      "sass": "$kbd-size",
+      "default": "0.875em",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-kbd-weight",
+      "sass": "$kbd-weight",
+      "default": "var(--bulma-weight-normal)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-kbd-padding",
+      "sass": "$kbd-padding",
+      "default": "0.125em 0.375em",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-kbd-radius",
+      "sass": "$kbd-radius",
+      "default": "var(--bulma-radius-small)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-kbd-border-width",
+      "sass": "$kbd-border-width",
+      "default": "max(1px, 0.0625em)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-kbd-border-bottom-width",
+      "sass": "$kbd-border-bottom-width",
+      "default": "max(2px, 0.125em)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-kbd-border-color",
+      "sass": "$kbd-border-color",
+      "default": "color-mix(in srgb, currentColor 35%, transparent)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-kbd-background",
+      "sass": "$kbd-background",
+      "default": "color-mix(in srgb, currentColor 8%, transparent)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-kbd-color",
+      "sass": "$kbd-color",
+      "default": "currentColor",
+      "scope": "root"
+    }
+  ]
+}

package/data/skills/bestax-custom-component/references/component-catalog.md

@@ -37,7 +37,7 @@ instead of hand-writing markup.
 - Raw `*Base` form exports (`InputBase`, `SelectBase`, `TextAreaBase`, …) are
   escape-hatch variants of the convenience wrappers above them; see the Form docs.
 
-98 documented components. Generated from the API docs — every exported
+99 documented components. Generated from the API docs — every exported
 component is guaranteed to appear (the generator fails if one lacks an API page).
 
 ## Elements
@@ -55,6 +55,7 @@ component is guaranteed to appear (the generator fails if one lacks an API page)
 - [Icon](https://bestax.io/docs/api/elements/icon) — The `Icon` component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons…
 - [IconText](https://bestax.io/docs/api/elements/icontext) — The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
 - [Image](https://bestax.io/docs/api/elements/image) — The `Image` component wraps images, iframes, or custom content in a Bulma-styled container, supporting fixed sizes, aspect ratios, rounded corners…
+- [Kbd](https://bestax.io/docs/api/elements/kbd) — The `Kbd` component renders a `<kbd>` drawn as a keycap, for a key the reader presses.
 - [Link](https://bestax.io/docs/api/elements/link) — The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration.
 - [LinkButton](https://bestax.io/docs/api/elements/linkbutton) — The `LinkButton` component renders a `<button>` that visually looks like text or a link.
 - [ListItem](https://bestax.io/docs/api/elements/listitem) — The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.

package/data/skills/bestax-icons/references/icon-libraries.md

@@ -44,7 +44,7 @@ Set it once on `ConfigProvider` and omit `library` everywhere else.
 
 ## Ionicons — `'ion'` ⚠️ value is `ion`, not `ionicons`
 
-- **Setup:** a CDN script pair in `index.html` (no npm package — it registers the
+- **Setup:** a CDN script in `index.html` (no npm package — it registers the
   `<ion-icon>` web component):
 
   ```html
@@ -138,7 +138,7 @@ Docs: https://bestax.io/docs/guides/getting-started/alternative-icons#making-the
 2. **Name format for that library** — kebab vs snake_case (see the table above); for
    material-* a wrong name renders as literal text instead of a glyph.
 3. **The library's CSS/script is actually loaded** — the import in `main.tsx` (or the
-   Ionicons scripts in `index.html`) must exist; bestax ships none of them.
+   Ionicons script in `index.html`) must exist; bestax ships none of them.
 4. **Variant availability** — Font Awesome free has no `light`/`duotone`/`thin`; brand
    glyphs need `variant="brands"`.
 

package/data/skills/bestax-migrate/references/bloomer/prop-map.md

@@ -162,12 +162,12 @@ value is flagged. The same conversion covers the modifiers bestax has no prop fo
 ## Refs
 
 bloomer forwarded no refs. bestax forwards a ref from the form controls, plus `Avatar`,
-`Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `Link`, `LinkButton`, `Loader`,
-`Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`, `Navbar.Item`,
-`Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Toast` and
-`ToggleButton` — pass `ref` directly on those. "The form controls" means the inputs themselves:
-the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers around them forward
-nothing.
+`Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `Kbd`, `Kbd.Group`, `Link`,
+`LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`,
+`Navbar.Item`, `Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Toast`
+and `ToggleButton` — pass `ref` directly on those. "The form controls" means the inputs
+themselves: the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers around
+them forward nothing.
 
 A `ref` on anything else is unsupported, and the two React majors fail differently: React 18
 drops it and logs "Function components cannot be given refs", while React 19 hands it to the

package/data/skills/bestax-migrate/references/rbx/prop-map.md

@@ -158,12 +158,12 @@ TODO rather than write a second `ref`; keep whichever one you meant.
 
 An existing `ref` is passed through untouched — which is safe only where the bestax target
 forwards one. rbx forwards a ref on every component; bestax does so on the form controls, plus
-`Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `Link`, `LinkButton`,
-`Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`, `Navbar.Item`,
-`Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Toast` and
-`ToggleButton`. "The form controls" there means the inputs themselves: the `Field`,
-`Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers around them forward nothing, and
-`Field` is a target this codemod emits.
+`Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `Kbd`, `Kbd.Group`,
+`Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`,
+`Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`,
+`Sidebar`, `Toast` and `ToggleButton`. "The form controls" there means the inputs themselves: the
+`Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers around them forward
+nothing, and `Field` is a target this codemod emits.
 
 Carry a `ref` onto anything else — `Card`, `Box`, `Section`, `Message`, `Tabs` and most of the
 catalogue — and it is unsupported, but the two React majors fail differently. React 18 drops

package/data/skills/bestax-migrate/references/react-bulma-components/unmappables.md

@@ -145,13 +145,13 @@ that lists the sizes that component takes: use one of them, or drop the prop.
 ## `domRef`
 
 bestax components don't take `domRef`, but many forward a plain `ref` — the form controls,
-plus `Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `Link`,
-`LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`,
-`Navbar.Item`, `Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Toast`
-and `ToggleButton`. On those, rename `domRef` to `ref` and it works; do not restructure the
-markup. "The form controls" means the inputs themselves: the `Field`, `Field.Label`,
-`Field.Body`, `Checkboxes` and `Radios` wrappers around them forward nothing, and `Field` is a
-target this codemod emits.
+plus `Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `Kbd`, `Kbd.Group`,
+`Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`,
+`Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`,
+`Sidebar`, `Toast` and `ToggleButton`. On those, rename `domRef` to `ref` and it works; do not
+restructure the markup. "The form controls" means the inputs themselves: the `Field`,
+`Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers around them forward nothing, and
+`Field` is a target this codemod emits.
 
 Everywhere else the rename is not enough, and the two React majors differ: React 18 drops the
 ref and logs "Function components cannot be given refs", while React 19 passes it through as

package/data/skills/bestax-optimize/references/modular-build.md

@@ -80,7 +80,7 @@ is **more complete** than the docs page's Option C example, which omits several)
 `checkbox`, `radio`, `switch`, `slider`, `numberinput`, `rate`, `autocomplete`, `taginput`,
 `picker-popover`, `dateinput`, `timeinput`, `datetimeinput`, `daterangeinput`
 
-**Elements** (`@allxsmith/bestax-bulma/scss/elements/<name>`): `linkbutton`, `loader`,
+**Elements** (`@allxsmith/bestax-bulma/scss/elements/<name>`): `kbd`, `linkbutton`, `loader`,
 `notification`, `progress`, `skeleton`
 
 **Helpers** (`@allxsmith/bestax-bulma/scss/helpers/<name>`): `cursor`, `sizing`

package/data/skills/bestax-theming/references/css-variables.md

@@ -321,6 +321,16 @@ them. See the constituent-element exception above.
 `--bulma-hover-card-min-width`, `--bulma-hover-card-offset`, `--bulma-hover-card-padding`,
 `--bulma-hover-card-radius`, `--bulma-hover-card-shadow`, `--bulma-hover-card-z-index`
 
+### Kbd
+
+Declared on each key, `.kbd`. The border color and the fill default to `color-mix()` of
+`currentColor` with `transparent`, so a key follows its text in dark mode, in a filled button and
+in a tooltip without an override of its own. The sizes are in `em`, so `textSize` scales them.
+
+`--bulma-kbd-background`, `--bulma-kbd-border-bottom-width`, `--bulma-kbd-border-color`,
+`--bulma-kbd-border-width`, `--bulma-kbd-color`, `--bulma-kbd-family`, `--bulma-kbd-padding`,
+`--bulma-kbd-radius`, `--bulma-kbd-size`, `--bulma-kbd-weight`
+
 ### LinkButton
 
 Declared on the compound `.button.link-button` — see the compound-selector exception above.

package/data/skills/bestax-theming/references/themeable-components.md

@@ -65,6 +65,7 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
 | `DateTimeInput`    | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | also `isRounded`                                                                                                                                    |
 | `File`             | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | `small \| medium \| large`                                                | also `isBoxed`, `isFullwidth`                                                                                                                       |
 | `Hero`             | every `validColors` member + `inherit`/`current` (the `-bis`/`-ter` shades, the greys, `inherit` and `current` deprecated: no CSS, dev-warn, removed next major — see ⚠️) | `small \| medium \| large \| fullheight \| fullheight-with-navbar`        | section background                                                                                                                                  |
+| `Kbd`              | — (no `color`: the edge and fill are mixed from the text color, so `textColor` tints them; `bgColor` replaces the fill, so pair it with a `textColor`)                    | — (sized in `em` from the text around it; size it with `textSize`)        | one keycap look, no `variant`; `Kbd.Group` takes `textColor` too; retheme through `--bulma-kbd-*`                                                   |
 | `LinkButton`       | `primary \| link \| info \| success \| warning \| danger \| white \| light \| dark \| black`                                                                              | —                                                                         | button-styled link; emits `link-button-<color>` — **no `isLight`/`isOutlined`/`isInverted`**                                                        |
 | `Loader`           | — (no color props: the ring is drawn in `--bulma-border`)                                                                                                                 | — (the ring is `1em`; size it with `textSize`)                            | for a colored spinner over a region, use `Loading`                                                                                                  |
 | `Loading`          | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | spinner color; default light grey                                                                                                                   |

package/data/skills.json

@@ -10,7 +10,7 @@
         {
           "id": "component-catalog",
           "file": "references/component-catalog.md",
-          "bytes": 19629
+          "bytes": 19769
         },
         {
           "id": "library-contributor",
@@ -43,7 +43,7 @@
         {
           "id": "icon-libraries",
           "file": "references/icon-libraries.md",
-          "bytes": 9172
+          "bytes": 9166
         }
       ],
       "examples": [
@@ -93,7 +93,7 @@
         {
           "id": "bloomer-prop-map",
           "file": "references/bloomer/prop-map.md",
-          "bytes": 24605
+          "bytes": 24625
         },
         {
           "id": "bloomer-unmappables",
@@ -128,7 +128,7 @@
         {
           "id": "rbx-prop-map",
           "file": "references/rbx/prop-map.md",
-          "bytes": 12370
+          "bytes": 12390
         },
         {
           "id": "rbx-unmappables",
@@ -148,7 +148,7 @@
         {
           "id": "react-bulma-components-unmappables",
           "file": "references/react-bulma-components/unmappables.md",
-          "bytes": 12232
+          "bytes": 12252
         }
       ],
       "examples": []
@@ -162,7 +162,7 @@
         {
           "id": "modular-build",
           "file": "references/modular-build.md",
-          "bytes": 10291
+          "bytes": 10298
         }
       ],
       "examples": []
@@ -176,12 +176,12 @@
         {
           "id": "css-variables",
           "file": "references/css-variables.md",
-          "bytes": 33044
+          "bytes": 33582
         },
         {
           "id": "themeable-components",
           "file": "references/themeable-components.md",
-          "bytes": 22573
+          "bytes": 22998
         }
       ],
       "examples": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bestax-mcp",
-  "version": "1.15.0",
+  "version": "1.15.2",
   "mcpName": "io.github.allxsmith/bestax-mcp",
   "description": "MCP server for @allxsmith/bestax-bulma — component props, examples, CSS variables and agent skills, served offline from a version-pinned index",
   "type": "module",
@@ -42,7 +42,7 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.31.0",
     "zod": "^4.4.3",
-    "@allxsmith/bestax-bulma": "^5.32.0"
+    "@allxsmith/bestax-bulma": "^5.33.1"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",