@goldencomm/create-baseline 0.0.1 → 0.1.0

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

@@ -0,0 +1,12 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=475-121
+// source=platforms/shopify/theme/snippets/breadcrumb.liquid
+// component=breadcrumb (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): the breadcrumb snippet builds its trail from the template
+// (Home, the product's collection or the article's blog, the current page), so the Figma items map to nothing typed.
+import figma from "figma";
+
+export default {
+  example: figma.code`{% render 'breadcrumb' %}`,
+  id: "shopify-breadcrumb",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/breadcrumb.liquid

@@ -0,0 +1,124 @@
+{% doc %}
+  Baseline Breadcrumb as a snippet (spec: components/breadcrumb/spec.md). Builds the trail from the current template:
+  Home, then the product's collection (when the visitor came through one, /collections/x/products/y) or the article's
+  blog, then the current page, which is not a link and carries aria-current="page". Separators are the active icon
+  set's chevron, mirrored in right-to-left text. Renders nothing on the home page.
+
+  @param {string} [current] - the current page's label, when the template's own title is not the right one
+  @param {string} [class] - extra classes
+
+  @example
+  {% render 'breadcrumb' %}
+{% enddoc %}
+
+{%- liquid
+  assign page_label = current
+  assign parent_url = ''
+  assign parent_label = ''
+  case template.name
+    when 'product'
+      if collection
+        assign parent_url = collection.url
+        assign parent_label = collection.title
+      endif
+      if page_label == blank
+        assign page_label = product.title
+      endif
+    when 'collection'
+      if page_label == blank
+        assign page_label = collection.title
+      endif
+    when 'article'
+      assign parent_url = blog.url
+      assign parent_label = blog.title
+      if page_label == blank
+        assign page_label = article.title
+      endif
+    when 'blog'
+      if page_label == blank
+        assign page_label = blog.title
+      endif
+    when 'page'
+      if page_label == blank
+        assign page_label = page.title
+      endif
+    when 'search'
+      if page_label == blank
+        assign page_label = 'search.title' | t
+      endif
+    when 'cart'
+      if page_label == blank
+        assign page_label = 'cart.title' | t
+      endif
+  endcase
+-%}
+{%- if template.name != 'index' and page_label != blank -%}
+  <nav class="bl-breadcrumb{% if class %} {{ class }}{% endif %}" aria-label="{{ 'breadcrumb.label' | t }}" data-slot="breadcrumb">
+    <ol class="bl-breadcrumb__list" data-slot="breadcrumb-list">
+      <li class="bl-breadcrumb__item" data-slot="breadcrumb-item">
+        <a class="bl-breadcrumb__link" href="{{ routes.root_url }}" data-slot="breadcrumb-link">{{ 'breadcrumb.home' | t }}</a>
+      </li>
+      <li class="bl-breadcrumb__separator" role="presentation" aria-hidden="true" data-slot="breadcrumb-separator">
+        {%- render 'icon', name: 'chevron-right' -%}
+      </li>
+      {%- if parent_url != blank -%}
+        <li class="bl-breadcrumb__item" data-slot="breadcrumb-item">
+          <a class="bl-breadcrumb__link" href="{{ parent_url }}" data-slot="breadcrumb-link">{{ parent_label | escape }}</a>
+        </li>
+        <li class="bl-breadcrumb__separator" role="presentation" aria-hidden="true" data-slot="breadcrumb-separator">
+          {%- render 'icon', name: 'chevron-right' -%}
+        </li>
+      {%- endif -%}
+      <li class="bl-breadcrumb__item" data-slot="breadcrumb-item">
+        <span class="bl-breadcrumb__page" role="link" aria-disabled="true" aria-current="page" data-slot="breadcrumb-page">
+          {{- page_label | escape -}}
+        </span>
+      </li>
+    </ol>
+  </nav>
+{%- endif -%}
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/breadcrumb/breadcrumb.tsx. Colours from the scheme; geometry from the breadcrumb/* tokens. */
+  .bl-breadcrumb__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--bl-breadcrumb-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow-wrap: break-word;
+    color: var(--muted-foreground);
+    font-size: var(--bl-breadcrumb-font-size);
+    line-height: var(--bl-breadcrumb-line-height);
+  }
+  .bl-breadcrumb__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--bl-breadcrumb-item-gap);
+  }
+  .bl-breadcrumb__link {
+    color: inherit;
+    text-decoration: none;
+    transition: color 150ms;
+  }
+  .bl-breadcrumb__link:hover { color: var(--foreground); }
+  .bl-breadcrumb__link:focus-visible {
+    border-radius: var(--bl-radius-sm);
+    outline: none;
+    box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+  }
+  .bl-breadcrumb__page {
+    color: var(--foreground);
+    font-weight: normal;
+  }
+  .bl-breadcrumb__separator { display: inline-flex; }
+  .bl-breadcrumb__separator .bl-icon {
+    width: var(--bl-breadcrumb-separator-icon-size);
+    height: var(--bl-breadcrumb-separator-icon-size);
+  }
+  [dir='rtl'] .bl-breadcrumb__separator .bl-icon { transform: scaleX(-1); }
+  /* rendered at the top of a main section: the responsive spacing step separates it from the page title */
+  .bl-breadcrumb--page { margin-block-end: var(--bl-spacing-responsive-xs); }
+{% endstylesheet %}

