@master/internal-site 0.0.0-stage → 0.1.0

package/src/demo/specimens/background-image.json

@@ -0,0 +1,25 @@
+[
+  {
+    "page": "background-image",
+    "id": "add-a-background-image",
+    "title": "Add a background image",
+    "html": [
+      "<!-- Local SVG · centered cover -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n  class=\"h(160) w-xs max-w-full (background-position:center) (background-size:cover) (background-repeat:no-repeat)\n         bg-surface-inset (background-image:url(/demo/landscape.svg))\"\n></div>"
+    ],
+    "css": "",
+    "classes": [
+      "h(160)",
+      "w-xs",
+      "max-w-full",
+      "(background-position:center)",
+      "(background-size:cover)",
+      "(background-repeat:no-repeat)",
+      "bg-surface-inset",
+      "(background-image:url(/demo/landscape.svg))"
+    ],
+    "classLists": [
+      "h(160) w-xs max-w-full (background-position:center) (background-size:cover) (background-repeat:no-repeat) bg-surface-inset (background-image:url(/demo/landscape.svg))"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/background-origin.json

@@ -0,0 +1,36 @@
+[
+  {
+    "page": "background-origin",
+    "id": "choose-the-background-positioning-area",
+    "title": "Choose the background positioning area",
+    "html": [
+      "<!-- Border origin · x 0, y 0 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n  class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),|transparent))\n         (background-clip:border-box) (background-repeat:no-repeat) (background-origin:border-box)\n         (background-position:0|0) (background-size:80px|50px)\n         (background-image:url(/demo/landscape.svg))\"\n></div>",
+      "<!-- Padding origin · x 8, y 8 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n  class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),|transparent))\n         (background-clip:border-box) (background-repeat:no-repeat) (background-origin:padding-box)\n         (background-position:0|0) (background-size:80px|50px)\n         (background-image:url(/demo/landscape.svg))\"\n></div>",
+      "<!-- Content origin · x 32, y 32 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n  class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),|transparent))\n         (background-clip:border-box) (background-repeat:no-repeat) (background-origin:content-box)\n         (background-position:0|0) (background-size:80px|50px)\n         (background-image:url(/demo/landscape.svg))\"\n></div>"
+    ],
+    "css": "",
+    "classes": [
+      "h(176)",
+      "w(280)",
+      "max-w-full",
+      "p-lg",
+      "b(8)",
+      "b-dashed",
+      "(border-color:color-mix(var(--color-violet-50),|transparent))",
+      "(background-clip:border-box)",
+      "(background-repeat:no-repeat)",
+      "(background-origin:border-box)",
+      "(background-position:0|0)",
+      "(background-size:80px|50px)",
+      "(background-image:url(/demo/landscape.svg))",
+      "(background-origin:padding-box)",
+      "(background-origin:content-box)"
+    ],
+    "classLists": [
+      "h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),|transparent)) (background-clip:border-box) (background-repeat:no-repeat) (background-origin:border-box) (background-position:0|0) (background-size:80px|50px) (background-image:url(/demo/landscape.svg))",
+      "h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),|transparent)) (background-clip:border-box) (background-repeat:no-repeat) (background-origin:padding-box) (background-position:0|0) (background-size:80px|50px) (background-image:url(/demo/landscape.svg))",
+      "h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),|transparent)) (background-clip:border-box) (background-repeat:no-repeat) (background-origin:content-box) (background-position:0|0) (background-size:80px|50px) (background-image:url(/demo/landscape.svg))"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/background-size.json

@@ -0,0 +1,29 @@
+[
+  {
+    "page": "background-size",
+    "id": "cover-a-frame",
+    "title": "Cover a frame",
+    "html": [
+      "<!-- Whole source · 8:5 aspect ratio -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n  class=\"w-xs max-w-full (aspect-ratio:8/5) (background-position:center) (background-size:contain) (background-repeat:no-repeat)\n         (background-image:url(/demo/landscape.svg))\"\n></div>",
+      "<!-- Cover · fill and crop -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n  class=\"h(160) w-xs max-w-full (background-position:center) (background-size:cover) (background-repeat:no-repeat)\n         bg-surface-inset (background-image:url(/demo/landscape.svg))\"\n></div>"
+    ],
+    "css": "",
+    "classes": [
+      "w-xs",
+      "max-w-full",
+      "(aspect-ratio:8/5)",
+      "(background-position:center)",
+      "(background-size:contain)",
+      "(background-repeat:no-repeat)",
+      "(background-image:url(/demo/landscape.svg))",
+      "h(160)",
+      "(background-size:cover)",
+      "bg-surface-inset"
+    ],
+    "classLists": [
+      "w-xs max-w-full (aspect-ratio:8/5) (background-position:center) (background-size:contain) (background-repeat:no-repeat) (background-image:url(/demo/landscape.svg))",
+      "h(160) w-xs max-w-full (background-position:center) (background-size:cover) (background-repeat:no-repeat) bg-surface-inset (background-image:url(/demo/landscape.svg))"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/border-collapse.json

@@ -0,0 +1,45 @@
+[
+  {
+    "page": "border-collapse",
+    "id": "match-border-spacing-to-the-mode",
+    "title": "Match border spacing to the mode",
+    "html": [
+      "<!-- Collapse · spacing ignored -->\n<table id=\"target\"\n  class=\"w(240) max-w-full (border-collapse:collapse)\n         border-spacing-xs font-sm text-left\n         fg-text-body (table-layout:fixed)\">\n  <caption class=\"pb-sm font-semibold text-left\">\n    Project assets\n  </caption>\n  <tbody>\n    <tr>\n      <th scope=\"row\"\n        class=\"p-xs b(2) b-solid b-blue font-medium\">\n        Design\n      </th>\n      <td class=\"p-xs b(2) b-solid b-blue\">12 files</td>\n    </tr>\n    <tr>\n      <th scope=\"row\"\n        class=\"p-xs b(2) b-solid b-blue font-medium\">\n        Research\n      </th>\n      <td class=\"p-xs b(2) b-solid b-blue\">8 files</td>\n    </tr>\n  </tbody>\n</table>",
+      "<!-- Separate · 8px spacing -->\n<table id=\"target\"\n  class=\"w(240) max-w-full (border-collapse:separate)\n         border-spacing-xs font-sm text-left\n         fg-text-body (table-layout:fixed)\">\n  <caption class=\"pb-sm font-semibold text-left\">\n    Project assets\n  </caption>\n  <tbody>\n    <tr>\n      <th scope=\"row\"\n        class=\"p-xs b(2) b-solid b-blue font-medium\">\n        Design\n      </th>\n      <td class=\"p-xs b(2) b-solid b-blue\">12 files</td>\n    </tr>\n    <tr>\n      <th scope=\"row\"\n        class=\"p-xs b(2) b-solid b-blue font-medium\">\n        Research\n      </th>\n      <td class=\"p-xs b(2) b-solid b-blue\">8 files</td>\n    </tr>\n  </tbody>\n</table>"
+    ],
+    "css": "",
+    "classes": [
+      "w(240)",
+      "max-w-full",
+      "(border-collapse:collapse)",
+      "border-spacing-xs",
+      "font-sm",
+      "text-left",
+      "fg-text-body",
+      "(table-layout:fixed)",
+      "pb-sm",
+      "font-semibold",
+      "p-xs",
+      "b(2)",
+      "b-solid",
+      "b-blue",
+      "font-medium",
+      "(border-collapse:separate)"
+    ],
+    "classLists": [
+      "w(240) max-w-full (border-collapse:collapse) border-spacing-xs font-sm text-left fg-text-body (table-layout:fixed)",
+      "pb-sm font-semibold text-left",
+      "p-xs b(2) b-solid b-blue font-medium",
+      "p-xs b(2) b-solid b-blue",
+      "p-xs b(2) b-solid b-blue font-medium",
+      "p-xs b(2) b-solid b-blue",
+      "w(240) max-w-full (border-collapse:separate) border-spacing-xs font-sm text-left fg-text-body (table-layout:fixed)",
+      "pb-sm font-semibold text-left",
+      "p-xs b(2) b-solid b-blue font-medium",
+      "p-xs b(2) b-solid b-blue",
+      "p-xs b(2) b-solid b-blue font-medium",
+      "p-xs b(2) b-solid b-blue"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/border-color.json

@@ -0,0 +1,35 @@
+[
+  {
+    "page": "border-color",
+    "id": "set-border-color",
+    "title": "Set border color",
+    "html": [
+      "<!-- Primary · blue -->\n<div id=\"target\"\n  class=\"flex items-center justify-center h(96)\n         w(240) max-w-full p-md b(2) b-solid (border-color:currentcolor)\n         b-blue font-md bg-surface-inset\n         fg-text-body box-border\">\n  Preview panel\n</div>",
+      "<!-- Comparison · violet -->\n<div id=\"target\"\n  class=\"flex items-center justify-center h(96)\n         w(240) max-w-full p-md b(2) b-solid (border-color:currentcolor)\n         b-violet font-md bg-surface-inset\n         fg-text-body box-border\">\n  Preview panel\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "flex",
+      "items-center",
+      "justify-center",
+      "h(96)",
+      "w(240)",
+      "max-w-full",
+      "p-md",
+      "b(2)",
+      "b-solid",
+      "(border-color:currentcolor)",
+      "b-blue",
+      "font-md",
+      "bg-surface-inset",
+      "fg-text-body",
+      "box-border",
+      "b-violet"
+    ],
+    "classLists": [
+      "flex items-center justify-center h(96) w(240) max-w-full p-md b(2) b-solid (border-color:currentcolor) b-blue font-md bg-surface-inset fg-text-body box-border",
+      "flex items-center justify-center h(96) w(240) max-w-full p-md b(2) b-solid (border-color:currentcolor) b-violet font-md bg-surface-inset fg-text-body box-border"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/border-image-repeat.json

@@ -0,0 +1,50 @@
+[
+  {
+    "page": "border-image-repeat",
+    "id": "round-repeated-edge-slices",
+    "title": "Round repeated edge slices",
+    "html": [
+      "<!-- Stretch · one stretched tile -->\n<div id=\"target\"\n  class=\"flex items-center justify-center h(130)\n         w(250) max-w-full p-md b(12) b-solid b-blue-60\n         (border-image-repeat:stretch)\n         (border-image-slice:24)\n         (border-image-source:url('/demo/border-grid.svg'))\n         (border-image-width:1) font-md bg-surface-base\n         fg-text-body box-border\">\n  <span class=\"px-xs py-3xs bg-surface-base fg-text-body\">\n    Edge sample\n  </span>\n</div>",
+      "<!-- Repeat · natural tiles, clipped ends -->\n<div id=\"target\"\n  class=\"flex items-center justify-center h(130)\n         w(250) max-w-full p-md b(12) b-solid b-blue-60\n         (border-image-repeat:repeat)\n         (border-image-slice:24)\n         (border-image-source:url('/demo/border-grid.svg'))\n         (border-image-width:1) font-md bg-surface-base\n         fg-text-body box-border\">\n  <span class=\"px-xs py-3xs bg-surface-base fg-text-body\">\n    Edge sample\n  </span>\n</div>",
+      "<!-- Round · whole tiles resized to fit -->\n<div id=\"target\"\n  class=\"flex items-center justify-center h(130)\n         w(250) max-w-full p-md b(12) b-solid b-blue-60\n         (border-image-repeat:round)\n         (border-image-slice:24)\n         (border-image-source:url('/demo/border-grid.svg'))\n         (border-image-width:1) font-md bg-surface-base\n         fg-text-body box-border\">\n  <span class=\"px-xs py-3xs bg-surface-base fg-text-body\">\n    Edge sample\n  </span>\n</div>",
+      "<!-- Space · whole tiles with gaps -->\n<div id=\"target\"\n  class=\"flex items-center justify-center h(130)\n         w(250) max-w-full p-md b(12) b-solid b-blue-60\n         (border-image-repeat:space)\n         (border-image-slice:24)\n         (border-image-source:url('/demo/border-grid.svg'))\n         (border-image-width:1) font-md bg-surface-base\n         fg-text-body box-border\">\n  <span class=\"px-xs py-3xs bg-surface-base fg-text-body\">\n    Edge sample\n  </span>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "flex",
+      "items-center",
+      "justify-center",
+      "h(130)",
+      "w(250)",
+      "max-w-full",
+      "p-md",
+      "b(12)",
+      "b-solid",
+      "b-blue-60",
+      "(border-image-repeat:stretch)",
+      "(border-image-slice:24)",
+      "(border-image-source:url('/demo/border-grid.svg'))",
+      "(border-image-width:1)",
+      "font-md",
+      "bg-surface-base",
+      "fg-text-body",
+      "box-border",
+      "px-xs",
+      "py-3xs",
+      "(border-image-repeat:repeat)",
+      "(border-image-repeat:round)",
+      "(border-image-repeat:space)"
+    ],
+    "classLists": [
+      "flex items-center justify-center h(130) w(250) max-w-full p-md b(12) b-solid b-blue-60 (border-image-repeat:stretch) (border-image-slice:24) (border-image-source:url('/demo/border-grid.svg')) (border-image-width:1) font-md bg-surface-base fg-text-body box-border",
+      "px-xs py-3xs bg-surface-base fg-text-body",
+      "flex items-center justify-center h(130) w(250) max-w-full p-md b(12) b-solid b-blue-60 (border-image-repeat:repeat) (border-image-slice:24) (border-image-source:url('/demo/border-grid.svg')) (border-image-width:1) font-md bg-surface-base fg-text-body box-border",
+      "px-xs py-3xs bg-surface-base fg-text-body",
+      "flex items-center justify-center h(130) w(250) max-w-full p-md b(12) b-solid b-blue-60 (border-image-repeat:round) (border-image-slice:24) (border-image-source:url('/demo/border-grid.svg')) (border-image-width:1) font-md bg-surface-base fg-text-body box-border",
+      "px-xs py-3xs bg-surface-base fg-text-body",
+      "flex items-center justify-center h(130) w(250) max-w-full p-md b(12) b-solid b-blue-60 (border-image-repeat:space) (border-image-slice:24) (border-image-source:url('/demo/border-grid.svg')) (border-image-width:1) font-md bg-surface-base fg-text-body box-border",
+      "px-xs py-3xs bg-surface-base fg-text-body"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/border-image-slice.json

@@ -0,0 +1,45 @@
+[
+  {
+    "page": "border-image-slice",
+    "id": "slice-the-source-image",
+    "title": "Slice the source image",
+    "html": [
+      "<!-- 24 source units · 12px border paint -->\n<img src=\"/demo/border-grid.svg\" width=\"96\" height=\"96\"\n  alt=\"96 × 96 source with 24-unit violet corners\"\n  class=\"block mb-md\" />\n<div id=\"target\"\n  class=\"flex items-center justify-center h(130)\n         w(250) max-w-full p-md b(12) b-solid b-blue-60\n         (border-image-repeat:stretch)\n         (border-image-slice:24)\n         (border-image-source:url('/demo/border-grid.svg'))\n         (border-image-width:1) font-md bg-surface-base\n         fg-text-body box-border\">\n  <span class=\"px-xs py-3xs bg-surface-base fg-text-body\">\n    Edge sample\n  </span>\n</div>",
+      "<!-- 25% of 96 · same slice -->\n<div id=\"target\"\n  class=\"flex items-center justify-center h(130)\n         w(250) max-w-full p-md b(12) b-solid b-blue-60\n         (border-image-repeat:stretch)\n         (border-image-slice:25%)\n         (border-image-source:url('/demo/border-grid.svg'))\n         (border-image-width:1) font-md bg-surface-base\n         fg-text-body box-border\">\n  <span class=\"px-xs py-3xs bg-surface-base fg-text-body\">\n    Edge sample\n  </span>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "block",
+      "mb-md",
+      "flex",
+      "items-center",
+      "justify-center",
+      "h(130)",
+      "w(250)",
+      "max-w-full",
+      "p-md",
+      "b(12)",
+      "b-solid",
+      "b-blue-60",
+      "(border-image-repeat:stretch)",
+      "(border-image-slice:24)",
+      "(border-image-source:url('/demo/border-grid.svg'))",
+      "(border-image-width:1)",
+      "font-md",
+      "bg-surface-base",
+      "fg-text-body",
+      "box-border",
+      "px-xs",
+      "py-3xs",
+      "(border-image-slice:25%)"
+    ],
+    "classLists": [
+      "block mb-md",
+      "flex items-center justify-center h(130) w(250) max-w-full p-md b(12) b-solid b-blue-60 (border-image-repeat:stretch) (border-image-slice:24) (border-image-source:url('/demo/border-grid.svg')) (border-image-width:1) font-md bg-surface-base fg-text-body box-border",
+      "px-xs py-3xs bg-surface-base fg-text-body",
+      "flex items-center justify-center h(130) w(250) max-w-full p-md b(12) b-solid b-blue-60 (border-image-repeat:stretch) (border-image-slice:25%) (border-image-source:url('/demo/border-grid.svg')) (border-image-width:1) font-md bg-surface-base fg-text-body box-border",
+      "px-xs py-3xs bg-surface-base fg-text-body"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/border-radius.json

@@ -0,0 +1,30 @@
+[
+  {
+    "page": "border-radius",
+    "id": "use-a-radius-token",
+    "title": "Use a radius token",
+    "html": [
+      "<!-- Radius only · child corners stay square -->\n<div id=\"target\"\n  class=\"w(240) max-w-full r-2xl bg-surface-inset\n         box-border\">\n  <img src=\"/demo/landscape.svg\"\n    alt=\"Blue and violet mountains\"\n    width=\"320\" height=\"200\"\n    class=\"block h-auto w-full\" />\n</div>",
+      "<!-- Radius + overflow hidden · child is clipped -->\n<div id=\"target\"\n  class=\"overflow-hidden w(240) max-w-full r-2xl\n         bg-surface-inset box-border\">\n  <img src=\"/demo/landscape.svg\"\n    alt=\"Blue and violet mountains\"\n    width=\"320\" height=\"200\"\n    class=\"block h-auto w-full\" />\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "w(240)",
+      "max-w-full",
+      "r-2xl",
+      "bg-surface-inset",
+      "box-border",
+      "block",
+      "h-auto",
+      "w-full",
+      "overflow-hidden"
+    ],
+    "classLists": [
+      "w(240) max-w-full r-2xl bg-surface-inset box-border",
+      "block h-auto w-full",
+      "overflow-hidden w(240) max-w-full r-2xl bg-surface-inset box-border",
+      "block h-auto w-full"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/box-decoration-break.json

@@ -0,0 +1,35 @@
+[
+  {
+    "page": "box-decoration-break",
+    "id": "clone",
+    "title": "Clone",
+    "html": [
+      "<!-- Slice · shared decoration -->\n<div class=\"w(220) max-w-full font-lg (line-height:2.2)\">\n  <span id=\"target\"\n    class=\"px-xs py-3xs b(1) b-solid b-blue r-sm\n         bg-blue-10 fg-blue-80\n         (box-decoration-break:slice)\">\n    Clear thinking needs room to take shape.\n  </span>\n</div>",
+      "<!-- Clone · each fragment decorated -->\n<div class=\"w(220) max-w-full font-lg (line-height:2.2)\">\n  <span id=\"target\"\n    class=\"px-xs py-3xs b(1) b-solid b-blue r-sm\n         bg-blue-10 fg-blue-80\n         (box-decoration-break:clone)\">\n    Clear thinking needs room to take shape.\n  </span>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "w(220)",
+      "max-w-full",
+      "font-lg",
+      "(line-height:2.2)",
+      "px-xs",
+      "py-3xs",
+      "b(1)",
+      "b-solid",
+      "b-blue",
+      "r-sm",
+      "bg-blue-10",
+      "fg-blue-80",
+      "(box-decoration-break:slice)",
+      "(box-decoration-break:clone)"
+    ],
+    "classLists": [
+      "w(220) max-w-full font-lg (line-height:2.2)",
+      "px-xs py-3xs b(1) b-solid b-blue r-sm bg-blue-10 fg-blue-80 (box-decoration-break:slice)",
+      "w(220) max-w-full font-lg (line-height:2.2)",
+      "px-xs py-3xs b(1) b-solid b-blue r-sm bg-blue-10 fg-blue-80 (box-decoration-break:clone)"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/box-shadow.json

@@ -0,0 +1,33 @@
+[
+  {
+    "page": "box-shadow",
+    "id": "customize-mode-specific-tokens",
+    "title": "Customize mode-specific tokens",
+    "html": [
+      "<!-- Configured small shadow · two theme definitions -->\n<article id=\"target\"\n  class=\"w(240) max-w-full p-lg r-md bg-surface-base\n         fg-text-body shadow-sm box-border\">\n  <h4 class=\"m(0) font-lg\">\n    Workspace library\n  </h4>\n  <p class=\"mx(0) mb(0) mt-sm font-sm\">\n    Shared assets and components.\n  </p>\n</article>"
+    ],
+    "css": "@theme {\n  --shadow-sm: 0 0 0 1px oklch(0% 0 none / .08),\n      0 6px 12px -2px oklch(0% 0 none / .14);\n}\n\n@media (prefers-color-scheme: light) { :root, :host {\n  --shadow-sm: 0 0 0 1px oklch(0% 0 none / .08),\n    0 6px 12px -2px oklch(0% 0 none / .14);\n} }\n\n\n\n@media (prefers-color-scheme: dark) { :root, :host {\n  --shadow-sm: 0 0 0 1px oklch(100% 0 none / .16),\n    0 6px 12px -2px oklch(0% 0 none / .5);\n} }\n\n",
+    "classes": [
+      "w(240)",
+      "max-w-full",
+      "p-lg",
+      "r-md",
+      "bg-surface-base",
+      "fg-text-body",
+      "shadow-sm",
+      "box-border",
+      "m(0)",
+      "font-lg",
+      "mx(0)",
+      "mb(0)",
+      "mt-sm",
+      "font-sm"
+    ],
+    "classLists": [
+      "w(240) max-w-full p-lg r-md bg-surface-base fg-text-body shadow-sm box-border",
+      "m(0) font-lg",
+      "mx(0) mb(0) mt-sm font-sm"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/clear.json

@@ -0,0 +1,77 @@
+[
+  {
+    "page": "clear",
+    "id": "clearing-both-left-and-right-floats",
+    "title": "Clearing both left and right floats",
+    "html": [
+      "<div>\n  <div class=\"(float:left) (height:8.5rem) (width:34%)\">Left</div>\n  <div class=\"(float:right) (height:5.5rem) (width:34%)\">Right</div>\n  \n  <div class=\"(clear:both)\">Clear</div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "(float:left)",
+      "(height:8.5rem)",
+      "(width:34%)",
+      "(float:right)",
+      "(height:5.5rem)",
+      "(clear:both)"
+    ],
+    "classLists": [
+      "(float:left) (height:8.5rem) (width:34%)",
+      "(float:right) (height:5.5rem) (width:34%)",
+      "(clear:both)"
+    ],
+    "highlighted": [
+      "(clear:both)"
+    ]
+  },
+  {
+    "page": "clear",
+    "id": "clearing-left-floats",
+    "title": "Clearing left floats",
+    "html": [
+      "<div>\n  <div class=\"(float:left) (height:4.5rem) (width:34%)\">Left</div>\n  <div class=\"(float:right) (height:8.5rem) (width:34%)\">Right</div>\n  \n  <div class=\"(clear:left)\">Clear</div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "(float:left)",
+      "(height:4.5rem)",
+      "(width:34%)",
+      "(float:right)",
+      "(height:8.5rem)",
+      "(clear:left)"
+    ],
+    "classLists": [
+      "(float:left) (height:4.5rem) (width:34%)",
+      "(float:right) (height:8.5rem) (width:34%)",
+      "(clear:left)"
+    ],
+    "highlighted": [
+      "(clear:left)"
+    ]
+  },
+  {
+    "page": "clear",
+    "id": "clearing-right-floats",
+    "title": "Clearing right floats",
+    "html": [
+      "<div>\n  <div class=\"(float:left) (height:8.5rem) (width:34%)\">Left</div>\n  <div class=\"(float:right) (height:4.5rem) (width:34%)\">Right</div>\n  \n  <div class=\"(clear:right)\">Clear</div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "(float:left)",
+      "(height:8.5rem)",
+      "(width:34%)",
+      "(float:right)",
+      "(height:4.5rem)",
+      "(clear:right)"
+    ],
+    "classLists": [
+      "(float:left) (height:8.5rem) (width:34%)",
+      "(float:right) (height:4.5rem) (width:34%)",
+      "(clear:right)"
+    ],
+    "highlighted": [
+      "(clear:right)"
+    ]
+  }
+]

package/src/demo/specimens/clip-path.json

@@ -0,0 +1,38 @@
+[
+  {
+    "page": "clip-path",
+    "id": "clip-with-an-inset",
+    "title": "Clip with an inset",
+    "html": [
+      "<!-- Unclipped · original border -->\n<div\n  class=\"h(120) w(240) max-w-full\n         outline(1) outline-solid outline-line-subtle bg-surface-base\">\n  <div id=\"target\"\n    class=\"grid (place-items:center) h(120) w(240)\n           max-w-full b(2) b-solid b-blue-60 font-md\n           bg-blue-10 fg-blue-80 (clip-path:none)\">\n    Clipped panel\n  </div>\n</div>",
+      "<!-- Inset · rounded paint boundary -->\n<div\n  class=\"h(120) w(240) max-w-full\n         outline(1) outline-solid outline-line-subtle bg-surface-base\">\n  <div id=\"target\"\n    class=\"grid (place-items:center) h(120) w(240)\n           max-w-full b(2) b-solid b-blue-60 font-md\n           bg-blue-10 fg-blue-80\n           (clip-path:inset(8px|24px|round|12px))\">\n    Clipped panel\n  </div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "h(120)",
+      "w(240)",
+      "max-w-full",
+      "outline(1)",
+      "outline-solid",
+      "outline-line-subtle",
+      "bg-surface-base",
+      "grid",
+      "(place-items:center)",
+      "b(2)",
+      "b-solid",
+      "b-blue-60",
+      "font-md",
+      "bg-blue-10",
+      "fg-blue-80",
+      "(clip-path:none)",
+      "(clip-path:inset(8px|24px|round|12px))"
+    ],
+    "classLists": [
+      "h(120) w(240) max-w-full outline(1) outline-solid outline-line-subtle bg-surface-base",
+      "grid (place-items:center) h(120) w(240) max-w-full b(2) b-solid b-blue-60 font-md bg-blue-10 fg-blue-80 (clip-path:none)",
+      "h(120) w(240) max-w-full outline(1) outline-solid outline-line-subtle bg-surface-base",
+      "grid (place-items:center) h(120) w(240) max-w-full b(2) b-solid b-blue-60 font-md bg-blue-10 fg-blue-80 (clip-path:inset(8px|24px|round|12px))"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/content.json

@@ -0,0 +1,27 @@
+[
+  {
+    "page": "content",
+    "id": "add-indicators-for-external-links",
+    "title": "Add indicators for external links",
+    "html": [
+      "<!-- Descendant selector · external link -->\n<article class=\"font-md leading-lg\n    (content:'\\00a0↗')_:where(a[href^='http'])::after\">\n  <p class=\"m(0)\">Read the <a id=\"target\" class=\"underline fg-text-blue\" href=\"https://www.example.com\">project website</a>.</p>\n  <p class=\"m(0)\">Return to <a class=\"underline\" href=\"/en/reference/content\">this reference</a>.</p>\n</article>"
+    ],
+    "css": "",
+    "classes": [
+      "font-md",
+      "leading-lg",
+      "(content:'\\00a0↗')_:where(a[href^='http'])::after",
+      "m(0)",
+      "underline",
+      "fg-text-blue"
+    ],
+    "classLists": [
+      "font-md leading-lg (content:'\\00a0↗')_:where(a[href^='http'])::after",
+      "m(0)",
+      "underline fg-text-blue",
+      "m(0)",
+      "underline"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/counter-set.json

@@ -0,0 +1,31 @@
+[
+  {
+    "page": "counter-set",
+    "id": "set-a-counter-on-one-item",
+    "title": "Set a counter on one item",
+    "html": [
+      "<!-- Sequence · 1, 9, 10 -->\n<ol role=\"list\" class=\"m(0) p(0) font-md leading-lg (list-style:none) (counter-reset:step|0)\">\n  <li class=\"mb-2xs (counter-increment:step|1) fg-text-blue::before\n    (content:counter(step)'.\\00a0')::before\">Install dependencies</li>\n  <li id=\"target\" value=\"9\" class=\"mb-2xs (counter-increment:step|1) (counter-set:step|9)\n    fg-text-blue::before (content:counter(step)'.\\00a0')::before\">Deployment checklist</li>\n  <li class=\"mb-2xs (counter-increment:step|1) fg-text-blue::before\n    (content:counter(step)'.\\00a0')::before\">Verify production</li>\n</ol>"
+    ],
+    "css": "",
+    "classes": [
+      "m(0)",
+      "p(0)",
+      "font-md",
+      "leading-lg",
+      "(list-style:none)",
+      "(counter-reset:step|0)",
+      "mb-2xs",
+      "(counter-increment:step|1)",
+      "fg-text-blue::before",
+      "(content:counter(step)'.\\00a0')::before",
+      "(counter-set:step|9)"
+    ],
+    "classLists": [
+      "m(0) p(0) font-md leading-lg (list-style:none) (counter-reset:step|0)",
+      "mb-2xs (counter-increment:step|1) fg-text-blue::before (content:counter(step)'.\\00a0')::before",
+      "mb-2xs (counter-increment:step|1) (counter-set:step|9) fg-text-blue::before (content:counter(step)'.\\00a0')::before",
+      "mb-2xs (counter-increment:step|1) fg-text-blue::before (content:counter(step)'.\\00a0')::before"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/fill.json

@@ -0,0 +1,23 @@
+[
+  {
+    "page": "fill",
+    "id": "use-theme-colors",
+    "title": "Use theme colors",
+    "html": [
+      "<!-- Theme alias · follows the mode -->\n<svg id=\"target\" role=\"img\" aria-label=\"Triangle\"\n  width=\"96\" height=\"96\" viewBox=\"0 0 24 24\"\n  class=\"block fill-blue (stroke:none)\">\n  <path d=\"M12 4 20 20H4Z\" />\n</svg>",
+      "<!-- Palette step · fixed blue-60 -->\n<svg id=\"target\" role=\"img\" aria-label=\"Triangle\"\n  width=\"96\" height=\"96\" viewBox=\"0 0 24 24\"\n  class=\"block fill-blue-60 (stroke:none)\">\n  <path d=\"M12 4 20 20H4Z\" />\n</svg>"
+    ],
+    "css": "",
+    "classes": [
+      "block",
+      "fill-blue",
+      "(stroke:none)",
+      "fill-blue-60"
+    ],
+    "classLists": [
+      "block fill-blue (stroke:none)",
+      "block fill-blue-60 (stroke:none)"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/filter.json

@@ -0,0 +1,23 @@
+[
+  {
+    "page": "filter",
+    "id": "use-drop-shadow-for-transparent-images",
+    "title": "Use drop shadow for transparent images",
+    "html": [
+      "<!-- Drop shadow · follows the shapes -->\n<svg id=\"target\" role=\"img\"\n  aria-label=\"Circle and diamond\"\n  width=\"160\" height=\"120\" viewBox=\"0 0 160 120\"\n  class=\"block m-md\n         (filter:drop-shadow(0|4px|2px|#7c3aed))\">\n  <circle cx=\"48\" cy=\"60\" r=\"28\" fill=\"#2563eb\" />\n  <path d=\"M100 30 140 60 100 90 60 60Z\" fill=\"#7c3aed\" />\n</svg>",
+      "<!-- Box shadow · follows the viewport box -->\n<svg id=\"target\" role=\"img\"\n  aria-label=\"Circle and diamond\"\n  width=\"160\" height=\"120\" viewBox=\"0 0 160 120\"\n  class=\"block m-md (box-shadow:0|4px|2px|#7c3aed)\">\n  <circle cx=\"48\" cy=\"60\" r=\"28\" fill=\"#2563eb\" />\n  <path d=\"M100 30 140 60 100 90 60 60Z\" fill=\"#7c3aed\" />\n</svg>"
+    ],
+    "css": "",
+    "classes": [
+      "block",
+      "m-md",
+      "(filter:drop-shadow(0|4px|2px|#7c3aed))",
+      "(box-shadow:0|4px|2px|#7c3aed)"
+    ],
+    "classLists": [
+      "block m-md (filter:drop-shadow(0|4px|2px|#7c3aed))",
+      "block m-md (box-shadow:0|4px|2px|#7c3aed)"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/flex-direction.json

@@ -0,0 +1,27 @@
+[
+  {
+    "page": "flex-direction",
+    "id": "lay-out-items-in-a-row",
+    "title": "Lay out items in a row",
+    "html": [
+      "<div id=\"layout\" class=\"flex flex-row gap-sm\">\n  <div id=\"item-1\" class=\"(flex:none) (height:4rem) (width:5rem) p-sm\">01</div>\n  <div id=\"item-2\" class=\"(flex:none) (height:4rem) (width:5rem) p-sm\">02</div>\n  <div id=\"item-3\" class=\"(flex:none) (height:4rem) (width:5rem) p-sm\">03</div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "flex",
+      "flex-row",
+      "gap-sm",
+      "(flex:none)",
+      "(height:4rem)",
+      "(width:5rem)",
+      "p-sm"
+    ],
+    "classLists": [
+      "flex flex-row gap-sm",
+      "(flex:none) (height:4rem) (width:5rem) p-sm",
+      "(flex:none) (height:4rem) (width:5rem) p-sm",
+      "(flex:none) (height:4rem) (width:5rem) p-sm"
+    ],
+    "highlighted": []
+  }
+]