@goldencomm/create-baseline 0.0.1

package/templates/shopify-theme/blocks/_modal-footer.liquid

@@ -0,0 +1,36 @@
+{%- comment -%}
+  Modal footer — the action row of the Modal (.gcds-modal__footer, styled by modal.css:
+  reversed stack on mobile, right-aligned row from sm up). The Close button uses a
+  native <form method="dialog"> so it dismisses the ancestor <dialog> with zero JS and
+  no id wiring (a nested child can't reference the parent dialog's id). An optional
+  primary action (label + link) sits beside it. PRIVATE block — only inside Modal.
+{%- endcomment -%}
+<footer class="gcds-modal__footer" {{ block.shopify_attributes }}>
+  <form method="dialog" class="gcds-modal__footer-close">
+    <button class="gcds-button gcds-button--ghost gcds-button--md">
+      {{- block.settings.close_label | default: 'Close' | escape -}}
+    </button>
+  </form>
+  {%- if block.settings.action_label != blank -%}
+    <a class="gcds-button gcds-button--primary gcds-button--md"{% if block.settings.action_url != blank %} href="{{ block.settings.action_url }}"{% endif %}>
+      {{- block.settings.action_label | escape -}}
+    </a>
+  {%- endif -%}
+</footer>
+
+{% stylesheet %}
+  /* Let the native close-form's button participate in the footer flex row directly. */
+  .gcds-modal__footer-close { display: contents; }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:blocks.modal_footer_name",
+  "settings": [
+    { "type": "text", "id": "close_label", "label": "t:settings.close_label", "default": "Close" },
+    { "type": "text", "id": "action_label", "label": "t:settings.action_label" },
+    { "type": "url", "id": "action_url", "label": "t:settings.action_url" }
+  ],
+  "presets": [{ "name": "t:blocks.modal_footer_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/_modal-header.liquid

@@ -0,0 +1,19 @@
+{%- comment -%}
+  Modal header — title + description for the Modal (.gcds-modal__header, styled by
+  modal.css). PRIVATE block — only insertable inside Modal.
+{%- endcomment -%}
+<header class="gcds-modal__header" {{ block.shopify_attributes }}>
+  {%- if block.settings.title != blank -%}<h2 class="gcds-modal__title">{{ block.settings.title | escape }}</h2>{%- endif -%}
+  {%- if block.settings.content != blank -%}<div class="gcds-modal__description">{{ block.settings.content }}</div>{%- endif -%}
+</header>
+
+{% schema %}
+{
+  "name": "t:blocks.modal_header_name",
+  "settings": [
+    { "type": "text", "id": "title", "label": "t:settings.title", "default": "Modal title" },
+    { "type": "inline_richtext", "id": "content", "label": "t:settings.description", "default": "A short supporting line." }
+  ],
+  "presets": [{ "name": "t:blocks.modal_header_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/_modal-media.liquid

@@ -0,0 +1,37 @@
+{%- comment -%}
+  Modal media — a full-bleed image or video at an edge of the Modal (.gcds-modal__media,
+  styled by modal.css). As the dialog's :first-child it meets the top edge with no top
+  padding. Video (hosted or external URL) takes precedence over the image when both are
+  set. PRIVATE block — only insertable inside Modal (mirrors _carousel-slide).
+{%- endcomment -%}
+<div class="gcds-modal__media" {{ block.shopify_attributes }}>
+  {%- if block.settings.video != blank -%}
+    {{ block.settings.video | video_tag: image_size: '1200x', controls: true, playsinline: true }}
+  {%- elsif block.settings.video_url != blank -%}
+    <video src="{{ block.settings.video_url }}" controls playsinline></video>
+  {%- elsif block.settings.image != blank -%}
+    <img
+      src="{{ block.settings.image | image_url: width: 1200 }}"
+      srcset="{{ block.settings.image | image_url: width: 700 }} 700w, {{ block.settings.image | image_url: width: 1400 }} 1400w"
+      sizes="(min-width: 40rem) 32rem, 100vw"
+      alt="{{ block.settings.image.alt | escape }}"
+      width="{{ block.settings.image.width }}"
+      height="{{ block.settings.image.height }}"
+      loading="lazy"
+    >
+  {%- else -%}
+    {{ 'image' | placeholder_svg_tag }}
+  {%- endif -%}
+</div>
+
+{% schema %}
+{
+  "name": "t:blocks.modal_media_name",
+  "settings": [
+    { "type": "image_picker", "id": "image", "label": "t:settings.image" },
+    { "type": "video", "id": "video", "label": "t:settings.video" },
+    { "type": "url", "id": "video_url", "label": "t:settings.video_url" }
+  ],
+  "presets": [{ "name": "t:blocks.modal_media_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/accordion-group.liquid

@@ -0,0 +1,53 @@
+{%- comment -%}
+  Accordion group — stacks Accordion items with the group gap (.gcds-accordion-group,
+  styled by accordion.css) and accepts ONLY accordion blocks, mirroring the React
+  Accordion.Group. For single-open behaviour, give the child items a shared "group"
+  value — Shopify theme blocks can't cascade settings to children, so the name is
+  set per item (the platform-honest equivalent of the shared `name` attribute).
+
+  The "variant" setting DOES flow down to the items: gcds-accordion-group--text
+  restyles children via inherited CSS custom properties, so the items don't need
+  their own variant set.
+{%- endcomment -%}
+<div
+  class="gcds-accordion-group{% if block.settings.variant == 'text' %} gcds-accordion-group--text{% endif %}"
+  {{ block.shopify_attributes }}
+>
+  {% content_for 'blocks' %}
+</div>
+
+{% schema %}
+{
+  "name": "t:blocks.accordion_group_name",
+  "blocks": [{ "type": "_accordion" }],
+  "settings": [
+    {
+      "type": "select",
+      "id": "variant",
+      "label": "t:settings.variant",
+      "options": [
+        { "value": "block", "label": "t:variant.block" },
+        { "value": "text", "label": "t:variant.text" }
+      ],
+      "default": "block"
+    }
+  ],
+  "presets": [
+    {
+      "name": "t:blocks.accordion_group_name",
+      "blocks": [
+        {
+          "type": "_accordion",
+          "settings": { "heading": "Question one", "open": true },
+          "blocks": [{ "type": "text", "settings": { "heading": "", "body": "Add the answer to this question here." } }]
+        },
+        {
+          "type": "_accordion",
+          "settings": { "heading": "Question two" },
+          "blocks": [{ "type": "text", "settings": { "heading": "", "body": "Add the answer to this question here." } }]
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/alert.liquid

@@ -0,0 +1,92 @@
+{%- comment -%}
+  Alert — an inline feedback callout (.gcds-alert). Styled by alert.css in baseline.css;
+  mirrors the React Alert + HTML contract. Variants (default/error/success/warning)
+  recolor text, icon + description.
+
+  - Title = plain text; content = richtext (both merchant-supplied via settings).
+  - Icon = a Lucide glyph (snippets/lucide.liquid). "Auto" follows the variant; pick a
+    specific one, or "None" to hide it. It inherits the variant color (currentColor).
+  - Actions = a nested slot that accepts Button blocks only, pinned top-right. Give the
+    button the xs size + the variant matching the alert (error/success/warning, else
+    outline) so it reads on the tinted surface.
+  - No role: this is a STATIC, merchant-placed editorial callout (presentational; screen
+    readers read its content). role="alert" would be wrong — it's an assertive live region
+    that only announces on dynamic insertion/change; a storefront alert rendered at page
+    load isn't dynamic. (For genuine runtime status — cart/checkout/form results — use a
+    persistent role="status"/"alert" live region in that flow, updated by JS, not this block.)
+{%- endcomment -%}
+{%- liquid
+  assign variant = block.settings.variant | default: 'default'
+  assign icon = block.settings.icon | default: 'auto'
+  if icon == 'auto'
+    case variant
+      when 'success'
+        assign icon = 'circle-check'
+      when 'warning'
+        assign icon = 'triangle-alert'
+      when 'error'
+        assign icon = 'octagon-alert'
+      else
+        assign icon = 'info'
+    endcase
+  endif
+-%}
+<div
+  class="gcds-alert{% unless variant == 'default' %} gcds-alert--{{ variant }}{% endunless %}"
+  {{ block.shopify_attributes }}
+>
+  {%- unless icon == 'none' -%}{% render 'lucide', icon: icon %}{%- endunless -%}
+  {%- if block.settings.title != blank -%}
+    <div class="gcds-alert__title">{{ block.settings.title | escape }}</div>
+  {%- endif -%}
+  {%- if block.settings.content != blank -%}
+    <div class="gcds-alert__description">{{ block.settings.content }}</div>
+  {%- endif -%}
+  <div class="gcds-alert__action">{% content_for 'blocks' %}</div>
+</div>
+
+{% schema %}
+{
+  "name": "t:blocks.alert_name",
+  "settings": [
+    {
+      "type": "select",
+      "id": "variant",
+      "label": "t:settings.variant",
+      "default": "default",
+      "options": [
+        { "value": "default", "label": "t:variant.default" },
+        { "value": "error", "label": "t:variant.error" },
+        { "value": "success", "label": "t:variant.success" },
+        { "value": "warning", "label": "t:variant.warning" }
+      ]
+    },
+    {
+      "type": "select",
+      "id": "icon",
+      "label": "t:settings.icon",
+      "info": "t:settings.icon_info",
+      "default": "auto",
+      "options": [
+        { "value": "auto", "label": "t:icon.auto" },
+        { "value": "none", "label": "t:icon.none" },
+        { "value": "info", "label": "t:icon.info" },
+        { "value": "circle-check", "label": "t:icon.circle-check" },
+        { "value": "circle-alert", "label": "t:icon.circle-alert" },
+        { "value": "circle-x", "label": "t:icon.circle-x" },
+        { "value": "triangle-alert", "label": "t:icon.triangle-alert" },
+        { "value": "octagon-alert", "label": "t:icon.octagon-alert" },
+        { "value": "shield-alert", "label": "t:icon.shield-alert" },
+        { "value": "bell", "label": "t:icon.bell" },
+        { "value": "star", "label": "t:icon.star" },
+        { "value": "zap", "label": "t:icon.zap" },
+        { "value": "lightbulb", "label": "t:icon.lightbulb" }
+      ]
+    },
+    { "type": "text", "id": "title", "label": "t:settings.title", "default": "Heads up" },
+    { "type": "richtext", "id": "content", "label": "t:settings.content", "default": "<p>This is an informational message.</p>" }
+  ],
+  "blocks": [{ "type": "button" }],
+  "presets": [{ "name": "t:blocks.alert_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/avatar-group.liquid

@@ -0,0 +1,51 @@
+{%- comment -%}
+  Avatar group — an overlapping stack of avatars (.gcds-avatar-group, styled by
+  avatar.css). Accepts Avatar blocks; a ring in the surface color separates the
+  circles. Mirrors the React Avatar.Group. The optional overflow count (+N) renders
+  as a trailing .gcds-avatar-group__count and auto-matches the group's avatar size.
+
+  A group-level `size` sizes every child at once (.gcds-avatar-group--sm/lg wins over
+  a per-item size, per avatar.css) — leave it at default to let items keep their own.
+{%- endcomment -%}
+{%- assign size = block.settings.size | default: 'default' -%}
+<div
+  class="gcds-avatar-group{% unless size == 'default' %} gcds-avatar-group--{{ size }}{% endunless %}"
+  {{ block.shopify_attributes }}
+>
+  {% content_for 'blocks' %}
+  {%- if block.settings.count > 0 -%}
+    <span class="gcds-avatar gcds-avatar-group__count">+{{ block.settings.count }}</span>
+  {%- endif -%}
+</div>
+
+{% schema %}
+{
+  "name": "t:blocks.avatar_group_name",
+  "blocks": [{ "type": "avatar" }],
+  "settings": [
+    {
+      "type": "select",
+      "id": "size",
+      "label": "t:settings.size",
+      "default": "default",
+      "options": [
+        { "value": "sm", "label": "t:size.small" },
+        { "value": "default", "label": "t:size.medium" },
+        { "value": "lg", "label": "t:size.large" }
+      ]
+    },
+    { "type": "number", "id": "count", "label": "t:settings.count" }
+  ],
+  "presets": [
+    {
+      "name": "t:blocks.avatar_group_name",
+      "settings": { "count": 3 },
+      "blocks": [
+        { "type": "avatar", "settings": { "fallback": "AB" } },
+        { "type": "avatar", "settings": { "fallback": "CD" } },
+        { "type": "avatar", "settings": { "fallback": "EF" } }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/avatar.liquid

@@ -0,0 +1,56 @@
+{%- comment -%}
+  Avatar — a circular image with a fallback (.gcds-avatar). Styled by avatar.css in
+  baseline.css; mirrors the React Avatar + HTML contract. Sizes sm/default/lg. Merchant
+  supplies an image (or fallback initials) + size via settings. An optional corner
+  Badge (a notification/presence dot — primary by default, or a status color) composes
+  as a child, same as Avatar.Badge in React. Usable standalone or inside an Avatar group.
+{%- endcomment -%}
+{%- assign size = block.settings.size | default: 'default' -%}
+<span
+  class="gcds-avatar{% unless size == 'default' %} gcds-avatar--{{ size }}{% endunless %}"
+  {{ block.shopify_attributes }}
+>
+  {%- if block.settings.image != blank -%}
+    <img class="gcds-avatar__image" src="{{ block.settings.image | image_url: width: 128 }}" alt="{{ block.settings.image.alt | escape }}" width="64" height="64" />
+  {%- else -%}
+    <span class="gcds-avatar__fallback">{{ block.settings.fallback | escape }}</span>
+  {%- endif -%}
+  {%- unless block.settings.badge == 'none' -%}
+    <span class="gcds-avatar__badge{% unless block.settings.badge == 'default' %} gcds-avatar__badge--{{ block.settings.badge }}{% endunless %}"></span>
+  {%- endunless -%}
+</span>
+
+{% schema %}
+{
+  "name": "t:blocks.avatar_name",
+  "settings": [
+    { "type": "image_picker", "id": "image", "label": "t:settings.image" },
+    { "type": "text", "id": "fallback", "label": "t:settings.fallback", "default": "JD" },
+    {
+      "type": "select",
+      "id": "size",
+      "label": "t:settings.size",
+      "default": "default",
+      "options": [
+        { "value": "sm", "label": "t:size.small" },
+        { "value": "default", "label": "t:size.medium" },
+        { "value": "lg", "label": "t:size.large" }
+      ]
+    },
+    {
+      "type": "select",
+      "id": "badge",
+      "label": "t:settings.badge",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "t:variant.none" },
+        { "value": "default", "label": "t:variant.primary" },
+        { "value": "success", "label": "t:variant.success" },
+        { "value": "warning", "label": "t:variant.warning" },
+        { "value": "error", "label": "t:variant.error" }
+      ]
+    }
+  ],
+  "presets": [{ "name": "t:blocks.avatar_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/badge.liquid

@@ -0,0 +1,33 @@
+{%- comment -%}
+  Badge — a compact status/label pill (.gcds-badge). Styled by badge.css in
+  baseline.css; mirrors the React Badge + HTML contract. Merchant supplies the label
+  + variant via settings (the platform's content mechanism).
+{%- endcomment -%}
+{%- assign variant = block.settings.variant | default: 'primary' -%}
+<span class="gcds-badge gcds-badge--{{ variant }}" {{ block.shopify_attributes }}>
+  {{- block.settings.label | escape -}}
+</span>
+
+{% schema %}
+{
+  "name": "t:blocks.badge_name",
+  "settings": [
+    { "type": "text", "id": "label", "label": "t:settings.label", "default": "Badge" },
+    {
+      "type": "select",
+      "id": "variant",
+      "label": "t:settings.variant",
+      "default": "primary",
+      "options": [
+        { "value": "primary", "label": "t:variant.primary" },
+        { "value": "secondary", "label": "t:variant.secondary" },
+        { "value": "outline", "label": "t:variant.outline" },
+        { "value": "error", "label": "t:variant.error" },
+        { "value": "success", "label": "t:variant.success" },
+        { "value": "warning", "label": "t:variant.warning" }
+      ]
+    }
+  ],
+  "presets": [{ "name": "t:blocks.badge_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/breadcrumb.liquid

@@ -0,0 +1,45 @@
+{%- comment -%}
+  Breadcrumb — auto-generates the trail from the current page (.gcds-breadcrumb).
+  Styled by breadcrumb.css in baseline.css. No settings beyond the home label; the
+  crumbs are derived from request.page_type + the current object. Zero JS.
+{%- endcomment -%}
+{%- assign home = block.settings.home_label | default: 'Home' -%}
+{%- capture sep -%}<li class="gcds-breadcrumb__separator" role="presentation" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg></li>{%- endcapture -%}
+<nav class="gcds-breadcrumb" aria-label="Breadcrumb" {{ block.shopify_attributes }}>
+  <ol class="gcds-breadcrumb__list">
+    {%- if request.page_type == 'index' -%}
+      <li class="gcds-breadcrumb__item"><span class="gcds-breadcrumb__page" role="link" aria-disabled="true" aria-current="page">{{ home | escape }}</span></li>
+    {%- else -%}
+      <li class="gcds-breadcrumb__item"><a class="gcds-breadcrumb__link" href="{{ routes.root_url }}">{{ home | escape }}</a></li>
+      {%- case request.page_type -%}
+        {%- when 'product' -%}
+          {%- assign col = product.collections.first -%}
+          {%- if col -%}
+            {{ sep }}<li class="gcds-breadcrumb__item"><a class="gcds-breadcrumb__link" href="{{ col.url }}">{{ col.title | escape }}</a></li>
+          {%- endif -%}
+          {{ sep }}<li class="gcds-breadcrumb__item"><span class="gcds-breadcrumb__page" role="link" aria-disabled="true" aria-current="page">{{ product.title | escape }}</span></li>
+        {%- when 'collection' -%}
+          {{ sep }}<li class="gcds-breadcrumb__item"><span class="gcds-breadcrumb__page" role="link" aria-disabled="true" aria-current="page">{{ collection.title | escape }}</span></li>
+        {%- when 'page' -%}
+          {{ sep }}<li class="gcds-breadcrumb__item"><span class="gcds-breadcrumb__page" role="link" aria-disabled="true" aria-current="page">{{ page.title | escape }}</span></li>
+        {%- when 'article' -%}
+          {{ sep }}<li class="gcds-breadcrumb__item"><a class="gcds-breadcrumb__link" href="{{ blog.url }}">{{ blog.title | escape }}</a></li>
+          {{ sep }}<li class="gcds-breadcrumb__item"><span class="gcds-breadcrumb__page" role="link" aria-disabled="true" aria-current="page">{{ article.title | escape }}</span></li>
+        {%- when 'blog' -%}
+          {{ sep }}<li class="gcds-breadcrumb__item"><span class="gcds-breadcrumb__page" role="link" aria-disabled="true" aria-current="page">{{ blog.title | escape }}</span></li>
+        {%- else -%}
+          {{ sep }}<li class="gcds-breadcrumb__item"><span class="gcds-breadcrumb__page" role="link" aria-disabled="true" aria-current="page">{{ page_title | escape }}</span></li>
+      {%- endcase -%}
+    {%- endif -%}
+  </ol>
+</nav>
+
+{% schema %}
+{
+  "name": "t:blocks.breadcrumb_name",
+  "settings": [
+    { "type": "text", "id": "home_label", "label": "t:settings.home_label", "default": "Home" }
+  ],
+  "presets": [{ "name": "t:blocks.breadcrumb_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/button.liquid

@@ -0,0 +1,51 @@
+{%- liquid
+  assign variant = block.settings.variant | default: 'primary'
+  assign size = block.settings.size | default: 'md'
+  assign classes = 'gcds-button gcds-button--' | append: variant | append: ' gcds-button--' | append: size
+-%}
+{%- if block.settings.url != blank -%}
+  <a class="{{ classes }}" href="{{ block.settings.url }}" {{ block.shopify_attributes }}>
+    {{- block.settings.label | escape -}}
+  </a>
+{%- else -%}
+  <button type="button" class="{{ classes }}" {{ block.shopify_attributes }}>
+    {{- block.settings.label | escape -}}
+  </button>
+{%- endif -%}
+
+{% schema %}
+{
+  "name": "t:blocks.button_name",
+  "settings": [
+    { "type": "text", "id": "label", "label": "t:settings.label", "default": "Button" },
+    { "type": "url", "id": "url", "label": "t:settings.url" },
+    {
+      "type": "select",
+      "id": "variant",
+      "label": "t:settings.variant",
+      "default": "primary",
+      "options": [
+        { "value": "primary", "label": "t:variant.primary" },
+        { "value": "secondary", "label": "t:variant.secondary" },
+        { "value": "outline", "label": "t:variant.outline" },
+        { "value": "ghost", "label": "t:variant.ghost" },
+        { "value": "error", "label": "t:variant.error" },
+        { "value": "success", "label": "t:variant.success" },
+        { "value": "warning", "label": "t:variant.warning" }
+      ]
+    },
+    {
+      "type": "select",
+      "id": "size",
+      "label": "t:settings.size",
+      "default": "md",
+      "options": [
+        { "value": "sm", "label": "t:size.small" },
+        { "value": "md", "label": "t:size.medium" },
+        { "value": "lg", "label": "t:size.large" }
+      ]
+    }
+  ],
+  "presets": [{ "name": "t:blocks.button_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/buttons.liquid

@@ -0,0 +1,41 @@
+{%- comment -%}
+  Buttons — a container that ONLY accepts Button blocks ("blocks": [{ "type": "button" }]),
+  mirroring WordPress's wp:buttons → wp:button lock. Renders its children with
+  {% content_for 'blocks' %}. Layout only; the button look comes from the gcds-button
+  tokens in baseline.css.
+{%- endcomment -%}
+<div class="gcds-button-group" {{ block.shopify_attributes }}>
+  {%- if block.settings.heading != blank -%}
+    <h3 class="gcds-button-group__heading">{{ block.settings.heading | escape }}</h3>
+  {%- endif -%}
+  <div class="gcds-button-group__items">
+    {% content_for 'blocks' %}
+  </div>
+</div>
+
+{% stylesheet %}
+  .gcds-button-group { margin-block: var(--gcds-space-6, 1.5rem); }
+  .gcds-button-group__heading { margin: 0 0 var(--gcds-space-3, 0.75rem); }
+  .gcds-button-group__items {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--gcds-space-3, 0.75rem);
+  }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:blocks.buttons_name",
+  "settings": [
+    { "type": "text", "id": "heading", "label": "t:settings.heading" }
+  ],
+  "blocks": [{ "type": "button" }],
+  "presets": [
+    {
+      "name": "t:blocks.buttons_name",
+      "blocks": [{ "type": "button" }, { "type": "button" }]
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/card.liquid

@@ -0,0 +1,67 @@
+{%- comment -%}
+  Card — a token-driven surface composed from regions (.gcds-card). Styled by card.css
+  in baseline.css; mirrors the React Card + HTML contract.
+
+  - Media = an optional image_picker (merchant content), full-bleed, clipped to the radius.
+  - Header = optional title/description text settings (the platform's content mechanism).
+  - Content = a SLOT ({% content_for 'blocks' %}): the card holds arbitrary nested theme
+    blocks (text, image, buttons, badge…), so it's not limited to one richtext field.
+    The wrapping .gcds-card__content gives them the region's horizontal padding.
+  - Footer = an optional CTA (label + url), pinned as the action row.
+{%- endcomment -%}
+<div class="gcds-card" {{ block.shopify_attributes }}>
+  {%- if block.settings.image != blank -%}
+    <div class="gcds-card__media">
+      {{ block.settings.image | image_url: width: 800 | image_tag: alt: block.settings.title }}
+    </div>
+  {%- endif -%}
+
+  {%- if block.settings.title != blank or block.settings.description != blank -%}
+    <div class="gcds-card__header">
+      {%- if block.settings.title != blank -%}
+        <h3 class="gcds-card__title">{{ block.settings.title | escape }}</h3>
+      {%- endif -%}
+      {%- if block.settings.description != blank -%}
+        <p class="gcds-card__description">{{ block.settings.description | escape }}</p>
+      {%- endif -%}
+    </div>
+  {%- endif -%}
+
+  <div class="gcds-card__content">{% content_for 'blocks' %}</div>
+
+  {%- if block.settings.button_label != blank -%}
+    <div class="gcds-card__footer">
+      {%- if block.settings.button_url != blank -%}
+        <a class="gcds-button gcds-button--primary gcds-button--md" href="{{ block.settings.button_url }}">
+          {{- block.settings.button_label | escape -}}
+        </a>
+      {%- else -%}
+        <button type="button" class="gcds-button gcds-button--primary gcds-button--md">
+          {{- block.settings.button_label | escape -}}
+        </button>
+      {%- endif -%}
+    </div>
+  {%- endif -%}
+</div>
+
+{% schema %}
+{
+  "name": "t:blocks.card_name",
+  "blocks": [{ "type": "@theme" }],
+  "settings": [
+    { "type": "image_picker", "id": "image", "label": "t:settings.image" },
+    { "type": "text", "id": "title", "label": "t:settings.title", "default": "Card title" },
+    { "type": "text", "id": "description", "label": "t:settings.description", "default": "Supporting copy." },
+    { "type": "text", "id": "button_label", "label": "t:settings.button_label" },
+    { "type": "url", "id": "button_url", "label": "t:settings.button_url" }
+  ],
+  "presets": [
+    {
+      "name": "t:blocks.card_name",
+      "blocks": [
+        { "type": "text", "settings": { "heading": "", "body": "The content region holds the card's main body copy." } }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/carousel.liquid

@@ -0,0 +1,55 @@
+{%- comment -%}
+  Carousel — a Swiper web-component slider (.gcds-carousel) that holds Carousel slide
+  blocks. The look (outline arrows, dots below, keyboard) is the shared skin in
+  baseline.css; the behaviour is Swiper Element. The nav/dots/keyboard/loop settings
+  map straight to <swiper-container> attributes, so there's no per-block init script —
+  the element auto-inits from its attributes once the engine has loaded.
+
+  Engine delivery: SELF-HOSTED (assets/swiper-element-bundle.min.js — Swiper 14, MIT),
+  loaded per-carousel via the deferred <script> below rather than a CDN, so the theme
+  stays build-free and CSP-clean. The bundle auto-registers <swiper-container>/
+  <swiper-slide> and guards against re-defining them, so multiple carousels on one page
+  (each printing the tag) are harmless — the browser caches the file and the second run
+  is a no-op. It loads ONLY on pages where a carousel is used (the script lives in the
+  block, not layout/theme.liquid).
+
+  Accepts only _carousel-slide children (private block, mirrors accordion-group ->
+  _accordion). Swiper's a11y module is on by default (carousel/slide roles + live
+  announcements); RTL follows the storefront dir automatically.
+{%- endcomment -%}
+<swiper-container
+  class="gcds-carousel"
+  {% if block.settings.arrows %}navigation="true"{% endif %}
+  {% if block.settings.dots %}pagination="true" pagination-clickable="true"{% endif %}
+  {% if block.settings.keyboard %}keyboard="true"{% endif %}
+  {% if block.settings.loop %}loop="true"{% endif %}
+  space-between="{{ block.settings.space_between | default: 16 }}"
+  {{ block.shopify_attributes }}
+>
+  {% content_for 'blocks' %}
+</swiper-container>
+<script src="{{ 'swiper-element-bundle.min.js' | asset_url }}" defer></script>
+
+{% schema %}
+{
+  "name": "t:blocks.carousel_name",
+  "blocks": [{ "type": "_carousel-slide" }],
+  "settings": [
+    { "type": "checkbox", "id": "arrows", "label": "t:settings.arrows", "default": true },
+    { "type": "checkbox", "id": "dots", "label": "t:settings.dots", "default": true },
+    { "type": "checkbox", "id": "keyboard", "label": "t:settings.keyboard", "default": true },
+    { "type": "checkbox", "id": "loop", "label": "t:settings.loop", "default": false },
+    { "type": "range", "id": "space_between", "label": "t:settings.space_between", "min": 0, "max": 48, "step": 2, "unit": "px", "default": 16 }
+  ],
+  "presets": [
+    {
+      "name": "t:blocks.carousel_name",
+      "blocks": [
+        { "type": "_carousel-slide", "blocks": [{ "type": "image" }] },
+        { "type": "_carousel-slide", "blocks": [{ "type": "image" }] },
+        { "type": "_carousel-slide", "blocks": [{ "type": "image" }] }
+      ]
+    }
+  ]
+}
+{% endschema %}