@contentrain/astro-kit 0.31.0 → 0.33.0

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/Split.astro

@@ -5,59 +5,121 @@
 import { tv } from 'tailwind-variants'
 import { renderMarkdown } from '../../../lib/markdown'
 import Button from '../_shared/Button.astro'
+import Embed from '../embed/Embed.astro'
+import FeatureList from '../feature-list/FeatureList.astro'
 import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
-import type { ActionInput, ImageInput } from '../_shared/types'
+import type { ActionInput, ImageInput, MeasuredStyle } from '../_shared/types'
 
 const split = tv({
   slots: {
-    grid: 'grid items-center gap-10 md:grid-cols-2 md:gap-16',
+    grid: 'grid items-center gap-10 md:gap-16',
     copy: 'flex flex-col gap-5',
     eyebrow: 'text-sm font-semibold tracking-wide uppercase opacity-80',
     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',
     actions: 'flex flex-wrap gap-3 pt-2',
-    media: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
+    media: 'overflow-hidden',
+    image: 'h-auto w-full object-cover',
   },
   variants: {
     // Source order is text first; `start` moves the image before it on wide screens only.
     imageSide: { start: { media: 'md:order-first' }, end: {} },
+    // The text column's share against the image's (the columns follow the sides, see `columns` below).
+    ratio: { '1:1': {}, '5:7': {}, '7:5': {} },
+    // contain: the image at its own proportions. cover: it fills the column's height.
+    imageFit: { contain: {}, cover: { grid: 'items-stretch', media: 'min-h-72 md:h-full', image: 'h-full min-h-72' } },
+    imageShape: {
+      none: { media: 'rounded-none' },
+      rounded: { media: 'rounded-[var(--radius-image,var(--radius-card))]' },
+      circle: { media: 'mx-auto aspect-square w-full max-w-lg rounded-full', image: 'h-full' },
+    },
+    // edge: the image runs on to the viewport's edge on its side (wide screens).
+    imageBleed: { none: {}, edge: { media: 'rounded-none' } },
+    // Phones show the text first, as the source does, or the picture first when it is the content itself.
+    stackOrder: { 'text-first': {}, 'media-first': { media: 'max-md:order-first' } },
+    // The media column follows the reader down a long text (wide screens).
+    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: { eyebrow: 'opacity-100' } },
+    tone: { default: {}, muted: {}, inverse: {}, accent: { eyebrow: 'opacity-100' }, brand: { eyebrow: 'opacity-100' }, none: {} },
   },
-  defaultVariants: { imageSide: 'end', align: 'start', tone: 'default' },
+  defaultVariants: { imageSide: 'end', ratio: '1:1', imageFit: 'contain', imageShape: 'rounded', imageBleed: 'none', stackOrder: 'text-first', sticky: false, align: 'start', tone: 'default' },
 })
 
