@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/snippets/sheet.liquid

@@ -0,0 +1,197 @@
+{% doc %}
+  Baseline Sheet as a snippet (spec: components/sheet/spec.md): a Button that opens a native <dialog closedby="any"> drawn
+  as a panel against one edge of the screen, through command="show-modal" commandfor (no JavaScript). The Dialog's
+  machinery: focus moves in and returns, the page is inert and does not scroll, Escape closes it. Colours come from the
+  enclosing scheme (.color-<id>).
+
+  @param {string} id - unique id for the sheet (the trigger's commandfor)
+  @param {string} [trigger] - the trigger button's label; blank renders no trigger, for a sheet opened another way
+  @param {string} [trigger_variant] - Button variant for the trigger (default outline)
+  @param {string} [trigger_size] - Button size for the trigger (default md)
+  @param {string} [trigger_icon] - a system icon for the trigger; with `trigger_icon_only` the label becomes its aria-label
+  @param {boolean} [trigger_icon_only] - an icon-only trigger (a menu or cart button)
+  @param {string} [side] - right (default) | left | top | bottom
+  @param {string} [title] - the sheet title (its accessible name)
+  @param {string} [description] - muted text under the title
+  @param {string} [content] - the body; HTML is allowed (it has no padding of its own, as upstream)
+  @param {string} [footer] - ready markup for the footer, e.g. captured button snippets
+  @param {string} [close_label] - adds an outline button to the footer that closes the sheet (<form method="dialog">)
+  @param {boolean} [hide_close] - leave out the corner close button
+  @param {string} [blocks] - theme blocks placed into the sheet (blocks/sheet.liquid)
+  @param {string} [attrs] - extra attributes on the wrapper (block.shopify_attributes)
+  @param {string} [class] - extra classes on the panel (the <dialog>), e.g. bl-sidebar-sheet for a sidebar menu
+
+  @example
+  {%- capture filters -%}{% render 'facets', results: collection %}{%- endcapture -%}
+  {% render 'sheet', id: 'filters', trigger: 'Filters', side: 'left', title: 'Filters', content: filters, close_label: 'Apply' %}
+{% enddoc %}
+
+{%- liquid
+  assign sheet_id = id | default: 'sheet' | handleize
+  assign s = side | default: 'right'
+  case s
+    when 'left', 'right', 'top', 'bottom'
+    else
+      assign s = 'right'
+  endcase
+  assign trigger_attrs = 'command="show-modal" commandfor="' | append: sheet_id | append: '"'
+  assign close_attrs = 'command="close" commandfor="' | append: sheet_id | append: '"'
+  assign t_variant = trigger_variant | default: 'outline'
+  assign t_size = trigger_size | default: 'md'
+-%}
+<div class="bl-sheet" {{ attrs }}>
+  {%- if trigger != blank -%}
+    {%- render 'button', label: trigger, variant: t_variant, size: t_size, icon: trigger_icon, icon_only: trigger_icon_only, attrs: trigger_attrs -%}
+  {%- endif -%}
+  <dialog
+    id="{{ sheet_id }}"
+    class="bl-sheet__content bl-sheet__content--{{ s }}{% if class != blank %} {{ class }}{% endif %}"
+    data-slot="sheet-content"
+    data-side="{{ s }}"
+    closedby="any"
+    {% if title != blank %}aria-labelledby="{{ sheet_id }}-title"{% endif %}
+    {% if description != blank %}aria-describedby="{{ sheet_id }}-description"{% endif %}
+  >
+    {%- if title != blank or description != blank -%}
+      <div class="bl-sheet__header" data-slot="sheet-header">
+        {%- if title != blank -%}
+          <h2 id="{{ sheet_id }}-title" class="bl-sheet__title" data-slot="sheet-title">{{ title | escape }}</h2>
+        {%- endif -%}
+        {%- if description != blank -%}
+          <p id="{{ sheet_id }}-description" class="bl-sheet__description" data-slot="sheet-description">{{ description }}</p>
+        {%- endif -%}
+      </div>
+    {%- endif -%}
+    {%- if content != blank -%}
+      <div class="bl-sheet__body">{{ content }}</div>
+    {%- endif -%}
+    {{- blocks -}}
+    {%- if footer != blank or close_label != blank -%}
+      <div class="bl-sheet__footer" data-slot="sheet-footer">
+        {{- footer -}}
+        {%- if close_label != blank -%}
+          <form method="dialog" class="bl-sheet__form">
+            {%- render 'button', label: close_label, variant: 'outline', type: 'submit' -%}
+          </form>
+        {%- endif -%}
+      </div>
+    {%- endif -%}
+    {%- unless hide_close -%}
+      {%- render 'button', label: 'Close', variant: 'ghost', size: 'sm', icon: 'close', icon_only: true, class: 'bl-sheet__close', attrs: close_attrs -%}
+    {%- endunless -%}
+  </dialog>
+</div>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/sheet/sheet.tsx. Colours from the scheme; geometry from the sheet/* tokens; the backdrop is the
+     color/overlay role. Shadow is Tailwind's shadow-lg, written out (Baseline has no shadow scale). */
+  :root:has(dialog[open]:modal) {
+    overflow: hidden;
+  }
+  .bl-sheet__content {
+    position: fixed;
+    margin: 0;
+    max-width: none;
+    max-height: none;
+    padding: 0;
+    flex-direction: column;
+    gap: var(--bl-sheet-gap);
+    border: 0 solid var(--border);
+    background-color: var(--popover);
+    background-clip: padding-box;
+    color: var(--popover-foreground);
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    outline: none;
+    opacity: 0;
+    transition: opacity 200ms ease-in-out, translate 200ms ease-in-out, display 200ms allow-discrete, overlay 200ms allow-discrete;
+  }
+  .bl-sheet__content[open] {
+    display: flex;
+    opacity: 1;
+    translate: 0 0;
+  }
+  .bl-sheet__content--right,
+  .bl-sheet__content--left {
+    inset-block: 0;
+    height: 100%;
+    width: 75%;
+  }
+  @media (min-width: 40rem) {
+    .bl-sheet__content--right,
+    .bl-sheet__content--left {
+      max-width: var(--bl-sheet-max-width);
+    }
+  }
+  .bl-sheet__content--right { inset-inline: auto 0; border-left-width: var(--bl-sheet-border-width); translate: 2.5rem 0; }
+  .bl-sheet__content--left { inset-inline: 0 auto; border-right-width: var(--bl-sheet-border-width); translate: -2.5rem 0; }
+  .bl-sheet__content--top,
+  .bl-sheet__content--bottom {
+    inset-inline: 0;
+    width: 100%;
+    height: auto;
+  }
+  .bl-sheet__content--top { inset-block: 0 auto; border-bottom-width: var(--bl-sheet-border-width); translate: 0 -2.5rem; }
+  .bl-sheet__content--bottom { inset-block: auto 0; border-top-width: var(--bl-sheet-border-width); translate: 0 2.5rem; }
+  @starting-style {
+    .bl-sheet__content[open] { opacity: 0; }
+    .bl-sheet__content--right[open] { translate: 2.5rem 0; }
+    .bl-sheet__content--left[open] { translate: -2.5rem 0; }
+    .bl-sheet__content--top[open] { translate: 0 -2.5rem; }
+    .bl-sheet__content--bottom[open] { translate: 0 2.5rem; }
+  }
+  .bl-sheet__content::backdrop {
+    background-color: var(--overlay);
+    opacity: 0;
+    transition: opacity 150ms, display 150ms allow-discrete, overlay 150ms allow-discrete;
+  }
+  @supports (backdrop-filter: blur(4px)) {
+    .bl-sheet__content::backdrop { backdrop-filter: blur(4px); }
+  }
+  .bl-sheet__content[open]::backdrop { opacity: 1; }
+  @starting-style {
+    .bl-sheet__content[open]::backdrop { opacity: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .bl-sheet__content,
+    .bl-sheet__content::backdrop { transition: none; }
+  }
+  .bl-sheet__content > * { margin: 0; }
+  .bl-sheet__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bl-sheet-header-gap);
+    padding: var(--bl-sheet-padding);
+  }
+  .bl-sheet__title {
+    margin: 0;
+    color: var(--foreground);
+    font-family: var(--font-heading, inherit);
+    font-size: var(--bl-sheet-title-font-size);
+    font-weight: var(--bl-sheet-title-font-weight);
+    line-height: var(--bl-sheet-title-line-height);
+  }
+  .bl-sheet__description {
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: var(--bl-sheet-description-font-size);
+    line-height: var(--bl-sheet-description-line-height);
+  }
+  /* Upstream's body has no padding (the React consumer adds it). Here the body is a merchant's content or theme blocks,
+     so everything between the header and the footer is padded inline to line up with them. */
+  .bl-sheet__content > :not(.bl-sheet__header, .bl-sheet__footer, .bl-sheet__close, form) { padding-inline: var(--bl-sheet-padding); }
+  .bl-sheet__footer {
+    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--bl-sheet-footer-gap);
+    padding: var(--bl-sheet-padding);
+  }
+  .bl-sheet__form { display: contents; }
+  .bl-sheet__close {
+    position: absolute;
+    inset-block-start: var(--bl-sheet-close-inset);
+    right: var(--bl-sheet-close-inset);
+  }
+{% endstylesheet %}

