{
  "name": "responsive-wrap-at-pattern",
  "kind": "block",
  "primary": "div",
  "page": "/site/patterns/responsive.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<div>\n  <h3>Responsive wrap — <code>wrap-at</code></h3>\n  <p>Boolean attributes like <code>wrap</code> can't use <code>@bp</code> value syntax. Use <code>wrap-at=\"bp\"</code> to enable wrapping from a named breakpoint upward. The existing <code>wrap</code> attribute (always-wrap) is unchanged.</p>\n  <code-ui language=\"html\">&lt;!-- Toolbar: single-row on desktop, wraps to multiple lines on mobile --&gt;\n&lt;row-ui gap=\"2 3@md\" wrap-at=\"sm\"&gt;\n  &lt;input-ui placeholder=\"Search...\"&gt;&lt;/input-ui&gt;\n  &lt;select-ui&gt;&lt;option&gt;All statuses&lt;/option&gt;&lt;/select-ui&gt;\n  &lt;button-ui text=\"Export\" variant=\"outline\"&gt;&lt;/button-ui&gt;\n  &lt;button-ui text=\"+ New\" variant=\"primary\"&gt;&lt;/button-ui&gt;\n&lt;/row-ui&gt;</code-ui>\n  <p>Unlike <code>@bp</code> value-annotations, <code>wrap-at</code> is a standalone attribute that takes a single breakpoint name — no multi-value parsing.</p>\n  </div>",
  "source": "site/pages/patterns/responsive.html",
  "metadata": {
    "domain": "layout",
    "description": "Responsive flex wrap via wrap-at — enables flex-wrap from named breakpoint upward; for boolean attrs that cannot use @bp value syntax.",
    "keywords": [
      "responsive",
      "wrap-at",
      "flex",
      "wrap",
      "breakpoint",
      "boolean",
      "attribute",
      "toolbar"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "code",
      "component": "Code",
      "textContent": "wrap-at"
    },
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Responsive wrap —",
      "children": [
        "code"
      ]
    },
    {
      "id": "code-2",
      "component": "Code",
      "textContent": "wrap"
    },
    {
      "id": "code-3",
      "component": "Code",
      "textContent": "@bp"
    },
    {
      "id": "code-4",
      "component": "Code",
      "textContent": "wrap-at=\"bp\""
    },
    {
      "id": "code-5",
      "component": "Code",
      "textContent": "wrap"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "textContent": "Boolean attributes like can't use value syntax. Use to enable wrapping from a named breakpoint upward. The existing attribute (always-wrap) is unchanged.",
      "children": [
        "code-2",
        "code-3",
        "code-4",
        "code-5"
      ]
    },
    {
      "id": "code-6",
      "component": "Code",
      "language": "html",
      "textContent": "&lt;!-- Toolbar: single-row on desktop, wraps to multiple lines on mobile --&gt; &lt;row-ui gap=\"2 3@md\" wrap-at=\"sm\"&gt; &lt;input-ui placeholder=\"Search...\"&gt;&lt;/input-ui&gt; &lt;select-ui&gt;&lt;option&gt;All statuses&lt;/option&gt;&lt;/select-ui&gt; &lt;button-ui text=\"Export\" variant=\"outline\"&gt;&lt;/button-ui&gt; &lt;button-ui text=\"+ New\" variant=\"primary\"&gt;&lt;/button-ui&gt; &lt;/row-ui&gt;"
    },
    {
      "id": "code-7",
      "component": "Code",
      "textContent": "@bp"
    },
    {
      "id": "code-8",
      "component": "Code",
      "textContent": "wrap-at"
    },
    {
      "id": "text-3",
      "component": "Text",
      "variant": "body",
      "textContent": "Unlike value-annotations, is a standalone attribute that takes a single breakpoint name — no multi-value parsing.",
      "children": [
        "code-7",
        "code-8"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "children": [
        "text",
        "text-2",
        "code-6",
        "text-3"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "section"
      ]
    }
  ]
}