@contentrain/astro-kit 0.31.0 → 0.32.0

package/components/gallery/meta.json

@@ -4,27 +4,279 @@
   "description": "Images in a square grid or in masonry columns, with optional captions. A click shows the image large in a native popover (no script), opens the image file, or does nothing.",
   "category": "section",
   "uses": [],
-  "shared": ["KitImage.astro", "Section.astro", "image.ts", "measured.ts", "types.ts"],
+  "shared": [
+    "KitImage.astro",
+    "Section.astro",
+    "image.ts",
+    "measured.ts",
+    "types.ts"
+  ],
   "variants": {
-    "layout": { "options": ["grid", "masonry"], "default": "grid", "description": "grid: square crops in rows. masonry: columns that keep each image's shape." },
-    "columns": { "options": ["2", "3", "4"], "default": "3", "description": "Columns on wide screens; phones show two." },
-    "open": { "options": ["popover", "link", "none"], "default": "popover", "description": "popover: the image opens large in place (Popover API; Escape or a click outside closes it). link: the thumbnail links to the image file (the WordPress 'link to media file'). none: images only." }
+    "layout": {
+      "options": [
+        "grid",
+        "masonry",
+        "row",
+        "mosaic"
+      ],
+      "default": "grid",
+      "description": "grid: equal tiles. masonry: columns keeping each image's height. row: a scroll-snap strip (a focusable region). mosaic: the first tile spans 2×2."
+    },
+    "columns": {
+      "options": [
+        "2",
+        "3",
+        "4",
+        "5",
+        "6"
+      ],
+      "default": "3",
+      "description": "Images per row on wide screens; two on phones."
+    },
+    "open": {
+      "options": [
+        "popover",
+        "link",
+        "none"
+      ],
+      "default": "popover",
+      "description": "popover: the image opens large in place (Popover API; Escape or a click outside closes it). link: the thumbnail links to the image file (the WordPress 'link to media file'). none: images only."
+    },
+    "aspect": {
+      "options": [
+        "square",
+        "4:3",
+        "16:9",
+        "auto"
+      ],
+      "default": "square",
+      "description": "Tile shape (a masonry keeps each image's own)."
+    },
+    "gap": {
+      "options": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md",
+      "description": "Space between tiles."
+    },
+    "captionStyle": {
+      "options": [
+        "below",
+        "overlay"
+      ],
+      "default": "below",
+      "description": "below: caption under the image. overlay: over the image foot on hover and keyboard focus, always shown below md."
+    },
+    "hoverEffect": {
+      "options": [
+        "none",
+        "zoom"
+      ],
+      "default": "none",
+      "description": "zoom: a slight scale on hover, only where reduced motion is not requested."
+    }
   },
   "props": {
-    "items": { "type": "array", "label": "Images", "required": true, "items": { "type": "object", "fields": { "image": { "type": "image", "label": "Image", "required": true, "description": "The image." }, "imageAlt": { "type": "string", "label": "Image description", "description": "What the image shows, for readers who cannot see it." }, "caption": { "type": "string", "label": "Caption", "description": "Caption under the enlarged image." } } }, "description": "The images in order (core/gallery inner images, Elementor gallery items, Divi gallery_ids)." },
-    "heading": { "type": "string", "label": "Heading", "description": "Section heading above the images." },
-    "closeLabel": { "type": "string", "content": false, "description": "Text of the viewer's close button (ui-strings gallery.close)." },
-    "tone": { "type": "select", "options": ["default", "muted", "inverse", "accent"], "content": false, "description": "Section background." },
-    "id": { "type": "string", "content": false, "description": "Section id, unique per page: viewer ids derive from it (`<id>-image-<n>`)." }
+    "items": {
+      "type": "array",
+      "label": "Images",
+      "required": true,
+      "items": {
+        "type": "object",
+        "fields": {
+          "image": {
+            "type": "image",
+            "label": "Image",
+            "required": true,
+            "description": "The image."
+          },
+          "imageAlt": {
+            "type": "string",
+            "label": "Image description",
+            "description": "What the image shows, for readers who cannot see it."
+          },
+          "caption": {
+            "type": "string",
+            "label": "Caption",
+            "description": "Caption under the enlarged image."
+          },
+          "full": {
+            "type": "image",
+            "label": "Full-size image",
+            "description": "The original file the viewer shows large, where the source links to it; otherwise the image itself."
+          }
+        }
+      },
+      "description": "The images in order (core/gallery inner images, Elementor gallery items, Divi gallery_ids)."
+    },
+    "heading": {
+      "type": "string",
+      "label": "Heading",
+      "description": "Section heading above the images."
+    },
+    "closeLabel": {
+      "type": "string",
+      "content": false,
+      "description": "Text of the viewer's close button (ui-strings gallery.close)."
+    },
+    "tone": {
+      "type": "select",
+      "options": [
+        "default",
+        "muted",
+        "inverse",
+        "accent"
+      ],
+      "content": false,
+      "description": "Section background."
+    },
+    "id": {
+      "type": "string",
+      "content": false,
+      "description": "Section id, unique per page: viewer ids derive from it (`<id>-image-<n>`)."
+    },
+    "enlargeLabel": {
+      "type": "string",
+      "default": "Enlarge",
+      "content": false,
+      "description": "Prefix of each thumbnail button's name for screen readers (\"Enlarge: <description>\")."
+    },
+    "regionLabel": {
+      "type": "string",
+      "default": "Images",
+      "content": false,
+      "description": "Name of the scrolling row's region when the gallery has no heading."
+    },
+    "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."
+        }
+      }
+    }
   },
   "slots": {},
   "js": "none",
   "dependencies": {},
   "sources": {
-    "gutenberg": ["core/gallery"],
-    "elementor": ["elementor/image-gallery", "elementor/gallery"],
-    "divi": ["divi/et_pb_gallery"],
-    "classic": ["classic/gallery"]
+    "gutenberg": [
+      "core/gallery"
+    ],
+    "elementor": [
+      "elementor/image-gallery",
+      "elementor/gallery"
+    ],
+    "divi": [
+      "divi/et_pb_gallery"
+    ],
+    "classic": [
+      "classic/gallery"
+    ]
   },
