@contentrain/astro-kit 0.42.0 → 0.44.0

package/catalog.json

@@ -103,6 +103,7 @@
       "shared": [
         "Button.astro",
         "KitImage.astro",
+        "Lines.astro",
         "Section.astro",
         "instance-id.ts",
         "measured.ts",
@@ -146,6 +147,22 @@
           ],
           "default": "default",
           "description": "Section background when nothing is measured."
+        },
+        "headingLines": {
+          "options": [
+            "flow",
+            "lines"
+          ],
+          "default": "flow",
+          "description": "flow: the heading is one run of text. lines: each line the author broke it into (a line break, \\n, in the heading) is a block of its own, data-kit-line=\"1\", \"2\", …, so a theme or a design layer can give a line its own ink, indent or size. Still one heading, read as one sentence."
+        },
+        "leadLines": {
+          "options": [
+            "flow",
+            "lines"
+          ],
+          "default": "flow",
+          "description": "flow: the lead is one run of text. lines: each line the author broke it into (a line break, \\n, in the lead) is a block of its own, data-kit-line=\"1\", \"2\", …, so a theme or a design layer can give a line its own ink, indent or size. Still one paragraph."
         }
       },
       "props": {
@@ -2959,6 +2976,23 @@
           ],
           "default": "stack",
           "description": "Packed columns only, below the md breakpoint. stack: one column. row: still side by side from the start edge, under the brand."
+        },
+        "wordmark": {
+          "options": [
+            "none",
+            "fit",
+            "crop"
+          ],
+          "default": "none",
+          "description": "none: no wordmark. fit: the site name drawn once more as a row exactly as wide as the footer, in the heading font and the footer's ink. crop: the same row cut by the footer's bottom edge, only the letters' top showing. A name in a script letter spacing breaks (Arabic, Hebrew, Indic, Thai, …) gets none. Decoration, hidden from screen readers: the name is already the footer's brand."
+        },
+        "wordmarkOrder": {
+          "options": [
+            "last",
+            "first"
+          ],
+          "default": "last",
+          "description": "Where the wordmark row sits: after everything else in the footer (last) or before it (first). Only with a wordmark."
         }
       },
       "props": {
@@ -3130,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": [
@@ -3169,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": [
@@ -3253,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": [
@@ -3393,7 +3446,7 @@
         }
       },
       "slots": {},
-      "js": "none",
+      "js": "vanilla",
       "dependencies": {},
       "sources": {
         "gutenberg": [
@@ -3410,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",
@@ -5382,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": {
@@ -5453,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."
               }
             }
           },
@@ -5620,6 +5704,17 @@
           "default": "Billing period",
           "content": false,
           "description": "Legend of the toggle, read to screen readers."
+        },
+        "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."
         }
       },
       "slots": {},
