@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/snippets/carousel-item.liquid

@@ -0,0 +1,18 @@
+{% doc %}
+  One slide of the Baseline Carousel snippet (spec: components/carousel/spec.md): React's CarouselItem (role=group,
+  aria-roledescription=slide) around any content. Render slides into a capture and pass it to `carousel` as its items.
+
+  @param {string} content - the slide's HTML
+  @param {string} [aria_label] - an accessible name instead of the slide's position
+  @param {string} [attrs] - extra attributes (block.shopify_attributes)
+
+  @example
+  {%- capture slides -%}
+    {% render 'carousel-item', content: first_slide_html %}
+  {%- endcapture -%}
+  {% render 'carousel', items: slides, aria_label: 'Featured' %}
+{% enddoc %}
+
+<div class="bl-carousel__slide" role="group" aria-roledescription="slide" data-slot="carousel-item"{% if aria_label != blank %} aria-label="{{ aria_label | escape }}"{% endif %} {{ attrs }}>
+  {{- content -}}
+</div>

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

@@ -0,0 +1,28 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4557-180
+// source=platforms/shopify/theme/snippets/carousel.liquid
+// component=carousel (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): the carousel snippet over captured carousel-item slides (the
+// carousel theme block does the same with nested slide blocks). The Content slot holds the author's slides.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const vertical = instance.getEnum("Orientation", { horizontal: false, vertical: true });
+const controls = instance.getBoolean("Show Controls");
+const dots = instance.getBoolean("Show Dots");
+const args = [
+  "items: slides",
+  "aria_label: 'Featured'",
+  vertical ? "orientation: 'vertical'" : "",
+  controls ? "" : "controls: false",
+  dots ? "" : "dots: false",
+].filter(Boolean).join(", ");
+
+export default {
+  example: figma.code`{%- capture slides -%}
+  {% render 'carousel-item', content: first_slide %}
+  {% render 'carousel-item', content: second_slide %}
+{%- endcapture -%}
+{% render 'carousel', ${args} %}`,
+  id: "shopify-carousel",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/carousel.liquid

@@ -0,0 +1,121 @@
+{% doc %}
+  Baseline Carousel as a snippet (spec: components/carousel/spec.md): React's markup (a region, a viewport, a track of
+  carousel-item slides, Previous / Next, CarouselDots) run by Embla through assets/carousel.js, which this theme builds
+  from src/carousel.js with its own embla-carousel (`npm run build`; update Embla with npm install + npm run build).
+
+  @param {string} items - the slides, captured from carousel-item snippets or content_for 'blocks'
+  @param {string} [aria_label] - names the carousel (default "Carousel")
+  @param {string} [orientation] - horizontal (default) | vertical
+  @param {number} [per_view] - slides per view from md: 1 (default) | 2 | 3
+  @param {boolean} [loop] - wrap around at the ends
+  @param {number} [autoplay] - seconds between slides; 0 or blank is off (paused on hover and focus)
+  @param {boolean} [controls] - Previous / Next (default true)
+  @param {boolean} [dots] - dots (default true)
+  @param {string} [class] - extra classes
+  @param {string} [attrs] - extra attributes on the root (block.shopify_attributes)
+
+  @example
+  {% render 'carousel', items: slides, aria_label: 'Testimonials', loop: true, autoplay: 6 %}
+{% enddoc %}
+
+{%- liquid
+  assign o = orientation | default: 'horizontal'
+  unless o == 'vertical'
+    assign o = 'horizontal'
+  endunless
+  assign pv = per_view | default: 1 | plus: 0
+  assign show_controls = true
+  if controls == false
+    assign show_controls = false
+  endif
+  assign show_dots = true
+  if dots == false
+    assign show_dots = false
+  endif
+  assign delay = autoplay | default: 0 | times: 1000
+  assign looped = false
+  if loop
+    assign looped = true
+  endif
+  assign label = aria_label | default: 'Carousel'
+-%}
+<div class="bl-carousel bl-carousel--{{ o }}{% if show_dots %} has-dots{% endif %}{% if class != blank %} {{ class }}{% endif %}" role="region" aria-roledescription="carousel" aria-label="{{ label | escape }}" data-slot="carousel" data-orientation="{{ o }}" data-slides="{{ pv }}" data-options='{"loop":{{ looped }},"align":"start"}'{% if delay > 0 %} data-autoplay="{{ delay }}"{% endif %} {{ attrs }}>
+  <div class="bl-carousel__viewport" data-slot="carousel-content">
+    <div class="bl-carousel__track">{{ items }}</div>
+  </div>
+  {%- if show_controls -%}
+    {% render 'button', label: 'Previous slide', variant: 'outline', size: 'sm', icon: 'chevron-left', icon_only: true, class: 'bl-carousel__control bl-carousel__control--previous', attrs: 'data-carousel-previous' %}
+    {% render 'button', label: 'Next slide', variant: 'outline', size: 'sm', icon: 'chevron-right', icon_only: true, class: 'bl-carousel__control bl-carousel__control--next', attrs: 'data-carousel-next' %}
+  {%- endif -%}
+  {%- if show_dots -%}
+    <div class="bl-carousel__dots" data-slot="carousel-dots" data-dot-class="bl-carousel__dot"></div>
+  {%- endif -%}
+</div>
+<script src="{{ 'carousel.js' | asset_url }}" defer></script>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/carousel/carousel.tsx. Geometry from the carousel/* tokens; the controls are the button
+     snippet (outline, sm, icon-only) made round, carousel/control-offset outside the slides. */
+  .bl-carousel { position: relative; }
+  /* dots below: padding keeps their room (a margin would collapse into the next block's) and the controls stop above
+     it, so they centre on the slides */
+  .bl-carousel--horizontal.has-dots {
+    --bl-carousel-dots-room: calc(var(--bl-carousel-dots-offset) + var(--bl-carousel-dot-size));
+    padding-bottom: var(--bl-carousel-dots-room);
+  }
+  .bl-carousel__viewport { overflow: hidden; }
+  .bl-carousel__track { display: flex; }
+  .bl-carousel--horizontal .bl-carousel__track { margin-inline-start: calc(-1 * var(--bl-carousel-gap)); }
+  .bl-carousel--vertical .bl-carousel__track { flex-direction: column; margin-top: calc(-1 * var(--bl-carousel-gap)); }
+  .bl-carousel__slide { flex: 0 0 100%; min-width: 0; }
+  .bl-carousel--horizontal .bl-carousel__slide { padding-inline-start: var(--bl-carousel-gap); }
+  .bl-carousel--vertical .bl-carousel__slide { padding-top: var(--bl-carousel-gap); }
+  @media (min-width: 48rem) {
+    .bl-carousel[data-slides='2'] .bl-carousel__slide { flex-basis: 50%; }
+    .bl-carousel[data-slides='3'] .bl-carousel__slide { flex-basis: calc(100% / 3); }
+  }
+
+  /* Previous / Next */
+  .bl-carousel > .bl-carousel__control {
+    position: absolute;
+    border-radius: var(--bl-carousel-control-radius);
+    touch-action: manipulation;
+  }
+  .bl-carousel > .bl-carousel__control:disabled { pointer-events: none; opacity: 0.5; }
+  .bl-carousel--horizontal > .bl-carousel__control { inset-block: 0 var(--bl-carousel-dots-room, 0px); margin-block: auto; }
+  .bl-carousel--horizontal > .bl-carousel__control--previous { inset-inline-start: calc(-1 * var(--bl-carousel-control-offset)); }
+  .bl-carousel--horizontal > .bl-carousel__control--next { inset-inline-end: calc(-1 * var(--bl-carousel-control-offset)); }
+  .bl-carousel--vertical > .bl-carousel__control { left: 50%; translate: -50% 0; rotate: 90deg; }
+  .bl-carousel--vertical > .bl-carousel__control--previous { top: calc(-1 * var(--bl-carousel-control-offset)); }
+  .bl-carousel--vertical > .bl-carousel__control--next { bottom: calc(-1 * var(--bl-carousel-control-offset)); }
+  [dir='rtl'] .bl-carousel--horizontal > .bl-carousel__control svg { scale: -1 1; }
+
+  /* CarouselDots (built by the script) */
+  .bl-carousel__dots {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--bl-carousel-dots-gap);
+  }
+  .bl-carousel--horizontal > .bl-carousel__dots { inset-inline: 0; bottom: 0; }
+  .bl-carousel--vertical > .bl-carousel__dots {
+    inset-block: 0;
+    inset-inline-start: calc(100% + var(--bl-carousel-dots-offset));
+    flex-direction: column;
+  }
+  .bl-carousel__dot {
+    width: var(--bl-carousel-dot-size);
+    height: var(--bl-carousel-dot-size);
+    flex: none;
+    padding: 0;
+    border: 0;
+    border-radius: var(--bl-carousel-dot-radius);
+    background-color: var(--bl-carousel-dot-background);
+    cursor: pointer;
+    outline: none;
+    transition: background-color 150ms;
+  }
+  .bl-carousel__dot[aria-current='true'] { background-color: var(--primary); }
+  .bl-carousel__dot:focus-visible { box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring); }
+{% endstylesheet %}