package/templates/shopify/snippets/button-group.liquid

@@ -0,0 +1,148 @@
+{% doc %}
+  Baseline Button Group as a snippet (spec: components/button-group/spec.md). Joins buttons into one unit:
+  shared borders, square inner corners, rounded outer ones.
+
+  It owns no geometry. Every number comes from the buttons inside it — their heights, their padding, their
+  radius — so changing a button's size changes the group, corners included. It holds no state and chooses no
+  variant either; the buttons do that.
+
+  A group is not a toolbar: every button stays in the tab order and there is no arrow-key navigation. If the
+  buttons are a single-choice set, that is a different component.
+
+  @param {string} content - the buttons, captured from the `button` snippet (required)
+  @param {string} [orientation] - 'horizontal' (default) or 'vertical'
+  @param {string} [class] - extra classes
+
+  @example
+  {%- capture group_buttons -%}
+    {% render 'button', label: 'Left', variant: 'outline' %}
+    {% render 'button', label: 'Right', variant: 'outline' %}
+  {%- endcapture -%}
+  {% render 'button-group', content: group_buttons %}
+{% enddoc %}
+
+{%- liquid
+  assign bg_orientation = orientation | default: 'horizontal'
+  unless bg_orientation == 'vertical'
+    assign bg_orientation = 'horizontal'
+  endunless
+  assign classes = 'bl-button-group bl-button-group--' | append: bg_orientation
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+<div class="{{ classes }}" data-slot="button-group" role="group" data-orientation="{{ bg_orientation }}">
+  {{ content }}
+</div>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/button-group/button-group.tsx. No geometry of its own by design: the selectors
+     below only remove radii and collapse borders, and every value they leave behind belongs to the button. */
+  .bl-button-group {
+    display: flex;
+    width: fit-content;
+    align-items: stretch;
+  }
+
+  /* a focused child lifts above its neighbours so its ring is not clipped by the next button's border */
+  .bl-button-group > *:focus-visible {
+    position: relative;
+    z-index: 10;
+  }
+
+  /* Logical properties, not left and right. A joined group is exactly what breaks in RTL if the wrong end is
+     squared: the first button would keep its rounded leading corner and the last would lose it. */
+  .bl-button-group--horizontal > *:not(:first-child) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    border-inline-start-width: 0;
+  }
+
+  .bl-button-group--horizontal > *:not(:last-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .bl-button-group--vertical {
+    flex-direction: column;
+  }
+
+  .bl-button-group--vertical > *:not(:first-child) {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-top-width: 0;
+  }
+
+  .bl-button-group--vertical > *:not(:last-child) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  /* a nested group is a group of groups: it gets a real gap rather than joined edges */
+  .bl-button-group:has(> .bl-button-group) {
+    gap: var(--bl-button-md-gap);
+  }
+
+  /* A non-interactive segment — a unit, a label, a count. Not a button, but it has to line up with one
+     exactly, so every value is a button/<size>/* variable. md is the default; the modifiers below match the
+     other sizes. */
+  .bl-button-group__text {
+    display: flex;
+    align-items: center;
+    height: var(--bl-button-md-height);
+    gap: var(--bl-button-md-gap);
+    padding-inline: var(--bl-button-md-padding-x);
+    border: 1px solid var(--border);
+    border-radius: var(--bl-button-md-radius);
+    background-color: var(--muted);
+    color: var(--foreground);
+    font-family: var(--bl-font-sans);
+    font-size: var(--bl-button-md-font-size);
+    line-height: var(--bl-button-md-line-height);
+    font-weight: 500;
+  }
+
+  .bl-button-group__text--xs {
+    height: var(--bl-button-xs-height);
+    gap: var(--bl-button-xs-gap);
+    padding-inline: var(--bl-button-xs-padding-x);
+    border-radius: var(--bl-button-xs-radius);
+    font-size: var(--bl-button-xs-font-size);
+    line-height: var(--bl-button-xs-line-height);
+  }
+
+  .bl-button-group__text--sm {
+    height: var(--bl-button-sm-height);
+    gap: var(--bl-button-sm-gap);
+    padding-inline: var(--bl-button-sm-padding-x);
+    border-radius: var(--bl-button-sm-radius);
+    font-size: var(--bl-button-sm-font-size);
+    line-height: var(--bl-button-sm-line-height);
+  }
+
+  .bl-button-group__text--lg {
+    height: var(--bl-button-lg-height);
+    gap: var(--bl-button-lg-gap);
+    padding-inline: var(--bl-button-lg-padding-x);
+    border-radius: var(--bl-button-lg-radius);
+    font-size: var(--bl-button-lg-font-size);
+    line-height: var(--bl-button-lg-line-height);
+  }
+
+  /* A rule between segments, for when the buttons share a fill and the collapsed border cannot be seen. It
+     runs ACROSS the group, so a horizontal group gets a vertical rule. */
+  .bl-button-group__separator {
+    flex: none;
+    align-self: stretch;
+    margin: 0;
+    background-color: var(--input);
+  }
+
+  .bl-button-group--horizontal > .bl-button-group__separator {
+    width: var(--bl-separator-thickness);
+  }
+
+  .bl-button-group--vertical > .bl-button-group__separator {
+    height: var(--bl-separator-thickness);
+  }
+{% endstylesheet %}

package/templates/shopify/snippets/button.liquid

@@ -0,0 +1,144 @@
+{% doc %}
+  Baseline Button as a snippet, usable from any section, block or form (spec: components/button/spec.md).
+  The `button` theme block is a thin wrapper around this snippet; product forms and the like call it directly.
+
+  @param {string} label - Visible text (accessible name for icon sizes)
+  @param {string} [href] - Renders an <a> when set; with disabled, an <a> with no href, role="link" and aria-disabled
+  @param {string} [type] - button type when not a link (default 'button'; 'submit' for forms)
+  @param {string} [variant] - default | secondary | outline | ghost | link | destructive
+  @param {string} [size] - xs | sm | md | lg
+  @param {boolean} [disabled] - disabled + aria-disabled
+  @param {string} [icon] - Baseline system icon name (snippets/icon.liquid)
+  @param {string} [icon_position] - start (default) | end
+  @param {boolean} [icon_only] - icon-only button: square, label becomes aria-label
+  @param {string} [badge] - a count badge, captured from the badge snippet with class: 'bl-button__count'; it floats on
+    the button's top-right corner (cart item count, unread messages). Put the count in `label` too: an icon-only
+    button's aria-label replaces its content for screen readers.
+  @param {string} [attrs] - extra attributes, e.g. block.shopify_attributes or 'name="add"'
+  @param {string} [class] - extra classes
+
+  @example
+  {% render 'button', label: 'Add to cart', type: 'submit', variant: 'default', disabled: product.available == false, attrs: 'name="add"' %}
+  {%- capture count -%}{% render 'badge', label: cart.item_count, size: 'sm', class: 'bl-button__count' %}{%- endcapture -%}
+  {% render 'button', label: 'Cart, 3 items', href: routes.cart_url, variant: 'ghost', icon: 'cart', icon_only: true, badge: count %}
+{% enddoc %}
+
+{%- liquid
+  assign v = variant | default: 'default'
+  assign s = size | default: 'md'
+  assign text = label | default: 'Button'
+  assign classes = 'bl-button bl-button--' | append: v | append: ' bl-button--' | append: s
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+  assign is_icon = false
+  if s contains 'icon-' or icon_only == true
+    assign is_icon = true
+  endif
+  if icon_only == true and icon != blank
+    assign classes = classes | append: ' bl-button--icon-only'
+  endif
+  if icon != blank and icon_position == 'end'
+    assign classes = classes | append: ' bl-button--icon-end'
+  elsif icon != blank and is_icon == false
+    assign classes = classes | append: ' bl-button--icon-start'
+  endif
+-%}
+{%- capture inner -%}
+  {%- if icon != blank and icon_position != 'end' -%}{% render 'icon', name: icon %}{%- endif -%}
+  {%- unless is_icon -%}<span class="bl-button__text">{{ text | escape }}</span>{%- endunless -%}
+  {%- if icon != blank and icon_position == 'end' -%}{% render 'icon', name: icon %}{%- endif -%}
+  {{- badge -}}
+{%- endcapture -%}
+{%- if href != blank and disabled == true -%}
+  {%- comment -%} a link that leads nowhere right now (Pagination's Previous on the first page): still a link, inert {%- endcomment -%}
+  <a class="{{ classes }}" role="link" aria-disabled="true" data-slot="button" data-variant="{{ v }}" data-size="{{ s }}"{% if is_icon %} aria-label="{{ text | escape }}"{% endif %} {{ attrs }}>{{ inner }}</a>
+{%- elsif href != blank -%}
+  <a href="{{ href }}" class="{{ classes }}" data-slot="button" data-variant="{{ v }}" data-size="{{ s }}"{% if is_icon %} aria-label="{{ text | escape }}"{% endif %} {{ attrs }}>{{ inner }}</a>
+{%- else -%}
+  <button type="{{ type | default: 'button' }}" class="{{ classes }}" data-slot="button" data-variant="{{ v }}" data-size="{{ s }}"{% if disabled %} disabled aria-disabled="true"{% endif %}{% if is_icon %} aria-label="{{ text | escape }}"{% endif %} {{ attrs }}>{{ inner }}</button>
+{%- endif -%}
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/button/button.tsx. Colors come from the scheme class (--primary ...); geometry from the
+     button/* component tokens in baseline-tokens.liquid (ADR-0017). */
+  .bl-button {
+    /* relative + --button-padding-x: a count badge inside the button floats on its corner (button spec) */
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    white-space: nowrap;
+    user-select: none;
+    border: 1px solid transparent;
+    background: transparent;
+    background-clip: padding-box;
+    color: inherit;
+    font: inherit;
+    font-family: var(--bl-button-font-family);
+    font-weight: var(--bl-button-font-weight);
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 150ms;
+    outline: none;
+  }
+  .bl-button:focus-visible { box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring); }
+  .bl-button:active:not([aria-haspopup]) { translate: 0 1px; }
+  .bl-button[aria-invalid='true'] { border-color: var(--destructive); box-shadow: 0 0 0 var(--bl-control-ring-width) color-mix(in oklab, var(--destructive) 20%, transparent); }
+  /* doubled class on purpose: .bl-button--icon-only alone ties with .bl-button--md (0,1,0) and the size rule
+     is declared later, so it won the padding. An icon-only button is square and has no padding-x. */
+  .bl-button.bl-button--icon-only { width: var(--bl-button-md-height); padding: 0; }
+  .bl-button--icon-only.bl-button--xs { width: var(--bl-button-xs-height); }
+  .bl-button--icon-only.bl-button--sm { width: var(--bl-button-sm-height); }
+  .bl-button--icon-only.bl-button--lg { width: var(--bl-button-lg-height); }
+  .bl-button:disabled,
+  .bl-button[aria-disabled='true'] { opacity: 0.5; pointer-events: none; }
+  .bl-button svg { flex-shrink: 0; pointer-events: none; }
+  /* A busy state needs JavaScript (no Liquid param: a server-rendered spinner has no use case, user 2026-09-30). When
+     a script inserts snippets/spinner.liquid's markup into a submitting button, the spinner box takes the button's
+     icon size and its svg fills it. Size the box, not the svg: an auto-sized box leaves the svg's 100% with nothing
+     to resolve against, so it falls back to its intrinsic size and overflows the button. */
+  .bl-button--xs .bl-spinner { width: var(--bl-button-xs-icon-size); height: var(--bl-button-xs-icon-size); }
+  .bl-button--sm .bl-spinner { width: var(--bl-button-sm-icon-size); height: var(--bl-button-sm-icon-size); }
+  .bl-button--md .bl-spinner { width: var(--bl-button-md-icon-size); height: var(--bl-button-md-icon-size); }
+  .bl-button--lg .bl-spinner { width: var(--bl-button-lg-icon-size); height: var(--bl-button-lg-icon-size); }
+
+  /* variants: upstream's (re-aligned 2026-10-01), except outline, which stays transparent (user decision) */
+  .bl-button--default { background-color: var(--primary); color: var(--primary-foreground); }
+  .bl-button--default:hover { background-color: color-mix(in oklab, var(--primary) 80%, transparent); }
+  .bl-button--secondary { background-color: var(--secondary); color: var(--secondary-foreground); }
+  .bl-button--secondary:hover { background-color: color-mix(in oklch, var(--secondary), var(--foreground) 5%); }
+  .bl-button--secondary[aria-expanded='true'] { background-color: var(--secondary); color: var(--secondary-foreground); }
+  .bl-button--outline { border-color: var(--border); color: var(--foreground); }
+  .bl-button--outline:hover, .bl-button--outline[aria-expanded='true'] { background-color: var(--muted); color: var(--foreground); }
+  .bl-button--ghost { color: var(--foreground); }
+  .bl-button--ghost:hover, .bl-button--ghost[aria-expanded='true'] { background-color: var(--muted); color: var(--foreground); }
+  .bl-button--link { color: var(--primary); text-underline-offset: 4px; }
+  .bl-button--link:hover { text-decoration: underline; }
+  .bl-button--destructive { background-color: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); }
+  .bl-button--destructive:hover { background-color: color-mix(in oklab, var(--destructive) 20%, transparent); }
+  .bl-button--destructive:focus-visible { border-color: color-mix(in oklab, var(--destructive) 40%, transparent); box-shadow: 0 0 0 var(--bl-control-ring-width) color-mix(in oklab, var(--destructive) 20%, transparent); }
+
+  /* sizes: one rule per Figma Size, every value a button/<size>/* variable */
+  .bl-button--xs { --button-padding-x: var(--bl-button-xs-padding-x); --button-gap: var(--bl-button-xs-gap); --button-padding-x-icon: var(--bl-button-xs-padding-x-icon); height: var(--bl-button-xs-height); padding: 0 var(--bl-button-xs-padding-x); gap: var(--bl-button-xs-gap); border-radius: var(--bl-button-xs-radius); font-size: var(--bl-button-xs-font-size); line-height: var(--bl-button-xs-line-height); }
+  .bl-button--sm { --button-padding-x: var(--bl-button-sm-padding-x); --button-gap: var(--bl-button-sm-gap); --button-padding-x-icon: var(--bl-button-sm-padding-x-icon); height: var(--bl-button-sm-height); padding: 0 var(--bl-button-sm-padding-x); gap: var(--bl-button-sm-gap); border-radius: var(--bl-button-sm-radius); font-size: var(--bl-button-sm-font-size); line-height: var(--bl-button-sm-line-height); }
+  .bl-button--md { --button-padding-x: var(--bl-button-md-padding-x); --button-gap: var(--bl-button-md-gap); --button-padding-x-icon: var(--bl-button-md-padding-x-icon); height: var(--bl-button-md-height); padding: 0 var(--bl-button-md-padding-x); gap: var(--bl-button-md-gap); border-radius: var(--bl-button-md-radius); font-size: var(--bl-button-md-font-size); line-height: var(--bl-button-md-line-height); }
+  .bl-button--lg { --button-padding-x: var(--bl-button-lg-padding-x); --button-gap: var(--bl-button-lg-gap); --button-padding-x-icon: var(--bl-button-lg-padding-x-icon); height: var(--bl-button-lg-height); padding: 0 var(--bl-button-lg-padding-x); gap: var(--bl-button-lg-gap); border-radius: var(--bl-button-lg-radius); font-size: var(--bl-button-lg-font-size); line-height: var(--bl-button-lg-line-height); }
+  .bl-button--xs svg { width: var(--bl-button-xs-icon-size); height: var(--bl-button-xs-icon-size); }
+  .bl-button--sm svg { width: var(--bl-button-sm-icon-size); height: var(--bl-button-sm-icon-size); }
+  .bl-button--md svg { width: var(--bl-button-md-icon-size); height: var(--bl-button-md-icon-size); }
+  .bl-button--lg svg { width: var(--bl-button-lg-icon-size); height: var(--bl-button-lg-icon-size); }
+  /* a count badge floats on the corner: it starts where the padding does, so it never covers the label or icon, and is
+     lifted by half its height; the shared overlap ring separates it from the button (button spec, "Count badge") */
+  .bl-button .bl-button__count {
+    position: absolute;
+    top: 0;
+    inset-inline-start: calc(100% - var(--button-padding-x));
+    translate: 0 -50%;
+    box-shadow: 0 0 0 var(--bl-overlap-ring-width) var(--background);
+  }
+  /* the icon side tightens by half the gap, as upstream's has-data-[icon=…] padding (doubled class beats the size rule) */
+  .bl-button.bl-button--icon-start { padding-inline-start: var(--button-padding-x-icon); }
+  .bl-button.bl-button--icon-end:not(.bl-button--icon-only) { padding-inline-end: var(--button-padding-x-icon); }
+{% endstylesheet %}

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

