@getvitops/astro 4.1.0 → 6.0.0

package/src/components/Subgrid.astro

@@ -1,32 +1,50 @@
 ---
 /**
- * Subgrid — re-emits slotted children as `<li>` items of a `.subgrid` grid, so
- * the tranches inside each one align on shared row lines. Every declaration
- * lives in the framework's `subgrid` pattern (patterns/subgrid.css), which is
- * emitted in all three output formats; this file is markup only.
+ * Subgrid — a grid whose items re-declare the parent's row tracks, so the tranches
+ * inside every item (head, body, footer) land on the same row lines no matter how
+ * much content each one holds. Every declaration lives in the framework's `subgrid`
+ * pattern (patterns/subgrid.css); this file is markup only.
  *
- * Nothing here may reach for a Tailwind utility: Tailwind doesn't scan
- * node_modules, so a class only it can emit is silently never generated — and
- * classes in the generator's TW_CLASH list are stripped from the framework's
- * own tailwind bundle by design.
+ * **The slot is rendered verbatim — author the items yourself.** This used to parse
+ * the slotted HTML and replace each child with an `<li>`, carrying over its class
+ * and style. That existed only because a `<ul>` may contain nothing but `<li>`, and
+ * it cost more than it bought: the child's tag was discarded, and every attribute
+ * had to be copied by hand, so `id`, `data-*` and `aria-*` were silently dropped and
+ * `href` could not survive at all. Passing the slot through means there is nothing to
+ * copy and nothing to lose.
  *
- * Size it from the consumer's own CSS, which keeps media-query overrides
- * working: `--subgrid-cols`, `--subgrid-row-span`, `--subgrid-gap`,
- * `--subgrid-row-gap`. `--num-items` is set here for nth-child-style maths.
+ *   <Subgrid>
+ *     <li class="card subgrid-card">…</li>
+ *   </Subgrid>
+ *
+ * `as` picks the container. It defaults to `ul`, because a set of cards IS a list and
+ * that is what tells assistive tech how many there are and where you are among them.
+ * Use `as="div"` when the items are genuinely not a list.
+ *
+ * **`role="list"` is restored automatically for `ul`/`ol`.** `.subgrid` sets
+ * `list-style: none`, and that stops Safari + VoiceOver announcing a list at all — so
+ * the marker reset silently costs the semantics the `<ul>` was chosen for. Passing
+ * your own `role` wins.
+ *
+ * Size it from the consumer's own CSS, which keeps media-query overrides working:
+ * `--subgrid-cols`, `--subgrid-row-span`, `--subgrid-gap`, `--subgrid-row-gap`.
+ *
+ * For a card whose whole area should be clickable, see `<Cards />` (selectable text,
+ * needs JS) or `.stretched-link` (no JS, text not selectable).
  */
 import type { HTMLAttributes } from 'astro/types';
-import { parseRenderedSlots, getAttribute, serialize, styleList } from '@getvitops/utils';
 
-export interface Props extends HTMLAttributes<'ul'> {};
+export interface Props extends HTMLAttributes<'ul'> {
+  /** Container element. `ul`/`ol` also get `role="list"`. */
+  as?: 'ul' | 'ol' | 'div';
+}
 
-const { class: className, style } = Astro.props;
+const { as: Tag = 'ul', class: className, role, ...rest } = Astro.props;
 
-const nodes = parseRenderedSlots(await Astro.slots.render('default'));
-const slots = nodes.filter(node => 'tagName' in node).map(node  => ({ html: serialize(node), attrs: node.attrs }));
+// Only lists lose semantics to `list-style: none`, so only lists get the role back.
+const listRole = Tag === 'ul' || Tag === 'ol' ? 'list' : undefined;
 ---
 
-<ul class:list={["subgrid", className]} style={styleList({'--num-items': slots.length}, style)}>
-  {slots.map((slot) => (
-    <li class:list={[getAttribute(slot, 'class')]} style={styleList(getAttribute(slot, 'style'))} set:html={slot.html}></li>
-  ))}
-</ul>
+<Tag class:list={['subgrid', className]} role={role ?? listRole} {...rest}>
+  <slot />
+</Tag>

package/src/components/Tree.astro

