@contentrain/astro-kit 0.32.0 → 0.33.0

package/components/slider/Slider.astro

@@ -2,39 +2,12 @@
 // A carousel of images with optional captions. Without JavaScript it is a
 // horizontally scrolling, snapping row — every slide is reachable. With it,
 // Embla turns the row into a paged carousel with previous/next buttons and
-// slide dots.
-import { tv } from 'tailwind-variants'
-import Button from '../_shared/Button.astro'
-import KitImage from '../_shared/KitImage.astro'
-import { imageOf, type ImageSource } from '../_shared/image'
-import { type ActionInput, type ImageInput } from '../_shared/types'
-
-const slider = tv({
-  slots: {
-    viewport: 'flex snap-x snap-mandatory gap-4 overflow-x-auto scroll-smooth group-data-[ready]:snap-none group-data-[ready]:overflow-hidden [scrollbar-width:none]',
-    slide: 'relative min-w-0 shrink-0 snap-start overflow-hidden',
-    image: 'w-full object-cover',
-    caption: 'flex flex-col items-start gap-2',
-  },
-  variants: {
-    perView: {
-      '1': { slide: 'basis-full' },
-      '2': { slide: 'basis-[85%] sm:basis-[calc(50%-0.5rem)]' },
-      '3': { slide: 'basis-[85%] sm:basis-[calc(50%-0.5rem)] lg:basis-[calc(33.333%-0.667rem)]' },
-    },
-    aspect: {
-      wide: { image: 'aspect-[4/3] md:aspect-[21/9]' },
-      standard: { image: 'aspect-[3/2]' },
-      square: { image: 'aspect-square' },
-    },
-    caption: {
-      below: { image: 'rounded-[var(--radius-image,var(--radius-card))]', caption: 'pt-4' },
-      // Over the image on wide screens; under it on phones, where the image is too short to hold text.
-      overlay: { image: 'rounded-[var(--radius-image,var(--radius-card))] md:rounded-none', slide: 'md:rounded-[var(--radius-image,var(--radius-card))]', caption: 'pt-4 md:absolute md:inset-x-0 md:bottom-0 md:bg-gradient-to-t md:from-ink/80 md:to-transparent md:p-6 md:pt-16 md:text-surface' },
-    },
-  },
-  defaultVariants: { perView: '1', aspect: 'wide', caption: 'overlay' },
-})
+// slide dots. The markup and the script are in SliderTrack.astro; given a
+// measured style, this wraps it in the section's own frame.
+import Section from '../_shared/Section.astro'
+import type { ImageSource } from '../_shared/image'
+import type { ActionInput, MeasuredStyle } from '../_shared/types'
+import SliderTrack from './SliderTrack.astro'
 
 interface Slide {
   /** The image's address (or, until 0.7, an `ImageInput`). */
@@ -51,6 +24,11 @@ interface Slide {
 
 interface Props {
   slides: Slide[]
+  /** The section's head, drawn above the carousel; none of these given, nothing is drawn. */
+  heading?: string | undefined
+  intro?: string | undefined
+  eyebrow?: string | undefined
+  actions?: ActionInput[] | undefined
   /** Accessible name of the carousel ("Featured projects"). */
   label: string
   prevLabel?: string | undefined
@@ -63,88 +41,14 @@ interface Props {
   perView?: '1' | '2' | '3' | undefined
   aspect?: 'wide' | 'standard' | 'square' | undefined
   caption?: 'below' | 'overlay' | undefined
+  /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image, columns per width (the slides in view), gap. Absent, the site's tokens; present, it wins over `perView`. */
+  measured?: MeasuredStyle | undefined
+  /** Unique on the page: names the track the buttons control. */
+  id?: string | undefined
 }
 
-const { slides: given, label, prevLabel = 'Previous slide', nextLabel = 'Next slide', slideLabel = 'Slide', ofLabel = 'of', loop = false, perView = '1', aspect, caption } = Astro.props
-const slides = given.flatMap((slide) => {
-  const image = imageOf(slide.image, slide.imageAlt)
-  const action = slide.action ?? (slide.ctaLabel && slide.ctaHref ? { label: slide.ctaLabel, href: slide.ctaHref } : undefined)
-  return image ? [{ ...slide, image, action }] : []
-}) satisfies Array<{ image: ImageInput, action?: ActionInput | undefined }>
-const slots = slider({ perView, aspect, caption })
-const sizes = perView === '1' ? '(min-width: 1216px) 1152px, 100vw' : perView === '2' ? '(min-width: 640px) 50vw, 85vw' : '(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 85vw'
-// Arrows from sm up; on phones the carousel is swiped and the dots show the position.
-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'
+const props = Astro.props
 ---
-<section class="group container-page relative py-8" aria-roledescription="carousel" aria-label={label} data-kit-slider data-loop={loop ? '' : undefined} data-slide-label={slideLabel}>
-  <div class={slots.viewport()} data-viewport>
-    <div class="flex gap-4 [&>*]:shrink-0 group-data-[ready]:[&>*]:snap-align-none" data-container>
-      {slides.map((slide, index) => (
-        <div class={slots.slide()} role="group" aria-roledescription="slide" aria-label={`${slideLabel} ${index + 1} ${ofLabel} ${slides.length}`}>
-          <KitImage image={slide.image} sizes={sizes} priority={index === 0} class={slots.image()} />
-          {(slide.title || slide.text || slide.action) && (
-            <div class={slots.caption()}>
-              {slide.title && <p class="text-xl [font-weight:var(--font-weight-heading,600)] text-balance">{slide.title}</p>}
-              {slide.text && <p class="opacity-85">{slide.text}</p>}
-              {slide.action && <Button action={slide.action} size="sm" class="mt-2" />}
-            </div>
-          )}
-        </div>
-      ))}
-    </div>
-  </div>
-  {slides.length > 1 && (
-    <>
-      <button type="button" class:list={[arrow, 'start-6 md:start-10']} aria-label={prevLabel} 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} 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>
-    </>
-  )}
-</section>
-
-<script>
-  import EmblaCarousel from 'embla-carousel'
-
-  for (const root of document.querySelectorAll<HTMLElement>('[data-kit-slider]')) {
-    const viewport = root.querySelector<HTMLElement>('[data-viewport]')
-    if (!viewport || root.dataset.ready !== undefined) continue
-    root.dataset.ready = ''
-    // Reduced motion: slides change instantly instead of gliding.
-    const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches
-    // A right-to-left page runs the row from the right: the first slide at the start edge, "next" towards the end.
-    const direction = getComputedStyle(root).direction === 'rtl' ? 'rtl' : 'ltr'
-    const embla = EmblaCarousel(viewport, { loop: root.dataset.loop !== undefined, align: 'start', containScroll: 'trimSnaps', duration: reduce ? 0 : 25, direction })
-    const prev = root.querySelector<HTMLButtonElement>('[data-prev]')
-    const next = root.querySelector<HTMLButtonElement>('[data-next]')
-    const dots = root.querySelector<HTMLElement>('[data-dots]')
-    prev?.addEventListener('click', () => embla.scrollPrev())
-    next?.addEventListener('click', () => embla.scrollNext())
-
-    const label = root.dataset.slideLabel ?? 'Slide'
-    const buttons = embla.scrollSnapList().map((_, index) => {
-      const dot = document.createElement('button')
-      dot.type = 'button'
-      // A 24px target around a 10px dot (WCAG 2.5.8): on phones the dots are the only controls.
-      dot.className = 'group/dot grid size-6 place-items-center rounded-full'
-      const mark = document.createElement('span')
-      mark.className = 'size-2.5 rounded-full bg-ink/25 group-aria-[current=true]/dot:bg-ink'
-      dot.append(mark)
-      dot.setAttribute('aria-label', `${label} ${index + 1}`)
-      dot.addEventListener('click', () => embla.scrollTo(index))
-      dots?.append(dot)
-      return dot
-    })
-    const sync = () => {
-      const selected = embla.selectedScrollSnap()
-      buttons.forEach((dot, index) => dot.setAttribute('aria-current', String(index === selected)))
-      if (prev) prev.disabled = !embla.canScrollPrev()
-      if (next) next.disabled = !embla.canScrollNext()
-    }
-    embla.on('select', sync).on('reInit', sync)
-    sync()
-  }
-</script>
+{props.measured
+  ? <Section measured={props.measured} tone="none" spacing="sm" id={props.id}><SliderTrack {...props} id={props.id ?? 'slider'} framed={false} /></Section>
+  : <SliderTrack {...props} />}

package/components/slider/SliderTrack.astro

@@ -0,0 +1,178 @@
+---
+// A carousel of images with optional captions. Without JavaScript it is a
+// horizontally scrolling, snapping row — every slide is reachable. With it,
+// Embla turns the row into a paged carousel with previous/next buttons and
+// slide dots. Slider.astro frames it (the section's own look, when a measured
+// style is given); the markup and the script are here.
+import { tv } from 'tailwind-variants'
+import Button from '../_shared/Button.astro'
+import KitImage from '../_shared/KitImage.astro'
+import SectionHeader from '../_shared/SectionHeader.astro'
+import { imageOf, type ImageSource } from '../_shared/image'
+import { measuredSlides } from '../_shared/measured'
+import { type ActionInput, type ImageInput, type MeasuredStyle } from '../_shared/types'
+
+const slider = tv({
+  slots: {
+    viewport: 'flex snap-x snap-mandatory gap-4 overflow-x-auto scroll-smooth group-data-[ready]:snap-none group-data-[ready]:overflow-hidden [scrollbar-width:none] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+    slide: 'relative min-w-0 shrink-0 snap-start overflow-hidden',
+    image: 'w-full object-cover',
+    caption: 'flex flex-col items-start gap-2',
+  },
+  variants: {
+    perView: {
+      '1': { slide: 'basis-full' },
+      '2': { slide: 'basis-[85%] sm:basis-[calc(50%-0.5rem)]' },
+      '3': { slide: 'basis-[85%] sm:basis-[calc(50%-0.5rem)] lg:basis-[calc(33.333%-0.667rem)]' },
+    },
+    aspect: {
+      wide: { image: 'aspect-[4/3] md:aspect-[21/9]' },
+      standard: { image: 'aspect-[3/2]' },
+      square: { image: 'aspect-square' },
+    },
+    caption: {
+      below: { image: 'rounded-[var(--radius-image,var(--radius-card))]', caption: 'pt-4' },
+      // Over the image on wide screens; under it on phones, where the image is too short to hold text.
+      overlay: { image: 'rounded-[var(--radius-image,var(--radius-card))] md:rounded-none', slide: 'md:rounded-[var(--radius-image,var(--radius-card))]', caption: 'pt-4 md:absolute md:inset-x-0 md:bottom-0 md:bg-gradient-to-t md:from-ink/80 md:to-transparent md:p-6 md:pt-16 md:text-surface' },
+    },
+  },
+  defaultVariants: { perView: '1', aspect: 'wide', caption: 'overlay' },
+})
+
+interface Slide {
+  /** The image's address (or, until 0.7, an `ImageInput`). */
+  image: ImageSource
+  imageAlt?: string | undefined
+  title?: string | undefined
+  text?: string | undefined
+  /** The slide's link, flat so a page stays within Contentrain's nesting depth. */
+  ctaLabel?: string | undefined
+  ctaHref?: string | undefined
+  /** Until 0.7: the same link as one object. */
+  action?: ActionInput | undefined
+}
+
+interface Props {
+  slides: Slide[]
+  /** The section's head, drawn above the carousel; none of these given, nothing is drawn. */
+  heading?: string | undefined
+  intro?: string | undefined
+  eyebrow?: string | undefined
+  actions?: ActionInput[] | undefined
+  /** Accessible name of the carousel ("Featured projects"). */
+  label: string
+  prevLabel?: string | undefined
+  nextLabel?: string | undefined
+  /** Word before a slide number in dot labels and slide names ("Slide"). */
+  slideLabel?: string | undefined
+  /** Word between a slide number and the count ("of"). */
+  ofLabel?: string | undefined
+  loop?: boolean | undefined
+  perView?: '1' | '2' | '3' | undefined
+  aspect?: 'wide' | 'standard' | 'square' | undefined
+  caption?: 'below' | 'overlay' | undefined
+  /** The source section's measured style (`MeasuredStyle`): columns per width become the slides in view, gap their spacing. */
+  measured?: MeasuredStyle | undefined
+  /** Names the track for the buttons' `aria-controls`; unique on the page. */
+  id?: string | undefined
+  /** Draw the section's own frame and spacing (when Slider.astro has no Section around it). */
+  framed?: boolean | undefined
+}
+
+const { slides: given, label, prevLabel = 'Previous slide', nextLabel = 'Next slide', slideLabel = 'Slide', ofLabel = 'of', loop = false, perView = '1', aspect, caption, heading, intro, eyebrow, actions, measured, id = 'slider', framed = true } = Astro.props
+const slides = given.flatMap((slide) => {
+  const image = imageOf(slide.image, slide.imageAlt)
+  const action = slide.action ?? (slide.ctaLabel && slide.ctaHref ? { label: slide.ctaLabel, href: slide.ctaHref } : undefined)
+  return image ? [{ ...slide, image, action }] : []
+}) satisfies Array<{ image: ImageInput, action?: ActionInput | undefined }>
+const measuredRow = measuredSlides(measured)
+// A measured row sets the slides in view itself, so the variant's own widths step aside.
+const slots = slider({ perView: measuredRow ? '1' : perView, aspect, caption })
+const trackId = `${id}-track`
+const sizes = measuredRow ? '(min-width: 1216px) 1152px, 100vw' : perView === '1' ? '(min-width: 1216px) 1152px, 100vw' : perView === '2' ? '(min-width: 640px) 50vw, 85vw' : '(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 85vw'
+// Arrows from sm up; on phones the carousel is swiped and the dots show the position.
+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'
+---
+<Root class:list={['group relative', framed && 'container-page py-8']} role={framed ? undefined : 'region'} aria-roledescription="carousel" aria-label={label} data-kit-slider data-loop={loop ? '' : undefined} data-slide-label={slideLabel}>
+  <SectionHeader heading={heading} intro={intro} eyebrow={eyebrow} actions={actions} />
+  <div class={slots.viewport()} data-viewport tabindex="0" role="group" aria-label={label}>
+    <div class:list={['flex gap-4 [&>*]:shrink-0 group-data-[ready]:[&>*]:snap-align-none', measuredRow?.track]} id={trackId} data-container>
+      {slides.map((slide, index) => (
+        <div class={slots.slide({ class: measuredRow?.slide })} role="group" aria-roledescription="slide" aria-label={`${slideLabel} ${index + 1} ${ofLabel} ${slides.length}`}>
+          <KitImage image={slide.image} sizes={sizes} priority={index === 0} class={slots.image()} />
+          {(slide.title || slide.text || slide.action) && (
+            <div class={slots.caption()}>
+              {slide.title && <p class="text-xl [font-weight:var(--font-weight-heading,600)] text-balance">{slide.title}</p>}
+              {slide.text && <p class="opacity-85">{slide.text}</p>}
+              {slide.action && <Button action={slide.action} size="sm" class="mt-2" />}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  </div>
+  {slides.length > 1 && (
+    <>
+      <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>
+    </>
+  )}
+</Root>
+
+<script>
+  import EmblaCarousel from 'embla-carousel'
+
+  for (const root of document.querySelectorAll<HTMLElement>('[data-kit-slider]')) {
+    const viewport = root.querySelector<HTMLElement>('[data-viewport]')
+    if (!viewport || root.dataset.ready !== undefined) continue
+    root.dataset.ready = ''
+    // Reduced motion: slides change instantly instead of gliding.
+    const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches
+    // A right-to-left page runs the row from the right: the first slide at the start edge, "next" towards the end.
+    const direction = getComputedStyle(root).direction === 'rtl' ? 'rtl' : 'ltr'
+    const embla = EmblaCarousel(viewport, { loop: root.dataset.loop !== undefined, align: 'start', containScroll: 'trimSnaps', duration: reduce ? 0 : 25, direction })
+    const prev = root.querySelector<HTMLButtonElement>('[data-prev]')
+    const next = root.querySelector<HTMLButtonElement>('[data-next]')
+    const dots = root.querySelector<HTMLElement>('[data-dots]')
+    prev?.addEventListener('click', () => embla.scrollPrev())
+    next?.addEventListener('click', () => embla.scrollNext())
+    // The row takes focus (the buttons are hidden on phones): the arrow keys page it, and a slide change is announced.
+    viewport.addEventListener('keydown', (event) => {
+      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+      event.preventDefault()
+      if ((event.key === 'ArrowRight') === (direction === 'ltr')) embla.scrollNext()
+      else embla.scrollPrev()
+    })
+    // No autoplay: the carousel only moves when asked, so a polite announcement of the slide is right.
+    root.querySelector('[data-container]')?.setAttribute('aria-live', 'polite')
+
+    const label = root.dataset.slideLabel ?? 'Slide'
+    const buttons = embla.scrollSnapList().map((_, index) => {
+      const dot = document.createElement('button')
+      dot.type = 'button'
+      // A 24px target around a 10px dot (WCAG 2.5.8): on phones the dots are the only controls.
+      dot.className = 'group/dot grid size-6 place-items-center rounded-full'
+      const mark = document.createElement('span')
+      mark.className = 'size-2.5 rounded-full bg-ink/25 group-aria-[current=true]/dot:bg-ink'
+      dot.append(mark)
+      dot.setAttribute('aria-label', `${label} ${index + 1}`)
+      dot.addEventListener('click', () => embla.scrollTo(index))
+      dots?.append(dot)
+      return dot
+    })
+    const sync = () => {
+      const selected = embla.selectedScrollSnap()
+      buttons.forEach((dot, index) => dot.setAttribute('aria-current', String(index === selected)))
+      if (prev) prev.disabled = !embla.canScrollPrev()
+      if (next) next.disabled = !embla.canScrollNext()
+    }
+    embla.on('select', sync).on('reInit', sync)
+    sync()
+  }
+</script>

package/components/slider/fixtures.json

@@ -1,5 +1,6 @@
 [
   { "name": "single-wide-overlay", "props": { "label": "Featured work", "slides": [{ "image": { "src": "/kit-fixtures/photo-1.svg", "alt": "Blue gradient", "width": 1200, "height": 800 }, "title": "Northwind Journal", "text": "A WordPress blog moved to Astro in an afternoon.", "action": { "label": "Read the case", "href": "/work/northwind/" } }, { "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "Green gradient", "width": 1200, "height": 800 }, "title": "Harbor & Co" }, { "image": { "src": "/kit-fixtures/photo-3.svg", "alt": "Orange gradient", "width": 1200, "height": 800 }, "title": "Field Notes" }] } },
   { "name": "two-standard-below", "props": { "label": "Gallery", "perView": "2", "aspect": "standard", "caption": "below", "loop": true, "slides": [{ "image": { "src": "/kit-fixtures/photo-4.svg", "alt": "", "width": 1200, "height": 800 }, "title": "Studio" }, { "image": { "src": "/kit-fixtures/photo-5.svg", "alt": "", "width": 1200, "height": 800 }, "title": "Workshop" }, { "image": { "src": "/kit-fixtures/photo-6.svg", "alt": "", "width": 1200, "height": 800 }, "title": "Garden" }] } },
-  { "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": "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 } } }
 ]

package/components/slider/meta.json

@@ -4,7 +4,7 @@
   "description": "A carousel of images 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", "image.ts", "types.ts"],
+  "shared": ["Button.astro", "KitImage.astro", "Section.astro", "SectionHeader.astro", "image.ts", "measured.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." },
@@ -17,16 +17,22 @@
     "nextLabel": { "type": "string", "content": false, "description": "ui-strings slider.next." },
     "slideLabel": { "type": "string", "content": false, "description": "ui-strings slider.slide." },
     "ofLabel": { "type": "string", "content": false, "description": "ui-strings slider.of." },
-    "loop": { "type": "boolean", "default": false, "content": false, "description": "Wrap from the last slide to the first." }
+    "loop": { "type": "boolean", "default": false, "content": false, "description": "Wrap from the last slide to the first." },
+    "id": { "type": "string", "default": "slider", "content": false, "description": "Unique on the page: names the track that the previous/next buttons control (aria-controls)." },
+    "heading": {"type": "string", "label": "Heading", "description": "The section heading."},
+    "intro": {"type": "text", "label": "Introduction", "description": "A sentence under the heading."},
+    "eyebrow": {"type": "string", "label": "Eyebrow", "description": "A short line above the heading."},
+    "actions": {"type": "array", "label": "Buttons", "required": false, "items": {"type": "object", "fields": {"label": {"type": "string", "label": "Label", "required": true, "description": "The button text."}, "href": {"type": "url", "label": "Link", "required": true, "description": "Where the button goes: a page on this site or a full address."}, "newTab": {"type": "boolean", "label": "Open in a new tab", "description": "Open the link in a new tab (an external site the reader should not leave for)."}, "style": {"type": "select", "label": "Style", "options": ["primary", "secondary", "ghost"], "description": "primary for the main action, secondary or ghost for the ones beside it."}}}, "description": "Buttons under the intro, in order; none by default."},
+    "measured": {"type": "object", "content": false, "description": "The source section's measured style (MeasuredStyle): frame width, padding, fill, image, columns per width, gap, text tone, radius, minimum height — all in pixels. Absent, the site's tokens; present, it wins over tone and columns. Values that are not a number, a colour or a known keyword are dropped.", "fields": {"containerPx": {"type": "integer", "min": 0, "max": 2560, "description": "The frame's content width."}, "padY": {"type": "integer", "min": 0, "max": 400, "description": "Top and bottom padding."}, "padX": {"type": "integer", "min": 0, "max": 200, "description": "The frame's side padding (gutter)."}, "bg": {"type": "object", "description": "The section's background.", "fields": {"color": {"type": "string", "description": "Fill colour: hex, rgb(a) or hsl(a)."}, "image": {"type": "string", "description": "Background image address (http(s) or root-relative), drawn behind the content."}, "overlay": {"type": "string", "description": "Colour or linear/radial gradient laid over the image or the fill."}, "size": {"type": "string", "description": "cover, contain or auto; anything else draws as cover."}, "position": {"type": "string", "description": "One or two of center/top/bottom/left/right or percentages."}}}, "columns": {"type": "object", "description": "Slides in view at 390 (base), 768 (md) and 1280 (lg) px; a missing width follows the narrower one. Wins over perView.", "fields": {"390": {"type": "integer", "min": 1, "max": 6, "description": "Phone."}, "768": {"type": "integer", "min": 1, "max": 6, "description": "Tablet."}, "1280": {"type": "integer", "min": 1, "max": 6, "description": "Desktop."}}}, "gap": {"type": "integer", "min": 0, "max": 200, "description": "Gap between slides."}, "tone": {"type": "select", "options": ["light", "dark"], "description": "What the text is set for: dark = light text on a dark band. Without it, a fill's own lightness decides."}, "align": {"type": "select", "options": ["start", "center", "end"], "description": "Where the heading and lead sit; read by a component whose own align is not set."}, "radius": {"type": "integer", "min": 0, "max": 200, "description": "Card and item corner radius."}, "minHeight": {"type": "integer", "min": 0, "max": 2000, "description": "The section's minimum height."}}}
   },
   "slots": {},
   "js": "embla",
   "dependencies": { "embla-carousel": "^8.6.0" },
   "sources": {
     "gutenberg": ["core/gallery:carousel"],
-    "elementor": ["elementor/image-carousel", "elementor/slides", "elementor/media-carousel"],
+    "elementor": ["elementor/image-carousel", "elementor/slides", "elementor/media-carousel", "elementor/nested-carousel", "elementor/loop-carousel"],
     "divi": ["divi/et_pb_slider", "divi/et_pb_fullwidth_slider", "divi/et_pb_post_slider"],
-    "classic": ["classic/revslider", "classic/metaslider", "classic/smart-slider"]
+    "classic": ["classic/revslider", "classic/metaslider", "classic/smart-slider", "classic/swiper", "classic/slick", "classic/splide", "classic/owl"]
   },
-  "a11y": "WAI-ARIA carousel pattern: a labelled region with aria-roledescription=carousel, slides as labelled groups ('Slide 2 of 5'), labelled previous/next buttons disabled at the ends, and dot buttons marking the current slide. No autoplay; with prefers-reduced-motion slides change without animation. Without JavaScript every slide is reachable by scrolling."
+  "a11y": "WAI-ARIA carousel pattern: a labelled region with aria-roledescription=carousel, slides as labelled groups ('Slide 2 of 5'), labelled previous/next buttons disabled at the ends, and dot buttons marking the current slide. The track and the buttons are tied by aria-controls, the row takes focus (arrow keys page it, polite live announcement). There is no autoplay, so nothing moves unasked; with prefers-reduced-motion slides change without animation. Without JavaScript every slide is reachable by scrolling."
 }

package/components/social-links/SocialLinks.astro

@@ -0,0 +1,74 @@
+---
+// Links to the site's profiles on other networks: a row of marks, names, or both. The network is read from each
+// address's host (`linkedin.com` → LinkedIn), so a link carries only its address; an address of no known network
+// is shown as its host. Stands alone (header, top bar, contact, author) or beside the footer's own row.
+import { tv } from 'tailwind-variants'
+import { addressLabel, NETWORK_MARKS, networkOf } from '../_shared/social'
+import { safeHref } from '../_shared/safe-url'
+
+const social = tv({
+  slots: {
+    list: 'flex flex-wrap items-center',
+    link: 'inline-flex items-center justify-center gap-2 text-current no-underline opacity-85 hover:opacity-100 focus-visible:opacity-100',
+    mark: 'shrink-0',
+  },
+  variants: {
+    display: { icons: {}, text: {}, both: {} },
+    size: {
+      sm: { list: 'gap-2', link: 'min-h-8 min-w-8 text-sm', mark: 'size-4' },
+      md: { list: 'gap-3', link: 'min-h-10 min-w-10 text-base', mark: 'size-5' },
+      lg: { list: 'gap-4', link: 'min-h-12 min-w-12 text-lg', mark: 'size-6' },
+    },
+    align: { start: { list: 'justify-start' }, center: { list: 'justify-center' }, end: { list: 'justify-end' } },
+    shape: { plain: {}, circle: { link: 'rounded-full border border-line' } },
+  },
+  // A bordered link that shows a name needs room around it; a bare mark stays a circle.
+  compoundVariants: [
+    { shape: 'circle', display: ['text', 'both'], class: { link: 'px-4' } },
+  ],
+  defaultVariants: { display: 'icons', size: 'md', align: 'start', shape: 'plain' },
+})
+
+interface Props {
+  /** The profiles, by address; a `label` names a link the host does not (a personal site, "Newsletter"). */
+  links: Array<{ href: string, label?: string | undefined }>
+  /** Whose profiles these are: the site or person's name, for "{name} on {network}". */
+  name?: string | undefined
+  /** Accessible name of the list ("Social media"). */
+  label?: string | undefined
+  /** How a link announces itself; `{name}` and `{network}` are replaced ("{name} on {network}"). Without a `name`, the network alone. */
+  profileLabel?: string | undefined
+  display?: 'icons' | 'text' | 'both' | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  align?: 'start' | 'center' | 'end' | undefined
+  shape?: 'plain' | 'circle' | undefined
+}
+
+const { links, name, label = 'Social media', profileLabel = '{name} on {network}', display, size, align, shape } = Astro.props
+const s = social({ display, size, align, shape })
+const entries = links.map(link => {
+  const network = networkOf(link.href)
+  const shown = link.label ?? network?.label ?? addressLabel(link.href)
+  const mark = network ? NETWORK_MARKS[network.key] : undefined
+  // The accessible name always contains the visible text; a mark alone is named by the network.
+  const accessible = name ? profileLabel.replace('{name}', name).replace('{network}', shown) : shown
+  return { href: link.href, shown, mark, accessible }
+})
+---
+{entries.length > 0 && (
+  <ul class={s.list()} aria-label={label} data-cr-part="social-links">
+    {entries.map(entry => {
+      // No mark (an unknown network), or the owner asked for names: the text is shown, never an empty link.
+      const text = display === 'text' || display === 'both' || !entry.mark
+      const mark = display !== 'text' && entry.mark
+      return (
+        <li>
+          <a href={safeHref(entry.href)} rel="me noopener" target="_blank" aria-label={entry.accessible} class={s.link()}>
+            {mark && <svg class={s.mark()} viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d={entry.mark} /></svg>}
+            {text && <span>{entry.shown}</span>}
+          </a>
+        </li>
+      )
+    })}
+  </ul>
+)}

package/components/social-links/fixtures.json

@@ -0,0 +1,67 @@
+[
+  {
+    "name": "icons",
+    "props": {
+      "name": "Northlight Studio",
+      "links": [
+        {
+          "href": "https://www.linkedin.com/company/northlight"
+        },
+        {
+          "href": "https://github.com/northlight"
+        },
+        {
+          "href": "https://x.com/northlight"
+        },
+        {
+          "href": "https://www.instagram.com/northlight/"
+        },
+        {
+          "href": "https://www.youtube.com/@northlight"
+        }
+      ]
+    }
+  },
+  {
+    "name": "text-small-end",
+    "props": {
+      "display": "text",
+      "size": "sm",
+      "align": "end",
+      "links": [
+        {
+          "href": "https://www.facebook.com/northlight"
+        },
+        {
+          "href": "https://northlight.example/newsletter",
+          "label": "Newsletter"
+        },
+        {
+          "href": "mailto:hello@northlight.example",
+          "label": "Email"
+        }
+      ]
+    }
+  },
+  {
+    "name": "both-large-centered-circle",
+    "props": {
+      "display": "both",
+      "size": "lg",
+      "align": "center",
+      "shape": "circle",
+      "name": "Ada Reyes",
+      "links": [
+        {
+          "href": "https://dribbble.com/ada"
+        },
+        {
+          "href": "https://www.behance.net/ada"
+        },
+        {
+          "href": "https://ada.example/about"
+        }
+      ]
+    }
+  }
+]

package/components/social-links/meta.json

@@ -0,0 +1,94 @@
+{
+  "id": "social-links",
+  "name": "SocialLinks",
+  "description": "Links to the site's profiles on other networks as marks, names or both. The network is read from each address's host (the table Team uses), so a link carries only its address; an unknown host is shown as itself. Stands alone in a header, top bar, contact section or author box.",
+  "category": "chrome",
+  "uses": [],
+  "shared": [
+    "social.ts",
+    "safe-url.ts"
+  ],
+  "variants": {
+    "display": {
+      "options": [
+        "icons",
+        "text",
+        "both"
+      ],
+      "default": "icons",
+      "description": "Mark only (named for assistive technology), the network's name, or both."
+    },
+    "size": {
+      "options": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md",
+      "description": "Mark and touch target size (32, 40 and 48 px minimum)."
+    },
+    "align": {
+      "options": [
+        "start",
+        "center",
+        "end"
+      ],
+      "default": "start",
+      "description": "Where the row sits in its container."
+    },
+    "shape": {
+      "options": [
+        "plain",
+        "circle"
+      ],
+      "default": "plain",
+      "description": "Bare marks, or each in a ringed circle."
+    }
+  },
+  "props": {
+    "links": {
+      "type": "array",
+      "required": true,
+      "items": {
+        "type": "object",
+        "fields": {
+          "href": {
+            "type": "url",
+            "required": true
+          },
+          "label": {
+            "type": "string"
+          }
+        }
+      },
+      "description": "The profiles; `label` only for a link whose host names no network (a personal site, \"Newsletter\")."
+    },
+    "name": {
+      "type": "string",
+      "description": "Whose profiles these are, for \"{name} on {network}\"."
+    },
+    "label": {
+      "type": "string",
+      "description": "Accessible name of the list (ui-strings social.label)."
+    },
+    "profileLabel": {
+      "type": "string",
+      "description": "How each link announces itself; {name} and {network} are replaced (ui-strings social.profile)."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": [
+      "core/social-links"
+    ],
+    "elementor": [
+      "elementor/social-icons"
+    ],
+    "divi": [
+      "divi/et_pb_social_media_follow"
+    ]
+  },
+  "a11y": "A labelled list of links; each link's accessible name is \"{name} on {network}\" and always contains the visible text; marks are aria-hidden; links open in a new tab with rel=me noopener; every target is at least 32 px."
+}

package/components/split/meta.json

@@ -12,6 +12,7 @@
     "KitImage.astro",
     "Section.astro",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {