@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/snippets/media.liquid

@@ -0,0 +1,273 @@
+{% doc %}
+  Baseline Media as a snippet (spec: components/media/spec.md). An image, or a video shown as an image until someone
+  presses play: before the click no <video> or <iframe> exists, so no video bytes load. The player waits in an inert
+  <template>; the script below swaps it in and focuses it. Without JavaScript the play button is a link to the video.
+
+  Video sources, in order of precedence:
+    video      a Shopify video: product media (media_type 'video' or 'external_video') or a `video` setting
+    video_url  a YouTube or Vimeo URL (a `video_url` setting), or a direct video file URL
+
+  @param {image} [image] - the picture; for a Shopify video it defaults to the video's preview image
+  @param {string} [alt] - alt text; empty for a decorative picture (a video's title names the play button instead)
+  @param {object} [video] - Shopify video or external_video media, or a video setting
+  @param {string} [video_url] - YouTube / Vimeo URL or a video file URL
+  @param {string} [title] - the video's title, for the play button ("Play video: <title>") and the iframe
+  @param {number} [ratio] - width / height, e.g. 1.7778; left out, the frame takes the image's own ratio
+  @param {string} [caption] - text under the frame
+  @param {string} [playback] - inline (default): the player replaces the poster; dialog: it plays in a Baseline Dialog
+    (the dialog snippet), titled with the video's title, and is removed when the dialog closes
+  @param {string} [id] - the dialog's id in dialog playback; defaults to one derived from the video, so pass it when the
+    same video appears twice on a page
+  @param {string} [class] - extra classes
+  @param {string} [attrs] - extra attributes on the root (block.shopify_attributes)
+
+  @example
+  {% render 'media', image: section.settings.image, caption: section.settings.caption %}
+  {% render 'media', video: product.media[1], ratio: 1.7778 %}
+{% enddoc %}
+
+{%- liquid
+  assign poster = image
+  if poster == blank and video != blank
+    assign poster = video.preview_image
+  endif
+  assign frame_ratio = ratio
+  if frame_ratio == blank and poster != blank
+    assign frame_ratio = poster.aspect_ratio
+  endif
+
+  assign kind = ''
+  assign watch = ''
+  assign embed_id = ''
+  if video != blank
+    if video.media_type == 'external_video'
+      assign kind = video.host
+      assign embed_id = video.external_id
+    else
+      assign kind = 'shopify'
+      assign watch = video.sources | where: 'format', 'mp4' | map: 'url' | first
+    endif
+  elsif video_url != blank
+    if video_url.type == 'youtube' or video_url.type == 'vimeo'
+      assign kind = video_url.type
+      assign embed_id = video_url.id
+    elsif video_url contains 'youtu'
+      assign kind = 'youtube'
+      assign embed_id = video_url | split: 'v=' | last | split: '&' | first | split: 'youtu.be/' | last | split: '?' | first
+    elsif video_url contains 'vimeo.com'
+      assign kind = 'vimeo'
+      assign embed_id = video_url | split: 'vimeo.com/' | last | split: '/' | last | split: '?' | first
+    else
+      assign kind = 'file'
+      assign watch = video_url
+    endif
+  endif
+  case kind
+    when 'youtube'
+      assign watch = 'https://www.youtube.com/watch?v=' | append: embed_id
+    when 'vimeo'
+      assign watch = 'https://vimeo.com/' | append: embed_id
+  endcase
+
+  assign video_title = title
+  if video_title == blank and video != blank
+    assign video_title = video.alt
+  endif
+  if video_title == blank
+    assign video_title = 'Video'
+  endif
+  assign play_label = 'Play video: ' | append: video_title
+  assign in_dialog = false
+  if playback == 'dialog' and kind != ''
+    assign in_dialog = true
+    assign dialog_id = id | default: ''
+    if dialog_id == ''
+      assign dialog_id = watch | append: embed_id | md5 | slice: 0, 10 | prepend: 'media-dialog-'
+    endif
+    assign play_attrs = 'data-bl-media-play data-bl-media-dialog="' | append: dialog_id | append: '" aria-haspopup="dialog"'
+  else
+    assign play_attrs = 'data-bl-media-play'
+  endif
+
+  assign classes = 'bl-media'
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+<figure class="{{ classes }}" data-slot="media" {{ attrs }}>
+  <div
+    class="bl-media__frame{% if frame_ratio == blank %} bl-media__frame--natural{% endif %}"
+    data-slot="media-frame"
+    {% if frame_ratio != blank %}
+      style="--ratio: {{ frame_ratio }}"
+    {% endif %}
+  >
+    {%- if poster != blank -%}
+      {{- poster | image_url: width: 1600 | image_tag: alt: alt, class: 'bl-media__image', loading: 'lazy', widths: '400, 800, 1200, 1600', sizes: '(min-width: 750px) 50vw, 100vw' -}}
+    {%- else -%}
+      {{- 'image' | placeholder_svg_tag: 'bl-media__image bl-media__image--placeholder' -}}
+    {%- endif -%}
+    {%- if kind != '' -%}
+      <div class="bl-media__play" data-slot="media-play">
+        <div class="bl-media__play-inset">
+          {% render 'button',
+            label: play_label,
+            href: watch,
+            variant: 'secondary',
+            size: 'lg',
+            icon: 'play',
+            icon_only: true,
+            class: 'bl-media__play-button',
+            attrs: play_attrs
+          %}
+        </div>
+      </div>
+      <template data-bl-media-player>
+        {%- case kind -%}
+          {%- when 'shopify' -%}
+            {{- video | video_tag: autoplay: true, controls: true, playsinline: true, image_size: '1600x', class: 'bl-media__player' -}}
+          {%- when 'youtube' -%}
+            <iframe class="bl-media__player" data-slot="media-player" src="https://www.youtube-nocookie.com/embed/{{ embed_id }}?autoplay=1" title="{{ video_title | escape }}" allow="autoplay; encrypted-media; fullscreen; picture-in-picture" allowfullscreen></iframe>
+          {%- when 'vimeo' -%}
+            <iframe class="bl-media__player" data-slot="media-player" src="https://player.vimeo.com/video/{{ embed_id }}?autoplay=1" title="{{ video_title | escape }}" allow="autoplay; encrypted-media; fullscreen; picture-in-picture" allowfullscreen></iframe>
+          {%- else -%}
+            <video class="bl-media__player" data-slot="media-player" src="{{ watch }}" controls autoplay playsinline></video>
+        {%- endcase -%}
+      </template>
+    {%- endif -%}
+  </div>
+  {%- if in_dialog -%}
+    {%- comment -%} the lightbox: the video alone on the backdrop, the close in the viewport's corner; named by the title {%- endcomment -%}
+    {%- assign media_close_attrs = 'command="close" commandfor="' | append: dialog_id | append: '"' -%}
+    <dialog id="{{ dialog_id }}" class="bl-media__dialog" data-slot="media-dialog" closedby="any" aria-label="{{ video_title | escape }}">
+      {%- render 'button', label: 'Close', variant: 'secondary', size: 'md', icon: 'close', icon_only: true, class: 'bl-media__dialog-close', attrs: media_close_attrs -%}
+      <div class="bl-media__dialog-frame" data-slot="media-dialog-frame" style="--ratio: {{ frame_ratio | default: 1.7778 }}"></div>
+    </dialog>
+  {%- endif -%}
+  {%- if caption != blank -%}
+    <figcaption class="bl-media__caption" data-slot="media-caption">{{ caption }}</figcaption>
+  {%- endif -%}
+</figure>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/media/media.tsx. Geometry from the media/* tokens. The frame has no radius of its own:
+     inside a Card it takes the card's corners (card.liquid clips them). */
+  .bl-media {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bl-media-caption-gap);
+    margin: 0;
+  }
+  .bl-media__frame {
+    position: relative;
+    aspect-ratio: var(--ratio);
+    overflow: hidden;
+    background-color: var(--muted);
+  }
+  .bl-media__frame > .bl-media__image,
+  .bl-media__frame > .bl-media__player {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    border: 0;
+  }
+  .bl-media__frame > .bl-media__image { object-fit: cover; }
+  .bl-media__frame > video.bl-media__player,
+  .bl-media__frame > .bl-media__player video { object-fit: contain; width: 100%; height: 100%; }
+  /* no ratio and no image ratio: the image sets the height */
+  .bl-media__frame--natural > .bl-media__image {
+    position: static;
+    display: block;
+    height: auto;
+  }
+  .bl-media__play {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  /* the inset widens the clickable area round the button. The button is the button snippet (secondary) on its own
+     media/play-button/* box, icon and radius (user, 2026-10-02), not a Button size; three classes to win over the
+     button stylesheet whatever order Shopify bundles them in */
+  .bl-media__play-inset { padding: var(--bl-media-play-button-inset); }
+  .bl-media__play-button.bl-button.bl-button--icon-only { width: var(--bl-media-play-button-size); height: var(--bl-media-play-button-size); padding: 0; border-radius: var(--bl-media-play-button-radius); }
+  .bl-media__play-button.bl-button.bl-button--icon-only svg { width: var(--bl-media-play-button-icon-size); height: var(--bl-media-play-button-icon-size); }
+  /* dialog playback: a lightbox (user, 2026-10-05). The <dialog> fills the viewport and is transparent, so its corner is
+     the viewport's and a click outside the video is a click on it (the script closes it); the video is centred, at most
+     media/dialog/max-width wide, on the color/overlay backdrop. Mirrors registry/src/ui/media/media-play-button.tsx. */
+  :root:has(dialog[open]:modal) { overflow: hidden; }
+  .bl-media__dialog {
+    position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
+    padding: var(--bl-dialog-padding); border: 0; background: transparent; outline: none;
+    align-items: center; justify-content: center; opacity: 0;
+    transition: opacity 200ms, display 200ms allow-discrete, overlay 200ms allow-discrete;
+  }
+  .bl-media__dialog[open] { display: flex; opacity: 1; }
+  @starting-style { .bl-media__dialog[open] { opacity: 0; } }
+  .bl-media__dialog::backdrop {
+    background-color: var(--overlay); opacity: 0;
+    transition: opacity 200ms, display 200ms allow-discrete, overlay 200ms allow-discrete;
+  }
+  @supports (backdrop-filter: blur(4px)) { .bl-media__dialog::backdrop { backdrop-filter: blur(4px); } }
+  .bl-media__dialog[open]::backdrop { opacity: 1; }
+  @starting-style { .bl-media__dialog[open]::backdrop { opacity: 0; } }
+  @media (prefers-reduced-motion: reduce) { .bl-media__dialog, .bl-media__dialog::backdrop { transition: none; } }
+  .bl-media__dialog > .bl-media__dialog-close { position: absolute; top: var(--bl-dialog-padding); right: var(--bl-dialog-padding); }
+  .bl-media__dialog-frame { position: relative; width: 100%; max-width: var(--bl-media-dialog-max-width); aspect-ratio: var(--ratio); overflow: hidden; background-color: var(--muted); opacity: 0; scale: 0.95; transition: opacity 200ms ease-out, scale 200ms ease-out; }
+  /* the video fades and zooms in from 95 %, as Dialog's panel does */
+  .bl-media__dialog[open] > .bl-media__dialog-frame { opacity: 1; scale: 1; }
+  @starting-style { .bl-media__dialog[open] > .bl-media__dialog-frame { opacity: 0; scale: 0.95; } }
+  @media (prefers-reduced-motion: reduce) { .bl-media__dialog-frame { transition: none; } }
+  .bl-media__dialog-frame > .bl-media__player { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; }
+  .bl-media__dialog-frame > video.bl-media__player,
+  .bl-media__dialog-frame > .bl-media__player video { object-fit: contain; width: 100%; height: 100%; }
+  .bl-media__caption {
+    color: var(--muted-foreground);
+    font-size: var(--bl-media-caption-font-size);
+    line-height: var(--bl-media-caption-line-height);
+  }
+{% endstylesheet %}
+
+{% javascript %}
+  /* The facade swap (spec: components/media/spec.md): the play button is a link to the video; with this script the
+     click instead clones the frame's inert <template> player in over the poster and moves focus to it. Delegated, so
+     sections added in the theme editor work too. */
+  document.addEventListener('click', function (event) {
+    var button = event.target instanceof Element ? event.target.closest('[data-bl-media-play]') : null;
+    if (!button) return;
+    var frame = button.closest('.bl-media__frame');
+    var template = frame && frame.querySelector('template[data-bl-media-player]');
+    if (!template) return;
+    event.preventDefault();
+    var player = template.content.firstElementChild.cloneNode(true);
+    var focusable = player.matches('video, iframe') ? player : player.querySelector('video, iframe') || player;
+    focusable.setAttribute('tabindex', '-1');
+    var media = focusable.tagName === 'VIDEO' ? focusable : null;
+    /* dialog playback: open the dialog first, then put the player in, so showModal() leaves focus on the close button
+       (focus inside a cross-origin iframe would keep Escape from closing it); closing removes the player, which stops it */
+    var dialogId = button.getAttribute('data-bl-media-dialog');
+    var dialog = dialogId ? document.getElementById(dialogId) : null;
+    if (dialog) {
+      var slot = dialog.querySelector('[data-slot=media-dialog-frame]');
+      dialog.showModal();
+      slot.replaceChildren(player);
+      if (media) media.play().catch(function () {});
+      if (!dialog.dataset.blMediaBound) {
+        dialog.dataset.blMediaBound = '1';
+        dialog.addEventListener('close', function () { slot.replaceChildren(); });
+        /* the lightbox fills the viewport, so a click outside the video is a click on the <dialog> itself */
+        dialog.addEventListener('click', function (e) {
+          if (e.target === dialog) dialog.close();
+        });
+      }
+      return;
+    }
+    frame.querySelector('.bl-media__play').replaceWith(player);
+    template.remove();
+    focusable.focus();
+    if (media) media.play().catch(function () {});
+  });
+{% endjavascript %}

package/templates/shopify/snippets/meta-tags.liquid

@@ -0,0 +1,105 @@
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+
+{%- liquid
+  assign og_title = page_title | default: shop.name
+  assign og_url = canonical_url | default: request.origin
+  assign og_type = 'website'
+  assign og_description = page_description | default: shop.description | default: shop.name
+
+  if request.page_type == 'product'
+    assign og_type = 'product'
+  elsif request.page_type == 'article'
+    assign og_type = 'article'
+  elsif request.page_type == 'password'
+    assign og_url = request.origin
+  endif
+%}
+
+<meta
+  property="og:site_name"
+  content="{{ shop.name }}"
+>
+<meta
+  property="og:url"
+  content="{{ og_url }}"
+>
+<meta
+  property="og:title"
+  content="{{ og_title | escape }}"
+>
+<meta
+  property="og:type"
+  content="{{ og_type }}"
+>
+<meta
+  property="og:description"
+  content="{{ og_description | escape }}"
+>
+
+{%- if page_image -%}
+  <meta
+    property="og:image"
+    content="http:{{ page_image | image_url }}"
+  >
+  <meta
+    property="og:image:secure_url"
+    content="https:{{ page_image | image_url }}"
+  >
+  <meta
+    property="og:image:width"
+    content="{{ page_image.width }}"
+  >
+  <meta
+    property="og:image:height"
+    content="{{ page_image.height }}"
+  >
+{%- endif -%}
+
+{%- if request.page_type == 'product' -%}
+  <script type="application/ld+json">
+    {{ product | structured_data }}
+  </script>
+
+  <meta
+    property="og:price:amount"
+    content="{{ product.price | money_without_currency | strip_html }}"
+  >
+  <meta
+    property="og:price:currency"
+    content="{{ cart.currency.iso_code }}"
+  >
+{%- endif -%}
+
+<meta
+  name="twitter:card"
+  content="summary_large_image"
+>
+<meta
+  name="twitter:title"
+  content="{{ og_title | escape }}"
+>
+<meta
+  name="twitter:description"
+  content="{{ og_description | escape }}"
+>
+
+<title>
+  {{ page_title }}
+  {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
+  {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
+  {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
+</title>
+
+<link
+  rel="canonical"
+  href="{{ canonical_url }}"
+>
+
+{% if page_description %}
+  <meta
+    name="description"
+    content="{{ page_description | escape }}"
+  >
+{% endif %}

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

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=2207-24960
+// source=platforms/shopify/theme/snippets/meter.liquid
+// component=meter (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): the meter snippet. The fill is drawn in Figma, not a
+// property, so the number comes from the Value text when it is a percentage.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const showLabel = instance.getBoolean("Show Label");
+const showValue = instance.getBoolean("Show Value");
+const label = instance.getString("Label");
+const valueText = instance.getString("Value");
+const parsed = /^\s*(\d+(?:\.\d+)?)\s*%\s*$/.exec(valueText ?? "");
+const args = [
+  `value: ${parsed ? parsed[1] : "50"}`,
+  showLabel ? `label: '${label}'` : `aria_label: '${label}'`,
+  showValue ? (parsed ? "show_value: true" : `value_text: '${valueText}'`) : "",
+].filter(Boolean).join(", ");
+
+export default {
+  example: figma.code`{% render 'meter', ${args} %}`,
+  id: "shopify-meter",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/meter.liquid

@@ -0,0 +1,118 @@
+{% doc %}
+  Baseline Meter as a snippet (spec: components/meter/spec.md). A native <meter>: a measurement inside a known range
+  (stock left, a rating), not task progress. The bar is primary in every region; low/high/optimum still reach assistive
+  tech. A meter that must read as "bad" sits in the error scheme.
+
+  @param {number} value - the measurement (required)
+  @param {number} [min] - default 0
+  @param {number} [max] - default 100
+  @param {number} [low]
+  @param {number} [high]
+  @param {number} [optimum]
+  @param {string} [label] - the visible label, a <label for> pointing at the meter
+  @param {boolean} [show_value] - show the value as a percentage of the range
+  @param {string} [value_text] - text in place of the percentage, e.g. "12 GB of 15 GB"
+  @param {string} [aria_label] - names the meter when there is no label
+  @param {string} [id] - the meter's id; defaults to one made from the label
+  @param {string} [scheme] - success | warning | error
+  @param {string} [class] - extra classes
+
+  @example
+  {% render 'meter', value: 4.2, max: 5, label: 'Rating', value_text: '4.2 out of 5' %}
+{% enddoc %}
+
+{%- liquid
+  assign lo = min | default: 0
+  assign hi = max | default: 100
+  assign meter_id = id
+  if meter_id == blank
+    assign meter_id = 'bl-meter-' | append: label | handleize
+  endif
+  assign text = value_text
+  if text == blank and show_value
+    assign range = hi | minus: lo
+    assign pct = value | minus: lo | times: 100.0 | divided_by: range | round
+    assign text = pct | append: '%'
+  endif
+  assign classes = 'bl-meter'
+  case scheme
+    when 'success', 'warning', 'error'
+      assign classes = classes | append: ' color-' | append: scheme
+  endcase
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+<div class="{{ classes }}" data-slot="meter">
+  {%- if label != blank -%}
+    <label class="bl-meter__label" data-slot="meter-label" for="{{ meter_id }}">{{ label | escape }}</label>
+  {%- endif -%}
+  {%- if text != blank -%}
+    <span class="bl-meter__value" data-slot="meter-value" aria-hidden="true">{{ text | escape }}</span>
+  {%- endif -%}
+  <meter
+    class="bl-meter__track"
+    data-slot="meter-track"
+    id="{{ meter_id }}"
+    value="{{ value }}"
+    min="{{ lo }}"
+    max="{{ hi }}"
+    {% if low != blank %}
+      low="{{ low }}"
+    {% endif %}
+    {% if high != blank %}
+      high="{{ high }}"
+    {% endif %}
+    {% if optimum != blank %}
+      optimum="{{ optimum }}"
+    {% endif %}
+    {% if aria_label != blank %}
+      aria-label="{{ aria_label | escape }}"
+    {% endif %}
+  ></meter>
+</div>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/meter/meter.tsx. Colours from the scheme; geometry from the meter/* tokens. */
+  .bl-meter {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--bl-meter-gap);
+  }
+  .bl-meter__label {
+    font-size: var(--bl-meter-label-font-size);
+    line-height: var(--bl-meter-label-line-height);
+    font-weight: var(--bl-meter-label-font-weight);
+  }
+  .bl-meter__value {
+    margin-inline-start: auto;
+    font-size: var(--bl-meter-value-font-size);
+    line-height: var(--bl-meter-value-line-height);
+    color: var(--muted-foreground);
+    font-variant-numeric: tabular-nums;
+  }
+  .bl-meter__track {
+    display: block;
+    width: 100%;
+    height: var(--bl-meter-track-height);
+    appearance: none;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--bl-meter-track-radius);
+    background-color: var(--muted);
+  }
+  /* Blink paints the bar and each region with a gradient image, and draws them short with height: 100% */
+  .bl-meter__track::-webkit-meter-bar {
+    height: var(--bl-meter-track-height);
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+  .bl-meter__track::-webkit-meter-optimum-value,
+  .bl-meter__track::-webkit-meter-suboptimum-value,
+  .bl-meter__track::-webkit-meter-even-less-good-value {
+    height: var(--bl-meter-track-height);
+    background: var(--primary);
+  }
+  .bl-meter__track::-moz-meter-bar { background: var(--primary); }
+{% endstylesheet %}

package/templates/shopify/snippets/native-select.liquid

@@ -0,0 +1,141 @@
+{% doc %}
+  Baseline NativeSelect as a snippet (spec: components/native-select/spec.md). The styled native <select>: it
+  owns its box and its chevron and nothing else — no label, no description, no error. Wrap it in `field` — a
+  select without a label is a bug.
+
+  The browser owns the option list, which cannot be styled and on a phone beats anything a design system will
+  build. Shopify has no panel component: the designed panel is React-only (components/select/spec.md), and if
+  customizable <select> lands in browsers that decision gets revisited.
+
+  @param {string} options - the <option> and <optgroup> markup, captured by the caller
+  @param {string} [name] - form field name
+  @param {string} [id] - id, so a <label for> can point at it
+  @param {boolean} [multiple] - native multi-select: grows with its options and has no chevron
+  @param {boolean} [required] - required attribute
+  @param {boolean} [disabled] - disabled attribute
+  @param {boolean} [invalid] - renders aria-invalid: destructive border, text and ring
+  @param {string} [attrs] - extra attributes, e.g. block.shopify_attributes
+  @param {string} [class] - extra classes on the wrapper
+
+  @example
+  {%- capture variant_options -%}
+    {% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }}</option>{% endfor %}
+  {%- endcapture -%}
+  {% render 'native-select', name: 'id', id: 'variant', options: variant_options %}
+{% enddoc %}
+
+{%- liquid
+  assign classes = 'bl-native-select'
+  if multiple
+    assign classes = classes | append: ' bl-native-select--multiple'
+  endif
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+{%- comment -%}
+  A <select> is a replaced element and cannot have children, so the chevron is a sibling laid over the box,
+  never taking the click. Same three-element shape as the React component, and as checkbox, radio and switch.
+{%- endcomment -%}
+<span class="{{ classes }}" data-slot="native-select">
+  <select
+    class="bl-native-select__control"
+    data-slot="native-select-control"
+    {%- if name != blank %} name="{{ name }}"{% endif -%}
+    {%- if id != blank %} id="{{ id }}"{% endif -%}
+    {%- if multiple %} multiple{% endif -%}
+    {%- if required %} required{% endif -%}
+    {%- if disabled %} disabled{% endif -%}
+    {%- if invalid %} aria-invalid="true"{% endif -%}
+    {{ attrs }}
+  >
+    {{ options }}
+  </select>
+  {%- unless multiple -%}
+    {% render 'icon', name: 'chevron-down', class: 'bl-native-select__chevron' %}
+  {%- endunless -%}
+</span>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/native-select/native-select.tsx. Colours come from the scheme class (--input,
+     --primary, --ring ...); geometry from the select/* component tokens in baseline-tokens.liquid (ADR-0017),
+     shared with the React Select trigger so the two cannot drift. */
+  .bl-native-select {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+  }
+
+  /* the whole control fades together, chevron included; opacity on the select alone would leave the chevron at
+     full strength over a faded box */
+  .bl-native-select:has(.bl-native-select__control:disabled) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .bl-native-select__control {
+    /* appearance:none removes the UA arrow so the Baseline chevron is the only one */
+    appearance: none;
+    width: 100%;
+    min-width: 0;
+    height: var(--bl-select-md-height);
+    padding-block: var(--bl-select-md-padding-y);
+    padding-inline-start: var(--bl-select-md-padding-x);
+    /* room on the inline end for the chevron, which is drawn over the box */
+    padding-inline-end: calc(
+      var(--bl-select-md-padding-x) + var(--bl-select-md-icon-size) + var(--bl-select-md-gap)
+    );
+    border: var(--bl-select-md-border-width) solid var(--input);
+    border-radius: var(--bl-select-md-radius);
+    background-color: transparent;
+    color: var(--foreground);
+    font-family: var(--bl-font-sans);
+    font-size: var(--bl-select-md-font-size);
+    line-height: var(--bl-select-md-line-height);
+    outline: none;
+    transition: color 150ms, border-color 150ms, box-shadow 150ms;
+  }
+
+  .bl-native-select__control:focus-visible {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+  }
+
+  /* invalid is set here, never inherited from a surrounding field, so a bare select matches one inside a
+     Field — the call Input made */
+  .bl-native-select__control[aria-invalid='true'] {
+    border-color: var(--destructive);
+    color: var(--destructive);
+  }
+
+  .bl-native-select__control[aria-invalid='true']:focus-visible {
+    box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring-invalid);
+  }
+
+  .bl-native-select__control:disabled {
+    cursor: not-allowed;
+  }
+
+  /* A multi-select grows with its options rather than taking the single-line control height, and has no
+     chevron: there is nothing to drop down. Where field-sizing is unsupported the box keeps its rows and
+     scrolls, which is a plain multi-select, so the degradation is invisible rather than broken. */
+  .bl-native-select--multiple .bl-native-select__control {
+    field-sizing: content;
+    height: auto;
+    min-height: var(--bl-select-md-height);
+    padding-inline-end: var(--bl-select-md-padding-x);
+  }
+
+  /* Scoped under .bl-native-select for the reason checkbox.liquid records: the icon snippet ships its own
+     `.bl-icon { display: inline-block }`, also one class, so an unscoped rule ties with it and loses on
+     source order. */
+  .bl-native-select .bl-native-select__chevron {
+    position: absolute;
+    inset-inline-end: var(--bl-select-md-padding-x);
+    width: var(--bl-select-md-icon-size);
+    height: var(--bl-select-md-icon-size);
+    color: var(--muted-foreground);
+    pointer-events: none;
+  }
+{% endstylesheet %}