{
  "name": "feature-toggle-switch-grid",
  "kind": "block",
  "primary": "grid-ui",
  "page": "/playgrounds/composed-flow/app/composed-flow.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "columns": "1 2@sm",
    "gap": "3"
  },
  "html": "<grid-ui\n        columns=\"1 2@sm\"\n        gap=\"3\">\n        <field-ui label=\"input-mask\" inline>\n          <switch-ui id=\"strip-input-mask\" checked></switch-ui>\n        </field-ui>\n        <text-ui variant=\"caption\">Off → fields render unformatted (raw digits, no spaces or slashes).</text-ui>\n\n        <field-ui label=\"validation\" inline>\n          <switch-ui id=\"strip-validation\" checked></switch-ui>\n        </field-ui>\n        <text-ui variant=\"caption\">Off → submit always succeeds, even with empty fields. The gate is gone.</text-ui>\n\n        <field-ui label=\"spring-animate\" inline>\n          <switch-ui id=\"strip-spring-animate\" checked></switch-ui>\n        </field-ui>\n        <text-ui variant=\"caption\">Off → success card snaps in instead of sliding from below.</text-ui>\n\n        <field-ui label=\"count-up\" inline>\n          <switch-ui id=\"strip-count-up\" checked></switch-ui>\n        </field-ui>\n        <text-ui variant=\"caption\">Off → total appears at $96.12 immediately, no ramp.</text-ui>\n\n        <field-ui label=\"confetti-burst\" inline>\n          <switch-ui id=\"strip-confetti-burst\" checked></switch-ui>\n        </field-ui>\n        <text-ui variant=\"caption\">Off → no celebration. The success is recorded but not felt.</text-ui>\n\n        <field-ui label=\"focus-restore\" inline>\n          <switch-ui id=\"strip-focus-restore\" checked></switch-ui>\n        </field-ui>\n        <text-ui variant=\"caption\">Off → focus drops to body after submit. Tab from there starts at the page chrome.</text-ui>\n\n        <field-ui label=\"announcer\" inline>\n          <switch-ui id=\"strip-announcer\" checked></switch-ui>\n        </field-ui>\n        <text-ui variant=\"caption\">Off → screen reader hears nothing on success. Sighted users see the same thing; AT users get silence.</text-ui>\n      </grid-ui>",
  "source": "playgrounds/composed-flow/app/composed-flow.contents.html",
  "metadata": {
    "domain": "settings",
    "description": "Feature-toggle switch grid — a two-column grid pairing each inline labelled switch with a caption explaining what turning it off does. The 'enable / disable individual features' settings panel where every row is a toggle plus a one-line consequence note.",
    "keywords": [
      "feature",
      "toggle",
      "switch",
      "grid",
      "settings",
      "options",
      "enable",
      "disable",
      "on",
      "off",
      "flags",
      "preferences",
      "capabilities",
      "inline",
      "labelled",
      "switch",
      "caption",
      "explanation",
      "two",
      "column",
      "controls",
      "panel",
      "feature",
      "flags",
      "toggles",
      "settings",
      "list",
      "configuration"
    ]
  },
  "captured_at": "2026-06-10T16:56:21.616Z",
  "template": [
    {
      "id": "strip-input-mask",
      "component": "Toggle",
      "checked": true
    },
    {
      "id": "field",
      "component": "Field",
      "inline": true,
      "label": "input-mask",
      "children": [
        "strip-input-mask"
      ]
    },
    {
      "id": "text",
      "component": "Text",
      "variant": "caption",
      "textContent": "Off → fields render unformatted (raw digits, no spaces or slashes)."
    },
    {
      "id": "strip-validation",
      "component": "Toggle",
      "checked": true
    },
    {
      "id": "field-2",
      "component": "Field",
      "inline": true,
      "label": "validation",
      "children": [
        "strip-validation"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "caption",
      "textContent": "Off → submit always succeeds, even with empty fields. The gate is gone."
    },
    {
      "id": "strip-spring-animate",
      "component": "Toggle",
      "checked": true
    },
    {
      "id": "field-3",
      "component": "Field",
      "inline": true,
      "label": "spring-animate",
      "children": [
        "strip-spring-animate"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "variant": "caption",
      "textContent": "Off → success card snaps in instead of sliding from below."
    },
    {
      "id": "strip-count-up",
      "component": "Toggle",
      "checked": true
    },
    {
      "id": "field-4",
      "component": "Field",
      "inline": true,
      "label": "count-up",
      "children": [
        "strip-count-up"
      ]
    },
    {
      "id": "text-4",
      "component": "Text",
      "variant": "caption",
      "textContent": "Off → total appears at $96.12 immediately, no ramp."
    },
    {
      "id": "strip-confetti-burst",
      "component": "Toggle",
      "checked": true
    },
    {
      "id": "field-5",
      "component": "Field",
      "inline": true,
      "label": "confetti-burst",
      "children": [
        "strip-confetti-burst"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "variant": "caption",
      "textContent": "Off → no celebration. The success is recorded but not felt."
    },
    {
      "id": "strip-focus-restore",
      "component": "Toggle",
      "checked": true
    },
    {
      "id": "field-6",
      "component": "Field",
      "inline": true,
      "label": "focus-restore",
      "children": [
        "strip-focus-restore"
      ]
    },
    {
      "id": "text-6",
      "component": "Text",
      "variant": "caption",
      "textContent": "Off → focus drops to body after submit. Tab from there starts at the page chrome."
    },
    {
      "id": "strip-announcer",
      "component": "Toggle",
      "checked": true
    },
    {
      "id": "field-7",
      "component": "Field",
      "inline": true,
      "label": "announcer",
      "children": [
        "strip-announcer"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "variant": "caption",
      "textContent": "Off → screen reader hears nothing on success. Sighted users see the same thing; AT users get silence."
    },
    {
      "id": "root",
      "component": "Grid",
      "columns": "1 2@sm",
      "gap": "3",
      "children": [
        "field",
        "text",
        "field-2",
        "text-2",
        "field-3",
        "text-3",
        "field-4",
        "text-4",
        "field-5",
        "text-5",
        "field-6",
        "text-6",
        "field-7",
        "text-7"
      ]
    }
  ]
}