@contentrain/astro-kit 0.43.0 → 0.44.1

package/catalog.json

@@ -3164,7 +3164,7 @@
     {
       "id": "gallery",
       "name": "Gallery",
-      "description": "Images in a square grid or in masonry columns, with optional captions. A click shows the image large in a native popover (no script), opens the image file, or does nothing.",
+      "description": "Images in a square grid or in masonry columns, with optional captions. A click shows the image large in a native popover (no script), steps through the set in a lightbox viewer, opens the image file, or does nothing.",
       "category": "section",
       "uses": [],
       "shared": [
@@ -3203,10 +3203,11 @@
           "options": [
             "popover",
             "link",
-            "none"
+            "none",
+            "lightbox"
           ],
           "default": "popover",
-          "description": "popover: the image opens large in place (Popover API; Escape or a click outside closes it). link: the thumbnail links to the image file (the WordPress 'link to media file'). none: images only."
+          "description": "popover: the image opens large in place (Popover API; Escape or a click outside closes it). link: the thumbnail links to the image file (the WordPress 'link to media file'). none: images only. lightbox: each thumbnail links to its large file (full, else the image); with script a click opens one modal viewer for the whole set, with previous / next, ←/→, a counter and the caption (a source lightbox: Elementor's slideshow group, a WordPress gallery with a lightbox plugin). The viewer and its script are printed only for this option."
         },
         "aspect": {
           "options": [
@@ -3287,6 +3288,24 @@
           "content": false,
           "description": "Text of the viewer's close button (ui-strings gallery.close)."
         },
+        "prevLabel": {
+          "type": "string",
+          "default": "Previous image",
+          "content": false,
+          "description": "Name of the lightbox viewer's previous button (ui-strings slider.prev)."
+        },
+        "nextLabel": {
+          "type": "string",
+          "default": "Next image",
+          "content": false,
+          "description": "Name of the lightbox viewer's next button (ui-strings slider.next)."
+        },
+        "ofLabel": {
+          "type": "string",
+          "default": "of",
+          "content": false,
+          "description": "The word of the lightbox viewer's counter between position and total (\"2 of 5\"; ui-strings slider.of)."
+        },
         "tone": {
           "type": "select",
           "options": [
@@ -3427,7 +3446,7 @@
         }
       },
       "slots": {},
-      "js": "none",
+      "js": "vanilla",
       "dependencies": {},
       "sources": {
         "gutenberg": [
@@ -3444,9 +3463,10 @@
           "classic/gallery"
         ]
       },
-      "a11y": "A list of figures. In popover mode each thumbnail is a <button> named by the image's alt (or caption) that opens the viewer; the viewer has a visible close button, and Escape closes it, returning focus to the thumbnail. Captions are <figcaption>s. A scrolling row is a labelled region with tabindex 0 so the keyboard can scroll it; thumbnail buttons are named \"Enlarge: …\". The viewer has no next/previous (it would need script).",
+      "a11y": "A list of figures. In popover mode each thumbnail is a <button> named by the image's alt (or caption) that opens the viewer; the viewer has a visible close button, and Escape closes it, returning focus to the thumbnail. Captions are <figcaption>s. A scrolling row is a labelled region with tabindex 0 so the keyboard can scroll it; thumbnail buttons are named \"Enlarge: …\". The popover viewer shows one image. In lightbox mode each thumbnail is a link to its large file, named \"Enlarge: …\"; with script it opens one modal <dialog> named by the heading (or the region label): focus moves into it and stays there (the page behind is inert), Escape or a click outside the image closes it and focus returns to the thumbnail, labelled previous / next buttons and ←/→ (mirrored right to left), Home and End step through the set, and the counter (\"2 of 5\") and caption are announced as they change. Nothing animates. Without script the links open the files. Other modes ship no script.",
       "files": [
-        "Gallery.astro"
+        "Gallery.astro",
+        "GalleryLightbox.astro"
       ],
       "contentFields": {
         "items": "items",
@@ -5416,7 +5436,7 @@
             "radio"
           ],
           "default": "none",
-          "description": "radio: two labelled radios swap each plan's price for its priceAlt (monthly / yearly), with no script. The radio group is named from the section id, or a hash of the plans without one, so two toggles on a page stay independent."
+          "description": "radio: two labelled radios swap each plan's price for its priceAlt (monthly / yearly), with no script. The radio group is named from the section id, or a hash of the plans without one, so two toggles on a page stay independent. A plan's priceWas, priceNote and priceFoot swap for their Alt values the same way, and billingAltNote shows only with the second option."
         }
       },
       "props": {
@@ -5487,12 +5507,42 @@
               "priceAlt": {
                 "type": "string",
                 "label": "Price, other period",
-                "description": "The price for the other billing period (\"€150\"), shown when the toggle is on its second option."
+                "description": "The price for the other billing period (\"€150\"), shown when the toggle is on its second option. Without it the plan's price (and its struck price) shows under both options: a free plan, \"Contact us\", or one price for both periods. Its notes do not: they stay first-period lines."
               },
               "periodAlt": {
                 "type": "string",
                 "label": "Period, other period",
                 "description": "What the other price is per (\"/year\")."
+              },
+              "priceWas": {
+                "type": "string",
+                "label": "Original price",
+                "description": "The original price, struck before the price (\"$35\"; cards layout)."
+              },
+              "priceWasAlt": {
+                "type": "string",
+                "label": "Original price, other period",
+                "description": "The other period's struck original price, shown with priceAlt. No fallback: without it, the second option shows no struck price (priceWas belongs to the first period only, except on a plan with no priceAlt, whose whole price line shows under both)."
+              },
+              "priceNote": {
+                "type": "string",
+                "label": "Price note",
+                "description": "One line under the price (\"USD for the first month\"; cards layout)."
+              },
+              "priceNoteAlt": {
+                "type": "string",
+                "label": "Price note, other period",
+                "description": "The other period's line under the price, shown with priceAlt. No fallback: without it, the second option shows no line there (a note like \"for the first month\" would be wrong under the other price)."
+              },
+              "priceFoot": {
+                "type": "string",
+                "label": "Footnote",
+                "description": "One line at the card's foot, above the button (\"Pay $0 today, $35 after the first month\"; cards layout)."
+              },
+              "priceFootAlt": {
+                "type": "string",
+                "label": "Footnote, other period",
+                "description": "The other period's line at the card's foot, shown with priceAlt. No fallback: without it, the second option shows no line there."
               }
             }
           },
