bestax-mcp 1.18.13 → 1.18.15

package/data/bulma-classes.json

@@ -13105,6 +13105,7 @@
     "combobox": "Combobox",
     "context-menu": "ContextMenu",
     "daterangeinput": "DateRangeInput",
+    "description-list": "DescriptionList",
     "dialog": "Dialog",
     "empty-state": "EmptyState",
     "hover-card": "HoverCard",
@@ -13117,6 +13118,7 @@
     "styled-radio": "Radio",
     "rate": "Rate",
     "reveal": "Reveal",
+    "ring-progress": "RingProgress",
     "scroll-area": "ScrollArea",
     "sidebar": "Sidebar",
     "slider": "Slider",

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.49.1"
+    "version": "5.51.0"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -17,6 +17,7 @@
         "Code",
         "Content",
         "Delete",
+        "DescriptionList",
         "Divider",
         "Emphasis",
         "Figure",
@@ -33,6 +34,7 @@
         "Paragraph",
         "Pre",
         "Progress",
+        "RingProgress",
         "Skeleton",
         "Span",
         "Strong",
@@ -476,6 +478,17 @@
       "propCount": 8,
       "exampleCount": 10
     },
+    {
+      "name": "DescriptionList",
+      "kind": "component",
+      "category": "elements",
+      "purpose": "The `DescriptionList` component lists facts about one thing, each a label and its value, such as an order's details or a profile.",
+      "slug": "elements/descriptionlist",
+      "import": "import { DescriptionList } from '@allxsmith/bestax-bulma';",
+      "compound": true,
+      "propCount": 25,
+      "exampleCount": 10
+    },
     {
       "name": "Dialog",
       "kind": "component",
@@ -949,6 +962,17 @@
       "propCount": 11,
       "exampleCount": 5
     },
+    {
+      "name": "RingProgress",
+      "kind": "component",
+      "category": "elements",
+      "purpose": "The `RingProgress` component draws a value as a ring that fills as it grows, with anything you pass shown in the middle.",
+      "slug": "elements/ringprogress",
+      "import": "import { RingProgress } from '@allxsmith/bestax-bulma';",
+      "compound": false,
+      "propCount": 12,
+      "exampleCount": 7
+    },
     {
       "name": "ScrollArea",
       "kind": "component",
@@ -1655,6 +1679,15 @@
     "--bulma-delete-background-l": ["Delete"],
     "--bulma-delete-color": ["Delete"],
     "--bulma-delete-dimensions": ["Delete"],
+    "--bulma-description-list-column-gap": ["DescriptionList"],
+    "--bulma-description-list-divider-color": ["DescriptionList"],
+    "--bulma-description-list-divider-width": ["DescriptionList"],
+    "--bulma-description-list-gap": ["DescriptionList"],
+    "--bulma-description-list-label-color": ["DescriptionList"],
+    "--bulma-description-list-label-max-width": ["DescriptionList"],
+    "--bulma-description-list-label-weight": ["DescriptionList"],
+    "--bulma-description-list-row-gap": ["DescriptionList"],
+    "--bulma-description-list-value-color": ["DescriptionList"],
     "--bulma-dialog-animation-duration": ["Dialog"],
     "--bulma-dialog-background": ["Dialog"],
     "--bulma-dialog-body-color": ["Dialog"],
@@ -2420,6 +2453,14 @@
     "--bulma-reveal-offset": ["Reveal"],
     "--bulma-reveal-offset-large": ["Reveal"],
     "--bulma-reveal-scale": ["Reveal"],
+    "--bulma-ring-progress-arc-color": ["RingProgress"],
+    "--bulma-ring-progress-duration": ["RingProgress"],
+    "--bulma-ring-progress-label-color": ["RingProgress"],
+    "--bulma-ring-progress-label-size": ["RingProgress"],
+    "--bulma-ring-progress-label-weight": ["RingProgress"],
+    "--bulma-ring-progress-size": ["RingProgress"],
+    "--bulma-ring-progress-thickness": ["RingProgress"],
+    "--bulma-ring-progress-track-color": ["RingProgress"],
     "--bulma-scroll-area-fade-size": ["ScrollArea"],
     "--bulma-scroll-area-scrollbar-width": ["ScrollArea"],
     "--bulma-scroll-area-thumb-color": ["ScrollArea"],
@@ -2760,6 +2801,21 @@
       "purpose": "Raw DateTimeInput — combined input + calendar + time spinner without Field/Control wrapping.",
       "standalone": "base"
     },