+// Literal class names, so the stylesheet builder sees them: the text column's share first, the image's second; a
+// picture before the text on wide screens swaps the two columns.
+const COLUMNS = {
+  text: { '1:1': 'md:grid-cols-2', '5:7': 'md:grid-cols-[5fr_7fr]', '7:5': 'md:grid-cols-[7fr_5fr]' },
+  image: { '1:1': 'md:grid-cols-2', '5:7': 'md:grid-cols-[7fr_5fr]', '7:5': 'md:grid-cols-[5fr_7fr]' },
+} as const
+// The viewport's edge, from the content's edge: what is left of the page's width, halved.
+const BLEED = {
+  end: 'md:-me-[calc((100vw-min(var(--container-page),100vw-2*var(--spacing-gutter,2rem)))/2)]',
+  start: 'md:-ms-[calc((100vw-min(var(--container-page),100vw-2*var(--spacing-gutter,2rem)))/2)]',
+} as const
+
+interface Feature {
+  title: string
+  text?: string | undefined
+  /** A kit icon name (check, star, bolt, shield, heart, globe, clock, chat). */
+  icon?: string | undefined
+}
+
 interface Props {
   heading: string
+  /** The heading's level: 2 under the page title; 3 or 4 when the section sits inside another. */
+  headingLevel?: 2 | 3 | 4 | undefined
   eyebrow?: string | undefined
   /** Markdown, rendered at build time. */
   body?: string | undefined
   actions?: ActionInput[] | undefined
   image?: ImageInput | undefined
+  /** Short points under the text, each with a title and a line. */
+  features?: Feature[] | undefined
+  /** A video page (YouTube, Vimeo); the image is its poster and nothing loads from the provider until it is played. */
+  videoUrl?: string | undefined
+  /** The video's text for the play button. */
+  playLabel?: string | undefined
   imageSide?: 'start' | 'end' | undefined
+  ratio?: '1:1' | '5:7' | '7:5' | undefined
+  imageFit?: 'contain' | 'cover' | undefined
+  imageShape?: 'none' | 'rounded' | 'circle' | undefined
+  imageBleed?: 'none' | 'edge' | undefined
+  mediaKind?: 'image' | 'video' | undefined
+  featureStyle?: 'check' | 'icon' | undefined
+  stackOrder?: 'text-first' | 'media-first' | undefined
+  sticky?: boolean | undefined
   align?: 'start' | 'center' | undefined
-  tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
+  tone?: 'default' | 'muted' | 'inverse' | 'accent' | 'brand' | 'none' | undefined
+  /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image, columns per width, gap. Absent, the site's tokens; present, it wins over tone and columns. */
+  measured?: MeasuredStyle | undefined
   id?: string | undefined
 }
 
-const { heading, eyebrow, body, actions = [], image, imageSide, align, tone, id } = Astro.props
-const s = split({ imageSide, align, tone })
+const { heading, headingLevel = 2, eyebrow, body, actions = [], image, features = [], videoUrl, playLabel, imageSide, ratio = '1:1', imageFit, imageShape, imageBleed, mediaKind, featureStyle = 'check', stackOrder, sticky = false, align, tone, measured, id } = Astro.props
+const s = split({ imageSide, ratio, imageFit, imageShape, imageBleed, stackOrder, sticky, align, tone })
+const Heading = `h${headingLevel}` as 'h2'
+const columns = COLUMNS[imageSide === 'start' ? 'image' : 'text'][ratio]
+const bleed = imageBleed === 'edge' ? BLEED[imageSide === 'start' ? 'start' : 'end'] : undefined
+const video = mediaKind === 'video' && videoUrl
 const headingId = id ? `${id}-title` : undefined
 const html = await renderMarkdown(body)
 ---
-<Section tone={tone} id={id} aria-labelledby={headingId}>
-  <div class={s.grid()}>
+<Section measured={measured} tone={tone} id={id} aria-labelledby={headingId} class={bleed ? 'overflow-x-clip' : undefined}>
+  <div class:list={[s.grid(), columns]}>
     <div class={s.copy()}>
       {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
-      <h2 id={headingId} class={s.heading()}>{heading}</h2>
+      <Heading id={headingId} class={s.heading()}>{heading}</Heading>
       {html && <div class={s.body()} data-kit-text set:html={html} />}
+      {features.length > 0 && <FeatureList items={features} columns="2" style={featureStyle} tone={tone === 'brand' || tone === 'none' ? undefined : tone} bare titleLevel={Math.min(5, headingLevel + 1) as 3 | 4 | 5} />}
       {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
     </div>
-    {image && (
-      <div class={s.media()}>
-        <KitImage image={image} sizes="(min-width: 768px) 50vw, 100vw" class="h-auto w-full object-cover" />
+    {(video || image) && (
+      <div class:list={[s.media(), bleed]}>
+        {video
+          ? <div class="[&>figure]:my-0 [&>figure]:max-w-none"><Embed url={videoUrl} title={heading} poster={image} playLabel={playLabel} aspect="video" width="page" /></div>
+          : image && <KitImage image={image} sizes="(min-width: 768px) 50vw, 100vw" class={s.image()} />}
       </div>
     )}
   </div>