package/templates/shopify/snippets/checkbox.liquid

@@ -0,0 +1,147 @@
+{% doc %}
+  Baseline Checkbox as a snippet (spec: components/checkbox/spec.md). Owns its box and its glyph and nothing
+  else: no label, no description, no error. Render a <label for> beside it — a checkbox without a label is a bug,
+  and the label is also the bigger click target.
+
+  @param {string} [name] - form field name
+  @param {string} [id] - id, so a <label for> can point at it
+  @param {string} [value] - submitted value when checked
+  @param {boolean} [checked] - checked attribute
+  @param {boolean} [indeterminate] - third state for a parent box over a partly-selected list. Renders
+    aria-checked="mixed" and swaps the glyph for a dash. Author-driven: a shopper can never reach it by clicking.
+  @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
+  {% render 'checkbox', name: 'accepts_marketing', id: 'marketing', checked: true %}
+  <label for="marketing">Email me about new products</label>
+{% enddoc %}
+
+{%- liquid
+  assign classes = 'bl-checkbox'
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+{%- comment -%}
+  A replaced element cannot have children, so the glyph 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="checkbox"
+  {%- if indeterminate %} data-indeterminate="true"{% endif -%}
+>
+  <input
+    type="checkbox"
+    class="bl-checkbox__control"
+    data-slot="checkbox-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 indeterminate %} aria-checked="mixed"{% endif -%}
+    {%- if required %} required{% endif -%}
+    {%- if disabled %} disabled{% endif -%}
+    {%- if invalid %} aria-invalid="true"{% endif -%}
+    {{ attrs }}
+  >
+  {% render 'icon', name: 'check', class: 'bl-checkbox__glyph bl-checkbox__glyph--check' %}
+  {% render 'icon', name: 'minus', class: 'bl-checkbox__glyph bl-checkbox__glyph--indeterminate' %}
+</span>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/checkbox/checkbox.tsx. Colours come from the scheme class (--input, --primary,
+     --ring ...); geometry from the checkbox/* component tokens in baseline-tokens.liquid (ADR-0017). */
+  .bl-checkbox {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    width: var(--bl-checkbox-size);
+    height: var(--bl-checkbox-size);
+  }
+
+  /* the whole control fades together, glyph included */
+  .bl-checkbox:has(.bl-checkbox__control:disabled) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .bl-checkbox__control {
+    appearance: none;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    border: 1px solid var(--input);
+    border-radius: var(--bl-checkbox-radius);
+    background-color: transparent;
+    outline: none;
+    transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+  }
+
+  /* checked and indeterminate share one filled look */
+  .bl-checkbox__control:checked,
+  .bl-checkbox[data-indeterminate="true"] .bl-checkbox__control {
+    border-color: var(--primary);
+    background-color: var(--primary);
+  }
+
+  .bl-checkbox__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 ticked-but-invalid box still has to read as ticked */
+  .bl-checkbox__control[aria-invalid="true"] {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring-invalid);
+  }
+
+  .bl-checkbox__control[aria-invalid="true"]:checked {
+    border-color: var(--primary);
+  }
+
+  .bl-checkbox__control:disabled {
+    cursor: not-allowed;
+  }
+
+  /* Every glyph rule is scoped under .bl-checkbox on purpose. The icon snippet ships its own
+     `.bl-icon { display: inline-block }`, which is also (0,1,0): an unscoped `.bl-checkbox__glyph` tied with
+     it and lost on source order, so BOTH glyphs rendered and the later one (the dash) covered the check. */
+  .bl-checkbox .bl-checkbox__glyph {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+    color: var(--primary-foreground);
+    pointer-events: none;
+  }
+
+  .bl-checkbox .bl-checkbox__control:checked ~ .bl-checkbox__glyph--check {
+    display: block;
+  }
+
+  /* indeterminate wins over checked: declared after, same specificity */
+  .bl-checkbox[data-indeterminate="true"] .bl-checkbox__glyph--check {
+    display: none;
+  }
+
+  .bl-checkbox[data-indeterminate="true"] .bl-checkbox__glyph--indeterminate {
+    display: block;
+  }
+
+  /* 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-checkbox__control::after {
+    content: "";
+    position: absolute;
+    inset: -8px -12px;
+  }
+{% endstylesheet %}

package/templates/shopify/snippets/container.liquid

@@ -0,0 +1,52 @@
+{% doc %}
+  Baseline Container (spec: components/container/spec.md): WordPress's content / wide / full widths from the layout/*
+  tokens and inline padding on the responsive spacing scale. Rendered by sections/baseline-section.liquid (its first
+  Container) and blocks/container.liquid (a further one).
+
+  @param {string} content - the blocks inside
+  @param {string} [width] - content | wide | full (default content)
+  @param {string} [padding_x] - none | xs-2xl (default xs)
+  @param {string} [gap] - none | xs-2xl (default sm)
+  @param {string} [attrs] - extra attributes (block.shopify_attributes)
+
+  @example
+  {% render 'container', content: blocks, width: 'wide' %}
+{% enddoc %}
+<div
+  class="bl-container"
+  data-slot="container"
+  data-width="{{ width | default: 'content' }}"
+  data-padding-x="{{ padding_x | default: 'xs' }}"
+  data-gap="{{ gap | default: 'sm' }}"
+  {{ attrs }}
+>
+  {{ content }}
+</div>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/container/container.tsx. */
+  .bl-container {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 100%;
+    margin-inline: auto;
+    max-width: var(--bl-layout-content-width);
+  }
+  .bl-container[data-width='wide'] { max-width: var(--bl-layout-wide-width); }
+  .bl-container[data-width='full'] { max-width: none; }
+  .bl-container[data-padding-x='none'] { padding-inline: 0; }
+  .bl-container[data-padding-x='xs'] { padding-inline: var(--bl-spacing-responsive-xs); }
+  .bl-container[data-padding-x='sm'] { padding-inline: var(--bl-spacing-responsive-sm); }
+  .bl-container[data-padding-x='md'] { padding-inline: var(--bl-spacing-responsive-md); }
+  .bl-container[data-padding-x='lg'] { padding-inline: var(--bl-spacing-responsive-lg); }
+  .bl-container[data-padding-x='xl'] { padding-inline: var(--bl-spacing-responsive-xl); }
+  .bl-container[data-padding-x='2xl'] { padding-inline: var(--bl-spacing-responsive-2xl); }
+  .bl-container[data-gap='none'] { gap: 0; }
+  .bl-container[data-gap='xs'] { gap: var(--bl-spacing-responsive-xs); }
+  .bl-container[data-gap='sm'] { gap: var(--bl-spacing-responsive-sm); }
+  .bl-container[data-gap='md'] { gap: var(--bl-spacing-responsive-md); }
+  .bl-container[data-gap='lg'] { gap: var(--bl-spacing-responsive-lg); }
+  .bl-container[data-gap='xl'] { gap: var(--bl-spacing-responsive-xl); }
+  .bl-container[data-gap='2xl'] { gap: var(--bl-spacing-responsive-2xl); }
+{% endstylesheet %}

