@contentrain/astro-kit 0.31.0 → 0.33.0

package/components/pricing/meta.json

@@ -8,6 +8,7 @@
     "Button.astro",
     "Section.astro",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {
@@ -29,6 +30,31 @@
       ],
       "default": "default",
       "description": "Section background."
+    },
+    "layout": {
+      "options": [
+        "cards",
+        "table"
+      ],
+      "default": "cards",
+      "description": "cards: plans side by side. table: one comparison table, plans as columns and features as rows (for more than four plans)."
+    },
+    "featureStyle": {
+      "options": [
+        "check",
+        "dot",
+        "plain"
+      ],
+      "default": "plain",
+      "description": "The mark before each feature in the cards: a check, a dot, or the list's own bullets."
+    },
+    "billingToggle": {
+      "options": [
+        "none",
+        "radio"
+      ],
+      "default": "none",
+      "description": "radio: two labelled radios swap each plan's price for its priceAlt (monthly / yearly), with no script. The radio group is named from the section id, or a hash of the plans without one, so two toggles on a page stay independent."
     }
   },
   "props": {
@@ -90,6 +116,21 @@
             "type": "boolean",
             "label": "Featured",
             "description": "Raises the plan and gives it the badge."
+          },
+          "badge": {
+            "type": "string",
+            "label": "Badge",
+            "description": "A badge text on the plan (\"Best value\"); a featured plan without one reads the section's featuredLabel."
+          },
+          "priceAlt": {
+            "type": "string",
+            "label": "Price, other period",
+            "description": "The price for the other billing period (\"€150\"), shown when the toggle is on its second option."
+          },
+          "periodAlt": {
+            "type": "string",
+            "label": "Period, other period",
+            "description": "What the other price is per (\"/year\")."
           }
         }
       },
@@ -105,6 +146,152 @@
       "type": "string",
       "content": false,
       "description": "Anchor id of the section; the heading gets `<id>-title`."
+    },
+    "compact": {
+      "type": "boolean",
+      "default": false,
+      "content": false,
+      "description": "A denser card: smaller padding, gap and price."
+    },
+    "includedLabel": {
+      "type": "string",
+      "default": "Included",
+      "content": false,
+      "description": "Table cell text for readers where a plan has the feature."
+    },
+    "notIncludedLabel": {
+      "type": "string",
+      "default": "Not included",
+      "content": false,
+      "description": "Table cell text for readers where a plan lacks the feature."
+    },
+    "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": "Item columns at 390 (base), 768 (md) and 1280 (lg) px; a missing width follows the narrower one.",
+          "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 items."
+        },
+        "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."
+        }
+      }
+    },
+    "billingMainLabel": {
+      "type": "string",
+      "default": "Monthly",
+      "content": false,
+      "description": "First option of the billing toggle."
+    },
+    "billingAltLabel": {
+      "type": "string",
+      "default": "Yearly",
+      "content": false,
+      "description": "Second option of the billing toggle (the plans' priceAlt)."
+    },
+    "billingLegend": {
+      "type": "string",
+      "default": "Billing period",
+      "content": false,
+      "description": "Legend of the toggle, read to screen readers."
     }
   },
   "slots": {},
@@ -121,7 +308,7 @@
       "divi/et_pb_pricing_tables"
     ]
   },
