@goldencomm/create-baseline 0.0.1 → 0.1.0

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

@@ -0,0 +1,41 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=483-17
+// source=platforms/shopify/theme/snippets/popover.liquid
+// component=popover (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): the popover snippet. A merchant-built popover is the Popover
+// theme block (blocks/popover.liquid) with the same settings; code renders the snippet. Show booleans map to the title
+// and description parameters (ADR-0013); the Children slot's text becomes the content.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const showHeader = instance.getBoolean("Show Header");
+const title = showHeader ? instance.getString("Title") : "";
+const description = showHeader && instance.getBoolean("Show Description") ? instance.getString("Description") : "";
+
+function slot(name: string, node: any = instance): any {
+  for (const child of node?.children ?? []) {
+    if (child.name === name && child.type !== "INSTANCE" && child.type !== "TEXT") return child;
+    const hit = child.type === "INSTANCE" ? undefined : slot(name, child);
+    if (hit) return hit;
+  }
+  return undefined;
+}
+const content = (slot("Children")?.children ?? [])
+  .filter((c: any) => c.type === "TEXT")
+  .map((c: any) => `<p>${c.textContent}</p>`)
+  .join("");
+// a Liquid string literal has no escapes, so a value holding a single quote is double-quoted
+const literal = (s: string) => (s.includes("'") ? `"${s}"` : `'${s}'`);
+
+const args = [
+  `id: 'popover'`,
+  `trigger: 'Open'`,
+  title ? `title: ${literal(title)}` : `label: '…'`,
+  description ? `description: ${literal(description)}` : "",
+  content ? `content: ${literal(content)}` : "",
+].filter(Boolean).join(", ");
+
+export default {
+  example: figma.code`{% render 'popover', ${args} %}`,
+  id: "shopify-popover",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/popover.liquid

@@ -0,0 +1,203 @@
+{% doc %}
+  Baseline Popover as a snippet (spec: components/popover/spec.md): a Button that toggles a <div popover="auto">
+  through command="toggle-popover" commandfor, placed by CSS anchor positioning, so it opens, closes on Escape or an
+  outside click, and lets one open at a time with no JavaScript. For short explainers beside the buy area: shipping,
+  financing, what's in the box. Colours come from the enclosing scheme (.color-<id>).
+
+  @param {string} id - unique id for the popover (the trigger's commandfor and the anchor's name)
+  @param {string} [trigger] - the trigger button's label (default "Open")
+  @param {string} [trigger_variant] - Button variant for the trigger (default outline; link for an inline explainer)
+  @param {string} [trigger_size] - Button size for the trigger (default md)
+  @param {string} [title] - the popover title (its accessible name)
+  @param {string} [description] - muted text under the title
+  @param {string} [label] - the accessible name when there is no title
+  @param {string} [content] - the body; HTML is allowed
+  @param {string} [blocks] - theme blocks placed into the body (blocks/popover.liquid)
+  @param {string} [side] - top | bottom (default) | left | right | inline-start | inline-end
+  @param {string} [align] - start | center (default) | end
+  @param {number} [side_offset] - px between the trigger and the panel (default 4)
+  @param {string} [attrs] - extra attributes on the wrapper (block.shopify_attributes)
+
+  @example
+  {% render 'popover', id: 'shipping-info', trigger: 'Shipping details', trigger_variant: 'link', align: 'start',
+    title: 'Shipping', description: 'Free over $50. Ships in 1-2 business days.' %}
+{% enddoc %}
+
+{%- liquid
+  assign popover_id = id | default: 'popover' | handleize
+  assign anchor = '--' | append: popover_id
+  assign s = side | default: 'bottom'
+  case s
+    when 'top', 'bottom', 'left', 'right', 'inline-start', 'inline-end'
+    else
+      assign s = 'bottom'
+  endcase
+  assign a = align | default: 'center'
+  case a
+    when 'start', 'center', 'end'
+    else
+      assign a = 'center'
+  endcase
+  assign offset = side_offset | default: 4
+  case s
+    when 'bottom'
+      assign margin_prop = 'margin-block-start'
+    when 'top'
+      assign margin_prop = 'margin-block-end'
+    when 'inline-end'
+      assign margin_prop = 'margin-inline-start'
+    when 'inline-start'
+      assign margin_prop = 'margin-inline-end'
+    when 'right'
+      assign margin_prop = 'margin-left'
+    when 'left'
+      assign margin_prop = 'margin-right'
+  endcase
+  assign trigger_attrs = 'command="toggle-popover" commandfor="' | append: popover_id | append: '" style="anchor-name: ' | append: anchor | append: '" data-slot="popover-trigger"'
+  assign t_variant = trigger_variant | default: 'outline'
+  assign t_size = trigger_size | default: 'md'
+  assign t_label = trigger | default: 'Open'
+-%}
+<div class="bl-popover" {{ attrs }}>
+  {%- render 'button', label: t_label, variant: t_variant, size: t_size, attrs: trigger_attrs -%}
+  <div
+    id="{{ popover_id }}"
+    popover="auto"
+    role="dialog"
+    class="bl-popover__content bl-popover__content--{{ s }} bl-popover__content--{{ s }}-{{ a }}"
+    data-slot="popover-content"
+    data-side="{{ s }}"
+    data-align="{{ a }}"
+    style="position-anchor: {{ anchor }}; {{ margin_prop }}: {{ offset }}px"
+    {% if title != blank %}aria-labelledby="{{ popover_id }}-title"{% elsif label != blank %}aria-label="{{ label | escape }}"{% endif %}
+    {% if description != blank %}aria-describedby="{{ popover_id }}-description"{% endif %}
+  >
+    {%- if title != blank or description != blank -%}
+      <div class="bl-popover__header" data-slot="popover-header">
+        {%- if title != blank -%}
+          <h2 id="{{ popover_id }}-title" class="bl-popover__title" data-slot="popover-title">{{ title | escape }}</h2>
+        {%- endif -%}
+        {%- if description != blank -%}
+          <p id="{{ popover_id }}-description" class="bl-popover__description" data-slot="popover-description">
+            {{- description -}}
+          </p>
+        {%- endif -%}
+      </div>
+    {%- endif -%}
+    {%- if content != blank -%}
+      <div class="bl-popover__body">{{ content }}</div>
+    {%- endif -%}
+    {{- blocks -}}
+  </div>
+</div>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/popover/popover.tsx. Colours from the scheme; geometry from the popover/* tokens; the ring
+     is the popover/border tint over upstream's shadow-md. Placement is CSS anchor positioning: the trigger names the
+     anchor and the panel points at it (inline styles, per id); side and align pick position-area below. */
+  .bl-popover {
+    display: contents;
+  }
+  .bl-popover__content {
+    inset: auto;
+    margin: 0;
+    width: var(--bl-popover-width);
+    max-width: calc(100vw - 1rem);
+    flex-direction: column;
+    gap: var(--bl-popover-gap);
+    overflow: visible;
+    padding: var(--bl-popover-padding);
+    border: 0;
+    border-radius: var(--bl-popover-radius);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    box-shadow:
+      0 0 0 var(--bl-popover-border-width) var(--bl-popover-border),
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    outline: none;
+    opacity: 0;
+    scale: 0.95;
+    transition: opacity 100ms, scale 100ms, translate 100ms, display 100ms allow-discrete, overlay 100ms allow-discrete;
+  }
+  .bl-popover__content:popover-open {
+    display: flex;
+    opacity: 1;
+    scale: 1;
+    translate: 0 0;
+  }
+  @starting-style {
+    .bl-popover__content:popover-open {
+      opacity: 0;
+      scale: 0.95;
+    }
+  }
+  /* the slide in from the trigger's side, and the transform origin */
+  .bl-popover__content--bottom { transform-origin: top; translate: 0 -0.5rem; position-try-fallbacks: flip-block; }
+  .bl-popover__content--top { transform-origin: bottom; translate: 0 0.5rem; position-try-fallbacks: flip-block; }
+  .bl-popover__content--right,
+  .bl-popover__content--inline-end { transform-origin: left; translate: -0.5rem 0; position-try-fallbacks: flip-inline; }
+  .bl-popover__content--left,
+  .bl-popover__content--inline-start { transform-origin: right; translate: 0.5rem 0; position-try-fallbacks: flip-inline; }
+  @starting-style {
+    .bl-popover__content--bottom:popover-open { translate: 0 -0.5rem; }
+    .bl-popover__content--top:popover-open { translate: 0 0.5rem; }
+    .bl-popover__content--right:popover-open,
+    .bl-popover__content--inline-end:popover-open { translate: -0.5rem 0; }
+    .bl-popover__content--left:popover-open,
+    .bl-popover__content--inline-start:popover-open { translate: 0.5rem 0; }
+  }
+  /* position-area: the side's row or column, centred on the trigger or spanning away from the aligned edge */
+  .bl-popover__content--bottom-start { position-area: block-end span-inline-end; }
+  .bl-popover__content--bottom-center { position-area: block-end; }
+  .bl-popover__content--bottom-end { position-area: block-end span-inline-start; }
+  .bl-popover__content--top-start { position-area: block-start span-inline-end; }
+  .bl-popover__content--top-center { position-area: block-start; }
+  .bl-popover__content--top-end { position-area: block-start span-inline-start; }
+  .bl-popover__content--inline-end-start { position-area: inline-end span-block-end; }
+  .bl-popover__content--inline-end-center { position-area: inline-end; }
+  .bl-popover__content--inline-end-end { position-area: inline-end span-block-start; }
+  .bl-popover__content--inline-start-start { position-area: inline-start span-block-end; }
+  .bl-popover__content--inline-start-center { position-area: inline-start; }
+  .bl-popover__content--inline-start-end { position-area: inline-start span-block-start; }
+  .bl-popover__content--right-start { position-area: right span-bottom; }
+  .bl-popover__content--right-center { position-area: right; }
+  .bl-popover__content--right-end { position-area: right span-top; }
+  .bl-popover__content--left-start { position-area: left span-bottom; }
+  .bl-popover__content--left-center { position-area: left; }
+  .bl-popover__content--left-end { position-area: left span-top; }
+  @media (prefers-reduced-motion: reduce) {
+    .bl-popover__content {
+      transition: none;
+    }
+  }
+  .bl-popover__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bl-popover-header-gap);
+  }
+  .bl-popover__title {
+    margin: 0;
+    font-family: inherit;
+    font-size: var(--bl-popover-title-font-size);
+    line-height: var(--bl-popover-title-line-height);
+    font-weight: var(--bl-popover-title-font-weight);
+    letter-spacing: normal;
+    text-transform: none;
+    color: inherit;
+  }
+  .bl-popover__description {
+    margin: 0;
+    font-size: var(--bl-popover-description-font-size);
+    line-height: var(--bl-popover-description-line-height);
+    color: var(--muted-foreground);
+  }
+  .bl-popover__body > * {
+    margin-block: 0;
+  }
+  .bl-popover__body > :is(p, ul, ol):not(:last-child) {
+    margin-block-end: 0.5rem;
+  }
+{% endstylesheet %}

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