+    "DescriptionListItem": {
+      "component": "DescriptionList",
+      "path": "DescriptionList.Item",
+      "purpose": "One fact: its label and its value, in a `<div>`, from the `label` and `value` props or from `Label` and `Value` children."
+    },
+    "DescriptionListLabel": {
+      "component": "DescriptionList",
+      "path": "DescriptionList.Label",
+      "purpose": "A label, the name of a fact: a `<dt>`, in the weaker text color."
+    },
+    "DescriptionListValue": {
+      "component": "DescriptionList",
+      "path": "DescriptionList.Value",
+      "purpose": "A value, what the label says about the thing: a `<dd>`."
+    },
     "DialogContainer": {
       "component": "Dialog",
       "path": "DialogContainer",

package/data/components/DescriptionList.json

@@ -0,0 +1,436 @@
+{
+  "name": "DescriptionList",
+  "kind": "component",
+  "category": "elements",
+  "slug": "elements/descriptionlist",
+  "docsUrl": "https://bestax.io/docs/api/elements/descriptionlist",
+  "examples": [
+    {
+      "title": "Basic Usage",
+      "code": "<>\n  <Title as=\"h2\" textSize=\"5\" id=\"order-heading\">\n    Order details\n  </Title>\n  <DescriptionList aria-labelledby=\"order-heading\">\n    <DescriptionList.Item label=\"Order\" value=\"#1234\" />\n    <DescriptionList.Item label=\"Placed on\" value=\"14 October 2026\" />\n    <DescriptionList.Item\n      label=\"Estimated delivery\"\n      value=\"Between 18 and 21 October 2026\"\n    />\n    <DescriptionList.Item label=\"Total\" value=\"$86.40\" />\n  </DescriptionList>\n</>"
+    },
+    {
+      "title": "Links, Tags and Other Values",
+      "code": "<DescriptionList>\n  <DescriptionList.Item\n    label=\"Status\"\n    value={<Tag color=\"success\">Shipped</Tag>}\n  />\n  <DescriptionList.Item\n    label=\"Tracking\"\n    value={<Link href=\"#track\">1Z999AA10123456784</Link>}\n  />\n  <DescriptionList.Item label=\"Coupon\" value=\"None used\" />\n</DescriptionList>"
+    },
+    {
+      "title": "Several Values",
+      "code": "<DescriptionList>\n  <DescriptionList.Item label=\"Delivery notes\">\n    <DescriptionList.Value>Leave with a neighbour</DescriptionList.Value>\n    <DescriptionList.Value>Ring twice</DescriptionList.Value>\n  </DescriptionList.Item>\n  <DescriptionList.Item label=\"Gift message\" value=\"Happy birthday, Ada!\" />\n</DescriptionList>"
+    },
+    {
+      "title": "An Info Tip on a Label",
+      "code": "<DescriptionList>\n  <DescriptionList.Item label=\"Order\" value=\"#1234\" />\n  <DescriptionList.Item value=\"Partner warehouse\">\n    <DescriptionList.Label>\n      Fulfilment{' '}\n      <Popover\n        ariaLabel=\"About fulfilment\"\n        trigger={\n          <Button size=\"small\" color=\"ghost\" aria-label=\"About fulfilment\">\n            <Icon name=\"circle-info\" />\n          </Button>\n        }\n      >\n        <Popover.Body>\n          Packed and shipped by a partner warehouse, not by us.\n        </Popover.Body>\n        <Popover.Footer>\n          <Popover.Close size=\"small\">Close</Popover.Close>\n        </Popover.Footer>\n      </Popover>\n    </DescriptionList.Label>\n  </DescriptionList.Item>\n</DescriptionList>"
+    },
+    {
+      "title": "Orientation",
+      "code": "<>\n  <DescriptionList orientation=\"horizontal\">\n    <DescriptionList.Item label=\"Name\" value=\"Ada Lovelace\" />\n    <DescriptionList.Item label=\"Email address\" value=\"ada@example.com\" />\n  </DescriptionList>\n  <DescriptionList orientation=\"vertical\">\n    <DescriptionList.Item label=\"Name\" value=\"Ada Lovelace\" />\n    <DescriptionList.Item label=\"Email address\" value=\"ada@example.com\" />\n  </DescriptionList>\n</>"
+    },
+    {
+      "title": "Per Viewport",
+      "code": "<DescriptionList orientation=\"vertical\" orientationDesktop=\"horizontal\">\n  <DescriptionList.Item label=\"Plan\" value=\"Team\" />\n  <DescriptionList.Item label=\"Seats\" value=\"12 of 15 used\" />\n  <DescriptionList.Item label=\"Renews on\" value=\"1 November 2026\" />\n</DescriptionList>"
+    },
+    {
+      "title": "Dividers",
+      "code": "<DescriptionList hasDividers>\n  <DescriptionList.Item label=\"Name\" value=\"Ada Lovelace\" />\n  <DescriptionList.Item label=\"Email\" value=\"ada@example.com\" />\n  <DescriptionList.Item label=\"Plan\" value=\"Team\" />\n  <DescriptionList.Item label=\"Member since\" value=\"March 2019\" />\n</DescriptionList>"
+    },
+    {
+      "title": "Text Size",
+      "code": "<>\n  <DescriptionList textSize=\"7\">\n    <DescriptionList.Item label=\"Size\" value=\"2.4 MB\" />\n    <DescriptionList.Item label=\"Type\" value=\"PDF document\" />\n  </DescriptionList>\n  <DescriptionList textSize=\"5\">\n    <DescriptionList.Item label=\"Size\" value=\"2.4 MB\" />\n    <DescriptionList.Item label=\"Type\" value=\"PDF document\" />\n  </DescriptionList>\n</>"
+    },
+    {
+      "title": "From an Array",
+      "code": "function example() {\n  const file = [\n    ['Name', 'quarterly-report.pdf'],\n    ['Size', '2.4 MB'],\n    ['Owner', 'Ada Lovelace'],\n    ['Last changed', '27 October 2026'],\n  ];\n  return (\n    <DescriptionList>\n      {file.map(([label, value]) => (\n        <DescriptionList.Item key={label} label={label} value={value} />\n      ))}\n    </DescriptionList>\n  );\n}"
+    },
+    {
+      "title": "Compound (dot-notation) usage",
+      "code": "<DescriptionList orientation=\"horizontal\">\n  <DescriptionList.Item>\n    <DescriptionList.Label>Author</DescriptionList.Label>\n    <DescriptionList.Label>Translator</DescriptionList.Label>\n    <DescriptionList.Value>Ada Lovelace</DescriptionList.Value>\n  </DescriptionList.Item>\n  <DescriptionList.Item>\n    <DescriptionList.Label>Languages</DescriptionList.Label>\n    <DescriptionList.Value>English</DescriptionList.Value>\n    <DescriptionList.Value>French</DescriptionList.Value>\n    <DescriptionList.Value>Italian</DescriptionList.Value>\n  </DescriptionList.Item>\n</DescriptionList>"
+    }
+  ],
+  "accessibility": "- **HTML's own elements, and no roles:** a `<dl>`, a `<div>` for each item, a `<dt>` for each\n  label and a `<dd>` for each value. Browsers expose them as a list, terms and definitions.\n- **A name from the heading above:** point `aria-labelledby` at it, as in\n  [Basic Usage](https://bestax.io/docs/api/elements/descriptionlist#basic-usage), so a screen reader names the list when it reaches it.\n- **Reading order is the order you write:** each label is read before its value at every width and\n  in right-to-left text, since the layout only changes where the parts sit.\n- **Screen readers announce it in different ways,** and none of them loses the content. Some count\n  the labels and the values as separate items and some count the pairs, some say \"term\" and\n  \"definition\" and some don't, and some don't say there's a list at all as you move through it.\n  Adrian Roselli's notes, under Additional Resources, follow which does what. Where a user must\n  hear the label with every value, [use a table](https://bestax.io/docs/api/elements/descriptionlist#use-a-table-instead-when).\n- **Info tips:** a real button named \"About\" and the label, opening a `Popover`, as in\n  [An Info Tip on a Label](https://bestax.io/docs/api/elements/descriptionlist#an-info-tip-on-a-label), rather than a tip that opens on hover.\n- **Contrast:** the labels, in Bulma's `text-weak`, and the values, in `text`, both clear WCAG's\n  4.5:1 against Bulma's page background in light and dark mode.\n- **Forced colors:** the layout, the text and the dividers stay. The labels lose their lighter\n  color there, and their place, first or above, still tells them from the values.\n- **Not interactive and not live:** it has no tab stop of its own and announces nothing when it\n  changes.",
+  "related": ["Content", "Popover", "Table", "Title", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/elements-descriptionlist--default",
+  "summary": "The `DescriptionList` component lists facts about one thing, each a label and its value, such as an order's details or a profile. It's a `<dl>`, with a `<div>` for each item, a `<dt>` for each label and a `<dd>` for each value, so assistive tech gets HTML's own list of terms and definitions and no roles are added. Labels sit above their values on a phone and beside them from Bulma's tablet breakpoint up, where every label shares one column so the values line up. For data with two dimensions, such as several records with the same fields, use a `Table`.",
+  "import": "import { DescriptionList } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/elements/DescriptionList.tsx",
+  "rootClass": "description-list",
+  "parts": [
+    {
+      "path": "DescriptionList",
+      "summary": "The `DescriptionList` component lists facts about one thing, each a label and its value, such as an order's details or a profile. It's a `<dl>`, with a `<div>` for each item, a `<dt>` for each label and a `<dd>` for each value, so assistive tech gets HTML's own list of terms and definitions and no roles are added. Labels sit above their values on a phone and beside them from Bulma's tablet breakpoint up, where every label shares one column so the values line up. For data with two dimensions, such as several records with the same fields, use a `Table`.",
+      "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": "`DescriptionList.Item`s, one for each fact.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "orientation",
+          "type": "'vertical' | 'horizontal'",
+          "default": null,
+          "description": "Whether each label sits above its value or beside it, at every width no `orientation<Viewport>` prop covers. Those props read the way a `Column`'s `size<Viewport>` props do: `orientationMobile` applies below Bulma's tablet breakpoint, each of the others from its own breakpoint up, and where several apply the widest one wins. With none of them, labels sit above their values below the tablet breakpoint and beside them from it up. Beside, the labels share one column as wide as the longest label, up to `--bulma-description-list-label-max-width`, so the values line up.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "orientationMobile",
+          "type": "'vertical' | 'horizontal'",
+          "default": null,
+          "description": "The orientation below Bulma's tablet breakpoint (769px). Falls back to `orientation`, then to `vertical`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "orientationTablet",
+          "type": "'vertical' | 'horizontal'",
+          "default": null,
+          "description": "The orientation from Bulma's tablet breakpoint (769px) up, until a wider viewport's prop takes over. Falls back to `orientation`, then to `horizontal`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "orientationDesktop",
+          "type": "'vertical' | 'horizontal'",
+          "default": null,
+          "description": "The orientation from Bulma's desktop breakpoint (1024px) up, until a wider viewport's prop takes over. Falls back to `orientationTablet`, and on down.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "orientationWidescreen",
+          "type": "'vertical' | 'horizontal'",
+          "default": null,
+          "description": "The orientation from Bulma's widescreen breakpoint (1216px) up, until `orientationFullhd` takes over. Falls back to `orientationDesktop`, and on down.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "orientationFullhd",
+          "type": "'vertical' | 'horizontal'",
+          "default": null,
+          "description": "The orientation from Bulma's fullhd breakpoint (1408px) up. Falls back to `orientationWidescreen`, and on down.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "hasDividers",
+          "type": "boolean",
+          "default": "false",
+          "description": "Draws a line between items, which helps the eye from a label to its value across a wide list, and shows where each item ends to someone zoomed in.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper. It colors the values; the labels keep their own color.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLDListElement>",
+          "default": null,
+          "description": "Ref forwarded to the `<dl>`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "default": null,
+          "description": "The id of the heading above the list, which names it.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <dl> attributes and Bulma helper props",
+      "types": []
+    },
+    {
+      "path": "DescriptionList.Item",
+      "summary": "One fact: its label and its value, in a `<div>`, from the `label` and `value` props or from `Label` and `Value` children.",
+      "component": null,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "label",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The label, such as \"Order\", as a `DescriptionList.Label` before the children.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "value",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The value, such as \"#1234\", as a `DescriptionList.Value` after the children. Text, a link, a `Tag`: anything that renders. `undefined`, `null` and `''` render nothing, so when a value is missing, say so in words, such as \"Not given\", rather than leave a label with nothing after it.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "`DescriptionList.Label`s and `DescriptionList.Value`s, for what `label` and `value` don't cover, such as a label with an info tip or several values. They render between the two, so a `Label` here reads before `value`, and a `Value` here after `label`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLDivElement>",
+          "default": null,
+          "description": "Ref forwarded to the `<div>`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <div> attributes and Bulma helper props",
+      "types": []
+    },
+    {
+      "path": "DescriptionList.Label",
+      "summary": "A label, the name of a fact: a `<dt>`, in the weaker text color.",
+      "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 label. A button may sit in it, such as one that opens a `Popover` about the label, but not a heading, which HTML doesn't allow here.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLElement>",
+          "default": null,
+          "description": "Ref forwarded to the `<dt>`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard HTML attributes and Bulma helper props",
+      "types": []
+    },
+    {
+      "path": "DescriptionList.Value",
+      "summary": "A value, what the label says about the thing: a `<dd>`. An item may have several.",
+      "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 value. Anything goes, a list or a paragraph included.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLElement>",
+          "default": null,
+          "description": "Ref forwarded to the `<dd>`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard HTML attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-description-list-gap",
+      "sass": "$description-list-gap",
+      "default": "0.75em",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-description-list-column-gap",
+      "sass": "$description-list-column-gap",
+      "default": "1.5em",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-description-list-row-gap",
+      "sass": "$description-list-row-gap",
+      "default": "0.25em",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-description-list-label-max-width",
+      "sass": "$description-list-label-max-width",
+      "default": "40%",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-description-list-label-color",
+      "sass": "$description-list-label-color",
+      "default": "var(--bulma-text-weak)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-description-list-label-weight",
+      "sass": "$description-list-label-weight",
+      "default": "var(--bulma-weight-normal)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-description-list-value-color",
+      "sass": "$description-list-value-color",
+      "default": "var(--bulma-text)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-description-list-divider-color",
+      "sass": "$description-list-divider-color",
+      "default": "var(--bulma-border-weak)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-description-list-divider-width",
+      "sass": "$description-list-divider-width",
+      "default": "1px",
+      "scope": "root"
+    }
+  ]
+}

package/data/components/RingProgress.json

@@ -0,0 +1,250 @@
+{
+  "name": "RingProgress",
+  "kind": "component",
+  "category": "elements",
+  "slug": "elements/ringprogress",
+  "docsUrl": "https://bestax.io/docs/api/elements/ringprogress",
+  "examples": [
+    {
+      "title": "Basic Usage",
+      "code": "<RingProgress value={72} label=\"Upload\" color=\"success\">\n  72%\n</RingProgress>"
+    },
+    {
+      "title": "Out of Something Else",
+      "code": "<RingProgress\n  value={7}\n  max={10}\n  label=\"Weekly goal\"\n  aria-valuetext=\"7 of 10 tasks\"\n>\n  7/10\n</RingProgress>"
+    },
+    {
+      "title": "A Level, Not a Task",
+      "code": "<RingProgress isMeter value={64} label=\"Storage used\" color=\"info\" size=\"large\">\n  64%\n</RingProgress>"
+    },
+    {
+      "title": "Sections",
+      "code": "<>\n  <RingProgress\n    label=\"Storage\"\n    size=\"medium\"\n    sections={[\n      { value: 40, color: 'info', label: 'Documents' },\n      { value: 15, color: 'warning', label: 'Photos' },\n      { value: 15, color: 'danger', label: 'Video' },\n    ]}\n  >\n    70%\n  </RingProgress>\n  <Tags mt=\"3\">\n    <Tag color=\"info\">Documents 40%</Tag>\n    <Tag color=\"warning\">Photos 15%</Tag>\n    <Tag color=\"danger\">Video 15%</Tag>\n  </Tags>\n</>"
+    },
+    {
+      "title": "Colors",
+      "code": "<>\n  <RingProgress value={70} label=\"Primary\" color=\"primary\" mr=\"3\" />\n  <RingProgress value={70} label=\"Link\" color=\"link\" mr=\"3\" />\n  <RingProgress value={70} label=\"Info\" color=\"info\" mr=\"3\" />\n  <RingProgress value={70} label=\"Success\" color=\"success\" mr=\"3\" />\n  <RingProgress value={70} label=\"Warning\" color=\"warning\" mr=\"3\" />\n  <RingProgress value={70} label=\"Danger\" color=\"danger\" />\n</>"
+    },
+    {
+      "title": "Sizes and Rounded Ends",
+      "code": "<>\n  <RingProgress value={60} label=\"Small\" size=\"small\" isRounded mr=\"4\" />\n  <RingProgress value={60} label=\"Normal\" isRounded mr=\"4\" />\n  <RingProgress value={60} label=\"Medium\" size=\"medium\" isRounded mr=\"4\" />\n  <RingProgress value={60} label=\"Large\" size=\"large\" isRounded />\n</>"
+    },
+    {
+      "title": "A Value That Changes",
+      "code": "function example() {\n  const [value, setValue] = useState(20);\n  return (\n    <>\n      <RingProgress value={value} label=\"Upload\" color=\"success\" mb=\"3\">\n        {value}%\n      </RingProgress>\n      <Paragraph role=\"status\">\n        {value >= 100 ? 'Upload complete' : ''}\n      </Paragraph>\n      <Button size=\"small\" onClick={() => setValue(v => Math.min(100, v + 20))}>\n        Move it on\n      </Button>\n    </>\n  );\n}"
+    }
+  ],
+  "accessibility": "- **Roles:** `role=\"progressbar\"` by default, `role=\"meter\"` with `isMeter`, and `role=\"img\"` with\n  `sections`, on the ring itself, named by `label` (or `aria-label`, or `aria-labelledby` with a\n  visible heading's id). A development build warns when it has no name.\n- **Values:** a progressbar or a meter has `aria-valuenow`, `aria-valuemin` and `aria-valuemax`,\n  read as a percentage unless `aria-valuetext` says otherwise. With `sections`, use `label`, since\n  a name from `aria-labelledby` would replace the one that lists the values.\n- **The drawing and the middle are hidden** from assistive tech, which reads the value from the\n  ring, so nothing is heard twice.\n- **Contrast:** against the track, the `primary` and `link` arcs clear WCAG 1.4.11's 3:1 on a\n  light page and the `info`, `success`, `warning` and `danger` arcs on a dark one. The others fall\n  short in that scheme, as they do in Bulma's progress bar, so show the value as text in the middle\n  where it matters.\n- **Forced colors:** the arcs take the system's text color and the track its gray, and sections\n  get gaps between them, since they're one color there.\n- **Motion:** the arc doesn't slide under `prefers-reduced-motion: reduce`.\n- **Not live:** a changing value announces nothing on its own.",
+  "related": ["Loader", "Progress", "Tags", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/elements-ringprogress--default",
+  "summary": "The `RingProgress` component draws a value as a ring that fills as it grows, with anything you pass shown in the middle. It's a `progressbar` for a task moving toward done, or a `meter` with `isMeter` for a level within a range, named by `label`. With `sections` it draws several values around one ring and is an image whose name lists them. It has no state for work with no value: that's `Loader`.",
+  "import": "import { RingProgress } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/elements/RingProgress.tsx",
+  "rootClass": "ring-progress",
+  "parts": [
+    {
+      "path": "RingProgress",
+      "summary": "The `RingProgress` component draws a value as a ring that fills as it grows, with anything you pass shown in the middle. It's a `progressbar` for a task moving toward done, or a `meter` with `isMeter` for a level within a range, named by `label`. With `sections` it draws several values around one ring and is an image whose name lists them. It has no state for work with no value: that's `Loader`.",
+      "component": null,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "value",
+          "type": "number",
+          "default": null,
+          "description": "How far along it is, from 0 to `max`. Values outside that range are drawn, and read, at the nearest end. Ignored with `sections`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "default": "100",
+          "description": "The value that fills the ring.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "sections",
+          "type": "{ value: number; color?: RingProgressColor; label: string }[]",
+          "default": null,
+          "description": "Several values around one ring, in order clockwise from the top, each with its own color and label. The ring is then an image whose name writes them out, such as \"Storage: Documents 40%, Photos 15%\", since a screen reader can't take several values from one element. A total over `max` fills the ring and stops.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "What it shows, such as \"Upload\" or \"Storage\". It names the ring, so it's read with the value. A development build warns when the ring has no name.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isMeter",
+          "type": "boolean",
+          "default": "false",
+          "description": "A level within a range, such as storage used or a score, rather than a task moving toward done: `role=\"meter\"` in place of `role=\"progressbar\"`. Ignored with `sections`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "color",
+          "type": "RingProgressColor",
+          "default": null,
+          "description": "The arc's color, and the color of sections without one.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'medium' | 'large'",
+          "default": null,
+          "description": "The ring's size.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isRounded",
+          "type": "boolean",
+          "default": "false",
+          "description": "Rounds the ends of the arc.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "What sits in the middle of the ring, such as the value as text. It's hidden from assistive tech, which reads the value from the ring itself, so the value isn't heard twice. Say anything more, such as \"7 of 10 tasks\", in `aria-valuetext`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLDivElement>",
+          "default": null,
+          "description": "Ref forwarded to the root `<div>`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "default": null,
+          "description": "The id of a visible heading that names the ring, in place of `label`. With `sections`, use `label`, since a name from here replaces the one that lists the values.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "aria-valuetext",
+          "type": "string",
+          "default": null,
+          "description": "What a screen reader says for the value, such as \"7 of 10 tasks\". Without it, the value is read as a percentage.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <div> attributes and Bulma helper props",
+      "types": [
+        {
+          "name": "RingProgressColor",
+          "expansion": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white'",
+          "summary": "The Bulma colors an arc takes, the ones `Progress` takes."
+        }
+      ]
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-ring-progress-size",
+      "sass": "$ring-progress-size",
+      "default": "5rem",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-ring-progress-thickness",
+      "sass": "$ring-progress-thickness",
+      "default": "10",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-ring-progress-track-color",
+      "sass": "$ring-progress-track-color",
+      "default": "var(--bulma-border-weak)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-ring-progress-arc-color",
+      "sass": "$ring-progress-arc-color",
+      "default": "var(--bulma-primary)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-ring-progress-duration",
+      "sass": "$ring-progress-duration",
+      "default": "var(--bulma-duration)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-ring-progress-label-color",
+      "sass": "$ring-progress-label-color",
+      "default": "var(--bulma-text-strong)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-ring-progress-label-weight",
+      "sass": "$ring-progress-label-weight",
+      "default": "var(--bulma-weight-semibold)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-ring-progress-label-size",
+      "sass": "$ring-progress-label-size",
+      "default": "calc(var(--bulma-ring-progress-size) / 5)",
+      "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.
 
-106 documented components. Generated from the API docs — every exported
+108 documented components. Generated from the API docs — every exported
 component is guaranteed to appear (the generator fails if one lacks an API page).
 
 ## Elements
@@ -49,6 +49,7 @@ component is guaranteed to appear (the generator fails if one lacks an API page)
 - [Code](https://bestax.io/docs/api/elements/code) — The `Code` component renders a styled `<code>` element with Bulma helper class integration.
 - [Content](https://bestax.io/docs/api/elements/content) — The `Content` component applies Bulma’s typographic styles to its children, enhancing the appearance of HTML elements like paragraphs, headings, lists…
 - [Delete](https://bestax.io/docs/api/elements/delete) — The `Delete` component provides a Bulma-styled close/delete button for dismissing modals, notifications, tags, messages, and more.
+- [DescriptionList](https://bestax.io/docs/api/elements/descriptionlist) — The `DescriptionList` component lists facts about one thing, each a label and its value, such as an order's details or a profile.
 - [Divider](https://bestax.io/docs/api/elements/divider) — The `Divider` component renders a styled horizontal rule (`<hr>`) element with Bulma helper class integration.
 - [Emphasis](https://bestax.io/docs/api/elements/emphasis) — The `Emphasis` component renders a styled `<em>` element with Bulma helper class integration.
 - [Figure](https://bestax.io/docs/api/elements/figure) — The `Figure` component renders a styled `<figure>` element with Bulma helper class integration.
@@ -65,6 +66,7 @@ component is guaranteed to appear (the generator fails if one lacks an API page)
 - [Paragraph](https://bestax.io/docs/api/elements/paragraph) — The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.
 - [Pre](https://bestax.io/docs/api/elements/pre) — The `Pre` component renders a styled `<pre>` element with Bulma helper class integration.
 - [Progress](https://bestax.io/docs/api/elements/progress) — The `Progress` component displays a Bulma-styled progress bar.
+- [RingProgress](https://bestax.io/docs/api/elements/ringprogress) — The `RingProgress` component draws a value as a ring that fills as it grows, with anything you pass shown in the middle.
 - [Skeleton](https://bestax.io/docs/api/elements/skeleton) — The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading.
 - [Span](https://bestax.io/docs/api/elements/span) — The `Span` component renders a styled inline `<span>` element with Bulma helper class integration.
 - [Strong](https://bestax.io/docs/api/elements/strong) — The `Strong` component renders a styled `<strong>` element with Bulma helper class integration.

package/data/skills/bestax-layout-scaffold/SKILL.md

@@ -105,6 +105,15 @@ Centered; a collection of items → Card grid. For mixed requests, pick the domi
   parcel or a deployment, `active={i}` marks progress and `pending="Out for delivery"` ends it on
   what's under way, oldest first. A journey the user moves through, like a wizard or a checkout,
   stays `Steps`.
+- **Facts about one thing, each a label and its value (an order summary, a profile, a file's
+  details), are `DescriptionList`**, not `Columns` of label and value or a two-column `Table`:
+  `<DescriptionList aria-labelledby="order-heading">` under a `Title id="order-heading"`, with a
+  `<DescriptionList.Item label="Order" value="#1234" />` per fact. It stacks on a phone and puts
+  the labels beside their values from tablet up, so add no breakpoint code; `orientation`
+  pins it. Several values, or a label with an info tip, go in as `DescriptionList.Label` and
+  `DescriptionList.Value` children. Several records with the same fields stay a `Table`, and so
+  do facts a screen reader must announce with their labels, as a `Table` with `scope="row"`
+  headers.
 - **A file browser, a checkbox tree (permissions, filters) or an outline you browse is
   `TreeView`**, with `<TreeView.Item value="…" label="…" icon="folder">` items nested inside each
   other: `<TreeView aria-label="Files" selectionMode="single">` with `selected`/`onSelectedChange`

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

@@ -190,9 +190,9 @@ 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`, `EmptyState`, `Kbd`, `Kbd.Group`, `Link`,
+`Carousel`, `CarouselItem`, `DescriptionList`, `DescriptionList.Item`, `DescriptionList.Label`, `DescriptionList.Value`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`, `Kbd.Group`, `Link`,
 `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`,
-`Navbar.Item`, `Navbar.Link`, `ScrollArea`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Splitter`, `Splitter.Pane`, `Timeline`,
+`Navbar.Item`, `Navbar.Link`, `RingProgress`, `ScrollArea`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Splitter`, `Splitter.Pane`, `Timeline`,
 `Timeline.Item`, `Toast`, `ToggleButton`, `TreeView` and `TreeView.Item` — 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.

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

@@ -187,9 +187,9 @@ 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`, `EmptyState`, `Kbd`, `Kbd.Group`,
+`Button`, `Carousel`, `CarouselItem`, `DescriptionList`, `DescriptionList.Item`, `DescriptionList.Label`, `DescriptionList.Value`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`, `Kbd.Group`,
 `Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`,
-`Navbar.Item`, `Navbar.Link`, `ScrollArea`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Splitter`, `Splitter.Pane`, `Timeline`,
+`Navbar.Item`, `Navbar.Link`, `RingProgress`, `ScrollArea`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Splitter`, `Splitter.Pane`, `Timeline`,
 `Timeline.Item`, `Toast`, `ToggleButton`, `TreeView` and `TreeView.Item`. "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.

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

@@ -163,9 +163,9 @@ The same TODO marks a `Heading` that sets `size` and `textSize` both: drop `size
 ## `domRef`
 
 bestax components don't take `domRef`, but many forward a plain `ref` — the form controls, plus
-`Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`,
+`Avatar`, `Button`, `Carousel`, `CarouselItem`, `DescriptionList`, `DescriptionList.Item`, `DescriptionList.Label`, `DescriptionList.Value`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`,
 `Kbd.Group`, `Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`,
-`Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `ScrollArea`, `SegmentedControl`, `SegmentedControl.Segment`,
+`Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `RingProgress`, `ScrollArea`, `SegmentedControl`, `SegmentedControl.Segment`,
 `Sidebar`, `Splitter`, `Splitter.Pane`, `Timeline`, `Timeline.Item`, `Toast`, `ToggleButton`, `TreeView` and `TreeView.Item`. 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`

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

@@ -90,8 +90,8 @@ is **more complete** than the docs page's Option C example, which omits several)
 `combobox`, `taginput`, `picker-popover`, `dateinput`, `timeinput`, `datetimeinput`,
 `daterangeinput`, `file`
 
-**Elements** (`@allxsmith/bestax-bulma/scss/elements/<name>`): `kbd`, `linkbutton`, `loader`,
-`notification`, `progress`, `skeleton`
+**Elements** (`@allxsmith/bestax-bulma/scss/elements/<name>`): `descriptionlist`, `kbd`,
+`linkbutton`, `loader`, `notification`, `progress`, `ringprogress`, `skeleton`
 
 **Helpers** (`@allxsmith/bestax-bulma/scss/helpers/<name>`): `cursor`, `sizing`
 

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

@@ -464,6 +464,19 @@ The field around the two inputs. Its calendar is the `DateInput` one, with the v
 `--bulma-datetimeinput-time-card-radius`, `--bulma-datetimeinput-time-card-shadow`,
 `--bulma-datetimeinput-time-overlay-background`, `--bulma-datetimeinput-time-overlay-blur`
 
+### DescriptionList
+
+Declared on the root, `.description-list`. The values take the root's color, so a `textColor` on
+the list recolors them, and the labels keep `--bulma-description-list-label-color`. The gaps are in
+`em`, so `textSize` scales them. `--bulma-description-list-label-max-width` is the most the labels'
+column takes when the labels sit beside their values; it's a percentage of the list by default.
+
+`--bulma-description-list-column-gap`, `--bulma-description-list-divider-color`,
+`--bulma-description-list-divider-width`, `--bulma-description-list-gap`,
+`--bulma-description-list-label-color`, `--bulma-description-list-label-max-width`,
+`--bulma-description-list-label-weight`, `--bulma-description-list-row-gap`,
+`--bulma-description-list-value-color`
+
 ### Dialog
 
 `--bulma-dialog-animation-duration`, `--bulma-dialog-background`, `--bulma-dialog-body-color`,
@@ -616,6 +629,19 @@ the label text inside the `Radio`, since the whole label is the click target.
 `--bulma-rate-spaced-gap`, `--bulma-rate-text-color`, `--bulma-rate-text-size`,
 `--bulma-rate-transition-duration`
 
+### RingProgress
+
+Declared on the root, `.ring-progress`; the color and size classes set `--bulma-ring-progress-arc-color`
+and `--bulma-ring-progress-size`. The thickness is in the ring's own units: it's 100 across with a
+radius of 42, so up to 16 fits. In forced colors the arcs take `CanvasText` and the track `GrayText`
+whatever these say.
+
+`--bulma-ring-progress-arc-color`, `--bulma-ring-progress-duration`,
+`--bulma-ring-progress-label-color`, `--bulma-ring-progress-label-size`,
+`--bulma-ring-progress-label-weight`,
+`--bulma-ring-progress-size`, `--bulma-ring-progress-thickness`,
+`--bulma-ring-progress-track-color`
+
 ### Reveal
 
 `--bulma-reveal-duration`, `--bulma-reveal-easing`, `--bulma-reveal-flip-angle`,

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

@@ -64,6 +64,7 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
 | `DateInput`        | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | also `isRounded`                                                                                                                                    |
 | `DateRangeInput`   | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | also `isRounded`; `color` also fills the calendar range                                                                                             |
 | `DateTimeInput`    | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | also `isRounded`                                                                                                                                    |
+| `DescriptionList`  | — (no `color`: `textColor` on the root colors the values; the labels are `--bulma-description-list-label-color`)                                                          | — (sized in `em` from the text around it; size it with `textSize`)        | also `hasDividers`; one look, no `variant`; retheme through `--bulma-description-list-*`                                                            |
 | `EmptyState`       | `primary \| link \| info \| success \| warning \| danger` (the indicator circle and its icon only, never the text)                                                        | `small \| normal \| medium \| large`                                      | also `variant`: `light` (default) \| `filled`; neutral with no `color`; tint text with `textColor`; `--bulma-empty-state-*`                         |
 | `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                                                                                                                                  |
@@ -78,6 +79,7 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
 | `Panel`            | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | —                                                                         | —                                                                                                                                                   |
 | `Progress`         | every `validColors` member (the `-bis`/`-ter` shades and the greys deprecated: no CSS, dev-warn, removed next major — see ⚠️)                                             | `small \| medium \| large`                                                | —                                                                                                                                                   |
 | `Radio`            | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| normal \| medium \| large`                                      | the 6 only                                                                                                                                          |
+| `RingProgress`     | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` (the arc)                                                                    | `small \| medium \| large`                                                | a section takes its own `color`; arcs are SVG strokes, so retheme through `--bulma-ring-progress-*`                                                 |
 | `Rate`             | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | the 6 only                                                                                                                                          |
 | `ScrollArea`       | — (no `color`: the thumb is `--bulma-scroll-area-thumb-color`)                                                                                                            | — (`--bulma-scroll-area-scrollbar-width`: `thin`, `auto` or `none`)       | the browser's own bars, so forced colors gives them the system's colors; retheme through `--bulma-scroll-area-*`                                    |
 | `SegmentedControl` | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | fills only the checked segment (default `link`); `size` is the row's `are-<size>`; segments take no `color` or `size`                               |

package/data/skills.json

@@ -10,7 +10,7 @@
         {
           "id": "component-catalog",
           "file": "references/component-catalog.md",
-          "bytes": 21209
+          "bytes": 21608
         },
         {
           "id": "library-contributor",
@@ -93,7 +93,7 @@
         {
           "id": "bloomer-prop-map",
           "file": "references/bloomer/prop-map.md",
-          "bytes": 26705
+          "bytes": 26814
         },
         {
           "id": "bloomer-unmappables",
@@ -128,7 +128,7 @@
         {
           "id": "rbx-prop-map",
           "file": "references/rbx/prop-map.md",
-          "bytes": 15546
+          "bytes": 15655
         },
         {
           "id": "rbx-unmappables",
@@ -148,7 +148,7 @@
         {
           "id": "react-bulma-components-unmappables",
           "file": "references/react-bulma-components/unmappables.md",
-          "bytes": 13188
+          "bytes": 13297
         }
       ],
       "examples": []
@@ -162,7 +162,7 @@
         {
           "id": "modular-build",
           "file": "references/modular-build.md",
-          "bytes": 12416
+          "bytes": 12451
         }
       ],
       "examples": []
@@ -176,12 +176,12 @@
         {
           "id": "css-variables",
           "file": "references/css-variables.md",
-          "bytes": 53041
+          "bytes": 54438
         },
         {
           "id": "themeable-components",
           "file": "references/themeable-components.md",
-          "bytes": 25951
+          "bytes": 26797
         }
       ],
       "examples": [

package/dist/search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../src/search.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAIjE,MAAM,MAAM,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7E,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAID;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,GAAG,MAAM,WACI,CAAC;AAE3C;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAI5E;AAkJD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC,CAwD/D,CAAC;AAqBF;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,KAAK,GAAE,SAAS,MAAM,EAAO,GAC5B,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAyBrB;AAED;;;;GAIG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AA+BD;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,QAAQ,EAAE,MAAM,GACf,YAAY,EAAE,CAsBhB;AA0FD,wBAAgB,SAAS,CACvB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,eAAe,EAAE,EAC7B,MAAM,EAAE,KAAK,EAAE,EACf,KAAK,EAAE,OAAO,EAAE,EAChB,QAAQ,GAAE,SAAS,YAAY,EAAO,GACrC,GAAG,EAAE,CAiMP;AAoBD;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK,SAAI,GAAG,MAAM,EAAE,CAe3E"}
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../src/search.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAIjE,MAAM,MAAM,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7E,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAID;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,GAAG,MAAM,WACI,CAAC;AAE3C;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAI5E;AAkJD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC,CA8D/D,CAAC;AAqBF;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,KAAK,GAAE,SAAS,MAAM,EAAO,GAC5B,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAyBrB;AAED;;;;GAIG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AA+BD;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,QAAQ,EAAE,MAAM,GACf,YAAY,EAAE,CAsBhB;AA0FD,wBAAgB,SAAS,CACvB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,eAAe,EAAE,EAC7B,MAAM,EAAE,KAAK,EAAE,EACf,KAAK,EAAE,OAAO,EAAE,EAChB,QAAQ,GAAE,SAAS,YAAY,EAAO,GACrC,GAAG,EAAE,CAiMP;AAoBD;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK,SAAI,GAAG,MAAM,EAAE,CAe3E"}

package/dist/search.js

@@ -199,12 +199,17 @@ export const ALIASES = {
     chipinput: ['Taginput'],
     combobox: ['Autocomplete'],
     confirmdialog: ['Dialog'],
+    // Mantine, Chakra and Radix Themes call it DataList. HTML's `<datalist>` is
+    // input suggestions, which is Autocomplete.
+    datalist: ['DescriptionList', 'Autocomplete'],
     datepicker: ['DateInput', 'DateTimeInput'],
     datetimepicker: ['DateTimeInput'],
+    definitionlist: ['DescriptionList'],
     drawer: ['Sidebar'],
     dropdownmenu: ['Dropdown'],
     dropzone: ['File'],
     fileupload: ['File'],
+    keyvalue: ['DescriptionList'],
     modaldialog: ['Modal', 'Dialog'],
     offcanvas: ['Sidebar'],
     pager: ['Pagination'],
@@ -220,6 +225,7 @@ export const ALIASES = {
     spinbutton: ['Numberinput'],
     spinner: ['Loader'],
     stepper: ['Steps', 'Numberinput'],
+    summarylist: ['DescriptionList'],
     taggroup: ['Tags'],
     tagsinput: ['Taginput'],
     timepicker: ['TimeInput', 'DateTimeInput'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bestax-mcp",
-  "version": "1.18.13",
+  "version": "1.18.15",
   "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.32.1",
     "zod": "^4.6.7",
-    "@allxsmith/bestax-bulma": "^5.49.1"
+    "@allxsmith/bestax-bulma": "^5.51.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",