@@ -5636,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": [
@@ -5663,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"
       }
     },
     {
@@ -7852,6 +7954,7 @@
       "uses": [],
       "shared": [
         "KitImage.astro",
+        "Lines.astro",
         "Section.astro",
         "image.ts",
         "instance-id.ts",
@@ -7924,6 +8027,14 @@
           ],
           "default": "marks",
           "description": "marks: quotation marks around the text. glyph: one large decorative mark above. none: no marks."
+        },
+        "quoteLines": {
+          "options": [
+            "flow",
+            "lines"
+          ],
+          "default": "flow",
+          "description": "flow: the quote is one run of text. lines: each line the author broke it into (a line break, \\n, in the quote) is a block of its own, data-kit-line=\"1\", \"2\", …, so a theme or a design layer can give a line its own ink, indent or size. Still one quote in one paragraph; its marks go before the first line and after the last."
         }
       },
       "props": {

package/components/band/Band.astro

@@ -4,6 +4,7 @@
 // one of the site's sections and never as bare text.
 import { tv } from 'tailwind-variants'
 import Button from '../_shared/Button.astro'
+import Lines from '../_shared/Lines.astro'
 import KitImage from '../_shared/KitImage.astro'
 import Section, { type Tone } from '../_shared/Section.astro'
 import { measuredGrid } from '../_shared/measured'
@@ -83,9 +84,13 @@ interface Props {
   tone?: Tone | undefined
   measured?: MeasuredStyle | undefined
   id?: string | undefined
+  /** `lines`: each line the author broke the heading into (`\n`) is a block of its own, `data-kit-line="1"`, `"2"`, …, for a theme to set its ink, indent or size; still one heading. `flow` (absent): one run of text, as before. */
+  headingLines?: 'flow' | 'lines' | undefined
+  /** The same for the lead: `lines` draws each of its lines as a block, still one paragraph. */
+  leadLines?: 'flow' | 'lines' | undefined
 }
 
-const { heading, eyebrow, lead, media, items = [], actions = [], headingLevel = 2, layout, columns, align, tone, measured, id } = Astro.props
+const { heading, eyebrow, lead, media, items = [], actions = [], headingLevel = 2, layout, columns, align, tone, measured, id, headingLines, leadLines } = Astro.props
 // The measured alignment when none is given (`end` has no band layout: it reads as `start`).
 const aligned = align ?? (measured?.align === 'center' ? 'center' : undefined)
 const s = band({ layout: media ? layout : 'stack', columns, align: aligned, tone })
@@ -102,8 +107,8 @@ const hasCopy = Boolean(heading || eyebrow || lead || actions.length)
         {hasCopy && (
           <div class={s.copy()}>
             {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
-            {heading && <Heading id={headingId} class={s.heading()}>{heading}</Heading>}
-            {lead && <p class={s.lead()} data-kit-text>{lead}</p>}
+            {heading && <Heading id={headingId} class={s.heading()}>{headingLines === 'lines' ? <Lines text={heading} /> : heading}</Heading>}
+            {lead && <p class={s.lead()} data-kit-text>{leadLines === 'lines' ? <Lines text={lead} /> : lead}</p>}
             {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
           </div>
         )}

package/components/band/fixtures.json

@@ -4,5 +4,6 @@
   {"name": "measured-dark-fill", "props": {"heading": "Our numbers", "align": "center", "measured": {"containerPx": 1140, "padY": 96, "padX": 24, "bg": {"color": "#0f172a"}, "columns": {"390": 1, "768": 2, "1280": 4}, "gap": 32, "radius": 8}, "items": [{"title": "12", "text": "years"}, {"title": "340", "text": "sites"}, {"title": "9", "text": "countries"}, {"title": "1", "text": "team"}], "columns": "4"}},
   {"name": "measured-image-overlay", "props": {"heading": "Visit the farm", "lead": "Open every weekend.", "actions": [{"label": "Plan a visit", "href": "/visit/"}], "measured": {"padY": 120, "minHeight": 480, "tone": "dark", "bg": {"image": "/kit-fixtures/photo-2.svg", "overlay": "rgba(0, 0, 0, 0.55)", "size": "cover", "position": "center"}}, "columns": "1"}},
   {"name": "items-links", "props": {"heading": "Services", "columns": "2", "tone": "muted", "items": [{"title": "Audits", "text": "Where a site loses readers.", "href": "/audits/", "linkLabel": "Read more", "media": "/kit-fixtures/photo-3.svg"}, {"title": "Hosting", "text": "Static hosting, managed.", "href": "/hosting/", "icon": "/kit-fixtures/logo.svg"}]}},
-  {"name": "values-points", "props": {"heading": "Plans", "columns": "3", "items": [{"value": "$9", "title": "Starter", "meta": "per month", "points": ["One site", "Email support"]}, {"value": "$29", "title": "Team", "meta": "per month", "points": ["Five sites", "Shared components"], "href": "/pricing/team/", "linkLabel": "Choose Team"}, {"value": "250+", "title": "Sites moved", "text": "Since 2019."}]}}
+  {"name": "values-points", "props": {"heading": "Plans", "columns": "3", "items": [{"value": "$9", "title": "Starter", "meta": "per month", "points": ["One site", "Email support"]}, {"value": "$29", "title": "Team", "meta": "per month", "points": ["Five sites", "Shared components"], "href": "/pricing/team/", "linkLabel": "Choose Team"}, {"value": "250+", "title": "Sites moved", "text": "Since 2019."}]}},
+  {"name": "heading-lines", "props": {"heading": "Fewer tools.\nMore writing.", "headingLines": "lines", "lead": "Your posts, pages and forms in one place.\nNothing to update, nothing to patch.", "leadLines": "lines", "actions": [{"label": "See how", "href": "/how/"}]}}
 ]

package/components/band/meta.json

@@ -7,6 +7,7 @@
   "shared": [
     "Button.astro",
     "KitImage.astro",
+    "Lines.astro",
     "Section.astro",
     "instance-id.ts",
     "measured.ts",
@@ -50,6 +51,22 @@
       ],
       "default": "default",
       "description": "Section background when nothing is measured."
+    },
+    "headingLines": {
+      "options": [
+        "flow",
+        "lines"
+      ],
+      "default": "flow",
+      "description": "flow: the heading is one run of text. lines: each line the author broke it into (a line break, \\n, in the heading) is a block of its own, data-kit-line=\"1\", \"2\", …, so a theme or a design layer can give a line its own ink, indent or size. Still one heading, read as one sentence."
+    },
+    "leadLines": {
+      "options": [
+        "flow",
+        "lines"
+      ],
+      "default": "flow",
+      "description": "flow: the lead is one run of text. lines: each line the author broke it into (a line break, \\n, in the lead) is a block of its own, data-kit-line=\"1\", \"2\", …, so a theme or a design layer can give a line its own ink, indent or size. Still one paragraph."
     }
   },
   "props": {

package/components/footer/Footer.astro

@@ -3,7 +3,7 @@
 // links and the copyright line.
 import { tv } from 'tailwind-variants'
 import type { LinkInput } from '../_shared/types'
-import { contactKeys, footerLinkSizeClasses, footerVars, type ContactInput } from './footer'
+import { contactKeys, footerLinkSizeClasses, footerVars, wordmarkBox, type ContactInput } from './footer'
 import { safeHref } from '../_shared/safe-url'
 import { muted as quiet, mutedInverse } from '../_shared/muted'
 
@@ -80,9 +80,13 @@ interface Props {
   linkSizeNarrow?: string | undefined
   /** A border on the footer's top side: absent, the default tone has one and the others do not. */
   border?: boolean | undefined
+  /** The site name drawn once more as a row as wide as the footer: `fit` whole, `crop` cut by the footer's bottom edge (only its top shows). `none` (absent): no row. Decoration, so hidden from screen readers: the name is already the footer's brand. */
+  wordmark?: 'none' | 'fit' | 'crop' | undefined
+  /** Where the wordmark row sits: after everything else (`last`, absent) or before it (`first`). */
+  wordmarkOrder?: 'last' | 'first' | undefined
 }
 
-const { siteName, tagline, columns = [], links = [], social = [], contact, copyright, consentLabel, navLabel = 'Footer', layout = 'simple', tone, align, pack, packGap, narrow, packGapNarrow, linkSize, linkSizeNarrow, border } = Astro.props
+const { siteName, tagline, columns = [], links = [], social = [], contact, copyright, consentLabel, navLabel = 'Footer', layout = 'simple', tone, align, pack, packGap, narrow, packGapNarrow, linkSize, linkSizeNarrow, border, wordmark, wordmarkOrder } = Astro.props
 const { root, inner, muted, link } = footer({ layout, tone, align, pack: layout === 'columns' ? pack : undefined, narrow: layout === 'columns' && pack === 'end' ? narrow : undefined, border: (border ?? (tone ?? 'default') === 'default') ? 'on' : 'off' })
 // Custom properties the packed columns and sized links read; none when none is set.
 const vars = footerVars({ layout, columnCount: columns.length, pack, narrow, packGap, packGapNarrow, linkSize, linkSizeNarrow })
@@ -93,9 +97,15 @@ const contactOrder = contactKeys(contact?.order)
 const line = copyright === false ? undefined : copyright?.replaceAll('{year}', year) ?? `© ${year} ${siteName}`
 // The line and the cookie settings control share one paragraph; neither: no paragraph.
 const hasBottom = Boolean(line || consentLabel)
+// The wordmark: the name set in an SVG whose text is stretched (letter spacing only) to the box's width, so it fills the
+// footer's width at every size whatever its letters are. The box is 1000 wide; the font size guesses the name's width on
+// the wide side, letter by letter, so the stretch only adds space. `crop` ends the box halfway up the letters: they run
+// over its bottom edge and are cut there. A name in a script letter spacing breaks (Arabic, Indic, …) gets none.
+const mark = wordmark === 'fit' || wordmark === 'crop' ? wordmarkBox(siteName, wordmark) : undefined
 ---
 <!-- The cookie settings control is a button, not a link: the Consent component's listener reopens its bar on any [data-kit-consent-open]. -->
 <footer class={root()}>
+  {mark && wordmarkOrder === 'first' && <div class="container-page pt-10" data-kit-wordmark><svg viewBox={`0 0 1000 ${mark.height}`} class="block h-auto w-full fill-current" aria-hidden="true" focusable="false"><text x="0" y={mark.baseline} textLength="1000" lengthAdjust="spacing" font-size={mark.size} class="[font-family:var(--font-heading,inherit)] [font-weight:var(--font-weight-heading,700)]">{siteName}</text></svg></div>}
   <div class:list={[inner(), ...footerLinkSizeClasses({ linkSize, linkSizeNarrow })]} data-kit-footer style={vars || undefined}>
     <div class="flex flex-col gap-3">
       <p class="text-base font-semibold" data-kit-brand>{siteName}</p>
@@ -144,4 +154,5 @@ const hasBottom = Boolean(line || consentLabel)
       </ul>
     )}
   </div>
