@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/blocks/icon-button.figma.ts

@@ -0,0 +1,358 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4438-1386
+// source=platforms/shopify/theme/blocks/button.liquid
+// component=button (theme block) (icon-only)
+// Shopify Code Connect template (label "Shopify (Liquid)"): emits the theme-block JSON a template/section would
+// hold. Icon settings (ADR-0020 D): `icon` is a vocabulary name, `icon_position`, `icon_only`.
+// Icon Button is a Figma component of its own (split from Button 2026-10-02): the same block, icon-only.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// BASELINE_ICONS_START (generated by tokens/icons.mjs from tokens/icons/vocabulary.json; do not edit)
+const BASELINE_SYSTEM_ICONS: Record<string, string> = {
+  "brands/amazon": "brand-amazon",
+  "brands/americanexpress": "brand-americanexpress",
+  "brands/apple": "brand-apple",
+  "brands/applepay": "brand-applepay",
+  "brands/bluesky": "brand-bluesky",
+  "brands/discord": "brand-discord",
+  "brands/facebook": "brand-facebook",
+  "brands/github": "brand-github",
+  "brands/google": "brand-google",
+  "brands/googlepay": "brand-googlepay",
+  "brands/instagram": "brand-instagram",
+  "brands/linkedin": "brand-linkedin",
+  "brands/mastercard": "brand-mastercard",
+  "brands/paypal": "brand-paypal",
+  "brands/pinterest": "brand-pinterest",
+  "brands/reddit": "brand-reddit",
+  "brands/shopify": "brand-shopify",
+  "brands/snapchat": "brand-snapchat",
+  "brands/spotify": "brand-spotify",
+  "brands/telegram": "brand-telegram",
+  "brands/threads": "brand-threads",
+  "brands/tiktok": "brand-tiktok",
+  "brands/tripadvisor": "brand-tripadvisor",
+  "brands/vimeo": "brand-vimeo",
+  "brands/visa": "brand-visa",
+  "brands/whatsapp": "brand-whatsapp",
+  "brands/wordpress": "brand-wordpress",
+  "brands/x": "brand-x",
+  "brands/yelp": "brand-yelp",
+  "brands/youtube": "brand-youtube",
+  "lucide/arrow-down": "arrow-down",
+  "lucide/arrow-left": "arrow-left",
+  "lucide/arrow-right": "arrow-right",
+  "lucide/arrow-up": "arrow-up",
+  "lucide/arrow-up-down": "arrow-up-down",
+  "lucide/calendar": "calendar",
+  "lucide/check": "check",
+  "lucide/chevron-down": "chevron-down",
+  "lucide/chevron-left": "chevron-left",
+  "lucide/chevron-right": "chevron-right",
+  "lucide/chevron-up": "chevron-up",
+  "lucide/chevrons-left": "chevrons-left",
+  "lucide/chevrons-right": "chevrons-right",
+  "lucide/chevrons-up-down": "chevrons-up-down",
+  "lucide/circle": "circle",
+  "lucide/circle-alert": "error",
+  "lucide/circle-check": "success",
+  "lucide/circle-x": "close-circle",
+  "lucide/clock": "clock",
+  "lucide/copy": "copy",
+  "lucide/download": "download",
+  "lucide/ellipsis": "more-horizontal",
+  "lucide/ellipsis-vertical": "more-vertical",
+  "lucide/external-link": "external-link",
+  "lucide/eye": "eye",
+  "lucide/eye-off": "eye-off",
+  "lucide/file": "file",
+  "lucide/funnel": "filter",
+  "lucide/grip-vertical": "grip-vertical",
+  "lucide/house": "home",
+  "lucide/image": "image",
+  "lucide/info": "info",
+  "lucide/link": "link",
+  "lucide/loader-circle": "loader",
+  "lucide/lock": "lock",
+  "lucide/mail": "mail",
+  "lucide/menu": "menu",
+  "lucide/minus": "minus",
+  "lucide/panel-left": "sidebar",
+  "lucide/pause": "pause",
+  "lucide/pencil": "edit",
+  "lucide/phone": "phone",
+  "lucide/play": "play",
+  "lucide/plus": "plus",
+  "lucide/refresh-cw": "refresh",
+  "lucide/search": "search",
+  "lucide/settings": "settings",
+  "lucide/share-2": "share",
+  "lucide/shopping-cart": "cart",
+  "lucide/star": "star",
+  "lucide/trash-2": "trash",
+  "lucide/triangle-alert": "warning",
+  "lucide/upload": "upload",
+  "lucide/user": "user",
+  "lucide/x": "close",
+  "material-symbols/add": "plus",
+  "material-symbols/arrow-back": "arrow-left",
+  "material-symbols/arrow-downward": "arrow-down",
+  "material-symbols/arrow-forward": "arrow-right",
+  "material-symbols/arrow-upward": "arrow-up",
+  "material-symbols/calendar-today": "calendar",
+  "material-symbols/call": "phone",
+  "material-symbols/cancel": "close-circle",
+  "material-symbols/check": "check",
+  "material-symbols/check-circle": "success",
+  "material-symbols/circle": "circle",
+  "material-symbols/close": "close",
+  "material-symbols/content-copy": "copy",
+  "material-symbols/delete": "trash",
+  "material-symbols/description": "file",
+  "material-symbols/download": "download",
+  "material-symbols/drag-indicator": "grip-vertical",
+  "material-symbols/edit": "edit",
+  "material-symbols/error": "error",
+  "material-symbols/filter-list": "filter",
+  "material-symbols/home": "home",
+  "material-symbols/image": "image",
+  "material-symbols/info": "info",
+  "material-symbols/keyboard-arrow-down": "chevron-down",
+  "material-symbols/keyboard-arrow-left": "chevron-left",
+  "material-symbols/keyboard-arrow-right": "chevron-right",
+  "material-symbols/keyboard-arrow-up": "chevron-up",
+  "material-symbols/keyboard-double-arrow-left": "chevrons-left",
+  "material-symbols/keyboard-double-arrow-right": "chevrons-right",
+  "material-symbols/link": "link",
+  "material-symbols/lock": "lock",
+  "material-symbols/mail": "mail",
+  "material-symbols/menu": "menu",
+  "material-symbols/more-horiz": "more-horizontal",
+  "material-symbols/more-vert": "more-vertical",
+  "material-symbols/open-in-new": "external-link",
+  "material-symbols/pause": "pause",
+  "material-symbols/person": "user",
+  "material-symbols/play-arrow": "play",
+  "material-symbols/progress-activity": "loader",
+  "material-symbols/refresh": "refresh",
+  "material-symbols/remove": "minus",
+  "material-symbols/schedule": "clock",
+  "material-symbols/search": "search",
+  "material-symbols/settings": "settings",
+  "material-symbols/share": "share",
+  "material-symbols/shopping-cart": "cart",
+  "material-symbols/star": "star",
+  "material-symbols/swap-vert": "arrow-up-down",
+  "material-symbols/unfold-more": "chevrons-up-down",
+  "material-symbols/upload": "upload",
+  "material-symbols/view-sidebar": "sidebar",
+  "material-symbols/visibility": "eye",
+  "material-symbols/visibility-off": "eye-off",
+  "material-symbols/warning": "warning",
+  "phosphor/arrow-down": "arrow-down",
+  "phosphor/arrow-left": "arrow-left",
+  "phosphor/arrow-right": "arrow-right",
+  "phosphor/arrow-square-out": "external-link",
+  "phosphor/arrow-up": "arrow-up",
+  "phosphor/arrows-clockwise": "refresh",
+  "phosphor/arrows-down-up": "arrow-up-down",
+  "phosphor/calendar": "calendar",
+  "phosphor/caret-double-left": "chevrons-left",
+  "phosphor/caret-double-right": "chevrons-right",
+  "phosphor/caret-down": "chevron-down",
+  "phosphor/caret-left": "chevron-left",
+  "phosphor/caret-right": "chevron-right",
+  "phosphor/caret-up": "chevron-up",
+  "phosphor/caret-up-down": "chevrons-up-down",
+  "phosphor/check": "check",
+  "phosphor/check-circle": "success",
+  "phosphor/circle": "circle",
+  "phosphor/circle-notch": "loader",
+  "phosphor/clock": "clock",
+  "phosphor/copy": "copy",
+  "phosphor/dots-six-vertical": "grip-vertical",
+  "phosphor/dots-three": "more-horizontal",
+  "phosphor/dots-three-vertical": "more-vertical",
+  "phosphor/download-simple": "download",
+  "phosphor/envelope": "mail",
+  "phosphor/eye": "eye",
+  "phosphor/eye-slash": "eye-off",
+  "phosphor/file": "file",
+  "phosphor/funnel": "filter",
+  "phosphor/gear": "settings",
+  "phosphor/house": "home",
+  "phosphor/image": "image",
+  "phosphor/info": "info",
+  "phosphor/link": "link",
+  "phosphor/list": "menu",
+  "phosphor/lock": "lock",
+  "phosphor/magnifying-glass": "search",
+  "phosphor/minus": "minus",
+  "phosphor/pause": "pause",
+  "phosphor/pencil-simple": "edit",
+  "phosphor/phone": "phone",
+  "phosphor/play": "play",
+  "phosphor/plus": "plus",
+  "phosphor/share-network": "share",
+  "phosphor/shopping-cart": "cart",
+  "phosphor/sidebar": "sidebar",
+  "phosphor/star": "star",
+  "phosphor/trash": "trash",
+  "phosphor/upload-simple": "upload",
+  "phosphor/user": "user",
+  "phosphor/warning": "warning",
+  "phosphor/warning-circle": "error",
+  "phosphor/x": "close",
+  "phosphor/x-circle": "close-circle",
+  "remix/add": "plus",
+  "remix/alert": "warning",
+  "remix/arrow-down": "arrow-down",
+  "remix/arrow-down-s": "chevron-down",
+  "remix/arrow-left": "arrow-left",
+  "remix/arrow-left-double": "chevrons-left",
+  "remix/arrow-left-s": "chevron-left",
+  "remix/arrow-right": "arrow-right",
+  "remix/arrow-right-double": "chevrons-right",
+  "remix/arrow-right-s": "chevron-right",
+  "remix/arrow-up": "arrow-up",
+  "remix/arrow-up-down": "arrow-up-down",
+  "remix/arrow-up-s": "chevron-up",
+  "remix/calendar": "calendar",
+  "remix/check": "check",
+  "remix/checkbox-blank-circle": "circle",
+  "remix/checkbox-circle": "success",
+  "remix/close": "close",
+  "remix/close-circle": "close-circle",
+  "remix/delete-bin": "trash",
+  "remix/download-2": "download",
+  "remix/draggable": "grip-vertical",
+  "remix/error-warning": "error",
+  "remix/expand-up-down": "chevrons-up-down",
+  "remix/external-link": "external-link",
+  "remix/eye": "eye",
+  "remix/eye-off": "eye-off",
+  "remix/file": "file",
+  "remix/file-copy": "copy",
+  "remix/filter": "filter",
+  "remix/home": "home",
+  "remix/image": "image",
+  "remix/information": "info",
+  "remix/layout-left": "sidebar",
+  "remix/link": "link",
+  "remix/loader-4": "loader",
+  "remix/lock": "lock",
+  "remix/mail": "mail",
+  "remix/menu": "menu",
+  "remix/more": "more-horizontal",
+  "remix/more-2": "more-vertical",
+  "remix/pause": "pause",
+  "remix/pencil": "edit",
+  "remix/phone": "phone",
+  "remix/play": "play",
+  "remix/refresh": "refresh",
+  "remix/search": "search",
+  "remix/settings-3": "settings",
+  "remix/share": "share",
+  "remix/shopping-cart": "cart",
+  "remix/star": "star",
+  "remix/subtract": "minus",
+  "remix/time": "clock",
+  "remix/upload-2": "upload",
+  "remix/user": "user",
+  "tabler/alert-circle": "error",
+  "tabler/alert-triangle": "warning",
+  "tabler/arrow-down": "arrow-down",
+  "tabler/arrow-left": "arrow-left",
+  "tabler/arrow-right": "arrow-right",
+  "tabler/arrow-up": "arrow-up",
+  "tabler/arrows-sort": "arrow-up-down",
+  "tabler/calendar": "calendar",
+  "tabler/check": "check",
+  "tabler/chevron-down": "chevron-down",
+  "tabler/chevron-left": "chevron-left",
+  "tabler/chevron-right": "chevron-right",
+  "tabler/chevron-up": "chevron-up",
+  "tabler/chevrons-left": "chevrons-left",
+  "tabler/chevrons-right": "chevrons-right",
+  "tabler/circle": "circle",
+  "tabler/circle-check": "success",
+  "tabler/circle-x": "close-circle",
+  "tabler/clock": "clock",
+  "tabler/copy": "copy",
+  "tabler/dots": "more-horizontal",
+  "tabler/dots-vertical": "more-vertical",
+  "tabler/download": "download",
+  "tabler/external-link": "external-link",
+  "tabler/eye": "eye",
+  "tabler/eye-off": "eye-off",
+  "tabler/file": "file",
+  "tabler/filter": "filter",
+  "tabler/grip-vertical": "grip-vertical",
+  "tabler/home": "home",
+  "tabler/info-circle": "info",
+  "tabler/layout-sidebar": "sidebar",
+  "tabler/link": "link",
+  "tabler/loader-2": "loader",
+  "tabler/lock": "lock",
+  "tabler/mail": "mail",
+  "tabler/menu-2": "menu",
+  "tabler/minus": "minus",
+  "tabler/pencil": "edit",
+  "tabler/phone": "phone",
+  "tabler/photo": "image",
+  "tabler/player-pause": "pause",
+  "tabler/player-play": "play",
+  "tabler/plus": "plus",
+  "tabler/refresh": "refresh",
+  "tabler/search": "search",
+  "tabler/selector": "chevrons-up-down",
+  "tabler/settings": "settings",
+  "tabler/share": "share",
+  "tabler/shopping-cart": "cart",
+  "tabler/star": "star",
+  "tabler/trash": "trash",
+  "tabler/upload": "upload",
+  "tabler/user": "user",
+  "tabler/x": "close"
+};
+// BASELINE_ICONS_END
+
+// "<Set>/<icon>" glyph name -> vocabulary name (see components/icon/spec.md); content icons have no Shopify
+// setting yet (S2 picker), so they resolve to "" and the designer's pick is noted in the handoff.
+const kebab = (s: string) => s.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+function iconName(layerName: string): string {
+  const placeholder = instance.findInstance(layerName, { traverseInstances: true });
+  if (!placeholder || placeholder.type !== "INSTANCE") return "";
+  const glyph = placeholder.children.find((c) => c.type === "INSTANCE");
+  if (!glyph || glyph.type !== "INSTANCE") return "";
+  const slash = glyph.name.indexOf("/");
+  if (slash < 0) return "";
+  return BASELINE_SYSTEM_ICONS[kebab(glyph.name.slice(0, slash)) + "/" + kebab(glyph.name.slice(slash + 1))] ?? "";
+}
+
+const label = instance.getString("Label");
+const variant = instance.getEnum("Variant", { default: "default", secondary: "secondary", outline: "outline", ghost: "ghost", link: "link", destructive: "destructive" });
+// Icon Button (split from Button 2026-10-02): one of the four sizes, always icon-only; the "Icon" layer is the glyph
+const size = instance.getEnum("Size", { xs: "xs", sm: "sm", md: "md", lg: "lg" });
+const iconOnly = true;
+const showLeft = true;
+const showRight = false;
+const icon = iconName("Icon");
+const iconSettings = icon
+  ? `,\n    "icon": "${icon}",\n    "icon_position": "${showRight && !showLeft ? "end" : "start"}",\n    "icon_only": ${iconOnly ? "true" : "false"}`
+  : "";
+
+export default {
+  example: figma.code`
+{
+  "type": "button",
+  "settings": {
+    "label": "${label}",
+    "variant": "${variant}",
+    "size": "${size}"${iconSettings}
+  }
+}
+  `,
+  id: "shopify-icon-button",
+  metadata: { nestable: true },
+};