package/templates/shopify/snippets/sidebar-menu-item.liquid

@@ -0,0 +1,34 @@
+{% doc %}
+  One entry of the Baseline sidebar menu (spec: components/sidebar/spec.md): React's SidebarMenuItem with a
+  SidebarMenuButton link, or, with children, a native <details> whose summary is the menu button and whose content is a
+  SidebarMenuSub of links (upstream's collapsible menu pattern; the chevron turns while open). Render entries into a
+  capture and pass it to `sidebar-menu` as its items.
+
+  @param {string} title - the entry's text
+  @param {string} [url] - its link (an entry without children)
+  @param {boolean} [current] - the current page: aria-current="page", the accent fill and medium weight
+  @param {string} [children] - sub links, captured from sidebar-menu-sub-link renders; the entry becomes collapsible
+  @param {boolean} [open] - a collapsible entry starts open (e.g. it holds the current page)
+  @param {string} [icon] - a Baseline system icon before the title (snippets/icon.liquid)
+
+  @example
+  {% render 'sidebar-menu-item', title: 'Contact', url: '/pages/contact' %}
+{% enddoc %}
+
+<li class="bl-sidebar-menu__item" data-slot="sidebar-menu-item">
+  {%- if children != blank -%}
+    <details class="bl-sidebar-menu__collapsible"{% if open %} open{% endif %}>
+      <summary class="bl-sidebar-menu__button" data-slot="sidebar-menu-button">
+        {%- if icon != blank -%}{%- render 'icon', name: icon, class: 'bl-sidebar-menu__icon' -%}{%- endif -%}
+        <span class="bl-sidebar-menu__label">{{ title | escape }}</span>
+        {%- render 'icon', name: 'chevron-right', class: 'bl-sidebar-menu__chevron' -%}
+      </summary>
+      <ul class="bl-sidebar-menu__sub" data-slot="sidebar-menu-sub">{{ children }}</ul>
+    </details>
+  {%- else -%}
+    <a class="bl-sidebar-menu__button" data-slot="sidebar-menu-button" href="{{ url }}"{% if current %} aria-current="page" data-active{% endif %}>
+      {%- if icon != blank -%}{%- render 'icon', name: icon, class: 'bl-sidebar-menu__icon' -%}{%- endif -%}
+      <span class="bl-sidebar-menu__label">{{ title | escape }}</span>
+    </a>
+  {%- endif -%}
+</li>

package/templates/shopify/snippets/sidebar-menu-sub-link.liquid

@@ -0,0 +1,17 @@
+{% doc %}
+  One link of a sidebar menu's sub-menu (spec: components/sidebar/spec.md): React's SidebarMenuSubItem with a
+  SidebarMenuSubButton. Render into a capture and pass it to `sidebar-menu-item` as its children.
+
+  @param {string} title - the link text
+  @param {string} url - where it goes
+  @param {boolean} [current] - the current page: aria-current="page" and the accent fill
+
+  @example
+  {% render 'sidebar-menu-sub-link', title: 'New arrivals', url: '/collections/new' %}
+{% enddoc %}
+
+<li class="bl-sidebar-menu__sub-item" data-slot="sidebar-menu-sub-item">
+  <a class="bl-sidebar-menu__sub-button" data-slot="sidebar-menu-sub-button" href="{{ url }}"{% if current %} aria-current="page" data-active{% endif %}>
+    <span class="bl-sidebar-menu__label">{{ title | escape }}</span>
+  </a>
+</li>

package/templates/shopify/snippets/sidebar-menu.liquid

@@ -0,0 +1,139 @@
+{% doc %}
+  The Baseline Sidebar's menu as a snippet (spec: components/sidebar/spec.md; user 2026-10-06: the menu parts as the
+  mobile menu): React's SidebarMenu of SidebarMenuButton links, an entry with child links a collapsible <details> with a
+  SidebarMenuSub. The header renders its menu with it in a Sheet below md (the sheet's class: 'bl-sidebar-sheet'). No JavaScript.
+
+  Either a Shopify menu (two levels: its links, their child links as each sub-menu; the branch holding the current page
+  starts open) or entries composed by hand.
+
+  @param {object} [menu] - a link_list (section.settings.menu): renders its entries
+  @param {string} [items] - or the entries, captured from sidebar-menu-item snippets
+  @param {string} [class] - extra classes
+
+  @example
+  {% render 'sidebar-menu', menu: section.settings.menu %}
+{% enddoc %}
+
+<ul class="bl-sidebar-menu{% if class != blank %} {{ class }}{% endif %}" data-slot="sidebar-menu">
+  {%- if menu != blank -%}
+    {%- for link in menu.links -%}
+      {%- capture children -%}
+        {%- for child in link.links -%}
+          {% render 'sidebar-menu-sub-link', title: child.title, url: child.url, current: child.current %}
+        {%- endfor -%}
+      {%- endcapture -%}
+      {% render 'sidebar-menu-item', title: link.title, url: link.url, current: link.current, children: children, open: link.child_current %}
+    {%- endfor -%}
+  {%- else -%}
+    {{- items -}}
+  {%- endif -%}
+</ul>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/sidebar/sidebar.tsx's menu parts. Geometry from the sidebar/* tokens, colours the sidebar
+     roles. Alignment and icon sizes are set outright: the theme header's `header a` / `header svg` rules reach a menu
+     rendered inside it (the header's mobile Sheet). */
+  .bl-sidebar-menu,
+  .bl-sidebar-menu__sub {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .bl-sidebar-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    width: 100%;
+    min-width: 0;
+    padding: var(--bl-sidebar-padding);
+    color: var(--sidebar-foreground);
+  }
+  .bl-sidebar-menu__item { position: relative; }
+
+  /* a Sheet holding the menu (its class: 'bl-sidebar-sheet') takes the sidebar's fill, as sidebar.tsx's mobile
+     SheetContent; it keeps the Sheet's width (75%, sheet/max-width from 40rem; user 2026-10-07), as WordPress's mobile
+     menu does. The menu brings its own sidebar/padding, so the Sheet adds no gap under its header and no inline padding
+     to its body: the buttons sit 8px in, the first below the title where WordPress's sits below its close button. */
+  .bl-sheet__content.bl-sidebar-sheet {
+    gap: 0;
+    background-color: var(--sidebar);
+    color: var(--sidebar-foreground);
+  }
+  .bl-sheet__content.bl-sidebar-sheet > .bl-sheet__body { padding-inline: 0; }
+
+  /* a menu button: a link, or a collapsible entry's summary */
+  .bl-sidebar-menu__button {
+    display: flex;
+    width: 100%;
+    height: var(--bl-sidebar-menu-button-md-height);
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--bl-sidebar-menu-button-gap);
+    padding: var(--bl-sidebar-menu-button-padding);
+    overflow: hidden;
+    border-radius: var(--bl-sidebar-menu-button-radius);
+    color: inherit;
+    font-size: var(--bl-sidebar-menu-button-md-font-size);
+    line-height: var(--bl-sidebar-menu-button-md-line-height);
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
+    list-style: none;
+    transition: background-color 150ms;
+  }
+  .bl-sidebar-menu__button::-webkit-details-marker { display: none; }
+  .bl-sidebar-menu__button:is(:hover, :focus-visible),
+  .bl-sidebar-menu__sub-button:is(:hover, :focus-visible) {
+    background-color: var(--sidebar-accent);
+    color: var(--sidebar-accent-foreground);
+  }
+  .bl-sidebar-menu__button:focus-visible,
+  .bl-sidebar-menu__sub-button:focus-visible { box-shadow: 0 0 0 var(--bl-control-ring-width) var(--sidebar-ring); }
+  .bl-sidebar-menu__button[aria-current='page'] {
+    background-color: var(--sidebar-accent);
+    color: var(--sidebar-accent-foreground);
+    font-weight: var(--bl-sidebar-menu-button-font-weight-active);
+  }
+  .bl-sidebar-menu__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .bl-sidebar-menu__icon,
+  .bl-sidebar-menu__chevron {
+    flex: none;
+    width: var(--bl-sidebar-menu-button-icon-size);
+    height: var(--bl-sidebar-menu-button-icon-size);
+  }
+  .bl-sidebar-menu__chevron { margin-inline-start: auto; transition: rotate 200ms; }
+  .bl-sidebar-menu__collapsible[open] > summary .bl-sidebar-menu__chevron { rotate: 90deg; }
+  [dir='rtl'] .bl-sidebar-menu__chevron { scale: -1 1; }
+
+  /* a sub-menu: a start rule, indented */
+  .bl-sidebar-menu__sub {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bl-sidebar-menu-sub-gap);
+    min-width: 0;
+    margin: 0 var(--bl-sidebar-menu-sub-margin-x);
+    padding: var(--bl-sidebar-menu-sub-padding-y) var(--bl-sidebar-menu-sub-padding-x);
+    border-inline-start: var(--bl-sidebar-border-width) solid var(--sidebar-border);
+  }
+  .bl-sidebar-menu__sub-button {
+    display: flex;
+    height: var(--bl-sidebar-menu-sub-button-height);
+    min-width: 0;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--bl-sidebar-menu-button-gap);
+    padding: 0 var(--bl-sidebar-menu-sub-button-padding-x);
+    border-radius: var(--bl-sidebar-menu-button-radius);
+    color: var(--sidebar-foreground);
+    font-size: var(--bl-sidebar-menu-button-md-font-size);
+    line-height: var(--bl-sidebar-menu-button-md-line-height);
+    text-decoration: none;
+    outline: none;
+    transition: background-color 150ms;
+  }
+  .bl-sidebar-menu__sub-button[aria-current='page'] {
+    background-color: var(--sidebar-accent);
+    color: var(--sidebar-accent-foreground);
+  }
+{% endstylesheet %}

