bestax-mcp 1.18.32 → 1.18.34

package/data/bulma-classes.json

@@ -13122,6 +13122,7 @@
     "hover-card": "HoverCard",
     "icon-button": "IconButton",
     "kbd": "Kbd",
+    "lightbox": "Lightbox",
     "link-button": "LinkButton",
     "loading": "Loading",
     "numberinput": "Numberinput",

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.64.0"
+    "version": "5.65.1"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -73,6 +73,7 @@
         "Dropdown",
         "EmptyState",
         "HoverCard",
+        "Lightbox",
         "Loading",
         "Menu",
         "Message",
@@ -877,6 +878,17 @@
       "propCount": 23,
       "exampleCount": 5
     },
+    {
+      "name": "Lightbox",
+      "kind": "component",
+      "category": "components",
+      "purpose": "The `Lightbox` component shows a set of images one at a time in a modal viewer, with previous and next, a counter, captions and zoom, opened from the…",
+      "slug": "components/lightbox",
+      "import": "import { Lightbox } from '@allxsmith/bestax-bulma';",
+      "compound": true,
+      "propCount": 21,
+      "exampleCount": 9
+    },
     {
       "name": "Link",
       "kind": "component",
@@ -995,7 +1007,7 @@
       "slug": "components/navbar",
       "import": "import { Navbar } from '@allxsmith/bestax-bulma';",
       "compound": true,
-      "propCount": 57,
+      "propCount": 58,
       "exampleCount": 19
     },
     {
@@ -2562,6 +2574,30 @@
     "--bulma-kbd-size": ["Kbd"],
     "--bulma-kbd-weight": ["Kbd"],
     "--bulma-level-item-spacing": ["Level"],
+    "--bulma-lightbox-animation-duration": ["Lightbox"],
+    "--bulma-lightbox-arrow-background": ["Lightbox"],
+    "--bulma-lightbox-arrow-background-hover": ["Lightbox"],
+    "--bulma-lightbox-arrow-color": ["Lightbox"],
+    "--bulma-lightbox-arrow-icon-size": ["Lightbox"],
+    "--bulma-lightbox-arrow-offset": ["Lightbox"],
+    "--bulma-lightbox-arrow-size": ["Lightbox"],
+    "--bulma-lightbox-button-border-width": ["Lightbox"],
+    "--bulma-lightbox-caption-color": ["Lightbox"],
+    "--bulma-lightbox-caption-max-width": ["Lightbox"],
+    "--bulma-lightbox-caption-padding": ["Lightbox"],
+    "--bulma-lightbox-controls-z-index": ["Lightbox"],
+    "--bulma-lightbox-disabled-opacity": ["Lightbox"],
+    "--bulma-lightbox-error-color": ["Lightbox"],
+    "--bulma-lightbox-error-gap": ["Lightbox"],
+    "--bulma-lightbox-error-padding": ["Lightbox"],
+    "--bulma-lightbox-image-max-height": ["Lightbox"],
+    "--bulma-lightbox-loader-size": ["Lightbox"],
+    "--bulma-lightbox-spacing": ["Lightbox"],
+    "--bulma-lightbox-toolbar-button-background": ["Lightbox"],
+    "--bulma-lightbox-toolbar-button-background-hover": ["Lightbox"],
+    "--bulma-lightbox-toolbar-color": ["Lightbox"],
+    "--bulma-lightbox-toolbar-gap": ["Lightbox"],
+    "--bulma-lightbox-toolbar-icon-size": ["Lightbox"],
     "--bulma-link-button-ghost-color": ["LinkButton"],
     "--bulma-link-button-ghost-hover-color": ["LinkButton"],
     "--bulma-link-button-transition-duration": ["LinkButton"],
@@ -3517,6 +3553,11 @@
       "path": "Level.Right",
       "purpose": "Right-aligned content."
     },
+    "LightboxTrigger": {
+      "component": "Lightbox",
+      "path": "Lightbox.Trigger",
+      "purpose": "A button around a thumbnail, or a line of text, that opens the viewer at its `index`."
+    },
     "MediaContent": {
       "component": "Media",
       "path": "Media.Content",

package/data/components/Button.json

@@ -101,7 +101,7 @@
       "code": "function example() {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const [tag, setTag] = React.useState<string>();\n\n  return (\n    <>\n      <Button color=\"primary\" ref={buttonRef}>\n        Target\n      </Button>\n      <Button ml=\"2\" onClick={() => setTag(buttonRef.current?.tagName)}>\n        Read the tag from its ref\n      </Button>\n      <p>Rendered element: {tag ?? '—'}</p>\n    </>\n  );\n}"
     }
   ],
