@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/snippets/navigation-menu-item.figma.ts

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4547-83
+// source=platforms/shopify/theme/snippets/navigation-menu-item.liquid
+// component=navigation-menu-item (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): a trigger with its panel of links (Show Chevron), or a
+// top-level link drawn as a trigger. State is runtime, so it is not read.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const label = instance.getString("Label");
+const chevron = instance.getBoolean("Show Chevron");
+const id = "nav-" + label.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+const literal = (s: string) => (s.includes("'") ? `"${s}"` : `'${s}'`);
+
+export default {
+  example: chevron
+    ? figma.code`{%- capture links -%}
+  {% render 'navigation-menu-link', title: 'New arrivals', url: '/collections/new' %}
+{%- endcapture -%}
+{% render 'navigation-menu-item', id: '${id}', title: ${literal(label)}, content: links %}`
+    : figma.code`{% render 'navigation-menu-item', title: ${literal(label)}, url: '/pages/${id.slice(4)}' %}`,
+  id: "shopify-navigation-menu-item",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/navigation-menu-item.liquid

@@ -0,0 +1,40 @@
+{% doc %}
+  One top-level item of a Navigation Menu (spec: components/navigation-menu/spec.md): with content, React's
+  NavigationMenuTrigger + NavigationMenuContent (a button toggling a <div popover="auto"> anchored below it, opened on
+  click and on hover); without, a top-level link drawn as a trigger (upstream's navigationMenuTriggerStyle).
+
+  @param {string} id - unique on the page: the panel's id and the anchor's name
+  @param {string} title - the trigger's or link's text
+  @param {string} [url] - the link's address (an item without content)
+  @param {boolean} [current] - the current page (a link item): aria-current="page"
+  @param {string} [content] - the panel's links, captured from navigation-menu-link snippets
+  @param {string} [align] - the panel along its trigger: start (default) | center | end
+
+  @example
+  {%- capture links -%}
+    {% render 'navigation-menu-link', title: 'New arrivals', url: '/collections/new' %}
+  {%- endcapture -%}
+  {% render 'navigation-menu-item', id: 'nav-shop', title: 'Shop', content: links %}
+{% enddoc %}
+
+{%- liquid
+  assign area = 'block-end span-inline-end'
+  if align == 'center'
+    assign area = 'block-end'
+  elsif align == 'end'
+    assign area = 'block-end span-inline-start'
+  endif
+-%}
+<li class="bl-navigation-menu__item" data-slot="navigation-menu-item">
+  {%- if content != blank -%}
+    <button type="button" class="bl-navigation-menu__trigger" data-slot="navigation-menu-trigger" command="toggle-popover" commandfor="{{ id }}" interestfor="{{ id }}" data-interest-delay="50" data-interest-close-delay="50" style="anchor-name: --{{ id }}; interest-delay-start: 50ms; interest-delay-end: 50ms;">
+      {{- title | escape -}}
+      {%- render 'icon', name: 'chevron-down', class: 'bl-navigation-menu__chevron' -%}
+    </button>
+    <div popover="auto" id="{{ id }}" class="bl-navigation-menu__content" data-slot="navigation-menu-content" style="position-anchor: --{{ id }}; position-area: {{ area }};">
+      <ul class="bl-navigation-menu__links">{{ content }}</ul>
+    </div>
+  {%- else -%}
+    <a class="bl-navigation-menu__trigger" data-slot="navigation-menu-link" href="{{ url }}"{% if current %} aria-current="page"{% endif %}>{{ title | escape }}</a>
+  {%- endif -%}
+</li>

package/templates/shopify/snippets/navigation-menu-link.figma.ts

@@ -0,0 +1,27 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4547-131
+// source=platforms/shopify/theme/snippets/navigation-menu-link.liquid
+// component=navigation-menu-link (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): one panel link; active is the current page, Description and
+// Badge are the snippet's parameters (hover and focus are runtime).
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const literal = (s: string) => (s.includes("'") ? `"${s}"` : `'${s}'`);
+const label = instance.getString("Label");
+const current = instance.getEnum("State", { default: false, hover: false, active: true, focus: false });
+const description = instance.getBoolean("Show Description") ? instance.getString("Description") : "";
+const badge = instance.getBoolean("Show Badge");
+
+const args = [
+  `title: ${literal(label)}`,
+  `url: '#'`,
+  current ? "current: true" : "",
+  description ? `description: ${literal(description)}` : "",
+  badge ? "badge: 'New'" : "",
+].filter(Boolean).join(", ");
+
+export default {
+  example: figma.code`{% render 'navigation-menu-link', ${args} %}`,
+  id: "shopify-navigation-menu-link",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/navigation-menu-link.liquid

@@ -0,0 +1,31 @@
+{% doc %}
+  One link of a Navigation Menu panel (spec: components/navigation-menu/spec.md), React's NavigationMenuLink. Render
+  links into a capture and pass it to `navigation-menu-item` as its content.
+
+  @param {string} title - the link text
+  @param {string} url - where it goes
+  @param {boolean} [current] - the current page: aria-current="page" and the active tint
+  @param {string} [description] - a muted line under the title (upstream's demo ListItem)
+  @param {string} [badge] - a small Badge beside the title, e.g. "New" (user, 2026-10-06)
+  @param {string} [icon] - a Baseline system icon before the title (snippets/icon.liquid)
+
+  @example
+  {% render 'navigation-menu-link', title: 'Gift cards', url: '/products/gift-card', badge: 'New' %}
+{% enddoc %}
+
+<li class="bl-navigation-menu__links-item">
+  <a class="bl-navigation-menu__link" data-slot="navigation-menu-link" href="{{ url }}"{% if current %} aria-current="page"{% endif %}>
+    {%- if icon != blank -%}{%- render 'icon', name: icon, class: 'bl-navigation-menu__link-icon' -%}{%- endif -%}
+    {%- if description != blank or badge != blank -%}
+      <span class="bl-navigation-menu__link-body">
+        <span class="bl-navigation-menu__link-title">
+          {{- title | escape -}}
+          {%- if badge != blank %} {% render 'badge', label: badge, size: 'sm' %}{% endif -%}
+        </span>
+        {%- if description != blank -%}<span class="bl-navigation-menu__link-description">{{ description | escape }}</span>{%- endif -%}
+      </span>
+    {%- else -%}
+      {{- title | escape -}}
+    {%- endif -%}
+  </a>
+</li>

package/templates/shopify/snippets/navigation-menu.figma.ts

@@ -0,0 +1,12 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=2537-49294
+// source=platforms/shopify/theme/snippets/navigation-menu.liquid
+// component=navigation-menu (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): a Shopify menu's two levels as the Navigation Menu (the
+// header section renders its menu setting this way; the navigation-menu block does it elsewhere).
+import figma from "figma";
+
+export default {
+  example: figma.code`{% render 'navigation-menu', menu: section.settings.menu, id: 'header-nav', aria_label: 'Main' %}`,
+  id: "shopify-navigation-menu",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/navigation-menu.liquid

@@ -0,0 +1,300 @@
+{% doc %}
+  Baseline Navigation Menu as a snippet (spec: components/navigation-menu/spec.md): React's native markup, a <nav> list
+  whose triggers open <div popover="auto"> panels placed below them by CSS anchor positioning, on click and on hover;
+  every link is in the page, so the menu is crawlable and works without JavaScript. The shared interest script gives a
+  clicked panel Base UI's stickiness and hover to browsers without interestfor (user, 2026-10-06).
+
+  Either a Shopify menu (two levels: its links, and their child links as each panel) or items composed by hand.
+
+  @param {object} [menu] - a link_list (section.settings.menu): renders its items
+  @param {string} [items] - or the items, captured from navigation-menu-item snippets
+  @param {string} [id] - unique on the page; panel ids are <id>-<n> (default: navigation-menu)
+  @param {string} [aria_label] - names the nav (default "Main")
+  @param {string} [class] - extra classes
+  @param {string} [attrs] - extra attributes on the root (block.shopify_attributes)
+
+  @example
+  {% render 'navigation-menu', menu: section.settings.menu, id: 'header-nav' %}
+{% enddoc %}
+
+{%- liquid
+  assign prefix = id | default: 'navigation-menu'
+  assign label = aria_label | default: 'Main'
+-%}
+<nav class="bl-navigation-menu{% if class != blank %} {{ class }}{% endif %}" data-slot="navigation-menu" aria-label="{{ label | escape }}" {{ attrs }}>
+  <ul class="bl-navigation-menu__list" data-slot="navigation-menu-list">
+    {%- if menu != blank -%}
+      {%- for link in menu.links -%}
+        {%- assign panel_id = prefix | append: '-' | append: forloop.index -%}
+        {%- capture links -%}
+          {%- for child in link.links -%}
+            {% render 'navigation-menu-link', title: child.title, url: child.url, current: child.current %}
+          {%- endfor -%}
+        {%- endcapture -%}
+        {% render 'navigation-menu-item', id: panel_id, title: link.title, url: link.url, current: link.current, content: links %}
+      {%- endfor -%}
+    {%- else -%}
+      {{- items -}}
+    {%- endif -%}
+  </ul>
+</nav>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/navigation-menu/navigation-menu.tsx. Geometry and tints from the navigation-menu/* tokens;
+     the panel is Popover's look. */
+  .bl-navigation-menu {
+    position: relative;
+    display: flex;
+    flex: 1;
+    max-width: max-content;
+    align-items: center;
+    justify-content: center;
+  }
+  .bl-navigation-menu__list,
+  .bl-navigation-menu__links {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .bl-navigation-menu__list {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+  }
+  .bl-navigation-menu__item { position: relative; }
+
+  /* the trigger, and a top-level link drawn as one (upstream's navigationMenuTriggerStyle) */
+  .bl-navigation-menu__trigger {
+    display: inline-flex;
+    width: max-content;
+    height: var(--bl-navigation-menu-trigger-height);
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: var(--bl-navigation-menu-trigger-padding-y) var(--bl-navigation-menu-trigger-padding-x);
+    border: 0;
+    border-radius: var(--bl-navigation-menu-trigger-radius);
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: var(--bl-navigation-menu-trigger-font-size);
+    font-weight: var(--bl-navigation-menu-trigger-font-weight);
+    line-height: var(--bl-navigation-menu-trigger-line-height);
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
+    transition: background-color 150ms, box-shadow 150ms;
+  }
+  .bl-navigation-menu__trigger:is(:hover, :focus) { background-color: var(--muted); }
+  /* focus keeps Baseline's ring role (already translucent), as Button's */
+  .bl-navigation-menu__trigger:focus-visible { box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring); }
+  /* open: its item holds an open panel; upstream's data-open:bg-muted/50, muted again when hovered or focused */
+  .bl-navigation-menu__item:has(> :popover-open) > .bl-navigation-menu__trigger { background-color: var(--bl-navigation-menu-trigger-background-open); }
+  .bl-navigation-menu__item:has(> :popover-open) > .bl-navigation-menu__trigger:is(:hover, :focus) { background-color: var(--muted); }
+  .bl-navigation-menu__chevron {
+    position: relative;
+    top: 1px;
+    flex: none;
+    width: var(--bl-navigation-menu-trigger-icon-size);
+    height: var(--bl-navigation-menu-trigger-icon-size);
+    margin-inline-start: var(--bl-navigation-menu-trigger-icon-gap);
+    transition: rotate 300ms;
+  }
+  .bl-navigation-menu__item:has(> :popover-open) .bl-navigation-menu__chevron { rotate: 180deg; }
+
+  /* the panel: <div popover="auto"> below its trigger, Popover's look; hidden while closed so display can transition */
+  .bl-navigation-menu__content {
+    inset: auto;
+    margin: var(--bl-navigation-menu-content-offset) 0 0;
+    padding: var(--bl-navigation-menu-content-padding);
+    overflow: visible;
+    border: 0;
+    border-radius: var(--bl-navigation-menu-content-radius);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    box-shadow: 0 0 0 1px var(--bl-navigation-menu-content-border), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    position-try-fallbacks: flip-inline;
+    transform-origin: top;
+    opacity: 0;
+    scale: 0.9;
+    transition: opacity 150ms, scale 150ms, display 150ms allow-discrete, overlay 150ms allow-discrete;
+  }
+  .bl-navigation-menu__content:not(:popover-open) { display: none; }
+  .bl-navigation-menu__content:popover-open {
+    opacity: 1;
+    scale: 1;
+    transition-duration: 350ms;
+    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  @starting-style {
+    .bl-navigation-menu__content:popover-open { opacity: 0; scale: 0.9; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .bl-navigation-menu__content { transition: none; }
+  }
+  .bl-navigation-menu__links { min-width: 12rem; }
+
+  /* a link in a panel: NavigationMenuLink. Start-aligned outright: the theme header's `header a` centres its links */
+  .bl-navigation-menu__link {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: start;
+    gap: var(--bl-navigation-menu-link-gap);
+    padding: var(--bl-navigation-menu-link-padding);
+    border-radius: var(--bl-navigation-menu-link-radius);
+    color: inherit;
+    font-size: var(--bl-navigation-menu-link-font-size);
+    line-height: var(--bl-navigation-menu-link-line-height);
+    text-decoration: none;
+    outline: none;
+    transition: background-color 150ms;
+  }
+  .bl-navigation-menu__link[aria-current='page'] { background-color: var(--bl-navigation-menu-link-background-active); }
+  .bl-navigation-menu__link:is(:hover, :focus) { background-color: var(--muted); }
+  .bl-navigation-menu__link-icon {
+    flex: none;
+    width: var(--bl-navigation-menu-link-icon-size);
+    height: var(--bl-navigation-menu-link-icon-size);
+  }
+  .bl-navigation-menu__link-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bl-navigation-menu-link-description-gap);
+  }
+  .bl-navigation-menu__link-title {
+    display: flex;
+    align-items: center;
+    gap: var(--bl-navigation-menu-link-gap);
+    font-weight: var(--bl-navigation-menu-link-title-font-weight);
+    line-height: 1;
+  }
+  .bl-navigation-menu__link-description {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    color: var(--muted-foreground);
+  }
+{% endstylesheet %}
+
+{% javascript %}
+  /* baseline:script:start (generated by scripts/gen-html.mjs from platforms/html/src/interest.js; do not edit) */
+  /* Interest invokers without React, for the HTML build and Shopify (Navigation Menu, Tooltip, Hover Card): the plain-JS
+     twin of registry/src/lib/interest.tsx (InterestFallback), which a static page cannot run. Keep the two in step.
+     One set of delegated listeners per document:
+     - every browser: a popover its invoker also toggles by command (commandfor, Navigation Menu's trigger) STICKS once
+       clicked, as Floating UI's useHover + useClick do for Base UI: a click opens it and losing interest no longer closes
+       it, and a click on a popover interest opened keeps it open; the next click, Escape, a click outside or another auto
+       popover closes it. Natively that cancels the popover's `loseinterest` event.
+     - where the browser lacks interestfor (Firefox and Safari, 2026-10): pointer over or focus on an [interestfor]
+       element shows its popover after the trigger's data-interest-delay, pointer out or blur hides it after
+       data-interest-close-delay unless the pointer moved onto the popover (WCAG 1.4.13), Escape hides what this opened.
+     Source of truth: this file; scripts/gen-html.mjs copies it to dist/interest.js and writes it into the Shopify
+     navigation-menu snippet. */
+  (function () {
+    if (window.baselineInterest) return;
+    window.baselineInterest = true;
+
+    var sticky = new WeakSet();
+    document.addEventListener('command', function (e) {
+      var target = e.target;
+      if (e.command !== 'toggle-popover' && e.command !== 'show-popover') return;
+      if (!target.matches(':popover-open')) sticky.add(target);
+      else if (!sticky.has(target)) {
+        e.preventDefault();
+        sticky.add(target);
+      }
+    }, true);
+    document.addEventListener('toggle', function (e) {
+      if (e.newState === 'closed') sticky.delete(e.target);
+    }, true);
+    document.addEventListener('loseinterest', function (e) {
+      if (sticky.has(e.target)) e.preventDefault();
+    }, true);
+
+    if ('interestForElement' in HTMLButtonElement.prototype) return;
+
+    var DEFAULT_DELAY = 500, DEFAULT_CLOSE_DELAY = 250;
+    var timers = new WeakMap(), invokerOf = new WeakMap(), shown = new Set();
+    function ms(el, attr, fallback) {
+      var v = Number(el.getAttribute(attr));
+      return el.hasAttribute(attr) && isFinite(v) ? v : fallback;
+    }
+    function targetOf(invoker) {
+      var id = invoker && invoker.getAttribute('interestfor');
+      return id ? document.getElementById(id) : null;
+    }
+    function schedule(target, fn, delay) {
+      clearTimeout(timers.get(target));
+      timers.set(target, setTimeout(fn, delay));
+    }
+    function show(invoker) {
+      var target = targetOf(invoker);
+      if (!target) return;
+      schedule(target, function () {
+        if (!target.matches(':popover-open')) target.showPopover();
+        invokerOf.set(target, invoker);
+        shown.add(target);
+      }, ms(invoker, 'data-interest-delay', DEFAULT_DELAY));
+    }
+    function hide(target) {
+      if (sticky.has(target)) return;
+      var invoker = invokerOf.get(target);
+      schedule(target, function () {
+        if (target.matches(':popover-open')) target.hidePopover();
+        shown.delete(target);
+      }, invoker ? ms(invoker, 'data-interest-close-delay', DEFAULT_CLOSE_DELAY) : DEFAULT_CLOSE_DELAY);
+    }
+    function keep(target) { clearTimeout(timers.get(target)); }
+    function closestInvoker(n) { return n instanceof Element ? n.closest('[interestfor]') : null; }
+    function shownTargetAround(n) {
+      if (!(n instanceof Node)) return null;
+      var hit = null;
+      shown.forEach(function (t) { if (!hit && t.contains(n)) hit = t; });
+      return hit;
+    }
+
+    document.addEventListener('pointerover', function (e) {
+      var invoker = closestInvoker(e.target);
+      if (invoker) {
+        var t = targetOf(invoker);
+        if (t && shown.has(t)) keep(t);
+        else show(invoker);
+        return;
+      }
+      var around = shownTargetAround(e.target);
+      if (around) keep(around);
+    });
+    document.addEventListener('pointerout', function (e) {
+      var to = e.relatedTarget;
+      var fromInvoker = closestInvoker(e.target);
+      var target = fromInvoker ? targetOf(fromInvoker) : shownTargetAround(e.target);
+      if (!target) return;
+      if (to instanceof Node && (target.contains(to) || (fromInvoker && fromInvoker.contains(to)) || targetOf(closestInvoker(to)) === target)) return;
+      if (fromInvoker && !shown.has(target)) { clearTimeout(timers.get(target)); return; }
+      hide(target);
+    });
+    document.addEventListener('focusin', function (e) {
+      var invoker = closestInvoker(e.target);
+      if (invoker) show(invoker);
+    });
+    document.addEventListener('focusout', function (e) {
+      var target = targetOf(closestInvoker(e.target));
+      if (!target) return;
+      if (!shown.has(target)) { clearTimeout(timers.get(target)); return; }
+      hide(target);
+    });
+    document.addEventListener('keydown', function (e) {
+      if (e.key !== 'Escape') return;
+      shown.forEach(function (t) {
+        clearTimeout(timers.get(t));
+        if (t.matches(':popover-open')) t.hidePopover();
+      });
+      shown.clear();
+    });
+  })();
+  /* baseline:script:end */
+{% endjavascript %}

package/templates/shopify/snippets/pagination.figma.ts

@@ -0,0 +1,13 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1706-5326
+// source=platforms/shopify/theme/snippets/pagination.liquid
+// component=pagination (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): the pagination snippet renders the paginate object, so the
+// Figma links map to nothing typed. The Variant is the project's look (ADR-0031): the theme installs one and makes it
+// the snippet's default, so it maps to nothing here.
+import figma from "figma";
+
+export default {
+  example: figma.code`{% render 'pagination', paginate: paginate %}`,
+  id: "shopify-pagination",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/pagination.liquid

@@ -0,0 +1,208 @@
+{% doc %}
+  Baseline Pagination as a snippet (spec: components/pagination/spec.md): renders Shopify's paginate object as the React
+  markup, nav > ul > li, with every link a Button (the button snippet), Previous and Next with the system chevrons and
+  their text (always rendered; disabled on the first or last page), the elided pages as the more-horizontal glyph
+  announced as "More pages". In a pagination narrower than 32rem (a container query) only Previous and Next remain.
+  Renders nothing when there is one page.
+
+  One look per site (ADR-0031): the theme carries only the project's looks, generated into this file by
+  tokens/looks.mjs; the first is the default. The core theme carries all three for the kitchen sink.
+
+  @param {object} paginate - the paginate object, inside a {% paginate %} block (required)
+  @param {string} [variant] - one of the installed looks (default, bordered, grouped in core); defaults to the project's
+  @param {string} [anchor] - a fragment added to every link, e.g. 'comments'
+
+  @example
+  {% paginate collection.products by 20 %}
+    ...
+    {% render 'pagination', paginate: paginate %}
+  {% endpaginate %}
+{% enddoc %}
+
+{%- liquid
+  # baseline:looks (generated by tokens/looks.mjs, ADR-0031: the installed looks, the project's first)
+  assign looks = 'default,bordered,grouped' | split: ','
+  # end baseline:looks
+  assign v = variant | default: looks.first
+  unless looks contains v
+    assign v = looks.first
+  endunless
+  assign hash = ''
+  if anchor != blank
+    assign hash = '#' | append: anchor
+  endif
+-%}
+{%- if paginate.pages > 1 -%}
+  <nav class="bl-pagination bl-pagination--{{ v }}" role="navigation" aria-label="pagination" data-slot="pagination" data-variant="{{ v }}">
+    <ul class="bl-pagination__content" data-slot="pagination-content">
+      {%- comment -%}
+        Previous and Next are always rendered (user, 2026-10-02): on the first or last page the one that leads nowhere is a
+        disabled link (the button snippet with href and disabled: no href, role="link", aria-disabled)
+      {%- endcomment -%}
+      {%- liquid
+        assign prev_url = request.path
+        assign prev_off = true
+        if paginate.previous
+          assign prev_url = paginate.previous.url | append: hash
+          assign prev_off = false
+        endif
+        assign next_url = request.path
+        assign next_off = true
+        if paginate.next
+          assign next_url = paginate.next.url | append: hash
+          assign next_off = false
+        endif
+      -%}
+      <li data-slot="pagination-item">
+        {% render 'button', label: 'Previous', href: prev_url, disabled: prev_off, variant: 'ghost', size: 'md', icon: 'chevron-left', class: 'bl-pagination__link bl-pagination__step', attrs: 'aria-label="Go to previous page" data-slot="pagination-link" data-direction="previous"' %}
+      </li>
+      {%- for part in paginate.parts -%}
+        <li data-slot="pagination-item">
+          {%- if part.is_link -%}
+            {%- assign part_url = part.url | append: hash -%}
+            {% render 'button', label: part.title, href: part_url, variant: 'ghost', size: 'md', class: 'bl-pagination__link bl-pagination__page', attrs: 'data-slot="pagination-link"' %}
+          {%- elsif part.title contains 'hellip' or part.title contains '…' -%}
+            {%- comment -%} the elided pages: Shopify's title is the ellipsis entity {%- endcomment -%}
+            <span class="bl-pagination__ellipsis" data-slot="pagination-ellipsis">
+              {%- render 'icon', name: 'more-horizontal' -%}
+              <span class="bl-pagination__sr-only">More pages</span>
+            </span>
+          {%- else -%}
+            {%- comment -%}
+              any other non-link part is the current page (comparing its title with paginate.current_page failed: one
+              is a string, the other a number, so the current page was drawn as an ellipsis)
+            {%- endcomment -%}
+            {%- assign current_url = request.path | append: '?page=' | append: paginate.current_page | append: hash -%}
+            {% render 'button', label: part.title, href: current_url, variant: 'outline', size: 'md', class: 'bl-pagination__link bl-pagination__page', attrs: 'aria-current="page" data-slot="pagination-link" data-active="true"' %}
+          {%- endif -%}
+        </li>
+      {%- endfor -%}
+      <li data-slot="pagination-item">
+        {% render 'button', label: 'Next', href: next_url, disabled: next_off, variant: 'ghost', size: 'md', icon: 'chevron-right', icon_position: 'end', class: 'bl-pagination__link bl-pagination__step', attrs: 'aria-label="Go to next page" data-slot="pagination-link" data-direction="next"' %}
+      </li>
+    </ul>
+  </nav>
+{%- endif -%}
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/pagination/pagination.tsx. Links are the button snippet's Buttons (button/md/* geometry).
+     What every look shares is here; each look's rules are the generated region below (ADR-0031). */
+  .bl-pagination {
+    container: pagination / inline-size;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-inline: auto;
+  }
+  .bl-pagination__content {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  /* in a pagination narrower than 32rem the page numbers and the ellipsis hide; Previous and Next keep their text
+     (user, 2026-10-02). A container query, so a narrow column behaves as a phone does. */
+  @container pagination (width < 32rem) {
+    .bl-pagination__content > li:not(:has([data-direction])) { display: none; }
+  }
+  [dir='rtl'] .bl-pagination__step .bl-icon { transform: scaleX(-1); }
+
+  .bl-pagination__ellipsis {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--bl-button-md-radius);
+  }
+  .bl-pagination__ellipsis .bl-icon {
+    width: var(--bl-button-md-icon-size);
+    height: var(--bl-button-md-icon-size);
+  }
+  .bl-pagination__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+
+  /* baseline:looks:start (generated by tokens/looks.mjs from tokens/looks/shopify/pagination-<look>.css; do not edit) */
+  /* pagination, default look (upstream's; registry/src/ui/pagination/pagination.tsx): ghost Button links, the current page outline */
+  .bl-pagination--default .bl-pagination__content { gap: var(--bl-pagination-default-gap); }
+  .bl-pagination--default .bl-pagination__page { width: var(--bl-button-md-height); padding: 0; }
+  .bl-pagination--default .bl-pagination__ellipsis {
+    width: var(--bl-button-md-height);
+    height: var(--bl-button-md-height);
+  }
+
+  /* pagination, bordered look (registry/src/ui/pagination/pagination.bordered.tsx): a rule across the top; links are the
+     button snippet's md boxes in muted text with an indicator on that rule (clear, indicator-hover on hover, primary on
+     the current page, whose text is primary too); Previous and Next at the ends. The spacing is the default look's
+     (Button md and pagination/default/gap, user 2026-10-02). Three classes, to win over the button stylesheet whatever
+     order Shopify bundles them in. */
+  .bl-pagination--bordered { border-top: var(--bl-pagination-bordered-border-width) solid var(--border); }
+  .bl-pagination--bordered .bl-pagination__content {
+    justify-content: center;
+    width: 100%;
+    margin-top: calc(-1 * var(--bl-pagination-bordered-border-width));
+    gap: var(--bl-pagination-default-gap);
+  }
+  /* Previous and Next take the ends */
+  .bl-pagination--bordered li:has(> [data-direction]) { display: flex; flex: 1 1 0; }
+  .bl-pagination--bordered li:has(> [data-direction='next']) { justify-content: flex-end; }
+  .bl-pagination--bordered .bl-pagination__page { width: var(--bl-button-md-height); padding: 0; }
+  .bl-pagination--bordered .bl-pagination__link.bl-button,
+  .bl-pagination--bordered .bl-pagination__ellipsis {
+    border: 0;
+    border-top: var(--bl-pagination-bordered-indicator-width) solid transparent;
+    border-radius: 0;
+    background-color: transparent;
+    color: var(--muted-foreground);
+  }
+  .bl-pagination--bordered .bl-pagination__ellipsis {
+    width: var(--bl-button-md-height);
+    height: var(--bl-button-md-height);
+  }
+  .bl-pagination--bordered .bl-pagination__link.bl-button:hover {
+    border-top-color: var(--bl-pagination-bordered-indicator-hover);
+    background-color: transparent;
+    color: var(--foreground);
+  }
+  .bl-pagination--bordered .bl-pagination__link.bl-button[aria-current='page'] {
+    border-top-color: var(--primary);
+    color: var(--primary);
+  }
+
+  /* pagination, grouped look (registry/src/ui/pagination/pagination.grouped.tsx): one joined outline with Button Group's
+     seams; the current page filled with accent */
+  .bl-pagination--grouped .bl-pagination__content { gap: 0; }
+  .bl-pagination--grouped .bl-pagination__page { width: var(--bl-button-md-height); padding: 0; }
+  .bl-pagination--grouped .bl-pagination__ellipsis {
+    width: var(--bl-button-md-height);
+    height: var(--bl-button-md-height);
+  }
+  .bl-pagination--grouped :is(.bl-pagination__link, .bl-pagination__ellipsis) {
+    border: var(--bl-pagination-bordered-border-width) solid var(--border);
+    border-radius: 0;
+  }
+  .bl-pagination--grouped li:not(:first-child) > :is(.bl-pagination__link, .bl-pagination__ellipsis) { border-inline-start-width: 0; }
+  .bl-pagination--grouped li:first-child > * {
+    border-start-start-radius: var(--bl-button-md-radius);
+    border-end-start-radius: var(--bl-button-md-radius);
+  }
+  .bl-pagination--grouped li:last-child > * {
+    border-start-end-radius: var(--bl-button-md-radius);
+    border-end-end-radius: var(--bl-button-md-radius);
+  }
+  .bl-pagination--grouped .bl-pagination__link[aria-current='page'] {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+  /* disabled keeps its outline, which is the group's edge: muted text instead of the 50 % opacity */
+  .bl-pagination--grouped .bl-pagination__link[aria-disabled='true'] {
+    opacity: 1;
+    color: var(--muted-foreground);
+  }
+  /* baseline:looks:end */
+{% endstylesheet %}