package/templates/shopify/snippets/spinner.liquid

@@ -0,0 +1,42 @@
+{% doc %}
+  Baseline Spinner as a snippet (spec: components/spinner/spec.md). An indeterminate loading indicator; for progress
+  whose amount is known, use Progress.
+
+  The glyph is the system icon `loader` from snippets/icon.liquid, which tokens/icons.mjs generates for the ACTIVE
+  icon set, so it matches Figma's Icon Placeholder. Colour is currentColor; size is spinner/size (16px) standalone
+  and the button's icon size inside a button.
+
+  @param {boolean} [hidden] - aria-hidden, for a spinner whose container already says it is busy (a loading button)
+  @param {string} [label] - accessible name when not hidden (default 'Loading')
+  @param {string} [class] - extra classes
+
+  @example
+  {% render 'spinner' %}
+{% enddoc %}
+
+{%- liquid
+  assign classes = 'bl-spinner'
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+<span class="{{ classes }}" data-slot="spinner"{% if hidden %} aria-hidden="true"{% else %} role="status" aria-label="{{ label | default: 'Loading' | escape }}"{% endif %}>
+  {%- render 'icon', name: 'loader' -%}
+</span>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/spinner/spinner.tsx: the icon set's loader glyph turning once a second. */
+  .bl-spinner {
+    display: inline-flex;
+    flex-shrink: 0;
+    width: var(--bl-spinner-size);
+    height: var(--bl-spinner-size);
+    animation: bl-spin 1s linear infinite;
+  }
+  .bl-spinner svg { width: 100%; height: 100%; }
+  /* Reduced motion slows the turn rather than stopping it: a frozen spinner reads as "stuck". */
+  @media (prefers-reduced-motion: reduce) {
+    .bl-spinner { animation-duration: 3s; }
+  }
+  @keyframes bl-spin { to { transform: rotate(360deg); } }
+{% endstylesheet %}

package/templates/shopify/snippets/switch.liquid

@@ -0,0 +1,180 @@
+{% doc %}
+  Baseline Switch as a snippet (spec: components/switch/spec.md). Owns its track and its thumb and nothing
+  else: no label, no description, no error. Render a <label for> beside it — a switch without a label is a bug,
+  and the label must say what turning it ON does, never "toggle".
+
+  A switch applies its change immediately. If the setting needs a Save button beside it, use a checkbox.
+
+  @param {string} [name] - form field name
+  @param {string} [id] - id, so a <label for> can point at it
+  @param {string} [value] - submitted value when on
+  @param {string} [size] - 'md' (default) or 'sm'
+  @param {boolean} [checked] - checked attribute
+  @param {boolean} [required] - required attribute
+  @param {boolean} [disabled] - disabled attribute
+  @param {boolean} [invalid] - renders aria-invalid: destructive border and ring
+  @param {string} [attrs] - extra attributes, e.g. block.shopify_attributes
+  @param {string} [class] - extra classes on the wrapper
+
+  @example
+  {% render 'switch', name: 'marketing', id: 'marketing', checked: true %}
+  <label for="marketing">Email me about new products</label>
+{% enddoc %}
+
+{%- liquid
+  assign sw_size = size | default: 'md'
+  unless sw_size == 'sm'
+    assign sw_size = 'md'
+  endunless
+  assign classes = 'bl-switch bl-switch--' | append: sw_size
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+{%- comment -%}
+  A replaced element cannot have children, so the thumb cannot live inside the input: it is a sibling, laid
+  over the track and never taking the click. Same three-element shape as the React component.
+
+  role="switch" is what makes a screen reader say on/off instead of checked/unchecked.
+{%- endcomment -%}
+<span class="{{ classes }}" data-slot="switch" data-size="{{ sw_size }}">
+  <input
+    type="checkbox"
+    role="switch"
+    class="bl-switch__control"
+    data-slot="switch-control"
+    {%- if name != blank %} name="{{ name }}"{% endif -%}
+    {%- if id != blank %} id="{{ id }}"{% endif -%}
+    {%- if value != blank %} value="{{ value | escape }}"{% endif -%}
+    {%- if checked %} checked{% endif -%}
+    {%- if required %} required{% endif -%}
+    {%- if disabled %} disabled{% endif -%}
+    {%- if invalid %} aria-invalid="true"{% endif -%}
+    {{ attrs }}
+  >
+  <span class="bl-switch__thumb" data-slot="switch-thumb" aria-hidden="true"></span>
+</span>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/switch/switch.tsx. Colours come from the scheme class (--input, --primary,
+     --background, --ring ...); geometry from the switch/* component tokens in baseline-tokens.liquid
+     (ADR-0017). The track height is derived, not bound: it hugs its thumb with switch/padding on each side,
+     so binding a height would let the two disagree (spec: Sizes). */
+  .bl-switch {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    vertical-align: middle;
+  }
+
+  .bl-switch--md {
+    width: var(--bl-switch-md-width);
+    height: calc(var(--bl-switch-md-thumb-size) + 2 * var(--bl-switch-padding));
+  }
+
+  .bl-switch--sm {
+    width: var(--bl-switch-sm-width);
+    height: calc(var(--bl-switch-sm-thumb-size) + 2 * var(--bl-switch-padding));
+  }
+
+  /* the whole control fades together, thumb included */
+  .bl-switch:has(.bl-switch__control:disabled) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .bl-switch__control {
+    appearance: none;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    /* A real colour in every state, not transparent: Figma binds color/input unchecked and color/primary
+       checked, on all twelve variants. */
+    border: var(--bl-switch-border-width) solid var(--input);
+    border-radius: var(--bl-switch-radius);
+    background-color: var(--input);
+    outline: none;
+    transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+  }
+
+  .bl-switch__control:checked {
+    border-color: var(--primary);
+    background-color: var(--primary);
+  }
+
+  .bl-switch__control:focus-visible {
+    box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+  }
+
+  /* invalid is a destructive border plus the ring, the same contract every other control uses. It showed
+     only the ring until 2026-09-29, when switch/border-width moved from 0 to 1px. */
+  .bl-switch__control[aria-invalid='true'] {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring-invalid);
+  }
+
+  /* invalid does not override checked: a switched-on control still has to read as on, so the primary border
+     wins and only the ring carries the error. Figma draws exactly this. */
+  .bl-switch__control[aria-invalid='true']:checked {
+    border-color: var(--primary);
+  }
+
+  .bl-switch__control:disabled {
+    cursor: not-allowed;
+  }
+
+  /* The thumb. Travel is the track minus its padding minus the thumb, so it lands exactly switch/padding from
+     the far end. Scoped under .bl-switch for the reason checkbox.liquid records — an unscoped single-class
+     selector ties with anything else of the same weight and loses on source order. */
+  .bl-switch .bl-switch__thumb {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: var(--bl-switch-padding);
+    /* The thumb is color/primary-foreground, not color/background. Baseline has no light/dark: Scheme 2 IS the
+       dark scheme, and its --background is #020618, so bg-background drew a near-black thumb on an indigo track.
+       A hardcoded white would be wrong in the other direction -- Warning's --primary is #ffb900 and its
+       --primary-foreground is #461901, because white on amber is unreadable. primary-foreground is *defined* as
+       the colour that reads on primary, so it is correct in all five schemes by construction, and it is what
+       Radio's dot already uses. Unchecked the track is --input, where it also reads. (Rebound in Figma on the 12
+       Switch variants, 2026-09-29.) */
+    background-color: var(--primary-foreground);
+    translate: 0 -50%;
+    transition: translate 150ms;
+    pointer-events: none;
+  }
+
+  .bl-switch--md .bl-switch__thumb {
+    width: var(--bl-switch-md-thumb-size);
+    height: var(--bl-switch-md-thumb-size);
+    border-radius: var(--bl-switch-md-thumb-radius);
+  }
+
+  .bl-switch--sm .bl-switch__thumb {
+    width: var(--bl-switch-sm-thumb-size);
+    height: var(--bl-switch-sm-thumb-size);
+    border-radius: var(--bl-switch-sm-thumb-radius);
+  }
+
+  .bl-switch--md .bl-switch__control:checked ~ .bl-switch__thumb {
+    translate: calc(
+        var(--bl-switch-md-width) - 2 * var(--bl-switch-padding) - var(--bl-switch-md-thumb-size)
+      )
+      -50%;
+  }
+
+  .bl-switch--sm .bl-switch__control:checked ~ .bl-switch__thumb {
+    translate: calc(
+        var(--bl-switch-sm-width) - 2 * var(--bl-switch-padding) - var(--bl-switch-sm-thumb-size)
+      )
+      -50%;
+  }
+
+  /* A 20px-tall track fails WCAG 2.5.8 on touch. Grown with a pseudo-element rather than padding, which would
+     move the track. A <label for> is the bigger target in practice; this is the floor. */
+  .bl-switch__control::after {
+    content: '';
+    position: absolute;
+    inset: -8px -12px;
+  }
+{% endstylesheet %}