@@ -5502,7 +5552,7 @@
           "type": "string",
           "default": "Most popular",
           "content": false,
-          "description": "Badge text on featured plans."
+          "description": "Badge text on featured plans (ui-strings pricing.featured)."
         },
         "id": {
           "type": "string",
@@ -5519,13 +5569,13 @@
           "type": "string",
           "default": "Included",
           "content": false,
-          "description": "Table cell text for readers where a plan has the feature."
+          "description": "Table cell text for readers where a plan has the feature (ui-strings pricing.included)."
         },
         "notIncludedLabel": {
           "type": "string",
           "default": "Not included",
           "content": false,
-          "description": "Table cell text for readers where a plan lacks the feature."
+          "description": "Table cell text for readers where a plan lacks the feature (ui-strings pricing.not_included)."
         },
         "measured": {
           "type": "object",
@@ -5641,19 +5691,30 @@
           "type": "string",
           "default": "Monthly",
           "content": false,
-          "description": "First option of the billing toggle."
+          "description": "First option of the billing toggle (ui-strings pricing.billing_main)."
         },
         "billingAltLabel": {
           "type": "string",
           "default": "Yearly",
           "content": false,
-          "description": "Second option of the billing toggle (the plans' priceAlt)."
+          "description": "Second option of the billing toggle, the plans' priceAlt (ui-strings pricing.billing_alt)."
         },
         "billingLegend": {
           "type": "string",
           "default": "Billing period",
           "content": false,
-          "description": "Legend of the toggle, read to screen readers."
+          "description": "Legend of the toggle, read to screen readers (ui-strings pricing.billing_legend)."
+        },
+        "billingAltNote": {
+          "type": "string",
+          "label": "Second-option note",
+          "description": "A line under the billing toggle shown only while its second option is chosen (\"Save $70 by paying annually\")."
+        },
+        "wasLabel": {
+          "type": "string",
+          "default": "Was",
+          "content": false,
+          "description": "Read before a struck original price by screen readers, which do not announce the strike. 'Was' is only the kit default: the writer passes it in the site's language (ui-strings pricing.was)."
         }
       },
       "slots": {},
@@ -5670,7 +5731,7 @@
           "divi/et_pb_pricing_tables"
         ]
       },
