@contentrain/astro-kit 0.31.0 → 0.33.0

package/components/gallery/fixtures.json

@@ -187,5 +187,280 @@
         }
       ]
     }
+  },
+  {
+    "name": "row",
+    "props": {
+      "layout": "row",
+      "heading": "Strip",
+      "id": "strip",
+      "items": [
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-1.svg",
+            "alt": "Photo 1",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Porto at dawn"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-2.svg",
+            "alt": "Photo 2",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Train to Coimbra"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-3.svg",
+            "alt": "Photo 3",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Market day"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-4.svg",
+            "alt": "Photo 4",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Harbour"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-5.svg",
+            "alt": "Photo 5",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Old town"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-6.svg",
+            "alt": "Photo 6",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Last light"
+        }
+      ]
+    }
+  },
+  {
+    "name": "mosaic-wide-overlay",
+    "props": {
+      "layout": "mosaic",
+      "aspect": "16:9",
+      "captionStyle": "overlay",
+      "columns": "4",
+      "items": [
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-1.svg",
+            "alt": "Photo 1",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Porto at dawn"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-2.svg",
+            "alt": "Photo 2",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Train to Coimbra"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-3.svg",
+            "alt": "Photo 3",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Market day"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-4.svg",
+            "alt": "Photo 4",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Harbour"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-5.svg",
+            "alt": "Photo 5",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Old town"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-6.svg",
+            "alt": "Photo 6",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Last light"
+        }
+      ]
+    }
+  },
+  {
+    "name": "aspect-43-zoom",
+    "props": {
+      "aspect": "4:3",
+      "hoverEffect": "zoom",
+      "gap": "lg",
+      "columns": "5",
+      "items": [
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-1.svg",
+            "alt": "Photo 1",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Porto at dawn"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-2.svg",
+            "alt": "Photo 2",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Train to Coimbra"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-3.svg",
+            "alt": "Photo 3",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Market day"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-4.svg",
+            "alt": "Photo 4",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Harbour"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-5.svg",
+            "alt": "Photo 5",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Old town"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-6.svg",
+            "alt": "Photo 6",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Last light"
+        }
+      ]
+    }
+  },
+  {
+    "name": "gap-small-auto",
+    "props": {
+      "aspect": "auto",
+      "gap": "sm",
+      "columns": "6",
+      "open": "link",
+      "items": [
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-1.svg",
+            "alt": "Photo 1",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Porto at dawn"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-2.svg",
+            "alt": "Photo 2",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Train to Coimbra"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-3.svg",
+            "alt": "Photo 3",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Market day"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-4.svg",
+            "alt": "Photo 4",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Harbour"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-5.svg",
+            "alt": "Photo 5",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Old town"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-6.svg",
+            "alt": "Photo 6",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Last light"
+        }
+      ]
+    }
+  },
+  {
+    "name": "single",
+    "props": {
+      "items": [
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-1.svg",
+            "alt": "Photo 1",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Porto at dawn"
+        }
+      ]
+    }
   }
 ]

package/components/gallery/meta.json

@@ -4,27 +4,280 @@
   "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",
+    "safe-url.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/header/Header.astro

@@ -6,6 +6,8 @@ import Button from '../_shared/Button.astro'
 import KitImage from '../_shared/KitImage.astro'
 import type { ActionInput, ImageInput, NavItem } from '../_shared/types'
 import Nav from '../nav/Nav.astro'
+import SearchBox from '../search-box/SearchBox.astro'
+import { safeHref } from '../_shared/safe-url'
 
 const header = tv({
   slots: {
@@ -54,28 +56,33 @@ interface Props {
   homeHref?: string | undefined
   items: NavItem[]
   action?: ActionInput | undefined
+  /** A search field in the bar (a GET form to the site's search page); below the bar until lg. */
+  search?: { label?: string | undefined, placeholder?: string | undefined, submitLabel?: string | undefined, action?: string | undefined } | undefined
   navLabel?: string | undefined
   menuLabel?: string | undefined
   closeLabel?: string | undefined
   layout?: 'split' | 'centered' | 'brand-left' | undefined
   tone?: 'default' | 'inverse' | 'transparent' | undefined
   position?: 'static' | 'sticky' | undefined
+  /** How submenus open on wide screens: a list under the item, or a wide panel of columns. */
+  menu?: 'flyout' | 'mega' | undefined
 }
 
-const { siteName, tagline, brandSize, brandWeight, brandTracking, bordered, offsetTop, padTop, padBottom, linkNav, logo, showName = true, homeHref = '/', items, action, navLabel, menuLabel, closeLabel, layout, tone, position } = Astro.props
+const { siteName, tagline, brandSize, brandWeight, brandTracking, bordered, offsetTop, padTop, padBottom, linkNav, logo, showName = true, homeHref = '/', items, action, search, navLabel, menuLabel, closeLabel, layout, tone, position, menu } = Astro.props
 const { root, inner, brand } = header({ layout, tone, position, bordered })
 const rootStyle = offsetTop ? `margin-top: ${offsetTop}` : undefined
 const innerStyle = [padTop && `padding-top: ${padTop}`, padBottom && `padding-bottom: ${padBottom}`].filter(Boolean).join('; ') || undefined
 const brandStyle = [brandSize && `font-size: ${brandSize}`, brandWeight && `font-weight: ${brandWeight}`, brandTracking && `letter-spacing: ${brandTracking}`].filter(Boolean).join('; ') || undefined
 // A tagline under the name keeps its line on a phone, as themes print it: the navigation wraps below.
-const wrap = tagline ? 'flex-wrap md:flex-nowrap' : undefined
+// The search field sits in the bar from lg; at md the bar already holds the navigation, so the field keeps its own row.
+const wrap = search ? 'flex-wrap lg:flex-nowrap' : tagline ? 'flex-wrap md:flex-nowrap' : undefined
 ---
 <header class={root()} style={rootStyle}>
   <div class={inner({ class: wrap })} style={innerStyle}>
     {tagline
       ? (
         <div class="flex min-w-0 basis-full flex-col gap-1 md:basis-auto">
-          <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandStyle} data-kit-brand>
+          <a href={safeHref(homeHref)} class={brand()} aria-label={showName ? undefined : siteName} style={brandStyle} data-kit-brand>
             {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
             {showName && <span>{siteName}</span>}
           </a>
@@ -83,13 +90,18 @@ const wrap = tagline ? 'flex-wrap md:flex-nowrap' : undefined
         </div>
       )
       : (
-        <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandStyle} data-kit-brand>
+        <a href={safeHref(homeHref)} class={brand()} aria-label={showName ? undefined : siteName} style={brandStyle} data-kit-brand>
           {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
           {showName && <span>{siteName}</span>}
         </a>
       )}
+    {search && (
+      <div class="order-last basis-full lg:order-none lg:ms-auto lg:basis-auto">
+        <SearchBox action={search.action} label={search.label} placeholder={search.placeholder} submitLabel={search.submitLabel} size="sm" id="header-search" />
+      </div>
+    )}
     <div class:list={['flex items-center gap-4', layout === 'centered' ? 'justify-center' : 'ms-auto']}>
-      <Nav items={items} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} part="nav-header" color={linkNav ? 'link' : 'current'} align={layout === 'centered' ? 'center' : 'end'} />
+      <Nav items={items} menu={menu} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} part="nav-header" color={linkNav ? 'link' : 'current'} align={layout === 'centered' ? 'center' : 'end'} />
       {action && <Button action={action} size="sm" class="hidden md:inline-flex" />}
     </div>
   </div>