+  {mark && wordmarkOrder !== 'first' && <div class="container-page" data-kit-wordmark><svg viewBox={`0 0 1000 ${mark.height}`} class="block h-auto w-full fill-current" aria-hidden="true" focusable="false"><text x="0" y={mark.baseline} textLength="1000" lengthAdjust="spacing" font-size={mark.size} class="[font-family:var(--font-heading,inherit)] [font-weight:var(--font-weight-heading,700)]">{siteName}</text></svg></div>}
 </footer>

package/components/footer/fixtures.json

@@ -8,5 +8,11 @@
   { "name": "columns-end-row", "props": { "siteName": "Golden Works", "layout": "columns", "pack": "end", "narrow": "row", "packGap": "128px", "packGapNarrow": "48px", "linkSize": "17.88px", "copyright": "© 2026 Golden Works", "columns": [{ "label": "Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Work", "href": "/work/" }] }, { "label": "Contact", "links": [{ "label": "Email", "href": "mailto:hello@example.com" }] }] } },
   { "name": "columns-end-row-narrow-size", "props": { "siteName": "Golden Works", "layout": "columns", "pack": "end", "narrow": "row", "packGap": "128px", "packGapNarrow": "48px", "linkSize": "17.88px", "linkSizeNarrow": "16.4px", "copyright": "© 2026 Golden Works", "columns": [{ "label": "Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Work", "href": "/work/" }] }, { "label": "Contact", "links": [{ "label": "Email", "href": "mailto:hello@example.com" }] }] } },
   { "name": "columns-end-row-long-brand", "props": { "siteName": "Golden Works Engineering Consultancy", "tagline": "Websites, systems and signalling for the people who keep cities moving every single day", "layout": "columns", "pack": "end", "narrow": "row", "packGap": "128px", "packGapNarrow": "70px", "linkSize": "17.88px", "linkSizeNarrow": "16.14px", "copyright": "© 2026 Golden Works Engineering Consultancy, all rights reserved", "columns": [{ "label": "Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Work", "href": "/work/" }] }, { "label": "Contact", "links": [{ "label": "Email", "href": "mailto:hello@example.com" }] }] } },
