@contentrain/astro-kit 0.41.0 → 0.43.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": {
@@ -785,6 +802,14 @@
           "default": "start",
           "description": "Text alignment inside cards and of the header."
         },
+        "layout": {
+          "options": [
+            "grid",
+            "rows"
+          ],
+          "default": "grid",
+          "description": "Cards in a grid, or one item per row: title, text and link on one axis, a hairline between rows, no card box (columns and style do not apply)."
+        },
         "tone": {
           "options": [
             "default",
@@ -859,6 +884,12 @@
           },
           "description": "The cards. image is an ImageInput ({ src, alt, width?, height? })."
         },
+        "index": {
+          "type": "boolean",
+          "default": false,
+          "content": false,
+          "description": "With layout rows: a numbered list, each row led by its number (01, 02, …) in the muted role."
+        },
         "headingLevel": {
           "type": "integer",
           "min": 2,
@@ -2945,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": {
@@ -3652,7 +3700,9 @@
       "shared": [
         "Button.astro",
         "KitImage.astro",
+        "Lines.astro",
         "Section.astro",
+        "bleed.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -3727,6 +3777,31 @@
           ],
           "default": "own",
           "description": "The level whose site size the heading takes when it is not the level it is written at: h1 on an h2 heading keeps a source's second h1 at the h1 size under a page that keeps one h1. own: the heading's own level under headingScale theme, nothing otherwise. Any other value than own sets the size by itself."
+        },
+        "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."
+        },
+        "stackOrder": {
+          "options": [
+            "text-first",
+            "media-first"
+          ],
+          "default": "text-first",
+          "description": "Split and centered: the image before the text, on phones and on the start side (split), or above the heading (centered). A cover ignores it."
+        },
+        "imageBleed": {
+          "options": [
+            "none",
+            "edge",
+            "overlap"
+          ],
+          "default": "none",
+          "description": "Split and centered: edge runs the image on to the window's edge on its side (both sides when centered); overlap also lets it cross the section's bottom edge by --hero-overlap (3rem), over the next section's top padding, when the image comes last: with stackOrder media-first it draws as edge, so it never covers the text. A cover ignores it."
         }
       },
       "props": {
@@ -6256,6 +6331,7 @@
         "Button.astro",
         "KitImage.astro",
         "Section.astro",
+        "bleed.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -6292,10 +6368,13 @@
           "options": [
             "none",
             "rounded",
-            "circle"
+            "circle",
+            "arch",
+            "chamfer",
+            "blob"
           ],
           "default": "rounded",
-          "description": "The image's corners: square, the theme's rounding, or a circle."
+          "description": "The image's outline: square, the theme's rounding, a circle, or a fixed mask: an arch over the image, a cut corner (chamfer), a soft blob."
         },
         "imageBleed": {
           "options": [
@@ -7807,6 +7886,7 @@
       "uses": [],
       "shared": [
         "KitImage.astro",
+        "Lines.astro",
         "Section.astro",
         "image.ts",
         "instance-id.ts",
@@ -7879,6 +7959,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/_shared/Lines.astro

@@ -0,0 +1,12 @@
+---
+// Text the author broke into lines (`\n`), one block per line, each marked `data-kit-line="<n>"` so a theme or a
+// design layer can give a line its own ink, indent or size. The lines stay one text: a heading made of them is
+// still one heading, read as one sentence (a space between the blocks keeps the words apart when it is read out).
+// Without a line break the text is printed as it is.
+interface Props {
+  text: string
+}
+
+const lines = Astro.props.text.split('\n').map(line => line.trim()).filter(Boolean)
+---
+{lines.length > 1 ? lines.map((line, i) => <>{i > 0 && ' '}<span class="block" data-kit-line={i + 1}>{line}</span></>) : Astro.props.text}

package/components/_shared/bleed.ts

@@ -0,0 +1,8 @@
+// The viewport's edge, from the content's edge: what the page frame leaves of the window, halved, plus the frame's own
+// gutter (`container-page` caps its width with the gutter inside it). A section whose image runs on to the window's
+// edge (Split, Hero `imageBleed`) pulls it out by this much on its side, on wide screens. Literal class names, so the
+// stylesheet builder sees them.
+export const BLEED = {
+  end: 'md:-me-[calc((100vw-min(var(--container-page)+2*var(--container-inset,0px),100vw))/2+var(--spacing-gutter,2rem))]',
+  start: 'md:-ms-[calc((100vw-min(var(--container-page)+2*var(--container-inset,0px),100vw))/2+var(--spacing-gutter,2rem))]',
+} as const

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/card-grid/CardGrid.astro

@@ -35,6 +35,29 @@ const grid = tv({
   defaultVariants: { columns: '3', style: 'plain', align: 'start' },
 })
 
+// `layout: 'rows'`: one item per row, its title, text and link on one axis (an image sits at the row's top, out of the
+// baseline: a head led by an icon too, else the icon's foot would be the baseline and push the text down by its
+// height), a hairline between rows and no card box.
+// With `index`, a numbered list whose numbers (01, 02, …) are drawn in the muted role, tabular; the list itself
+// carries the order for screen readers, so the drawn number is hidden from them.
+const rows = tv({
+  slots: {
+    list: 'flex flex-col divide-y divide-line border-y border-line',
+    row: 'group relative grid gap-x-8 gap-y-2 py-6 md:items-baseline',
+    number: `text-sm tabular-nums ${muted}`,
+    head: 'flex flex-col gap-2',
+    end: 'flex flex-col gap-3 md:items-end',
+    media: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))] md:w-48',
+    title: 'text-lg leading-snug [font-weight:var(--font-weight-heading,600)] text-balance',
+    text: muted,
+    link: 'font-medium text-accent-text underline-offset-4 hover:underline',
+  },
+  variants: {
+    index: { true: { row: 'md:grid-cols-[3rem_minmax(0,1fr)_minmax(0,2fr)_auto]' }, false: { row: 'md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto]' } },
+  },
+  defaultVariants: { index: false },
+})
+
 interface Item {
   title: string
   text?: string | undefined
@@ -56,6 +79,10 @@ interface Props {
   /** Heading level of the section title; card titles are one level below, or at this level when there is no title. */
   headingLevel?: 2 | 3 | undefined
   columns?: '2' | '3' | '4' | undefined
+  /** `rows`: one item per row (title, text and link on one axis, a hairline between rows, no card box); `columns`, `style` and the measured columns do not apply. `grid` (absent): cards, as before. */
+  layout?: 'grid' | 'rows' | undefined
+  /** With `layout: 'rows'`: a numbered list, each row led by its number (01, 02, …) in the muted role. */
+  index?: boolean | undefined
   style?: 'plain' | 'bordered' | 'elevated' | undefined
   align?: 'start' | 'center' | undefined
   tone?: Tone | undefined
@@ -65,7 +92,7 @@ interface Props {
   id?: string | undefined
 }
 
-const { title, intro, items, headingLevel = 2, columns, style, align, tone, measured, id: givenId } = Astro.props
+const { title, intro, items, headingLevel = 2, columns, style, align, tone, measured, id: givenId, layout, index = false } = Astro.props
 // Every section has an id, so a theme or a design layer can address this one: the page's, or `card-grid`, `card-grid-2`, … in render order.
 const id = instanceId(Astro.locals, givenId, 'card-grid')
 const { list, card, media, title: cardTitle, text } = grid({ columns, style, align })
@@ -73,6 +100,9 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3'
 // One level under the section title, or the title's level when there is none.
 const CardHeading = `h${title ? headingLevel + 1 : headingLevel}` as 'h2' | 'h3' | 'h4'
 const headingId = title ? `${id}-title` : undefined
+const r = rows({ index })
+const List = index ? 'ol' : 'ul'
+const number = (i: number) => String(i + 1).padStart(2, '0')
 ---
 <Section kit="card-grid" measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
   {(title || intro) && (
@@ -81,20 +111,46 @@ const headingId = title ? `${id}-title` : undefined
       {intro && <p class:list={['text-lg', muted]}>{intro}</p>}
     </header>
   )}
-  <ul class={list({ class: measuredGrid(measured) })}>
-    {items.map(item => (
-      <li class={card()}>
-        {imageOf(item.image, item.imageAlt) && <div class={media()}><KitImage image={imageOf(item.image, item.imageAlt)!} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover transition duration-300 group-hover:scale-[1.02]" /></div>}
-        {item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-10 w-10 object-contain" />}
-        {item.eyebrow && <p class="text-sm font-medium text-accent-text">{item.eyebrow}</p>}
-        <CardHeading class={cardTitle()}>
-          {item.href && !item.linkLabel
-            ? <a href={safeHref(item.href)} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{item.title}</a>
-            : item.title}
-        </CardHeading>
-        {item.text && <p class={text()} data-kit-text>{item.text}</p>}
-        {item.href && item.linkLabel && <a href={safeHref(item.href)} class="font-medium text-accent-text underline-offset-4 hover:underline">{item.linkLabel}</a>}
-      </li>
-    ))}
-  </ul>
+  {layout === 'rows' ? (
+    <List class={r.list()} role="list">
+      {items.map((item, i) => (
+        <li class={r.row()}>
+          {index && <span class={r.number()} aria-hidden="true">{number(i)}</span>}
+          <div class={r.head({ class: item.icon ? 'md:self-start' : undefined })}>
+            {item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-8 w-8 object-contain" />}
+            {item.eyebrow && <p class="text-sm font-medium text-accent-text">{item.eyebrow}</p>}
+            <CardHeading class={r.title()}>
+              {item.href && !item.linkLabel
+                ? <a href={safeHref(item.href)} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{item.title}</a>
+                : item.title}
+            </CardHeading>
+          </div>
+          {item.text ? <p class={r.text()} data-kit-text>{item.text}</p> : <span aria-hidden="true" />}
+          {(imageOf(item.image, item.imageAlt) || (item.href && item.linkLabel)) && (
+            <div class={r.end({ class: imageOf(item.image, item.imageAlt) ? 'md:self-start' : undefined })}>
+              {imageOf(item.image, item.imageAlt) && <div class={r.media()}><KitImage image={imageOf(item.image, item.imageAlt)!} sizes="(min-width: 768px) 12rem, 100vw" class="aspect-[3/2] w-full object-cover" /></div>}
+              {item.href && item.linkLabel && <a href={safeHref(item.href)} class={r.link()}>{item.linkLabel}</a>}
+            </div>
+          )}
+        </li>
+      ))}
+    </List>
+  ) : (
+    <ul class={list({ class: measuredGrid(measured) })}>
+      {items.map(item => (
+        <li class={card()}>
+          {imageOf(item.image, item.imageAlt) && <div class={media()}><KitImage image={imageOf(item.image, item.imageAlt)!} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover transition duration-300 group-hover:scale-[1.02]" /></div>}
+          {item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-10 w-10 object-contain" />}
+          {item.eyebrow && <p class="text-sm font-medium text-accent-text">{item.eyebrow}</p>}
+          <CardHeading class={cardTitle()}>
+            {item.href && !item.linkLabel
+              ? <a href={safeHref(item.href)} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{item.title}</a>
+              : item.title}
+          </CardHeading>
+          {item.text && <p class={text()} data-kit-text>{item.text}</p>}
+          {item.href && item.linkLabel && <a href={safeHref(item.href)} class="font-medium text-accent-text underline-offset-4 hover:underline">{item.linkLabel}</a>}
+        </li>
+      ))}
+    </ul>
+  )}
 </Section>

package/components/card-grid/fixtures.json

@@ -5,5 +5,8 @@
   { "name": "accent", "props": { "tone": "accent", "columns": "3", "items": [{ "title": "Fast", "text": "Static HTML, one stylesheet." }, { "title": "Editable", "text": "Content in Contentrain Studio." }, { "title": "Kept", "text": "Every address survives." }] } },
   {"name": "measured-columns", "props": {"title": "Services", "measured": {"containerPx": 1140, "padY": 80, "columns": {"390": 1, "768": 2, "1280": 4}, "gap": 30, "radius": 4, "bg": {"color": "#f4f1ea"}}, "items": [{"title": "Audits", "text": "Where a site loses readers."}, {"title": "Builds", "text": "Static and fast."}, {"title": "Hosting", "text": "Managed for you."}, {"title": "Care", "text": "Kept up to date."}]}},
   {"name": "icon-boxes", "props": {"columns": "3", "align": "center", "items": [{"title": "Design", "text": "Layouts built around your products.", "icon": "/kit-fixtures/icon-1.svg"}, {"title": "Build", "text": "Fast pages that stay fast.", "icon": "/kit-fixtures/icon-1.svg"}, {"title": "Grow", "text": "Monthly reports you can read in five minutes.", "icon": "/kit-fixtures/icon-1.svg"}]}},
-  {"name": "link-labels", "props": {"columns": "4", "align": "center", "items": [{"title": "Kasko", "href": "/urunlerimiz/kasko/", "linkLabel": "Teklif Al"}, {"title": "Trafik Sigortası", "href": "/urunlerimiz/trafik-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Konut Sigortası", "href": "/urunlerimiz/konut-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Tamamlayıcı Sağlık"}]}}
+  {"name": "link-labels", "props": {"columns": "4", "align": "center", "items": [{"title": "Kasko", "href": "/urunlerimiz/kasko/", "linkLabel": "Teklif Al"}, {"title": "Trafik Sigortası", "href": "/urunlerimiz/trafik-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Konut Sigortası", "href": "/urunlerimiz/konut-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Tamamlayıcı Sağlık"}]}},
+  {"name": "rows-index", "props": {"layout": "rows", "index": true, "title": "How it works", "intro": "Three steps, in this order.", "items": [{"title": "Discovery", "text": "We read every page of the site you have, and write down what it holds.", "href": "/how/discovery/"}, {"title": "An offer", "text": "One price for the whole move, with what it includes and what it leaves out.", "href": "/how/offer/"}, {"title": "The move", "text": "Content, addresses and forms carried over, each one checked against the original.", "href": "/how/move/"}]}},
+  {"name": "rows-links-muted", "props": {"layout": "rows", "tone": "muted", "title": "What we do", "items": [{"eyebrow": "Studio", "title": "Design systems", "text": "Tokens, components and documentation your team keeps using.", "href": "/services/design/", "linkLabel": "Read more", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "", "width": 1200, "height": 800}}, {"eyebrow": "Studio", "title": "Migrations", "text": "WordPress to Astro without losing an address or a ranking.", "href": "/services/migrations/", "linkLabel": "Read more", "image": {"src": "/kit-fixtures/photo-2.svg", "alt": "", "width": 1200, "height": 800}}, {"eyebrow": "Studio", "title": "Performance", "href": "/services/performance/", "linkLabel": "Read more"}]}},
+  {"name": "rows-icons", "props": {"layout": "rows", "title": "What the move keeps", "items": [{"icon": "/kit-fixtures/icon-1.svg", "title": "Addresses", "text": "Every old address answers, or sends the visitor to its new one.", "href": "/keeps/addresses/"}, {"icon": "/kit-fixtures/icon-1.svg", "eyebrow": "Forms", "title": "Contact forms", "text": "Each form posts where it did, with the same fields.", "href": "/keeps/forms/", "linkLabel": "How"}, {"title": "Rankings", "text": "Titles, descriptions and structured data carried over as they were."}]}}
 ]

package/components/card-grid/meta.json

@@ -41,6 +41,14 @@
       "default": "start",
       "description": "Text alignment inside cards and of the header."
     },
+    "layout": {
+      "options": [
+        "grid",
+        "rows"
+      ],
+      "default": "grid",
+      "description": "Cards in a grid, or one item per row: title, text and link on one axis, a hairline between rows, no card box (columns and style do not apply)."
+    },
     "tone": {
       "options": [
         "default",
@@ -115,6 +123,12 @@
       },
       "description": "The cards. image is an ImageInput ({ src, alt, width?, height? })."
     },
+    "index": {
+      "type": "boolean",
+      "default": false,
+      "content": false,
+      "description": "With layout rows: a numbered list, each row led by its number (01, 02, …) in the muted role."
+    },
     "headingLevel": {
       "type": "integer",
       "min": 2,

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/hero/Hero.astro

@@ -5,11 +5,13 @@ import { tv } from 'tailwind-variants'
 import Button from '../_shared/Button.astro'
 import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
+import Lines from '../_shared/Lines.astro'
 import { instanceId } from '../_shared/instance-id'
 import type { ActionInput, ImageInput, MeasuredStyle } from '../_shared/types'
 import { measuredFrame } from '../_shared/measured'
 import { coverHeight as heightOf, headingStyle as styleOf } from './hero'
 import { muted, mutedInverse } from '../_shared/muted'
+import { BLEED } from '../_shared/bleed'
 
 const hero = tv({
   slots: {
@@ -47,6 +49,18 @@ const hero = tv({
     headingScale: { default: {}, theme: {} },
     // The level whose site size the heading takes when it is not the level it is written at (set inline, see ./hero).
     headingSize: { own: {}, h1: {}, h2: {} },
+    // The heading as the author broke it: `lines` prints each `\n`-separated line as its own block (`data-kit-line`),
+    // `flow` (the default) as one run of text.
+    headingLines: { flow: {}, lines: {} },
+    // Split and centered (a cover ignores both): the image before the text, on phones and on the start side (split),
+    // or above the heading (centered).
+    stackOrder: { 'text-first': {}, 'media-first': { media: 'order-first' } },
+    // edge: the image runs on to the window's edge on its side (wide screens), or across the whole width when centered.
+    // overlap: it also crosses the section's bottom edge by `--hero-overlap` (3rem), drawn over the next section's top
+    // padding: set at the grid's bottom and moved past the hero's own bottom padding (`spacing="lg"`: 4rem, 7rem from md),
+    // not laid out there, so the next section stays where it was. Only an image that comes last can cross the bottom: one
+    // that comes first (`media-first`) would be moved down over the text, so there overlap draws as edge.
+    imageBleed: { none: {}, edge: { media: 'rounded-none' }, overlap: { media: 'relative z-10 self-end translate-y-[calc(4rem+var(--hero-overlap,3rem))] rounded-none md:translate-y-[calc(7rem+var(--hero-overlap,3rem))]' } },
   },
   compoundVariants: [
     // After the layout's own heights, so a boxed cover keeps WordPress's 430px default.
@@ -56,7 +70,7 @@ const hero = tv({
     { leadAlign: 'start', class: { lead: 'mx-0 max-w-none self-stretch text-start' } },
     { actionsAlign: 'start', class: { actions: 'justify-start self-stretch' } },
   ],
-  defaultVariants: { layout: 'split', tone: 'default', align: 'center', leadAlign: 'inherit', actionsAlign: 'inherit', width: 'full', headingScale: 'default', headingSize: 'own' },
+  defaultVariants: { layout: 'split', tone: 'default', align: 'center', leadAlign: 'inherit', actionsAlign: 'inherit', width: 'full', headingScale: 'default', headingSize: 'own', headingLines: 'flow', stackOrder: 'text-first', imageBleed: 'none' },
 })
 
 interface Props {
@@ -86,15 +100,23 @@ interface Props {
   headingScale?: 'default' | 'theme' | undefined
   /** The level whose site size the heading takes, when it is not the level it is written at (`h1` size on an `h2`: a page keeps one `h1`). `own` (absent): the heading's own level under `theme`, as before. */
   headingSize?: 'own' | 'h1' | 'h2' | undefined
+  /** `lines`: each line of the heading (split at `\n`) is a block of its own, `data-kit-line="<n>"`, for a theme to set per line. `flow` (absent): one run of text, as before. */
+  headingLines?: 'flow' | 'lines' | undefined
+  /** Split and centered: `media-first` puts the image before the text (phones and the start side in split, above the heading in centered). `text-first` (absent): as before. */
+  stackOrder?: 'text-first' | 'media-first' | undefined
+  /** Split and centered: `edge` runs the image on to the window's edge on its side (both sides when centered); `overlap` also lets it cross the section's bottom edge by `--hero-overlap` (3rem), when the image comes last (with `media-first` it draws as `edge`). `none` (absent): as before. */
+  imageBleed?: 'none' | 'edge' | 'overlap' | 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
 }
 
 
-const { heading, level = 1, eyebrow, lead, items = [], actions = [], image, layout = 'split', align, leadAlign, actionsAlign, width = 'full', tone, id: givenId, minHeight, headingScale, headingSize, measured } = Astro.props
+const { heading, level = 1, eyebrow, lead, items = [], actions = [], image, layout = 'split', align, leadAlign, actionsAlign, width = 'full', tone, id: givenId, minHeight, headingScale, headingSize, headingLines, stackOrder, imageBleed, measured } = Astro.props
 // Every section has an id, so a theme or a design layer can address this one: the page's, or `hero`, `hero-2`, … in render order.
 const id = instanceId(Astro.locals, givenId, 'hero')
-const s = hero({ layout, align, leadAlign, actionsAlign, width, tone, headingScale, headingSize })
+// Overlap moves the image down past the section's bottom, so only an image that comes last may: first, it is edge.
+const bleedAs = imageBleed === 'overlap' && stackOrder === 'media-first' ? 'edge' : imageBleed
+const s = hero({ layout, align, leadAlign, actionsAlign, width, tone, headingScale, headingSize, headingLines, stackOrder, imageBleed: bleedAs })
 const Heading = level === 1 ? 'h1' : 'h2'
 const headingId = `${id}-title`
 const cover = layout === 'cover' && image
@@ -103,6 +125,9 @@ const headingStyle = styleOf(headingScale, level, headingSize)
 // A cover draws its own image: the measured background image is that image, and the measured overlay is its scrim.
 const sectionMeasured = cover && measured ? { ...measured, bg: measured.bg ? { ...measured.bg, image: undefined, overlay: undefined } : undefined } : measured
 const scrim = cover ? measuredFrame(measured).overlay : undefined
+// The window's edge for a bleeding image: its own side in split (the start side when it comes first), both when centered.
+const bleeds = !cover && image && imageBleed !== undefined && imageBleed !== 'none'
+const bleed = bleeds ? (layout === 'centered' ? `max-w-none md:w-auto ${BLEED.start} ${BLEED.end}` : BLEED[stackOrder === 'media-first' ? 'start' : 'end']) : undefined
 ---
 {cover && width === 'content'
   ? (
@@ -114,7 +139,7 @@ const scrim = cover ? measuredFrame(measured).overlay : undefined
           <div class={s.grid()} style={coverHeight ? `min-height: ${coverHeight}` : undefined}>
             <div class={s.copy()}>
               {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
-              <Heading id={headingId} class={s.heading()} style={headingStyle}>{heading}</Heading>
+              <Heading id={headingId} class={s.heading()} style={headingStyle}>{headingLines === 'lines' ? <Lines text={heading} /> : heading}</Heading>
               {lead && <p class={s.lead()} data-kit-text>{lead}</p>}
               {items.length > 0 && <ul class={s.points()}>{items.map(item => <li class={s.point()}>{item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-6 w-6 shrink-0 object-contain" />}<span>{item.title}</span></li>)}</ul>}
               {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
@@ -133,7 +158,7 @@ const scrim = cover ? measuredFrame(measured).overlay : undefined
         <div class={s.grid()} style={coverHeight ? `min-height: ${coverHeight}` : undefined}>
           <div class={s.copy()}>
             {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
-            <Heading id={headingId} class={s.heading()} style={headingStyle}>{heading}</Heading>
+            <Heading id={headingId} class={s.heading()} style={headingStyle}>{headingLines === 'lines' ? <Lines text={heading} /> : heading}</Heading>
             {lead && <p class={s.lead()} data-kit-text>{lead}</p>}
               {items.length > 0 && <ul class={s.points()}>{items.map(item => <li class={s.point()}>{item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-6 w-6 shrink-0 object-contain" />}<span>{item.title}</span></li>)}</ul>}
             {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
@@ -143,18 +168,18 @@ const scrim = cover ? measuredFrame(measured).overlay : undefined
     </Section>
   )
   : (
-    <Section kit="hero" measured={sectionMeasured} tone={tone} spacing="lg" id={id} aria-labelledby={headingId}>
+    <Section kit="hero" measured={sectionMeasured} tone={tone} spacing="lg" id={id} aria-labelledby={headingId} class={bleeds ? 'overflow-x-clip' : undefined}>
       {/* Without an image a split has nothing beside the text: the text takes the whole row, not half of it. */}
       <div class={s.grid({ class: image ? undefined : 'md:grid-cols-1' })}>
         <div class={s.copy()}>
           {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
-          <Heading id={headingId} class={s.heading()} style={headingStyle}>{heading}</Heading>
+          <Heading id={headingId} class={s.heading()} style={headingStyle}>{headingLines === 'lines' ? <Lines text={heading} /> : heading}</Heading>
           {lead && <p class={s.lead()} data-kit-text>{lead}</p>}
               {items.length > 0 && <ul class={s.points()}>{items.map(item => <li class={s.point()}>{item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-6 w-6 shrink-0 object-contain" />}<span>{item.title}</span></li>)}</ul>}
           {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
         </div>
         {image && (
-          <div class={s.media()}>
+          <div class:list={[s.media(), bleed]}>
             <KitImage image={image} priority sizes={layout === 'split' ? '(min-width: 768px) 50vw, 100vw' : '(min-width: 1024px) 56rem, 100vw'} class="h-auto w-full object-cover" />
           </div>
         )}

package/components/hero/fixtures.json

@@ -241,5 +241,12 @@
     }
   },
   {"name": "cover-measured-overlay", "props": {"heading": "Fresh eggs, every morning", "lead": "A family farm since 1962.", "layout": "cover", "image": {"src": "/kit-fixtures/photo-4.svg", "alt": "", "width": 1600, "height": 900}, "actions": [{"label": "Visit us", "href": "/visit/"}], "measured": {"padY": 140, "minHeight": 560, "tone": "dark", "bg": {"image": "/kit-fixtures/photo-4.svg", "overlay": "rgba(20, 40, 10, 0.45)"}}}},
-  {"name": "points", "props": {"heading": "Private Sigorta'ya Hoşgeldiniz!", "items": [{"icon": "/kit-fixtures/logo.svg", "title": "Hızlı, Kolay & Sorunsuz"}, {"title": "En Uygun Fiyatlar"}], "actions": [{"label": "Ürünlerimiz", "href": "/urunlerimiz/"}], "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "", "width": 1200, "height": 800}}}
+  {"name": "points", "props": {"heading": "Private Sigorta'ya Hoşgeldiniz!", "items": [{"icon": "/kit-fixtures/logo.svg", "title": "Hızlı, Kolay & Sorunsuz"}, {"title": "En Uygun Fiyatlar"}], "actions": [{"label": "Ürünlerimiz", "href": "/urunlerimiz/"}], "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "", "width": 1200, "height": 800}}},
+  {"name": "heading-lines", "props": {"layout": "centered", "tone": "accent", "headingLines": "lines", "eyebrow": "Northwind Journal", "heading": "Slow travel.\nGood coffee.\nTwelve years on the road.", "lead": "Essays, guides and photographs, now in one place.", "actions": [{"label": "Start reading", "href": "/journal/"}]}},
+  {"name": "split-media-first", "props": {"heading": "Your site, moved and checked", "lead": "Every page, address and form carried over.", "stackOrder": "media-first", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "A desk by a window", "width": 1200, "height": 800}, "actions": [{"label": "Start", "href": "/start/"}]}},
+  {"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": "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/hero/meta.json

@@ -7,7 +7,9 @@
   "shared": [
     "Button.astro",
     "KitImage.astro",
+    "Lines.astro",
     "Section.astro",
+    "bleed.ts",
     "instance-id.ts",
     "measured.ts",
     "muted.ts",
@@ -82,6 +84,31 @@
       ],
       "default": "own",
       "description": "The level whose site size the heading takes when it is not the level it is written at: h1 on an h2 heading keeps a source's second h1 at the h1 size under a page that keeps one h1. own: the heading's own level under headingScale theme, nothing otherwise. Any other value than own sets the size by itself."
+    },
+    "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."
+    },
+    "stackOrder": {
+      "options": [
+        "text-first",
+        "media-first"
+      ],
+      "default": "text-first",
+      "description": "Split and centered: the image before the text, on phones and on the start side (split), or above the heading (centered). A cover ignores it."
+    },
+    "imageBleed": {
+      "options": [
+        "none",
+        "edge",
+        "overlap"
+      ],
+      "default": "none",
+      "description": "Split and centered: edge runs the image on to the window's edge on its side (both sides when centered); overlap also lets it cross the section's bottom edge by --hero-overlap (3rem), over the next section's top padding, when the image comes last: with stackOrder media-first it draws as edge, so it never covers the text. A cover ignores it."
     }
   },
   "props": {

package/components/split/Split.astro

@@ -12,6 +12,7 @@ import Section from '../_shared/Section.astro'
 import { instanceId } from '../_shared/instance-id'
 import type { ActionInput, ImageInput, MeasuredStyle } from '../_shared/types'
 import { muted } from '../_shared/muted'
+import { BLEED } from '../_shared/bleed'
 
 const split = tv({
   slots: {
@@ -35,6 +36,10 @@ const split = tv({
       none: { media: 'rounded-none' },
       rounded: { media: 'rounded-[var(--radius-image,var(--radius-card))]' },
       circle: { media: 'mx-auto aspect-square w-full max-w-lg rounded-full', image: 'h-full' },
+      // A fixed set of masks (never a value from content): an arch over the image, a cut corner, a soft blob.
+      arch: { media: 'rounded-t-full', image: 'h-full' },
+      chamfer: { media: '[clip-path:polygon(0_0,82%_0,100%_18%,100%_100%,0_100%)]' },
+      blob: { media: 'rounded-[38%_62%_55%_45%/48%_42%_58%_52%]' },
     },
     // edge: the image runs on to the viewport's edge on its side (wide screens).
     imageBleed: { none: {}, edge: { media: 'rounded-none' } },
@@ -55,11 +60,6 @@ const COLUMNS = {
   text: { '1:1': 'md:grid-cols-2', '5:7': 'md:grid-cols-[5fr_7fr]', '7:5': 'md:grid-cols-[7fr_5fr]' },
   image: { '1:1': 'md:grid-cols-2', '5:7': 'md:grid-cols-[7fr_5fr]', '7:5': 'md:grid-cols-[5fr_7fr]' },
 } as const
-// The viewport's edge, from the content's edge: what is left of the page's width, halved.
-const BLEED = {
-  end: 'md:-me-[calc((100vw-min(var(--container-page),100vw-2*var(--spacing-gutter,2rem)))/2)]',
-  start: 'md:-ms-[calc((100vw-min(var(--container-page),100vw-2*var(--spacing-gutter,2rem)))/2)]',
-} as const
 
 interface Feature {
   title: string
@@ -87,7 +87,8 @@ interface Props {
   imageSide?: 'start' | 'end' | undefined
   ratio?: '1:1' | '5:7' | '7:5' | undefined
   imageFit?: 'contain' | 'cover' | undefined
-  imageShape?: 'none' | 'rounded' | 'circle' | undefined
+  /** The image's outline: none, rounded (the default), a circle, or one of a fixed set of masks: an arch, a cut corner (`chamfer`), a soft `blob`. */
+  imageShape?: 'none' | 'rounded' | 'circle' | 'arch' | 'chamfer' | 'blob' | undefined
   imageBleed?: 'none' | 'edge' | undefined
   mediaKind?: 'image' | 'video' | undefined
   featureStyle?: 'check' | 'icon' | undefined

package/components/split/fixtures.json

@@ -10,5 +10,8 @@
   { "name": "bleed-edge-start-none", "props": { "heading": "From the other side", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "imageBleed": "edge", "imageSide": "start", "image": { "src": "/kit-fixtures/photo-5.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 }, "tone": "none" } },
   { "name": "video-sticky-check", "props": { "heading": "See how it works", "headingLevel": 3, "mediaKind": "video", "videoUrl": "https://www.youtube.com/watch?v=dQw4w9WgXcQ", "playLabel": "Play video", "sticky": true, "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.\n\nWe have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.\n\nWe have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "features": [{ "title": "Fast", "text": "Static pages, one stylesheet.", "icon": "bolt" }, { "title": "Safe", "text": "Your repository stays yours.", "icon": "shield" }], "image": { "src": "/kit-fixtures/photo-6.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 } } },
   { "name": "measured-frame", "props": { "eyebrow": "Our studio", "heading": "Small team, careful work", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "actions": [{ "label": "Meet the team", "href": "/team/" }, { "label": "Our process", "href": "/process/", "style": "ghost" }], "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 }, "measured": { "containerPx": 1000, "padY": 80, "bg": { "color": "#eef2ff" }, "tone": "light" } } },
-  { "name": "no-heading", "props": { "body": "Private Sigorta günümüz gelişen sigortacılık sektörünün bir adım önünde olmayı hedeflemiş bir sigorta acentesidir.\n\nÖzel sağlık sigortası alanında, bireysel ve kurumsal müşterilere yönelik çözümler sunuyoruz.", "image": { "src": "/kit-fixtures/photo-3.svg", "alt": "", "width": 1200, "height": 800 } } }
+  { "name": "no-heading", "props": { "body": "Private Sigorta günümüz gelişen sigortacılık sektörünün bir adım önünde olmayı hedeflemiş bir sigorta acentesidir.\n\nÖzel sağlık sigortası alanında, bireysel ve kurumsal müşterilere yönelik çözümler sunuyoruz.", "image": { "src": "/kit-fixtures/photo-3.svg", "alt": "", "width": 1200, "height": 800 } } },
+  {"name": "shape-arch", "props": {"heading": "Made to be edited", "body": "Every page lands as content you can change, in the editor you choose.", "imageShape": "arch", "image": {"src": "/kit-fixtures/photo-2.svg", "alt": "A shelf of books", "width": 1200, "height": 800}}},
+  {"name": "shape-chamfer", "props": {"heading": "Made to be edited", "body": "Every page lands as content you can change, in the editor you choose.", "imageShape": "chamfer", "image": {"src": "/kit-fixtures/photo-2.svg", "alt": "A shelf of books", "width": 1200, "height": 800}}},
+  {"name": "shape-blob", "props": {"heading": "Made to be edited", "body": "Every page lands as content you can change, in the editor you choose.", "imageShape": "blob", "image": {"src": "/kit-fixtures/photo-2.svg", "alt": "A shelf of books", "width": 1200, "height": 800}}}
 ]

package/components/split/meta.json

@@ -11,6 +11,7 @@
     "Button.astro",
     "KitImage.astro",
     "Section.astro",
+    "bleed.ts",
     "instance-id.ts",
     "measured.ts",
     "muted.ts",
@@ -47,10 +48,13 @@
       "options": [
         "none",
         "rounded",
-        "circle"
+        "circle",
+        "arch",
+        "chamfer",
+        "blob"
       ],
       "default": "rounded",
-      "description": "The image's corners: square, the theme's rounding, or a circle."
+      "description": "The image's outline: square, the theme's rounding, a circle, or a fixed mask: an arch over the image, a cut corner (chamfer), a soft blob."
     },
     "imageBleed": {
       "options": [

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.41.0",
+  "version": "0.43.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",