@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/snippets/toggle.liquid

@@ -0,0 +1,104 @@
+{% doc %}
+  Baseline Toggle as a snippet (spec: components/toggle/spec.md): a <label> drawn as a button around a visually hidden
+  <input type="checkbox">, so it presses and releases with no JavaScript and its state submits with a form. Native
+  (ADR-0030, user 2026-10-06). Inside a toggle-group, pass `type: 'radio'` and the group's `name` for a single choice.
+
+  @param {string} [label] - visible text
+  @param {string} [icon] - a Baseline system icon (snippets/icon.liquid)
+  @param {string} [icon_position] - start (default) | end
+  @param {string} [aria_label] - the accessible name of an icon-only toggle (goes on the input)
+  @param {string} [variant] - default | outline
+  @param {string} [size] - sm | md (default) | lg
+  @param {boolean} [pressed] - on at first
+  @param {boolean} [disabled] - disabled
+  @param {string} [name] - the input's name (a form field, or the group's)
+  @param {string} [value] - the input's value
+  @param {string} [type] - checkbox (default) | radio (a single-choice group's item)
+  @param {string} [slot] - data-slot (toggle-group-item inside a group)
+  @param {string} [class] - extra classes on the label
+
+  @example
+  {% render 'toggle', label: 'Gift wrap', name: 'properties[Gift wrap]', value: 'Yes', variant: 'outline' %}
+{% enddoc %}
+
+{%- liquid
+  assign v = variant | default: 'default'
+  unless v == 'outline'
+    assign v = 'default'
+  endunless
+  assign s = size | default: 'md'
+  case s
+    when 'sm', 'md', 'lg'
+    else
+      assign s = 'md'
+  endcase
+  assign t = type | default: 'checkbox'
+  unless t == 'radio'
+    assign t = 'checkbox'
+  endunless
+-%}
+<label class="bl-toggle bl-toggle--{{ v }} bl-toggle--{{ s }}{% if class != blank %} {{ class }}{% endif %}" data-slot="{{ slot | default: 'toggle' }}" data-variant="{{ v }}" data-size="{{ s }}">
+  <input type="{{ t }}" class="bl-toggle__input"{% if name != blank %} name="{{ name | escape }}"{% endif %}{% if value != blank %} value="{{ value | escape }}"{% endif %}{% if pressed %} checked{% endif %}{% if disabled %} disabled{% endif %}{% if aria_label != blank %} aria-label="{{ aria_label | escape }}"{% endif %}>
+  {%- comment -%} the icon's side is marked on a wrapper (the icon snippet takes no attributes); with a label it tightens that side {%- endcomment -%}
+  {%- if icon != blank and icon_position != 'end' -%}
+    <span class="bl-toggle__icon-wrap"{% if label != blank %} data-icon="inline-start"{% endif %}>{%- render 'icon', name: icon, class: 'bl-toggle__icon' -%}</span>
+  {%- endif -%}
+  {%- if label != blank -%}<span>{{ label | escape }}</span>{%- endif -%}
+  {%- if icon != blank and icon_position == 'end' -%}
+    <span class="bl-toggle__icon-wrap"{% if label != blank %} data-icon="inline-end"{% endif %}>{%- render 'icon', name: icon, class: 'bl-toggle__icon' -%}</span>
+  {%- endif -%}
+</label>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/toggle/toggle.tsx. Colours come from the scheme class; geometry from the toggle/* tokens
+     in baseline-tokens.liquid (ADR-0017). Pressed, focus and disabled follow the hidden checkbox through :has(). */
+  .bl-toggle {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    user-select: none;
+    cursor: pointer;
+    border: 0 solid transparent;
+    border-radius: var(--toggle-radius);
+    background: transparent;
+    color: inherit;
+    font-weight: var(--bl-toggle-font-weight);
+    outline: none;
+    transition: all 150ms;
+  }
+  .bl-toggle:hover,
+  .bl-toggle:has(.bl-toggle__input:checked) { background-color: var(--muted); color: var(--foreground); }
+  .bl-toggle:has(.bl-toggle__input:focus-visible) { z-index: 10; border-color: var(--ring); box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring); }
+  .bl-toggle:has(.bl-toggle__input:disabled) { opacity: 0.5; pointer-events: none; }
+  .bl-toggle:has(.bl-toggle__input[aria-invalid='true']) { border-color: var(--destructive); box-shadow: 0 0 0 var(--bl-control-ring-width) color-mix(in oklab, var(--destructive) 20%, transparent); }
+  .bl-toggle--outline { border-width: var(--bl-toggle-border-width); border-color: var(--input); }
+  /* the checkbox stays in the DOM and in the tab order, visually hidden (as .sr-only) */
+  .bl-toggle__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  .bl-toggle svg { flex-shrink: 0; pointer-events: none; }
+  .bl-toggle__icon-wrap { display: inline-flex; flex-shrink: 0; }
+  .bl-toggle--sm { --toggle-radius: var(--bl-toggle-sm-radius); height: var(--bl-toggle-sm-height); min-width: var(--bl-toggle-sm-height); gap: var(--bl-toggle-sm-gap); padding-inline: var(--bl-toggle-sm-padding-x); font-size: var(--bl-toggle-sm-font-size); line-height: var(--bl-toggle-sm-line-height); }
+  .bl-toggle--md { --toggle-radius: var(--bl-toggle-md-radius); height: var(--bl-toggle-md-height); min-width: var(--bl-toggle-md-height); gap: var(--bl-toggle-md-gap); padding-inline: var(--bl-toggle-md-padding-x); font-size: var(--bl-toggle-md-font-size); line-height: var(--bl-toggle-md-line-height); }
+  .bl-toggle--lg { --toggle-radius: var(--bl-toggle-lg-radius); height: var(--bl-toggle-lg-height); min-width: var(--bl-toggle-lg-height); gap: var(--bl-toggle-lg-gap); padding-inline: var(--bl-toggle-lg-padding-x); font-size: var(--bl-toggle-lg-font-size); line-height: var(--bl-toggle-lg-line-height); }
+  .bl-toggle--sm .bl-toggle__icon { width: var(--bl-toggle-sm-icon-size); height: var(--bl-toggle-sm-icon-size); }
+  .bl-toggle--md .bl-toggle__icon { width: var(--bl-toggle-md-icon-size); height: var(--bl-toggle-md-icon-size); }
+  .bl-toggle--lg .bl-toggle__icon { width: var(--bl-toggle-lg-icon-size); height: var(--bl-toggle-lg-icon-size); }
+  .bl-toggle--sm:has([data-icon='inline-start']) { padding-inline-start: var(--bl-toggle-sm-padding-x-icon); }
+  .bl-toggle--sm:has([data-icon='inline-end']) { padding-inline-end: var(--bl-toggle-sm-padding-x-icon); }
+  .bl-toggle--md:has([data-icon='inline-start']) { padding-inline-start: var(--bl-toggle-md-padding-x-icon); }
+  .bl-toggle--md:has([data-icon='inline-end']) { padding-inline-end: var(--bl-toggle-md-padding-x-icon); }
+  .bl-toggle--lg:has([data-icon='inline-start']) { padding-inline-start: var(--bl-toggle-lg-padding-x-icon); }
+  .bl-toggle--lg:has([data-icon='inline-end']) { padding-inline-end: var(--bl-toggle-lg-padding-x-icon); }
+{% endstylesheet %}

