@contentrain/astro-kit 0.31.0 → 0.33.0

package/components/steps/fixtures.json

@@ -1,7 +1,219 @@
 [
-  {"name": "list-numbered", "props": {"id": "how", "heading": "How it works", "intro": "Three steps from WordPress to a static site.", "items": [{"title": "Connect", "text": "Point us at your site; we read everything it publishes."}, {"title": "Review", "text": "Check the plan: every page, model and redirect."}, {"title": "Launch", "text": "Deploy the new site; every old address still works."}]}},
-  {"name": "row-plain-images", "props": {"layout": "row", "style": "plain", "heading": "Our process", "items": [{"title": "Discover", "text": "We learn the site and its readers.", "image": "/kit-fixtures/photo-1.svg"}, {"title": "Design", "text": "We draw the pages and the system.", "image": "/kit-fixtures/photo-2.svg"}, {"title": "Build", "text": "We ship it, fast and accessible.", "image": "/kit-fixtures/photo-3.svg", "imageAlt": "A laptop showing the finished site"}]}},
-  {"name": "row-numbered", "props": {"layout": "row", "items": [{"title": "Sign up", "text": "One minute, no card."}, {"title": "Import", "text": "Bring your content."}, {"title": "Edit", "text": "Change it in Studio."}, {"title": "Publish", "text": "Push and it is live."}]}},
-  {"name": "source-numbers", "props": {"heading": "Getting started", "items": [{"number": "01", "title": "Connect", "text": "Point Calm Status at the services you already monitor."}, {"number": "02", "title": "Write", "text": "Pick the words customers see for each kind of problem."}, {"number": "03", "title": "Publish", "text": "Put the page live on your own domain."}]}},
-  {"name": "row-plain-source-numbers", "props": {"layout": "row", "style": "plain", "items": [{"number": "Step 1", "title": "Call", "text": "We learn what you make and who buys it."}, {"number": "Step 2", "title": "Design and build", "text": "Four weeks of weekly previews."}, {"number": "Step 3", "title": "Launch", "text": "We switch it on together."}]}}
+  {
+    "name": "list-numbered",
+    "props": {
+      "id": "how",
+      "heading": "How it works",
+      "intro": "Three steps from WordPress to a static site.",
+      "items": [
+        {
+          "title": "Connect",
+          "text": "Point us at your site; we read everything it publishes."
+        },
+        {
+          "title": "Review",
+          "text": "Check the plan: every page, model and redirect."
+        },
+        {
+          "title": "Launch",
+          "text": "Deploy the new site; every old address still works."
+        }
+      ]
+    }
+  },
+  {
+    "name": "row-plain-images",
+    "props": {
+      "layout": "row",
+      "style": "plain",
+      "heading": "Our process",
+      "items": [
+        {
+          "title": "Discover",
+          "text": "We learn the site and its readers.",
+          "image": "/kit-fixtures/photo-1.svg"
+        },
+        {
+          "title": "Design",
+          "text": "We draw the pages and the system.",
+          "image": "/kit-fixtures/photo-2.svg"
+        },
+        {
+          "title": "Build",
+          "text": "We ship it, fast and accessible.",
+          "image": "/kit-fixtures/photo-3.svg",
+          "imageAlt": "A laptop showing the finished site"
+        }
+      ]
+    }
+  },
+  {
+    "name": "row-numbered",
+    "props": {
+      "layout": "row",
+      "items": [
+        {
+          "title": "Sign up",
+          "text": "One minute, no card."
+        },
+        {
+          "title": "Import",
+          "text": "Bring your content."
+        },
+        {
+          "title": "Edit",
+          "text": "Change it in Studio."
+        },
+        {
+          "title": "Publish",
+          "text": "Push and it is live."
+        }
+      ]
+    }
+  },
+  {
+    "name": "source-numbers",
+    "props": {
+      "heading": "Getting started",
+      "items": [
+        {
+          "number": "01",
+          "title": "Connect",
+          "text": "Point Calm Status at the services you already monitor."
+        },
+        {
+          "number": "02",
+          "title": "Write",
+          "text": "Pick the words customers see for each kind of problem."
+        },
+        {
+          "number": "03",
+          "title": "Publish",
+          "text": "Put the page live on your own domain."
+        }
+      ]
+    }
+  },
+  {
+    "name": "row-plain-source-numbers",
+    "props": {
+      "layout": "row",
+      "style": "plain",
+      "items": [
+        {
+          "number": "Step 1",
+          "title": "Call",
+          "text": "We learn what you make and who buys it."
+        },
+        {
+          "number": "Step 2",
+          "title": "Design and build",
+          "text": "Four weeks of weekly previews."
+        },
+        {
+          "number": "Step 3",
+          "title": "Launch",
+          "text": "We switch it on together."
+        }
+      ]
+    }
+  },
+  {
+    "name": "timeline-rail",
+    "props": {
+      "id": "history",
+      "heading": "Our story",
+      "kind": "timeline",
+      "marker": "dot",
+      "items": [
+        {
+          "date": "2019",
+          "title": "Founded",
+          "text": "Two people and a shared desk."
+        },
+        {
+          "date": "Mar 2021",
+          "title": "First customers",
+          "text": "The first twenty sites moved over."
+        },
+        {
+          "date": "2024",
+          "title": "Open source",
+          "text": "The toolkit went public.",
+          "current": true
+        }
+      ]
+    }
+  },
+  {
+    "name": "timeline-alternate-dashed",
+    "props": {
+      "kind": "timeline",
+      "layout": "alternate",
+      "connector": "dashed",
+      "items": [
+        {
+          "date": "2019",
+          "title": "Founded",
+          "text": "Two people and a shared desk."
+        },
+        {
+          "date": "Mar 2021",
+          "title": "First customers",
+          "text": "The first twenty sites moved over."
+        },
+        {
+          "date": "2024",
+          "title": "Open source",
+          "text": "The toolkit went public.",
+          "current": true
+        }
+      ]
+    }
+  },
+  {
+    "name": "timeline-no-connector",
+    "props": {
+      "kind": "timeline",
+      "layout": "rail",
+      "connector": "none",
+      "items": [
+        {
+          "date": "2019",
+          "title": "Founded",
+          "text": "Two people and a shared desk."
+        },
+        {
+          "date": "Mar 2021",
+          "title": "First customers",
+          "text": "The first twenty sites moved over."
+        },
+        {
+          "title": "No date here",
+          "text": "An item with no date reads as a step."
+        }
+      ]
+    }
+  },
+  {
+    "name": "rail-numbered",
+    "props": {
+      "layout": "rail",
+      "marker": "number",
+      "items": [
+        {
+          "title": "Connect",
+          "text": "Point us at your site; we read everything it publishes."
+        },
+        {
+          "title": "Review",
+          "text": "Check the plan: every page, model and redirect."
+        },
+        {
+          "title": "Launch",
+          "text": "Deploy the new site; every old address still works."
+        }
+      ]
+    }
+  }
 ]

