@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/snippets/text-styles.liquid

@@ -0,0 +1,45 @@
+{% comment %} Generated by tokens/build.mjs from the Figma text styles. Do not edit. Content ramp (ADR-0014): render once from layout/theme.liquid; the heading block applies the classes. {% endcomment %}
+{% stylesheet %}
+.display-lg.display-lg {
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-text-responsive-5xl);
+  line-height: var(--bl-text-responsive-5xl--line-height);
+  font-weight: 600;
+}
+.display-md.display-md {
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-text-responsive-4xl);
+  line-height: var(--bl-text-responsive-4xl--line-height);
+  font-weight: 600;
+}
+.display-sm.display-sm {
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-text-responsive-3xl);
+  line-height: var(--bl-text-responsive-3xl--line-height);
+  font-weight: 600;
+}
+.heading-lg.heading-lg {
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-text-responsive-xl);
+  line-height: var(--bl-text-responsive-xl--line-height);
+  font-weight: 600;
+}
+.heading-md.heading-md {
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-text-responsive-lg);
+  line-height: var(--bl-text-responsive-lg--line-height);
+  font-weight: 600;
+}
+.heading-sm.heading-sm {
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-text-responsive-md);
+  line-height: var(--bl-text-responsive-md--line-height);
+  font-weight: 600;
+}
+.heading-xl.heading-xl {
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-text-responsive-2xl);
+  line-height: var(--bl-text-responsive-2xl--line-height);
+  font-weight: 600;
+}
+{% endstylesheet %}

package/templates/shopify/snippets/textarea.liquid

@@ -0,0 +1,103 @@
+{% doc %}
+  Baseline Textarea as a snippet (spec: components/textarea/spec.md). Owns its box and nothing else: no label,
+  no description, no error. Wrap it in `field` — a textarea without a label is a bug.
+
+  It is the same control box as Input with a floor instead of a fixed height, and it grows with its content
+  where field-sizing is supported.
+
+  @param {string} [name] - form field name
+  @param {string} [id] - id, so a <label for> can point at it
+  @param {string} [value] - the textarea's content
+  @param {string} [placeholder] - placeholder text
+  @param {number} [rows] - the starting height; min-height is the floor beneath it
+  @param {boolean} [required] - required attribute
+  @param {boolean} [disabled] - disabled attribute
+  @param {boolean} [invalid] - renders aria-invalid: destructive border, text and ring
+  @param {string} [autocomplete] - autocomplete attribute
+  @param {string} [attrs] - extra attributes, e.g. block.shopify_attributes
+  @param {string} [class] - extra classes
+
+  @example
+  {% render 'textarea', name: 'comment[body]', id: 'body', rows: 4 %}
+{% enddoc %}
+
+{%- liquid
+  assign classes = 'bl-textarea'
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+<textarea
+  class="{{ classes }}"
+  data-slot="textarea"
+  {%- if name != blank %} name="{{ name }}"{% endif -%}
+  {%- if id != blank %} id="{{ id }}"{% endif -%}
+  {%- if placeholder != blank %} placeholder="{{ placeholder | escape }}"{% endif -%}
+  {%- if rows != blank %} rows="{{ rows }}"{% endif -%}
+  {%- if required %} required{% endif -%}
+  {%- if disabled %} disabled{% endif -%}
+  {%- if invalid %} aria-invalid="true"{% endif -%}
+  {%- if autocomplete != blank %} autocomplete="{{ autocomplete }}"{% endif -%}
+  {{ attrs }}
+>{{ value }}</textarea>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/textarea/textarea.tsx. Colours come from the scheme class (--input, --primary,
+     --ring ...); geometry from the textarea/* component tokens in baseline-tokens.liquid (ADR-0017).
+
+     Element selectors are deliberately NOT used, for the reason input.liquid records: Shopify serves a
+     snippet's stylesheet only on pages that render the snippet, so restyling bare <textarea> from here would
+     leave Skeleton's own boxes unstyled everywhere else. */
+  .bl-textarea {
+    /* field-sizing:content grows the box with its content in CSS alone -- no JS auto-grow on any platform.
+       Safari and Firefox ignore it today and keep the `rows` height and scroll, which is a plain textarea, so
+       the degradation is invisible rather than broken. min-height is the floor either way. */
+    field-sizing: content;
+    /* Vertical only. A textarea is as wide as its container -- Field, a form column, a grid cell -- so dragging it
+       wider breaks the layout around it and nothing puts it back. Height is the dimension the user actually needs,
+       and field-sizing already grows it; the handle is for overriding that. */
+    resize: vertical;
+    display: block;
+    width: 100%;
+    min-width: 0;
+    min-height: var(--bl-textarea-md-min-height);
+    /* padding-y is 8px against Input's 4px: a paragraph starting at the top of a 64px box wants a looser pad
+       than a single line centred in a 32px one (spec: Size). */
+    padding: var(--bl-textarea-md-padding-y) var(--bl-textarea-md-padding-x);
+    border: var(--bl-textarea-md-border-width) solid var(--input);
+    border-radius: var(--bl-textarea-md-radius);
+    background-color: transparent;
+    color: var(--foreground);
+    font-family: var(--bl-font-sans);
+    font-size: var(--bl-textarea-md-font-size);
+    line-height: var(--bl-textarea-md-line-height);
+    outline: none;
+    transition: color 150ms, border-color 150ms, box-shadow 150ms;
+  }
+
+  .bl-textarea::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  .bl-textarea: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 textarea matches one inside a
+     Field -- the call Input made */
+  .bl-textarea[aria-invalid='true'] {
+    border-color: var(--destructive);
+    color: var(--destructive);
+  }
+
+  .bl-textarea[aria-invalid='true']:focus-visible {
+    box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring-invalid);
+  }
+
+  .bl-textarea:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+{% endstylesheet %}