package/templates/shopify/blocks/media.liquid

@@ -0,0 +1,80 @@
+{% doc %}
+  Baseline Media theme block (spec: components/media/spec.md): a wrapper around the `media` snippet. An image, or a
+  video (Shopify-hosted, or a YouTube / Vimeo URL) shown as the image until the play button is pressed. The ratio is
+  one of Figma's seven or the image's own. Placed first inside a Card block, it goes full bleed.
+
+  @example
+  {% content_for 'block', type: 'media', id: 'media' %}
+{% enddoc %}
+
+{%- liquid
+  assign r = block.settings.ratio
+  case r
+    when '1-1'
+      assign ratio = 1
+    when '3-2'
+      assign ratio = 1.5
+    when '2-3'
+      assign ratio = 0.6667
+    when '4-3'
+      assign ratio = 1.3333
+    when '3-4'
+      assign ratio = 0.75
+    when '16-9'
+      assign ratio = 1.7778
+    when '9-16'
+      assign ratio = 0.5625
+    else
+      assign ratio = nil
+  endcase
+-%}
+{%- liquid
+  assign playback = 'inline'
+  if block.settings.open_in_dialog
+    assign playback = 'dialog'
+  endif
+-%}
+{% render 'media',
+  image: block.settings.image,
+  alt: block.settings.image.alt,
+  video: block.settings.video,
+  video_url: block.settings.video_url,
+  title: block.settings.title,
+  ratio: ratio,
+  caption: block.settings.caption,
+  playback: playback,
+  id: block.id,
+  attrs: block.shopify_attributes
+%}
+
+{% schema %}
+{
+  "name": "t:baseline.media.name",
+  "tag": null,
+  "settings": [
+    { "type": "image_picker", "id": "image", "label": "t:baseline.media.image", "info": "t:baseline.media.image_info" },
+    { "type": "video", "id": "video", "label": "t:baseline.media.video" },
+    { "type": "video_url", "id": "video_url", "label": "t:baseline.media.video_url", "accept": ["youtube", "vimeo"] },
+    { "type": "text", "id": "title", "label": "t:baseline.media.title", "info": "t:baseline.media.title_info" },
+    { "type": "checkbox", "id": "open_in_dialog", "label": "t:baseline.media.open_in_dialog", "info": "t:baseline.media.open_in_dialog_info", "default": false },
+    {
+      "type": "select",
+      "id": "ratio",
+      "label": "t:baseline.media.ratio",
+      "default": "adapt",
+      "options": [
+        { "value": "adapt", "label": "t:baseline.media.ratio_adapt" },
+        { "value": "1-1", "label": "1:1" },
+        { "value": "3-2", "label": "3:2" },
+        { "value": "2-3", "label": "2:3" },
+        { "value": "4-3", "label": "4:3" },
+        { "value": "3-4", "label": "3:4" },
+        { "value": "16-9", "label": "16:9" },
+        { "value": "9-16", "label": "9:16" }
+      ]
+    },
+    { "type": "inline_richtext", "id": "caption", "label": "t:baseline.media.caption" }
+  ],
+  "presets": [{ "name": "t:baseline.media.name" }]
+}
+{% endschema %}

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

