@contentrain/astro-kit 0.46.0 → 0.46.2

package/catalog.json

@@ -105,6 +105,7 @@
         "KitImage.astro",
         "Lines.astro",
         "Section.astro",
+        "image-widths.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -789,6 +790,7 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "image-widths.ts",
         "image.ts",
         "instance-id.ts",
         "measured.ts",
@@ -1400,6 +1402,7 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "image-widths.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -1734,6 +1737,7 @@
         "Button.astro",
         "KitImage.astro",
         "Section.astro",
+        "image-widths.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -2327,6 +2331,7 @@
         "KitImage.astro",
         "embed-frame.ts",
         "embed-target.ts",
+        "image-widths.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -2715,6 +2720,7 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "image-widths.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -3225,6 +3231,7 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "image-widths.ts",
         "image.ts",
         "instance-id.ts",
         "measured.ts",
@@ -3549,6 +3556,7 @@
       "shared": [
         "Button.astro",
         "KitImage.astro",
+        "image-widths.ts",
         "instance-id.ts",
         "muted.ts",
         "safe-url.ts",
@@ -3783,6 +3791,7 @@
         "Lines.astro",
         "Section.astro",
         "bleed.ts",
+        "image-widths.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -4280,6 +4289,7 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "image-widths.ts",
         "image.ts",
         "instance-id.ts",
         "measured.ts",
@@ -5005,6 +5015,7 @@
       "uses": [],
       "shared": [
         "KitImage.astro",
+        "image-widths.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -6075,6 +6086,7 @@
         "SectionHeader.astro",
         "embed-frame.ts",
         "embed-target.ts",
+        "image-widths.ts",
         "image.ts",
         "instance-id.ts",
         "measured.ts",
@@ -6543,6 +6555,7 @@
         "KitImage.astro",
         "Section.astro",
         "bleed.ts",
+        "image-widths.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -6952,6 +6965,7 @@
         "behaviors.ts",
         "embed-frame.ts",
         "embed-target.ts",
+        "image-widths.ts",
         "image.ts",
         "instance-id.ts",
         "measured.ts",
@@ -7259,6 +7273,7 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "image-widths.ts",
         "image.ts",
         "instance-id.ts",
         "measured.ts",
@@ -7809,6 +7824,7 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "image-widths.ts",
         "image.ts",
         "instance-id.ts",
         "measured.ts",
@@ -8124,6 +8140,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/behaviors.ts

@@ -19,15 +19,20 @@ import { videoTarget } from './embed-target'
 type Kind = 'disclosure' | 'tablist' | 'carousel' | 'dialog' | 'countup' | 'toggle' | 'filter' | 'anchor' | 'lightbox'
 
 const KINDS: ReadonlySet<string> = new Set<Kind>(['disclosure', 'tablist', 'carousel', 'dialog', 'countup', 'toggle', 'filter', 'anchor', 'lightbox'])
-/** Past this many items an island wires the first ones; the rest stay visible as printed (said on the receipt). */
+/**
+ * Past this many items an island that wires each item (tabs, a counter, a filter) wires the first ones; the rest stay
+ * visible as printed (said on the receipt). A carousel wires none of its slides one by one (one scroll-snap track), so it
+ * takes every slide: a 59-slide slider (x10's metaslider) cut at 50 left its track with slides it did not count, and stayed
+ * static with no controls.
+ */
 const MAX_ITEMS = 50
 
 const reduced = (): boolean => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches
 
 /** Elements under the island root for a selector the engine wrote; nothing (never a throw) for a bad selector. */
-function within(root: HTMLElement, selector: string | undefined): HTMLElement[] {
+function within(root: HTMLElement, selector: string | undefined, limit = MAX_ITEMS): HTMLElement[] {
   if (!selector) return []
-  try { return [...root.querySelectorAll<HTMLElement>(selector)].slice(0, MAX_ITEMS) }
+  try { return [...root.querySelectorAll<HTMLElement>(selector)].slice(0, limit) }
   catch { return [] }
 }
 
@@ -94,9 +99,9 @@ function setEnd(button: HTMLButtonElement, off: boolean, measured: boolean): voi
 }
 
 function carousel(root: HTMLElement): void {
-  const items = within(root, root.dataset.crItems)
+  const items = within(root, root.dataset.crItems, Infinity)
   const track = items[0]?.parentElement
-  // Past MAX_ITEMS (or other children in the track) the carousel stays static: never squeeze unwired slides into the row.
+  // Other children in the track keep the carousel static: never squeeze what is not a slide into the row.
   if (items.length < 2 || !track || !items.every(item => item.parentElement === track) || track.children.length !== items.length) return
   // A scroll-snap track: the browser moves it (swipe, keys, scroll); the buttons only scroll it. No timer: a slider
   // that advanced by itself on the old site waits for the visitor here (said on the receipt).

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/meta.json

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

package/components/card-grid/meta.json

@@ -7,6 +7,7 @@
   "shared": [
     "KitImage.astro",
     "Section.astro",
+    "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/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", "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/meta.json

@@ -7,6 +7,7 @@
   "shared": [
     "KitImage.astro",
     "Section.astro",
+    "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.0",
+  "version": "0.46.2",
   "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.70.0"
+    "@contentrain/types": "1.71.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",