@contentrain/astro-kit 0.45.7 → 0.46.0

package/catalog.json

@@ -3065,6 +3065,10 @@
                 "type": "string",
                 "description": "Heading shown above the links; leave out when the source shows none."
               },
+              "titleHref": {
+                "type": "url",
+                "description": "Where the heading links, when the source prints it as a link; leave out for a plain heading."
+              },
               "label": {
                 "type": "string",
                 "description": "Accessible name of the column navigation (the menu name); defaults to the title."
@@ -5125,6 +5129,22 @@
           "max": 4,
           "content": false,
           "description": "Clamp the excerpt to this many lines; absent, the layout's own (3 vertical, 2 otherwise)."
+        },
+        "moreLabel": {
+          "type": "string",
+          "description": "The source's own read-more words under the excerpt (READ ARTICLE); absent, none. Shown only on a card with a link; the title link stays the one link."
+        },
+        "dateStyle": {
+          "type": "select",
+          "options": [
+            "full",
+            "long",
+            "medium",
+            "short"
+          ],
+          "default": "long",
+          "content": false,
+          "description": "How the date is written (Intl dateStyle), as the source writes it; absent, long."
         }
       },
       "slots": {},

package/components/_shared/Button.astro

@@ -1,12 +1,15 @@
 ---
 // A link drawn as a button — the kit's call-to-action primitive. Actions in