@@ -0,0 +1,23 @@
+{% doc %}
+  Baseline Navigation Menu theme block (spec: components/navigation-menu/spec.md): a Shopify menu (two levels: its links,
+  and their child links as each panel) rendered by the `navigation-menu` snippet, for a section other than the header
+  (which renders its own menu setting).
+
+  @example
+  {% content_for 'block', type: 'navigation-menu', id: 'navigation-menu' %}
+{% enddoc %}
+
+{%- assign nav_id = 'nav-' | append: block.id -%}
+{% render 'navigation-menu', menu: block.settings.menu, id: nav_id, aria_label: block.settings.aria_label, attrs: block.shopify_attributes %}
+
+{% schema %}
+{
+  "name": "t:baseline.navigation_menu.name",
+  "tag": null,
+  "settings": [
+    { "type": "link_list", "id": "menu", "label": "t:baseline.navigation_menu.menu", "default": "main-menu" },
+    { "type": "text", "id": "aria_label", "label": "t:baseline.navigation_menu.aria_label", "default": "Main" }
+  ],
+  "presets": [{ "name": "t:baseline.navigation_menu.name" }]
+}
+{% endschema %}

package/templates/shopify/blocks/panel.liquid

@@ -0,0 +1,64 @@
+{% doc %}
+  Baseline Panel theme block (spec: components/panel/spec.md): Card's surface (fill, outline, radius) around a section's
+  content, with padding and gap on the responsive spacing scale. Section > Panel > Columns.
+
+  @example
+  {% content_for 'block', type: 'panel', id: 'panel' %}
+{% enddoc %}
+<div
+  class="bl-panel"
+  data-slot="panel"
+  data-padding-x="{{ block.settings.padding_x }}"
+  data-padding-y="{{ block.settings.padding_y }}"
+  data-gap="{{ block.settings.gap }}"
+  {{ block.shopify_attributes }}
+>
+  {% content_for 'blocks' %}
+</div>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/panel/panel.tsx: Card's own surface variables. */
+  .bl-panel {
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--bl-card-md-radius);
+    background-color: var(--card);
+    color: var(--card-foreground);
+    box-shadow: 0 0 0 var(--bl-card-border-width) var(--bl-card-border);
+  }
+  .bl-panel[data-padding-x='none'] { padding-inline: 0; }
+  .bl-panel[data-padding-x='xs'] { padding-inline: var(--bl-spacing-responsive-xs); }
+  .bl-panel[data-padding-x='sm'] { padding-inline: var(--bl-spacing-responsive-sm); }
+  .bl-panel[data-padding-x='md'] { padding-inline: var(--bl-spacing-responsive-md); }
+  .bl-panel[data-padding-x='lg'] { padding-inline: var(--bl-spacing-responsive-lg); }
+  .bl-panel[data-padding-x='xl'] { padding-inline: var(--bl-spacing-responsive-xl); }
+  .bl-panel[data-padding-x='2xl'] { padding-inline: var(--bl-spacing-responsive-2xl); }
+  .bl-panel[data-padding-y='none'] { padding-block: 0; }
+  .bl-panel[data-padding-y='xs'] { padding-block: var(--bl-spacing-responsive-xs); }
+  .bl-panel[data-padding-y='sm'] { padding-block: var(--bl-spacing-responsive-sm); }
+  .bl-panel[data-padding-y='md'] { padding-block: var(--bl-spacing-responsive-md); }
+  .bl-panel[data-padding-y='lg'] { padding-block: var(--bl-spacing-responsive-lg); }
+  .bl-panel[data-padding-y='xl'] { padding-block: var(--bl-spacing-responsive-xl); }
+  .bl-panel[data-padding-y='2xl'] { padding-block: var(--bl-spacing-responsive-2xl); }
+  .bl-panel[data-gap='none'] { gap: 0; }
+  .bl-panel[data-gap='xs'] { gap: var(--bl-spacing-responsive-xs); }
+  .bl-panel[data-gap='sm'] { gap: var(--bl-spacing-responsive-sm); }
+  .bl-panel[data-gap='md'] { gap: var(--bl-spacing-responsive-md); }
+  .bl-panel[data-gap='lg'] { gap: var(--bl-spacing-responsive-lg); }
+  .bl-panel[data-gap='xl'] { gap: var(--bl-spacing-responsive-xl); }
+  .bl-panel[data-gap='2xl'] { gap: var(--bl-spacing-responsive-2xl); }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:baseline.panel.name",
+  "tag": null,
+  "blocks": [{ "type": "@theme" }],
+  "settings": [
+    { "type": "select", "id": "padding_x", "label": "t:baseline.panel.padding_x", "options": [{"value":"none","label":"None"},{"value":"xs","label":"XS"},{"value":"sm","label":"SM"},{"value":"md","label":"MD"},{"value":"lg","label":"LG"},{"value":"xl","label":"XL"},{"value":"2xl","label":"2XL"}], "default": "xs" },
+    { "type": "select", "id": "padding_y", "label": "t:baseline.panel.padding_y", "options": [{"value":"none","label":"None"},{"value":"xs","label":"XS"},{"value":"sm","label":"SM"},{"value":"md","label":"MD"},{"value":"lg","label":"LG"},{"value":"xl","label":"XL"},{"value":"2xl","label":"2XL"}], "default": "xs" },
+    { "type": "select", "id": "gap", "label": "t:baseline.panel.gap", "options": [{"value":"none","label":"None"},{"value":"xs","label":"XS"},{"value":"sm","label":"SM"},{"value":"md","label":"MD"},{"value":"lg","label":"LG"},{"value":"xl","label":"XL"},{"value":"2xl","label":"2XL"}], "default": "sm" }
+  ],
+  "presets": [{ "name": "t:baseline.panel.name" }]
+}
+{% endschema %}