package/templates/shopify/snippets/toggle-group.figma.ts

@@ -0,0 +1,30 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4524-424
+// source=platforms/shopify/theme/snippets/toggle-group.liquid
+// component=toggle-group (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): the items are toggle snippets captured into the group,
+// radios sharing a name for a single choice (a size, a colour), checkboxes for several.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const orientation = instance.getEnum("Orientation", { horizontal: "horizontal", vertical: "vertical" });
+// joined is spacing 0 (shared borders, outer corners only); spaced is the default gap, toggle-group/gap
+const joined = instance.getEnum("Spacing", { spaced: false, joined: true });
+
+const args = [
+  `items: sizes`,
+  joined ? `spacing: 0` : "",
+  orientation === "vertical" ? `orientation: 'vertical'` : "",
+  `aria_label: 'Size'`,
+].filter(Boolean).join(", ");
+
+// The Items slot holds the author's Toggles, so the snippet shows the shape (as React's).
+export default {
+  example: figma.code`{%- capture sizes -%}
+  {% render 'toggle', slot: 'toggle-group-item', type: 'radio', name: 'size', value: 'S', label: 'S', variant: 'outline', pressed: true %}
+  {% render 'toggle', slot: 'toggle-group-item', type: 'radio', name: 'size', value: 'M', label: 'M', variant: 'outline' %}
+  {% render 'toggle', slot: 'toggle-group-item', type: 'radio', name: 'size', value: 'L', label: 'L', variant: 'outline' %}
+{%- endcapture -%}
+{% render 'toggle-group', ${args} %}`,
+  id: "shopify-toggle-group",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/toggle-group.liquid

@@ -0,0 +1,46 @@
+{% doc %}
+  Baseline Toggle Group as a snippet (spec: components/toggle-group/spec.md): a role="group" row (or column) of
+  toggles. Single choice is radios sharing a name — render each item with the toggle snippet, `type: 'radio'`, the
+  group's `name` and `slot: 'toggle-group-item'`; multiple is checkboxes. Native (ADR-0030, user 2026-10-06): no
+  JavaScript, the choice submits with a form, and a single choice keeps one selected once chosen.
+
+  @param {string} items - the items, captured from toggle snippets
+  @param {number} [spacing] - 0 joins the items (shared borders, outer corners rounded); otherwise they are spaced
+  @param {string} [orientation] - horizontal (default) | vertical
+  @param {string} [aria_label] - names the group
+  @param {string} [class] - extra classes
+  @param {string} [attrs] - extra attributes (block.shopify_attributes)
+
+  @example
+  {%- capture sizes -%}
+    {% render 'toggle', slot: 'toggle-group-item', type: 'radio', name: 'size', value: 'S', label: 'S', variant: 'outline', pressed: true %}
+    {% render 'toggle', slot: 'toggle-group-item', type: 'radio', name: 'size', value: 'M', label: 'M', variant: 'outline' %}
+  {%- endcapture -%}
+  {% render 'toggle-group', items: sizes, spacing: 0, aria_label: 'Size' %}
+{% enddoc %}
+
+{%- liquid
+  assign gap = spacing | default: 2
+  assign o = orientation | default: 'horizontal'
+  unless o == 'vertical'
+    assign o = 'horizontal'
+  endunless
+-%}
+<div role="group" class="bl-toggle-group{% if class != blank %} {{ class }}{% endif %}" data-slot="toggle-group" data-spacing="{{ gap }}" data-orientation="{{ o }}"{% if aria_label != blank %} aria-label="{{ aria_label | escape }}"{% endif %} {{ attrs }}>
+  {{- items -}}
+</div>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/toggle-group/toggle-group.tsx and its css.json: spaced by toggle-group/gap, or joined —
+     only the outer corners rounded, outline items sharing one border. --toggle-radius is the item's size corner. */
+  .bl-toggle-group { display: flex; width: fit-content; flex-direction: row; align-items: center; gap: var(--bl-toggle-group-gap); }
+  .bl-toggle-group[data-spacing='0'] { gap: 0; }
+  .bl-toggle-group[data-orientation='vertical'] { flex-direction: column; align-items: stretch; }
+  .bl-toggle-group[data-spacing='0'] > [data-slot='toggle-group-item'] { border-radius: 0; }
+  .bl-toggle-group[data-spacing='0'][data-orientation='horizontal'] > [data-slot='toggle-group-item']:first-child { border-start-start-radius: var(--toggle-radius); border-end-start-radius: var(--toggle-radius); }
+  .bl-toggle-group[data-spacing='0'][data-orientation='horizontal'] > [data-slot='toggle-group-item']:last-child { border-start-end-radius: var(--toggle-radius); border-end-end-radius: var(--toggle-radius); }
+  .bl-toggle-group[data-spacing='0'][data-orientation='vertical'] > [data-slot='toggle-group-item']:first-child { border-start-start-radius: var(--toggle-radius); border-start-end-radius: var(--toggle-radius); }
+  .bl-toggle-group[data-spacing='0'][data-orientation='vertical'] > [data-slot='toggle-group-item']:last-child { border-end-start-radius: var(--toggle-radius); border-end-end-radius: var(--toggle-radius); }
+  .bl-toggle-group[data-spacing='0'][data-orientation='horizontal'] > [data-slot='toggle-group-item'][data-variant='outline']:not(:first-child) { border-inline-start-width: 0; }
+  .bl-toggle-group[data-spacing='0'][data-orientation='vertical'] > [data-slot='toggle-group-item'][data-variant='outline']:not(:first-child) { border-block-start-width: 0; }
+{% endstylesheet %}

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

@@ -0,0 +1,357 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4524-265
+// source=platforms/shopify/theme/snippets/toggle.liquid
+// component=toggle (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): Toggle is a snippet with React's markup (user,
+// 2026-10-06), rendered by sections and by the toggle-group snippet. Emits the render call.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// BASELINE_ICONS_START (generated by tokens/icons.mjs from tokens/icons/vocabulary.json; do not edit)
+const BASELINE_SYSTEM_ICONS: Record<string, string> = {
+  "brands/amazon": "brand-amazon",
+  "brands/americanexpress": "brand-americanexpress",
+  "brands/apple": "brand-apple",
+  "brands/applepay": "brand-applepay",
+  "brands/bluesky": "brand-bluesky",
+  "brands/discord": "brand-discord",
+  "brands/facebook": "brand-facebook",
+  "brands/github": "brand-github",
+  "brands/google": "brand-google",
+  "brands/googlepay": "brand-googlepay",
+  "brands/instagram": "brand-instagram",
+  "brands/linkedin": "brand-linkedin",
+  "brands/mastercard": "brand-mastercard",
+  "brands/paypal": "brand-paypal",
+  "brands/pinterest": "brand-pinterest",
+  "brands/reddit": "brand-reddit",
+  "brands/shopify": "brand-shopify",
+  "brands/snapchat": "brand-snapchat",
+  "brands/spotify": "brand-spotify",
+  "brands/telegram": "brand-telegram",
+  "brands/threads": "brand-threads",
+  "brands/tiktok": "brand-tiktok",
+  "brands/tripadvisor": "brand-tripadvisor",
+  "brands/vimeo": "brand-vimeo",
+  "brands/visa": "brand-visa",
+  "brands/whatsapp": "brand-whatsapp",
+  "brands/wordpress": "brand-wordpress",
+  "brands/x": "brand-x",
+  "brands/yelp": "brand-yelp",
+  "brands/youtube": "brand-youtube",
+  "lucide/arrow-down": "arrow-down",
+  "lucide/arrow-left": "arrow-left",
+  "lucide/arrow-right": "arrow-right",
+  "lucide/arrow-up": "arrow-up",
+  "lucide/arrow-up-down": "arrow-up-down",
+  "lucide/calendar": "calendar",
+  "lucide/check": "check",
+  "lucide/chevron-down": "chevron-down",
+  "lucide/chevron-left": "chevron-left",
+  "lucide/chevron-right": "chevron-right",
+  "lucide/chevron-up": "chevron-up",
+  "lucide/chevrons-left": "chevrons-left",
+  "lucide/chevrons-right": "chevrons-right",
+  "lucide/chevrons-up-down": "chevrons-up-down",
+  "lucide/circle": "circle",
+  "lucide/circle-alert": "error",
+  "lucide/circle-check": "success",
+  "lucide/circle-x": "close-circle",
+  "lucide/clock": "clock",
+  "lucide/copy": "copy",
+  "lucide/download": "download",
+  "lucide/ellipsis": "more-horizontal",
+  "lucide/ellipsis-vertical": "more-vertical",
+  "lucide/external-link": "external-link",
+  "lucide/eye": "eye",
+  "lucide/eye-off": "eye-off",
+  "lucide/file": "file",
+  "lucide/funnel": "filter",
+  "lucide/grip-vertical": "grip-vertical",
+  "lucide/house": "home",
+  "lucide/image": "image",
+  "lucide/info": "info",
+  "lucide/link": "link",
+  "lucide/loader-circle": "loader",
+  "lucide/lock": "lock",
+  "lucide/mail": "mail",
+  "lucide/menu": "menu",
+  "lucide/minus": "minus",
+  "lucide/panel-left": "sidebar",
+  "lucide/pause": "pause",
+  "lucide/pencil": "edit",
+  "lucide/phone": "phone",
+  "lucide/play": "play",
+  "lucide/plus": "plus",
+  "lucide/refresh-cw": "refresh",
+  "lucide/search": "search",
+  "lucide/settings": "settings",
+  "lucide/share-2": "share",
+  "lucide/shopping-cart": "cart",
+  "lucide/star": "star",
+  "lucide/trash-2": "trash",
+  "lucide/triangle-alert": "warning",
+  "lucide/upload": "upload",
+  "lucide/user": "user",
+  "lucide/x": "close",
+  "material-symbols/add": "plus",
+  "material-symbols/arrow-back": "arrow-left",
+  "material-symbols/arrow-downward": "arrow-down",
+  "material-symbols/arrow-forward": "arrow-right",
+  "material-symbols/arrow-upward": "arrow-up",
+  "material-symbols/calendar-today": "calendar",
+  "material-symbols/call": "phone",
+  "material-symbols/cancel": "close-circle",
+  "material-symbols/check": "check",
+  "material-symbols/check-circle": "success",
+  "material-symbols/circle": "circle",
+  "material-symbols/close": "close",
+  "material-symbols/content-copy": "copy",
+  "material-symbols/delete": "trash",
+  "material-symbols/description": "file",
+  "material-symbols/download": "download",
+  "material-symbols/drag-indicator": "grip-vertical",
+  "material-symbols/edit": "edit",
+  "material-symbols/error": "error",
+  "material-symbols/filter-list": "filter",
+  "material-symbols/home": "home",
+  "material-symbols/image": "image",
+  "material-symbols/info": "info",
+  "material-symbols/keyboard-arrow-down": "chevron-down",
+  "material-symbols/keyboard-arrow-left": "chevron-left",
+  "material-symbols/keyboard-arrow-right": "chevron-right",
+  "material-symbols/keyboard-arrow-up": "chevron-up",
+  "material-symbols/keyboard-double-arrow-left": "chevrons-left",
+  "material-symbols/keyboard-double-arrow-right": "chevrons-right",
+  "material-symbols/link": "link",
+  "material-symbols/lock": "lock",
+  "material-symbols/mail": "mail",
+  "material-symbols/menu": "menu",
+  "material-symbols/more-horiz": "more-horizontal",
+  "material-symbols/more-vert": "more-vertical",
+  "material-symbols/open-in-new": "external-link",
+  "material-symbols/pause": "pause",
+  "material-symbols/person": "user",
+  "material-symbols/play-arrow": "play",
+  "material-symbols/progress-activity": "loader",
+  "material-symbols/refresh": "refresh",
+  "material-symbols/remove": "minus",
+  "material-symbols/schedule": "clock",
+  "material-symbols/search": "search",
+  "material-symbols/settings": "settings",
+  "material-symbols/share": "share",
+  "material-symbols/shopping-cart": "cart",
+  "material-symbols/star": "star",
+  "material-symbols/swap-vert": "arrow-up-down",
+  "material-symbols/unfold-more": "chevrons-up-down",
+  "material-symbols/upload": "upload",
+  "material-symbols/view-sidebar": "sidebar",
+  "material-symbols/visibility": "eye",
+  "material-symbols/visibility-off": "eye-off",
+  "material-symbols/warning": "warning",
+  "phosphor/arrow-down": "arrow-down",
+  "phosphor/arrow-left": "arrow-left",
+  "phosphor/arrow-right": "arrow-right",
+  "phosphor/arrow-square-out": "external-link",
+  "phosphor/arrow-up": "arrow-up",
+  "phosphor/arrows-clockwise": "refresh",
+  "phosphor/arrows-down-up": "arrow-up-down",
+  "phosphor/calendar": "calendar",
+  "phosphor/caret-double-left": "chevrons-left",
+  "phosphor/caret-double-right": "chevrons-right",
+  "phosphor/caret-down": "chevron-down",
+  "phosphor/caret-left": "chevron-left",
+  "phosphor/caret-right": "chevron-right",
+  "phosphor/caret-up": "chevron-up",
+  "phosphor/caret-up-down": "chevrons-up-down",
+  "phosphor/check": "check",
+  "phosphor/check-circle": "success",
+  "phosphor/circle": "circle",
+  "phosphor/circle-notch": "loader",
+  "phosphor/clock": "clock",
+  "phosphor/copy": "copy",
+  "phosphor/dots-six-vertical": "grip-vertical",
+  "phosphor/dots-three": "more-horizontal",
+  "phosphor/dots-three-vertical": "more-vertical",
+  "phosphor/download-simple": "download",
+  "phosphor/envelope": "mail",
+  "phosphor/eye": "eye",
+  "phosphor/eye-slash": "eye-off",
+  "phosphor/file": "file",
+  "phosphor/funnel": "filter",
+  "phosphor/gear": "settings",
+  "phosphor/house": "home",
+  "phosphor/image": "image",
+  "phosphor/info": "info",
+  "phosphor/link": "link",
+  "phosphor/list": "menu",
+  "phosphor/lock": "lock",
+  "phosphor/magnifying-glass": "search",
+  "phosphor/minus": "minus",
+  "phosphor/pause": "pause",
+  "phosphor/pencil-simple": "edit",
+  "phosphor/phone": "phone",
+  "phosphor/play": "play",
+  "phosphor/plus": "plus",
+  "phosphor/share-network": "share",
+  "phosphor/shopping-cart": "cart",
+  "phosphor/sidebar": "sidebar",
+  "phosphor/star": "star",
+  "phosphor/trash": "trash",
+  "phosphor/upload-simple": "upload",
+  "phosphor/user": "user",
+  "phosphor/warning": "warning",
+  "phosphor/warning-circle": "error",
+  "phosphor/x": "close",
+  "phosphor/x-circle": "close-circle",
+  "remix/add": "plus",
+  "remix/alert": "warning",
+  "remix/arrow-down": "arrow-down",
+  "remix/arrow-down-s": "chevron-down",
+  "remix/arrow-left": "arrow-left",
+  "remix/arrow-left-double": "chevrons-left",
+  "remix/arrow-left-s": "chevron-left",
+  "remix/arrow-right": "arrow-right",
+  "remix/arrow-right-double": "chevrons-right",
+  "remix/arrow-right-s": "chevron-right",
+  "remix/arrow-up": "arrow-up",
+  "remix/arrow-up-down": "arrow-up-down",
+  "remix/arrow-up-s": "chevron-up",
+  "remix/calendar": "calendar",
+  "remix/check": "check",
+  "remix/checkbox-blank-circle": "circle",
+  "remix/checkbox-circle": "success",
+  "remix/close": "close",
+  "remix/close-circle": "close-circle",
+  "remix/delete-bin": "trash",
+  "remix/download-2": "download",
+  "remix/draggable": "grip-vertical",
+  "remix/error-warning": "error",
+  "remix/expand-up-down": "chevrons-up-down",
+  "remix/external-link": "external-link",
+  "remix/eye": "eye",
+  "remix/eye-off": "eye-off",
+  "remix/file": "file",
+  "remix/file-copy": "copy",
+  "remix/filter": "filter",
+  "remix/home": "home",
+  "remix/image": "image",
+  "remix/information": "info",
+  "remix/layout-left": "sidebar",
+  "remix/link": "link",
+  "remix/loader-4": "loader",
+  "remix/lock": "lock",
+  "remix/mail": "mail",
+  "remix/menu": "menu",
+  "remix/more": "more-horizontal",
+  "remix/more-2": "more-vertical",
+  "remix/pause": "pause",
+  "remix/pencil": "edit",
+  "remix/phone": "phone",
+  "remix/play": "play",
+  "remix/refresh": "refresh",
+  "remix/search": "search",
+  "remix/settings-3": "settings",
+  "remix/share": "share",
+  "remix/shopping-cart": "cart",
+  "remix/star": "star",
+  "remix/subtract": "minus",
+  "remix/time": "clock",
+  "remix/upload-2": "upload",
+  "remix/user": "user",
+  "tabler/alert-circle": "error",
+  "tabler/alert-triangle": "warning",
+  "tabler/arrow-down": "arrow-down",
+  "tabler/arrow-left": "arrow-left",
+  "tabler/arrow-right": "arrow-right",
+  "tabler/arrow-up": "arrow-up",
+  "tabler/arrows-sort": "arrow-up-down",
+  "tabler/calendar": "calendar",
+  "tabler/check": "check",
+  "tabler/chevron-down": "chevron-down",
+  "tabler/chevron-left": "chevron-left",
+  "tabler/chevron-right": "chevron-right",
+  "tabler/chevron-up": "chevron-up",
+  "tabler/chevrons-left": "chevrons-left",
+  "tabler/chevrons-right": "chevrons-right",
+  "tabler/circle": "circle",
+  "tabler/circle-check": "success",
+  "tabler/circle-x": "close-circle",
+  "tabler/clock": "clock",
+  "tabler/copy": "copy",
+  "tabler/dots": "more-horizontal",
+  "tabler/dots-vertical": "more-vertical",
+  "tabler/download": "download",
+  "tabler/external-link": "external-link",
+  "tabler/eye": "eye",
+  "tabler/eye-off": "eye-off",
+  "tabler/file": "file",
+  "tabler/filter": "filter",
+  "tabler/grip-vertical": "grip-vertical",
+  "tabler/home": "home",
+  "tabler/info-circle": "info",
+  "tabler/layout-sidebar": "sidebar",
+  "tabler/link": "link",
+  "tabler/loader-2": "loader",
+  "tabler/lock": "lock",
+  "tabler/mail": "mail",
+  "tabler/menu-2": "menu",
+  "tabler/minus": "minus",
+  "tabler/pencil": "edit",
+  "tabler/phone": "phone",
+  "tabler/photo": "image",
+  "tabler/player-pause": "pause",
+  "tabler/player-play": "play",
+  "tabler/plus": "plus",
+  "tabler/refresh": "refresh",
+  "tabler/search": "search",
+  "tabler/selector": "chevrons-up-down",
+  "tabler/settings": "settings",
+  "tabler/share": "share",
+  "tabler/shopping-cart": "cart",
+  "tabler/star": "star",
+  "tabler/trash": "trash",
+  "tabler/upload": "upload",
+  "tabler/user": "user",
+  "tabler/x": "close"
+};
+// BASELINE_ICONS_END
+
+// A swapped glyph is named "<Set>/<icon>"; normalise to lower-kebab and look it up in the vocabulary (ADR-0020 A).
+const kebab = (s: string) => s.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+function iconName(layerName: string): string {
+  const placeholder = instance.findInstance(layerName, { traverseInstances: true });
+  if (!placeholder || placeholder.type !== "INSTANCE") return "";
+  const glyph = placeholder.children.find((c) => c.type === "INSTANCE");
+  if (!glyph || glyph.type !== "INSTANCE") return "";
+  const slash = glyph.name.indexOf("/");
+  if (slash < 0) return kebab(glyph.name);
+  const key = kebab(glyph.name.slice(0, slash)) + "/" + kebab(glyph.name.slice(slash + 1));
+  return BASELINE_SYSTEM_ICONS[key] ?? kebab(glyph.name.slice(slash + 1));
+}
+// a Liquid string literal has no escapes, so a value holding a single quote is double-quoted
+const literal = (s: string) => (s.includes("'") ? `"${s}"` : `'${s}'`);
+
+const label = instance.getString("Label");
+const variant = instance.getEnum("Variant", { default: "default", outline: "outline" });
+const size = instance.getEnum("Size", { sm: "sm", md: "md", lg: "lg" });
+// hover is a Figma-only preview; pressed and disabled are the input's state
+const state = instance.getEnum("State", { default: "default", hover: "default", pressed: "pressed", disabled: "disabled" });
+// Icon (none | start | end | only, 2026-10-06): only is icon-only, so the label becomes the accessible name
+const iconSide = instance.getEnum("Icon", { none: "none", start: "start", end: "end", only: "only" });
+const icon = iconSide !== "none" ? iconName("Icon") : "";
+
+const args = [
+  iconSide === "only" ? `aria_label: ${literal(label)}` : `label: ${literal(label)}`,
+  icon ? `icon: '${icon}'` : "",
+  iconSide === "end" ? `icon_position: 'end'` : "",
+  variant !== "default" ? `variant: '${variant}'` : "",
+  size !== "md" ? `size: '${size}'` : "",
+  state === "pressed" ? `pressed: true` : "",
+  state === "disabled" ? `disabled: true` : "",
+].filter(Boolean).join(", ");
+
+export default {
+  example: figma.code`{% render 'toggle', ${args} %}`,
+  id: "shopify-toggle",
+  metadata: { nestable: true },
+};