-  { "name": "contact-labels", "props": { "siteName": "Private Sigorta", "tagline": "Private Sigorta, yenilikçi yönetim ve ileri teknolojiyi geçmişin tecrübeleriyle birleştiren bir acentedir. Web Tasarım: Farkol Digital", "contact": { "address": "G.O.P. Mah. Barbaros Cad. No: 2 D: 403 Çerkezköy/Tekirdağ", "phone": "+90 (282) 725 1400", "email": "info@privatesigorta.com.tr", "labels": { "email": "Email:", "phone": "Telefon:" }, "order": ["email", "phone", "address"] }, "links": [{ "label": "Hakkımızda", "href": "/hakkimizda/" }, { "label": "İletişim", "href": "/iletisim/" }] } }
+  { "name": "contact-labels", "props": { "siteName": "Private Sigorta", "tagline": "Private Sigorta, yenilikçi yönetim ve ileri teknolojiyi geçmişin tecrübeleriyle birleştiren bir acentedir. Web Tasarım: Farkol Digital", "contact": { "address": "G.O.P. Mah. Barbaros Cad. No: 2 D: 403 Çerkezköy/Tekirdağ", "phone": "+90 (282) 725 1400", "email": "info@privatesigorta.com.tr", "labels": { "email": "Email:", "phone": "Telefon:" }, "order": ["email", "phone", "address"] }, "links": [{ "label": "Hakkımızda", "href": "/hakkimizda/" }, { "label": "İletişim", "href": "/iletisim/" }] } },
+  { "name": "wordmark-fit", "props": { "siteName": "Northwind Studio", "wordmark": "fit", "copyright": "© 2026 Northwind Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Privacy", "href": "/privacy/" }] } },
+  { "name": "wordmark-crop-inverse", "props": { "siteName": "Northwind", "wordmark": "crop", "tone": "inverse", "tagline": "Calm, fast websites for teams who write.", "layout": "columns", "copyright": "© 2026 Northwind Studio", "columns": [{ "title": "Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Team", "href": "/about/team/" }] }, { "title": "Help", "links": [{ "label": "Contact", "href": "/contact/" }] }] } },
+  { "name": "wordmark-first-muted", "props": { "siteName": "Lumen & Pine", "wordmark": "fit", "wordmarkOrder": "first", "tone": "muted", "copyright": "© 2026 Lumen & Pine", "links": [{ "label": "Journal", "href": "/journal/" }] } },
+  { "name": "wordmark-upper", "props": { "siteName": "NORTHWIND STUDIO", "wordmark": "fit", "copyright": "© 2026 Northwind Studio", "links": [{ "label": "About", "href": "/about/" }] } },
+  { "name": "wordmark-ja", "props": { "siteName": "北風スタジオ", "wordmark": "fit", "tone": "muted", "copyright": "© 2026 北風スタジオ", "navLabel": "フッター", "links": [{ "label": "会社概要", "href": "/about/" }] } },
+  { "name": "wordmark-ar", "props": { "siteName": "استوديو الشمال", "wordmark": "fit", "copyright": "© 2026 استوديو الشمال", "navLabel": "التذييل", "links": [{ "label": "من نحن", "href": "/about/" }] } }
 ]

