@contentrain/astro-kit 0.4.0 → 0.6.0

package/components/_shared/KitImage.astro

@@ -8,11 +8,14 @@
 //    astro.config `image.remotePatterns`): fetched at build time when its
 //    size is known, and resized the same way.
 //
+// Without a stored size, the one the migration measured (src/lib/media.ts).
+//
 // Anything else — a vector, a host the site does not allow, a remote image of
 // unknown size — is a plain lazy <img>: nothing is fetched from a host the
 // site did not name.
 import type { ImageMetadata } from 'astro'
 import { Image } from 'astro:assets'
+import { mediaSize } from '../../../lib/media'
 import type { ImageInput } from './types'
 
 interface Props {
@@ -27,7 +30,10 @@ interface Props {
 // Raster files under public/, loaded only when a page shows one.
 const LOCAL = import.meta.glob<ImageMetadata>('/public/**/*.{avif,gif,jpeg,jpg,png,tif,tiff,webp,AVIF,GIF,JPEG,JPG,PNG,TIF,TIFF,WEBP}', { import: 'default' })
 
-const { image, sizes = '100vw', class: className, priority = false } = Astro.props
+const { image: given, sizes = '100vw', class: className, priority = false } = Astro.props
+// Content stores an address; the size the migration measured comes from the site's media table.
+const measured = given.width && given.height ? undefined : mediaSize(given.src)
+const image: ImageInput = measured ? { ...given, ...measured } : given
 const loading = priority ? 'eager' : 'lazy'
 const fetchpriority = priority ? 'high' : 'auto'
 const path = image.src.startsWith('/') && !image.src.startsWith('//') ? image.src.split(/[?#]/)[0]! : undefined
@@ -42,7 +48,7 @@ const STEPS = [320, 640, 960, 1280, 1600, 1920, 2560]
 const widthsUpTo = (max: number) => [...STEPS.filter(step => step < max), max]
 ---
 {local
-  ? <Image src={local} alt={image.alt} {...size} widths={widthsUpTo(image.width ?? local.width)} sizes={sizes} class={className} loading={loading} fetchpriority={fetchpriority} />
+  ? <Image src={local} alt={image.alt ?? ''} {...size} widths={widthsUpTo(image.width ?? local.width)} sizes={sizes} class={className} loading={loading} fetchpriority={fetchpriority} />
   : image.width && image.height && path === undefined
-    ? <Image src={image.src} alt={image.alt} width={image.width} height={image.height} widths={widthsUpTo(image.width)} sizes={sizes} class={className} loading={loading} fetchpriority={fetchpriority} />
-    : <img src={image.src} alt={image.alt} width={image.width} height={image.height} class={className} loading={loading} fetchpriority={fetchpriority} decoding="async" />}
+    ? <Image src={image.src} alt={image.alt ?? ''} width={image.width} height={image.height} widths={widthsUpTo(image.width)} sizes={sizes} class={className} loading={loading} fetchpriority={fetchpriority} />
+    : <img src={image.src} alt={image.alt ?? ''} width={image.width} height={image.height} class={className} loading={loading} fetchpriority={fetchpriority} decoding="async" />}

package/components/_shared/image.ts

@@ -0,0 +1,14 @@
+import type { ImageInput } from './types'
+
+/**
+ * An image in a list item: the address alone, with its text in a sibling field (`image` + `imageAlt`),
+ * so a page singleton stays within Contentrain's nesting depth. The object form is still read, and
+ * leaves in 0.7.
+ */
+export type ImageSource = ImageInput | string
+
+/** A list item's image as the kit draws it: its address, its text, and the size the site measured. */
+export function imageOf(image: ImageSource | undefined, alt?: string | undefined): ImageInput | undefined {
+  if (image === undefined || image === '') return undefined
+  return typeof image === 'string' ? { src: image, alt: alt ?? '' } : { ...image, alt: alt ?? image.alt }
+}

package/components/_shared/types.ts

@@ -4,7 +4,8 @@
 /** An image with the text that replaces it. Dimensions let astro:assets size it. */
 export interface ImageInput {
   src: string
-  alt: string
+  /** What the image shows. Empty or absent means decoration: it renders `alt=""`, never invented text. */
+  alt?: string | undefined
   width?: number | undefined
   height?: number | undefined
 }

package/components/announcement/Announcement.astro

@@ -0,0 +1,53 @@
+---
+// A one-line notice above the header (sale, event, opening hours change) with
+// an optional link, which the visitor can close. Replaces Elementor alerts and
+// notification-bar plugins.
+//
+// Closing needs no JS: the bar is an open <details>, and the close button is
+// its <summary>, so a click collapses it natively (keyboard included). The
+// Popover API would need the bar to start as a hidden popover, and an open
+// <details> is the only built-in element that starts visible and hides itself.
+// Dismissal is not remembered; the bar comes back on the next page.
+import { tv } from 'tailwind-variants'
+
+const announcement = tv({
+  slots: {
+    root: 'relative text-sm not-open:hidden',
+    bar: 'mx-auto flex max-w-page items-center justify-center gap-x-3 px-10 py-2 text-center',
+    link: 'font-semibold underline decoration-current/40 underline-offset-4 hover:decoration-current',
+    close: 'absolute inset-y-0 right-2 flex cursor-pointer list-none items-center px-2 [&::-webkit-details-marker]:hidden',
+  },
+  variants: {
+    tone: {
+      default: { root: 'border-b border-line bg-surface text-ink' },
+      muted: { root: 'bg-surface-muted text-ink' },
+      inverse: { root: 'bg-ink text-surface' },
+      accent: { root: 'bg-accent text-accent-ink' },
+    },
+  },
+  defaultVariants: { tone: 'accent' },
+})
+
+interface Props {
+  message: string
+  href?: string | undefined
+  linkLabel?: string | undefined
+  closeLabel?: string | undefined
+  tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
+}
+
+const { message, href, linkLabel, closeLabel = 'Close announcement', tone } = Astro.props
+const s = announcement({ tone })
+---
+<!--
+  The summary comes first as <details> requires; it is positioned over the end
+  of the bar, so it still reads after the message. Once closed the whole
+  element is display:none (not-open:hidden), leaving no empty strip.
+-->
+<details open class={s.root()}>
+  <summary class={s.close()} aria-label={closeLabel}><span aria-hidden="true">✕</span></summary>
+  <div class={s.bar()}>
+    <p>{message}</p>
+    {href && <a href={href} class={s.link()}>{linkLabel ?? 'Learn more'}</a>}
+  </div>
+</details>

package/components/announcement/fixtures.json

@@ -0,0 +1,6 @@
+[
+  {"name": "accent", "props": {"message": "Spring sale: 20% off every course until 30 April.", "href": "/sale", "linkLabel": "See the courses"}},
+  {"name": "default", "props": {"message": "We are closed on 1 May.", "tone": "default"}},
+  {"name": "muted", "props": {"message": "New: gift cards are here.", "href": "/gift-cards", "tone": "muted"}},
+  {"name": "inverse", "props": {"message": "Join us at the open studio on 12 June.", "href": "/events/open-studio", "linkLabel": "RSVP", "tone": "inverse"}}
+]

package/components/announcement/meta.json

@@ -0,0 +1,53 @@
+{
+  "id": "announcement",
+  "name": "Announcement",
+  "description": "A one-line notice above the header (sale, event, changed hours) with an optional link. The visitor closes it with no JS (an open <details> whose summary is the close button); the dismissal is not remembered across pages.",
+  "category": "chrome",
+  "uses": [],
+  "shared": [],
+  "variants": {
+    "tone": {
+      "options": [
+        "default",
+        "muted",
+        "inverse",
+        "accent"
+      ],
+      "default": "accent",
+      "description": "Background of the bar, from the theme tokens."
+    }
+  },
+  "props": {
+    "message": {
+      "type": "string",
+      "required": true,
+      "label": "Message",
+      "description": "The notice, one short line."
+    },
+    "href": {
+      "type": "url",
+      "label": "Link",
+      "description": "Where the notice points (the sale, the event page)."
+    },
+    "linkLabel": {
+      "type": "string",
+      "label": "Link label",
+      "description": "Text of the link; defaults to \"Learn more\"."
+    },
+    "closeLabel": {
+      "type": "string",
+      "default": "Close announcement",
+      "content": false,
+      "description": "Accessible name of the close control (ui:)."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "elementor": [
+      "elementor/alert"
+    ]
+  },
+  "a11y": "The close control is a native <summary>: focusable, toggled with Enter or Space, and named by closeLabel. The link is a real link. The accent tone keeps full-contrast text."
+}

package/components/card-grid/CardGrid.astro

@@ -4,7 +4,7 @@
 import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import Section, { type Tone } from '../_shared/Section.astro'
-import type { ImageInput } from '../_shared/types'
+import { imageOf, type ImageSource } from '../_shared/image'
 
 const grid = tv({
   slots: {
@@ -34,7 +34,9 @@ interface Item {
   title: string
   text?: string | undefined
   href?: string | undefined
-  image?: ImageInput | undefined
+  /** The image's address (or, until 0.7, an `ImageInput`). */
+  image?: ImageSource | undefined
+  imageAlt?: string | undefined
   eyebrow?: string | undefined
 }
 
@@ -68,7 +70,7 @@ const headingId = title ? `cards-${title.toLowerCase().replace(/[^a-z0-9]+/g, '-
   <ul class={list()}>
     {items.map(item => (
       <li class={card()}>
-        {item.image && <div class={media()}><KitImage image={item.image} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover transition duration-300 group-hover:scale-[1.02]" /></div>}
+        {imageOf(item.image, item.imageAlt) && <div class={media()}><KitImage image={imageOf(item.image, item.imageAlt)!} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover transition duration-300 group-hover:scale-[1.02]" /></div>}
         {item.eyebrow && <p class="text-sm font-medium text-accent">{item.eyebrow}</p>}
         <CardHeading class={cardTitle()}>
           {item.href

package/components/card-grid/meta.json

@@ -7,6 +7,7 @@
   "shared": [
     "KitImage.astro",
     "Section.astro",
+    "image.ts",
     "types.ts"
   ],
   "variants": {
@@ -50,39 +51,51 @@
   "props": {
     "title": {
       "type": "string",
+      "label": "Heading",
       "description": "Section heading."
     },
     "intro": {
       "type": "text",
+      "label": "Introduction",
       "description": "Paragraph under the heading."
     },
     "items": {
       "type": "array",
+      "label": "Cards",
       "required": true,
       "items": {
         "type": "object",
         "fields": {
           "title": {
             "type": "string",
-            "required": true
+            "label": "Title",
+            "required": true,
+            "description": "The card heading."
           },
           "text": {
-            "type": "text"
+            "type": "text",
+            "label": "Text",
+            "description": "A sentence or two under the heading."
           },
           "href": {
-            "type": "url"
+            "type": "url",
+            "label": "Link",
+            "description": "Makes the whole card a link."
           },
           "image": {
-            "type": "object",
-            "fields": {
-              "src": { "type": "image", "required": true },
-              "alt": { "type": "string", "required": true },
-              "width": { "type": "integer" },
-              "height": { "type": "integer" }
-            }
+            "type": "image",
+            "label": "Image",
+            "description": "Image on top of the card."
+          },
+          "imageAlt": {
+            "type": "string",
+            "label": "Image description",
+            "description": "What the image shows, for readers who cannot see it; empty when it is decoration."
           },
           "eyebrow": {
-            "type": "string"
+            "type": "string",
+            "label": "Eyebrow",
+            "description": "Short line above the title (a category, a role, a price)."
           }
         }
       },
@@ -93,6 +106,7 @@
       "min": 2,
       "max": 3,
       "default": 2,
+      "content": false,
       "description": "Level of the section heading; card titles are one below."
     }
   },

package/components/consent/Consent.astro

@@ -0,0 +1,87 @@
+---
+// Cookie consent bar: a message, accept and decline, and a link to the
+// privacy policy. The choice is kept in localStorage (`kit-consent`), written
+// to <html data-consent="granted|denied"> and announced as a `kit:consent`
+// event on document, which the site-settings analytics gate listens for.
+// Any element with [data-kit-consent-open] (the Footer's cookie settings
+// button) reopens the bar, so consent is withdrawn as easily as it is given.
+// Replaces cookie plugins (Cookie Notice, Complianz, CookieYes, Cookiebot).
+import { tv } from 'tailwind-variants'
+
+const consent = tv({
+  slots: {
+    root: 'fixed z-50 border border-line bg-surface p-4 text-ink shadow-lg sm:p-5',
+    message: 'text-sm whitespace-pre-line',
+    link: 'underline decoration-line underline-offset-4 hover:decoration-current',
+    actions: 'mt-4 flex flex-wrap gap-3',
+    accept: 'rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-ink hover:opacity-90',
+    decline: 'rounded-md border border-line px-4 py-2 text-sm font-semibold hover:bg-surface-muted',
+  },
+  variants: {
+    position: {
+      bottom: { root: 'inset-x-0 bottom-0 border-x-0 border-b-0 sm:flex sm:items-center sm:justify-between sm:gap-6', actions: 'sm:mt-0 sm:shrink-0' },
+      corner: { root: 'inset-x-4 bottom-4 rounded-lg sm:left-auto sm:max-w-sm' },
+    },
+  },
+  defaultVariants: { position: 'bottom' },
+})
+
+interface Props {
+  message: string
+  acceptLabel: string
+  declineLabel: string
+  /** Privacy or cookie policy page, linked after the message. */
+  policyHref?: string | undefined
+  policyLabel?: string | undefined
+  regionLabel?: string | undefined
+  position?: 'bottom' | 'corner' | undefined
+}
+
+const { message, acceptLabel, declineLabel, policyHref, policyLabel = 'Privacy policy', regionLabel = 'Cookie consent', position } = Astro.props
+const s = consent({ position })
+---
+<!--
+  Rendered hidden: the inline script right after it shows the bar only when no
+  choice is stored, before the first paint, so returning visitors never see it
+  flash. With no stored choice consent is 'denied' until the visitor accepts;
+  without JS the bar stays hidden and nothing that needs consent runs.
+-->
+<div data-kit-consent role="region" aria-label={regionLabel} class={s.root()} hidden>
+  <p class={s.message()}>
+    {message}
+    {policyHref && <> <a href={policyHref} class={s.link()}>{policyLabel}</a></>}
+  </p>
+  <div class={s.actions()}>
+    <button type="button" data-kit-consent-choice="granted" class={s.accept()}>{acceptLabel}</button>
+    <button type="button" data-kit-consent-choice="denied" class={s.decline()}>{declineLabel}</button>
+  </div>
+</div>
+<script is:inline>
+  (() => {
+    let stored = null
+    try { stored = localStorage.getItem('kit-consent') } catch {}
+    // Denied until the visitor accepts: nothing may measure before an explicit yes.
+    document.documentElement.dataset.consent = stored === 'granted' ? 'granted' : 'denied'
+    if (stored !== 'granted' && stored !== 'denied') document.querySelectorAll('[data-kit-consent]').forEach((bar) => { bar.hidden = false })
+  })()
+</script>
+<script>
+  // One listener for the page; the bar is not a dialog, so focus is left where
+  // it is and the page stays usable while it shows.
+  document.addEventListener('click', (event) => {
+    const target = event.target as Element | null
+    if (target?.closest('[data-kit-consent-open]')) {
+      document.querySelectorAll<HTMLElement>('[data-kit-consent]').forEach((bar) => { bar.hidden = false })
+      // The visitor asked for it: move focus to the first choice so keyboard users land in the bar.
+      document.querySelector<HTMLButtonElement>('[data-kit-consent] [data-kit-consent-choice]')?.focus()
+      return
+    }
+    const button = target?.closest<HTMLButtonElement>('[data-kit-consent-choice]')
+    if (!button) return
+    const choice = button.dataset.kitConsentChoice === 'granted' ? 'granted' : 'denied'
+    try { localStorage.setItem('kit-consent', choice) } catch {}
+    document.documentElement.dataset.consent = choice
+    document.querySelectorAll<HTMLElement>('[data-kit-consent]').forEach((bar) => { bar.hidden = true })
+    document.dispatchEvent(new CustomEvent('kit:consent', { detail: { granted: choice === 'granted' } }))
+  })
+</script>

package/components/consent/fixtures.json

@@ -0,0 +1,4 @@
+[
+  {"name": "bottom", "frame": "overlay", "props": {"message": "We use cookies to understand how the site is used. Analytics only load if you accept.", "acceptLabel": "Accept", "declineLabel": "Decline", "policyHref": "/privacy"}},
+  {"name": "corner", "frame": "overlay", "props": {"message": "This site uses analytics cookies.", "acceptLabel": "Allow", "declineLabel": "No thanks", "position": "corner"}}
+]

package/components/consent/meta.json

@@ -0,0 +1,67 @@
+{
+  "id": "consent",
+  "name": "Consent",
+  "description": "Cookie consent bar with accept and decline. Consent is denied by default: until the visitor explicitly accepts, <html data-consent> is \"denied\" (set before first paint) and nothing may start measurement. The choice is stored in localStorage (`kit-consent`), set as <html data-consent=\"granted|denied\"> and dispatched as a `kit:consent` event on document with {granted}; the site-settings analytics gate reads data-consent and loads analytics only when it is \"granted\". The bar shows only while no choice is stored, with no flash on later visits.",
+  "category": "chrome",
+  "uses": [],
+  "shared": [],
+  "variants": {
+    "position": {
+      "options": [
+        "bottom",
+        "corner"
+      ],
+      "default": "bottom",
+      "description": "bottom: a full-width bar along the bottom edge. corner: a small card in the bottom corner."
+    }
+  },
+  "props": {
+    "message": {
+      "type": "text",
+      "required": true,
+      "label": "Message",
+      "description": "What the site stores and why, in a sentence or two."
+    },
+    "acceptLabel": {
+      "type": "string",
+      "required": true,
+      "label": "Accept label",
+      "description": "Text of the accept button."
+    },
+    "declineLabel": {
+      "type": "string",
+      "required": true,
+      "label": "Decline label",
+      "description": "Text of the decline button."
+    },
+    "policyHref": {
+      "type": "url",
+      "label": "Policy link",
+      "description": "Privacy or cookie policy page, linked after the message."
+    },
+    "policyLabel": {
+      "type": "string",
+      "default": "Privacy policy",
+      "content": false,
+      "description": "Text of the policy link (ui:)."
+    },
+    "regionLabel": {
+      "type": "string",
+      "default": "Cookie consent",
+      "content": false,
+      "description": "Accessible name of the bar's region (ui:)."
+    }
+  },
+  "slots": {},
+  "js": "vanilla",
+  "dependencies": {},
+  "sources": {
+    "classic": [
+      "classic/cookie-notice",
+      "classic/complianz",
+      "classic/cookieyes",
+      "classic/cookiebot"
+    ]
+  },
+  "a11y": "A labelled region, not a modal: no focus trap, the page stays usable. Both choices are native buttons in reading order after the message; the policy link is a real link. Once a choice is made the bar is hidden (not just moved off screen)."
+}

package/components/contact-details/ContactDetails.astro

@@ -0,0 +1,74 @@
+---
+// The ways to reach a business, without a form: email and phone as links that
+// open the mail app or dialler, the postal address in an <address>, opening
+// hours and a link to the map. Replaces Elementor icon lists and contact-info
+// widgets that list the same things by hand.
+import { tv } from 'tailwind-variants'
+import Section from '../_shared/Section.astro'
+
+const details = tv({
+  slots: {
+    heading: 'mb-8 text-2xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-3xl',
+    list: 'grid gap-6',
+    term: 'text-sm font-semibold opacity-75',
+    value: 'mt-1 not-italic whitespace-pre-line',
+    link: 'underline decoration-line underline-offset-4 hover:decoration-current',
+  },
+  variants: {
+    layout: {
+      list: { list: 'max-w-xl' },
+      columns: { list: 'sm:grid-cols-2 lg:grid-cols-4' },
+    },
+  },
+  defaultVariants: { layout: 'list' },
+})
+
+interface Props {
+  heading?: string | undefined
+  email?: string | undefined
+  phone?: string | undefined
+  /** Postal address, one line per line of the address. */
+  address?: string | undefined
+  /** Opening hours, one line per day or range. */
+  hours?: string | undefined
+  /** A map link for the address (Google Maps, OpenStreetMap). */
+  mapUrl?: string | undefined
+  emailLabel?: string | undefined
+  phoneLabel?: string | undefined
+  addressLabel?: string | undefined
+  hoursLabel?: string | undefined
+  mapLabel?: string | undefined
+  layout?: 'list' | 'columns' | undefined
+  id?: string | undefined
+}
+
+const {
+  heading, email, phone, address, hours, mapUrl,
+  emailLabel = 'Email', phoneLabel = 'Phone', addressLabel = 'Address', hoursLabel = 'Opening hours', mapLabel = 'View on the map',
+  layout, id = 'contact-details',
+} = Astro.props
+const s = details({ layout })
+const headingId = heading ? `${id}-title` : undefined
+// A dialler wants the number without spaces, dashes or brackets; the leading + stays.
+const tel = phone ? `tel:${phone.replace(/[^\d+]/g, '')}` : undefined
+const shown = Boolean(email || phone || address || hours || mapUrl)
+---
+{shown && (
+  <Section spacing="md" id={id} aria-labelledby={headingId}>
+    {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
+    <dl class={s.list()}>
+      {email && <div><dt class={s.term()}>{emailLabel}</dt><dd class={s.value()}><a href={`mailto:${email}`} class={s.link()}>{email}</a></dd></div>}
+      {phone && <div><dt class={s.term()}>{phoneLabel}</dt><dd class={s.value()}><a href={tel} class={s.link()}>{phone}</a></dd></div>}
+      {(address || mapUrl) && (
+        <div>
+          <dt class={s.term()}>{addressLabel}</dt>
+          <dd class={s.value()}>
+            {address && <address class="not-italic">{address}</address>}
+            {mapUrl && <a href={mapUrl} class:list={[s.link(), address && 'mt-2 inline-block']}>{mapLabel}</a>}
+          </dd>
+        </div>
+      )}
+      {hours && <div><dt class={s.term()}>{hoursLabel}</dt><dd class={s.value()}>{hours}</dd></div>}
+    </dl>
+  </Section>
+)}

package/components/contact-details/fixtures.json

@@ -0,0 +1,4 @@
+[
+  {"name": "list", "props": {"heading": "Visit the studio", "email": "hello@example.com", "phone": "+44 20 7946 0958", "address": "12 Harbour Lane\nBristol BS1 4RN\nUnited Kingdom", "hours": "Mon–Fri 9:00–17:30\nSat 10:00–14:00", "mapUrl": "https://www.openstreetmap.org/?mlat=51.45&mlon=-2.59"}},
+  {"name": "columns", "props": {"email": "orders@example.com", "phone": "(555) 010-2030", "address": "400 Market Street, Suite 12\nPortland, OR 97201", "hours": "Every day 8am–6pm", "layout": "columns"}}
+]

package/components/contact-details/meta.json

@@ -0,0 +1,105 @@
+{
+  "id": "contact-details",
+  "name": "Contact details",
+  "description": "The ways to reach a business without a form: email and phone as mailto:/tel: links, the postal address in an <address>, opening hours and a map link, as a list or in columns. Renders nothing when every detail is empty.",
+  "category": "section",
+  "uses": [],
+  "shared": [
+    "Section.astro"
+  ],
+  "variants": {
+    "layout": {
+      "options": [
+        "list",
+        "columns"
+      ],
+      "default": "list",
+      "description": "list: one detail under another. columns: side by side on wide screens (a contact band under a map or above the footer)."
+    }
+  },
+  "props": {
+    "heading": {
+      "type": "string",
+      "label": "Heading",
+      "description": "Section heading."
+    },
+    "email": {
+      "type": "email",
+      "label": "Email",
+      "description": "The address people write to; shown as a mailto: link."
+    },
+    "phone": {
+      "type": "phone",
+      "label": "Phone",
+      "description": "The number as it should be read; the tel: link drops spaces and punctuation."
+    },
+    "address": {
+      "type": "text",
+      "label": "Address",
+      "description": "Postal address, one line per line."
+    },
+    "hours": {
+      "type": "text",
+      "label": "Opening hours",
+      "description": "Opening hours, one line per day or range."
+    },
+    "mapUrl": {
+      "type": "url",
+      "label": "Map link",
+      "description": "A map of the address (Google Maps, OpenStreetMap), shown as a link under it."
+    },
+    "emailLabel": {
+      "type": "string",
+      "default": "Email",
+      "content": false,
+      "description": "Label of the email line (ui:)."
+    },
+    "phoneLabel": {
+      "type": "string",
+      "default": "Phone",
+      "content": false,
+      "description": "Label of the phone line (ui:)."
+    },
+    "addressLabel": {
+      "type": "string",
+      "default": "Address",
+      "content": false,
+      "description": "Label of the address line (ui:)."
+    },
+    "hoursLabel": {
+      "type": "string",
+      "default": "Opening hours",
+      "content": false,
+      "description": "Label of the hours line (ui:)."
+    },
+    "mapLabel": {
+      "type": "string",
+      "default": "View on the map",
+      "content": false,
+      "description": "Text of the map link (ui:)."
+    },
+    "id": {
+      "type": "string",
+      "content": false,
+      "description": "Section id; the heading gets `<id>-title`."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "elementor": [
+      "elementor/icon-list"
+    ]
+  },
+  "a11y": "A description list: each detail is named by its term. Email and phone are real links that say what they are; the address is an <address>. The section is labelled by its heading.",
+  "pattern": {
+    "summary": "email, phone, address and hours listed, no form",
+    "signals": [
+      "mailto: link",
+      "tel: link",
+      "address text",
+      "icon list"
+    ]
+  }
+}