-  "accessibility": "- **Labeling:** Always provide descriptive content for buttons for screen readers.\n- **Icons beside text:** Leave the `Icon` unnamed, so the text alone names the button. The icons in [With an Icon](https://bestax.io/docs/api/elements/button#with-an-icon) write out `aria-hidden=\"true\"`, and `Icon` would render it for them anyway, since they have no `ariaLabel`, `aria-label` or `aria-labelledby` to name them and no `role` or `tabIndex` of their own. A named icon joins the button's name instead, so `ariaLabel=\"Download\"` on the icon of a Download button makes a screen reader announce \"Download Download\".\n- **States:** The `isDisabled` and `disabled` props ensure correct `aria-disabled` and `disabled` attributes.\n- **Keyboard:** When rendered as `<a>`, disabled buttons are not focusable.\n- **Focus:** Use `isFocused` and `isActive` for visual feedback, but rely on browser focus for actual accessibility.\n- **Toggles:** `isActive` tells a screen reader nothing. A button that turns something on or off is a [`ToggleButton`](https://bestax.io/docs/api/elements/togglebutton), which sets `aria-pressed`.\n\n:::note\nA button that shows only an icon is an [`IconButton`](https://bestax.io/docs/api/elements/iconbutton), whose types require an\n`aria-label` or an `aria-labelledby`, and whose `isRounded` makes a circle. On a plain `Button` holding only\nan icon, name it with `aria-label` yourself.\n:::",
+  "accessibility": "- **Labeling:** Always provide descriptive content for buttons for screen readers.\n- **Icons beside text:** Leave the `Icon` unnamed, so the text alone names the button. The icons in [With an Icon](https://bestax.io/docs/api/elements/button#with-an-icon) write out `aria-hidden=\"true\"`, and `Icon` would render it for them anyway, since they have no `ariaLabel`, `aria-label` or `aria-labelledby` to name them and no `role` or `tabIndex` of their own. A named icon joins the button's name instead, so `ariaLabel=\"Download\"` on the icon of a Download button makes a screen reader announce \"Download Download\".\n- **States:** The `isDisabled` and `disabled` props ensure correct `aria-disabled` and `disabled` attributes.\n- **Keyboard:** When rendered as `<a>`, disabled buttons are not focusable.\n- **Focus:** Use `isFocused` and `isActive` for visual feedback, but rely on browser focus for actual accessibility.\n- **Focus ring:** Bulma shows a focused button with its border and a shadow. A ghost button has neither, and forced colors (Windows' contrast themes) drops the shadow and sets the border's color, so bestax's styles give a focused ghost button, and every focused button in forced colors, an outline. `isFocused` draws it too.\n- **Toggles:** `isActive` tells a screen reader nothing. A button that turns something on or off is a [`ToggleButton`](https://bestax.io/docs/api/elements/togglebutton), which sets `aria-pressed`.\n\n:::note\nA button that shows only an icon is an [`IconButton`](https://bestax.io/docs/api/elements/iconbutton), whose types require an\n`aria-label` or an `aria-labelledby`, and whose `isRounded` makes a circle. On a plain `Button` holding only\nan icon, name it with `aria-label` yourself.\n:::",
   "related": [
     "Buttons",
     "CopyButton",

package/data/components/Lightbox.json

@@ -0,0 +1,430 @@
+{
+  "name": "Lightbox",
+  "kind": "component",
+  "category": "components",
+  "slug": "components/lightbox",
+  "docsUrl": "https://bestax.io/docs/api/components/lightbox",
+  "examples": [
+    {
+      "title": "Basic Usage",
+      "code": "function example() {\n  const photos = [\n    {\n      src: '/img/carousel/carousel-banner-1.jpg',\n      alt: 'Vibrant galaxy with purple and gold tones',\n      caption: 'A galaxy in purple and gold',\n    },\n    {\n      src: '/img/carousel/carousel-banner-2.jpg',\n      alt: 'Milky Way over silhouetted mountains',\n    },\n    {\n      src: '/img/carousel/carousel-banner-3.jpg',\n      alt: 'Starry night sky over mountain silhouettes',\n    },\n  ];\n\n  return (\n    <Lightbox items={photos}>\n      <Columns isMobile>\n        {photos.map((photo, i) => (\n          <Column key={photo.src} size=\"one-third\">\n            <Lightbox.Trigger index={i}>\n              <Image as=\"div\" src={photo.src} alt={photo.alt} size=\"4by3\" />\n            </Lightbox.Trigger>\n          </Column>\n        ))}\n      </Columns>\n    </Lightbox>\n  );\n}"
+    },
+    {
+      "title": "A Button That Opens the Album",
+      "code": "function example() {\n  const photos = [\n    {\n      src: '/img/carousel/carousel-banner-3.jpg',\n      alt: 'Starry night sky over mountain silhouettes',\n    },\n    {\n      src: '/img/carousel/carousel-banner-2.jpg',\n      alt: 'Milky Way over silhouetted mountains',\n    },\n    {\n      src: '/img/carousel/carousel-banner-1.jpg',\n      alt: 'Vibrant galaxy with purple and gold tones',\n    },\n  ];\n\n  return (\n    <Lightbox items={photos}>\n      <Lightbox.Trigger index={0}>\n        <Image as=\"div\" src={photos[0].src} alt=\"\" size=\"16by9\" />\n        <Span display=\"block\" mt=\"2\" textWeight=\"semibold\">\n          View all {photos.length} photos\n        </Span>\n      </Lightbox.Trigger>\n    </Lightbox>\n  );\n}"
+    },
+    {
+      "title": "A Button That Opens the Album",
+      "code": "<Lightbox\n  items={[\n    {\n      src: '/img/carousel/carousel-banner-2.jpg',\n      alt: 'Milky Way over silhouetted mountains',\n    },\n  ]}\n>\n  <Lightbox.Trigger as={Button} color=\"link\" index={0}>\n    Open the photo\n  </Lightbox.Trigger>\n</Lightbox>"
+    },
+    {
+      "title": "Captions and Sizes",
+      "code": "function example() {\n  const photos = [\n    {\n      src: '/img/carousel/carousel-banner-2.jpg',\n      alt: 'Milky Way over silhouetted mountains',\n      caption: (\n        <>\n          <strong>The Milky Way</strong>, over a line of peaks\n        </>\n      ),\n    },\n    {\n      src: '/img/carousel/carousel-banner-3.jpg',\n      alt: 'Starry night sky over mountain silhouettes',\n      caption: 'Stars over the mountains',\n    },\n  ];\n\n  return (\n    <Lightbox items={photos}>\n      <Buttons>\n        {photos.map((photo, i) => (\n          <Lightbox.Trigger key={photo.src} as={Button} index={i}>\n            Photo {i + 1}\n          </Lightbox.Trigger>\n        ))}\n      </Buttons>\n    </Lightbox>\n  );\n}"
+    },
+    {
+      "title": "Captions and Sizes",
+      "code": "const photos = [\n  {\n    src: '/photos/harbour-1600.jpg',\n    srcSet: '/photos/harbour-800.jpg 800w, /photos/harbour-1600.jpg 1600w',\n    sizes: '100vw',\n    alt: 'Harbour at dusk',\n  },\n];"
+    },
+    {
+      "title": "Keeping the Image in the URL",
+      "code": "function example() {\n  const [photo, setPhoto] = useState<number>();\n  const photos = [\n    {\n      src: '/img/carousel/carousel-banner-1.jpg',\n      alt: 'Vibrant galaxy with purple and gold tones',\n    },\n    {\n      src: '/img/carousel/carousel-banner-2.jpg',\n      alt: 'Milky Way over silhouetted mountains',\n    },\n    {\n      src: '/img/carousel/carousel-banner-3.jpg',\n      alt: 'Starry night sky over mountain silhouettes',\n    },\n  ];\n\n  return (\n    <>\n      <Paragraph mb=\"3\">\n        {photo === undefined ? 'No photo open.' : `?photo=${photo + 1}`}\n      </Paragraph>\n      <Button onClick={() => setPhoto(2)}>Open the third photo</Button>\n      <Lightbox\n        items={photos}\n        open={photo !== undefined}\n        onOpenChange={open => !open && setPhoto(undefined)}\n        value={photo ?? 0}\n        onChange={setPhoto}\n      />\n    </>\n  );\n}"
+    },
+    {
+      "title": "Zoom",
+      "code": "<Lightbox\n  maxZoom={6}\n  items={[\n    {\n      src: '/img/carousel/carousel-banner-2.jpg',\n      alt: 'Milky Way over silhouetted mountains',\n      caption: 'Zoom in on the stars',\n    },\n  ]}\n>\n  <Lightbox.Trigger as={Button} index={0}>\n    Open the tall photo\n  </Lightbox.Trigger>\n</Lightbox>"
+    },
+    {
+      "title": "Other Languages and Right to Left",
+      "code": "function example() {\n  const arabic = new Intl.NumberFormat('ar-EG');\n  const photos = [\n    {\n      src: '/img/carousel/carousel-banner-2.jpg',\n      alt: 'درب التبانة فوق ظلال الجبال',\n    },\n    {\n      src: '/img/carousel/carousel-banner-3.jpg',\n      alt: 'سماء ليلية مرصعة بالنجوم فوق قمم الجبال',\n    },\n  ];\n\n  return (\n    <LocaleProvider dir=\"rtl\" locale=\"ar-EG\">\n      <Lightbox\n        items={photos}\n        ariaLabel=\"عارض الصور\"\n        labels={{\n          close: 'إغلاق',\n          previous: 'الصورة السابقة',\n          next: 'الصورة التالية',\n          zoomIn: 'تكبير',\n          zoomOut: 'تصغير',\n          resetZoom: 'إعادة الحجم',\n          loading: 'جارٍ تحميل الصورة',\n          loadError: 'تعذّر تحميل هذه الصورة.',\n          retry: 'إعادة المحاولة',\n          progress: (current, total) =>\n            `الصورة ${arabic.format(current)} من ${arabic.format(total)}`,\n        }}\n      >\n        <Lightbox.Trigger as={Button} index={0}>\n          عرض الصور\n        </Lightbox.Trigger>\n      </Lightbox>\n    </LocaleProvider>\n  );\n}"
+    },
+    {
+      "title": "Compound (dot-notation) usage",
+      "code": "<Lightbox\n  items={[\n    {\n      src: '/img/carousel/carousel-banner-1.jpg',\n      alt: 'Vibrant galaxy with purple and gold tones',\n    },\n    {\n      src: '/img/carousel/carousel-banner-3.jpg',\n      alt: 'Starry night sky over mountain silhouettes',\n    },\n  ]}\n>\n  <Buttons>\n    <LightboxTrigger as={Button} index={0}>\n      LightboxTrigger\n    </LightboxTrigger>\n    <Lightbox.Trigger as={Button} index={1}>\n      Lightbox.Trigger\n    </Lightbox.Trigger>\n  </Buttons>\n</Lightbox>"
+    }
+  ],
+  "accessibility": "- **A modal dialog:** the viewer is a `Modal` with `role=\"dialog\"` and `aria-modal`, named by\n  `ariaLabel` (\"Image viewer\" by default) rather than by the image's alt, which changes with every\n  image. Focus moves to the close button when it opens, Tab stays inside, Escape closes it when\n  it's the topmost overlay, and focus goes back to the trigger, or to whatever had it when `open`\n  was set.\n- **Real triggers:** each `Lightbox.Trigger` is a `<button type=\"button\" aria-haspopup=\"dialog\">`,\n  or the button `Button` renders with `as={Button}`, named by its content. So the thumbnail's `alt`\n  is the button's name, as long as it isn't inside a `<figure>` (give a ratio `Image` `as=\"div\"`).\n- **Every image has an alt:** `alt` is required in the type, a development build warns once for an\n  item without one, and the caption is the `<figure>`'s `<figcaption>`, which names it.\n- **Moves are announced:** after the viewer opens and after each move, a polite status line says\n  \"Image 3 of 10: Harbour at dusk\", from `labels.progress` and the image's alt. The visible counter\n  is hidden from screen readers, so it isn't read twice. For an image that fails to load, the line\n  starts with `labels.loadError`: \"This image didn't load. Image 3 of 10: Harbour at dusk\", and a\n  Retry that fails again is announced again.\n- **At the ends:** with `repeat={false}`, the previous or next button is `aria-disabled` but stays in\n  the tab order, so focus isn't dropped when it stops working. The zoom buttons do the same at their\n  limits.\n- **Single-pointer alternatives:** pinch has the zoom buttons and a double click or tap. Panning a\n  zoomed image is a drag, so zoom-out and reset are always one press away, and the arrow keys pan.\n- **Right to left:** the arrows, the keys and swipes follow the reading direction, so the next\n  image is always the way the next arrow points.\n- **Contrast:** the counter, the caption and the buttons' icons are white on Bulma's near-black\n  modal background in both schemes, well over the 4.5:1 WCAG asks of text.\n- **Forced colors:** the buttons draw their borders in the system's colors and the focus ring\n  shows.\n- **Motion:** the open fade, the crossfade between images and the zoom transition stop under\n  `prefers-reduced-motion: reduce`.",
+  "related": ["Carousel", "Figure", "Image", "Modal", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/components-lightbox--default",
+  "summary": "The `Lightbox` component shows a set of images one at a time in a modal viewer, with previous and next, a counter, captions and zoom, opened from the `Lightbox.Trigger` buttons you place. It renders its children where it stands, with no wrapper, and the viewer only while it's open, into a portal by default. The viewer is a `Modal`: focus moves to its close button, Tab stays inside, Escape and a click on the background close it, and focus goes back to the trigger.",
+  "import": "import { Lightbox } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/components/Lightbox.tsx",
+  "rootClass": "lightbox",
+  "parts": [
+    {
+      "path": "Lightbox",
+      "summary": "The `Lightbox` component shows a set of images one at a time in a modal viewer, with previous and next, a counter, captions and zoom, opened from the `Lightbox.Trigger` buttons you place. It renders its children where it stands, with no wrapper, and the viewer only while it's open, into a portal by default. The viewer is a `Modal`: focus moves to its close button, Tab stays inside, Escape and a click on the background close it, and focus goes back to the trigger.",
+      "component": null,
+      "props": [
+        {
+          "name": "items",
+          "type": "LightboxItem[]",
+          "default": null,
+          "description": "**Required.** The images, in order.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Rendered in place: usually `Lightbox.Trigger`s, in whatever layout you like.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "default": null,
+          "description": "Whether the viewer is open (controlled). With no `items` it shows nothing.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "default": "false",
+          "description": "Whether the viewer starts open (uncontrolled).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void",
+          "default": null,
+          "description": "Called when a trigger, the close button, Escape, a click on the background or a swipe down opens or closes the viewer, and with `false` when `items` goes from some to none while it's open.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "value",
+          "type": "number",
+          "default": null,
+          "description": "The index of the image shown (controlled). A value past either end is shown as the last or the first image, or wrapped round with `repeat`, without calling `onChange`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "defaultValue",
+          "type": "number",
+          "default": "0",
+          "description": "The image an uncontrolled viewer shows when something other than a trigger opens it. A trigger opens at its own `index`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "onChange",
+          "type": "(value: number) => void",
+          "default": null,
+          "description": "Called with the new index when an arrow, a key or a swipe changes the image, and when a trigger opens the viewer, with the trigger's `index` even when that's the image already shown, before `onOpenChange(true)`. A parent that opens the viewer from `value` hears the trigger that way.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "repeat",
+          "type": "boolean",
+          "default": "true",
+          "description": "Go from the last image to the first and back, as Carousel does. Off, the previous and next buttons are `aria-disabled` at the ends.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "zoomable",
+          "type": "boolean",
+          "default": "true",
+          "description": "Zoom with the buttons, the wheel, a double click or tap, pinch and the `+`, `-` and `0` keys, and pan a zoomed image by dragging or with the arrow keys. Zoom waits for the image to load. `false` drops the zoom buttons and all of it.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "maxZoom",
+          "type": "number",
+          "default": "3",
+          "description": "How far an image zooms, as a multiple of its fitted size. The smallest zoom is always the fitted size.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean",
+          "default": "true",
+          "description": "Close on Escape. Only the topmost open overlay answers, as with Modal.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "closeOnClickOutside",
+          "type": "boolean",
+          "default": "true",
+          "description": "Close on a click on the dark background around the image. The space around the image, beside the toolbar's buttons and under the caption is all background.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "portal",
+          "type": "boolean | string | HTMLElement",
+          "default": "true",
+          "description": "Renders the viewer into a portal: `true` for the `ConfigProvider`'s `portalContainer` (`document.body` by default), a selector string, or an element. `false` renders it in place. It's on by default, unlike Modal's, Dialog's and Command.Dialog's, because its triggers sit in gallery cells, and a cell with a transform or a filter would trap a viewer rendered in place.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "default": "'Image viewer'",
+          "description": "The dialog's accessible name. It stays the same from image to image; the status line says which image is shown.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "labels",
+          "type": "LightboxLabels",
+          "default": null,
+          "description": "The words it writes, for another language.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLDivElement>",
+          "default": null,
+          "description": "Ref forwarded to the viewer's `.modal` element, `null` while it's closed.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <div> attributes and Bulma helper props",
+      "types": []
+    },
+    {
+      "path": "Lightbox.Trigger",
+      "summary": "A button around a thumbnail, or a line of text, that opens the viewer at its `index`.",
+      "component": null,
+      "props": [
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "default": "'button'",
+          "description": "Renders the trigger through another component, which gets its class, `aria-haspopup`, `type=\"button\"`, click handler and ref along with its own props. `as={Button} color=\"link\"` draws it as Bulma's link button. `color` is taken only with a component: on an element it would be HTML's old presentational attribute.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "index",
+          "type": "number",
+          "default": null,
+          "description": "**Required.** The index in `items` the viewer opens at.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "What the button shows: a thumbnail, or text such as \"View all photos\". A ratio `Image` here takes `as=\"div\"`, since its `<figure>` would keep the image's alt from naming the button.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "PolymorphicRef<React.ElementType>",
+          "default": null,
+          "description": "Ref forwarded to the element `as` renders: the `<button>`, or what `Button` renders.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "Remaining props of the element or component selected by as (default <button>) and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-lightbox-arrow-background",
+      "sass": "$lightbox-arrow-background",
+      "default": "hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.3)",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-arrow-background-hover",
+      "sass": "$lightbox-arrow-background-hover",
+      "default": "hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.5)",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-arrow-color",
+      "sass": "$lightbox-arrow-color",
+      "default": "var(--bulma-white)",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-arrow-size",
+      "sass": "$lightbox-arrow-size",
+      "default": "3rem",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-arrow-offset",
+      "sass": "$lightbox-arrow-offset",
+      "default": "1rem",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-arrow-icon-size",
+      "sass": "$lightbox-arrow-icon-size",
+      "default": "1.5rem",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-toolbar-button-background",
+      "sass": "$lightbox-toolbar-button-background",
+      "default": "var(--bulma-lightbox-arrow-background)",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-toolbar-button-background-hover",
+      "sass": "$lightbox-toolbar-button-background-hover",
+      "default": "var(--bulma-lightbox-arrow-background-hover)",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-toolbar-icon-size",
+      "sass": "$lightbox-toolbar-icon-size",
+      "default": "1.25rem",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-button-border-width",
+      "sass": "$lightbox-button-border-width",
+      "default": "1px",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-disabled-opacity",
+      "sass": "$lightbox-disabled-opacity",
+      "default": "0.4",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-controls-z-index",
+      "sass": "$lightbox-controls-z-index",
+      "default": "$extras-z-index-base",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-toolbar-color",
+      "sass": "$lightbox-toolbar-color",
+      "default": "var(--bulma-white)",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-toolbar-gap",
+      "sass": "$lightbox-toolbar-gap",
+      "default": "0.75rem",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-caption-color",
+      "sass": "$lightbox-caption-color",
+      "default": "var(--bulma-white)",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-caption-max-width",
+      "sass": "$lightbox-caption-max-width",
+      "default": "40em",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-caption-padding",
+      "sass": "$lightbox-caption-padding",
+      "default": "0.75rem 1rem 0",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-error-color",
+      "sass": "$lightbox-error-color",
+      "default": "var(--bulma-lightbox-caption-color)",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-error-gap",
+      "sass": "$lightbox-error-gap",
+      "default": "0.75rem",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-error-padding",
+      "sass": "$lightbox-error-padding",
+      "default": "1rem",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-loader-size",
+      "sass": "$lightbox-loader-size",
+      "default": "2.5rem",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-spacing",
+      "sass": "$lightbox-spacing",
+      "default": "4.5rem",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-image-max-height",
+      "sass": "$lightbox-image-max-height",
+      "default": "calc(100% - 2 * var(--bulma-lightbox-spacing))",
+      "scope": "compound"
+    },
+    {
+      "css": "--bulma-lightbox-animation-duration",
+      "sass": "$lightbox-animation-duration",
+      "default": "var(--bulma-duration)",
+      "scope": "compound"
+    }
+  ],
+  "cssVarsFrom": "Modal"
+}

package/data/components/Navbar.json

@@ -82,7 +82,7 @@
       "code": "<Navbar>\n  <Navbar.Brand>\n    <Navbar.Item href=\"#\">\n      <img src=\"/img/logo.svg\" alt=\"Logo\" width=\"28\" height=\"28\" />\n    </Navbar.Item>\n    <Navbar.Burger aria-label=\"menu\" />\n  </Navbar.Brand>\n  <Navbar.Menu active>\n    <Navbar.Start>\n      <Navbar.Item href=\"#\">Home</Navbar.Item>\n      <Navbar.Item href=\"#\">Docs</Navbar.Item>\n    </Navbar.Start>\n    <Navbar.End>\n      <Navbar.Item href=\"#\">Log in</Navbar.Item>\n    </Navbar.End>\n  </Navbar.Menu>\n</Navbar>"
     }
   ],
-  "accessibility": "- The root `Navbar` renders as `<nav role=\"navigation\" aria-label=\"main navigation\">`.\n- Use semantic links (`<a>`) and buttons, and provide clear `aria-label` and `aria-expanded` for the burger toggle.\n- `Navbar.Link` inside a `Navbar.Dropdown` automatically gets `aria-haspopup=\"true\"` and\n  `aria-expanded` synced to the dropdown's open state — no manual wiring required.\n  <kbd>Enter</kbd>/<kbd>Space</kbd> toggle the dropdown open/closed, and <kbd>Escape</kbd>\n  closes it and keeps focus on the link. When the trigger isn't interactive on its own — no\n  `href`, not `as=\"button\"`, and not a custom component — it also gets `role=\"button\"` and\n  `tabIndex={0}` so it's reachable and operable by keyboard, and a mouse/touch click on it\n  toggles the dropdown too (a caller-supplied `onClick` still runs, and can\n  `preventDefault()` to opt out).\n- A custom component passed to `as` keeps its own semantics, because a router link takes `to`\n  rather than `href` and so can't be recognised from the props it's given. If yours renders\n  something non-interactive instead, pass `role=\"button\"` and it takes the fallback above —\n  `tabIndex` and click included. The keyboard path is wired either way.\n- `hoverable` dropdowns keep working with a mouse (hover-to-open); the keyboard path above\n  opens and closes them independently of hover.\n\n:::note\nThere's no arrow-key roving between navbar items and no outside-click handling for\n`Navbar.Dropdown` — Bulma navbar dropdowns are hover/click surfaces, so this is intentionally\nkept simple.\n:::",
+  "accessibility": "- The root `Navbar` renders as `<nav role=\"navigation\" aria-label=\"main navigation\">`.\n  The default accessible name is `main navigation`. A screen reader announces it with\n  the role, and since the name holds the role word, \"navigation\" is heard twice.\n  Pass a name without the role word (`aria-label=\"Site\"`), and a different name\n  on each Navbar when a page has more than one. A passed `aria-label` replaces\n  the default.\n- Use semantic links (`<a>`) and buttons, and provide clear `aria-label` and `aria-expanded` for the burger toggle.\n- `Navbar.Link` inside a `Navbar.Dropdown` automatically gets `aria-haspopup=\"true\"` and\n  `aria-expanded` synced to the dropdown's open state — no manual wiring required.\n  <kbd>Enter</kbd>/<kbd>Space</kbd> toggle the dropdown open/closed, and <kbd>Escape</kbd>\n  closes it and keeps focus on the link. When the trigger isn't interactive on its own — no\n  `href`, not `as=\"button\"`, and not a custom component — it also gets `role=\"button\"` and\n  `tabIndex={0}` so it's reachable and operable by keyboard, and a mouse/touch click on it\n  toggles the dropdown too (a caller-supplied `onClick` still runs, and can\n  `preventDefault()` to opt out).\n- A custom component passed to `as` keeps its own semantics, because a router link takes `to`\n  rather than `href` and so can't be recognised from the props it's given. If yours renders\n  something non-interactive instead, pass `role=\"button\"` and it takes the fallback above —\n  `tabIndex` and click included. The keyboard path is wired either way.\n- `hoverable` dropdowns keep working with a mouse (hover-to-open); the keyboard path above\n  opens and closes them independently of hover.\n\n:::note\nThere's no arrow-key roving between navbar items and no outside-click handling for\n`Navbar.Dropdown` — Bulma navbar dropdowns are hover/click surfaces, so this is intentionally\nkept simple.\n:::",
   "related": ["Button", "Icon", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/components-navbar--default",
   "summary": "The `Navbar` component implements Bulma's powerful, responsive navigation bar for your Bulma React UI.",
@@ -177,6 +177,15 @@
           "required": false,
           "inherited": false,
           "deprecated": false
+        },
+        {
+          "name": "aria-label",
+          "type": "React.AriaAttributes['aria-label']",
+          "default": "'main navigation'",
+          "description": "Accessible name. Defaults to `main navigation`. A screen reader announces it with the landmark's role, and since the name holds the role word, \"navigation\" is heard twice. Pass a name without it (`aria-label=\"Site\"`), and a different name on each Navbar when a page has more than one. A passed `aria-label` replaces the default, and `aria-label={undefined}` removes it, leaving the landmark unnamed.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
         }
       ],
       "extraProps": [

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.
 
-133 documented components. Generated from the API docs — every exported
+134 documented components. Generated from the API docs — every exported
 component is guaranteed to appear (the generator fails if one lacks an API page).
 
 ## Elements
@@ -102,6 +102,7 @@ component is guaranteed to appear (the generator fails if one lacks an API page)
 - [Dropdown](https://bestax.io/docs/api/components/dropdown) — The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.
 - [EmptyState](https://bestax.io/docs/api/components/emptystate) — The `EmptyState` component renders the block an app shows where content would be: an empty list, a search with no results, or a first-run screen.
 - [HoverCard](https://bestax.io/docs/api/components/hovercard) — The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it.
+- [Lightbox](https://bestax.io/docs/api/components/lightbox) — The `Lightbox` component shows a set of images one at a time in a modal viewer, with previous and next, a counter, captions and zoom, opened from the…
 - [Loading](https://bestax.io/docs/api/components/loading) — The `Loading` component provides a loading overlay with a spinner animation.
 - [Menu](https://bestax.io/docs/api/components/menu) — The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.
 - [Message](https://bestax.io/docs/api/components/message) — The `Message` component provides Bulma's flexible notice/message box for your Bulma React UI.

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

@@ -190,7 +190,7 @@ 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 `Affix`, `AppFrame`, `AppFrame.Aside`, `AppFrame.Burger`, `AppFrame.Footer`, `AppFrame.Header`, `AppFrame.Main`, `AppFrame.Nav`, `Avatar`, `Button`,
-`Carousel`, `CarouselItem`, `Center`, `ColorSwatch`, `Command`, `Command.Dialog`, `Command.Input`, `CopyButton`, `DataTable`, `DescriptionList`, `DescriptionList.Item`, `DescriptionList.Label`, `DescriptionList.Value`, `Dialog`, `Dropdown`, `EmptyState`, `Flex`, `Group`, `IconButton`, `Kbd`, `Kbd.Group`, `Link`,
+`Carousel`, `CarouselItem`, `Center`, `ColorSwatch`, `Command`, `Command.Dialog`, `Command.Input`, `CopyButton`, `DataTable`, `DescriptionList`, `DescriptionList.Item`, `DescriptionList.Label`, `DescriptionList.Value`, `Dialog`, `Dropdown`, `EmptyState`, `Flex`, `Group`, `IconButton`, `Kbd`, `Kbd.Group`, `Lightbox`, `Lightbox.Trigger`, `Link`,
 `LinkButton`, `Loader`, `LocaleProvider`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`,
 `Navbar.Item`, `Navbar.Link`, `NumberFormatter`, `RingProgress`, `ScrollArea`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Splitter`, `Splitter.Pane`, `Stack`, `Stat`, `Stat.Change`, `Stat.Description`, `Stat.Label`, `Stat.Value`, `Stats`, `TableOfContents`, `Timeline`,
 `Timeline.Item`, `Toast`, `ToggleButton`, `TreeView` and `TreeView.Item` — pass `ref` directly on

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

@@ -187,7 +187,7 @@ 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 `Affix`, `AppFrame`, `AppFrame.Aside`, `AppFrame.Burger`, `AppFrame.Footer`, `AppFrame.Header`, `AppFrame.Main`, `AppFrame.Nav`, `Avatar`,
-`Button`, `Carousel`, `CarouselItem`, `Center`, `ColorSwatch`, `Command`, `Command.Dialog`, `Command.Input`, `CopyButton`, `DataTable`, `DescriptionList`, `DescriptionList.Item`, `DescriptionList.Label`, `DescriptionList.Value`, `Dialog`, `Dropdown`, `EmptyState`, `Flex`, `Group`, `IconButton`, `Kbd`, `Kbd.Group`,
+`Button`, `Carousel`, `CarouselItem`, `Center`, `ColorSwatch`, `Command`, `Command.Dialog`, `Command.Input`, `CopyButton`, `DataTable`, `DescriptionList`, `DescriptionList.Item`, `DescriptionList.Label`, `DescriptionList.Value`, `Dialog`, `Dropdown`, `EmptyState`, `Flex`, `Group`, `IconButton`, `Kbd`, `Kbd.Group`, `Lightbox`, `Lightbox.Trigger`,
 `Link`, `LinkButton`, `Loader`, `LocaleProvider`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`,
 `Navbar.Item`, `Navbar.Link`, `NumberFormatter`, `RingProgress`, `ScrollArea`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Splitter`, `Splitter.Pane`, `Stack`, `Stat`, `Stat.Change`, `Stat.Description`, `Stat.Label`, `Stat.Value`, `Stats`, `TableOfContents`, `Timeline`,
 `Timeline.Item`, `Toast`, `ToggleButton`, `TreeView` and `TreeView.Item`. "The form controls" there

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

@@ -190,7 +190,7 @@ The same TODO marks a `Heading` that sets `size` and `textSize` both: drop `size
 
 bestax components don't take `domRef`, but many forward a plain `ref` — the form controls, plus
 `Affix`, `AppFrame`, `AppFrame.Aside`, `AppFrame.Burger`, `AppFrame.Footer`, `AppFrame.Header`, `AppFrame.Main`, `AppFrame.Nav`, `Avatar`, `Button`, `Carousel`, `CarouselItem`, `Center`, `ColorSwatch`, `Command`, `Command.Dialog`, `Command.Input`, `CopyButton`, `DataTable`, `DescriptionList`, `DescriptionList.Item`, `DescriptionList.Label`, `DescriptionList.Value`, `Dialog`, `Dropdown`, `EmptyState`, `Flex`, `Group`, `IconButton`, `Kbd`,
-`Kbd.Group`, `Link`, `LinkButton`, `Loader`, `LocaleProvider`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`,
+`Kbd.Group`, `Lightbox`, `Lightbox.Trigger`, `Link`, `LinkButton`, `Loader`, `LocaleProvider`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`,
 `Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `NumberFormatter`, `RingProgress`, `ScrollArea`, `SegmentedControl`, `SegmentedControl.Segment`,
 `Sidebar`, `Splitter`, `Splitter.Pane`, `Stack`, `Stat`, `Stat.Change`, `Stat.Description`, `Stat.Label`, `Stat.Value`, `Stats`, `TableOfContents`, `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"

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

@@ -46,7 +46,7 @@ publishes its SCSS sources (`src/scss` ships in the npm package, exposed via the
 
 **Rule:** stock Bulma components map to `bulma/sass/<category>/<lowercased-name>`; bestax
 extras map to `@allxsmith/bestax-bulma/scss/<category>/<lowercased-name>`. Components that
-are pure stock Bulma (Button, Box, Card, Navbar, Modal, Hero, …) have **no** extras partial —
+are pure stock Bulma (Box, Card, Navbar, Modal, Hero, …) have **no** extras partial —
 Bulma's own module is all they need.
 
 Bulma groups its form controls, so their modules don't follow the name: `Input` and `TextArea`
@@ -80,9 +80,9 @@ is **more complete** than the docs page's Option C example, which omits several)
 
 **Components** (`@allxsmith/bestax-bulma/scss/components/<name>`):
 `loading`, `collapse`, `tooltip`, `popover`, `hovercard`, `contextmenu`, `steps`, `sidebar`,
-`toast`, `dialog`, `carousel`, `tabs`, `menu`, `tableofcontents`, `reveal`, `avatar`, `avatars`,
-`badge`, `emptystate`, `timeline`, `treeview`, `scrollarea`, `command`, `datatable`, `pagination`,
-`affix`
+`toast`, `dialog`, `carousel`, `lightbox`, `tabs`, `menu`, `tableofcontents`, `reveal`, `avatar`, `avatars`,
+`badge`, `emptystate`, `timeline`, `treeview`, `scrollarea`, `command`, `datatable`,
+`pagination`, `affix`
 
 **Layout** (`@allxsmith/bestax-bulma/scss/layout/<name>`): `appframe`, `splitter`, `stack`
 
@@ -92,9 +92,9 @@ is **more complete** than the docs page's Option C example, which omits several)
 `datetimeinput`, `daterangeinput`, `file`, `fieldset`, `field`, `dropzone`, `colorpicker`,
 `colorinput`, `passwordinput`, `treeselect`
 
-**Elements** (`@allxsmith/bestax-bulma/scss/elements/<name>`): `colorswatch`, `delete`,
-`descriptionlist`, `iconbutton`, `kbd`, `linkbutton`, `loader`, `notification`, `progress`,
-`ringprogress`, `skeleton`, `stat`
+**Elements** (`@allxsmith/bestax-bulma/scss/elements/<name>`): `button`, `colorswatch`,
+`delete`, `descriptionlist`, `iconbutton`, `kbd`, `linkbutton`, `loader`, `notification`,
+`progress`, `ringprogress`, `skeleton`, `stat`
 
 **Helpers** (`@allxsmith/bestax-bulma/scss/helpers/<name>`): `cursor`, `sizing`
 
@@ -190,6 +190,11 @@ Notes:
   `showLabel={false}` it's an `IconButton`, so add `iconbutton` for a rounded one to be a circle.
 - `ContextMenu`'s menu is Bulma's dropdown markup, so an app using it needs
   `bulma/sass/components/dropdown` next to `scss/components/contextmenu`.
+- `Lightbox`'s viewer is Bulma's modal, with Bulma buttons for its controls and a `Loader` for a
+  slow image, so an app using it needs `bulma/sass/components/modal`,
+  `bulma/sass/elements/button` and `bulma/sass/elements/loader` next to
+  `scss/components/lightbox`, and the `delete` partial below for its close button in forced
+  colors.
 - `Loader` is stock Bulma styled by `bulma/sass/elements/loader`, and the `isLoading`
   spinners on `Button`, `Control` and `Select` are Bulma's too. The `loader` extras partial
   stops all of them under `prefers-reduced-motion: reduce`, hides everything inside a loading
@@ -215,6 +220,12 @@ Notes:
   (`bulma/sass/components/modal`) and `Tag isDelete` (`bulma/sass/elements/tag`) with them, so
   include it (`as bestax-delete`) in any build that shows a close button. Its rules win over
   Bulma's either way, so the order of the `@use` lines does not matter.
+- `Button` is stock Bulma too (`bulma/sass/elements/button`). Bulma shows a focused button with
+  its border and a shadow, which a ghost button doesn't have, and forced colors (Windows'
+  contrast themes) drops the shadow and sets the border's color, so a focused button can look
+  like an unfocused one there. The `button` extras partial gives those a focus outline, so
+  include it (`as bestax-button`) in any build that loads Bulma's button module. Its rules win
+  over Bulma's either way, so the order of the `@use` lines does not matter.
 - `Stats` lays its row out on Bulma's smart grid (`.grid` and `is-col-min-*`), so a build with a
   `Stats` row wants `bulma/sass/grid/grid` beside the `stat` partial, which only resets the row's
   margins.
@@ -279,8 +290,8 @@ not `flexbox` — `flexbox` holds only the alignment props. Verified failure mod
 The `npm create bestax` starter renders `Container`, `Section`, `Columns`/`Column`, `Image`,
 `Title`/`SubTitle`, `Box`, `Card`, `Buttons`/`Button`, and `Notification` with its close
 button: all stock Bulma, plus the `notification` and `delete` extras partials for that close
-button. Its
-helper props are `display` (visibility), `flexGrow` (flexbox), and `textAlign` (typography);
+button and the `button` partial for the buttons' focus outline in forced colors. Its helper
+props are `display` (visibility), `flexGrow` (flexbox), and `textAlign` (typography);
 it uses no spacing or color props. That inventory compiles to the following, verified
 pixel-equivalent to the prebuilt `complete` flavor in headless Chromium (light and dark, phone
 and desktop width, notification open), at 274 KB raw / 30 KB gzip vs 819 KB / 84 KB.
@@ -311,6 +322,7 @@ Scaffolded with an icon library, the starter also needs `bulma/sass/elements/ico
 @use 'bulma/sass/helpers/flexbox'; // flexGrow
 @use 'bulma/sass/helpers/typography'; // textAlign
 
+@use '@allxsmith/bestax-bulma/scss/elements/button' as bestax-button; // focus outline in forced colors
 @use '@allxsmith/bestax-bulma/scss/elements/delete' as bestax-delete; // the close button in forced colors
 @use '@allxsmith/bestax-bulma/scss/elements/notification' as bestax-notification; // text clears the close button
 ```

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

@@ -687,6 +687,30 @@ in a tooltip without an override of its own. The sizes are in `em`, so `textSize
 `--bulma-kbd-border-width`, `--bulma-kbd-color`, `--bulma-kbd-family`, `--bulma-kbd-padding`,
 `--bulma-kbd-radius`, `--bulma-kbd-size`, `--bulma-kbd-weight`
 
+### Lightbox
+
+Declared on the viewer's root, `.modal.lightbox`, which also sets Bulma's own
+`--bulma-modal-content-width`, so the image is as wide as the viewer less the room for the arrows.
+That's two classes, so a lone class through `className` loses to it: set them inline through
+`style`, which lands on the root, or with a rule at least as specific that loads after the
+library's. Its background is Bulma's modal background, `--bulma-modal-background-background-color`,
+near-black in both schemes, which is why the text and the icons default to white; keep them light
+if you change it. In forced colors the buttons' borders take the system's colors whatever these say.
+The zoom buttons start from the arrows' backgrounds and the error's text from the caption's color,
+so each follows the other until you set it apart. The fades and the zoom take Bulma's
+`--bulma-duration` and `--bulma-easing`.
+
+`--bulma-lightbox-animation-duration`, `--bulma-lightbox-arrow-background`,
+`--bulma-lightbox-arrow-background-hover`, `--bulma-lightbox-arrow-color`,
+`--bulma-lightbox-arrow-icon-size`, `--bulma-lightbox-arrow-offset`, `--bulma-lightbox-arrow-size`,
+`--bulma-lightbox-button-border-width`, `--bulma-lightbox-caption-color`,
+`--bulma-lightbox-caption-max-width`, `--bulma-lightbox-caption-padding`,
+`--bulma-lightbox-controls-z-index`, `--bulma-lightbox-disabled-opacity`,
+`--bulma-lightbox-error-color`, `--bulma-lightbox-error-gap`, `--bulma-lightbox-error-padding`,
+`--bulma-lightbox-image-max-height`, `--bulma-lightbox-loader-size`, `--bulma-lightbox-spacing`,
+`--bulma-lightbox-toolbar-button-background`, `--bulma-lightbox-toolbar-button-background-hover`,
+`--bulma-lightbox-toolbar-color`, `--bulma-lightbox-toolbar-gap`, `--bulma-lightbox-toolbar-icon-size`
+
 ### LinkButton
 
 Declared on the compound `.button.link-button` — see the compound-selector exception above.

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

@@ -82,6 +82,7 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
 | `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                                                                                                                                                                                                  |
 | `IconButton`       | `primary \| link \| info \| success \| warning \| danger \| white \| light \| dark \| black \| text \| ghost`                                                             | `small \| normal \| medium \| large`                                      | renders `Button`, so also `isLight`, `isOutlined`, `isInverted`; `isRounded` is a circle; retheme through `--bulma-button-*`                                                                                        |
 | `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-*`                                                                                                                   |
+| `Lightbox`         | — (no `color`: the viewer is white on Bulma's near-black modal background)                                                                                                | —                                                                         | retheme through `--bulma-lightbox-*` and Bulma's `--bulma-modal-*`; the triggers draw nothing of their own, or render through `Button` with `as`                                                                    |
 | `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": 26438
+          "bytes": 26656
         },
         {
           "id": "library-contributor",
@@ -93,7 +93,7 @@
         {
           "id": "bloomer-prop-map",
           "file": "references/bloomer/prop-map.md",
-          "bytes": 27217
+          "bytes": 27249
         },
         {
           "id": "bloomer-unmappables",
@@ -128,7 +128,7 @@
         {
           "id": "rbx-prop-map",
           "file": "references/rbx/prop-map.md",
-          "bytes": 16058
+          "bytes": 16090
         },
         {
           "id": "rbx-unmappables",
@@ -148,7 +148,7 @@
         {
           "id": "react-bulma-components-unmappables",
           "file": "references/react-bulma-components/unmappables.md",
-          "bytes": 14409
+          "bytes": 14441
         }
       ],
       "examples": []
@@ -162,7 +162,7 @@
         {
           "id": "modular-build",
           "file": "references/modular-build.md",
-          "bytes": 17595
+          "bytes": 18670
         }
       ],
       "examples": []
@@ -176,12 +176,12 @@
         {
           "id": "css-variables",
           "file": "references/css-variables.md",
-          "bytes": 69766
+          "bytes": 71535
         },
         {
           "id": "themeable-components",
           "file": "references/themeable-components.md",
-          "bytes": 39312
+          "bytes": 39801
         }
       ],
       "examples": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bestax-mcp",
-  "version": "1.18.32",
+  "version": "1.18.34",
   "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.2",
     "zod": "^4.6.7",
-    "@allxsmith/bestax-bulma": "^5.64.0"
+    "@allxsmith/bestax-bulma": "^5.65.1"
   },
   "devDependencies": {
     "@types/node": "^26.6.6",