package/templates/shopify/snippets/typeset.liquid

@@ -0,0 +1,498 @@
+{% comment %} Generated by tokens/build.mjs from tokens/typeset.css. Do not edit. Prose rhythm (ADR-0028): render once from layout/theme.liquid; class="typeset" on every richtext output. {% endcomment %}
+{% stylesheet %}
+.typeset {
+  --typeset-font-body: inherit;
+  --typeset-font-heading: var(--bl-font-heading);
+  --typeset-font-mono: var(--bl-font-mono);
+  --typeset-size: 1em;
+  --typeset-leading: 1.75;
+  --typeset-flow: 1.25em;
+}
+
+.typeset {
+  font-family: var(--typeset-font-body);
+  font-size: calc(var(--typeset-size) * 1.125);
+  line-height: var(--typeset-leading);
+  color: var(--foreground);
+  overflow-wrap: break-word;
+  margin-trim: block-start;
+
+  @media (min-width: 48rem), print {
+    font-size: var(--typeset-size);
+  }
+
+  --typeset-muted: var(--muted-foreground);
+  --typeset-rule: var(--border);
+}
+
+.typeset
+  *:not(
+    :where(
+      .not-typeset,
+      [data-not-typeset],
+      .not-typeset *,
+      [data-not-typeset] *
+    )
+  ) {
+  /* Paragraphs. */
+  &:where(p) {
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+  }
+
+  /* Headings. */
+  &:where(h1, h2, h3, h4, h5, h6) {
+    color: var(--foreground);
+    font-family: var(--typeset-font-heading);
+    font-weight: 600;
+    margin-block-end: 0;
+  }
+  &:where(h1) {
+    font-size: 1.75em;
+    line-height: 1.3;
+    margin-block-start: var(--typeset-flow);
+  }
+  &:where(h2) {
+    font-size: 1.25em;
+    line-height: 1.4;
+    margin-block-start: calc(var(--typeset-flow) * 1.4);
+  }
+  &:where(h3) {
+    font-size: 1.125em;
+    line-height: 1.45;
+    margin-block-start: var(--typeset-flow);
+  }
+  &:where(h4) {
+    font-size: 1em;
+    line-height: 1.5;
+    margin-block-start: var(--typeset-flow);
+  }
+  &:where(h5) {
+    font-size: 0.875em;
+    line-height: 1.5;
+    font-weight: 500;
+    color: var(--typeset-muted);
+    margin-block-start: calc(var(--typeset-flow) / 0.875);
+  }
+  &:where(h6) {
+    font-size: 0.8125em;
+    line-height: 1.5;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--typeset-muted);
+    margin-block-start: calc(var(--typeset-flow) / 0.8125);
+  }
+  /* Anchors. */
+  &:where([id]) {
+    scroll-margin-block-start: var(--typeset-flow);
+  }
+
+  /* Headings own the space below them. */
+  &:where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
+    margin-block-start: 1em;
+  }
+  &:where(:is(h1, h2, h3, h4) :is(code)) {
+    font-size: 0.9em;
+  }
+
+  /* Links. */
+  &:where(a) {
+    color: inherit;
+    font-weight: 500;
+    text-decoration-line: underline;
+    text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
+  }
+  &:where(a:hover) {
+    text-decoration-color: currentColor;
+  }
+  &:where(a:focus-visible) {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+    border-radius: 0.125em;
+  }
+  &:where(:is(h1, h2, h3, h4, h5, h6) :is(a)) {
+    font-weight: inherit;
+  }
+
+  /* Inline semantics. */
+  &:where(strong, b) {
+    font-weight: 600;
+  }
+  &:where(:is(h1, h2, h3, h4) :is(strong, b)) {
+    font-weight: 600;
+  }
+  &:where(mark) {
+    background-color: color-mix(
+      in oklab,
+      oklch(0.86 0.17 95) 40%,
+      transparent
+    );
+    color: inherit;
+    padding: 0.05em 0.15em;
+    border-radius: 0.2em;
+  }
+  &:where(abbr[title]) {
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+    text-underline-offset: 0.2em;
+    cursor: help;
+  }
+  &:where(del, s) {
+    color: var(--typeset-muted);
+    text-decoration-line: line-through;
+  }
+  &:where(sup, sub) {
+    font-size: 0.75em;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  &:where(sup) {
+    top: -0.5em;
+  }
+  &:where(sub) {
+    bottom: -0.25em;
+  }
+  &:where(sup a) {
+    text-decoration-line: none;
+    font-weight: 500;
+  }
+
+  /* Lists. */
+  &:where(ul) {
+    list-style-type: disc;
+  }
+  &:where(ol) {
+    list-style-type: decimal;
+  }
+  &:where(ul ul) {
+    list-style-type: circle;
+  }
+  &:where(ul ul ul) {
+    list-style-type: square;
+  }
+  &:where(ol[type="a" i]) {
+    list-style-type: lower-alpha;
+  }
+  &:where(ol[type="i" i]) {
+    list-style-type: lower-roman;
+  }
+  &:where(ol[type="A" s]) {
+    list-style-type: upper-alpha;
+  }
+  &:where(ol[type="I" s]) {
+    list-style-type: upper-roman;
+  }
+  &:where(ul, ol) {
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+    padding-inline-start: 1.5em;
+  }
+  &:where(li) {
+    margin-block-start: 0.5em;
+    padding-inline-start: 0.4em;
+  }
+  &:where(li > p, li > ul, li > ol) {
+    margin-block-start: 0.5em;
+  }
+  &:where(ul > li)::marker {
+    color: var(--typeset-muted);
+  }
+  &:where(ol > li)::marker {
+    color: var(--typeset-muted);
+  }
+
+  /* GFM task lists. */
+  &:where(ul.contains-task-list) {
+    list-style-type: none;
+    padding-inline-start: 0.25em;
+  }
+  &:where(li.task-list-item > input[type="checkbox"]) {
+    margin-inline-end: 0.5em;
+    vertical-align: -0.1em;
+    accent-color: var(--primary);
+  }
+
+  /* Disclosures. */
+  &:where(details) {
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+  }
+  &:where(summary) {
+    cursor: pointer;
+    font-weight: 500;
+  }
+  &:where(summary)::marker {
+    color: var(--typeset-muted);
+  }
+
+  /* Keyboard keys. */
+  &:where(kbd) {
+    font-family: inherit;
+    font-size: 0.85em;
+    font-weight: 500;
+    border: 1px solid var(--typeset-rule);
+    border-block-end-width: 2px;
+    border-radius: min(calc(var(--bl-radius-lg) * 0.6), 0.35em);
+    padding: 0.0625em 0.35em;
+  }
+
+  /* Definition lists. */
+  &:where(dl) {
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+  }
+  &:where(dt) {
+    font-weight: 500;
+    margin-block-start: 1em;
+  }
+  &:where(dt + dt) {
+    margin-block-start: 0.25em;
+  }
+  &:where(dd) {
+    margin-block-start: 0.25em;
+    margin-inline-start: 0;
+    padding-inline-start: 1em;
+    color: var(--typeset-muted);
+  }
+
+  /* Inline code. */
+  &:where(:not(pre) > code) {
+    background-color: var(--muted);
+    font-family: var(--typeset-font-mono);
+    font-size: 0.85em;
+    border-radius: min(calc(var(--bl-radius-lg) * 0.6), 0.35em);
+    padding: 0.125em 0.3em;
+  }
+
+  /* Code blocks. */
+  &:where(pre) {
+    background-color: var(--muted);
+    font-family: var(--typeset-font-mono);
+    font-size: 0.875em;
+    line-height: 1.5;
+    tab-size: 2;
+    direction: ltr;
+    border-radius: var(--bl-radius-lg);
+    padding: 0.75em 1em;
+    overflow-x: auto;
+    margin-block-start: calc(var(--typeset-flow) / 0.875);
+    margin-block-end: 0;
+  }
+  &:where(pre code) {
+    background-color: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    padding: 0;
+    border-radius: 0;
+  }
+
+  /* Blockquote. */
+  &:where(blockquote) {
+    border-inline-start: 2px solid var(--typeset-rule);
+    padding-inline-start: 1em;
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+    margin-inline: 0;
+  }
+
+  /* Dividers. */
+  &:where(hr) {
+    border: 0;
+    border-block-start: 1px solid var(--typeset-rule);
+    margin-block-start: calc(var(--typeset-flow) * 2.4);
+    margin-block-end: 0;
+  }
+  &:where(hr + h1, hr + h2, hr + h3, hr + h4) {
+    margin-block-start: var(--typeset-flow);
+  }
+
+  /* GFM footnotes. */
+  &:where(.footnotes, [data-footnotes]) {
+    margin-block-start: calc(var(--typeset-flow) * 2);
+    border-block-start: 1px solid var(--typeset-rule);
+    padding-block-start: var(--typeset-flow);
+    font-size: 0.875em;
+    color: var(--typeset-muted);
+  }
+
+  /* Math. */
+  &:where(math[display="block"]) {
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-block: 0.25em;
+  }
+
+  /* Media. */
+  &:where(img, video) {
+    border-radius: var(--bl-radius-lg);
+    max-width: 100%;
+    height: auto;
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+  }
+  &:where(p img) {
+    margin-block-start: 0;
+  }
+  &:where(figure) {
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+    margin-inline: 0;
+  }
+  &:where(figcaption) {
+    color: var(--typeset-muted);
+    font-size: 0.875em;
+    text-align: center;
+    margin-block-start: calc(0.75em / 0.875);
+  }
+
+  /* Tables: Baseline change (ADR-0028 §2, amended 2026-10-02, user decision; not upstream typeset). A table in prose
+     takes the Table component's look (registry/src/ui/table/table.tsx, upstream shadcn Table) on the same table/*
+     tokens, so a table reads the same wherever it appears: rules under the header and between body rows, the
+     footer filled, a row filled on hover, 40px header cells, 8px cells, no wrapping. Wide tables scroll inside a
+     .typeset-scroll wrapper (WordPress's core/table figure already scrolls). */
+  &:where(table) {
+    width: 100%;
+    caption-side: bottom;
+    font-size: var(--bl-table-font-size);
+    line-height: var(--bl-table-line-height);
+    border-collapse: collapse;
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+  }
+
+  /* Horizontal scroll for any wide block. Wrap it and the wrapper owns the
+     flow margin. */
+  &:where(.typeset-scroll) {
+    overflow-x: auto;
+    margin-block-start: var(--typeset-flow);
+  }
+  &:where(.typeset-scroll > *) {
+    margin-block-start: 0;
+  }
+  &:where(thead tr) {
+    border-block-end: var(--bl-table-border-width) solid var(--typeset-rule);
+  }
+  &:where(tbody tr) {
+    border-block-end: var(--bl-table-border-width) solid var(--typeset-rule);
+    transition: background-color 150ms;
+  }
+  &:where(tbody tr:last-child) {
+    border-block-end-width: 0;
+  }
+  &:where(tbody tr:hover) {
+    background-color: var(--bl-table-row-hover-background);
+  }
+  &:where(tfoot) {
+    border-block-start: var(--bl-table-border-width) solid var(--typeset-rule);
+    background-color: var(--bl-table-footer-background);
+    font-weight: var(--bl-table-head-font-weight);
+  }
+  &:where(thead th) {
+    height: var(--bl-table-head-height);
+    padding: 0 var(--bl-table-cell-padding-x);
+    color: var(--foreground);
+    font-weight: var(--bl-table-head-font-weight);
+    text-align: start;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+  &:where(:is(tbody, tfoot) :is(td, th)) {
+    padding: var(--bl-table-cell-padding-y) var(--bl-table-cell-padding-x);
+    text-align: start;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+  &:where(tbody th) {
+    font-weight: var(--bl-table-head-font-weight);
+  }
+  &:where(caption) {
+    margin-block-start: var(--bl-table-caption-gap);
+    color: var(--typeset-muted);
+    font-size: var(--bl-table-font-size);
+    line-height: var(--bl-table-line-height);
+  }
+  &:where(th[align="center"], td[align="center"]) {
+    text-align: center;
+  }
+  &:where(th[align="right"], td[align="right"]) {
+    text-align: end;
+  }
+
+  /* Blocks inside list items keep the list's tighter rhythm. */
+  &:where(li > blockquote, li > table, li > figure) {
+    margin-block-start: 0.5em;
+  }
+  &:where(li > pre) {
+    margin-block-start: calc(0.5em / 0.875);
+  }
+
+  @media print {
+    &:where(pre, table, blockquote, figure) {
+      break-inside: avoid;
+    }
+    &:where(h1, h2, h3, h4) {
+      break-after: avoid;
+    }
+  }
+
+  /* Forced colors strips the code background, so give it a border. */
+  @media (forced-colors: active) {
+    &:where(:not(pre) > code) {
+      border: 1px solid;
+    }
+  }
+}
+
+/* Baseline addition (ADR-0028 §2, amended 2026-10-01; not in upstream). A component embedded in flowing content opts
+   out of typeset (.not-typeset, or the data-slot every Baseline component root carries), and that also took away the
+   space above it, so an Alert or Card sat flush against the paragraph before it. A direct child of the typeset root
+   that is a component gets the flow gap above it, except as the first child; whatever follows it already has its own
+   flow margin. Same specificity as the rules above. */
+.typeset > :where(.not-typeset, [data-not-typeset], [data-slot]):where(:not(:first-child)) {
+  margin-block-start: var(--typeset-flow);
+}
+
+/* First child adds no space above. Last so it wins ties. */
+.typeset
+  > :where(:first-child):not(
+    :where(
+      .not-typeset,
+      [data-not-typeset],
+      .not-typeset *,
+      [data-not-typeset] *
+    )
+  ),
+.typeset
+  > :where(:first-child)
+  > :where(:first-child):not(
+    :where(
+      .not-typeset,
+      [data-not-typeset],
+      .not-typeset *,
+      [data-not-typeset] *
+    )
+  ),
+.typeset
+  :where(
+    li > :first-child,
+    blockquote > :first-child,
+    td > :first-child,
+    th > :first-child,
+    dd > :first-child,
+    figure > :first-child,
+    figure > picture > img
+  ):not(
+    :where(
+      .not-typeset,
+      [data-not-typeset],
+      .not-typeset *,
+      [data-not-typeset] *
+    )
+  ) {
+  margin-block-start: 0;
+}
+{% endstylesheet %}

package/templates/shopify/src/carousel.js

@@ -0,0 +1,94 @@
+/* Baseline Carousel without React (spec: components/carousel/spec.md): Embla on the markup React's Carousel renders
+   (data-slot carousel / carousel-content / carousel-previous / carousel-next / carousel-dots), for the HTML build,
+   WordPress (acf/carousel) and Shopify (the carousel snippet). One engine everywhere, as React's embla-carousel-react.
+   - options: the root's data-options (JSON, Embla's options, as React's `opts`), data-orientation (vertical -> axis y),
+     data-autoplay (ms between slides; Embla's autoplay plugin, paused while the pointer is over the carousel or focus is
+     in it, stopped by an interaction)
+   - Previous / Next scroll one snap and disable at the ends (unless the carousel loops); the dots container gets one
+     button per snap ("Go to slide n", the current one aria-current); ArrowLeft / ArrowRight inside the carousel move it
+   - carousels added later (Shopify's theme editor) start too: a MutationObserver watches for new roots
+   This file is the SOURCE: it imports Embla from npm, and a build bundles it (with a banner naming Embla's version):
+   the monorepo's scripts/gen-html.mjs to platforms/html/dist/carousel.js, and each theme's own `npm run build` from its
+   copy in src/ (written here by gen-html), so a scaffolded project updates Embla with npm install + npm run build. */
+import EmblaCarousel from "embla-carousel";
+import Autoplay from "embla-carousel-autoplay";
+
+const started = new WeakSet();
+
+function start(root) {
+  if (started.has(root)) return;
+  const viewport = root.querySelector("[data-slot=carousel-content]");
+  if (!viewport) return;
+  started.add(root);
+  let options = {};
+  try { options = JSON.parse(root.getAttribute("data-options") || "{}"); } catch { /* not JSON: Embla's defaults */ }
+  options.axis = root.getAttribute("data-orientation") === "vertical" ? "y" : "x";
+  // the track (the slides' parent) is the viewport's first child, or the element its data-track selector names (a
+  // WordPress ACF block wraps its inner blocks in div.acf-innerblocks-container)
+  const trackSelector = viewport.getAttribute("data-track");
+  const track = trackSelector && viewport.querySelector(trackSelector);
+  if (track) options.container = track;
+  const plugins = [];
+  const delay = Number(root.getAttribute("data-autoplay"));
+  if (delay > 0) plugins.push(Autoplay({ delay, stopOnMouseEnter: true, stopOnFocusIn: true, stopOnInteraction: true }));
+  const api = EmblaCarousel(viewport, options, plugins);
+
+  // a control is data-slot carousel-previous / -next, or carries data-carousel-previous / -next where its own component
+  // owns data-slot (Shopify's button snippet)
+  const prev = root.querySelector("[data-slot=carousel-previous], [data-carousel-previous]");
+  const next = root.querySelector("[data-slot=carousel-next], [data-carousel-next]");
+  const dotsBox = root.querySelector("[data-slot=carousel-dots]");
+  const dotClass = dotsBox && dotsBox.getAttribute("data-dot-class");
+  prev?.addEventListener("click", () => api.scrollPrev());
+  next?.addEventListener("click", () => api.scrollNext());
+
+  const buildDots = () => {
+    if (!dotsBox) return;
+    dotsBox.replaceChildren(...api.scrollSnapList().map((_, i) => {
+      const b = document.createElement("button");
+      b.type = "button";
+      b.setAttribute("data-slot", "carousel-dot");
+      b.setAttribute("aria-label", `Go to slide ${i + 1}`);
+      if (dotClass) b.className = dotClass;
+      b.addEventListener("click", () => api.scrollTo(i));
+      return b;
+    }));
+  };
+  const update = () => {
+    if (prev) prev.disabled = !api.canScrollPrev();
+    if (next) next.disabled = !api.canScrollNext();
+    if (dotsBox) [...dotsBox.children].forEach((d, i) => {
+      if (i === api.selectedScrollSnap()) d.setAttribute("aria-current", "true");
+      else d.removeAttribute("aria-current");
+    });
+  };
+  api.on("init", () => { buildDots(); update(); });
+  api.on("reInit", () => { buildDots(); update(); });
+  api.on("select", update);
+  buildDots();
+  update();
+
+  root.addEventListener("keydown", (e) => {
+    if (e.key === "ArrowLeft") { e.preventDefault(); api.scrollPrev(); }
+    else if (e.key === "ArrowRight") { e.preventDefault(); api.scrollNext(); }
+  }, true);
+}
+
+function startAll(scope) {
+  scope.querySelectorAll?.("[data-slot=carousel]").forEach(start);
+}
+
+if (!window.baselineCarousel) {
+  window.baselineCarousel = true;
+  const go = () => {
+    startAll(document);
+    new MutationObserver((records) => {
+      for (const r of records) for (const n of r.addedNodes) if (n instanceof Element) {
+        if (n.matches("[data-slot=carousel]")) start(n);
+        startAll(n);
+      }
+    }).observe(document.documentElement, { childList: true, subtree: true });
+  };
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+  else go();
+}