package/templates/shopify/blocks/popover.liquid

@@ -0,0 +1,88 @@
+{% doc %}
+  Baseline Popover theme block (spec: components/popover/spec.md): the `popover` snippet with its trigger, title and
+  placement as settings and nested theme blocks as the panel. For short explainers beside the buy area on a product
+  page: shipping, financing, what's in the box.
+
+  @example
+  {% content_for 'block', type: 'popover', id: 'shipping-info' %}
+{% enddoc %}
+
+{%- capture popover_blocks -%}{% content_for 'blocks' %}{%- endcapture -%}
+{%- assign popover_id = 'popover-' | append: block.id -%}
+{% render 'popover',
+  id: popover_id,
+  trigger: block.settings.trigger_label,
+  trigger_variant: block.settings.trigger_variant,
+  trigger_size: block.settings.trigger_size,
+  title: block.settings.title,
+  description: block.settings.description,
+  label: block.settings.trigger_label,
+  side: block.settings.side,
+  align: block.settings.align,
+  blocks: popover_blocks,
+  attrs: block.shopify_attributes
+%}
+
+{% schema %}
+{
+  "name": "t:baseline.popover.name",
+  "tag": null,
+  "blocks": [{ "type": "@theme" }],
+  "settings": [
+    { "type": "text", "id": "trigger_label", "label": "t:baseline.popover.trigger_label", "default": "Shipping details" },
+    {
+      "type": "select",
+      "id": "trigger_variant",
+      "label": "t:baseline.button.variant",
+      "default": "link",
+      "options": [
+        { "value": "default", "label": "t:baseline.variant.default" },
+        { "value": "secondary", "label": "t:baseline.variant.secondary" },
+        { "value": "outline", "label": "t:baseline.variant.outline" },
+        { "value": "ghost", "label": "t:baseline.variant.ghost" },
+        { "value": "link", "label": "t:baseline.variant.link" }
+      ]
+    },
+    {
+      "type": "select",
+      "id": "trigger_size",
+      "label": "t:baseline.button.size",
+      "default": "md",
+      "options": [
+        { "value": "xs", "label": "XS" },
+        { "value": "sm", "label": "SM" },
+        { "value": "md", "label": "MD" },
+        { "value": "lg", "label": "LG" }
+      ]
+    },
+    { "type": "text", "id": "title", "label": "t:baseline.popover.title", "default": "Shipping" },
+    { "type": "text", "id": "description", "label": "t:baseline.popover.description", "default": "Free over $50. Ships in 1-2 business days." },
+    {
+      "type": "select",
+      "id": "side",
+      "label": "t:baseline.popover.side",
+      "default": "bottom",
+      "options": [
+        { "value": "bottom", "label": "t:baseline.sheet.side_bottom" },
+        { "value": "top", "label": "t:baseline.sheet.side_top" },
+        { "value": "inline-end", "label": "t:baseline.popover.side_end" },
+        { "value": "inline-start", "label": "t:baseline.popover.side_start" }
+      ]
+    },
+    {
+      "type": "select",
+      "id": "align",
+      "label": "t:baseline.popover.align",
+      "default": "start",
+      "options": [
+        { "value": "start", "label": "t:baseline.popover.align_start" },
+        { "value": "center", "label": "t:baseline.popover.align_center" },
+        { "value": "end", "label": "t:baseline.popover.align_end" }
+      ]
+    }
+  ],
+  "presets": [
+    { "name": "t:baseline.popover.name" }
+  ]
+}
+{% endschema %}