package/components/steps/meta.json

@@ -9,16 +9,19 @@
     "Section.astro",
     "image.ts",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {
     "layout": {
       "options": [
         "list",
-        "row"
+        "row",
+        "rail",
+        "alternate"
       ],
       "default": "list",
-      "description": "A vertical list, or one row across the page on wide screens."
+      "description": "list: a vertical list. row: across the page. rail: one rail on the start side. alternate: items alternate either side of a centre rail from md (one rail on phones); DOM order stays chronological."
     },
     "style": {
       "options": [
@@ -27,6 +30,31 @@
       ],
       "default": "numbered",
       "description": "A number badge before each step, or an accent rule beside it."
+    },
+    "kind": {
+      "options": [
+        "steps",
+        "timeline"
+      ],
+      "default": "steps",
+      "description": "steps: a numbered sequence. timeline: a date per item on a vertical rail (the rail layouts below; without a layout it uses rail)."
+    },
+    "marker": {
+      "options": [
+        "number",
+        "dot"
+      ],
+      "default": "number",
+      "description": "What sits on the rail: the style's number badge, or a plain dot (the timeline default). Not yet: icon and date markers, and a visual emphasis for the current item (it has aria-current and a hidden label only)."
+    },
+    "connector": {
+      "options": [
+        "none",
+        "line",
+        "dashed"
+      ],
+      "default": "line",
+      "description": "The rail between items on the rail layouts."
     }
   },
   "props": {
@@ -73,6 +101,16 @@
             "type": "string",
             "label": "Image description",
             "description": "What the image shows; empty if decorative."
+          },
+          "date": {
+            "type": "string",
+            "label": "Date",
+            "description": "A timeline's date as written (\"2019\", \"Mar 2021\"); marked up as a <time> only when it is an ISO date or a year."
+          },
+          "current": {
+            "type": "boolean",
+            "label": "Current",
+            "description": "Marks the latest item (aria-current=\"step\" and a hidden \"Current\")."
           }
         }
       },