@@ -65,14 +65,14 @@ const {
   {
     enhance ? (
       <wc-tree label={label} {...rest}>
-        <ul class="tree tree--lines" aria-label={ariaLabel}>
+        <ul class="tree tree--lines" role="list" aria-label={ariaLabel}>
           {items.map((item) => (
             <TreeNode item={item} depth={0} openDepth={openDepth} />
           ))}
         </ul>
       </wc-tree>
     ) : (
-      <ul class="tree tree--lines" aria-label={ariaLabel}>
+      <ul class="tree tree--lines" role="list" aria-label={ariaLabel}>
         {items.map((item) => (
           <TreeNode item={item} depth={0} openDepth={openDepth} />
         ))}

package/src/components/TreeNode.astro

@@ -41,7 +41,7 @@ const isBranch = kids.length > 0;
           </span>
         </summary>
         {item.descriptionHtml && <p class="tree__desc" set:html={item.descriptionHtml} />}
-        <ul class="tree">
+        <ul class="tree" role="list">
           {kids.map((kid) => (
             <Astro.self item={kid} depth={depth + 1} openDepth={openDepth} />
           ))}

package/src/exports/tracking.ts

@@ -0,0 +1,26 @@
+/**
+ * `@getvitops/astro/tracking` — the attribution vocabulary, re-exported.
+ *
+ * The documented conversion flow spans two packages: `<Tracking />` captures the
+ * click ID from `@getvitops/astro`, and the route reads it back with
+ * `parseTrackingCookie` from `@getvitops/utils/tracking`. Under strict pnpm a
+ * consumer cannot resolve the second from app code without adding
+ * `@getvitops/utils` as a direct dependency — so the flow as written in the
+ * changelog needed two installs, and the obvious workaround (importing the same
+ * symbols from `@getvitops/astro`'s index) is the one that drags the whole
+ * integration, and its Node builtins, toward a Worker bundle.
+ *
+ * This entry is the third option and the correct one: one install, and a module
+ * graph that reaches only `@getvitops/utils/tracking` — no `sharp`, no
+ * `node:child_process`, nothing that cannot run in a Worker. It is a separate
+ * build entry for exactly the reason `./routes` is.
+ */
+export * from '@getvitops/utils/tracking';
+
+/**
+ * Where the capture script beacons `tel:` conversions.
+ *
+ * Re-exported here so a consumer writing the route can assert against the same
+ * constant the script uses, rather than retyping the path.
+ */
+export { TRACKING_ENDPOINT } from '../tracking.ts';

package/src/scripts/tracking.ts

@@ -26,6 +26,16 @@ const COOKIE_NAME = '_ac';
 const COOKIE_DAYS = 90;
 const AB_COOKIE = '_ab';
 
+// Where the `tel:` conversion beacon goes. Mirrors TRACKING_ENDPOINT in
+// ../tracking.ts (pinned by `tracking.test.ts`), copied for the same reason as
+// the parameter lists below — this file is inlined into the document.
+//
+// It was previously a bare literal at the call site, which made the contract
+// between this script and the route the consumer writes invisible: name the
+// file anything else and every beacon 404s, conversions vanish, and nothing
+// errors anywhere. The integration now warns at build when the route is absent.
+const TRACK_ENDPOINT = '/api/track';
+
 // Mirrors CLICK_ID_PARAMS/UTM_PARAMS in @getvitops/utils/tracking, deliberately
 // copied rather than imported: this file is inlined into the document by
 // <Tracking />, so a bare import would either fail or drag a module graph into
@@ -144,6 +154,6 @@ document.addEventListener('click', (e) => {
 
   // Fire-and-forget beacon; don't block the tel: navigation
   if (navigator.sendBeacon) {
-    navigator.sendBeacon('/api/track', JSON.stringify({ event: 'call', phone: link.href }));
+    navigator.sendBeacon(TRACK_ENDPOINT, JSON.stringify({ event: 'call', phone: link.href }));
   }
 });

package/src/tracking.ts

@@ -27,6 +27,19 @@ export interface GetvitopsTrackingOptions {
 /** The cookie the capture script writes. Mirrors `TRACKING_COOKIE` in utils. */
 export const TRACKING_COOKIE = '_ac';
 
+/**
+ * Where the capture script sends its `tel:` conversion beacon.
+ *
+ * The route itself is the consumer's to write (`createConversionRoute()` in
+ * `@getvitops/astro/routes`), so this is the one place the two halves agree on
+ * a path. It was a bare literal inside the inlined script: a consumer who named
+ * the file anything else got a silent 404 on every beacon and lost conversions
+ * with no error anywhere to explain it. Exported so a consumer can assert
+ * against it, mirrored in `scripts/tracking.ts` because that file is inlined
+ * into the document and cannot import, and pinned by `tracking.test.ts`.
+ */
+export const TRACKING_ENDPOINT = '/api/track';
+
 export interface ResolvedTracking {
   enabled: boolean;
   category: TrackingCategory;