@contentrain/astro-kit 0.46.1 → 0.46.3

package/catalog.json

@@ -105,6 +105,8 @@
         "KitImage.astro",
         "Lines.astro",
         "Section.astro",
+        "card-image.ts",
+        "image-widths.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -789,6 +791,8 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "card-image.ts",
+        "image-widths.ts",
         "image.ts",
         "instance-id.ts",
         "measured.ts",
@@ -1400,6 +1404,7 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "image-widths.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -1734,6 +1739,7 @@
         "Button.astro",
         "KitImage.astro",
         "Section.astro",
+        "image-widths.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -2327,6 +2333,7 @@
         "KitImage.astro",
         "embed-frame.ts",
         "embed-target.ts",
+        "image-widths.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -2715,6 +2722,7 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "image-widths.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -3225,6 +3233,7 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "image-widths.ts",
         "image.ts",
         "instance-id.ts",
         "measured.ts",
@@ -3549,6 +3558,7 @@
       "shared": [
         "Button.astro",
         "KitImage.astro",
+        "image-widths.ts",
         "instance-id.ts",
         "muted.ts",
         "safe-url.ts",
@@ -3783,6 +3793,7 @@
         "Lines.astro",
         "Section.astro",
         "bleed.ts",
+        "image-widths.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -4280,6 +4291,7 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "image-widths.ts",
         "image.ts",
         "instance-id.ts",
         "measured.ts",
@@ -5005,6 +5017,8 @@
       "uses": [],
       "shared": [
         "KitImage.astro",
+        "card-image.ts",
+        "image-widths.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -6075,6 +6089,7 @@
         "SectionHeader.astro",
         "embed-frame.ts",
         "embed-target.ts",
+        "image-widths.ts",
         "image.ts",
         "instance-id.ts",
         "measured.ts",
@@ -6543,6 +6558,7 @@
         "KitImage.astro",
         "Section.astro",
         "bleed.ts",
+        "image-widths.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -6952,6 +6968,7 @@
         "behaviors.ts",
         "embed-frame.ts",
         "embed-target.ts",
+        "image-widths.ts",
         "image.ts",
         "instance-id.ts",
         "measured.ts",
@@ -7259,6 +7276,7 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "image-widths.ts",
         "image.ts",
         "instance-id.ts",
         "measured.ts",
@@ -7809,6 +7827,8 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "card-image.ts",
+        "image-widths.ts",
         "image.ts",
         "instance-id.ts",
         "measured.ts",
@@ -8124,6 +8144,7 @@
         "KitImage.astro",
         "Lines.astro",
         "Section.astro",
+        "image-widths.ts",
         "image.ts",
         "instance-id.ts",
         "measured.ts",

package/components/_shared/KitImage.astro

@@ -16,6 +16,7 @@
 import type { ImageMetadata } from 'astro'
 import { Image } from 'astro:assets'
 import { mediaSize } from '../../../lib/media'
+import { widthsUpTo } from './image-widths'
 import { safeSrc } from './safe-url'
 import type { ImageInput } from './types'
 
@@ -54,9 +55,6 @@ const load = decoded === undefined ? undefined : LOCAL[`/public${decoded}`]
 const local = load ? await load() : undefined
 // The stored size (WordPress's chosen size of the file), else the file's own.
 const size = image.width && image.height ? { width: image.width, height: image.height } : {}
-// Candidate widths for the srcset, up to the image's own: the browser picks one by `sizes`.
-const STEPS = [320, 640, 960, 1280, 1600, 1920, 2560]
-const widthsUpTo = (max: number) => [...STEPS.filter(step => step < max), max]
 ---
 {url && (
   local

package/components/_shared/card-image.ts

@@ -0,0 +1,13 @@
+import type { ImageInput } from './types'
+
+const spoken = (text: string): string => text.replace(/\s+/g, ' ').trim().replace(/[.:;!]+$/, '').toLowerCase()
+
+/**
+ * A card's image beside its title link: when the title's link covers the card (a stretched link) and the image's text
+ * only repeats the title, the image is drawn with an empty text, so a screen reader says the title once. The content
+ * keeps its text (Studio, image search); an image outside such a card, or with words of its own, is drawn as written.
+ */
+export function cardImage(image: ImageInput | undefined, title: string | undefined, linked: boolean): ImageInput | undefined {
+  if (!image || !linked || !image.alt || !title || spoken(image.alt) !== spoken(title)) return image
+  return { ...image, alt: '' }
+}

package/components/_shared/image-widths.ts

@@ -0,0 +1,13 @@
+// The width ladder of every resized image (KitImage for sections, the starter's lib/body-images for rich text): the
+// candidates of a srcset, up to the largest one, and the browser picks one by `sizes`.
+
+const STEPS = [320, 640, 960, 1280, 1600, 1920, 2560]
+
+/** Candidate widths up to `max`, `max` itself the last. */
+export const widthsUpTo = (max: number): number[] => [...STEPS.filter(step => step < max), max]
+
+/**
+ * The largest width worth making of a file shown at `shown` px: twice that (a 2× screen), never more than the file.
+ * Without a shown width, the file's own.
+ */
+export const widthCap = (file: number, shown?: number): number => (shown && shown > 0 ? Math.min(file, 2 * shown) : file)

package/components/band/Band.astro

@@ -12,6 +12,7 @@ import type { ActionInput, ImageInput, MeasuredStyle } from '../_shared/types'
 import { safeHref } from '../_shared/safe-url'
 import { instanceId } from '../_shared/instance-id'
 import { muted } from '../_shared/muted'
+import { cardImage } from '../_shared/card-image'
 
 const band = tv({
   slots: {
@@ -134,7 +135,7 @@ const hasCopy = Boolean(heading || eyebrow || lead || actions.length)
       <ul class={s.list({ class: measuredGrid(measured) })}>
         {items.map(item => (
           <li class={s.item()}>
-            {item.media && <div class={s.itemMedia()}><KitImage image={{ src: item.media, alt: item.mediaAlt ?? '' }} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover" /></div>}
+            {item.media && <div class={s.itemMedia()}><KitImage image={cardImage({ src: item.media, alt: item.mediaAlt ?? '' }, item.title, !!item.href && !item.linkLabel)!} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover" /></div>}
             {item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-10 w-10 object-contain" />}
             {item.value && <p class={s.itemValue()}>{item.value}</p>}
             {item.title && (

package/components/band/meta.json

@@ -9,6 +9,8 @@
     "KitImage.astro",
     "Lines.astro",
     "Section.astro",
+    "card-image.ts",
+    "image-widths.ts",
     "instance-id.ts",
     "measured.ts",
     "muted.ts",

package/components/card-grid/CardGrid.astro

@@ -7,6 +7,7 @@ import Section, { type Tone } from '../_shared/Section.astro'
 import { instanceId } from '../_shared/instance-id'
 import { measuredGrid } from '../_shared/measured'
 import type { MeasuredStyle } from '../_shared/types'
+import { cardImage } from '../_shared/card-image'
 import { imageOf, type ImageSource } from '../_shared/image'
 import { safeHref } from '../_shared/safe-url'
 import { muted, mutedReset } from '../_shared/muted'
@@ -130,7 +131,7 @@ const number = (i: number) => String(i + 1).padStart(2, '0')
           {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>}
+              {imageOf(item.image, item.imageAlt) && <div class={r.media()}><KitImage image={cardImage(imageOf(item.image, item.imageAlt), item.title, !!item.href && !item.linkLabel)!} 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>
           )}
@@ -141,7 +142,7 @@ const number = (i: number) => String(i + 1).padStart(2, '0')
     <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>}
+          {imageOf(item.image, item.imageAlt) && <div class={media()}><KitImage image={cardImage(imageOf(item.image, item.imageAlt), item.title, !!item.href && !item.linkLabel)!} 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()}>

package/components/card-grid/meta.json

@@ -7,6 +7,8 @@
   "shared": [
     "KitImage.astro",
     "Section.astro",
+    "card-image.ts",
+    "image-widths.ts",
     "image.ts",
     "instance-id.ts",
     "measured.ts",

package/components/contact-form/meta.json

@@ -9,6 +9,7 @@
   "shared": [
     "KitImage.astro",
     "Section.astro",
+    "image-widths.ts",
     "instance-id.ts",
     "measured.ts",
     "muted.ts",

package/components/cta/meta.json

@@ -4,7 +4,7 @@
   "description": "A call to action: a short heading, an optional line of text and one or two buttons — across the whole section, or as a card inside it.",
   "category": "section",
   "uses": [],
-  "shared": ["Button.astro", "KitImage.astro", "Section.astro", "instance-id.ts", "measured.ts", "muted.ts", "safe-url.ts", "types.ts"],
+  "shared": ["Button.astro", "KitImage.astro", "Section.astro", "image-widths.ts", "instance-id.ts", "measured.ts", "muted.ts", "safe-url.ts", "types.ts"],
   "variants": {
     "layout": { "options": ["inline", "centered", "stacked"], "default": "inline", "description": "inline: text left, buttons right on wide screens. centered: everything centred. stacked: heading, text and buttons in one column at the start edge on every width." },
     "frame": { "options": ["full", "card"], "default": "full", "description": "full: the tone fills the section. card: a rounded box in a plain section carries the tone." },

package/components/embed/meta.json

@@ -4,7 +4,7 @@
   "description": "A video, map or player from another site (YouTube, Vimeo, Google Maps, OpenStreetMap, Spotify, SoundCloud, Calendly, Typeform, Google Forms, Loom, Wistia), loaded only on click: until then a poster link to the provider's page, with no iframe, no third-party request and no cookie (YouTube through youtube-nocookie.com). Unknown providers are never framed; they stay a plain link.",
   "category": "content",
   "uses": [],
-  "shared": ["KitImage.astro", "embed-frame.ts", "embed-target.ts", "safe-url.ts", "types.ts"],
+  "shared": ["KitImage.astro", "embed-frame.ts", "embed-target.ts", "image-widths.ts", "safe-url.ts", "types.ts"],
   "variants": {
     "aspect": { "options": ["auto", "video", "portrait", "square", "map"], "default": "auto", "description": "auto: 16:9 for videos, 9:16 for YouTube Shorts, 4:3 (16:9 wide) for maps, a fixed strip for audio players. The others force a ratio." },
     "width": { "options": ["prose", "page"], "default": "prose", "description": "prose: as wide as the reading column. page: the full page frame." }

package/components/feature-list/meta.json

@@ -7,6 +7,7 @@
   "shared": [
     "KitImage.astro",
     "Section.astro",
+    "image-widths.ts",
     "instance-id.ts",
     "measured.ts",
     "muted.ts",

package/components/gallery/meta.json

@@ -7,6 +7,7 @@
   "shared": [
     "KitImage.astro",
     "Section.astro",
+    "image-widths.ts",
     "image.ts",
     "instance-id.ts",
     "measured.ts",

package/components/header/meta.json

@@ -4,7 +4,7 @@
   "description": "Site header: brand (logo and/or name), navigation and an optional call-to-action button.",
   "category": "chrome",
   "uses": ["nav", "search-box"],
-  "shared": ["Button.astro", "KitImage.astro", "instance-id.ts", "muted.ts", "safe-url.ts", "types.ts"],
+  "shared": ["Button.astro", "KitImage.astro", "image-widths.ts", "instance-id.ts", "muted.ts", "safe-url.ts", "types.ts"],
   "variants": {
     "layout": { "options": ["split", "centered", "brand-left"], "default": "split", "description": "split: brand left, navigation right. centered: brand above centred navigation. brand-left: navigation right after the brand." },
     "tone": { "options": ["default", "inverse", "transparent"], "default": "default", "description": "Surface with a bottom border, dark (ink) background, or transparent over the hero that follows." },

package/components/hero/meta.json

@@ -10,6 +10,7 @@
     "Lines.astro",
     "Section.astro",
     "bleed.ts",
+    "image-widths.ts",
     "instance-id.ts",
     "measured.ts",
     "muted.ts",

package/components/logo-cloud/meta.json

@@ -7,6 +7,7 @@
   "shared": [
     "KitImage.astro",
     "Section.astro",
+    "image-widths.ts",
     "image.ts",
     "instance-id.ts",
     "measured.ts",

package/components/post-card/PostCard.astro

@@ -8,6 +8,7 @@ import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import type { ImageInput, LinkInput } from '../_shared/types'
 import { safeHref } from '../_shared/safe-url'
+import { cardImage } from '../_shared/card-image'
 
 const card = tv({
   slots: {
@@ -82,7 +83,7 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3'
 <article class={slots.root()}>
   {image && layout !== 'minimal' && (
     <div class={slots.media()}>
-      <KitImage image={image} sizes={sizes ?? (layout === 'horizontal' ? '256px' : '(min-width: 1024px) 360px, 100vw')} class:list={['w-full object-cover transition duration-300 group-hover:scale-[1.02]', !imageStyle && 'aspect-[16/9]']} style={imageStyle} />
+      <KitImage image={cardImage(image, title, !!href)!} sizes={sizes ?? (layout === 'horizontal' ? '256px' : '(min-width: 1024px) 360px, 100vw')} class:list={['w-full object-cover transition duration-300 group-hover:scale-[1.02]', !imageStyle && 'aspect-[16/9]']} style={imageStyle} />
     </div>
   )}
   <div class={slots.body()}>

package/components/post-card/meta.json

@@ -4,7 +4,7 @@
   "description": "One post in a list (index, archive, related posts): image, category, date, title, excerpt, author. The whole card links to the post.",
   "category": "content",
   "uses": [],
-  "shared": ["KitImage.astro", "safe-url.ts", "types.ts"],
+  "shared": ["KitImage.astro", "card-image.ts", "image-widths.ts", "safe-url.ts", "types.ts"],
   "variants": {
     "layout": { "options": ["vertical", "horizontal", "minimal"], "default": "vertical", "description": "Image on top, image beside the text, or text only with a divider." },
     "surface": { "options": ["plain", "card"], "default": "plain", "description": "plain: no surface. card: its own background (--color-card), radius and shadow (--shadow-card), the text padded (--spacing-card) and the image flush at the edge, as theme cards are drawn on a tinted page." },

package/components/slider/SliderTrack.astro

@@ -132,6 +132,7 @@ const Root = framed ? 'section' : 'div'
 const arrow = 'absolute top-1/2 z-10 hidden size-11 -translate-y-1/2 items-center justify-center rounded-full bg-surface/90 text-ink shadow-md ring-1 ring-line hover:bg-surface disabled:opacity-40 sm:group-data-[ready]:flex'
 // A text card has no picture for the arrows to sit on: over it they would cover its words. A carousel with any text
 // card (all of them, or mixed with pictures) has its arrows under the row, either side of the dots.
+// The dots wrap (one 24px target per slide): 14 of them between the arrows outgrew a 390 phone and pushed both off it.
 const cards = slides.some(slide => !slide.image && !slide.video && !slide.player)
 // A video from another site is a link to its page, so without JavaScript it opens there; its frame keeps the image's
 // ratio, so the player that replaces the link moves nothing.
@@ -172,7 +173,7 @@ const under = 'flex size-11 shrink-0 items-center justify-center rounded-full bg
     ? (
       <div class="mt-4 hidden items-center justify-center gap-3 group-data-[ready]:flex">
         <button type="button" class={under} aria-label={prevLabel} aria-controls={trackId} data-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>
-        <div class="flex justify-center" data-dots></div>
+        <div class="flex min-w-0 flex-wrap justify-center" data-dots></div>
         <button type="button" class={under} aria-label={nextLabel} aria-controls={trackId} data-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>
     )
@@ -180,7 +181,7 @@ const under = 'flex size-11 shrink-0 items-center justify-center rounded-full bg
       <>
         <button type="button" class:list={[arrow, 'start-6 md:start-10']} aria-label={prevLabel} aria-controls={trackId} data-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>
         <button type="button" class:list={[arrow, 'end-6 md:end-10']} aria-label={nextLabel} aria-controls={trackId} data-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 class="mt-4 hidden justify-center group-data-[ready]:flex" data-dots></div>
+        <div class="mt-4 hidden flex-wrap justify-center group-data-[ready]:flex" data-dots></div>
       </>
     ))}
 </Root>

package/components/slider/fixtures.json

@@ -4,6 +4,7 @@
   { "name": "three-square", "props": { "label": "Team", "perView": "3", "aspect": "square", "slides": [{ "image": { "src": "/kit-fixtures/avatar-1.svg", "alt": "Mira", "width": 96, "height": 96 } }, { "image": { "src": "/kit-fixtures/avatar-2.svg", "alt": "Jon", "width": 96, "height": 96 } }, { "image": { "src": "/kit-fixtures/avatar-3.svg", "alt": "Lea", "width": 96, "height": 96 } }, { "image": { "src": "/kit-fixtures/photo-1.svg", "alt": "Studio", "width": 1200, "height": 800 } }] } },
   { "name": "five-measured", "props": { "label": "Five slides", "id": "five", "eyebrow": "Recent work", "heading": "Five projects", "intro": "A few of the sites we moved this year.", "actions": [{ "label": "See all work", "href": "/work/" }], "slides": [{ "image": { "src": "/kit-fixtures/photo-1.svg", "alt": "View 1", "width": 1200, "height": 800 }, "title": "Slide 1 title" }, { "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "View 2", "width": 1200, "height": 800 }, "title": "Slide 2 title" }, { "image": { "src": "/kit-fixtures/photo-3.svg", "alt": "View 3", "width": 1200, "height": 800 }, "title": "Slide 3 title" }, { "image": { "src": "/kit-fixtures/photo-4.svg", "alt": "View 4", "width": 1200, "height": 800 }, "title": "Slide 4 title" }, { "image": { "src": "/kit-fixtures/photo-5.svg", "alt": "View 5", "width": 1200, "height": 800 }, "title": "Slide 5 title" }], "measured": { "padY": 24, "columns": { "390": 1, "768": 2, "1280": 3 }, "gap": 20 } } },
   { "name": "text-cards", "props": { "label": "What clients say", "perView": "3", "heading": "Testimonials", "slides": [{ "title": "Ada Lovelace", "text": "They moved our whole site in a week, and nothing broke." }, { "title": "Grace Hopper", "text": "Every page is ours to edit now, without a developer." }, { "title": "Alan Turing", "text": "The new site is faster, and it looks the same.", "ctaLabel": "Read the story", "ctaHref": "/stories/" }] } },
+  { "name": "text-cards-many", "props": { "label": "What clients say", "heading": "Fourteen reviews", "slides": [{ "title": "Ada", "text": "Review 1 of fourteen." }, { "title": "Grace", "text": "Review 2 of fourteen." }, { "title": "Alan", "text": "Review 3 of fourteen." }, { "title": "Edsger", "text": "Review 4 of fourteen." }, { "title": "Barbara", "text": "Review 5 of fourteen." }, { "title": "Donald", "text": "Review 6 of fourteen." }, { "title": "Margaret", "text": "Review 7 of fourteen." }, { "title": "Ken", "text": "Review 8 of fourteen." }, { "title": "Frances", "text": "Review 9 of fourteen." }, { "title": "John", "text": "Review 10 of fourteen." }, { "title": "Radia", "text": "Review 11 of fourteen." }, { "title": "Tim", "text": "Review 12 of fourteen." }, { "title": "Hedy", "text": "Review 13 of fourteen." }, { "title": "Claude", "text": "Review 14 of fourteen." }] } },
   { "name": "video-slides", "props": { "label": "Feature tour", "heading": "See it work", "slides": [{ "video": "/kit-fixtures/clip-1.mp4", "image": "/kit-fixtures/photo-1.svg", "imageAlt": "", "title": "Import" }, { "video": "/kit-fixtures/clip-2.mp4", "title": "Edit" }, { "video": "/kit-fixtures/clip-3.mp4", "image": "/kit-fixtures/photo-3.svg", "imageAlt": "", "title": "Publish", "text": "One click, and the site is live." }] } },
   { "name": "mixed-cards", "props": { "label": "Stories", "slides": [{ "title": "Ada Lovelace", "text": "They moved our whole site in a week, and nothing broke." }, { "image": "/kit-fixtures/photo-2.svg", "imageAlt": "Green gradient", "title": "Harbor & Co" }, { "title": "Grace Hopper", "text": "Every page is ours to edit now, without a developer." }] } },
   {"name": "video-embed", "props": {"label": "Studio videos", "id": "videos", "aspect": "standard", "perView": "2", "slides": [{"embed": "youtube:aqz-KE-bpKQ", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "Blue gradient", "width": 1200, "height": 800}, "title": "Studio tour"}, {"embed": "https://vimeo.com/76979871", "title": "Behind the scenes"}, {"embed": "youtube:aqz-KE-bpKQ", "image": "https://i.ytimg.com/vi/aqz-KE-bpKQ/hqdefault.jpg", "title": "A provider thumbnail is never loaded"}, {"image": {"src": "/kit-fixtures/photo-3.svg", "alt": "Orange gradient", "width": 1200, "height": 800}, "title": "Field Notes"}]}}

package/components/slider/meta.json

@@ -4,7 +4,7 @@
   "description": "A carousel of images, videos (a file, or a YouTube/Vimeo link loaded only on click) or text cards, with optional title, text and button per slide. Without JavaScript it is a snapping horizontal scroller; Embla adds paging, arrows and dots.",
   "category": "section",
   "uses": [],
-  "shared": ["Button.astro", "KitImage.astro", "Section.astro", "SectionHeader.astro", "embed-frame.ts", "embed-target.ts", "image.ts", "instance-id.ts", "measured.ts", "muted.ts", "safe-url.ts", "types.ts"],
+  "shared": ["Button.astro", "KitImage.astro", "Section.astro", "SectionHeader.astro", "embed-frame.ts", "embed-target.ts", "image-widths.ts", "image.ts", "instance-id.ts", "measured.ts", "muted.ts", "safe-url.ts", "types.ts"],
   "variants": {
     "perView": { "options": ["1", "2", "3"], "default": "1", "description": "Slides visible at once on wide screens." },
     "aspect": { "options": ["wide", "standard", "square"], "default": "wide", "description": "Image aspect ratio: 21:9, 3:2 or 1:1." },

package/components/split/meta.json

@@ -12,6 +12,7 @@
     "KitImage.astro",
     "Section.astro",
     "bleed.ts",
+    "image-widths.ts",
     "instance-id.ts",
     "measured.ts",
     "muted.ts",

package/components/stats/meta.json

@@ -11,6 +11,7 @@
     "behaviors.ts",
     "embed-frame.ts",
     "embed-target.ts",
+    "image-widths.ts",
     "image.ts",
     "instance-id.ts",
     "measured.ts",

package/components/steps/meta.json

@@ -7,6 +7,7 @@
   "shared": [
     "KitImage.astro",
     "Section.astro",
+    "image-widths.ts",
     "image.ts",
     "instance-id.ts",
     "measured.ts",

package/components/team/Team.astro

@@ -7,6 +7,7 @@ import Section from '../_shared/Section.astro'
 import { instanceId } from '../_shared/instance-id'
 import { measuredGrid } from '../_shared/measured'
 import type { MeasuredStyle } from '../_shared/types'
+import { cardImage } from '../_shared/card-image'
 import { imageOf, type ImageSource } from '../_shared/image'
 import { profile } from './team'
 import { safeHref } from '../_shared/safe-url'
@@ -109,7 +110,7 @@ const NameHeading = heading ? 'h3' : 'h2'
       {items.map(member => (
         <li class={s.member()}>
           {/* The portrait's text defaults to the name: a photo of a named person is not decoration. */}
-          {imageOf(member.image, member.imageAlt ?? member.name) && <div class={`${s.portrait()} kit-portrait`}><KitImage image={imageOf(member.image, member.imageAlt ?? member.name)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-square w-full object-cover" /></div>}
+          {imageOf(member.image, member.imageAlt ?? member.name) && <div class={`${s.portrait()} kit-portrait`}><KitImage image={cardImage(imageOf(member.image, member.imageAlt ?? member.name), member.name, !!member.href)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-square w-full object-cover" /></div>}
           <NameHeading class={s.name()}>
             {member.href
               ? <a href={safeHref(member.href)} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{member.name}</a>

package/components/team/meta.json

@@ -7,6 +7,8 @@
   "shared": [
     "KitImage.astro",
     "Section.astro",
+    "card-image.ts",
+    "image-widths.ts",
     "image.ts",
     "instance-id.ts",
     "measured.ts",

package/components/testimonial/meta.json

@@ -8,6 +8,7 @@
     "KitImage.astro",
     "Lines.astro",
     "Section.astro",
+    "image-widths.ts",
     "image.ts",
     "instance-id.ts",
     "measured.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.46.1",
+  "version": "0.46.3",
   "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",