package/templates/shopify/snippets/css-variables.liquid

@@ -0,0 +1,18 @@
+{% style %}
+  {% # Loads all font variantions with display: swap %}
+  {{ settings.type_primary_font | font_face: font_display: 'swap' }}
+  {{ settings.type_primary_font | font_modify: 'weight', 'bold' | font_face: font_display: 'swap' }}
+  {{ settings.type_primary_font | font_modify: 'weight', 'bold' | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}
+  {{ settings.type_primary_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}
+
+  :root {
+    --font-primary--family: {{ settings.type_primary_font.family }}, {{ settings.type_primary_font.fallback_families }};
+    --font-primary--style: {{ settings.type_primary_font.style }};
+    --font-primary--weight: {{ settings.type_primary_font.weight }};
+    --page-width: {{ settings.max_page_width }};
+    --page-margin: {{ settings.min_page_margin }}px;
+    --color-background: {{ settings.background_color }};
+    --color-foreground: {{ settings.foreground_color }};
+    --style-border-radius-inputs: {{ settings.input_corner_radius }}px;
+  }
+{% endstyle %}

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

@@ -0,0 +1,36 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4461-13577
+// source=platforms/shopify/theme/snippets/dialog.liquid
+// component=dialog (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): the dialog snippet. A merchant-built dialog is the Dialog
+// theme block (blocks/dialog.liquid) with the same settings; code renders the snippet. Show Media and Footer
+// Orientation have no parameter (the footer stacks below sm on its own).
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+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: 'dialog'",
+  "trigger: 'Open'",
+  showHeader ? `title: '${title}'` : "",
+  showHeader && description ? `description: '${description}'` : "",
+  "content: dialog_body",
+  showFooter ? "footer: dialog_footer, close_label: 'Cancel'" : "",
+  showClose ? "" : "hide_close: true",
+].filter(Boolean).join(", ");
+
+const captures = [
+  "{%- capture dialog_body -%}<p>Dialog content goes here.</p>{%- endcapture -%}",
+  showFooter ? "{%- capture dialog_footer -%}{% render 'button', label: 'Continue' %}{%- endcapture -%}" : "",
+].filter(Boolean).join("\n");
+
+export default {
+  example: figma.code`${captures}
+{% render 'dialog', ${args} %}`,
+  id: "shopify-dialog",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/dialog.liquid

@@ -0,0 +1,217 @@
+{% doc %}
+  Baseline Dialog as a snippet (spec: components/dialog/spec.md): a Button that opens a native <dialog closedby="any">
+  through command="show-modal" commandfor, so it opens, traps focus, closes on Escape and returns focus with no
+  JavaScript. Safari has no `closedby` yet (2026-10), so there an outside click does not close it. Colours come from the
+  enclosing scheme (.color-<id>), which the dialog inherits from where it is rendered.
+
+  @param {string} id - unique id for the dialog (the trigger's commandfor)
+  @param {string} [trigger] - the trigger button's label; blank renders no trigger, for a dialog opened another way
+    (Media's play button)
+  @param {string} [trigger_variant] - Button variant for the trigger (default outline)
+  @param {string} [trigger_size] - Button size for the trigger (default md)
+  @param {string} [title] - the dialog title (its accessible name)
+  @param {string} [description] - muted text under the title
+  @param {string} [content] - the body; HTML is allowed
+  @param {string} [footer] - ready markup for the footer's actions, e.g. captured button snippets
+  @param {string} [close_label] - adds an outline button to the footer that closes the dialog (<form method="dialog">)
+  @param {boolean} [hide_close] - leave out the corner close button
+  @param {string} [blocks] - theme blocks placed into the dialog's body (blocks/dialog.liquid)
+  @param {string} [dialog_class] - extra classes on the <dialog>
+  @param {string} [attrs] - extra attributes on the trigger's wrapper (block.shopify_attributes)
+
+  @example
+  {%- capture size_chart -%}<img src="{{ 'size-chart.png' | asset_url }}" alt="Size chart">{%- endcapture -%}
+  {% render 'dialog', id: 'size-chart', trigger: 'Size chart', title: 'Size chart', content: size_chart, close_label: 'Close' %}
+{% enddoc %}
+
+{%- liquid
+  assign dialog_id = id | default: 'dialog' | handleize
+  assign has_header = false
+  if title != blank or description != blank
+    assign has_header = true
+  endif
+  assign trigger_attrs = 'command="show-modal" commandfor="' | append: dialog_id | append: '"'
+  assign close_attrs = 'command="close" commandfor="' | append: dialog_id | append: '"'
+  assign t_variant = trigger_variant | default: 'outline'
+  assign t_size = trigger_size | default: 'md'
+-%}
+<div class="bl-dialog" {{ attrs }}>
+  {%- if trigger != blank -%}
+    {%- render 'button', label: trigger, variant: t_variant, size: t_size, attrs: trigger_attrs -%}
+  {%- endif -%}
+  <dialog
+    id="{{ dialog_id }}"
+    class="bl-dialog__content{% if dialog_class != blank %} {{ dialog_class }}{% endif %}"
+    data-slot="dialog-content"
+    closedby="any"
+    {% if title != blank %}aria-labelledby="{{ dialog_id }}-title"{% endif %}
+    {% if description != blank %}aria-describedby="{{ dialog_id }}-description"{% endif %}
+  >
+    {%- if has_header -%}
+      <div class="bl-dialog__header" data-slot="dialog-header">
+        {%- if title != blank -%}
+          <h2 id="{{ dialog_id }}-title" class="bl-dialog__title" data-slot="dialog-title">{{ title | escape }}</h2>
+        {%- endif -%}
+        {%- if description != blank -%}
+          <p id="{{ dialog_id }}-description" class="bl-dialog__description" data-slot="dialog-description">
+            {{- description -}}
+          </p>
+        {%- endif -%}
+      </div>
+    {%- endif -%}
+    {%- if content != blank -%}
+      <div class="bl-dialog__body">{{ content }}</div>
+    {%- endif -%}
+    {{- blocks -}}
+    {%- if footer != blank or close_label != blank -%}
+      <div class="bl-dialog__footer" data-slot="dialog-footer">
+        {%- comment -%} Close first: the row reads Cancel, then the primary action; stacked, the primary is on top {%- endcomment -%}
+        {%- if close_label != blank -%}
+          <form method="dialog" class="bl-dialog__form">
+            {%- render 'button', label: close_label, variant: 'outline', type: 'submit' -%}
+          </form>
+        {%- endif -%}
+        {{- footer -}}
+      </div>
+    {%- endif -%}
+    {%- unless hide_close -%}
+      {%- render 'button',
+        label: 'Close',
+        variant: 'ghost',
+        size: 'sm',
+        icon: 'close',
+        icon_only: true,
+        class: 'bl-dialog__close',
+        attrs: close_attrs
+      -%}
+    {%- endunless -%}
+  </dialog>
+</div>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/dialog/dialog.tsx. Colours from the scheme; geometry from the dialog/* tokens; the ring is
+     the dialog/border tint, the footer fill dialog/footer/background, the backdrop the color/overlay role. */
+  :root:has(dialog[open]:modal) {
+    overflow: hidden;
+  }
+  .bl-dialog__content {
+    position: fixed;
+    inset: 0;
+    margin: auto;
+    height: fit-content;
+    max-height: calc(100% - 2rem);
+    width: 100%;
+    max-width: calc(100% - 2rem);
+    gap: var(--bl-dialog-gap);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: var(--bl-dialog-padding);
+    border: 0;
+    border-radius: var(--bl-dialog-radius);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    box-shadow: 0 0 0 var(--bl-dialog-border-width) var(--bl-dialog-border);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    outline: none;
+    opacity: 0;
+    scale: 0.95;
+    transition: opacity 100ms, scale 100ms, display 100ms allow-discrete, overlay 100ms allow-discrete;
+  }
+  @media (min-width: 40rem) {
+    .bl-dialog__content {
+      max-width: var(--bl-dialog-max-width);
+    }
+  }
+  .bl-dialog__content[open] {
+    display: grid;
+    opacity: 1;
+    scale: 1;
+  }
+  @starting-style {
+    .bl-dialog__content[open] {
+      opacity: 0;
+      scale: 0.95;
+    }
+  }
+  .bl-dialog__content::backdrop {
+    background-color: var(--overlay);
+    opacity: 0;
+    transition: opacity 100ms, display 100ms allow-discrete, overlay 100ms allow-discrete;
+  }
+  @supports (backdrop-filter: blur(4px)) {
+    .bl-dialog__content::backdrop {
+      backdrop-filter: blur(4px);
+    }
+  }
+  .bl-dialog__content[open]::backdrop {
+    opacity: 1;
+  }
+  @starting-style {
+    .bl-dialog__content[open]::backdrop {
+      opacity: 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .bl-dialog__content,
+    .bl-dialog__content::backdrop {
+      transition: none;
+    }
+  }
+  .bl-dialog__content > * {
+    margin: 0;
+  }
+  .bl-dialog__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bl-dialog-header-gap);
+  }
+  .bl-dialog__title {
+    margin: 0;
+    font-family: var(--font-heading, inherit);
+    font-size: var(--bl-dialog-title-font-size);
+    font-weight: var(--bl-dialog-title-font-weight);
+    line-height: var(--bl-dialog-title-line-height);
+  }
+  .bl-dialog__description {
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: var(--bl-dialog-description-font-size);
+    line-height: var(--bl-dialog-description-line-height);
+  }
+  .bl-dialog__description a {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+  /* theme blocks placed into the dialog are its grid items, spaced by its gap */
+  .bl-dialog__body {
+    display: grid;
+    gap: var(--bl-dialog-gap);
+  }
+  /* always bordered and muted, bleeding to the edges; stacked (primary on top) below sm, a row aligned end from sm */
+  .bl-dialog__footer {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: var(--bl-dialog-footer-gap);
+    margin: 0 calc(var(--bl-dialog-padding) * -1) calc(var(--bl-dialog-padding) * -1);
+    padding: var(--bl-dialog-padding);
+    border-top: var(--bl-dialog-border-width) solid var(--border);
+    border-end-start-radius: var(--bl-dialog-radius);
+    border-end-end-radius: var(--bl-dialog-radius);
+    background-color: var(--bl-dialog-footer-background);
+  }
+  @media (min-width: 40rem) {
+    .bl-dialog__footer {
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+  }
+  .bl-dialog__form {
+    display: contents;
+  }
+  .bl-dialog__close {
+    position: absolute;
+    inset-block-start: var(--bl-dialog-close-inset);
+    inset-inline-end: var(--bl-dialog-close-inset);
+  }
+{% endstylesheet %}