@master/internal-site 0.0.0-stage → 0.1.1

package/src/demo/specimens/overflow.json

@@ -0,0 +1,53 @@
+[
+  {
+    "page": "overflow",
+    "id": "create-a-scroll-container",
+    "title": "Create a scroll container",
+    "html": [
+      "<div class=\"overflow-y-auto (height:10rem) (width:14rem)\" tabindex=\"0\" aria-label=\"Vertical collection\">\n  <div class=\"h-3xs\">Tall collection</div>\n</div>\n\n<div class=\"overflow-x-auto (width:14rem)\" tabindex=\"0\" aria-label=\"Horizontal collection\">\n  <div class=\"(height:10rem) w-xs\">Wide collection</div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "overflow-y-auto",
+      "(height:10rem)",
+      "(width:14rem)",
+      "h-3xs",
+      "overflow-x-auto",
+      "w-xs"
+    ],
+    "classLists": [
+      "overflow-y-auto (height:10rem) (width:14rem)",
+      "h-3xs",
+      "overflow-x-auto (width:14rem)",
+      "(height:10rem) w-xs"
+    ],
+    "highlighted": [
+      "overflow-y-auto",
+      "overflow-x-auto"
+    ]
+  },
+  {
+    "page": "overflow",
+    "id": "clip-without-scrolling",
+    "title": "Clip without scrolling",
+    "html": [
+      "<div class=\"overflow-clip (height:10rem) (width:14rem) r-md\">\n  <div class=\"h-3xs w-xs\">Content larger than its frame</div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "overflow-clip",
+      "(height:10rem)",
+      "(width:14rem)",
+      "r-md",
+      "h-3xs",
+      "w-xs"
+    ],
+    "classLists": [
+      "overflow-clip (height:10rem) (width:14rem) r-md",
+      "h-3xs w-xs"
+    ],
+    "highlighted": [
+      "overflow-clip"
+    ]
+  }
+]

package/src/demo/specimens/overscroll-behavior.json

@@ -0,0 +1,29 @@
+[
+  {
+    "page": "overscroll-behavior",
+    "id": "contain-nested-scrolling",
+    "title": "Contain nested scrolling",
+    "html": [
+      "<div id=\"outer-scroll\" class=\"overflow-y-auto (height:14rem) p-sm (overscroll-behavior:contain)\"\n  tabindex=\"0\" aria-label=\"Outer collection\">\n  \n  <div id=\"inner-scroll\" class=\"overflow-y-auto (height:9rem) (overscroll-behavior:contain)\"\n    tabindex=\"0\" aria-label=\"Inner collection\">\n    <div class=\"h-xs\">Inner collection</div>\n  </div>\n  <div class=\"h-xs mt-md\">Outer collection continues</div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "overflow-y-auto",
+      "(height:14rem)",
+      "p-sm",
+      "(overscroll-behavior:contain)",
+      "(height:9rem)",
+      "h-xs",
+      "mt-md"
+    ],
+    "classLists": [
+      "overflow-y-auto (height:14rem) p-sm (overscroll-behavior:contain)",
+      "overflow-y-auto (height:9rem) (overscroll-behavior:contain)",
+      "h-xs",
+      "h-xs mt-md"
+    ],
+    "highlighted": [
+      "(overscroll-behavior:contain)"
+    ]
+  }
+]

package/src/demo/specimens/padding.json