package/components/footer/footer.ts

@@ -51,3 +51,40 @@ export function footerLinkSizeClasses(i: Pick<FooterVarsInput, 'linkSize' | 'lin
     i.linkSizeNarrow ? 'max-md:[&_nav_a]:text-[length:var(--footer-link-size-narrow)]' : '',
   ].filter(Boolean)
 }
+
+/**
+ * Scripts that letter spacing breaks: joined (Arabic, Syriac, Thaana, N'Ko, Mongolian), set without it (Hebrew), or
+ * built of clusters it splits (Indic and Southeast Asian), the same set the starter's stylesheet takes tracking from.
+ * The wordmark is stretched by letter spacing, so a name in one of them gets none.
+ */
+const UNSPACED = /[\p{Script=Arabic}\p{Script=Syriac}\p{Script=Thaana}\p{Script=Nko}\p{Script=Mongolian}\p{Script=Hebrew}\p{Script=Devanagari}\p{Script=Bengali}\p{Script=Gurmukhi}\p{Script=Gujarati}\p{Script=Oriya}\p{Script=Tamil}\p{Script=Telugu}\p{Script=Kannada}\p{Script=Malayalam}\p{Script=Sinhala}\p{Script=Thai}\p{Script=Lao}\p{Script=Khmer}\p{Script=Myanmar}\p{Script=Tibetan}]/u
+/** Full-width letters: CJK ideographs, kana, hangul and the full-width forms. */
+const FULL = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}\u3000-\u303F\uFF00-\uFFEF]/u
+
+/**
+ * A letter's width in em, guessed on the wide side for a bold heading face: the name's natural width then stays at or
+ * under the box, so the stretch only ever adds letter spacing and never draws letters over each other.
+ */
+function letterWidth(letter: string): number {
+  if (FULL.test(letter)) return 1.05
+  if (/\s/u.test(letter)) return 0.3
+  if (/[MWmw@&%]/u.test(letter)) return 1
+  if (/[\p{Lu}\p{N}]/u.test(letter)) return 0.8
+  if (/\p{L}/u.test(letter)) return 0.65
+  return 0.45
+}
+
+/**
+ * The wordmark's SVG box (1000 wide) for a site name, or none for a name letter spacing would break. The font size makes
+ * the name's guessed width 1000 (its text is then stretched to exactly 1000 by letter spacing); the baseline sits under
+ * the tallest letters (lower for full-width ones, which rise higher), and `fit` keeps room for descenders under it while
+ * `crop` ends the box halfway up the letters, so the footer cuts them.
+ */
+export function wordmarkBox(name: string, mode: 'fit' | 'crop'): { size: number, baseline: number, height: number } | undefined {
+  const letters = [...name.trim()]
+  if (letters.length === 0 || UNSPACED.test(name)) return undefined
+  const size = Math.floor(1000 / letters.reduce((sum, letter) => sum + letterWidth(letter), 0))
+  const rise = letters.some(letter => FULL.test(letter)) ? 0.88 : 0.78
+  const baseline = Math.round(size * rise)
+  return { size, baseline, height: mode === 'fit' ? Math.round(size * (rise + 0.22)) : Math.round(size * (rise - 0.36)) }
+}

