@contentrain/astro-kit 0.11.0 → 0.12.1

package/catalog.json

@@ -2902,6 +2902,14 @@
           ],
           "default": "sm",
           "description": "The label under each figure: sm (small), base (body size) or lg (a counter title set like a subheading)."
+        },
+        "order": {
+          "options": [
+            "label-first",
+            "value-first"
+          ],
+          "default": "label-first",
+          "description": "Which the page's text reads first, as the source does: label-first (an Elementor counter) or value-first (a Gutenberg figure heading over its label). The figure is drawn on top either way."
         }
       },
       "props": {
@@ -3039,6 +3047,11 @@
           "items": {
             "type": "object",
             "fields": {
+              "number": {
+                "type": "string",
+                "label": "Number",
+                "description": "The step's number as the source writes it (01, Step 2); empty: the list counts 1, 2, 3."
+              },
               "title": {
                 "type": "string",
                 "label": "Title",
@@ -3102,6 +3115,7 @@
         "heading": "heading",
         "intro": "intro",
         "items": "items",
+        "items[].number": "items[].number",
         "items[].title": "items[].title",
         "items[].text": "items[].text",
         "items[].image": "items[].image",

package/components/stats/Stats.astro

@@ -7,7 +7,7 @@ import Section, { type Tone } from '../_shared/Section.astro'
 const stats = tv({
   slots: {
     list: 'grid grid-cols-2 gap-6 md:gap-8',
-    item: 'flex flex-col-reverse gap-1',
+    item: 'flex gap-1',
     value: 'text-4xl [font-weight:var(--font-weight-heading,700)] tracking-tight tabular-nums md:text-5xl',
     label: 'text-sm opacity-80',
   },
@@ -25,8 +25,11 @@ const stats = tv({
     tone: { default: {}, muted: {}, inverse: {}, accent: { label: 'opacity-100' } },
     // The label under each figure: small, body size, or large (a counter title set like a subheading).
     labelSize: { sm: {}, base: { label: 'text-base' }, lg: { label: 'text-lg' } },
+    // Which comes first in the page's text: the source's own order (a Gutenberg figure is a heading over its label, an
+    // Elementor counter names itself first). The figure is drawn on top either way.
+    order: { 'label-first': { item: 'flex-col-reverse' }, 'value-first': { item: 'flex-col' } },
   },
-  defaultVariants: { columns: '3', style: 'plain', tone: 'default', labelSize: 'sm' },
+  defaultVariants: { columns: '3', style: 'plain', tone: 'default', labelSize: 'sm', order: 'label-first' },
 })
 
 interface Item {
@@ -43,13 +46,15 @@ interface Props {
   columns?: '2' | '3' | '4' | undefined
   style?: 'plain' | 'card' | undefined
   labelSize?: 'sm' | 'base' | 'lg' | undefined
+  order?: 'label-first' | 'value-first' | undefined
   tone?: Tone | undefined
   id?: string | undefined
 }
 
-const { heading, intro, items, columns, style, labelSize, tone, id } = Astro.props
-const s = stats({ columns, style, labelSize, tone })
+const { heading, intro, items, columns, style, labelSize, order, tone, id } = Astro.props
+const s = stats({ columns, style, labelSize, order, tone })
 const headingId = heading && id ? `${id}-title` : undefined
+// 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 tone={tone} id={id} aria-labelledby={headingId}>
   {(heading || intro) && (
@@ -58,12 +63,23 @@ const headingId = heading && id ? `${id}-title` : undefined
       {intro && <p class:list={['text-lg', tone === 'accent' ? undefined : 'opacity-80']} data-kit-text>{intro}</p>}
     </header>
   )}
-  <dl class={s.list()}>
-    {items.map(item => (
-      <div class={s.item()}>
-        <dt class={s.label()}>{item.label}</dt>
-        <dd class={s.value()}>{item.prefix}{item.value}{item.suffix}</dd>
-      </div>
-    ))}
-  </dl>
+  {order === 'value-first' ? (
+    <ul class={s.list()} role="list">
+      {items.map(item => (
+        <li class={s.item()}>
+          <p class={s.value()}>{item.prefix}{item.value}{item.suffix}</p>
+          <p class={s.label()}>{item.label}</p>
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <dl class={s.list()}>
+      {items.map(item => (
+        <div class={s.item()}>
+          <dt class={s.label()}>{item.label}</dt>
+          <dd class={s.value()}>{item.prefix}{item.value}{item.suffix}</dd>
+        </div>
+      ))}
+    </dl>
+  )}
 </Section>

package/components/stats/fixtures.json

@@ -133,5 +133,28 @@
         }
       ]
     }
+  },
+  {
+    "name": "value-first",
+    "props": {
+      "heading": "Launch in numbers",
+      "order": "value-first",
+      "items": [
+        {
+          "value": "1,200",
+          "label": "Teams using Calm Status"
+        },
+        {
+          "value": "99.99",
+          "suffix": "%",
+          "label": "Uptime last year"
+        },
+        {
+          "value": "4",
+          "suffix": " min",
+          "label": "Median time to first update"
+        }
+      ]
+    }
   }
 ]

package/components/stats/meta.json

@@ -43,6 +43,14 @@
       ],
       "default": "sm",
       "description": "The label under each figure: sm (small), base (body size) or lg (a counter title set like a subheading)."
+    },
+    "order": {
+      "options": [
+        "label-first",
+        "value-first"
+      ],
+      "default": "label-first",
+      "description": "Which the page's text reads first, as the source does: label-first (an Elementor counter) or value-first (a Gutenberg figure heading over its label). The figure is drawn on top either way."
     }
   },
   "props": {

package/components/steps/Steps.astro

@@ -15,6 +15,7 @@ const steps = tv({
     list: 'grid gap-8 [counter-reset:kit-step]',
     step: 'flex gap-4 [counter-increment:kit-step]',
     body: 'flex flex-col gap-2',
+    badge: 'shrink-0',
     media: 'mb-2 overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
     title: 'text-lg leading-snug [font-weight:var(--font-weight-heading,600)] text-balance',
     text: 'text-pretty opacity-80',
@@ -24,16 +25,22 @@ const steps = tv({
       list: { list: 'max-w-3xl' },
       row: { list: 'sm:grid-cols-2 lg:auto-cols-fr lg:grid-flow-col lg:grid-cols-none', step: 'flex-col' },
     },
-    // The number is drawn from a CSS counter, so the list stays one <ol> a screen reader counts itself.
+    // The number is drawn from a CSS counter, so the list stays one <ol> a screen reader counts itself. A number the
+    // source wrote (`01`) is the page's text and is shown as written, hidden from the screen reader that already counts.
     style: {
-      numbered: { step: "before:flex before:size-10 before:shrink-0 before:items-center before:justify-center before:rounded-full before:bg-accent before:font-semibold before:text-accent-ink before:content-[counter(kit-step)]" },
-      plain: { step: 'border-l-2 border-accent pl-4' },
+      numbered: {
+        step: "before:flex before:size-10 before:shrink-0 before:items-center before:justify-center before:rounded-full before:bg-accent before:font-semibold before:text-accent-ink before:content-[counter(kit-step)]",
+        badge: 'flex h-10 min-w-10 items-center justify-center self-start rounded-full bg-accent px-2 font-semibold text-accent-ink',
+      },
+      plain: { step: 'border-l-2 border-accent pl-4', badge: 'font-semibold tabular-nums' },
     },
   },
   defaultVariants: { layout: 'list', style: 'numbered' },
 })
 
 interface Step {
+  /** The number as the source writes it (`01`, `Step 2`); without it the list counts itself. */
+  number?: string | undefined
   title: string
   text: string
   /** The image's address. */
@@ -64,7 +71,8 @@ const headingId = heading && id ? `${id}-title` : undefined
     )}
     <ol class={s.list()}>
       {items.map(step => (
-        <li class={s.step()}>
+        <li class={s.step({ class: step.number ? 'before:hidden' : undefined })}>
+          {step.number && <span class={s.badge()} aria-hidden="true">{step.number}</span>}
           <div class={s.body()}>
             {imageOf(step.image, step.imageAlt) && <div class={s.media()}><KitImage image={imageOf(step.image, step.imageAlt)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover" /></div>}
             <h3 class={s.title()}>{step.title}</h3>

package/components/steps/fixtures.json

@@ -1,5 +1,7 @@
 [
   {"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": "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."}]}}
 ]

package/components/steps/meta.json

@@ -46,6 +46,11 @@
       "items": {
         "type": "object",
         "fields": {
+          "number": {
+            "type": "string",
+            "label": "Number",
+            "description": "The step's number as the source writes it (01, Step 2); empty: the list counts 1, 2, 3."
+          },
           "title": {
             "type": "string",
             "label": "Title",

package/components/testimonial/Testimonial.astro

@@ -58,6 +58,9 @@ interface Props {
 const { items, heading, layout, quoteSize, tone, id } = Astro.props
 const s = testimonial({ layout, quoteSize, tone })
 const headingId = heading && id ? `${id}-title` : undefined
+// The quotation marks are drawn, not written: the quote's text is the source's words, read once. A quote the source
+// already wrote inside marks keeps its own.
+const quoted = (text: string) => /^\s*["'“‘„«‹「『]/.test(text)
 ---
 {items.length > 0 && (
   <Section tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
@@ -65,7 +68,7 @@ const headingId = heading && id ? `${id}-title` : undefined
     <div class={s.list()}>
       {items.map(item => (
         <figure class={s.card()}>
-          <blockquote class={s.quote()}><p>“{item.quote}”</p></blockquote>
+          <blockquote class={s.quote()}><p class:list={[!quoted(item.quote) && "before:content-[open-quote] after:content-[close-quote]"]}>{item.quote}</p></blockquote>
           <figcaption class={s.person()}>
             {imageOf(item.avatar, item.avatarAlt) && <KitImage image={imageOf(item.avatar, item.avatarAlt)!} sizes="48px" class="size-12 shrink-0 rounded-full object-cover" />}
             <span class="flex flex-col text-left">

package/components/testimonial/fixtures.json

@@ -34,5 +34,9 @@
   {
     "name": "single-quote-lg",
     "props": { "layout": "single", "quoteSize": "lg", "items": [{ "quote": "We planned less and saw more.", "name": "Jonas Weber", "role": "Reader" }] }
+  },
+  {
+    "name": "grid-source-quoted",
+    "props": { "items": [{ "quote": "“We set it up before lunch.”", "name": "Grace Lin", "role": "Head of Support, Fernhill" }, { "quote": "People just read the page.", "name": "Omar Haddad", "role": "Support lead" }] }
   }
 ]

package/mapping/divi.json

@@ -413,6 +413,9 @@
     {
       "id": "stats.counter",
       "component": "stats",
+      "variant": {
+        "order": "value-first"
+      },
       "slots": {
         "intro": {
           "match": "divi/et_pb_text",

package/mapping/elementor.json

@@ -533,6 +533,7 @@
       "into": "items",
       "each": "column",
       "item": {
+        "number": "@number attr:title || @number dom:",
         "title": "@title attr:title || @title dom:",
         "text": "@text dom:"
       }

package/mapping/gutenberg.json

@@ -662,6 +662,9 @@
     {
       "id": "stats.columns",
       "component": "stats",
+      "variant": {
+        "order": "value-first"
+      },
       "when": {
         "columns": [
           2,
@@ -829,6 +832,7 @@
       "into": "items",
       "each": "column",
       "item": {
+        "number": "@number dom:",
         "title": "@title dom:",
         "text": "@text dom:"
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "license": "MIT",
   "description": "Copy-in Astro components for Contentrain sites (shadcn model): typed props, tailwind-variants, zero JavaScript by default — with a machine-readable catalog",
   "type": "module",
@@ -42,7 +42,7 @@
     "mapping"
   ],
   "dependencies": {
-    "@contentrain/types": "1.33.0"
+    "@contentrain/types": "1.35.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",