-      "a11y": "Plans are a <ul>; each name is an <h3> under the section's <h2>, or an <h2> when the section has no heading. A featured plan is marked by a text badge and a ring, not colour alone. Buttons are links with their own label. The table layout is a real <table> with a caption, column and row headers, and Included / Not included text in every cell; the billing toggle is a fieldset with a legend and labelled radios.",
+      "a11y": "Plans are a <ul>; each name is an <h3> under the section's <h2>, or an <h2> when the section has no heading. A featured plan is marked by a text badge and a ring, not colour alone. Buttons are links with their own label. The table layout is a real <table> with a caption, column and row headers, and Included / Not included text in every cell; the billing toggle is a fieldset with a legend and labelled radios. A struck original price is a <del> read as \"Was <price>\" (the strike alone is not announced); the period's notes swap with its price, hidden (display: none) for the period not chosen.",
       "pattern": {
         "summary": "repeated plan units: name + price + feature list + button",
         "signals": [
@@ -5697,7 +5758,14 @@
         "plans[].featured": "plans[].featured",
         "plans[].badge": "plans[].badge",
         "plans[].priceAlt": "plans[].price_alt",
-        "plans[].periodAlt": "plans[].period_alt"
+        "plans[].periodAlt": "plans[].period_alt",
+        "plans[].priceWas": "plans[].price_was",
+        "plans[].priceWasAlt": "plans[].price_was_alt",
+        "plans[].priceNote": "plans[].price_note",
+        "plans[].priceNoteAlt": "plans[].price_note_alt",
+        "plans[].priceFoot": "plans[].price_foot",
+        "plans[].priceFootAlt": "plans[].price_foot_alt",
+        "billingAltNote": "billing_alt_note"
       }
     },
     {

package/components/gallery/Gallery.astro

@@ -3,8 +3,10 @@
 // shows it large in a native popover — no script: `popovertarget` opens it,
 // Escape and a click outside close it. `link` opens the image file instead.
 // Layouts: grid, masonry, a scroll-snap `row`, and a `mosaic` whose first image
-// spans 2×2. The popover shows one image; next/previous would need script.
+// spans 2×2. The popover shows one image; `lightbox` steps through the whole set in one viewer (GalleryLightbox: a
+// modal dialog and a small script, both printed only for that option), and each tile is a link to its large file.
 import { tv } from 'tailwind-variants'
+import GalleryLightbox from './GalleryLightbox.astro'
 import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
 import { measuredGrid } from '../_shared/measured'
@@ -49,7 +51,7 @@ const gallery = tv({
     captionStyle: { below: {}, overlay: { caption: 'absolute inset-x-0 bottom-0 m-0 bg-ink/70 p-2 text-surface md:translate-y-full md:transition-transform md:group-focus-within:translate-y-0 md:group-hover:translate-y-0' } },
     hoverEffect: { none: {}, zoom: { thumb: 'motion-safe:group-hover:scale-105' } },
     columns: { '2': { list: 'grid-cols-2' }, '3': { list: 'grid-cols-2 md:grid-cols-3' }, '4': { list: 'grid-cols-2 md:grid-cols-4' }, '5': { list: 'grid-cols-2 md:grid-cols-5' }, '6': { list: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6' } },
-    open: { popover: {}, link: {}, none: { frame: 'cursor-default' } },
+    open: { popover: {}, link: {}, lightbox: {}, none: { frame: 'cursor-default' } },
   },
   compoundVariants: [
     { layout: 'masonry', columns: '3', class: { list: 'md:columns-3' } },
@@ -77,29 +79,34 @@ interface Props {
   /** Name of the scrolling row's region when there is no heading ("Images"). */
   regionLabel?: string | undefined
   enlargeLabel?: string | undefined
-  /** What a click on an image does: show it large in place, open the file, or nothing. */
-  open?: 'popover' | 'link' | 'none' | undefined
+  /** What a click on an image does: show it large in place, step through the set in a viewer, open the file, or nothing. */
+  open?: 'popover' | 'link' | 'lightbox' | 'none' | undefined
   /** Text of the viewer's close button ("Close"). */
   closeLabel?: string | undefined
+  /** The lightbox viewer's buttons ("Previous image", "Next image") and the word of its counter ("2 of 5"). */
+  prevLabel?: string | undefined
+  nextLabel?: string | undefined
+  ofLabel?: string | undefined
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
   /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image, columns per width, gap. Absent, the site's tokens; present, it wins over tone and columns. */
   measured?: MeasuredStyle | undefined
   id?: string | undefined
 }
 
-const { items: given, heading, layout, columns, aspect, gap, captionStyle, hoverEffect, enlargeLabel = 'Enlarge', regionLabel = 'Images', open = 'popover', closeLabel = 'Close', tone, measured, id: givenId } = Astro.props
+const { items: given, heading, layout, columns, aspect, gap, captionStyle, hoverEffect, enlargeLabel = 'Enlarge', regionLabel = 'Images', open = 'popover', closeLabel = 'Close', prevLabel = 'Previous image', nextLabel = 'Next image', ofLabel = 'of', tone, measured, id: givenId } = Astro.props
 // Two on one page never share an id: their labels and controls would point into each other.
 const id = instanceId(Astro.locals, givenId, 'gallery')
 const items = given.flatMap(item => { const image = imageOf(item.image, item.imageAlt); return image ? [{ ...item, image, full: imageOf(item.full, item.imageAlt) }] : [] }) satisfies Array<{ image: ImageInput, caption?: string | undefined }>
 const s = gallery({ layout, columns, open, aspect, gap, captionStyle, hoverEffect })
 const headingId = heading ? `${id}-title` : undefined
+const lightbox = open === 'lightbox' ? `${id}-viewer` : undefined
 const sizes = columns === '2' ? '50vw' : columns === '4' ? '(min-width: 768px) 25vw, 50vw' : '(min-width: 768px) 33vw, 50vw'
 ---
 {items.length > 0 && (
   <Section kit="gallery" measured={measured} tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
     {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
     {/* A scrolling strip is a labelled, focusable region so the keyboard can scroll it. */}
-    <div tabindex={layout === 'row' ? 0 : undefined} role={layout === 'row' ? 'region' : undefined} aria-label={layout === 'row' ? heading ?? regionLabel : undefined}>
+    <div tabindex={layout === 'row' ? 0 : undefined} role={layout === 'row' ? 'region' : undefined} aria-label={layout === 'row' ? heading ?? regionLabel : undefined} data-kit-lightbox={lightbox}>
     <ul class={s.list({ class: layout === 'grid' || layout === 'mosaic' ? measuredGrid(measured) : undefined })} role="list">
       {items.map((item, i) => {
         const viewer = `${id}-image-${i + 1}`
@@ -108,9 +115,11 @@ const sizes = columns === '2' ? '50vw' : columns === '4' ? '(min-width: 768px) 2
             <figure class={captionStyle === 'overlay' ? 'group relative m-0 overflow-hidden' : 'm-0'}>
               {open === 'popover'
                 ? <button type="button" popovertarget={viewer} class={s.frame()} aria-label={`${enlargeLabel}: ${item.image.alt || item.caption || ''}`.trim()}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></button>
-                : open === 'link'
-                  ? <a href={safeHref(item.image.src)} class={s.frame()}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></a>
-                  : <div class={s.frame()}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></div>}
+                : open === 'lightbox'
+                  ? <a href={safeHref((item.full ?? item.image).src)} class={s.frame()} aria-label={`${enlargeLabel}: ${item.image.alt || item.caption || ''}`.trim()} data-kit-lightbox-item data-caption={item.caption || undefined}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></a>
+                  : open === 'link'
+                    ? <a href={safeHref(item.image.src)} class={s.frame()}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></a>
+                    : <div class={s.frame()}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></div>}
               {item.caption && <figcaption class={s.caption()}>{item.caption}</figcaption>}
             </figure>
             {open === 'popover' && (
@@ -126,6 +135,7 @@ const sizes = columns === '2' ? '50vw' : columns === '4' ? '(min-width: 768px) 2
         )
       })}
     </ul>
+    {lightbox && <GalleryLightbox id={lightbox} label={heading ?? regionLabel} closeLabel={closeLabel} prevLabel={prevLabel} nextLabel={nextLabel} ofLabel={ofLabel} single={items.length < 2} />}
     </div>
   </Section>
 )}

package/components/gallery/GalleryLightbox.astro

@@ -0,0 +1,110 @@
+---
+// The viewer of a Gallery set to `open: 'lightbox'`: one modal dialog for the whole set, printed (with its script) only
+// for that option, so a gallery that does not ask for it ships neither. Each tile is a link to its large file
+// (`data-kit-lightbox-item`); a plain click opens that file here instead, and previous / next step through the set.
+//
+// The dialog is modal (`showModal`): the page behind it is inert, so focus stays inside it, and Escape closes it.
+// Closing hands focus back to the tile it was opened from. ←/→ step (mirrored right to left), Home and End jump to
+// the ends, and a click outside the image closes. The counter and the caption are announced as they change. Nothing
+// animates. Text goes in through `textContent` only. With no script the tiles stay links to the files.
+interface Props {
+  /** The dialog's id; the gallery names it in `data-kit-lightbox`. */
+  id: string
+  /** The dialog's name: the gallery's heading, or its region label. */
+  label: string
+  closeLabel: string
+  prevLabel: string
+  nextLabel: string
+  /** The counter's word between position and total ("2 of 5"). */
+  ofLabel: string
+  /** One image: no previous / next buttons and no counter. */
+  single: boolean
+}
+
+const { id, label, closeLabel, prevLabel, nextLabel, ofLabel, single } = Astro.props
+const step = 'grid size-11 shrink-0 cursor-pointer place-items-center rounded-full border border-surface/40 text-surface hover:bg-surface/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface'
+---
+<dialog id={id} aria-label={label} data-of={ofLabel} class="m-0 h-dvh max-h-none w-screen max-w-none border-0 bg-ink p-4 text-surface open:grid open:grid-rows-[auto_minmax(0,1fr)_auto] open:gap-3 md:p-8">
+  <div class="flex justify-end">
+    <button type="button" class="cursor-pointer rounded-md border border-surface/40 px-4 py-2 text-sm text-surface hover:bg-surface/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface" data-kit-lightbox-close>{closeLabel}</button>
+  </div>
+  <div class="grid min-h-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 md:gap-4">
+    {single ? <span /> : <button type="button" class={step} aria-label={prevLabel} data-kit-lightbox-prev><svg aria-hidden="true" viewBox="0 0 24 24" class="size-5 rtl:-scale-x-100" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6" /></svg></button>}
+    <img alt="" class="mx-auto block max-h-full max-w-full rounded-[var(--radius-image,var(--radius-card))] object-contain" data-kit-lightbox-image hidden />
+    {single ? <span /> : <button type="button" class={step} aria-label={nextLabel} data-kit-lightbox-next><svg aria-hidden="true" viewBox="0 0 24 24" class="size-5 rtl:-scale-x-100" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" /></svg></button>}
+  </div>
+  <p class="m-0 flex flex-wrap justify-center gap-x-3 text-center text-sm" aria-live="polite">
+    <span data-kit-lightbox-caption></span>
+    {!single && <span data-kit-lightbox-count></span>}
+  </p>
+</dialog>
+
+<script>
+  function wire(root: HTMLElement): void {
+    const dialog = document.getElementById(root.dataset.kitLightbox ?? '')
+    if (!(dialog instanceof HTMLDialogElement)) return
+    // Only tiles with a real address: one the kit printed as `#` (a refused URL) stays a plain link.
+    const links = [...root.querySelectorAll<HTMLAnchorElement>('a[data-kit-lightbox-item]')].filter(link => link.getAttribute('href') !== '#')
+    const image = dialog.querySelector<HTMLImageElement>('[data-kit-lightbox-image]')
+    const caption = dialog.querySelector<HTMLElement>('[data-kit-lightbox-caption]')
+    const count = dialog.querySelector<HTMLElement>('[data-kit-lightbox-count]')
+    if (!links.length || !image || !caption) return
+    // One tile left once the refused ones are out: nothing to step to, so no step buttons and no counter. The buttons
+    // keep their place in the row (hidden from sight, focus and readers alike), so the image does not move.
+    if (links.length < 2) {
+      for (const button of dialog.querySelectorAll<HTMLElement>('[data-kit-lightbox-prev], [data-kit-lightbox-next]')) button.style.visibility = 'hidden'
+      if (count) count.hidden = true
+    }
+    let index = 0
+    let opener: HTMLAnchorElement | null = null
+    const show = (at: number) => {
+      index = (at + links.length) % links.length
+      const link = links[index]!
+      image.src = link.href
+      image.alt = link.querySelector('img')?.alt ?? ''
+      image.hidden = false
+      caption.textContent = link.dataset.caption ?? ''
+      if (count) count.textContent = `${index + 1} ${dialog.dataset.of ?? 'of'} ${links.length}`
+    }
+    links.forEach((link, i) => link.addEventListener('click', (event) => {
+      // A click asking for a new tab or window, or a download, keeps the link's own meaning.
+      if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+      event.preventDefault()
+      opener = link
+      show(i)
+      if (!dialog.open) dialog.showModal()
+    }))
+    dialog.querySelector('[data-kit-lightbox-close]')?.addEventListener('click', () => dialog.close())
+    dialog.querySelector('[data-kit-lightbox-prev]')?.addEventListener('click', () => show(index - 1))
+    dialog.querySelector('[data-kit-lightbox-next]')?.addEventListener('click', () => show(index + 1))
+    dialog.addEventListener('keydown', (event) => {
+      const back = getComputedStyle(dialog).direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft'
+      const forward = back === 'ArrowLeft' ? 'ArrowRight' : 'ArrowLeft'
+      const to = event.key === back ? index - 1 : event.key === forward ? index + 1 : event.key === 'Home' ? 0 : event.key === 'End' ? links.length - 1 : null
+      if (to === null || links.length < 2) return
+      event.preventDefault()
+      show(to)
+    })
+    // The dialog fills the screen: a click anywhere but on the image or a button is a click outside the image.
+    dialog.addEventListener('click', (event) => {
+      if (event.target instanceof Element && (event.target === image || event.target.closest('button'))) return
+      dialog.close()
+    })
+    dialog.addEventListener('close', () => { opener?.focus(); opener = null })
+  }
+
+  function init(): void {
+    for (const root of document.querySelectorAll<HTMLElement>('[data-kit-lightbox]')) {
+      if (root.dataset.kitReady !== undefined) continue
+      root.dataset.kitReady = ''
+      try { wire(root) }
+      catch {
+        // Left as printed: every tile is still a link to its file.
+      }
+    }
+  }
+
+  init()
+  // With Astro's client router a page arrives without a reload: wire its galleries too (ready ones are skipped).
+  document.addEventListener('astro:page-load', init)
+</script>

package/components/gallery/fixtures.json

@@ -462,5 +462,57 @@
         }
       ]
     }
+  },
+  {
+    "name": "lightbox",
+    "props": {
+      "heading": "Along the coast",
+      "id": "coast",
+      "open": "lightbox",
+      "columns": "4",
+      "items": [
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-1.svg",
+            "alt": "Photo 1",
+            "width": 1200,
+            "height": 800
+          },
+          "full": {
+            "src": "/kit-fixtures/photo-1.svg",
+            "alt": "Photo 1",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Porto at dawn"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-2.svg",
+            "alt": "Photo 2",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Train to Coimbra"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-3.svg",
+            "alt": "Photo 3",
+            "width": 1200,
+            "height": 800
+          }
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-4.svg",
+            "alt": "Photo 4",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Harbour"
+        }
+      ]
+    }
   }
 ]

package/components/gallery/meta.json

@@ -1,7 +1,7 @@
 {
   "id": "gallery",
   "name": "Gallery",
-  "description": "Images in a square grid or in masonry columns, with optional captions. A click shows the image large in a native popover (no script), opens the image file, or does nothing.",
+  "description": "Images in a square grid or in masonry columns, with optional captions. A click shows the image large in a native popover (no script), steps through the set in a lightbox viewer, opens the image file, or does nothing.",
   "category": "section",
   "uses": [],
   "shared": [
@@ -40,10 +40,11 @@
       "options": [
         "popover",
         "link",
-        "none"
+        "none",
+        "lightbox"
       ],
       "default": "popover",
-      "description": "popover: the image opens large in place (Popover API; Escape or a click outside closes it). link: the thumbnail links to the image file (the WordPress 'link to media file'). none: images only."
+      "description": "popover: the image opens large in place (Popover API; Escape or a click outside closes it). link: the thumbnail links to the image file (the WordPress 'link to media file'). none: images only. lightbox: each thumbnail links to its large file (full, else the image); with script a click opens one modal viewer for the whole set, with previous / next, ←/→, a counter and the caption (a source lightbox: Elementor's slideshow group, a WordPress gallery with a lightbox plugin). The viewer and its script are printed only for this option."
     },
     "aspect": {
       "options": [
@@ -124,6 +125,24 @@
       "content": false,
       "description": "Text of the viewer's close button (ui-strings gallery.close)."
     },
+    "prevLabel": {
+      "type": "string",
+      "default": "Previous image",
+      "content": false,
+      "description": "Name of the lightbox viewer's previous button (ui-strings slider.prev)."
+    },
+    "nextLabel": {
+      "type": "string",
+      "default": "Next image",
+      "content": false,
+      "description": "Name of the lightbox viewer's next button (ui-strings slider.next)."
+    },
+    "ofLabel": {
+      "type": "string",
+      "default": "of",
+      "content": false,
+      "description": "The word of the lightbox viewer's counter between position and total (\"2 of 5\"; ui-strings slider.of)."
+    },
     "tone": {
       "type": "select",
       "options": [
@@ -264,7 +283,7 @@
     }
   },
   "slots": {},
-  "js": "none",
+  "js": "vanilla",
   "dependencies": {},
   "sources": {
     "gutenberg": [
@@ -281,5 +300,5 @@
       "classic/gallery"
     ]
   },
-  "a11y": "A list of figures. In popover mode each thumbnail is a <button> named by the image's alt (or caption) that opens the viewer; the viewer has a visible close button, and Escape closes it, returning focus to the thumbnail. Captions are <figcaption>s. A scrolling row is a labelled region with tabindex 0 so the keyboard can scroll it; thumbnail buttons are named \"Enlarge: …\". The viewer has no next/previous (it would need script)."
+  "a11y": "A list of figures. In popover mode each thumbnail is a <button> named by the image's alt (or caption) that opens the viewer; the viewer has a visible close button, and Escape closes it, returning focus to the thumbnail. Captions are <figcaption>s. A scrolling row is a labelled region with tabindex 0 so the keyboard can scroll it; thumbnail buttons are named \"Enlarge: …\". The popover viewer shows one image. In lightbox mode each thumbnail is a link to its large file, named \"Enlarge: …\"; with script it opens one modal <dialog> named by the heading (or the region label): focus moves into it and stays there (the page behind is inert), Escape or a click outside the image closes it and focus returns to the thumbnail, labelled previous / next buttons and ←/→ (mirrored right to left), Home and End step through the set, and the counter (\"2 of 5\") and caption are announced as they change. Nothing animates. Without script the links open the files. Other modes ship no script."
 }

package/components/pricing/Pricing.astro

@@ -4,7 +4,12 @@
 // out by more than its colour. Each plan's features are a markdown list,
 // rendered at build time. Variants: `layout="table"` is a comparison table
 // (plan columns, feature rows); `billingToggle="radio"` swaps monthly and yearly
-// prices with two radio inputs and CSS `:has()` — no script.
+// prices with two radio inputs and CSS `:has()` — no script. A plan's struck price, its note under the price and its
+// line by the button swap the same way, and the section's `billingAltNote` shows only with the second option; each
+// is printed only where it is given. An Alt line never falls back to the main one: with the second option chosen, a
+// plan without it shows no line there (a note "for the first month" would be wrong under a yearly price).
+// The price itself is the one exception: a plan with no `priceAlt` (free, "Contact us", or one price for both periods)
+// keeps its price line, struck price included, under both options; a card never loses its price.
 import { tv } from 'tailwind-variants'
 import Button from '../_shared/Button.astro'
 import Section, { type Tone } from '../_shared/Section.astro'
@@ -32,6 +37,10 @@ const pricing = tv({
     price: 'flex items-baseline gap-1',
     amount: 'text-4xl [font-weight:var(--font-weight-heading,700)] tracking-tight',
     period: `text-sm ${muted}`,
+    was: `me-1 text-lg ${muted}`,
+    note: `-mt-2 text-sm ${muted}`,
+    foot: `text-sm ${muted}`,
+    altNote: 'mx-auto -mt-5 mb-8 w-fit text-center text-sm font-medium text-accent-text',
     description: `text-pretty ${muted}`,
     features: 'prose-site prose max-w-none text-current prose-ul:ps-5 prose-li:my-1',
     action: 'mt-auto pt-2',
@@ -69,6 +78,15 @@ interface Plan {
   /** The other billing period's price and period (`billingToggle="radio"`). */
   priceAlt?: string | undefined
   periodAlt?: string | undefined
+  /** The struck original price before the price, for each period ("$35"). */
+  priceWas?: string | undefined
+  priceWasAlt?: string | undefined
+  /** One line under the price, for each period ("USD for the first month"). */
+  priceNote?: string | undefined
+  priceNoteAlt?: string | undefined
+  /** One line at the card's foot, by the button, for each period ("Pay $0 today, $35 after the first month"). */
+  priceFoot?: string | undefined
+  priceFootAlt?: string | undefined
 }
 
 interface Props {
@@ -88,6 +106,10 @@ interface Props {
   billingMainLabel?: string | undefined
   billingAltLabel?: string | undefined
   billingLegend?: string | undefined
+  /** A line by the toggle shown only with its second option ("Save $70 by paying annually"). */
+  billingAltNote?: string | undefined
+  /** Read before a struck price by screen readers ("Was"), which do not announce the strike. */
+  wasLabel?: string | undefined
   /** Table cell texts for screen readers. */
   includedLabel?: string | undefined
   notIncludedLabel?: string | undefined
@@ -97,7 +119,7 @@ interface Props {
   id?: string | undefined
 }
 
-const { heading, intro, plans, featuredLabel = 'Most popular', columns, layout = 'cards', featureStyle, compact, billingToggle = 'none', billingMainLabel = 'Monthly', billingAltLabel = 'Yearly', billingLegend = 'Billing period', includedLabel = 'Included', notIncludedLabel = 'Not included', tone, measured, id: givenId } = Astro.props
+const { heading, intro, plans, featuredLabel = 'Most popular', columns, layout = 'cards', featureStyle, compact, billingToggle = 'none', billingMainLabel = 'Monthly', billingAltLabel = 'Yearly', billingLegend = 'Billing period', billingAltNote, wasLabel = 'Was', includedLabel = 'Included', notIncludedLabel = 'Not included', tone, measured, id: givenId } = Astro.props
 // Every section has an id, so a theme or a design layer can address this one: the page's, or `pricing`, `pricing-2`, … in render order.
 const id = instanceId(Astro.locals, givenId, 'pricing')
 const s = pricing({ columns, featureStyle, compact: compact ?? false, tone })
@@ -173,28 +195,41 @@ const features = await Promise.all(plans.map(plan => renderMarkdown(plan.feature
             <label class={s.toggleOption()}><input type="radio" name={`${group}-billing`} value="alt" class="sr-only" />{billingAltLabel}</label>
           </fieldset>
         )}
+        {toggled && billingAltNote && <p class={s.altNote()} data-price="alt">{billingAltNote}</p>}
         <ul class={s.list({ class: measuredGrid(measured) })}>
           {plans.map((plan, i) => (
             <li class={s.plan({ class: plan.featured ? 'ring-2 ring-accent shadow-lg md:-my-2 md:py-10' : undefined })}>
               {(plan.badge ?? (plan.featured ? featuredLabel : undefined)) && <p class={s.badge()}>{plan.badge ?? featuredLabel}</p>}
               <PlanHeading class={s.name()}>{plan.name}</PlanHeading>
-              <p class={s.price()} data-price="main">
+              <p class={s.price()} data-price={toggled && !plan.priceAlt ? undefined : 'main'}>
+                {plan.priceWas && <del class={s.was()}><span class="sr-only">{wasLabel} </span>{plan.priceWas}</del>}
                 <span class={s.amount()}>{plan.price}</span>
                 {plan.period && <span class={s.period()}>{plan.period}</span>}
               </p>
               {toggled && plan.priceAlt && (
                 <p class={s.price()} data-price="alt">
+                  {plan.priceWasAlt && <del class={s.was()}><span class="sr-only">{wasLabel} </span>{plan.priceWasAlt}</del>}
                   <span class={s.amount()}>{plan.priceAlt}</span>
                   {plan.periodAlt && <span class={s.period()}>{plan.periodAlt}</span>}
                 </p>
               )}
+              {plan.priceNote && <p class={s.note()} data-price="main">{plan.priceNote}</p>}
+              {toggled && plan.priceAlt && plan.priceNoteAlt && <p class={s.note()} data-price="alt">{plan.priceNoteAlt}</p>}
               {plan.description && <p class={s.description()} data-kit-text>{plan.description}</p>}
               {features[i] && <div class={s.features()} set:html={features[i]} />}
               {plan.ctaLabel && plan.ctaHref && (
                 <div class={s.action()}>
+                  {plan.priceFoot && <p class={s.foot({ class: 'mb-3' })} data-price="main">{plan.priceFoot}</p>}
+                  {toggled && plan.priceAlt && plan.priceFootAlt && <p class={s.foot({ class: 'mb-3' })} data-price="alt">{plan.priceFootAlt}</p>}
                   <Button action={{ label: plan.ctaLabel, href: plan.ctaHref, style: plan.featured ? 'primary' : 'ghost' }} class="w-full" />
                 </div>
               )}
+              {!(plan.ctaLabel && plan.ctaHref) && (plan.priceFoot || (toggled && plan.priceAlt && plan.priceFootAlt)) && (
+                <div class={s.action()}>
+                  {plan.priceFoot && <p class={s.foot()} data-price="main">{plan.priceFoot}</p>}
+                  {toggled && plan.priceAlt && plan.priceFootAlt && <p class={s.foot()} data-price="alt">{plan.priceFootAlt}</p>}
+                </div>
+              )}
             </li>
           ))}
         </ul>

package/components/pricing/fixtures.json

@@ -286,5 +286,89 @@
         }
       ]
     }
+  },
+  {
+    "name": "billing-period-notes",
+    "props": {
+      "id": "hosting",
+      "heading": "Hosting",
+      "billingToggle": "radio",
+      "columns": "2",
+      "billingAltNote": "Save $70 by paying annually",
+      "plans": [
+        {
+          "name": "Single",
+          "price": "$0",
+          "period": "/first month",
+          "priceWas": "$35",
+          "priceNote": "USD for the first month",
+          "priceFoot": "Pay $0 today, $35 after the first month",
+          "priceAlt": "$0",
+          "periodAlt": "/first month",
+          "priceWasAlt": "$30",
+          "priceNoteAlt": "USD for the first month, then $350 a year",
+          "priceFootAlt": "Pay $0 today, $350 after the first month",
+          "features": "- 1 site\n- 20GB bandwidth",
+          "ctaLabel": "Sign up",
+          "ctaHref": "/signup/single/"
+        },
+        {
+          "name": "Multiple",
+          "price": "$0",
+          "period": "/first month",
+          "priceWas": "$70",
+          "priceNote": "USD for the first month",
+          "priceFoot": "Pay $0 today, $70 after the first month",
+          "priceAlt": "$0",
+          "periodAlt": "/first month",
+          "priceWasAlt": "$58",
+          "priceFootAlt": "Pay $0 today, $700 after the first month",
+          "features": "- 5 sites\n- 100GB bandwidth",
+          "featured": true
+        }
+      ]
+    }
+  },
+  {
+    "name": "billing-toggle-no-alt",
+    "props": {
+      "id": "teams",
+      "heading": "Teams",
+      "billingToggle": "radio",
+      "columns": "3",
+      "plans": [
+        {
+          "name": "Free",
+          "price": "$0",
+          "period": "/month",
+          "priceNote": "Free for one user",
+          "features": "- 1 user",
+          "ctaLabel": "Start free",
+          "ctaHref": "/signup/free/"
+        },
+        {
+          "name": "Team",
+          "price": "$12",
+          "period": "/month",
+          "priceAlt": "$120",
+          "periodAlt": "/year",
+          "features": "- 10 users\n- Shared drafts",
+          "ctaLabel": "Subscribe",
+          "ctaHref": "/buy/team/",
+          "featured": true
+        },
+        {
+          "name": "Enterprise",
+          "price": "Contact us",
+          "priceWas": "$99",
+          "features": "- Unlimited users\n- SSO",
+          "ctaLabel": "Talk to sales",
+          "ctaHref": "/contact/"
+        }
+      ],
+      "billingMainLabel": "Monthly",
+      "billingAltLabel": "Yearly",
+      "billingLegend": "Billing period"
+    }
   }
 ]

package/components/pricing/meta.json

@@ -56,7 +56,7 @@
         "radio"
       ],
       "default": "none",
-      "description": "radio: two labelled radios swap each plan's price for its priceAlt (monthly / yearly), with no script. The radio group is named from the section id, or a hash of the plans without one, so two toggles on a page stay independent."
+      "description": "radio: two labelled radios swap each plan's price for its priceAlt (monthly / yearly), with no script. The radio group is named from the section id, or a hash of the plans without one, so two toggles on a page stay independent. A plan's priceWas, priceNote and priceFoot swap for their Alt values the same way, and billingAltNote shows only with the second option."
     }
   },
   "props": {
@@ -127,12 +127,42 @@
           "priceAlt": {
             "type": "string",
             "label": "Price, other period",
-            "description": "The price for the other billing period (\"€150\"), shown when the toggle is on its second option."
+            "description": "The price for the other billing period (\"€150\"), shown when the toggle is on its second option. Without it the plan's price (and its struck price) shows under both options: a free plan, \"Contact us\", or one price for both periods. Its notes do not: they stay first-period lines."
           },
           "periodAlt": {
             "type": "string",
             "label": "Period, other period",
             "description": "What the other price is per (\"/year\")."
+          },
+          "priceWas": {
+            "type": "string",
+            "label": "Original price",
+            "description": "The original price, struck before the price (\"$35\"; cards layout)."
+          },
+          "priceWasAlt": {
+            "type": "string",
+            "label": "Original price, other period",
+            "description": "The other period's struck original price, shown with priceAlt. No fallback: without it, the second option shows no struck price (priceWas belongs to the first period only, except on a plan with no priceAlt, whose whole price line shows under both)."
+          },
+          "priceNote": {
+            "type": "string",
+            "label": "Price note",
+            "description": "One line under the price (\"USD for the first month\"; cards layout)."
+          },
+          "priceNoteAlt": {
+            "type": "string",
+            "label": "Price note, other period",
+            "description": "The other period's line under the price, shown with priceAlt. No fallback: without it, the second option shows no line there (a note like \"for the first month\" would be wrong under the other price)."
+          },
+          "priceFoot": {
+            "type": "string",
+            "label": "Footnote",
+            "description": "One line at the card's foot, above the button (\"Pay $0 today, $35 after the first month\"; cards layout)."
+          },
+          "priceFootAlt": {
+            "type": "string",
+            "label": "Footnote, other period",
+            "description": "The other period's line at the card's foot, shown with priceAlt. No fallback: without it, the second option shows no line there."
           }
         }
       },
