@contentrain/astro-kit 0.32.0 → 0.33.1

package/components/stats/Stats.astro

@@ -12,14 +12,23 @@ const stats = tv({
   slots: {
     list: 'grid grid-cols-2 gap-6 md:gap-8',
     item: 'flex gap-1',
-    value: 'text-4xl [font-weight:var(--font-weight-heading,700)] tracking-tight tabular-nums md:text-5xl',
+    // nowrap keeps a figure with its prefix and suffix ("99.9%" never splits into "99.9" / "%").
+    // The size is one pair of variables (valueSize sets them): --stat-max below md, --stat-max-md from md. Its line
+    // height comes with valueSize too: a font-size class merged in later would drop one set here.
+    value: 'text-[length:var(--stat-max,2.25rem)] [font-weight:var(--font-weight-heading,700)] tracking-tight tabular-nums whitespace-nowrap [--stat-max-md:3rem] md:text-[length:var(--stat-max-md)]',
     icon: 'mb-3 block size-10 object-contain',
     label: 'text-sm opacity-80',
   },
   variants: {
     // grid: figures in columns. inline: one line that wraps, for two to four short figures.
     layout: {
-      grid: {},
+      // Each cell is a size container; a figure is no wider than the cell: its size is capped by 100cqi over its
+      // character count (--stat-chars, about 0.66em a character), so a long one ("1.250+", "€12.5M") in four columns at
+      // tablet width shrinks to fit the card, and a short one keeps the size valueSize gives it.
+      grid: {
+        item: '[container-type:inline-size] min-w-0',
+        value: 'text-[length:min(var(--stat-max,2.25rem),max(1.25rem,calc(100cqi_/_(var(--stat-chars,1)_*_0.66))))] md:text-[length:min(var(--stat-max-md),max(1.25rem,calc(100cqi_/_(var(--stat-chars,1)_*_0.66))))]',
+      },
       inline: { list: 'flex flex-wrap gap-x-12 gap-y-6 md:gap-x-16' },
     },
     columns: {
@@ -39,10 +48,10 @@ const stats = tv({
     align: { start: {}, center: { item: 'items-center text-center', icon: 'mx-auto' } },
     // The figure's size: md, lg (the default), xl, or a display number.
     valueSize: {
-      md: { value: 'text-3xl md:text-4xl' },
-      lg: {},
-      xl: { value: 'text-5xl md:text-6xl' },
-      display: { value: 'text-6xl md:text-7xl' },
+      md: { value: '[--stat-max:1.875rem] [--stat-max-md:2.25rem] leading-[1.2] md:leading-[1.1112]' },
+      lg: { value: 'leading-[1.1112] md:leading-none' },
+      xl: { value: '[--stat-max:3rem] [--stat-max-md:3.75rem] leading-none' },
+      display: { value: '[--stat-max:3.75rem] [--stat-max-md:4.5rem] leading-none' },
     },
     // accent/accent-ink is only ~5:1 — dimming text on it drops it under 4.5:1 (WCAG 1.4.3).
     tone: { default: {}, muted: {}, inverse: {}, accent: { label: 'opacity-100' } },
@@ -86,6 +95,8 @@ const s = stats({ layout, columns, style, align, valueSize, labelSize, order, to
 const grid = (layout ?? 'grid') === 'grid' ? measuredGrid(measured) : undefined
 const headingId = heading && id ? `${id}-title` : undefined
 const iconOf = (item: Item) => imageOf(item.icon, '')
+// The figure's width in characters, for the size it may take in a narrow cell.
+const widthOf = (item: Item) => `--stat-chars:${(item.prefix ?? '').length + item.value.length + (item.suffix ?? '').length}`
 // A <dl> names its term first, so figure-first is a plain list, read in the order it is drawn (WCAG 1.3.2).
 ---
 <Section measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
@@ -99,7 +110,7 @@ const iconOf = (item: Item) => imageOf(item.icon, '')
     <ul class={s.list({ class: grid })} role="list">
       {items.map(item => (
         <li class={s.item()}>
-          <p class={s.value()}>{iconOf(item) && <KitImage image={iconOf(item)!} sizes="40px" class={s.icon()} />}{item.prefix}{item.value}{item.suffix}</p>
+          <p class={s.value()} style={widthOf(item)}>{iconOf(item) && <KitImage image={iconOf(item)!} sizes="40px" class={s.icon()} />}{item.prefix}{item.value}{item.suffix}</p>
           <p class={s.label()}>{item.label}</p>
         </li>
       ))}
@@ -109,7 +120,7 @@ const iconOf = (item: Item) => imageOf(item.icon, '')
       {items.map(item => (
         <div class={s.item()}>
           <dt class={s.label()}>{item.label}</dt>
-          <dd class={s.value()}>{iconOf(item) && <KitImage image={iconOf(item)!} sizes="40px" class={s.icon()} />}{item.prefix}{item.value}{item.suffix}</dd>
+          <dd class={s.value()} style={widthOf(item)}>{iconOf(item) && <KitImage image={iconOf(item)!} sizes="40px" class={s.icon()} />}{item.prefix}{item.value}{item.suffix}</dd>
         </div>
       ))}
     </dl>

package/components/stats/fixtures.json

@@ -329,5 +329,92 @@
         "tone": "dark"
       }
     }
+  },
+  {
+    "name": "long-values-four",
+    "props": {
+      "items": [
+        {
+          "value": "99.9",
+          "label": "Uptime",
+          "suffix": "%"
+        },
+        {
+          "value": "1.250",
+          "label": "Projects shipped",
+          "suffix": "+"
+        },
+        {
+          "value": "12.5",
+          "label": "Revenue handled",
+          "prefix": "€",
+          "suffix": "M"
+        },
+        {
+          "value": "480",
+          "label": "Clients served"
+        }
+      ],
+      "columns": "4",
+      "style": "card",
+      "tone": "muted"
+    }
+  },
+  {
+    "name": "long-values-two-xl",
+    "props": {
+      "items": [
+        {
+          "value": "99.9",
+          "label": "Uptime",
+          "suffix": "%"
+        },
+        {
+          "value": "1.250",
+          "label": "Projects shipped",
+          "suffix": "+"
+        },
+        {
+          "value": "12.5",
+          "label": "Revenue handled",
+          "prefix": "€",
+          "suffix": "M"
+        },
+        {
+          "value": "480",
+          "label": "Clients served"
+        }
+      ],
+      "columns": "2",
+      "style": "card",
+      "valueSize": "xl"
+    }
+  },
+  {
+    "name": "long-values-three-display",
+    "props": {
+      "items": [
+        {
+          "value": "99.9",
+          "label": "Uptime",
+          "suffix": "%"
+        },
+        {
+          "value": "1.250",
+          "label": "Projects shipped",
+          "suffix": "+"
+        },
+        {
+          "value": "12.5",
+          "label": "Revenue handled",
+          "prefix": "€",
+          "suffix": "M"
+        }
+      ],
+      "columns": "3",
+      "style": "card",
+      "valueSize": "display",
+      "align": "center"
+    }
   }
 ]

package/components/stats/meta.json

@@ -9,6 +9,7 @@
     "Section.astro",
     "image.ts",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {

package/components/steps/meta.json

@@ -9,6 +9,7 @@
     "Section.astro",
     "image.ts",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {

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

@@ -8,6 +8,7 @@ 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: {
@@ -105,7 +106,7 @@ const NameHeading = heading ? 'h3' : 'h2'
           {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>}
@@ -120,7 +121,7 @@ const NameHeading = heading ? 'h3' : 'h2'
           {member.links && member.links.length > 0 && (
             <ul class={s.socials()}>
               {member.links.map(profile).map(link => (
-                <li><a href={link.href} class={s.social()} aria-label={socialLabel.replace('{name}', member.name).replace('{network}', link.label)}>{link.label}</a></li>
+                <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>
           )}

package/components/team/meta.json

@@ -9,6 +9,8 @@
     "Section.astro",
     "image.ts",
     "measured.ts",
+    "social.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {

package/components/team/team.ts

@@ -1,9 +1,4 @@
-// The network a profile address belongs to, read from its host (`linkedin.com` → LinkedIn); an unknown host is shown as itself.
-const NETWORKS: Record<string, string> = { 'linkedin.com': 'LinkedIn', 'github.com': 'GitHub', 'x.com': 'X', 'twitter.com': 'X', 'instagram.com': 'Instagram', 'facebook.com': 'Facebook', 'youtube.com': 'YouTube', 'dribbble.com': 'Dribbble', 'behance.net': 'Behance', 'medium.com': 'Medium' }
+import { addressLabel, networkOf } from '../_shared/social'
 
-export const profile = (href: string) => {
-  let host = href
-  try { host = new URL(href).hostname.replace(/^www\./, '') } catch { /* a relative address keeps its own text */ }
-  // `mailto:` and `tel:` addresses have no host: the address itself is the label, never an empty one.
-  return { href, label: NETWORKS[host] ?? (host || href) }
-}
+/** A profile address and the label it is announced and shown by: the network its host names, else the host, else the address itself (`mailto:`, `tel:`, relative). */
+export const profile = (href: string) => ({ href, label: networkOf(href)?.label ?? addressLabel(href) })

package/components/testimonial/meta.json

@@ -9,6 +9,7 @@
     "Section.astro",
     "image.ts",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {
@@ -266,9 +267,7 @@
   "js": "none",
   "dependencies": {},
   "sources": {
-    "elementor": [
-      "elementor/testimonial"
-    ],
+    "elementor": ["elementor/testimonial", "elementor/testimonial-carousel", "elementor/reviews"],
     "divi": [
       "divi/et_pb_testimonial"
     ],

package/dist/index.mjs

@@ -137,7 +137,7 @@ async function copyComponents(plan, kitRoot, siteRoot) {
 //#endregion
 //#region src/mapping.ts
 const MAPPING_FORMAT = "astro-kit-mapping@1";
-const MAPPING_VALUE_PATTERN = /^(?:field:[\w-]+|media:[\w-]+|ref:[\w-]+\.[\w-]+|href:(?:self|[\w-]+)|term:[\w-]+|ui:[\w.-]+|const:(?:true|false|-?\d+(?:\.\d+)?|[a-z][a-z0-9_-]{0,31})|site:[\w-]+|menu:(?:primary|footer)|page:(?:base|current|total|breadcrumb)|attr:[\w.-]+|class:[\w*-]+=(?:[a-z][\w-]*)?\|(?:[a-z][\w-]*)?|(?:dom|img|link|html):[^@]*(?:@[\w-]+)?)$/;
+const MAPPING_VALUE_PATTERN = /^(?:field:[\w-]+|media:[\w-]+|ref:[\w-]+\.[\w-]+|href:(?:self|[\w-]+)|term:[\w-]+|ui:[\w.-]+|const:(?:true|false|-?\d+(?:\.\d+)?|[a-z][a-z0-9_-]{0,31})|site:[\w-]+|menu:(?:primary|footer)|page:(?:base|current|total|breadcrumb)|attr:[\w.-]+|class:[\w*-]+=(?:[a-z][\w-]*)?\|(?:[a-z][\w-]*)?|(?:dom|img|link|html)(?:@root)?:[^@]*(?:@[\w-]+)?)$/;
 /** The id a plan records for a section rule. */
 function sectionRuleId(builder, rule) {
 	return `${builder}:section:${rule.id}`;