package/components/footer/meta.json

@@ -50,6 +50,23 @@
       ],
       "default": "stack",
       "description": "Packed columns only, below the md breakpoint. stack: one column. row: still side by side from the start edge, under the brand."
+    },
+    "wordmark": {
+      "options": [
+        "none",
+        "fit",
+        "crop"
+      ],
+      "default": "none",
+      "description": "none: no wordmark. fit: the site name drawn once more as a row exactly as wide as the footer, in the heading font and the footer's ink. crop: the same row cut by the footer's bottom edge, only the letters' top showing. A name in a script letter spacing breaks (Arabic, Hebrew, Indic, Thai, …) gets none. Decoration, hidden from screen readers: the name is already the footer's brand."
+    },
+    "wordmarkOrder": {
+      "options": [
+        "last",
+        "first"
+      ],
+      "default": "last",
+      "description": "Where the wordmark row sits: after everything else in the footer (last) or before it (first). Only with a wordmark."
     }
   },
   "props": {

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/hero/fixtures.json

@@ -247,5 +247,6 @@
   {"name": "centered-media-first-edge", "props": {"layout": "centered", "heading": "Your site, moved and checked", "lead": "Every page, address and form carried over.", "stackOrder": "media-first", "imageBleed": "edge", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "A desk by a window", "width": 1200, "height": 800}}},
   {"name": "split-overlap", "props": {"heading": "Your site, moved and checked", "lead": "Every page, address and form carried over.", "imageBleed": "overlap", "tone": "muted", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "A desk by a window", "width": 1200, "height": 800}}},
   {"name": "centered-media-first-overlap", "props": {"layout": "centered", "heading": "Your site, moved and checked", "lead": "Every page, address and form carried over.", "stackOrder": "media-first", "imageBleed": "overlap", "tone": "muted", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "A desk by a window", "width": 1200, "height": 800}}},
-  {"name": "split-media-first-overlap", "props": {"heading": "Your site, moved and checked", "lead": "Every page, address and form carried over.", "stackOrder": "media-first", "imageBleed": "overlap", "tone": "muted", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "A desk by a window", "width": 1200, "height": 800}}}
+  {"name": "split-media-first-overlap", "props": {"heading": "Your site, moved and checked", "lead": "Every page, address and form carried over.", "stackOrder": "media-first", "imageBleed": "overlap", "tone": "muted", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "A desk by a window", "width": 1200, "height": 800}}},
+  {"name": "heading-hooks", "theme": {"--font-heading": "var(--font-serif)", "--tracking-heading": "0.04em"}, "props": {"layout": "centered", "eyebrow": "A design direction", "heading": "Headings in a face of their own", "lead": "The heading face and track come from the theme; the lead keeps the body face."}}
 ]

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."
           }
         }
       },
@@ -294,6 +324,17 @@
       "default": "Billing period",
       "content": false,
       "description": "Legend of the toggle, read to screen readers."
+    },
+    "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."
     }
   },
   "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/components/testimonial/Testimonial.astro

@@ -4,6 +4,7 @@
 // slider's job; this one shows them all.
 import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
+import Lines from '../_shared/Lines.astro'
 import Section from '../_shared/Section.astro'
 import { instanceId } from '../_shared/instance-id'
 import { imageOf, type ImageSource } from '../_shared/image'
@@ -89,9 +90,11 @@ interface Props {
   measured?: MeasuredStyle | undefined
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
   id?: string | undefined
+  /** `lines`: each line the author broke a quote into (`\n`) is a block of its own, `data-kit-line="1"`, `"2"`, …, for a theme to set its ink, indent or size; still one quote in one paragraph, its marks before the first line and after the last. `flow` (absent): as before. */
+  quoteLines?: 'flow' | 'lines' | undefined
 }
 