@@ -0,0 +1,43 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4358-14597
+// source=platforms/shopify/theme/snippets/card.liquid
+// component=card (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): the card snippet. A merchant-built card is the Card theme
+// block (blocks/card.liquid) with the same settings; code renders the snippet.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum("Size", { md: "md", sm: "sm" });
+// Show booleans map to CHILDREN, never to props (ADR-0013). Since 2026-10-02 every part lives on the Card itself: the
+// header's Title / Description are text properties, Actions / Content / Footer are slots on the root.
+const showMedia = instance.getBoolean("Show Media");
+const showHeader = instance.getBoolean("Show Header");
+const showFooter = instance.getBoolean("Show Footer");
+const title = instance.getString("Title");
+const description = instance.getBoolean("Show Description") ? instance.getString("Description") : "";
+const showAction = instance.getBoolean("Show Actions");
+const bordered = instance.getBoolean("Header Border");
+const vertical = instance.getEnum("Footer Orientation", { horizontal: false, vertical: true }) === true;
+
+const args = [
+  showMedia ? "image: card_image" : "",
+  showHeader ? `title: '${title}'` : "",
+  showHeader && description ? `description: '${description}'` : "",
+  showAction ? "action: card_action" : "",
+  bordered ? "bordered: true" : "",
+  "content: card_content",
+  showFooter ? "footer: card_footer" : "",
+  vertical ? "footer_vertical: true" : "",
+  size !== "md" ? `size: '${size}'` : "",
+].filter(Boolean).join(", ");
+
+const captures = [
+  showAction ? "{%- capture card_action -%}{% render 'button', label: 'Action', variant: 'link' %}{%- endcapture -%}" : "",
+  showFooter ? "{%- capture card_footer -%}{% render 'button', label: 'Action', size: 'sm' %}{%- endcapture -%}" : "",
+].filter(Boolean).join("\n");
+
+export default {
+  example: figma.code`${captures}
+{% render 'card', ${args} %}`,
+  id: "shopify-card",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/card.liquid

@@ -0,0 +1,196 @@
+{% doc %}
+  Baseline Card as a snippet (spec: components/card/spec.md). Optional full-bleed media, a header (title, description,
+  corner action), content and a footer. Pass only the regions you need. Colours come from the enclosing scheme
+  (.color-<id>); `scheme` sets one on the card itself.
+
+  @param {image} [image] - full-bleed media from an image object
+  @param {string} [image_alt] - alt text for `image`; empty for a decorative picture
+  @param {string} [media] - ready media markup instead of `image` (a video, a placeholder_svg_tag)
+  @param {string} [title] - the card title
+  @param {string} [title_tag] - the title's element: div (default, as upstream) or h2-h6 when the card is a section
+  @param {string} [description] - muted text under the title
+  @param {string} [action] - ready markup for the header's top-right action, e.g. a captured button snippet
+  @param {boolean} [bordered] - a rule under the header (Figma's Bordered header)
+  @param {string} [content] - the content region; HTML is allowed
+  @param {string} [footer] - ready markup for the footer, e.g. captured button snippets
+  @param {boolean} [footer_vertical] - stack the footer's buttons full width
+  @param {string} [blocks] - theme blocks placed straight into the card (blocks/card.liquid): each one is a region
+  @param {string} [size] - md (default) | sm
+  @param {string} [scheme] - a color scheme id for the card itself
+  @param {string} [class] - extra classes
+  @param {string} [attrs] - extra attributes on the root (block.shopify_attributes)
+
+  @example
+  {%- capture card_footer -%}{% render 'button', label: 'View event', size: 'sm' %}{%- endcapture -%}
+  {% render 'card', image: article.image, title: article.title, title_tag: 'h3', description: article.excerpt, footer: card_footer %}
+{% enddoc %}
+
+{%- liquid
+  assign s = size | default: 'md'
+  unless s == 'sm'
+    assign s = 'md'
+  endunless
+  assign tag = title_tag | default: 'div'
+  case tag
+    when 'h2', 'h3', 'h4', 'h5', 'h6', 'div'
+    else
+      assign tag = 'div'
+  endcase
+  assign classes = 'bl-card bl-card--' | append: s
+  if scheme != blank
+    assign classes = classes | append: ' color-' | append: scheme
+  endif
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+  assign has_header = false
+  if title != blank or description != blank or action != blank
+    assign has_header = true
+  endif
+-%}
+<div class="{{ classes }}" data-slot="card" data-size="{{ s }}" {{ attrs }}>
+  {%- if media != blank -%}
+    <div class="bl-card__media">{{ media }}</div>
+  {%- elsif image != blank -%}
+    <div class="bl-card__media">
+      {{- image | image_url: width: 1200 | image_tag: alt: image_alt, loading: 'lazy', widths: '400, 600, 800, 1200' -}}
+    </div>
+  {%- endif -%}
+  {%- if has_header -%}
+    <div class="bl-card__header{% if bordered %} bl-card__header--bordered{% endif %}" data-slot="card-header">
+      {%- if title != blank -%}
+        <{{ tag }} class="bl-card__title" data-slot="card-title">{{ title | escape }}</{{ tag }}>
+      {%- endif -%}
+      {%- if description != blank -%}
+        <div class="bl-card__description" data-slot="card-description">{{ description }}</div>
+      {%- endif -%}
+      {%- if action != blank -%}
+        <div class="bl-card__action" data-slot="card-action">{{ action }}</div>
+      {%- endif -%}
+    </div>
+  {%- endif -%}
+  {%- if content != blank -%}
+    <div class="bl-card__content" data-slot="card-content">{{ content }}</div>
+  {%- endif -%}
+  {{- blocks -}}
+  {%- if footer != blank -%}
+    <div class="bl-card__footer{% if footer_vertical %} bl-card__footer--vertical{% endif %}" data-slot="card-footer">
+      {{- footer -}}
+    </div>
+  {%- endif -%}
+</div>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/card/card.tsx. Colours from the scheme; geometry from the card/* tokens; the outline is the
+     card/border tint and the footer fill card/footer/background (both color-mix() over a scheme role). */
+  .bl-card {
+    --card-padding: var(--bl-card-md-padding);
+    --card-gap: var(--bl-card-md-gap);
+    --card-radius: var(--bl-card-md-radius);
+    display: flex;
+    flex-direction: column;
+    gap: var(--card-gap);
+    overflow: hidden;
+    padding: var(--card-padding) 0;
+    border-radius: var(--card-radius);
+    background-color: var(--card);
+    color: var(--card-foreground);
+    box-shadow: 0 0 0 var(--bl-card-border-width) var(--bl-card-border);
+    font-size: var(--bl-card-description-font-size);
+    line-height: var(--bl-card-description-line-height);
+  }
+  .bl-card--sm {
+    --card-padding: var(--bl-card-sm-padding);
+    --card-gap: var(--bl-card-sm-gap);
+    --card-radius: var(--bl-card-sm-radius);
+  }
+  /* every region pads itself horizontally; a theme block placed straight into the card is content */
+  .bl-card > * {
+    margin: 0;
+    padding-inline: var(--card-padding);
+  }
+  /* media as the first child goes full bleed: no top padding, the top corners */
+  .bl-card > .bl-card__media {
+    padding-inline: 0;
+  }
+  .bl-card__media > img,
+  .bl-card__media > svg,
+  .bl-card__media > video {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  .bl-card:has(> .bl-card__media:first-child) {
+    padding-top: 0;
+  }
+  .bl-card > .bl-card__media:first-child {
+    overflow: hidden;
+    border-start-start-radius: var(--card-radius);
+    border-start-end-radius: var(--card-radius);
+  }
+  /* a Media block (or snippet) placed straight into the card goes full bleed the same way */
+  .bl-card > .bl-media { padding-inline: 0; }
+  .bl-card:has(> .bl-media:first-child) { padding-top: 0; }
+  /* a footer removes the card's bottom padding; the footer pads all round */
+  .bl-card:has(> .bl-card__footer) {
+    padding-bottom: 0;
+  }
+  .bl-card__header {
+    display: grid;
+    grid-auto-rows: min-content;
+    align-items: start;
+    row-gap: var(--bl-card-header-gap);
+    column-gap: var(--bl-card-header-action-gap);
+    border-start-start-radius: var(--card-radius);
+    border-start-end-radius: var(--card-radius);
+  }
+  .bl-card__header:has(> .bl-card__action) {
+    grid-template-columns: 1fr auto;
+  }
+  .bl-card__header:has(> .bl-card__description) {
+    grid-template-rows: auto auto;
+  }
+  .bl-card__header--bordered {
+    padding-bottom: var(--card-padding);
+    border-bottom: var(--bl-card-border-width) solid var(--border);
+  }
+  .bl-card__title {
+    margin: 0;
+    font-size: var(--bl-card-title-md-font-size);
+    font-weight: var(--bl-card-title-font-weight);
+    line-height: var(--bl-card-title-md-line-height);
+  }
+  .bl-card--sm .bl-card__title {
+    font-size: var(--bl-card-title-sm-font-size);
+    line-height: var(--bl-card-title-sm-line-height);
+  }
+  .bl-card__description {
+    color: var(--muted-foreground);
+    font-size: var(--bl-card-description-font-size);
+    line-height: var(--bl-card-description-line-height);
+  }
+  .bl-card__action {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+    align-self: start;
+    justify-self: end;
+  }
+  /* always bordered and muted, as upstream */
+  .bl-card__footer {
+    display: flex;
+    align-items: center;
+    gap: var(--bl-card-footer-gap);
+    padding: var(--card-padding);
+    border-top: var(--bl-card-border-width) solid var(--border);
+    border-end-start-radius: var(--card-radius);
+    border-end-end-radius: var(--card-radius);
+    background-color: var(--bl-card-footer-background);
+  }
+  .bl-card > .bl-card__footer {
+    padding: var(--card-padding);
+  }
+  .bl-card__footer--vertical {
+    flex-direction: column;
+    align-items: stretch;
+  }
+{% endstylesheet %}