-  "a11y": "Plans are a <ul>; each name is an <h3> under the section's <h2>, or an <h2> when the section has no heading. A featured plan is marked by a text badge and a ring, not colour alone. Buttons are links with their own label.",
+  "a11y": "Plans are a <ul>; each name is an <h3> under the section's <h2>, or an <h2> when the section has no heading. A featured plan is marked by a text badge and a ring, not colour alone. Buttons are links with their own label. The table layout is a real <table> with a caption, column and row headers, and Included / Not included text in every cell; the billing toggle is a fieldset with a legend and labelled radios.",
   "pattern": {
     "summary": "repeated plan units: name + price + feature list + button",
     "signals": [

package/components/search-box/SearchBox.astro

@@ -0,0 +1,51 @@
+---
+// A search field that sends the visitor to the site's search page (`/search?q=…`, a plain GET form, no JavaScript
+// here: the page itself shows the results). A labelled `role="search"` landmark; the label is visible only to
+// assistive technology unless `labelStyle` shows it.
+import { tv } from 'tailwind-variants'
+import { safeUrl } from '../_shared/safe-url'
+
+const search = tv({
+  slots: {
+    form: 'flex items-center gap-2',
+    label: 'sr-only',
+    input: 'min-w-0 flex-1 rounded-md border border-line bg-surface px-3 text-ink placeholder:text-ink-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+    button: 'inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-line bg-surface px-3 font-medium text-ink hover:bg-current/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+  },
+  variants: {
+    size: { sm: { input: 'h-9 text-sm', button: 'h-9 text-sm' }, md: { input: 'h-11 text-base', button: 'h-11 text-base' } },
+    width: { auto: { form: 'w-full max-w-xs' }, full: { form: 'w-full' } },
+    // `text`: the button reads "Search"; `icon`: a magnifier with the same name for assistive technology.
+    button: { text: {}, icon: { button: 'px-0 aspect-square' } },
+    labelStyle: { hidden: {}, shown: { form: 'flex-wrap', label: 'not-sr-only basis-full text-sm font-medium' } },
+  },
+  defaultVariants: { size: 'md', width: 'auto', button: 'text', labelStyle: 'hidden' },
+})
+
+interface Props {
+  /** The search page the form sends to (it reads `q`). */
+  action?: string | undefined
+  /** The landmark's and field's accessible name ("Search"). */
+  label?: string | undefined
+  placeholder?: string | undefined
+  /** The button's name ("Search"). */
+  submitLabel?: string | undefined
+  size?: 'sm' | 'md' | undefined
+  width?: 'auto' | 'full' | undefined
+  button?: 'text' | 'icon' | undefined
+  labelStyle?: 'hidden' | 'shown' | undefined
+  id?: string | undefined
+}
+
+const { action = '/search', label = 'Search', placeholder, submitLabel = label, size, width, button, labelStyle, id = 'site-search' } = Astro.props
+const s = search({ size, width, button, labelStyle })
+---
+<form role="search" method="get" action={safeUrl(action)} class={s.form()} data-cr-part="search-box">
+  <label for={`${id}-q`} class={s.label()}>{label}</label>
+  <input id={`${id}-q`} type="search" name="q" placeholder={placeholder} autocomplete="off" enterkeyhint="search" class={s.input()} />
+  <button type="submit" class={s.button()} aria-label={button === 'icon' ? submitLabel : undefined}>
+    {button === 'icon'
+      ? <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>
+      : submitLabel}
+  </button>
+</form>

package/components/search-box/fixtures.json

@@ -0,0 +1,31 @@
+[
+  {
+    "name": "default",
+    "props": {
+      "label": "Search",
+      "placeholder": "Search this site",
+      "submitLabel": "Search"
+    }
+  },
+  {
+    "name": "small-icon",
+    "props": {
+      "size": "sm",
+      "button": "icon",
+      "label": "Search",
+      "submitLabel": "Search",
+      "id": "header-search"
+    }
+  },
+  {
+    "name": "full-shown-label",
+    "props": {
+      "width": "full",
+      "labelStyle": "shown",
+      "label": "Search the journal",
+      "placeholder": "Search this site",
+      "submitLabel": "Search",
+      "id": "journal-search"
+    }
+  }
+]

package/components/search-box/meta.json

@@ -0,0 +1,75 @@
+{
+  "id": "search-box",
+  "name": "SearchBox",
+  "description": "A search field that sends the visitor to the site's search page (`/search?q=…`): a plain GET form with a labelled role=search landmark, no JavaScript. For a header slot or inline in a page.",
+  "category": "chrome",
+  "uses": [],
+  "shared": ["safe-url.ts"],
+  "variants": {
+    "size": {
+      "options": [
+        "sm",
+        "md"
+      ],
+      "default": "md",
+      "description": "Field and button height (36 and 44 px)."
+    },
+    "width": {
+      "options": [
+        "auto",
+        "full"
+      ],
+      "default": "auto",
+      "description": "A compact field (up to 20 rem) or the whole column."
+    },
+    "button": {
+      "options": [
+        "text",
+        "icon"
+      ],
+      "default": "text",
+      "description": "The button reads its label, or shows a magnifier named by the same label."
+    },
+    "labelStyle": {
+      "options": [
+        "hidden",
+        "shown"
+      ],
+      "default": "hidden",
+      "description": "The field's label for assistive technology only, or printed above the field."
+    }
+  },
+  "props": {
+    "action": {
+      "type": "url",
+      "default": "/search",
+      "description": "The search page the form sends to; it reads `q`."
+    },
+    "label": {
+      "type": "string",
+      "description": "The landmark's and field's accessible name (ui-strings search.label)."
+    },
+    "placeholder": {
+      "type": "string",
+      "description": "Hint text in the field (ui-strings search.placeholder)."
+    },
+    "submitLabel": {
+      "type": "string",
+      "description": "The button's name (ui-strings search.submit)."
+    },
+    "id": {
+      "type": "string",
+      "default": "site-search",
+      "description": "Prefix of the field's id; set it when two search boxes share a page."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": [
+      "core/search"
+    ]
+  },
+  "a11y": "A <form role=\"search\"> with a real <label> for the type=search field (sr-only unless shown); the button has a text or aria-label name; focus rings on both."
+}

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} />}