-  "a11y": "A list of figures. In popover mode each thumbnail is a <button> named by the image's alt (or caption) that opens the viewer; the viewer has a visible close button, and Escape closes it, returning focus to the thumbnail. Captions are <figcaption>s."
+  "a11y": "A list of figures. In popover mode each thumbnail is a <button> named by the image's alt (or caption) that opens the viewer; the viewer has a visible close button, and Escape closes it, returning focus to the thumbnail. Captions are <figcaption>s. A scrolling row is a labelled region with tabindex 0 so the keyboard can scroll it; thumbnail buttons are named \"Enlarge: …\". The viewer has no next/previous (it would need script)."
 }

package/components/logo-cloud/LogoCloud.astro

@@ -1,32 +1,58 @@
 ---
-// A grid of client or partner logos, each optionally linked, under an
-// optional heading.
+// A grid, a row or an endless strip of client or partner logos, each
+// optionally linked, under an optional heading. The strip is CSS only and
+// stands still for visitors who ask for reduced motion.
 import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import Section, { type Tone } from '../_shared/Section.astro'
 import { imageOf, type ImageSource } from '../_shared/image'
+import { measuredGrid } from '../_shared/measured'
+import type { MeasuredStyle } from '../_shared/types'
 
 const cloud = tv({
   slots: {
-    heading: 'mb-8 text-center text-sm font-semibold tracking-wide uppercase opacity-80',
+    heading: 'mb-8 text-sm font-semibold tracking-wide uppercase opacity-80',
     list: 'grid grid-cols-2 items-center gap-x-8 gap-y-10 sm:grid-cols-3',
     item: 'flex items-center justify-center',
     logo: 'h-10 w-auto max-w-full object-contain transition duration-200',
   },
   variants: {
+    layout: {
+      grid: {},
+      // One line of logos that wraps on a narrow screen; the logos keep their own widths.
+      row: { list: 'flex flex-wrap items-center gap-x-10 gap-y-6', item: 'shrink-0' },
+      // Two copies of the list side by side, moved by one keyframe; see the style block below.
+      marquee: { list: 'kit-marquee-track flex w-max items-center gap-x-12', item: 'shrink-0' },
+    },
     columns: {
       '2': { list: 'sm:grid-cols-2' },
       '3': { list: 'md:grid-cols-3' },
       '4': { list: 'md:grid-cols-4' },
+      '5': { list: 'md:grid-cols-3 lg:grid-cols-5' },
+      '6': { list: 'md:grid-cols-3 lg:grid-cols-6' },
+    },
+    // A fixed height, the width follows: logos come in every aspect ratio.
+    logoHeight: {
+      sm: { logo: 'h-8' },
+      md: {},
+      lg: { logo: 'h-14' },
     },
     style: {
       plain: {},
       // Colour comes back on hover and on keyboard focus of the logo's link.
       grayscale: { logo: 'opacity-70 grayscale group-hover:opacity-100 group-hover:grayscale-0 group-focus-visible:opacity-100 group-focus-visible:grayscale-0' },
+      // Dark logos on a dark band: drawn white, full strength.
+      'mono-light': { logo: 'brightness-0 invert' },
     },
+    align: { center: { heading: 'text-center' }, start: { heading: 'text-start' } },
     tone: { default: {}, muted: {}, inverse: {}, accent: { heading: 'opacity-100' } },
   },
-  defaultVariants: { columns: '4', style: 'plain', tone: 'default' },
+  compoundVariants: [
+    { layout: 'row', align: 'center', class: { list: 'justify-center' } },
+    { layout: 'row', align: 'start', class: { list: 'justify-start' } },
+    { layout: 'grid', align: 'start', class: { item: 'justify-start' } },
+  ],
+  defaultVariants: { layout: 'grid', columns: '4', logoHeight: 'md', style: 'plain', align: 'center', tone: 'default' },
 })
 
 interface Item {
@@ -40,30 +66,68 @@ interface Item {
 interface Props {
   heading?: string | undefined
   items: Item[]
-  columns?: '2' | '3' | '4' | undefined
-  style?: 'plain' | 'grayscale' | undefined
+  layout?: 'grid' | 'row' | 'marquee' | undefined
+  columns?: '2' | '3' | '4' | '5' | '6' | undefined
+  logoHeight?: 'sm' | 'md' | 'lg' | undefined
+  style?: 'plain' | 'grayscale' | 'mono-light' | undefined
+  align?: 'center' | 'start' | undefined
   tone?: Tone | 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, items, columns, style, tone, id } = Astro.props
-const s = cloud({ columns, style, tone })
+const { heading, items, layout, columns, logoHeight, style, align, tone, measured, id } = Astro.props
+const s = cloud({ layout, columns, logoHeight, style, align, tone })
+// Measured columns and gap shape the grid layout only; a row or a strip keeps its own flow.
+const grid = (layout ?? 'grid') === 'grid' ? measuredGrid(measured) : undefined
 const headingId = heading && id ? `${id}-title` : undefined
+const marquee = layout === 'marquee'
+// A linked logo with no name is read as the site it goes to, never as a made-up word.
+const hostOf = (href: string) => {
+  try { return new URL(href, 'https://x.invalid').host.replace(/^www\./, '').replace(/^x\.invalid$/, '') } catch { return '' }
+}
+const shown = items.flatMap((item) => {
+  const image = imageOf(item.image, item.imageAlt || (item.href ? hostOf(item.href) : ''))
+  return image ? [{ image, href: item.href }] : []
+})
+// About four seconds a logo: the strip reads at a pace, whatever its length.
+const duration = `${Math.max(20, shown.length * 4)}s`
 ---
-<Section tone={tone} id={id} aria-labelledby={headingId}>
+<Section measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
   {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
-  <ul class={s.list()}>
-    {items.map(item => {
-      const image = imageOf(item.image, item.imageAlt)
-      if (!image) return null
-      const logo = <KitImage image={image} sizes="160px" class={s.logo()} />
-      return (
+  <div class:list={[marquee && 'kit-marquee overflow-hidden']} style={marquee ? `--kit-marquee-duration:${duration}` : undefined}>
+    <ul class={s.list({ class: grid })}>
+      {shown.map(({ image, href }) => (
         <li class={s.item()}>
-          {item.href
-            ? <a href={item.href} class="group rounded-sm focus-visible:outline-2 focus-visible:outline-offset-4">{logo}</a>
-            : <span class="group">{logo}</span>}
+          {href
+            ? <a href={href} class="group rounded-sm focus-visible:outline-2 focus-visible:outline-offset-4"><KitImage image={image} sizes="160px" class={s.logo()} /></a>
+            : <span class="group"><KitImage image={image} sizes="160px" class={s.logo()} /></span>}
         </li>
-      )
-    })}
-  </ul>
+      ))}
+    </ul>
+    {marquee && (
+      // The second copy exists only to close the loop: hidden from assistive technology and from the tab order.
+      <ul class={`${s.list()} kit-marquee-copy`} aria-hidden="true" inert>
+        {shown.map(({ image }) => (
+          <li class={s.item()}><span class="group"><KitImage image={image} sizes="160px" class={s.logo()} /></span></li>
+        ))}
+      </ul>
+    )}
+  </div>
 </Section>
+<style>
+  /* Reduced motion (the default here): one wrapped row, no copy. */
+  .kit-marquee .kit-marquee-track { width: auto; flex-wrap: wrap; justify-content: center; }
+  .kit-marquee .kit-marquee-copy { display: none; }
+  @media (prefers-reduced-motion: no-preference) {
+    .kit-marquee { display: flex; width: 100%; mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
+    .kit-marquee .kit-marquee-track,
+    .kit-marquee .kit-marquee-copy { display: flex; flex-wrap: nowrap; width: max-content; flex-shrink: 0; justify-content: flex-start; padding-inline-end: 3rem; animation: kit-marquee var(--kit-marquee-duration, 40s) linear infinite; }
+    .kit-marquee:hover .kit-marquee-track,
+    .kit-marquee:hover .kit-marquee-copy,
+    .kit-marquee:focus-within .kit-marquee-track,
+    .kit-marquee:focus-within .kit-marquee-copy { animation-play-state: paused; }
+  }
+  @keyframes kit-marquee { to { transform: translateX(-100%); } }
+</style>