-// migrated content are links, so this is always an <a>.
+// migrated content are links, so this is always an <a>. A label never widens
+// the page: the button is at most as wide as its row, and a label with no
+// break in it (a raw URL) wraps inside it. The label's own box breaks only
+// where it overflows, so a table or a row still sizes the button to its words.
 import { tv } from 'tailwind-variants'
 import type { ActionInput } from './types'
 import { safeHref } from './safe-url'
 
 const button = tv({
-  base: 'inline-flex items-center justify-center gap-2 rounded-[var(--radius-control,var(--radius-md))] font-medium no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-2',
+  base: 'inline-flex max-w-full items-center justify-center gap-2 rounded-[var(--radius-control,var(--radius-md))] font-medium no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-2',
   variants: {
     style: {
       primary: 'bg-accent text-accent-ink hover:bg-ink hover:text-surface',
@@ -35,4 +38,4 @@ const { action, size, class: className } = Astro.props
   target={action.newTab ? '_blank' : undefined}
   rel={action.newTab ? 'noopener' : undefined}
   class={button({ style: action.style ?? 'primary', size, class: className })}
->{action.label}</a>
+><span class="min-w-0 text-center [overflow-wrap:break-word]">{action.label}</span></a>

package/components/_shared/behaviors.ts

@@ -87,6 +87,12 @@ function control(label: string, onClick: () => void): HTMLButtonElement {
   return button
 }
 
+/** A carousel button on or off; `aria-disabled` is said once the row has been measured, and kept true to its state after. */
+function setEnd(button: HTMLButtonElement, off: boolean, measured: boolean): void {
+  button.disabled = off
+  if (measured || button.hasAttribute('aria-disabled')) button.setAttribute('aria-disabled', String(off))
+}
+
 function carousel(root: HTMLElement): void {
   const items = within(root, root.dataset.crItems)
   const track = items[0]?.parentElement
@@ -98,10 +104,27 @@ function carousel(root: HTMLElement): void {
   for (const item of items) Object.assign(item.style, { flex: '0 0 100%', scrollSnapAlign: 'start' })
   track.setAttribute('tabindex', '0')
   const go = (step: number) => track.scrollBy({ left: step * track.clientWidth })
+  const prev = control(root.dataset.crPrev ?? 'Previous', () => go(-1))
+  const next = control(root.dataset.crNext ?? 'Next', () => go(1))
+  // No loop (owl's own default): Previous is off on the first slide and Next on the last, so neither is a dead button.
+  // A row that does not overflow yet (a closed tab or dialog, a frame still sized to its slides) keeps both on: only a
+  // track measured wider than its frame has ends. The track or a slide resizing, and the page's load, measure it again.
+  const ends = () => {
+    const overflows = track.clientWidth > 0 && track.scrollWidth > track.clientWidth + 1
+    setEnd(prev, overflows && track.scrollLeft <= 1, overflows)
+    setEnd(next, overflows && track.scrollLeft + track.clientWidth >= track.scrollWidth - 1, overflows)
+  }
+  track.addEventListener('scroll', ends, { passive: true })
+  if (typeof ResizeObserver === 'function') {
+    const resized = new ResizeObserver(ends)
+    for (const box of [track, ...items]) resized.observe(box)
+  }
+  if (document.readyState !== 'complete') addEventListener('load', ends, { once: true })
   const bar = document.createElement('div')
   bar.className = 'cr-behavior-controls'
-  bar.append(control(root.dataset.crPrev ?? 'Previous', () => go(-1)), control(root.dataset.crNext ?? 'Next', () => go(1)))
+  bar.append(prev, next)
   track.after(bar)
+  ends()
 }
 
 function dialog(root: HTMLElement): void {

package/components/_shared/muted.ts

@@ -17,3 +17,10 @@ export const mutedBrand = '[--kit-muted:var(--color-brand-ink)]'
 
 /** A light surface inside a band (a card, a form panel, a drawer): back to the page's muted role. */
 export const mutedReset = '[--kit-muted:initial]'
+
+/**
+ * A Typography body (`prose prose-site`) on a band: its text in the band's own colour and its quieter parts (lead,
+ * bullets, counters, captions) in the band's muted role. `prose-site` binds the page's ink, and on a dark band that is
+ * the band's own fill (1:1); on a filled band, ink under 4.5:1. On the page's own surface both are the ink, as before.
+ */
+export const proseOnBand = '[--tw-prose-body:currentColor] [--tw-prose-headings:currentColor] [--tw-prose-bold:currentColor] [--tw-prose-quotes:currentColor] [--tw-prose-code:currentColor] [--tw-prose-lead:var(--kit-muted,var(--color-ink-muted))] [--tw-prose-counters:var(--kit-muted,var(--color-ink-muted))] [--tw-prose-bullets:var(--kit-muted,var(--color-ink-muted))] [--tw-prose-captions:var(--kit-muted,var(--color-ink-muted))]'

package/components/behavior/Behavior.astro

@@ -75,6 +75,7 @@ const NOSCRIPT = '<style>.cr-behavior dialog:not([open]){display:block;position:
   .cr-behavior-controls { display: flex; gap: 0.5rem; justify-content: center; margin-block-start: 1rem; }
   .cr-behavior-control { cursor: pointer; border: 1px solid currentColor; border-radius: var(--radius-control, 0.375rem); padding: 0.375rem 0.875rem; background: transparent; }
   .cr-behavior-control:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
+  .cr-behavior-control:disabled { cursor: default; opacity: 0.4; }
   .cr-behavior-dialog { margin: auto; max-width: min(92vw, 40rem); max-height: 85dvh; border: 1px solid var(--color-line); border-radius: var(--radius-card, 0.75rem); padding: 1.5rem; }
   .cr-behavior-dialog::backdrop { background: rgb(0 0 0 / 0.5); }
   .cr-behavior-lightbox img { display: block; max-width: 100%; max-height: 75dvh; margin-inline: auto; }

package/components/cta/fixtures.json

@@ -9,5 +9,6 @@
   { "name": "eyebrow-note-lg", "props": { "eyebrow": "Free trial", "heading": "Start building today", "body": "Ship a first page in an afternoon.", "note": "No credit card required", "actions": [{ "label": "Subscribe", "href": "/subscribe/" }], "size": "lg", "tone": "muted", "align": "center" } },
   { "name": "media-end", "props": { "heading": "See it in action", "body": "A short tour of the editor.", "actions": [{ "label": "Subscribe", "href": "/subscribe/" }], "image": { "src": "/kit-fixtures/photo-1.svg", "alt": "The editor", "width": 640, "height": 480 }, "tone": "default", "frame": "card" } },
   { "name": "media-start-centered", "props": { "heading": "Join the newsletter", "body": "One email a month.", "actions": [{ "label": "Subscribe", "href": "/subscribe/" }], "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "", "width": 640, "height": 480 }, "mediaSide": "start", "layout": "centered", "tone": "inverse" } },
-  { "name": "background-image", "props": { "heading": "Planning a trip?", "body": "Start with the guides readers use most.", "actions": [{ "label": "Subscribe", "href": "/subscribe/" }], "layout": "centered", "bgImage": "/kit-fixtures/photo-3.svg", "tone": "inverse", "size": "lg" } }
+  { "name": "background-image", "props": { "heading": "Planning a trip?", "body": "Start with the guides readers use most.", "actions": [{ "label": "Subscribe", "href": "/subscribe/" }], "layout": "centered", "bgImage": "/kit-fixtures/photo-3.svg", "tone": "inverse", "size": "lg" } },
+  { "name": "long-label", "props": { "heading": "Download the full report", "body": "The link as the site printed it.", "actions": [{ "label": "https://example.com/downloads/annual-report-2026-complete-edition.pdf", "href": "/downloads/annual-report/" }] } }
 ]

package/components/footer/Footer.astro

@@ -46,8 +46,8 @@ const footer = tv({
 interface Props {
   siteName: string
   tagline?: string | undefined
-  /** Link groups for the `columns` layout. */
-  columns?: Array<{ title?: string | undefined, label?: string | undefined, links: LinkInput[] }> | undefined
+  /** Link groups for the `columns` layout. `titleHref`: the heading is a link to it (a source heading printed as one). */
+  columns?: Array<{ title?: string | undefined, titleHref?: string | undefined, label?: string | undefined, links: LinkInput[] }> | undefined
   /** A single row of links (the footer menu). */
   links?: LinkInput[] | undefined
   social?: LinkInput[] | undefined
@@ -125,7 +125,7 @@ const mark = wordmark === 'fit' || wordmark === 'crop' ? wordmarkBox(siteName, w
     {layout === 'columns'
       ? columns.map(column => (
         <nav aria-label={column.label ?? column.title} data-cr-part="nav-footer">
-          {column.title && <p class="mb-3 font-semibold">{column.title}</p>}
+          {column.title && <p class="mb-3 font-semibold">{column.titleHref ? <a href={safeHref(column.titleHref)} class="text-current no-underline hover:underline">{column.title}</a> : column.title}</p>}
           <ul class="flex flex-col gap-2">
             {column.links.map(item => <li><a href={safeHref(item.href)} class={link()}>{item.label}</a></li>)}
           </ul>

package/components/footer/meta.json

@@ -88,6 +88,10 @@
             "type": "string",
             "description": "Heading shown above the links; leave out when the source shows none."
           },
+          "titleHref": {
+            "type": "url",
+            "description": "Where the heading links, when the source prints it as a link; leave out for a plain heading."
+          },
           "label": {
             "type": "string",
             "description": "Accessible name of the column navigation (the menu name); defaults to the title."

package/components/post-card/PostCard.astro

@@ -16,7 +16,8 @@ const card = tv({
     body: 'flex min-w-0 flex-col gap-2',
     meta: 'flex flex-wrap items-center gap-x-2 text-sm text-ink-muted',
     title: 'leading-snug [font-weight:var(--font-weight-heading,600)] text-balance text-ink',
-    excerpt: 'text-ink-muted',
+    // At most ~75 characters a line, however wide the card (a one-column list at 1280).
+    excerpt: 'max-w-[75ch] text-ink-muted',
   },
   variants: {
     layout: {
@@ -56,6 +57,10 @@ interface Props {
   byline?: 'inline' | 'below' | undefined
   /** Clamp the excerpt to this many lines; absent, the layout's own (3 vertical, 2 otherwise). */
   excerptLines?: 2 | 3 | 4 | undefined
+  /** The source's own "read more" words under the excerpt ("READ ARTICLE"); absent, none. The card's title link is the link. */
+  moreLabel?: string | undefined
+  /** How the date is written (`Intl.DateTimeFormat` `dateStyle`), as the source writes it; absent, long. */
+  dateStyle?: 'full' | 'long' | 'medium' | 'short' | undefined
   /** The title in the site's link colour, as themes that colour every link do (Hello Elementor). */
   linkTitle?: boolean | undefined
   /** The image's `sizes` hint; absent, the card's own guess. A list passes the slot its columns give. */
@@ -66,11 +71,11 @@ interface Props {
   imageAspect?: string | undefined
 }
 
-const { title, href, excerpt, date: rawDate, locale = 'en', timeZone = 'UTC', image, category, author, headingLevel = 2, layout, surface, byline, linkTitle, excerptLines, sizes, imageHeight, imageAspect } = Astro.props
+const { title, href, excerpt, date: rawDate, locale = 'en', timeZone = 'UTC', image, category, author, headingLevel = 2, layout, surface, byline, linkTitle, excerptLines, moreLabel, dateStyle = 'long', sizes, imageHeight, imageAspect } = Astro.props
 const date = rawDate === undefined ? undefined : new Date(rawDate)
 const slots = card({ layout, surface, byline })
 const below = byline === 'below'
-const shown = date?.toLocaleDateString(locale, { dateStyle: 'long', timeZone })
+const shown = date?.toLocaleDateString(locale, { dateStyle, timeZone })
 const imageStyle = imageHeight ? `height:${imageHeight}` : imageAspect ? `aspect-ratio:${imageAspect}` : undefined
 const Heading = `h${headingLevel}` as 'h2' | 'h3'
 ---
@@ -105,5 +110,7 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3'
     )}
     {excerpt && <p class={slots.excerpt({ class: excerptLines ? { 2: 'line-clamp-2', 3: 'line-clamp-3', 4: 'line-clamp-4' }[excerptLines] : undefined })}>{excerpt}</p>}
     {!below && author && <p class="text-sm text-ink-muted">{author}</p>}
+    {/* Words, not a second link to the same page: a click on them reaches the title link's overlay. */}
+    {href && moreLabel && <p class="text-sm font-semibold text-accent-text" aria-hidden="true">{moreLabel}</p>}
   </div>
 </article>

package/components/post-card/meta.json

@@ -25,7 +25,9 @@
     "sizes": { "type": "string", "description": "The image's `sizes` hint; absent, the card's own guess. A list passes the slot its columns give." },
     "imageHeight": { "type": "string", "description": "The image block's height as the source sets it (a CSS length or clamp()), cropped to fit; wins over imageAspect." },
     "imageAspect": { "type": "string", "description": "The image block's aspect ratio (16 / 9) where the source sets an aspect ratio; absent, 16 / 9." },
-    "excerptLines": { "type": "integer", "min": 2, "max": 4, "content": false, "description": "Clamp the excerpt to this many lines; absent, the layout's own (3 vertical, 2 otherwise)." }
+    "excerptLines": { "type": "integer", "min": 2, "max": 4, "content": false, "description": "Clamp the excerpt to this many lines; absent, the layout's own (3 vertical, 2 otherwise)." },
+    "moreLabel": { "type": "string", "description": "The source's own read-more words under the excerpt (READ ARTICLE); absent, none. Shown only on a card with a link; the title link stays the one link." },
+    "dateStyle": { "type": "select", "options": ["full", "long", "medium", "short"], "default": "long", "content": false, "description": "How the date is written (Intl dateStyle), as the source writes it; absent, long." }
   },
   "slots": {},
   "js": "none",

package/components/split/Split.astro

@@ -11,7 +11,7 @@ import KitImage from '../_shared/KitImage.astro'
 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 { muted, proseOnBand } from '../_shared/muted'
 import { BLEED } from '../_shared/bleed'
 
 const split = tv({
@@ -20,7 +20,8 @@ const split = tv({
     copy: 'flex flex-col gap-5',
     eyebrow: `text-sm font-semibold tracking-wide uppercase ${muted}`,
     heading: 'text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl',
-    body: 'prose prose-site max-w-none text-pretty',
+    // The body in the band's own colours, as the heading beside it (on default and muted that is the page's ink).
+    body: `prose prose-site max-w-none text-pretty ${proseOnBand}`,
     actions: 'flex flex-wrap gap-3 pt-2',
     media: 'overflow-hidden',
     image: 'h-auto w-full object-cover',
@@ -49,7 +50,8 @@ const split = tv({
     sticky: { true: { media: 'md:sticky md:top-8 md:self-start' }, false: {} },
     align: { start: {}, center: { copy: 'items-center text-center', actions: 'justify-center' } },
     // accent/accent-ink is only ~5:1 — dimming text on it drops body copy under 4.5:1 (WCAG 1.4.3), so accent keeps it at full strength.
-    tone: { default: {}, muted: {}, inverse: {}, accent: {}, brand: {}, none: {} },
+    // A fill sets no accent text of its own: a link in the body is drawn in the fill's ink (underlined, as prose draws it).
+    tone: { default: {}, muted: {}, inverse: {}, accent: { body: '[--tw-prose-links:currentColor]' }, brand: { body: '[--tw-prose-links:currentColor]' }, none: {} },
   },
   defaultVariants: { imageSide: 'end', ratio: '1:1', imageFit: 'contain', imageShape: 'rounded', imageBleed: 'none', stackOrder: 'text-first', sticky: false, align: 'start', tone: 'default' },
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.45.7",
+  "version": "0.46.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.69.0"
+    "@contentrain/types": "1.70.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",