@@ -0,0 +1,84 @@
+[
+  {
+    "page": "padding",
+    "id": "add-padding-on-every-side",
+    "title": "Add padding on every side",
+    "html": [
+      "<div id=\"layout\" class=\"(width:17.5rem) max-w-full\" role=\"group\" aria-label=\"Available space\">\n  <div id=\"target\" class=\"w-fit p-md\"><div id=\"item-3\" class=\"grid (place-items:center) (height:3rem) (width:10rem)\">Content</div></div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "(width:17.5rem)",
+      "max-w-full",
+      "w-fit",
+      "p-md",
+      "grid",
+      "(place-items:center)",
+      "(height:3rem)",
+      "(width:10rem)"
+    ],
+    "classLists": [
+      "(width:17.5rem) max-w-full",
+      "w-fit p-md",
+      "grid (place-items:center) (height:3rem) (width:10rem)"
+    ],
+    "highlighted": []
+  },
+  {
+    "page": "padding",
+    "id": "set-inline-or-block-padding",
+    "title": "Set inline or block padding",
+    "html": [
+      "<!-- Horizontal writing -->\n<div id=\"layout\" class=\"(width:17.5rem) max-w-full\" role=\"group\" aria-label=\"Available space\">\n  <div id=\"target\" class=\"w-fit px-md py-sm\"><div id=\"item-3\" class=\"grid (place-items:center) (height:3rem) (width:7.5rem)\">Content</div></div>\n</div>",
+      "<!-- Vertical writing -->\n<div id=\"layout\" class=\"(width:17.5rem) max-w-full\" role=\"group\" aria-label=\"Available space\">\n  <div id=\"target\" class=\"w-fit px-md py-sm (writing-mode:vertical-rl)\"><div id=\"item-3\" class=\"grid (place-items:center) (height:3rem) (width:7.5rem)\">Content</div></div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "(width:17.5rem)",
+      "max-w-full",
+      "w-fit",
+      "px-md",
+      "py-sm",
+      "grid",
+      "(place-items:center)",
+      "(height:3rem)",
+      "(width:7.5rem)",
+      "(writing-mode:vertical-rl)"
+    ],
+    "classLists": [
+      "(width:17.5rem) max-w-full",
+      "w-fit px-md py-sm",
+      "grid (place-items:center) (height:3rem) (width:7.5rem)",
+      "(width:17.5rem) max-w-full",
+      "w-fit px-md py-sm (writing-mode:vertical-rl)",
+      "grid (place-items:center) (height:3rem) (width:7.5rem)"
+    ],
+    "highlighted": []
+  },
+  {
+    "page": "padding",
+    "id": "apply-conditionally",
+    "title": "Apply conditionally",
+    "html": [
+      "<div id=\"layout\" class=\"(width:17.5rem) max-w-full\" role=\"group\" aria-label=\"Available space\">\n  <div id=\"target\" class=\"w-fit p-md p(0)@sm\"><div id=\"item-3\" class=\"grid (place-items:center) (height:3rem) (width:10rem)\">Content</div></div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "(width:17.5rem)",
+      "max-w-full",
+      "w-fit",
+      "p-md",
+      "p(0)@sm",
+      "grid",
+      "(place-items:center)",
+      "(height:3rem)",
+      "(width:10rem)"
+    ],
+    "classLists": [
+      "(width:17.5rem) max-w-full",
+      "w-fit p-md p(0)@sm",
+      "grid (place-items:center) (height:3rem) (width:10rem)"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/place-content.json

@@ -0,0 +1,31 @@
+[
+  {
+    "page": "place-content",
+    "id": "use-separate-axis-values",
+    "title": "Use separate axis values",
+    "html": [
+      "<div id=\"layout\" class=\"grid (grid-template-columns:5rem|5rem) (grid-template-rows:3rem|3rem) content-start justify-between gap-md (height:14rem) (width:17.5rem) max-w-full\">\n  <div id=\"target\" class=\"p-sm\">01</div>\n  <div id=\"peer\" class=\"p-sm\">02</div>\n  <div id=\"item-3\" class=\"p-sm\">03</div>\n  <div id=\"item-4\" class=\"p-sm\">04</div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "grid",
+      "(grid-template-columns:5rem|5rem)",
+      "(grid-template-rows:3rem|3rem)",
+      "content-start",
+      "justify-between",
+      "gap-md",
+      "(height:14rem)",
+      "(width:17.5rem)",
+      "max-w-full",
+      "p-sm"
+    ],
+    "classLists": [
+      "grid (grid-template-columns:5rem|5rem) (grid-template-rows:3rem|3rem) content-start justify-between gap-md (height:14rem) (width:17.5rem) max-w-full",
+      "p-sm",
+      "p-sm",
+      "p-sm",
+      "p-sm"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/pointer-events.json

@@ -0,0 +1,46 @@
+[
+  {
+    "page": "pointer-events",
+    "id": "let-clicks-pass-through-an-overlay",
+    "title": "Let clicks pass through an overlay",
+    "html": [
+      "<!-- None · reaches the checkbox -->\n<div class=\"relative px-lg pb-lg pt-xl b(1) b-solid b-line-divider r-sm\">\n  <label class=\"flex items-center gap-sm\">\n    <input type=\"checkbox\"> Snap to grid\n  </label>\n  <div id=\"target\" aria-hidden=\"true\"\n    class=\"absolute inset(0) b(1) b-dashed b-violet r-sm\n           pointer-none\">\n    <span class=\"absolute right-xs top-xs font-xs fg-text-violet\">Overlay</span>\n  </div>\n</div>",
+      "<!-- Auto · overlay intercepts the pointer -->\n<div class=\"relative px-lg pb-lg pt-xl b(1) b-solid b-line-divider r-sm\">\n  <label class=\"flex items-center gap-sm\">\n    <input type=\"checkbox\"> Snap to grid\n  </label>\n  <div id=\"target\" aria-hidden=\"true\"\n    class=\"absolute inset(0) b(1) b-dashed b-violet r-sm\n           pointer-auto\">\n    <span class=\"absolute right-xs top-xs font-xs fg-text-violet\">Overlay</span>\n  </div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "relative",
+      "px-lg",
+      "pb-lg",
+      "pt-xl",
+      "b(1)",
+      "b-solid",
+      "b-line-divider",
+      "r-sm",
+      "flex",
+      "items-center",
+      "gap-sm",
+      "absolute",
+      "inset(0)",
+      "b-dashed",
+      "b-violet",
+      "pointer-none",
+      "right-xs",
+      "top-xs",
+      "font-xs",
+      "fg-text-violet",
+      "pointer-auto"
+    ],
+    "classLists": [
+      "relative px-lg pb-lg pt-xl b(1) b-solid b-line-divider r-sm",
+      "flex items-center gap-sm",
+      "absolute inset(0) b(1) b-dashed b-violet r-sm pointer-none",
+      "absolute right-xs top-xs font-xs fg-text-violet",
+      "relative px-lg pb-lg pt-xl b(1) b-solid b-line-divider r-sm",
+      "flex items-center gap-sm",
+      "absolute inset(0) b(1) b-dashed b-violet r-sm pointer-auto",
+      "absolute right-xs top-xs font-xs fg-text-violet"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/position.json

@@ -0,0 +1,29 @@
+[
+  {
+    "page": "position",
+    "id": "positioning-elements-as-sticky",
+    "title": "Positioning elements as sticky",
+    "html": [
+      "<div class=\"overflow-auto (height:15rem)\" tabindex=\"0\" aria-label=\"Scrollable asset list\">\n  <div class=\"(height:4rem)\">Scroll down</div>\n  \n  <div class=\"sticky top(0) (z-index:1)\">Pinned collection</div>\n  <div class=\"(height:35rem)\">Scrollable collection</div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "overflow-auto",
+      "(height:15rem)",
+      "(height:4rem)",
+      "sticky",
+      "top(0)",
+      "(z-index:1)",
+      "(height:35rem)"
+    ],
+    "classLists": [
+      "overflow-auto (height:15rem)",
+      "(height:4rem)",
+      "sticky top(0) (z-index:1)",
+      "(height:35rem)"
+    ],
+    "highlighted": [
+      "sticky"
+    ]
+  }
+]

package/src/demo/specimens/resize.json

@@ -0,0 +1,32 @@
+[
+  {
+    "page": "resize",
+    "id": "restrict-resizing-to-one-axis",
+    "title": "Restrict resizing to one axis",
+    "html": [
+      "<!-- Vertical only -->\n<label class=\"grid gap-sm\">\n  Notes\n  <textarea id=\"target\" rows=\"3\"\n\n  class=\"overflow-auto h(96) w(240) min-h(80)\n         min-w(160) max-h(176) max-w-full\n         (resize:vertical)\">A clear layout leaves room for the next idea.</textarea>\n</label>",
+      "<!-- Horizontal only -->\n<label class=\"grid gap-sm\">\n  Notes\n  <textarea id=\"target\" rows=\"3\"\n\n  class=\"overflow-auto h(96) w(240) min-h(80)\n         min-w(160) max-h(176) max-w-full\n         (resize:horizontal)\">A clear layout leaves room for the next idea.</textarea>\n</label>"
+    ],
+    "css": "",
+    "classes": [
+      "grid",
+      "gap-sm",
+      "overflow-auto",
+      "h(96)",
+      "w(240)",
+      "min-h(80)",
+      "min-w(160)",
+      "max-h(176)",
+      "max-w-full",
+      "(resize:vertical)",
+      "(resize:horizontal)"
+    ],
+    "classLists": [
+      "grid gap-sm",
+      "overflow-auto h(96) w(240) min-h(80) min-w(160) max-h(176) max-w-full (resize:vertical)",
+      "grid gap-sm",
+      "overflow-auto h(96) w(240) min-h(80) min-w(160) max-h(176) max-w-full (resize:horizontal)"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/screen-readers.json

@@ -0,0 +1,37 @@
+[
+  {
+    "page": "screen-readers",
+    "id": "label-icon-only-controls",
+    "title": "Label icon-only controls",
+    "html": [
+      "<form class=\"grid (justify-items:start) gap-md\">\n  <label class=\"grid gap-xs w(240) max-w-full\">\n    Project name <input type=\"text\" value=\"Canvas\" class=\"w-full\">\n  </label>\n  <button type=\"reset\"\n    class=\"inline-flex items-center gap-sm\">\n    <span id=\"target\" class=\"sr-only\">Reset project name</span>\n    <svg aria-hidden=\"true\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n      fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n      <path d=\"M4 8a6 6 0 1 1 0 5 M4 3v5h5\" />\n    </svg>\n  </button>\n</form>\n<p class=\"mb(0) mt-md font-xs fg-text-muted\">Accessible name: Reset project name</p>"
+    ],
+    "css": "",
+    "classes": [
+      "grid",
+      "(justify-items:start)",
+      "gap-md",
+      "gap-xs",
+      "w(240)",
+      "max-w-full",
+      "w-full",
+      "inline-flex",
+      "items-center",
+      "gap-sm",
+      "sr-only",
+      "mb(0)",
+      "mt-md",
+      "font-xs",
+      "fg-text-muted"
+    ],
+    "classLists": [
+      "grid (justify-items:start) gap-md",
+      "grid gap-xs w(240) max-w-full",
+      "w-full",
+      "inline-flex items-center gap-sm",
+      "sr-only",
+      "mb(0) mt-md font-xs fg-text-muted"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/scroll-padding.json

@@ -0,0 +1,29 @@
+[
+  {
+    "page": "scroll-padding",
+    "id": "reserve-space-for-fixed-headers",
+    "title": "Reserve space for fixed headers",
+    "html": [
+      "<div id=\"scrollport\" class=\"overflow-y-auto (height:14rem) scroll-pt-3xl\" tabindex=\"0\" aria-label=\"Scrollable collection\">\n  <header class=\"sticky top(0) (z-index:1) (height:3rem)\">Collection navigation</header>\n  <section id=\"overview\" class=\"h-3xs\">\n    <strong>Overview</strong>\n    <p>Collect the decisions and shared assets for this project in one place.</p>\n  </section>\n  <section id=\"details\" class=\"h-3xs\">\n    <strong>Details</strong>\n    <p>Review the structure, spacing and behavior before preparing the final handoff.</p>\n  </section>\n  <section id=\"resources\" class=\"h-3xs\">\n    <strong>Resources</strong>\n    <p>Keep source files and supporting notes beside the finished collection.</p>\n  </section>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "overflow-y-auto",
+      "(height:14rem)",
+      "scroll-pt-3xl",
+      "sticky",
+      "top(0)",
+      "(z-index:1)",
+      "(height:3rem)",
+      "h-3xs"
+    ],
+    "classLists": [
+      "overflow-y-auto (height:14rem) scroll-pt-3xl",
+      "sticky top(0) (z-index:1) (height:3rem)",
+      "h-3xs",
+      "h-3xs",
+      "h-3xs"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/scroll-snap-stop.json

@@ -0,0 +1,33 @@
+[
+  {
+    "page": "scroll-snap-stop",
+    "id": "use-sparingly",
+    "title": "Use sparingly",
+    "html": [
+      "<div id=\"scrollport\" class=\"flex overflow-x-auto gap-md (scroll-snap-type:x|mandatory)\"\n  tabindex=\"0\" aria-label=\"Horizontal panels\">\n  <article id=\"panel-1\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)\">Panel 1</article>\n  <article id=\"panel-2\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:always) (scroll-snap-align:start)\">Panel 2</article>\n  <article id=\"panel-3\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)\">Panel 3</article>\n  <article id=\"panel-4\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)\">Panel 4</article>\n  <article id=\"panel-5\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)\">Panel 5</article>\n  <article id=\"panel-6\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)\">Panel 6</article>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "flex",
+      "overflow-x-auto",
+      "gap-md",
+      "(scroll-snap-type:x|mandatory)",
+      "shrink(0)",
+      "(height:9rem)",
+      "(width:12rem)",
+      "(scroll-snap-stop:normal)",
+      "(scroll-snap-align:start)",
+      "(scroll-snap-stop:always)"
+    ],
+    "classLists": [
+      "flex overflow-x-auto gap-md (scroll-snap-type:x|mandatory)",
+      "shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)",
+      "shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:always) (scroll-snap-align:start)",
+      "shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)",
+      "shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)",
+      "shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)",
+      "shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/shape-image-threshold.json

@@ -0,0 +1,37 @@
+[
+  {
+    "page": "shape-image-threshold",
+    "id": "set-the-alpha-threshold",
+    "title": "Set the alpha threshold",
+    "html": [
+      "<!-- Threshold .2 · includes the outer ring -->\n<article class=\"flow-root w(280) max-w-full font-sm\n         (line-height:24px) fg-text-body\">\n  <img id=\"target\" src=\"/demo/mask.svg\"\n    width=\"120\" height=\"120\"\n    alt=\"Opaque blue center with a translucent outer ring\"\n    class=\"(float:left) outline(1) outline-solid outline-line-subtle\n           (shape-image-threshold:.2)\n           (shape-outside:url(/demo/mask.svg))\" />\n  <p class=\"m(0)\">\n    A clear layout leaves room for both artwork and words.\n    Follow the first lines as they pass the blue shape.\n    Their starting positions change with the available space.\n    Below the float, the paragraph returns to its full width.\n    The artwork keeps the same size throughout the comparison.\n  </p>\n</article>",
+      "<!-- Threshold .5 · follows the opaque center -->\n<article class=\"flow-root w(280) max-w-full font-sm\n         (line-height:24px) fg-text-body\">\n  <img id=\"target\" src=\"/demo/mask.svg\"\n    width=\"120\" height=\"120\"\n    alt=\"Opaque blue center with a translucent outer ring\"\n    class=\"(float:left) outline(1) outline-solid outline-line-subtle\n           (shape-image-threshold:.5)\n           (shape-outside:url(/demo/mask.svg))\" />\n  <p class=\"m(0)\">\n    A clear layout leaves room for both artwork and words.\n    Follow the first lines as they pass the blue shape.\n    Their starting positions change with the available space.\n    Below the float, the paragraph returns to its full width.\n    The artwork keeps the same size throughout the comparison.\n  </p>\n</article>"
+    ],
+    "css": "",
+    "classes": [
+      "flow-root",
+      "w(280)",
+      "max-w-full",
+      "font-sm",
+      "(line-height:24px)",
+      "fg-text-body",
+      "(float:left)",
+      "outline(1)",
+      "outline-solid",
+      "outline-line-subtle",
+      "(shape-image-threshold:.2)",
+      "(shape-outside:url(/demo/mask.svg))",
+      "m(0)",
+      "(shape-image-threshold:.5)"
+    ],
+    "classLists": [
+      "flow-root w(280) max-w-full font-sm (line-height:24px) fg-text-body",
+      "(float:left) outline(1) outline-solid outline-line-subtle (shape-image-threshold:.2) (shape-outside:url(/demo/mask.svg))",
+      "m(0)",
+      "flow-root w(280) max-w-full font-sm (line-height:24px) fg-text-body",
+      "(float:left) outline(1) outline-solid outline-line-subtle (shape-image-threshold:.5) (shape-outside:url(/demo/mask.svg))",
+      "m(0)"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/shape-margin.json

@@ -0,0 +1,40 @@
+[
+  {
+    "page": "shape-margin",
+    "id": "increase-margin-for-large-media",
+    "title": "Reserve room for a larger shape margin",
+    "html": [
+      "<!-- Margin md · 16px around the circle -->\n<article class=\"flow-root w(280) max-w-full font-sm\n         (line-height:24px) fg-text-body\">\n  <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n    width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n    class=\"(float:left) mb-xl mr-xl\n           outline(1) outline-solid outline-line-subtle fill-blue-60\n           shape-margin-md\n           (shape-outside:circle(40px)|border-box)\">\n    <circle cx=\"60\" cy=\"60\" r=\"40\" />\n  </svg>\n  <p class=\"m(0)\">\n    A clear layout leaves room for both artwork and words.\n    Follow the first lines as they pass the blue shape.\n    Their starting positions change with the available space.\n    Below the float, the paragraph returns to its full width.\n    The artwork keeps the same size throughout the comparison.\n  </p>\n</article>",
+      "<!-- Margin xl · 32px around the circle -->\n<article class=\"flow-root w(280) max-w-full font-sm\n         (line-height:24px) fg-text-body\">\n  <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n    width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n    class=\"(float:left) mb-xl mr-xl\n           outline(1) outline-solid outline-line-subtle fill-blue-60\n           shape-margin-xl\n           (shape-outside:circle(40px)|border-box)\">\n    <circle cx=\"60\" cy=\"60\" r=\"40\" />\n  </svg>\n  <p class=\"m(0)\">\n    A clear layout leaves room for both artwork and words.\n    Follow the first lines as they pass the blue shape.\n    Their starting positions change with the available space.\n    Below the float, the paragraph returns to its full width.\n    The artwork keeps the same size throughout the comparison.\n  </p>\n</article>"
+    ],
+    "css": "",
+    "classes": [
+      "flow-root",
+      "w(280)",
+      "max-w-full",
+      "font-sm",
+      "(line-height:24px)",
+      "fg-text-body",
+      "(float:left)",
+      "mb-xl",
+      "mr-xl",
+      "outline(1)",
+      "outline-solid",
+      "outline-line-subtle",
+      "fill-blue-60",
+      "shape-margin-md",
+      "(shape-outside:circle(40px)|border-box)",
+      "m(0)",
+      "shape-margin-xl"
+    ],
+    "classLists": [
+      "flow-root w(280) max-w-full font-sm (line-height:24px) fg-text-body",
+      "(float:left) mb-xl mr-xl outline(1) outline-solid outline-line-subtle fill-blue-60 shape-margin-md (shape-outside:circle(40px)|border-box)",
+      "m(0)",
+      "flow-root w(280) max-w-full font-sm (line-height:24px) fg-text-body",
+      "(float:left) mb-xl mr-xl outline(1) outline-solid outline-line-subtle fill-blue-60 shape-margin-xl (shape-outside:circle(40px)|border-box)",
+      "m(0)"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/shape-outside.json

@@ -0,0 +1,37 @@
+[
+  {
+    "page": "shape-outside",
+    "id": "wrap-text-around-a-circle",
+    "title": "Wrap text around a circle",
+    "html": [
+      "<!-- Normal float · rectangular wrap -->\n<article class=\"flow-root w(280) max-w-full font-sm\n         (line-height:24px) fg-text-body\">\n  <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n    width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n    class=\"(float:left) outline(1) outline-solid outline-line-subtle\n           fill-blue-60 (shape-outside:none)\">\n    <circle cx=\"60\" cy=\"60\" r=\"48\" />\n  </svg>\n  <p class=\"m(0)\">\n    A clear layout leaves room for both artwork and words.\n    Follow the first lines as they pass the blue shape.\n    Their starting positions change with the available space.\n    Below the float, the paragraph returns to its full width.\n    The artwork keeps the same size throughout the comparison.\n  </p>\n</article>",
+      "<!-- Circle · text follows the curved boundary -->\n<article class=\"flow-root w(280) max-w-full font-sm\n         (line-height:24px) fg-text-body\">\n  <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n    width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n    class=\"(float:left) outline(1) outline-solid outline-line-subtle\n           fill-blue-60\n           (shape-outside:circle(48px)|border-box)\">\n    <circle cx=\"60\" cy=\"60\" r=\"48\" />\n  </svg>\n  <p class=\"m(0)\">\n    A clear layout leaves room for both artwork and words.\n    Follow the first lines as they pass the blue shape.\n    Their starting positions change with the available space.\n    Below the float, the paragraph returns to its full width.\n    The artwork keeps the same size throughout the comparison.\n  </p>\n</article>"
+    ],
+    "css": "",
+    "classes": [
+      "flow-root",
+      "w(280)",
+      "max-w-full",
+      "font-sm",
+      "(line-height:24px)",
+      "fg-text-body",
+      "(float:left)",
+      "outline(1)",
+      "outline-solid",
+      "outline-line-subtle",
+      "fill-blue-60",
+      "(shape-outside:none)",
+      "m(0)",
+      "(shape-outside:circle(48px)|border-box)"
+    ],
+    "classLists": [
+      "flow-root w(280) max-w-full font-sm (line-height:24px) fg-text-body",
+      "(float:left) outline(1) outline-solid outline-line-subtle fill-blue-60 (shape-outside:none)",
+      "m(0)",
+      "flow-root w(280) max-w-full font-sm (line-height:24px) fg-text-body",
+      "(float:left) outline(1) outline-solid outline-line-subtle fill-blue-60 (shape-outside:circle(48px)|border-box)",
+      "m(0)"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/stroke-width.json

@@ -0,0 +1,27 @@
+[
+  {
+    "page": "stroke-width",
+    "id": "pair-width-with-stroke-color",
+    "title": "Pair width with stroke color",
+    "html": [
+      "<!-- Normal · 6px after viewBox scaling -->\n<svg id=\"target\" role=\"img\"\n  aria-label=\"Scaling horizontal stroke\"\n  width=\"96\" height=\"96\" viewBox=\"0 0 24 24\"\n  class=\"block fg-blue-60 (fill:none) stroke-current\n         (stroke-linecap:round) (stroke-width:1.5)\">\n  <path d=\"M4 12h16\" />\n</svg>",
+      "<!-- Non-scaling · 1.5px on screen -->\n<svg id=\"target\" role=\"img\"\n  aria-label=\"Non-scaling horizontal stroke\"\n  width=\"96\" height=\"96\" viewBox=\"0 0 24 24\"\n  class=\"block fg-blue-60 (fill:none) stroke-current\n         (stroke-linecap:round) (stroke-width:1.5)\">\n  <path class=\"(vector-effect:non-scaling-stroke)\"\n    d=\"M4 12h16\" />\n</svg>"
+    ],
+    "css": "",
+    "classes": [
+      "block",
+      "fg-blue-60",
+      "(fill:none)",
+      "stroke-current",
+      "(stroke-linecap:round)",
+      "(stroke-width:1.5)",
+      "(vector-effect:non-scaling-stroke)"
+    ],
+    "classLists": [
+      "block fg-blue-60 (fill:none) stroke-current (stroke-linecap:round) (stroke-width:1.5)",
+      "block fg-blue-60 (fill:none) stroke-current (stroke-linecap:round) (stroke-width:1.5)",
+      "(vector-effect:non-scaling-stroke)"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/text-fill-color.json

@@ -0,0 +1,23 @@
+[
+  {
+    "page": "text-fill-color",
+    "id": "use-the-current-color",
+    "title": "Use the current color",
+    "html": [
+      "<!-- Inherited blue fill · local foreground reset -->\n<div class=\"font-2xl leading-xl fg-violet-50 text-fill-color-blue-50\">\n  Parent <span id=\"target\" class=\"text-fill-color-current\">and child</span>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "font-2xl",
+      "leading-xl",
+      "fg-violet-50",
+      "text-fill-color-blue-50",
+      "text-fill-color-current"
+    ],
+    "classLists": [
+      "font-2xl leading-xl fg-violet-50 text-fill-color-blue-50",
+      "text-fill-color-current"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/text-stroke-width.json

@@ -0,0 +1,32 @@
+[
+  {
+    "page": "text-stroke-width",
+    "id": "set-text-stroke-width",
+    "title": "Set text stroke width",
+    "html": [
+      "<!-- Stroke width · 0 -->\n<p id=\"target\"\n  class=\"inline-block max-w-full m(0) font-4xl font-semibold (line-height:1.5)\n         text-fill-color-current (-webkit-text-stroke:0) (-webkit-text-stroke-color:var(--color-blue-50))\"\n>\n  Outline\n</p>",
+      "<!-- Stroke width · 1px -->\n<p id=\"target\"\n  class=\"inline-block max-w-full m(0) font-4xl font-semibold (line-height:1.5)\n         text-fill-color-current (-webkit-text-stroke:1px) (-webkit-text-stroke-color:var(--color-blue-50))\"\n>\n  Outline\n</p>",
+      "<!-- Stroke width · 2px -->\n<p id=\"target\"\n  class=\"inline-block max-w-full m(0) font-4xl font-semibold (line-height:1.5)\n         text-fill-color-current (-webkit-text-stroke:2px) (-webkit-text-stroke-color:var(--color-blue-50))\"\n>\n  Outline\n</p>"
+    ],
+    "css": "",
+    "classes": [
+      "inline-block",
+      "max-w-full",
+      "m(0)",
+      "font-4xl",
+      "font-semibold",
+      "(line-height:1.5)",
+      "text-fill-color-current",
+      "(-webkit-text-stroke:0)",
+      "(-webkit-text-stroke-color:var(--color-blue-50))",
+      "(-webkit-text-stroke:1px)",
+      "(-webkit-text-stroke:2px)"
+    ],
+    "classLists": [
+      "inline-block max-w-full m(0) font-4xl font-semibold (line-height:1.5) text-fill-color-current (-webkit-text-stroke:0) (-webkit-text-stroke-color:var(--color-blue-50))",
+      "inline-block max-w-full m(0) font-4xl font-semibold (line-height:1.5) text-fill-color-current (-webkit-text-stroke:1px) (-webkit-text-stroke-color:var(--color-blue-50))",
+      "inline-block max-w-full m(0) font-4xl font-semibold (line-height:1.5) text-fill-color-current (-webkit-text-stroke:2px) (-webkit-text-stroke-color:var(--color-blue-50))"
+    ],
+    "highlighted": []
+  }
+]