@@ -82,6 +120,122 @@
       "type": "string",
       "content": false,
       "description": "Anchor id of the section; the heading gets `<id>-title`."
+    },
+    "currentLabel": {
+      "type": "string",
+      "default": "Current",
+      "content": false,
+      "description": "Visually hidden text on the current item, so it is not shown by colour alone."
+    },
+    "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": {},
@@ -98,7 +252,7 @@
       "divi/et_pb_blurb"
     ]
   },
-  "a11y": "Steps are an <ol>, so their order and count are announced; the visible numbers are CSS counters, not text. Each title is an <h3> under the section's <h2>, or an <h2> when the section has no heading. The section is labelled by its heading when it has one.",
+  "a11y": "Steps are an <ol>, so their order and count are announced; the visible numbers are CSS counters, not text. Each title is an <h3> under the section's <h2>, or an <h2> when the section has no heading. The section is labelled by its heading when it has one. A timeline is the same <ol>; a date is a <time datetime> only when machine-readable; the rail and dots are CSS and not in the accessibility tree.",
   "pattern": {
     "summary": "ordered sequence: numbered title + short text units",
     "signals": [

package/components/tabs/Tabs.astro

@@ -5,7 +5,8 @@
 // the same markup into tabs.
 import { tv } from 'tailwind-variants'
 import Section from '../_shared/Section.astro'
-import type { MeasuredStyle } from '../_shared/types'
+import SectionHeader from '../_shared/SectionHeader.astro'
+import type { ActionInput, MeasuredStyle } from '../_shared/types'
 
 export interface TabItem {
   label: string
@@ -42,6 +43,10 @@ const tabs = tv({
 interface Props {
   items: TabItem[]
   heading?: string | undefined
+  /** The rest of the section's head, drawn with the heading when any is given. */
+  intro?: string | undefined
+  eyebrow?: string | undefined
+  actions?: ActionInput[] | undefined
   /** Accessible name of the tab list when there is no heading. */
   label?: string | undefined
   style?: 'underline' | 'pills' | undefined
@@ -52,7 +57,7 @@ interface Props {
   measured?: MeasuredStyle | undefined
 }
 
-const { items, heading, label, style, orientation = 'horizontal', tone, id = 'tabs', measured } = Astro.props
+const { items, heading, intro, eyebrow, actions, label, style, orientation = 'horizontal', tone, id = 'tabs', measured } = Astro.props
 const s = tabs({ style, orientation, tone })
 const headingId = heading ? `${id}-title` : undefined
 // One level under the section heading, or the section's heading when there is none.
@@ -61,7 +66,9 @@ const value = (i: number) => `tab-${i + 1}`
 ---
 {items.length > 0 && (
   <Section measured={measured} tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
-    {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
+    {intro || eyebrow || actions?.length
+      ? <SectionHeader heading={heading} intro={intro} eyebrow={eyebrow} actions={actions} headingId={headingId} />
+      : heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
     <div class={s.root()} data-kit-tabs={id} data-orientation={orientation} data-label={label ?? heading ?? undefined}>
       <div class={s.list()} data-part="list">
         {items.map((item, i) => <button type="button" class={s.trigger()} data-part="trigger" data-value={value(i)}>{item.label}</button>)}

package/components/tabs/fixtures.json

@@ -33,5 +33,9 @@
   {
     "name": "pills-accent",
     "props": { "style": "pills", "tone": "accent", "label": "Formats", "id": "formats", "items": [{ "label": "Online", "content": "<p>Read on the site.</p>" }, { "label": "Print", "content": "<p>Delivered each season.</p>" }] }
+  },
+  {
+    "name": "four-measured",
+    "props": { "eyebrow": "Plans", "heading": "The plan", "intro": "What each part of the plan includes.", "actions": [{ "label": "Compare plans", "href": "/plans/" }], "id": "plan", "items": [{ "label": "Overview", "content": "<p>What the plan covers.</p>" }, { "label": "Pricing", "content": "<p>What it costs each month.</p>" }, { "label": "Security", "content": "<p>How data is kept safe.</p>" }, { "label": "Support", "content": "<p>How to reach a person.</p>" }], "measured": { "padY": 40, "containerPx": 880 } }
   }
 ]

package/components/tabs/meta.json

@@ -4,13 +4,16 @@
   "description": "Tabbed panels with the WAI-ARIA tabs pattern from Zag.js (arrow keys, Home/End, roving focus). Without script every panel shows in turn under its own title, so no content is ever hidden from a reader or a crawler.",
   "category": "content",
   "uses": [],
-  "shared": ["Section.astro", "measured.ts", "types.ts"],
+  "shared": ["Button.astro", "Section.astro", "SectionHeader.astro", "measured.ts", "safe-url.ts", "types.ts"],
   "variants": {
     "style": { "options": ["underline", "pills"], "default": "underline", "description": "underline: a rule under the list, the selected tab underlined in accent. pills: the selected tab filled with accent." },
     "orientation": { "options": ["horizontal", "vertical"], "default": "horizontal", "description": "vertical: the tab list beside the panel on wide screens (Elementor vertical tabs)." },
     "tone": { "options": ["default", "muted", "inverse", "accent"], "default": "default", "description": "Section background." }
   },
   "props": {
+    "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": "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."}}},
     "items": { "type": "array", "required": true, "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "content": { "type": "richtext", "required": true } } }, "description": "Tabs in order (Elementor tabs tab_title/tab_content, Divi tab title + content)." },
     "heading": { "type": "string", "description": "Section heading; also names the tab list." },
@@ -23,7 +26,7 @@
   "sources": {
     "elementor": ["elementor/tabs", "elementor/nested-tabs"],
     "divi": ["divi/et_pb_tabs"],
-    "classic": ["classic/tabs"]
+    "classic": ["classic/tabs", "classic/aria-tabs"]
   },
   "a11y": "Zag.js tabs: role=tablist/tab/tabpanel with aria-selected, aria-controls and aria-labelledby; arrow keys (per orientation), Home and End move between tabs. Before the script runs every panel is visible with its own title (an h3 under the section's h2, an h2 when there is no heading); after, the titles become screen-reader-only and the tabs label the panels."
 }

package/components/team/Team.astro

@@ -4,7 +4,11 @@
 import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
+import { measuredGrid } from '../_shared/measured'
+import type { MeasuredStyle } from '../_shared/types'
 import { imageOf, type ImageSource } from '../_shared/image'
+import { profile } from './team'
+import { safeHref } from '../_shared/safe-url'
 
 const team = tv({
   slots: {
@@ -12,6 +16,9 @@ const team = tv({
     heading: 'text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl',
     intro: 'text-lg opacity-80',
     list: 'grid gap-6 sm:grid-cols-2 md:gap-8',
+    socials: 'relative z-10 mt-1 flex flex-wrap gap-3 text-sm',
+    social: 'rounded text-accent-text underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+    more: 'text-pretty opacity-80 [&>summary]:text-sm [&>summary]:font-medium [&>summary]:text-accent-text',
     member: 'group relative flex flex-col gap-3',
     portrait: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
     name: 'text-lg leading-snug [font-weight:var(--font-weight-heading,600)]',
@@ -23,7 +30,16 @@ const team = tv({
       '2': {},
       '3': { list: 'md:grid-cols-3' },
       '4': { list: 'lg:grid-cols-4' },
+      '5': { list: 'md:grid-cols-3 lg:grid-cols-5' },
     },
+    // How the members are laid out: a grid, one stacked row each (photo beside text), or the first member large over a grid.
+    layout: {
+      grid: {},
+      list: { list: 'grid-cols-1 sm:grid-cols-1', member: 'sm:flex-row sm:items-start sm:gap-6', portrait: 'sm:w-48 sm:shrink-0' },
+      featured: { list: '[&>li:first-child]:col-span-full [&>li:first-child]:sm:flex-row [&>li:first-child]:sm:gap-8 [&>li:first-child_.kit-portrait]:sm:w-1/2' },
+    },
+    imageShape: { square: {}, rounded: { portrait: 'rounded-[var(--radius-image,1rem)]' }, circle: { portrait: 'rounded-full' } },
+    align: { start: {}, center: { member: 'items-center text-center', socials: 'justify-center' } },
     style: {
       card: { member: 'rounded-card border border-line p-6', portrait: '-mx-6 -mt-6 mb-2 rounded-b-none' },
       plain: {},
@@ -31,7 +47,7 @@ const team = tv({
     // accent: a small accent line. plain: body-size text in the text colour, as a byline.
     roleStyle: { accent: {}, plain: { role: 'text-[length:var(--text-body,1rem)] font-normal text-current' } },
   },
-  defaultVariants: { columns: '3', style: 'card', roleStyle: 'accent' },
+  defaultVariants: { columns: '3', layout: 'grid', imageShape: 'square', align: 'start', style: 'card', roleStyle: 'accent' },
 })
 
 interface Member {
@@ -42,44 +58,73 @@ interface Member {
   image?: ImageSource | undefined
   imageAlt?: string | undefined
   href?: string | undefined
+  /** Profile addresses (the contract's `links[]`); each is labelled by the network its host names, never an invented one. */
+  links?: string[] | undefined
 }
 
 interface Props {
   heading?: string | undefined
   intro?: string | undefined
   items: Member[]
-  columns?: '2' | '3' | '4' | undefined
+  columns?: '2' | '3' | '4' | '5' | undefined
+  layout?: 'grid' | 'list' | 'featured' | undefined
+  imageShape?: 'square' | 'rounded' | 'circle' | undefined
+  align?: 'start' | 'center' | undefined
+  /** Clamp a long bio to this many lines with the rest in a native `<details>` ("Read more"). */
+  bioClamp?: 2 | 3 | 4 | undefined
+  readMoreLabel?: string | undefined
+  /** The accessible name of a profile link; `{name}` and `{network}` are replaced ("{name} on {network}"). */
+  socialLabel?: string | undefined
   style?: 'card' | 'plain' | undefined
   roleStyle?: 'accent' | 'plain' | 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, intro, items, columns, style, roleStyle, id } = Astro.props
-const s = team({ columns, style, roleStyle })
+const { heading, intro, items, columns, layout, imageShape, align, bioClamp, readMoreLabel = 'Read more', socialLabel = '{name} on {network}', style, roleStyle, measured, id } = Astro.props
+const s = team({ columns, layout, imageShape, align, style, roleStyle })
+const clamp = { 2: 'line-clamp-2', 3: 'line-clamp-3', 4: 'line-clamp-4' } as const
+// A bio that fits the clamp needs no disclosure: short means about 160 characters per two lines, a rough, build-time guess.
+const longBio = (bio: string) => bioClamp !== undefined && bio.length > bioClamp * 80
 const headingId = heading && id ? `${id}-title` : undefined
 // One level under the section heading, or the section's heading when there is none.
 const NameHeading = heading ? 'h3' : 'h2'
 ---
 {items.length > 0 && (
-  <Section id={id} aria-labelledby={headingId}>
+  <Section measured={measured} id={id} aria-labelledby={headingId}>
     {(heading || intro) && (
       <header class={s.header()}>
         {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
         {intro && <p class={s.intro()} data-kit-text>{intro}</p>}
       </header>
     )}
-    <ul class={s.list()}>
+    <ul class={s.list({ class: measuredGrid(measured) })}>
       {items.map(member => (
         <li class={s.member()}>
           {/* The portrait's text defaults to the name: a photo of a named person is not decoration. */}
-          {imageOf(member.image, member.imageAlt ?? member.name) && <div class={s.portrait()}><KitImage image={imageOf(member.image, member.imageAlt ?? member.name)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-square w-full object-cover" /></div>}
+          {imageOf(member.image, member.imageAlt ?? member.name) && <div class={`${s.portrait()} kit-portrait`}><KitImage image={imageOf(member.image, member.imageAlt ?? member.name)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-square w-full object-cover" /></div>}
           <NameHeading class={s.name()}>
             {member.href
-              ? <a href={member.href} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{member.name}</a>
+              ? <a href={safeHref(member.href)} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{member.name}</a>
               : member.name}
           </NameHeading>
           {member.role && <p class={s.role()}>{member.role}</p>}
-          {member.bio && <p class={s.bio()} data-kit-text>{member.bio}</p>}
+          {member.bio && (longBio(member.bio)
+            ? (
+                <div class="[&:has(details[open])>p]:hidden">
+                  <p class={`${s.bio()} ${clamp[bioClamp!]}`} data-kit-text>{member.bio}</p>
+                  <details class={s.more()}><summary>{readMoreLabel}</summary><p class={s.bio()} data-kit-text>{member.bio}</p></details>
+                </div>
+              )
+            : <p class={s.bio()} data-kit-text>{member.bio}</p>)}
+          {member.links && member.links.length > 0 && (
+            <ul class={s.socials()}>
+              {member.links.map(profile).map(link => (
+                <li><a href={safeHref(link.href)} class={s.social()} aria-label={socialLabel.replace('{name}', member.name).replace('{network}', link.label)}>{link.label}</a></li>
+              ))}
+            </ul>
+          )}
         </li>
       ))}
     </ul>