@@ -0,0 +1,26 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4431-16952
+// source=platforms/shopify/theme/snippets/progress.liquid
+// component=progress (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): the progress snippet. The fill is drawn in Figma, not a
+// property, so the number comes from the Value text when it is a percentage.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const showLabel = instance.getBoolean("Show Label");
+const showValue = instance.getBoolean("Show Value");
+const label = instance.getString("Label");
+const valueText = instance.getString("Value");
+// Indeterminate (a variant since 2026-10-02): the snippet leaves `value` out
+const indeterminate = instance.getEnum("Indeterminate", { false: false, true: true }) === true;
+const parsed = /^\s*(\d+(?:\.\d+)?)\s*%\s*$/.exec(valueText ?? "");
+const args = [
+  indeterminate ? "" : `value: ${parsed ? parsed[1] : "50"}`,
+  showLabel ? `label: '${label}'` : `aria_label: '${label}'`,
+  showValue && !indeterminate ? (parsed ? "show_value: true" : `value_text: '${valueText}'`) : "",
+].filter(Boolean).join(", ");
+
+export default {
+  example: figma.code`{% render 'progress', ${args} %}`,
+  id: "shopify-progress",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/progress.liquid

@@ -0,0 +1,114 @@
+{% doc %}
+  Baseline Progress as a snippet (spec: components/progress/spec.md). A native <progress>: label left, value right,
+  track beneath. Leave `value` out for indeterminate (a sweeping bar; a slow pulse with reduced motion).
+
+  Status is a scheme, not a variant: `scheme` adds the scheme class (color-success ...), ADR-0007.
+
+  @param {number} [value] - 0 to max; omit for indeterminate
+  @param {number} [max] - default 100
+  @param {string} [label] - the visible label, a <label for> pointing at the bar
+  @param {boolean} [show_value] - show the percentage at the end of the label row
+  @param {string} [value_text] - text in place of the percentage, e.g. "Step 3 of 4"
+  @param {string} [aria_label] - names the bar when there is no label
+  @param {string} [id] - the bar's id; defaults to one made from the label, so two bars with one label need ids
+  @param {string} [scheme] - success | warning | error
+  @param {string} [class] - extra classes
+
+  @example
+  {% render 'progress', value: 56, label: 'Uploading', show_value: true %}
+{% enddoc %}
+
+{%- liquid
+  assign m = max | default: 100
+  assign bar_id = id
+  if bar_id == blank
+    assign bar_id = 'bl-progress-' | append: label | handleize
+  endif
+  assign text = value_text
+  if text == blank and show_value and value != blank
+    assign pct = value | times: 100.0 | divided_by: m | round
+    assign text = pct | append: '%'
+  endif
+  assign classes = 'bl-progress'
+  case scheme
+    when 'success', 'warning', 'error'
+      assign classes = classes | append: ' color-' | append: scheme
+  endcase
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+<div class="{{ classes }}" data-slot="progress">
+  {%- if label != blank -%}
+    <label class="bl-progress__label" data-slot="progress-label" for="{{ bar_id }}">{{ label | escape }}</label>
+  {%- endif -%}
+  {%- if text != blank -%}
+    <span class="bl-progress__value" data-slot="progress-value" aria-hidden="true">{{ text | escape }}</span>
+  {%- endif -%}
+  <progress
+    class="bl-progress__track"
+    data-slot="progress-track"
+    id="{{ bar_id }}"
+    max="{{ m }}"
+    {% if value != blank %}
+      value="{{ value }}"
+    {% endif %}
+    {% if aria_label != blank %}
+      aria-label="{{ aria_label | escape }}"
+    {% endif %}
+  ></progress>
+</div>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/progress/progress.tsx. Colours from the scheme; geometry from the progress/* tokens. */
+  .bl-progress {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--bl-progress-gap);
+  }
+  .bl-progress__label {
+    font-size: var(--bl-progress-label-font-size);
+    line-height: var(--bl-progress-label-line-height);
+    font-weight: var(--bl-progress-label-font-weight);
+  }
+  .bl-progress__value {
+    margin-inline-start: auto;
+    font-size: var(--bl-progress-value-font-size);
+    line-height: var(--bl-progress-value-line-height);
+    color: var(--muted-foreground);
+    font-variant-numeric: tabular-nums;
+  }
+  /* the track is the element, the bar its value pseudo-element */
+  .bl-progress__track {
+    display: block;
+    width: 100%;
+    height: var(--bl-progress-track-height);
+    appearance: none;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--bl-progress-track-radius);
+    background-color: var(--muted);
+  }
+  .bl-progress__track::-webkit-progress-bar { background-color: transparent; }
+  .bl-progress__track::-webkit-progress-value { background-color: var(--primary); }
+  .bl-progress__track::-moz-progress-bar { background-color: var(--primary); }
+  /* indeterminate: a 40 % bar drawn as a background sweeps across */
+  .bl-progress__track:indeterminate {
+    background-image: linear-gradient(var(--primary), var(--primary));
+    background-size: 40% 100%;
+    background-repeat: no-repeat;
+    animation: bl-progress-sweep 1.5s ease-in-out infinite;
+  }
+  .bl-progress__track:indeterminate::-moz-progress-bar { background-color: transparent; }
+  @media (prefers-reduced-motion: reduce) {
+    .bl-progress__track:indeterminate {
+      background-size: 100% 100%;
+      animation: bl-progress-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+  }
+  @keyframes bl-progress-sweep {
+    from { background-position: -66.667% 0; }
+    to { background-position: 166.667% 0; }
+  }
+  @keyframes bl-progress-pulse { 50% { opacity: 0.5; } }
+{% endstylesheet %}

package/templates/shopify/snippets/radio.liquid

@@ -0,0 +1,145 @@
+{% doc %}
+  Baseline Radio as a snippet (spec: components/radio/spec.md). Owns its box and its dot and nothing else: no
+  label, no description, no error. Render a <label for> beside it — a radio without a label is a bug, and the
+  label is also the bigger click target.
+
+  A radio only exists inside a group, and what makes native radios one group is a shared `name`. Give every
+  radio of a set the same `name` and the browser handles single selection and arrow-key roving focus with no
+  JavaScript. Wrap the set in an element with role="radiogroup" for the stack.
+
+  @param {string} name - form field name, SHARED by every radio of the group. Required in practice.
+  @param {string} [id] - id, so a <label for> can point at it
+  @param {string} [value] - submitted value when selected
+  @param {boolean} [checked] - checked attribute
+  @param {boolean} [required] - required attribute
+  @param {boolean} [disabled] - disabled attribute
+  @param {boolean} [invalid] - renders aria-invalid: destructive border and ring
+  @param {string} [attrs] - extra attributes, e.g. block.shopify_attributes
+  @param {string} [class] - extra classes on the wrapper
+
+  @example
+  <div role="radiogroup">
+    {% render 'radio', name: 'size', id: 'size-s', value: 's', checked: true %}
+    <label for="size-s">Small</label>
+    {% render 'radio', name: 'size', id: 'size-m', value: 'm' %}
+    <label for="size-m">Medium</label>
+  </div>
+{% enddoc %}
+
+{%- liquid
+  assign classes = 'bl-radio'
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+{%- comment -%}
+  A replaced element cannot have children, so the dot cannot live inside the input: it is a sibling, laid over
+  the box and never taking the click. Same three-element shape as the React component.
+{%- endcomment -%}
+<span class="{{ classes }}" data-slot="radio-group-item">
+  <input
+    type="radio"
+    class="bl-radio__control"
+    data-slot="radio-group-control"
+    {%- if name != blank %} name="{{ name }}"{% endif -%}
+    {%- if id != blank %} id="{{ id }}"{% endif -%}
+    {%- if value != blank %} value="{{ value | escape }}"{% endif -%}
+    {%- if checked %} checked{% endif -%}
+    {%- if required %} required{% endif -%}
+    {%- if disabled %} disabled{% endif -%}
+    {%- if invalid %} aria-invalid="true"{% endif -%}
+    {{ attrs }}
+  >
+  <span class="bl-radio__dot" data-slot="radio-group-indicator" aria-hidden="true"></span>
+</span>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/radio/radio.tsx. Colours come from the scheme class (--input, --primary,
+     --ring ...); geometry from the radio/* component tokens in baseline-tokens.liquid (ADR-0017). */
+  .bl-radio {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    width: var(--bl-radio-size);
+    height: var(--bl-radio-size);
+  }
+
+  /* the whole control fades together, dot included */
+  .bl-radio:has(.bl-radio__control:disabled) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .bl-radio__control {
+    appearance: none;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    border: 1px solid var(--input);
+    border-radius: 9999px;
+    background-color: transparent;
+    outline: none;
+    transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+  }
+
+  .bl-radio__control:checked {
+    border-color: var(--primary);
+    background-color: var(--primary);
+  }
+
+  .bl-radio__control:focus-visible {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+  }
+
+  /* invalid does not override checked: a selected-but-invalid radio still has to read as selected */
+  .bl-radio__control[aria-invalid='true'] {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring-invalid);
+  }
+
+  .bl-radio__control[aria-invalid='true']:checked {
+    border-color: var(--primary);
+  }
+
+  .bl-radio__control:disabled {
+    cursor: not-allowed;
+  }
+
+  /* The dot is 10px, not upstream's 8px: Figma draws 10 and Figma is the source of truth (spec: Size).
+     Scoped under .bl-radio for the reason checkbox.liquid records — an unscoped single-class selector ties
+     with anything else of the same weight and loses on source order. */
+  .bl-radio .bl-radio__dot {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: var(--bl-radio-dot-size);
+    height: var(--bl-radio-dot-size);
+    border-radius: 9999px;
+    background-color: var(--primary-foreground);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .bl-radio .bl-radio__control:checked ~ .bl-radio__dot {
+    opacity: 1;
+  }
+
+  /* 16px fails WCAG 2.5.8 on touch. Grown with a pseudo-element rather than padding, which would move the box.
+     A <label for> is the bigger target in practice; this is the floor. */
+  .bl-radio__control::after {
+    content: '';
+    position: absolute;
+    inset: -8px -12px;
+  }
+
+  /* The group. RadioGroup is a real component in React; here it is the role, so hand-written storefront
+     markup gets the same stack. The gap is radio/group/gap, as upstream's gap-2 is. */
+  [role='radiogroup'] {
+    display: grid;
+    gap: var(--bl-radio-group-gap);
+  }
+{% endstylesheet %}

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

@@ -0,0 +1,37 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4467-82
+// source=platforms/shopify/theme/snippets/sheet.liquid
+// component=sheet (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): the sheet snippet. A merchant-built sheet is the Sheet theme
+// block (blocks/sheet.liquid) with the same settings; code renders the snippet.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const side = instance.getEnum("Side", { right: "right", left: "left", top: "top", bottom: "bottom" });
+const showHeader = instance.getBoolean("Show Header");
+const showFooter = instance.getBoolean("Show Footer");
+const showClose = instance.getBoolean("Show Close Button");
+const title = instance.getString("Title");
+const description = instance.getBoolean("Show Description") ? instance.getString("Description") : "";
+
+const args = [
+  "id: 'sheet'",
+  "trigger: 'Open'",
+  side !== "right" ? `side: '${side}'` : "",
+  showHeader ? `title: '${title}'` : "",
+  showHeader && description ? `description: '${description}'` : "",
+  "content: sheet_body",
+  showFooter ? "footer: sheet_footer, close_label: 'Close'" : "",
+  showClose ? "" : "hide_close: true",
+].filter(Boolean).join(", ");
+
+const captures = [
+  "{%- capture sheet_body -%}<p>Sheet content goes here.</p>{%- endcapture -%}",
+  showFooter ? "{%- capture sheet_footer -%}{% render 'button', label: 'Save changes' %}{%- endcapture -%}" : "",
+].filter(Boolean).join("\n");
+
+export default {
+  example: figma.code`${captures}
+{% render 'sheet', ${args} %}`,
+  id: "shopify-sheet",
+  metadata: { nestable: true },
+};