-const { items, heading, layout, quoteSize, frame, avatarSize, avatarPlace, quoteMark = 'marks', ratingLabel = '{rating} out of 5 stars', label = 'Testimonials', tone, measured, id: givenId } = Astro.props
+const { items, heading, layout, quoteSize, frame, avatarSize, avatarPlace, quoteMark = 'marks', ratingLabel = '{rating} out of 5 stars', label = 'Testimonials', tone, measured, id: givenId, quoteLines } = Astro.props
 // Every section has an id, so a theme or a design layer can address this one: the page's, or `testimonial`, `testimonial-2`, … in render order.
 const id = instanceId(Astro.locals, givenId, 'testimonial')
 const s = testimonial({ layout, quoteSize, frame, avatarSize, avatarPlace, quoteMark, tone })
@@ -99,6 +102,8 @@ const headingId = heading ? `${id}-title` : undefined
 // Two quotes share the row: a third column would stand empty beside them and narrow both (IP-4 elementor launch G9).
 const measuredList = (layout ?? 'grid') === 'grid' ? measuredGrid(measured) : undefined
 const list = s.list({ class: measuredList ?? (items.length === 2 && (layout ?? 'grid') === 'grid' ? 'lg:grid-cols-2' : undefined) })
+// A quote drawn as lines: asked for, and broken into more than one (one line prints as it is).
+const lined = (text: string) => quoteLines === 'lines' && text.split('\n').filter(line => line.trim()).length > 1
 // The quotation marks are drawn, not written: the quote's text is the source's words, read once. A quote the source
 // already wrote inside marks keeps its own.
 const quoted = (text: string) => /^\s*["'“‘„«‹「『]/.test(text)
@@ -127,7 +132,10 @@ const scrolls = layout === 'row'
               </span>
             )}
             {quoteMark === 'glyph' && <span class:list={[s.glyph(), "before:content-['“']"]} aria-hidden="true"></span>}
-            <blockquote class={s.quote()}><p class:list={[quoteMark === 'marks' && !quoted(item.quote) && "before:content-[open-quote] after:content-[close-quote]"]}>{item.quote}</p></blockquote>
+            <blockquote class={s.quote()}>{lined(item.quote)
+              // Lines are blocks: the marks go on the first and the last, or the opening one would stand on a line of its own.
+              ? <p class:list={[quoteMark === 'marks' && !quoted(item.quote) && "[&>[data-kit-line]:first-of-type]:before:content-[open-quote] [&>[data-kit-line]:last-of-type]:after:content-[close-quote]"]}><Lines text={item.quote} /></p>
+              : <p class:list={[quoteMark === 'marks' && !quoted(item.quote) && "before:content-[open-quote] after:content-[close-quote]"]}>{item.quote}</p>}</blockquote>
             <figcaption class={s.person()}>
               {avatar && avatarPlace !== 'top' && <KitImage image={avatar} sizes="64px" class={s.avatar()} />}
               <span class="flex flex-col text-start">

package/components/testimonial/fixtures.json

@@ -119,5 +119,6 @@
         "tone": "light"
       }
     }
-  }
+  },
+  { "name": "single-quote-lines", "props": { "layout": "single", "quoteLines": "lines", "items": [{ "quote": "We moved on a Friday.\nOn Monday nobody noticed —\nexcept that the site was fast.", "name": "Ada Lindqvist", "role": "Editor, Northwind Journal" }] } }
 ]

package/components/testimonial/meta.json

@@ -6,6 +6,7 @@
   "uses": [],
   "shared": [
     "KitImage.astro",
+    "Lines.astro",
     "Section.astro",
     "image.ts",
     "instance-id.ts",
@@ -78,6 +79,14 @@
       ],
       "default": "marks",
       "description": "marks: quotation marks around the text. glyph: one large decorative mark above. none: no marks."
+    },
+    "quoteLines": {
+      "options": [
+        "flow",
+        "lines"
+      ],
+      "default": "flow",
+      "description": "flow: the quote is one run of text. lines: each line the author broke it into (a line break, \\n, in the quote) is a block of its own, data-kit-line=\"1\", \"2\", …, so a theme or a design layer can give a line its own ink, indent or size. Still one quote in one paragraph; its marks go before the first line and after the last."
     }
   },
   "props": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "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",
@@ -42,7 +42,7 @@
     "mapping"
   ],
   "dependencies": {
-    "@contentrain/types": "1.64.0"
+    "@contentrain/types": "1.65.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",