@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/sections/baseline-kitchen-sink.liquid

@@ -0,0 +1,988 @@
+{% comment %}
+  Baseline kitchen sink — every component implemented on Shopify so far, in one page, so a change to a token or
+  a snippet can be eyeballed in a real storefront instead of in isolation. The Shopify twin of
+  platforms/html/index.html.
+
+  Deliberately UNLISTED: the schema has no `presets`, so it never appears in the theme editor's "Add section"
+  picker. It is placed by templates/index.json and nothing else. Keep it that way — it is a development
+  surface, not something a merchant should be able to drop onto a page.
+
+  Add a component here in the same commit that ships it on Shopify.
+{% endcomment %}
+
+{%- liquid
+  assign ks_scheme = section.settings.color_scheme.id | default: settings.default_color_scheme.id | default: 'scheme-1'
+  assign button_variants = 'default,secondary,outline,ghost,link,destructive' | split: ','
+  assign button_sizes = 'xs,sm,md,lg' | split: ','
+-%}
+
+<div class="bl-ks color-{{ ks_scheme }}" data-bl-ks>
+  <header class="bl-ks__header">
+    <h1 class="bl-ks__title">Baseline kitchen sink</h1>
+    <p class="bl-ks__lede">
+      Every component implemented on Shopify. Unlisted section, placed on the home page for development.
+    </p>
+    {%- capture ks_scheme_options -%}
+      {%- for scheme in settings.color_schemes -%}
+        <option value="{{ scheme.id }}"{% if scheme.id == ks_scheme %} selected{% endif %}>{{ scheme.id }}</option>
+      {%- endfor -%}
+    {%- endcapture -%}
+    {%- capture ks_scheme_control -%}
+      {% render 'native-select', id: 'ks-scheme', options: ks_scheme_options %}
+    {%- endcapture -%}
+    <div class="bl-ks__scheme-control">
+      {% render 'field', label: 'Colour scheme', id: 'ks-scheme', description: 'Every component below re-renders in the chosen scheme. Status schemes are modes, never variants.', control: ks_scheme_control %}
+    </div>
+  </header>
+
+  {%- comment -%} option lists shared by the Native select and Field sections {%- endcomment -%}
+  {%- liquid
+    capture ks_fruit
+      echo '<option>Apple</option><option>Banana</option><option>Blueberry</option><option>Grapes</option>'
+    endcapture
+    capture ks_fruit_placeholder
+      echo '<option value="" disabled selected>Select a fruit</option>'
+      echo ks_fruit
+    endcapture
+    capture ks_fruit_grouped
+      echo '<optgroup label="Fruit">'
+      echo ks_fruit
+      echo '</optgroup><optgroup label="Vegetables"><option>Aubergine</option><option>Broccoli</option></optgroup>'
+    endcapture
+  -%}
+
+  {% comment %} ---- Accordion ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Accordion</h2>
+    {%- capture ks_accordion_items -%}
+      {% render 'accordion-item', title: 'What are your shipping options?', content: '<p>Standard (5-7 days), express (2-3 days) and overnight.</p>', name: 'ks-accordion', open: true %}
+      {% render 'accordion-item', title: 'What is your return policy?', content: '<p>Returns accepted within 30 days, unused and in the original packaging.</p>', name: 'ks-accordion' %}
+      {% render 'accordion-item', title: 'How can I contact support?', content: '<p>Email us, or <a href="#">start a chat</a>.</p>', name: 'ks-accordion' %}
+    {%- endcapture -%}
+    {%- assign ks_accordion_contained = ks_accordion_items | replace: '"ks-accordion"', '"ks-accordion-contained"' -%}
+    {%- assign ks_accordion_split = ks_accordion_items | replace: '"ks-accordion"', '"ks-accordion-split"' -%}
+    {%- capture ks_accordion_multiple -%}
+      {% render 'accordion-item', title: 'What are your shipping options?', content: '<p>Standard (5-7 days), express (2-3 days) and overnight.</p>', open: true %}
+      {% render 'accordion-item', title: 'What is your return policy?', content: '<p>Returns accepted within 30 days, unused and in the original packaging.</p>' %}
+      {% render 'accordion-item', title: 'How can I contact support?', content: '<p>Email us, or <a href="#">start a chat</a>.</p>', open: true %}
+    {%- endcapture -%}
+    <div style="display: grid; gap: 2rem; max-width: 36rem;">
+      <div>
+        <h3 class="bl-ks__subheading">Default</h3>
+        {% render 'accordion', items: ks_accordion_items %}
+      </div>
+      <div>
+        <h3 class="bl-ks__subheading">Multiple (no shared name)</h3>
+        {% render 'accordion', items: ks_accordion_multiple %}
+      </div>
+      <div>
+        <h3 class="bl-ks__subheading">Contained</h3>
+        {% render 'accordion', items: ks_accordion_contained, variant: 'contained' %}
+      </div>
+      <div>
+        <h3 class="bl-ks__subheading">Split</h3>
+        {% render 'accordion', items: ks_accordion_split, variant: 'split' %}
+      </div>
+    </div>
+  </section>
+
+  {% comment %} ---- Alert ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Alert</h2>
+    <div style="display: grid; gap: 1rem; max-width: 36rem;">
+      {% render 'alert', icon: 'info', title: 'Your plan renews on 1 November', description: '<p>We will charge the card ending 4242.</p>' %}
+      {% render 'alert', variant: 'destructive', icon: 'error', title: 'Payment failed', description: '<p>Your card was declined. <a href="#">Contact support</a>.</p>' %}
+      {%- capture ks_alert_action -%}{% render 'button', label: 'Reload', variant: 'outline', size: 'xs' %}{%- endcapture -%}
+      {% render 'alert', icon: 'info', title: 'A new version is available', description: 'Reload to get the latest changes.', action: ks_alert_action %}
+      {% render 'alert', icon: 'success', title: 'Order placed', description: 'A confirmation is on its way.', scheme: 'success' %}
+      {% render 'alert', icon: 'warning', title: 'Low stock', description: 'Only 2 left.', scheme: 'warning' %}
+    </div>
+  </section>
+
+  {% comment %} ---- Avatar ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Avatar</h2>
+    {%- assign ks_avatar_sizes = 'xs,sm,md,lg,xl' | split: ',' -%}
+    <h3 class="bl-ks__subheading">Sizes, icon and status</h3>
+    <div class="bl-ks__row">
+      {%- for s in ks_avatar_sizes -%}{% render 'avatar', fallback: 'JD', alt: 'Jordan Diaz', size: s %}{%- endfor -%}
+      {% render 'avatar', icon: 'user', alt: 'Guest' %}
+      {% render 'avatar', fallback: 'JD', size: 'lg', badge: 'dot' %}
+      {% render 'avatar', fallback: 'JD', size: 'lg', badge: 'success', badge_label: 'online' %}
+      {% render 'avatar', fallback: 'JD', size: 'lg', badge: 'warning', badge_label: 'away' %}
+      {% render 'avatar', fallback: 'JD', size: 'lg', badge: 'error', badge_label: 'busy' %}
+    </div>
+    <h3 class="bl-ks__subheading">Group</h3>
+    <div style="display: grid; gap: 1rem; justify-items: start;">
+      {%- assign ks_group_sizes = 'sm,md,lg' | split: ',' -%}
+      {%- for s in ks_group_sizes -%}
+        {%- capture ks_people -%}
+          {% render 'avatar', fallback: 'AB', size: s %}
+          {% render 'avatar', fallback: 'CD', size: s %}
+          {% render 'avatar', fallback: 'EF', size: s %}
+        {%- endcapture -%}
+        {% render 'avatar-group', content: ks_people, count: 3 %}
+      {%- endfor -%}
+    </div>
+    <h3 class="bl-ks__subheading">The signed-in customer</h3>
+    <div class="bl-ks__row">
+      {%- if customer -%}
+        {%- for s in ks_avatar_sizes -%}{% render 'avatar', customer: customer, size: s %}{%- endfor -%}
+      {%- else -%}
+        <p>Sign in to see the customer avatar (customer | avatar, or the customer's initials).</p>
+      {%- endif -%}
+    </div>
+  </section>
+
+  {% comment %} ---- Badge ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Badge</h2>
+    {%- assign ks_badge_variants = 'default,secondary,destructive,outline,ghost,link' | split: ',' -%}
+    <h3 class="bl-ks__subheading">Variants and sizes</h3>
+    <div class="bl-ks__row">
+      {%- for v in ks_badge_variants -%}{% render 'badge', label: v, variant: v %}{%- endfor -%}
+    </div>
+    <div class="bl-ks__row">
+      {%- for v in ks_badge_variants -%}{% render 'badge', label: v, variant: v, size: 'sm' %}{%- endfor -%}
+    </div>
+    <h3 class="bl-ks__subheading">Icons, links and status</h3>
+    <div class="bl-ks__row">
+      {% render 'badge', label: 'Verified', icon: 'check' %}
+      {% render 'badge', label: 'Beta', variant: 'secondary', icon: 'arrow-right', icon_position: 'end' %}
+      {% render 'badge', label: 'Link badge', href: '/' %}
+      {% render 'badge', label: 'Paid', scheme: 'success' %}
+      {% render 'badge', label: 'Pending', scheme: 'warning' %}
+      {% render 'badge', label: 'Failed', scheme: 'error' %}
+    </div>
+  </section>
+
+  {% comment %} ---- Breadcrumb ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Breadcrumb</h2>
+    <p class="bl-ks__note">
+      The breadcrumb snippet builds its trail from the template, so it renders nothing on this page. It sits at the top
+      of the product, collection, blog, article, page and search sections; a product reached through a collection shows
+      that collection in the middle.
+      {%- assign ks_bc_collection = collections.all -%}
+      {%- assign ks_bc_product = ks_bc_collection.products.first -%}
+      {%- if ks_bc_product %}
+        Try <a href="{{ ks_bc_product.url | within: ks_bc_collection }}">{{ ks_bc_product.title | escape }}</a>.
+      {%- endif %}
+    </p>
+  </section>
+
+  {% comment %} ---- Button ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Button</h2>
+
+    <h3 class="bl-ks__subheading">Variants</h3>
+    <div class="bl-ks__row">
+      {%- for v in button_variants -%}
+        {% render 'button', label: v, variant: v %}
+      {%- endfor -%}
+    </div>
+
+    <h3 class="bl-ks__subheading">Sizes</h3>
+    <div class="bl-ks__row">
+      {%- for s in button_sizes -%}
+        {% render 'button', label: s, size: s %}
+      {%- endfor -%}
+    </div>
+
+    <h3 class="bl-ks__subheading">Icons and states</h3>
+    <div class="bl-ks__row">
+      {% render 'button', label: 'Leading icon', icon: 'plus' %}
+      {% render 'button', label: 'Trailing icon', icon: 'arrow-right', icon_position: 'end', variant: 'secondary' %}
+      {% render 'button', label: 'Settings', icon: 'settings', icon_only: true, variant: 'outline' %}
+      {% render 'button', label: 'Disabled', disabled: true %}
+      {% render 'button', label: 'Link', href: '/', variant: 'link' %}
+    </div>
+  </section>
+
+  {% comment %} ---- Button group ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Button group</h2>
+    <p class="bl-ks__note">
+      Joins buttons into one unit. It owns no geometry: every number comes from the buttons inside it, so
+      changing their size changes the group, corners included.
+    </p>
+    {%- liquid
+      capture ks_bg_three
+        render 'button', label: 'Left', variant: 'outline'
+        render 'button', label: 'Middle', variant: 'outline'
+        render 'button', label: 'Right', variant: 'outline'
+      endcapture
+      capture ks_bg_text
+        echo '<span class="bl-button-group__text">https://</span>'
+        render 'button', label: 'example.com', variant: 'outline'
+      endcapture
+      capture ks_bg_sep
+        render 'button', label: 'Save'
+        echo '<span class="bl-button-group__separator"></span>'
+        render 'button', label: 'Options', icon: 'more-vertical', icon_only: true
+      endcapture
+    -%}
+    <div class="bl-ks__stack">
+      {% render 'button-group', content: ks_bg_three %}
+      {% render 'button-group', content: ks_bg_three, orientation: 'vertical' %}
+      {% render 'button-group', content: ks_bg_text %}
+      {% render 'button-group', content: ks_bg_sep %}
+    </div>
+  </section>
+
+  {% comment %} ---- Card ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Card</h2>
+    <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start;">
+      <div style="width: 20rem;">
+        {% render 'card', content: 'Cards hold one subject. Compose only the regions you need.' %}
+      </div>
+      <div style="width: 20rem;">
+        {%- capture ks_card_media -%}{{ 'image' | placeholder_svg_tag }}{%- endcapture -%}
+        {%- capture ks_card_footer -%}{% render 'button', label: 'View event', size: 'sm' %}{%- endcapture -%}
+        {% render 'card', media: ks_card_media, title: 'Design systems meetup', title_tag: 'h3', description: 'A practical talk on component APIs.', footer: ks_card_footer %}
+      </div>
+      <div style="width: 24rem;">
+        {%- capture ks_card_action -%}{% render 'button', label: 'Sign up', variant: 'link' %}{%- endcapture -%}
+        {%- capture ks_card_footer2 -%}{% render 'button', label: 'Sign in' %}{% render 'button', label: 'Sign in with Google', variant: 'outline' %}{%- endcapture -%}
+        {% render 'card', title: 'Sign in to your account', description: 'Enter your email below to sign in.', action: ks_card_action, content: '<p>Fields go here.</p>', footer: ks_card_footer2, footer_vertical: true %}
+      </div>
+      <div style="width: 20rem;">
+        {% render 'card', title: 'Team members', description: 'Invite people to collaborate.', bordered: true, content: 'No members yet.' %}
+      </div>
+      <div style="width: 18rem;">
+        {%- capture ks_card_footer3 -%}{% render 'button', label: 'Upgrade', variant: 'outline', size: 'sm' %}{%- endcapture -%}
+        {% render 'card', size: 'sm', title: 'Storage', description: '12 GB of 15 GB used.', content: 'Upgrade for more space.', footer: ks_card_footer3 %}
+      </div>
+    </div>
+  </section>
+
+  {% comment %} ---- Checkbox ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Checkbox</h2>
+
+    <h3 class="bl-ks__subheading">States</h3>
+    <div class="bl-ks__row bl-ks__row--tight">
+      {% render 'checkbox', id: 'ks-cb-default' %}
+      {% render 'checkbox', id: 'ks-cb-checked', checked: true %}
+      {% render 'checkbox', id: 'ks-cb-mixed', indeterminate: true %}
+      {% render 'checkbox', id: 'ks-cb-invalid', invalid: true %}
+      {% render 'checkbox', id: 'ks-cb-invalid-checked', invalid: true, checked: true %}
+      {% render 'checkbox', id: 'ks-cb-disabled', disabled: true %}
+      {% render 'checkbox', id: 'ks-cb-disabled-checked', disabled: true, checked: true %}
+    </div>
+
+    <h3 class="bl-ks__subheading">With labels</h3>
+    <div class="bl-ks__choices">
+      <div class="bl-ks__choice">
+        {% render 'checkbox', id: 'ks-cb-disks', name: 'desktop[]', value: 'disks', checked: true %}
+        <label for="ks-cb-disks">Hard disks</label>
+      </div>
+      <div class="bl-ks__choice">
+        {% render 'checkbox', id: 'ks-cb-external', name: 'desktop[]', value: 'external', checked: true %}
+        <label for="ks-cb-external">External disks</label>
+      </div>
+      <div class="bl-ks__choice">
+        {% render 'checkbox', id: 'ks-cb-media', name: 'desktop[]', value: 'media' %}
+        <label for="ks-cb-media">CDs, DVDs and iPods</label>
+      </div>
+    </div>
+  </section>
+
+  {% comment %} ---- Dialog ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Dialog</h2>
+    <div class="bl-ks__row">
+      {%- capture ks_dialog_body -%}<p>Dialog content goes here.</p><p>A second paragraph, spaced by the dialog gap.</p>{%- endcapture -%}
+      {%- capture ks_dialog_footer -%}{% render 'button', label: 'Continue' %}{%- endcapture -%}
+      {% render 'dialog', id: 'ks-dialog', trigger: 'Edit profile', title: 'Edit profile', description: 'Make changes to your profile here. Click save when you are done.', content: ks_dialog_body, footer: ks_dialog_footer, close_label: 'Cancel' %}
+      {%- capture ks_dialog_long -%}{%- for i in (1..12) -%}<p>{{ i }}. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>{%- endfor -%}{%- endcapture -%}
+      {% render 'dialog', id: 'ks-dialog-long', trigger: 'Terms of service', trigger_variant: 'default', title: 'Terms of service', content: ks_dialog_long, hide_close: true, close_label: 'Close' %}
+    </div>
+  </section>
+
+  {% comment %} ---- Field ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Field</h2>
+    <div class="bl-ks__stack bl-ks__stack--narrow">
+      {%- capture ks_field_email -%}
+        {% render 'input', type: 'email', id: 'ks-field-email', placeholder: 'you@example.com' %}
+      {%- endcapture -%}
+      {% render 'field',
+        label: 'Email',
+        id: 'ks-field-email',
+        description: 'We only use this to reply.',
+        control: ks_field_email
+      %}
+
+      {%- capture ks_field_invalid -%}
+        {% render 'input', type: 'email', id: 'ks-field-invalid', value: 'not-an-email', invalid: true %}
+      {%- endcapture -%}
+      {% render 'field',
+        label: 'Email',
+        id: 'ks-field-invalid',
+        error: 'Enter a valid email address.',
+        control: ks_field_invalid
+      %}
+
+      {%- capture ks_field_switchy -%}
+        {% render 'checkbox', id: 'ks-field-marketing', checked: true %}
+      {%- endcapture -%}
+      {% render 'field',
+        label: 'Email me about new products',
+        id: 'ks-field-marketing',
+        description: 'No more than once a month.',
+        orientation: 'horizontal',
+        control: ks_field_switchy
+      %}
+    </div>
+
+    <h3 class="bl-ks__subheading">Option cards</h3>
+    <p class="bl-ks__note">The whole card is the label; selected tints it (field/option-card/*).</p>
+    <div class="bl-ks__stack bl-ks__stack--narrow">
+      {%- capture ks_card_pro -%}{% render 'checkbox', id: 'ks-card-pro', checked: true %}{%- endcapture -%}
+      {% render 'field', card: true, id: 'ks-card-pro', label: 'Pro', description: 'Everything in Starter, plus unlimited projects.', control: ks_card_pro %}
+      {%- capture ks_card_team -%}{% render 'checkbox', id: 'ks-card-team' %}{%- endcapture -%}
+      {% render 'field', card: true, id: 'ks-card-team', label: 'Team', description: 'Shared billing and role-based access.', control: ks_card_team %}
+    </div>
+    <div class="bl-ks__stack bl-ks__stack--narrow" role="radiogroup" aria-label="Plan">
+      {%- capture ks_card_monthly -%}{% render 'radio', id: 'ks-card-monthly', name: 'ks-card-plan', value: 'monthly', checked: true %}{%- endcapture -%}
+      {% render 'field', card: true, id: 'ks-card-monthly', label: 'Monthly', description: 'Billed every month.', control: ks_card_monthly %}
+      {%- capture ks_card_yearly -%}{% render 'radio', id: 'ks-card-yearly', name: 'ks-card-plan', value: 'yearly' %}{%- endcapture -%}
+      {% render 'field', card: true, id: 'ks-card-yearly', label: 'Yearly', description: 'Two months free.', control: ks_card_yearly %}
+    </div>
+    <div class="bl-ks__stack bl-ks__stack--narrow">
+      {%- capture ks_card_start -%}{% render 'switch', id: 'ks-card-start', checked: true %}{%- endcapture -%}
+      {% render 'field', card: true, control_position: 'start', id: 'ks-card-start', label: 'Control first', description: "control_position: 'start' puts the control before the text.", control: ks_card_start %}
+    </div>
+  </section>
+
+  {% comment %} ---- Field separator ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Field separator</h2>
+    <p class="bl-ks__note">
+      A rule between groups of fields, with an optional caption sitting in a gap in the middle of it. There is
+      no standalone Separator on Shopify -- sections draw their own rules -- so this is the one place Baseline
+      ships one.
+    </p>
+    <div class="bl-ks__stack bl-ks__stack--narrow">
+      {% render 'input', placeholder: 'Above the rule' %}
+      {% render 'field-separator' %}
+      {% render 'input', placeholder: 'Below a plain rule' %}
+      {% render 'field-separator', label: 'or' %}
+      {% render 'input', placeholder: 'Below a captioned rule' %}
+    </div>
+  </section>
+
+  {% comment %} ---- Icon ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Icon</h2>
+    <p class="bl-ks__note">The active set, resolved at build time from Figma.</p>
+    <div class="bl-ks__icons">
+      {% render 'icon', name: 'check' %}
+      {% render 'icon', name: 'close' %}
+      {% render 'icon', name: 'chevron-down' %}
+      {% render 'icon', name: 'search' %}
+      {% render 'icon', name: 'cart' %}
+      {% render 'icon', name: 'user' %}
+      {% render 'icon', name: 'settings' %}
+      {% render 'icon', name: 'warning' %}
+      {% render 'icon', name: 'success' %}
+      {% render 'icon', name: 'minus' %}
+    </div>
+  </section>
+
+  {% comment %} ---- Input ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Input</h2>
+    <div class="bl-ks__stack bl-ks__stack--narrow">
+      {% render 'input', placeholder: 'Placeholder...' %}
+      {% render 'input', type: 'email', value: 'example@email.com' %}
+      {% render 'input', type: 'password', value: 'correct horse battery staple' %}
+      {% render 'input', type: 'search', placeholder: 'Search...' %}
+      {% render 'input', value: 'example@email.com', invalid: true %}
+      {% render 'input', placeholder: 'Disabled', disabled: true %}
+      {% render 'input', type: 'file' %}
+    </div>
+  </section>
+
+  {% comment %} ---- Input group ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Input group</h2>
+    <p class="bl-ks__note">
+      Things inside a control's box. The group draws the border and the focus ring, and the control inside goes
+      borderless. Anything sitting beside a control rather than inside it is Button Group, not this.
+    </p>
+    {%- liquid
+      capture ks_ig_search
+        render 'input', type: 'search', placeholder: 'Search...'
+      endcapture
+      capture ks_ig_amount
+        render 'input', placeholder: '0.00'
+      endcapture
+      capture ks_ig_invalid
+        render 'input', value: 'Not quite right', invalid: true
+      endcapture
+      capture ks_ig_message
+        render 'textarea', placeholder: 'Describe the problem...', rows: 3
+      endcapture
+      capture ks_ig_icon
+        render 'icon', name: 'search'
+      endcapture
+      capture ks_ig_go
+        render 'button', label: 'Go', variant: 'secondary', size: 'xs'
+      endcapture
+      capture ks_ig_usd
+        echo '<span>USD</span>'
+      endcapture
+      capture ks_ig_count
+        echo '<span>0 / 280</span>'
+      endcapture
+    -%}
+    <div class="bl-ks__stack bl-ks__stack--narrow">
+      {% render 'input-group', control: ks_ig_search, start: ks_ig_icon %}
+      {% render 'input-group', control: ks_ig_search, end: ks_ig_go %}
+      {% render 'input-group', control: ks_ig_amount, end: ks_ig_usd %}
+      {% render 'input-group', control: ks_ig_invalid, start: ks_ig_icon %}
+      {% render 'input-group', control: ks_ig_message, end: ks_ig_count, layout: 'textarea' %}
+    </div>
+  </section>
+
+  {% comment %} ---- Item ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Item</h2>
+    <div style="display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start;">
+      <div style="display: grid; gap: 1rem; width: 24rem;">
+        {%- capture ks_item_action -%}{% render 'button', label: 'Action', variant: 'outline', size: 'sm' %}{%- endcapture -%}
+        {% render 'item', title: 'Basic item', description: 'A simple item with a title and a description.', actions: ks_item_action %}
+        {% render 'item', variant: 'outline', icon: 'success', title: 'Your profile has been verified', description: 'With a description the media aligns to the top.' %}
+        {% render 'item', variant: 'muted', title: 'Muted', description: 'The muted variant: muted at 50 %.' %}
+        {% render 'item', variant: 'outline', href: '#', title: 'Visit the documentation', description: 'The whole row is the link.' %}
+        {% render 'item', variant: 'outline', size: 'xs', title: 'Size xs', description: 'Tighter, with text/xs.' %}
+      </div>
+      <div style="width: 24rem;">
+        {%- capture ks_item_rows -%}
+          {%- for product in collections.all.products limit: 3 -%}
+            {%- capture ks_item_buy -%}{% render 'button', label: 'View', variant: 'ghost', size: 'sm', href: product.url %}{%- endcapture -%}
+            {%- assign ks_item_price = product.price | money -%}
+            {% render 'item', size: 'sm', title: product.title, description: product.vendor, image: product.featured_image, aside: ks_item_price, actions: ks_item_buy %}
+          {%- endfor -%}
+        {%- endcapture -%}
+        {% render 'item-group', content: ks_item_rows %}
+      </div>
+    </div>
+  </section>
+
+  {% comment %} ---- Media ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Media</h2>
+    <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start;">
+      <div style="width: 20rem;">
+        {% render 'media', ratio: 1.5, caption: 'A placeholder at 3:2 with a caption.' %}
+      </div>
+      <div style="width: 24rem;">
+        {% render 'media', ratio: 1.7778, video_url: 'https://www.youtube.com/watch?v=aqz-KE-bpKQ', title: 'Big Buck Bunny', caption: 'YouTube, loaded on play.' %}
+      </div>
+      <div style="width: 24rem;">
+        {% render 'media', ratio: 1.7778, video_url: 'https://www.youtube.com/watch?v=aqz-KE-bpKQ', title: 'Big Buck Bunny', caption: 'Opens in a dialog; closing it stops the video.', playback: 'dialog', id: 'ks-media-dialog' %}
+      </div>
+      {%- assign ks_video = null -%}
+      {%- for product in collections.all.products -%}
+        {%- for m in product.media -%}
+          {%- if m.media_type == 'video' or m.media_type == 'external_video' -%}
+            {%- assign ks_video = m -%}
+            {%- break -%}
+          {%- endif -%}
+        {%- endfor -%}
+        {%- if ks_video -%}{%- break -%}{%- endif -%}
+      {%- endfor -%}
+      <div style="width: 24rem;">
+        {%- if ks_video -%}
+          {% render 'media', video: ks_video, caption: 'Product video media from the store.' %}
+        {%- else -%}
+          <p>No product has video media on this store; add one to see a Shopify-hosted video here.</p>
+        {%- endif -%}
+      </div>
+      <div style="width: 20rem;">
+        {%- capture ks_media_card -%}{% render 'media', ratio: 1.7778, video_url: 'https://vimeo.com/76979871', title: 'The New Vimeo Player' %}{%- endcapture -%}
+        {% render 'card', media: ks_media_card, title: 'Product tour', title_tag: 'h3', description: 'Vimeo inside a card.' %}
+      </div>
+    </div>
+  </section>
+
+  {% comment %} ---- Meter ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Meter</h2>
+    <div style="display: grid; gap: 1rem; max-width: 20rem;">
+      {% render 'meter', value: 12, max: 15, label: 'Storage', value_text: '12 GB of 15 GB' %}
+      {% render 'meter', value: 4.2, max: 5, label: 'Rating', value_text: '4.2 out of 5' %}
+      {% render 'meter', value: 92, low: 50, high: 80, optimum: 20, label: 'Disk usage', show_value: true, scheme: 'error' %}
+    </div>
+  </section>
+
+  {% comment %} ---- Native select ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Native select</h2>
+    <p class="bl-ks__note">
+      The browser owns the option list. Shopify has no panel component: the designed panel is React-only, and
+      that gets revisited if customizable select elements land in browsers.
+    </p>
+    <div class="bl-ks__stack bl-ks__stack--narrow">
+      {% render 'native-select', id: 'ks-sel-placeholder', options: ks_fruit_placeholder %}
+      {% render 'native-select', id: 'ks-sel-filled', options: ks_fruit %}
+      {% render 'native-select', id: 'ks-sel-grouped', options: ks_fruit_grouped %}
+      {% render 'native-select', id: 'ks-sel-invalid', options: ks_fruit, invalid: true %}
+      {% render 'native-select', id: 'ks-sel-disabled', options: ks_fruit, disabled: true %}
+      {% render 'native-select', id: 'ks-sel-multiple', options: ks_fruit, multiple: true %}
+    </div>
+  </section>
+
+  {% comment %} ---- Pagination ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Pagination</h2>
+    <p class="bl-ks__note">
+      The pagination snippet renders Shopify's paginate object, so the store's products paged one at a time give it
+      something to page through. Collection, blog and article comment pages use it in place of default_pagination.
+    </p>
+    {%- paginate collections.all.products by 1 -%}
+      <h3 class="bl-ks__subheading">Default</h3>
+      {% render 'pagination', paginate: paginate %}
+      <h3 class="bl-ks__subheading">Bordered</h3>
+      {% render 'pagination', paginate: paginate, variant: 'bordered' %}
+      <h3 class="bl-ks__subheading">Grouped</h3>
+      {% render 'pagination', paginate: paginate, variant: 'grouped' %}
+    {%- endpaginate -%}
+  </section>
+
+  {% comment %} ---- Popover ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Popover</h2>
+    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-block: 1rem;">
+      {% render 'popover', id: 'ks-popover', trigger: 'Open popover', align: 'start', title: 'Dimensions', description: 'Set the dimensions for the layer.' %}
+      {% render 'popover', id: 'ks-popover-shipping', trigger: 'Shipping details', trigger_variant: 'link', align: 'start', title: 'Shipping', description: 'Free over $50. Ships in 1-2 business days.' %}
+    </div>
+    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-block: 1rem;">
+      {%- for a in (1..3) -%}
+        {%- case a -%}{%- when 1 -%}{%- assign al = 'start' -%}{%- when 2 -%}{%- assign al = 'center' -%}{%- else -%}{%- assign al = 'end' -%}{%- endcase -%}
+        {%- assign pid = 'ks-popover-align-' | append: al -%}
+        {%- assign plabel = 'Aligned to ' | append: al -%}
+        {% render 'popover', id: pid, trigger: al, trigger_size: 'sm', align: al, label: plabel, content: plabel %}
+      {%- endfor -%}
+    </div>
+    <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding-block: 6rem;">
+      {%- assign ks_sides = 'top,right,bottom,left' | split: ',' -%}
+      {%- for sd in ks_sides -%}
+        {%- assign pid = 'ks-popover-side-' | append: sd -%}
+        {% render 'popover', id: pid, trigger: sd, side: sd, title: 'Dimensions', description: 'Set the dimensions for the layer.' %}
+      {%- endfor -%}
+    </div>
+  </section>
+
+  {% comment %} ---- Progress ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Progress</h2>
+    <div style="display: grid; gap: 1rem; max-width: 20rem;">
+      {% render 'progress', value: 0, aria_label: 'Upload 0%', id: 'ks-progress-0' %}
+      {% render 'progress', value: 50, aria_label: 'Upload 50%', id: 'ks-progress-50' %}
+      {% render 'progress', value: 56, label: 'Uploading', show_value: true %}
+      {% render 'progress', value: 3, max: 4, label: 'Checkout', value_text: 'Step 3 of 4' %}
+      {% render 'progress', label: 'Preparing files' %}
+      {% render 'progress', value: 64, label: 'Saved', show_value: true, scheme: 'success' %}
+    </div>
+  </section>
+
+  {% comment %} ---- Radio ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Radio</h2>
+
+    <h3 class="bl-ks__subheading">States</h3>
+    {%- comment -%}
+      Each state gets its own name on purpose: radios sharing a name deselect one another, so one group here
+      would collapse the sampler to a single checked box.
+    {%- endcomment -%}
+    <div class="bl-ks__row bl-ks__row--tight">
+      {% render 'radio', name: 'ks-r-a', id: 'ks-r-default', value: 'off' %}
+      {% render 'radio', name: 'ks-r-b', id: 'ks-r-checked', value: 'on', checked: true %}
+      {% render 'radio', name: 'ks-r-c', id: 'ks-r-invalid', value: 'off', invalid: true %}
+      {% render 'radio', name: 'ks-r-d', id: 'ks-r-invalid-checked', value: 'on', invalid: true, checked: true %}
+      {% render 'radio', name: 'ks-r-e', id: 'ks-r-disabled', value: 'off', disabled: true %}
+      {% render 'radio', name: 'ks-r-f', id: 'ks-r-disabled-checked', value: 'on', disabled: true, checked: true %}
+    </div>
+
+    <h3 class="bl-ks__subheading">A group</h3>
+    <div role="radiogroup" aria-label="Spacing" class="bl-ks__choices">
+      <div class="bl-ks__choice">
+        {% render 'radio', name: 'ks-spacing', id: 'ks-spacing-default', value: 'default', checked: true %}
+        <label for="ks-spacing-default">Default</label>
+      </div>
+      <div class="bl-ks__choice">
+        {% render 'radio', name: 'ks-spacing', id: 'ks-spacing-comfortable', value: 'comfortable' %}
+        <label for="ks-spacing-comfortable">Comfortable</label>
+      </div>
+      <div class="bl-ks__choice">
+        {% render 'radio', name: 'ks-spacing', id: 'ks-spacing-compact', value: 'compact' %}
+        <label for="ks-spacing-compact">Compact</label>
+      </div>
+    </div>
+  </section>
+
+  {% comment %} ---- Sheet ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Sheet</h2>
+    <div class="bl-ks__row">
+      {%- capture ks_sheet_body -%}<p>Sheet content goes here.</p>{%- endcapture -%}
+      {%- capture ks_sheet_footer -%}{% render 'button', label: 'Save changes' %}{%- endcapture -%}
+      {%- assign ks_sides = 'right,left,top,bottom' | split: ',' -%}
+      {%- for s in ks_sides -%}
+        {%- assign ks_sheet_id = 'ks-sheet-' | append: s -%}
+        {% render 'sheet', id: ks_sheet_id, trigger: s, side: s, title: 'Edit profile', description: 'Make changes to your profile here.', content: ks_sheet_body, footer: ks_sheet_footer, close_label: 'Close' %}
+      {%- endfor -%}
+    </div>
+  </section>
+
+  {% comment %} ---- Spinner ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Spinner</h2>
+    <div class="bl-ks__row">
+      {% render 'spinner' %}
+      <span style="color: var(--primary)">{% render 'spinner' %}</span>
+      <span style="color: var(--muted-foreground)">{% render 'spinner' %}</span>
+    </div>
+  </section>
+
+  {% comment %} ---- Switch ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Switch</h2>
+    <p class="bl-ks__note">
+      A switch applies its change immediately. If the setting needs a Save button beside it, it is a checkbox.
+    </p>
+
+    <h3 class="bl-ks__subheading">States</h3>
+    <div class="bl-ks__row bl-ks__row--tight">
+      {% render 'switch', id: 'ks-sw-off' %}
+      {% render 'switch', id: 'ks-sw-on', checked: true %}
+      {% render 'switch', id: 'ks-sw-invalid', invalid: true %}
+      {% render 'switch', id: 'ks-sw-invalid-on', invalid: true, checked: true %}
+      {% render 'switch', id: 'ks-sw-disabled', disabled: true %}
+      {% render 'switch', id: 'ks-sw-disabled-on', disabled: true, checked: true %}
+    </div>
+
+    <h3 class="bl-ks__subheading">Sizes</h3>
+    <div class="bl-ks__row bl-ks__row--tight">
+      {% render 'switch', id: 'ks-sw-sm-off', size: 'sm' %}
+      {% render 'switch', id: 'ks-sw-sm-on', size: 'sm', checked: true %}
+      {% render 'switch', id: 'ks-sw-md-off', size: 'md' %}
+      {% render 'switch', id: 'ks-sw-md-on', size: 'md', checked: true %}
+    </div>
+
+    <h3 class="bl-ks__subheading">With labels</h3>
+    <div class="bl-ks__choices">
+      <div class="bl-ks__choice">
+        {% render 'switch', id: 'ks-sw-2fa', name: 'two_factor', checked: true %}
+        <label for="ks-sw-2fa">Ask for a code at every sign-in</label>
+      </div>
+      <div class="bl-ks__choice">
+        {% render 'switch', id: 'ks-sw-digest', name: 'digest' %}
+        <label for="ks-sw-digest">Send a weekly summary</label>
+      </div>
+    </div>
+  </section>
+
+  {% comment %} ---- Textarea ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Textarea</h2>
+    <p class="bl-ks__note">
+      The same control box as Input with a floor instead of a fixed height. It grows with its content where
+      field-sizing is supported, and keeps its rows height and scrolls where it is not.
+    </p>
+    <div class="bl-ks__stack bl-ks__stack--narrow">
+      {% render 'textarea', id: 'ks-ta-default', placeholder: 'Type your message here.' %}
+      {% render 'textarea', id: 'ks-ta-filled', value: 'A filled textarea.' %}
+      {% render 'textarea', id: 'ks-ta-invalid', value: 'Not quite right.', invalid: true %}
+      {% render 'textarea', id: 'ks-ta-disabled', placeholder: 'Disabled', disabled: true %}
+      {% render 'textarea', id: 'ks-ta-rows', rows: 6, value: 'rows sets the starting height; min-height is the floor beneath it.' %}
+    </div>
+  </section>
+
+  {% comment %} ---- Carousel (the React demos' order: default, sizes, loop, vertical) ---- {% endcomment %}
+  <section class="bl-ks__section" id="ks-carousel">
+    <h2 class="bl-ks__heading">Carousel</h2>
+    {%- capture ks_slides -%}
+      {% render 'carousel-item', content: '<div style="display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid var(--border);border-radius:var(--bl-radius-xl);font-size:2.25rem;font-weight:600;">1</div>' %}
+      {% render 'carousel-item', content: '<div style="display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid var(--border);border-radius:var(--bl-radius-xl);font-size:2.25rem;font-weight:600;">2</div>' %}
+      {% render 'carousel-item', content: '<div style="display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid var(--border);border-radius:var(--bl-radius-xl);font-size:2.25rem;font-weight:600;">3</div>' %}
+      {% render 'carousel-item', content: '<div style="display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid var(--border);border-radius:var(--bl-radius-xl);font-size:2.25rem;font-weight:600;">4</div>' %}
+      {% render 'carousel-item', content: '<div style="display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid var(--border);border-radius:var(--bl-radius-xl);font-size:2.25rem;font-weight:600;">5</div>' %}
+    {%- endcapture -%}
+    {%- capture ks_vslides -%}
+      {% render 'carousel-item', content: '<div style="display:flex;align-items:center;justify-content:center;height:100%;padding:1.5rem;border:1px solid var(--border);border-radius:var(--bl-radius-xl);font-size:1.875rem;font-weight:600;">1</div>' %}
+      {% render 'carousel-item', content: '<div style="display:flex;align-items:center;justify-content:center;height:100%;padding:1.5rem;border:1px solid var(--border);border-radius:var(--bl-radius-xl);font-size:1.875rem;font-weight:600;">2</div>' %}
+      {% render 'carousel-item', content: '<div style="display:flex;align-items:center;justify-content:center;height:100%;padding:1.5rem;border:1px solid var(--border);border-radius:var(--bl-radius-xl);font-size:1.875rem;font-weight:600;">3</div>' %}
+      {% render 'carousel-item', content: '<div style="display:flex;align-items:center;justify-content:center;height:100%;padding:1.5rem;border:1px solid var(--border);border-radius:var(--bl-radius-xl);font-size:1.875rem;font-weight:600;">4</div>' %}
+      {% render 'carousel-item', content: '<div style="display:flex;align-items:center;justify-content:center;height:100%;padding:1.5rem;border:1px solid var(--border);border-radius:var(--bl-radius-xl);font-size:1.875rem;font-weight:600;">5</div>' %}
+    {%- endcapture -%}
+    <div style="max-width: 20rem; margin: 2rem auto;">{% render 'carousel', items: ks_slides, aria_label: 'Default' %}</div>
+    <div style="max-width: 24rem; margin: 2rem auto;">{% render 'carousel', items: ks_slides, aria_label: 'Sizes', per_view: 2, dots: false %}</div>
+    <div style="max-width: 20rem; margin: 2rem auto;">{% render 'carousel', items: ks_slides, aria_label: 'Loop', loop: true %}</div>
+    <div style="max-width: 20rem; margin: 5rem auto;">{% render 'carousel', items: ks_vslides, aria_label: 'Vertical', orientation: 'vertical', class: 'ks-carousel-vertical' %}</div>
+    <style>/* as the React demo: the track (CarouselContent) is 270px high, two slides per view */ .ks-carousel-vertical .bl-carousel__track { height: 270px; } .ks-carousel-vertical .bl-carousel__slide { flex-basis: 50%; }</style>
+  </section>
+
+  {% comment %} ---- Sidebar menu: the header's mobile menu (a Sheet below md), composed by hand ---- {% endcomment %}
+  <section class="bl-ks__section" id="ks-sidebar-menu">
+    <h2 class="bl-ks__heading">Sidebar menu (mobile menu)</h2>
+    {%- capture ks_sm_products -%}
+      {% render 'sidebar-menu-sub-link', title: 'New arrivals', url: '#new' %}
+      {% render 'sidebar-menu-sub-link', title: 'Sale', url: '#sale', current: true %}
+    {%- endcapture -%}
+    {%- capture ks_sm_about -%}
+      {% render 'sidebar-menu-sub-link', title: 'Our story', url: '#story' %}
+      {% render 'sidebar-menu-sub-link', title: 'Careers', url: '#careers' %}
+    {%- endcapture -%}
+    {%- capture ks_sm_items -%}
+      {% render 'sidebar-menu-item', title: 'Home', url: '#home', current: true %}
+      {% render 'sidebar-menu-item', title: 'Products', children: ks_sm_products, open: true %}
+      {% render 'sidebar-menu-item', title: 'About', children: ks_sm_about %}
+      {% render 'sidebar-menu-item', title: 'Contact', url: '#contact' %}
+    {%- endcapture -%}
+    {%- capture ks_sm -%}{% render 'sidebar-menu', items: ks_sm_items %}{%- endcapture -%}
+    <div style="margin-block: 1rem;">{% render 'sheet', id: 'ks-mobile-menu', trigger: 'Menu', trigger_variant: 'outline', trigger_icon: 'menu', trigger_icon_only: true, side: 'left', title: 'Store', content: ks_sm, class: 'bl-sidebar-sheet' %}</div>
+  </section>
+
+  {% comment %} ---- Navigation Menu (the React demo; the header renders the store's menu the same way) ---- {% endcomment %}
+  <section class="bl-ks__section" id="ks-navigation">
+    <h2 class="bl-ks__heading">Navigation Menu</h2>
+    {%- capture ks_nav_start -%}
+      {% render 'navigation-menu-link', title: 'Introduction', url: '#introduction', current: true, description: 'Re-usable components built with Base UI and Tailwind CSS.' %}
+      {% render 'navigation-menu-link', title: 'Installation', url: '#installation', badge: 'New', description: 'How to install dependencies and structure your app.' %}
+      {% render 'navigation-menu-link', title: 'Typography', url: '#typography', description: 'Styles for headings, paragraphs, lists...etc' %}
+    {%- endcapture -%}
+    {%- capture ks_nav_components -%}
+      {% render 'navigation-menu-link', title: 'Alert Dialog', url: '#alert-dialog', description: 'A modal dialog that interrupts the user with important content and expects a response.' %}
+      {% render 'navigation-menu-link', title: 'Hover Card', url: '#hover-card', description: 'For sighted users to preview content available behind a link.' %}
+      {% render 'navigation-menu-link', title: 'Tabs', url: '#tabs', description: 'A set of layered sections of content that are displayed one at a time.' %}
+    {%- endcapture -%}
+    {%- capture ks_nav_icons -%}
+      {% render 'navigation-menu-link', title: 'Backlog', url: '#backlog', icon: 'error' %}
+      {% render 'navigation-menu-link', title: 'To Do', url: '#to-do', icon: 'circle' %}
+      {% render 'navigation-menu-link', title: 'Done', url: '#done', icon: 'success' %}
+    {%- endcapture -%}
+    {%- capture ks_nav_items -%}
+      {% render 'navigation-menu-item', id: 'ks-nav-getting-started', title: 'Getting started', content: ks_nav_start %}
+      {% render 'navigation-menu-item', id: 'ks-nav-components', title: 'Components', content: ks_nav_components %}
+      {% render 'navigation-menu-item', id: 'ks-nav-with-icon', title: 'With Icon', content: ks_nav_icons %}
+      {% render 'navigation-menu-item', title: 'Docs', url: '#docs' %}
+    {%- endcapture -%}
+    <div style="margin-block: 1rem 16rem;">{% render 'navigation-menu', items: ks_nav_items, aria_label: 'Kitchen sink' %}</div>
+  </section>
+
+  {% comment %} ---- Tabs (the React demos' order: default, vertical, icons, line, line-vertical, line-icons) ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Tabs</h2>
+    {%- capture ks_tabs_panel_overview -%}<p>View your key metrics and recent project activity. You have 12 active projects and 3 pending tasks.</p>{%- endcapture -%}
+    {%- capture ks_tabs_panel_analytics -%}<p>Track performance and user engagement metrics. Page views are up 25% compared to last month.</p>{%- endcapture -%}
+    {%- capture ks_tabs_panel_reports -%}<p>Generate and download your detailed reports. You have 5 reports ready to export.</p>{%- endcapture -%}
+    {%- capture ks_tabs_panel_settings -%}<p>Manage your account preferences and options. Configure notifications, security, and themes.</p>{%- endcapture -%}
+    {%- assign ks_tabs_looks = 'default,line' | split: ',' -%}
+    {%- for ks_look in ks_tabs_looks -%}
+      {%- for ks_orient in (1..2) -%}
+        {%- if ks_orient == 1 -%}{%- assign ks_o = 'horizontal' -%}{%- else -%}{%- assign ks_o = 'vertical' -%}{%- endif -%}
+        {%- assign ks_p = 'ks-tabs-' | append: ks_look | append: '-' | append: ks_o -%}
+        {%- assign ks_id1 = ks_p | append: '-overview' -%}
+        {%- assign ks_id2 = ks_p | append: '-analytics' -%}
+        {%- assign ks_id3 = ks_p | append: '-reports' -%}
+        {%- assign ks_id4 = ks_p | append: '-settings' -%}
+        {%- capture ks_tabs -%}
+          {% render 'tab', id: ks_id1, label: 'Overview', content: ks_tabs_panel_overview %}
+          {% render 'tab', id: ks_id2, label: 'Analytics', content: ks_tabs_panel_analytics %}
+          {% render 'tab', id: ks_id3, label: 'Reports', content: ks_tabs_panel_reports %}
+          {% render 'tab', id: ks_id4, label: 'Settings', content: ks_tabs_panel_settings %}
+        {%- endcapture -%}
+        <div style="max-width: 28rem; margin-block: 1rem;">{% render 'tabs', items: ks_tabs, variant: ks_look, orientation: ks_o, aria_label: 'Project' %}</div>
+      {%- endfor -%}
+      {%- assign ks_p = 'ks-tabs-' | append: ks_look | append: '-icons' -%}
+      {%- assign ks_id1 = ks_p | append: '-preview' -%}
+      {%- assign ks_id2 = ks_p | append: '-code' -%}
+      {%- assign ks_id3 = ks_p | append: '-share' -%}
+      {%- capture ks_tabs -%}
+        {% render 'tab', id: ks_id1, label: 'Preview', icon: 'eye', content: '<p>The rendered component.</p>' %}
+        {% render 'tab', id: ks_id2, label: 'Code', icon: 'file', content: '<p>Its source.</p>' %}
+        {% render 'tab', id: ks_id3, label: 'Share', icon: 'share', icon_position: 'end', disabled: true, content: '<p>A link to it.</p>' %}
+      {%- endcapture -%}
+      <div style="margin-block: 1rem;">{% render 'tabs', items: ks_tabs, variant: ks_look, aria_label: 'View' %}</div>
+    {%- endfor -%}
+  </section>
+
+  {% comment %} ---- Toggle ---- {% endcomment %}
+  <section class="bl-ks__section">
+    <h2 class="bl-ks__heading">Toggle</h2>
+    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-block: 1rem;">
+      {% render 'toggle', icon: 'star', aria_label: 'Toggle bookmark', size: 'sm', variant: 'outline' %}
+      {% render 'toggle', label: 'Bold', aria_label: 'Toggle bold', variant: 'outline', pressed: true %}
+      {% render 'toggle', label: 'Italic', icon: 'edit', aria_label: 'Toggle italic' %}
+      {% render 'toggle', label: 'Disabled', aria_label: 'Toggle disabled', disabled: true %}
+      {% render 'toggle', label: 'Disabled', aria_label: 'Toggle disabled outline', variant: 'outline', disabled: true %}
+    </div>
+    {%- capture ks_format -%}
+      {% render 'toggle', slot: 'toggle-group-item', name: 'toggle-group-format', value: 'bold', label: 'Bold', aria_label: 'Toggle bold', variant: 'outline' %}
+      {% render 'toggle', slot: 'toggle-group-item', name: 'toggle-group-format', value: 'italic', label: 'Italic', aria_label: 'Toggle italic', variant: 'outline' %}
+      {% render 'toggle', slot: 'toggle-group-item', name: 'toggle-group-format', value: 'strikethrough', label: 'Strike', aria_label: 'Toggle strikethrough', variant: 'outline' %}
+    {%- endcapture -%}
+    {%- capture ks_weight -%}
+      {% render 'toggle', slot: 'toggle-group-item', type: 'radio', name: 'toggle-group-weight', value: 'light', label: 'Light', variant: 'outline' %}
+      {% render 'toggle', slot: 'toggle-group-item', type: 'radio', name: 'toggle-group-weight', value: 'normal', label: 'Normal', variant: 'outline', pressed: true %}
+      {% render 'toggle', slot: 'toggle-group-item', type: 'radio', name: 'toggle-group-weight', value: 'medium', label: 'Medium', variant: 'outline' %}
+      {% render 'toggle', slot: 'toggle-group-item', type: 'radio', name: 'toggle-group-weight', value: 'bold', label: 'Bold', variant: 'outline' %}
+    {%- endcapture -%}
+    {%- capture ks_vertical -%}
+      {% render 'toggle', slot: 'toggle-group-item', name: 'toggle-group-vertical', value: 'bold', label: 'Bold', variant: 'outline', pressed: true %}
+      {% render 'toggle', slot: 'toggle-group-item', name: 'toggle-group-vertical', value: 'italic', label: 'Italic', variant: 'outline' %}
+      {% render 'toggle', slot: 'toggle-group-item', name: 'toggle-group-vertical', value: 'strikethrough', label: 'Strike', variant: 'outline' %}
+    {%- endcapture -%}
+    <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; margin-block: 1rem;">
+      {% render 'toggle-group', items: ks_format, aria_label: 'Formatting' %}
+      {% render 'toggle-group', items: ks_weight, spacing: 0, aria_label: 'Font weight' %}
+      {% render 'toggle-group', items: ks_vertical, spacing: 0, orientation: 'vertical', aria_label: 'Formatting' %}
+    </div>
+  </section>
+</div>
+
+{% stylesheet %}
+  /* Layout only. Every component draws itself from its own snippet; nothing here restyles a component, so this
+     page cannot mask a bug in one. */
+  .bl-ks {
+    background-color: var(--background);
+    color: var(--foreground);
+    transition: background-color 150ms, color 150ms;
+    display: grid;
+    grid-template-columns: var(--content-grid);
+    padding: 48px 0;
+  }
+
+  .bl-ks > * {
+    grid-column: 2;
+  }
+
+  .bl-ks__header {
+    margin-bottom: 40px;
+  }
+
+  .bl-ks__title {
+    margin: 0;
+    font-family: var(--bl-font-sans);
+    font-size: var(--bl-text-3xl);
+    font-weight: 600;
+    color: var(--foreground);
+  }
+
+  .bl-ks__lede {
+    margin: 8px 0 0;
+    color: var(--muted-foreground);
+    font-family: var(--bl-font-sans);
+    font-size: var(--bl-text-sm);
+  }
+
+  .bl-ks__section {
+    padding: 28px 0;
+    border-top: 1px solid var(--border);
+  }
+
+  .bl-ks__heading {
+    margin: 0 0 16px;
+    font-family: var(--bl-font-sans);
+    font-size: var(--bl-text-xl);
+    font-weight: 600;
+    color: var(--foreground);
+  }
+
+  .bl-ks__subheading {
+    margin: 24px 0 10px;
+    font-family: var(--bl-font-sans);
+    font-size: var(--bl-text-sm);
+    font-weight: 600;
+    color: var(--muted-foreground);
+  }
+
+  .bl-ks__note {
+    margin: 0 0 14px;
+    color: var(--muted-foreground);
+    font-family: var(--bl-font-sans);
+    font-size: var(--bl-text-sm);
+  }
+
+  .bl-ks__row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .bl-ks__row--tight {
+    gap: 16px;
+  }
+
+  .bl-ks__stack {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .bl-ks__stack--narrow {
+    max-width: 24rem;
+  }
+
+  .bl-ks__choices {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bl-field-group-gap-compact);
+    max-width: 24rem;
+  }
+
+  .bl-ks__choice {
+    display: flex;
+    align-items: center;
+    gap: var(--bl-label-gap);
+  }
+
+  .bl-ks__choice label {
+    font-family: var(--bl-font-sans);
+    font-size: var(--bl-label-font-size);
+    line-height: var(--bl-label-line-height);
+    color: var(--foreground);
+  }
+
+  .bl-ks__icons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    color: var(--foreground);
+    font-size: 24px;
+  }
+
+
+  .bl-ks__scheme-control {
+    max-width: 20rem;
+    margin-top: 24px;
+  }
+{% endstylesheet %}
+
+{% javascript %}
+  /* The kitchen sink's scheme switcher: swaps the section's color-<id> class, which every snippet's colours read
+     (ADR-0007). Development surface only; nothing else in the theme depends on it. */
+  document.addEventListener('change', function (event) {
+    var select = event.target;
+    if (!(select instanceof HTMLSelectElement) || select.id !== 'ks-scheme') return;
+    var root = select.closest('[data-bl-ks]');
+    if (!root) return;
+    root.className = root.className.replace(/(^|\s)color-\S+/g, '').trim() + ' color-' + select.value;
+  });
+{% endjavascript %}
+
+{% schema %}
+{
+  "name": "Baseline kitchen sink",
+  "settings": [
+    { "type": "color_scheme", "id": "color_scheme", "label": "t:baseline.color_scheme", "default": "scheme-1" }
+  ]
+}
+{% endschema %}