@@ -142,7 +172,7 @@
       "type": "string",
       "default": "Most popular",
       "content": false,
-      "description": "Badge text on featured plans."
+      "description": "Badge text on featured plans (ui-strings pricing.featured)."
     },
     "id": {
       "type": "string",
@@ -159,13 +189,13 @@
       "type": "string",
       "default": "Included",
       "content": false,
-      "description": "Table cell text for readers where a plan has the feature."
+      "description": "Table cell text for readers where a plan has the feature (ui-strings pricing.included)."
     },
     "notIncludedLabel": {
       "type": "string",
       "default": "Not included",
       "content": false,
-      "description": "Table cell text for readers where a plan lacks the feature."
+      "description": "Table cell text for readers where a plan lacks the feature (ui-strings pricing.not_included)."
     },
     "measured": {
       "type": "object",
@@ -281,19 +311,30 @@
       "type": "string",
       "default": "Monthly",
       "content": false,
-      "description": "First option of the billing toggle."
+      "description": "First option of the billing toggle (ui-strings pricing.billing_main)."
     },
     "billingAltLabel": {
       "type": "string",
       "default": "Yearly",
       "content": false,
-      "description": "Second option of the billing toggle (the plans' priceAlt)."
+      "description": "Second option of the billing toggle, the plans' priceAlt (ui-strings pricing.billing_alt)."
     },
     "billingLegend": {
       "type": "string",
       "default": "Billing period",
       "content": false,
-      "description": "Legend of the toggle, read to screen readers."
+      "description": "Legend of the toggle, read to screen readers (ui-strings pricing.billing_legend)."
+    },
+    "billingAltNote": {
+      "type": "string",
+      "label": "Second-option note",
+      "description": "A line under the billing toggle shown only while its second option is chosen (\"Save $70 by paying annually\")."
+    },
+    "wasLabel": {
+      "type": "string",
+      "default": "Was",
+      "content": false,
+      "description": "Read before a struck original price by screen readers, which do not announce the strike. 'Was' is only the kit default: the writer passes it in the site's language (ui-strings pricing.was)."
     }
   },
   "slots": {},
@@ -310,7 +351,7 @@
       "divi/et_pb_pricing_tables"
     ]
   },
-  "a11y": "Plans are a <ul>; each name is an <h3> under the section's <h2>, or an <h2> when the section has no heading. A featured plan is marked by a text badge and a ring, not colour alone. Buttons are links with their own label. The table layout is a real <table> with a caption, column and row headers, and Included / Not included text in every cell; the billing toggle is a fieldset with a legend and labelled radios.",
+  "a11y": "Plans are a <ul>; each name is an <h3> under the section's <h2>, or an <h2> when the section has no heading. A featured plan is marked by a text badge and a ring, not colour alone. Buttons are links with their own label. The table layout is a real <table> with a caption, column and row headers, and Included / Not included text in every cell; the billing toggle is a fieldset with a legend and labelled radios. A struck original price is a <del> read as \"Was <price>\" (the strike alone is not announced); the period's notes swap with its price, hidden (display: none) for the period not chosen.",
   "pattern": {
     "summary": "repeated plan units: name + price + feature list + button",
     "signals": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.43.0",
+  "version": "0.44.1",
   "license": "MIT",
   "description": "Copy-in Astro components for Contentrain sites (shadcn model): typed props, tailwind-variants, zero JavaScript by default — with a machine-readable catalog",
   "type": "module",