@master/internal-site 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,27 @@
+[
+  {
+    "page": "flex-grow",
+    "id": "let-an-item-grow",
+    "title": "Let an item grow",
+    "html": [
+      "<div id=\"layout\" class=\"flex gap-md\">\n  <div id=\"target\" class=\"(flex-basis:4rem) grow(1) (height:6rem) min-w(0) p-sm\">Grow 1</div>\n  <div id=\"peer\" class=\"(flex-basis:4rem) grow(2) (height:6rem) min-w(0) p-sm\">Grow 2</div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "flex",
+      "gap-md",
+      "(flex-basis:4rem)",
+      "grow(1)",
+      "(height:6rem)",
+      "min-w(0)",
+      "p-sm",
+      "grow(2)"
+    ],
+    "classLists": [
+      "flex gap-md",
+      "(flex-basis:4rem) grow(1) (height:6rem) min-w(0) p-sm",
+      "(flex-basis:4rem) grow(2) (height:6rem) min-w(0) p-sm"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/font-style.json

@@ -0,0 +1,23 @@
+[
+  {
+    "page": "font-style",
+    "id": "reset-font-style",
+    "title": "Reset font style",
+    "html": [
+      "<!-- An upright child inside italic text -->\n<p id=\"context\" class=\"m(0) italic font-xl leading-md\">A slanted phrase with <span id=\"target\" class=\"(font-style:normal)\">an upright detail</span>.</p>"
+    ],
+    "css": "",
+    "classes": [
+      "m(0)",
+      "italic",
+      "font-xl",
+      "leading-md",
+      "(font-style:normal)"
+    ],
+    "classLists": [
+      "m(0) italic font-xl leading-md",
+      "(font-style:normal)"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/font-variant-numeric.json

@@ -0,0 +1,28 @@
+[
+  {
+    "page": "font-variant-numeric",
+    "id": "align-tabular-numbers",
+    "title": "Align tabular numbers",
+    "html": [
+      "<!-- proportional-nums -->\n<div id=\"target\" class=\"(font-variant-numeric:proportional-nums) font-3xl leading-sm\"><span id=\"ones\" class=\"inline-block\">11111</span><br><span id=\"eights\" class=\"inline-block\">88888</span></div>",
+      "<!-- tabular-nums -->\n<div id=\"target\" class=\"(font-variant-numeric:tabular-nums) font-3xl leading-sm\"><span id=\"ones\" class=\"inline-block\">11111</span><br><span id=\"eights\" class=\"inline-block\">88888</span></div>"
+    ],
+    "css": "",
+    "classes": [
+      "(font-variant-numeric:proportional-nums)",
+      "font-3xl",
+      "leading-sm",
+      "inline-block",
+      "(font-variant-numeric:tabular-nums)"
+    ],
+    "classLists": [
+      "(font-variant-numeric:proportional-nums) font-3xl leading-sm",
+      "inline-block",
+      "inline-block",
+      "(font-variant-numeric:tabular-nums) font-3xl leading-sm",
+      "inline-block",
+      "inline-block"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/grid-auto-columns.json

@@ -0,0 +1,29 @@
+[
+  {
+    "page": "grid-auto-columns",
+    "id": "size-implicit-columns",
+    "title": "Size implicit columns",
+    "html": [
+      "<div id=\"layout\" class=\"grid (grid-auto-columns:72px) (grid-auto-flow:column) (grid-template-columns:80px) (grid-template-rows:64px) gap-md (width:17.5rem) max-w-full\">\n  <div id=\"peer\" class=\"p-sm\">80px</div>\n  <div id=\"target\" class=\"p-sm\">72px</div>\n  <div id=\"item-3\" class=\"p-sm\">72px</div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "grid",
+      "(grid-auto-columns:72px)",
+      "(grid-auto-flow:column)",
+      "(grid-template-columns:80px)",
+      "(grid-template-rows:64px)",
+      "gap-md",
+      "(width:17.5rem)",
+      "max-w-full",
+      "p-sm"
+    ],
+    "classLists": [
+      "grid (grid-auto-columns:72px) (grid-auto-flow:column) (grid-template-columns:80px) (grid-template-rows:64px) gap-md (width:17.5rem) max-w-full",
+      "p-sm",
+      "p-sm",
+      "p-sm"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/grid-auto-flow.json

@@ -0,0 +1,37 @@
+[
+  {
+    "page": "grid-auto-flow",
+    "id": "fill-gaps-densely",
+    "title": "Fill gaps densely",
+    "html": [
+      "<div id=\"layout\" class=\"grid grid-cols(3) (grid-auto-flow:row) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full\">\n  <button id=\"target\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">01</button>\n  <button id=\"peer\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">02</button>\n  <button id=\"item-3\" class=\"p-sm\" type=\"button\" tabindex=\"0\">03</button>\n  <button id=\"item-4\" class=\"p-sm\" type=\"button\" tabindex=\"0\">04</button>\n</div>",
+      "<div id=\"layout\" class=\"grid grid-cols(3) (grid-auto-flow:row|dense) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full\">\n  <button id=\"target\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">01</button>\n  <button id=\"peer\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">02</button>\n  <button id=\"item-3\" class=\"p-sm\" type=\"button\" tabindex=\"0\">03</button>\n  <button id=\"item-4\" class=\"p-sm\" type=\"button\" tabindex=\"0\">04</button>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "grid",
+      "grid-cols(3)",
+      "(grid-auto-flow:row)",
+      "(grid-auto-rows:48px)",
+      "gap-md",
+      "(width:17.5rem)",
+      "max-w-full",
+      "grid-col-span(2)",
+      "p-sm",
+      "(grid-auto-flow:row|dense)"
+    ],
+    "classLists": [
+      "grid grid-cols(3) (grid-auto-flow:row) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full",
+      "grid-col-span(2) p-sm",
+      "grid-col-span(2) p-sm",
+      "p-sm",
+      "p-sm",
+      "grid grid-cols(3) (grid-auto-flow:row|dense) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full",
+      "grid-col-span(2) p-sm",
+      "grid-col-span(2) p-sm",
+      "p-sm",
+      "p-sm"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/grid-template-areas.json

@@ -0,0 +1,34 @@
+[
+  {
+    "page": "grid-template-areas",
+    "id": "apply-conditionally",
+    "title": "Apply conditionally",
+    "html": [
+      "<div id=\"layout\" class=\"grid (grid-template-areas:'head'|'nav'|'main') (grid-template-columns:1fr) (grid-template-rows:48px|48px|96px) gap-md (width:17.5rem) max-w-full (grid-template-areas:'head\\20head'|'nav\\20main')@sm (grid-template-columns:80px|1fr)@sm (grid-template-rows:48px|96px)@sm\">\n  <header id=\"target\" class=\"(grid-area:head) p-sm\">Header</header>\n  <aside id=\"peer\" class=\"(grid-area:nav) p-sm\">Nav</aside>\n  <section id=\"item-3\" class=\"(grid-area:main) p-sm\">Content</section>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "grid",
+      "(grid-template-areas:'head'|'nav'|'main')",
+      "(grid-template-columns:1fr)",
+      "(grid-template-rows:48px|48px|96px)",
+      "gap-md",
+      "(width:17.5rem)",
+      "max-w-full",
+      "(grid-template-areas:'head\\20head'|'nav\\20main')@sm",
+      "(grid-template-columns:80px|1fr)@sm",
+      "(grid-template-rows:48px|96px)@sm",
+      "(grid-area:head)",
+      "p-sm",
+      "(grid-area:nav)",
+      "(grid-area:main)"
+    ],
+    "classLists": [
+      "grid (grid-template-areas:'head'|'nav'|'main') (grid-template-columns:1fr) (grid-template-rows:48px|48px|96px) gap-md (width:17.5rem) max-w-full (grid-template-areas:'head\\20head'|'nav\\20main')@sm (grid-template-columns:80px|1fr)@sm (grid-template-rows:48px|96px)@sm",
+      "(grid-area:head) p-sm",
+      "(grid-area:nav) p-sm",
+      "(grid-area:main) p-sm"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/grid-template-columns.json

@@ -0,0 +1,36 @@
+[
+  {
+    "page": "grid-template-columns",
+    "id": "use-minmax",
+    "title": "Control a track’s minimum",
+    "html": [
+      "<div id=\"layout\" class=\"grid (grid-auto-rows:64px) (grid-template-columns:1fr|2fr) gap-md (width:17.5rem) max-w-full\">\n  <div id=\"target\" class=\"overflow-clip p-sm\"><span class=\"block (width:12rem)\">192px content</span></div>\n  <div id=\"peer\" class=\"p-sm\">2</div>\n</div>",
+      "<div id=\"layout\" class=\"grid (grid-auto-rows:64px) (grid-template-columns:minmax(0,1fr)|2fr) gap-md (width:17.5rem) max-w-full\">\n  <div id=\"target\" class=\"overflow-clip p-sm\"><span class=\"block (width:12rem)\">192px content</span></div>\n  <div id=\"peer\" class=\"p-sm\">2</div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "grid",
+      "(grid-auto-rows:64px)",
+      "(grid-template-columns:1fr|2fr)",
+      "gap-md",
+      "(width:17.5rem)",
+      "max-w-full",
+      "overflow-clip",
+      "p-sm",
+      "block",
+      "(width:12rem)",
+      "(grid-template-columns:minmax(0,1fr)|2fr)"
+    ],
+    "classLists": [
+      "grid (grid-auto-rows:64px) (grid-template-columns:1fr|2fr) gap-md (width:17.5rem) max-w-full",
+      "overflow-clip p-sm",
+      "block (width:12rem)",
+      "p-sm",
+      "grid (grid-auto-rows:64px) (grid-template-columns:minmax(0,1fr)|2fr) gap-md (width:17.5rem) max-w-full",
+      "overflow-clip p-sm",
+      "block (width:12rem)",
+      "p-sm"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/isolation.json

@@ -0,0 +1,25 @@
+[
+  {
+    "page": "isolation",
+    "id": "create-a-stacking-context",
+    "title": "Create a stacking context",
+    "html": [
+      "<div class=\"p-md bg-blue-20\">\n  <section class=\"isolate\">\n    <div class=\"p-lg bg-violet-50 (mix-blend-mode:multiply)\">Blend layer</div>\n  </section>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "p-md",
+      "bg-blue-20",
+      "isolate",
+      "p-lg",
+      "bg-violet-50",
+      "(mix-blend-mode:multiply)"
+    ],
+    "classLists": [
+      "p-md bg-blue-20",
+      "isolate",
+      "p-lg bg-violet-50 (mix-blend-mode:multiply)"
+    ],
+    "highlighted": []
+  }
+]

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

@@ -0,0 +1,36 @@
+[
+  {
+    "page": "justify-content",
+    "id": "use-explicit-css-values",
+    "title": "Keep overflowing content reachable",
+    "html": [
+      "<div id=\"layout\" class=\"flex overflow-auto (justify-content:safe|center) (width:15rem) max-w-full\" tabindex=\"0\" role=\"region\" aria-label=\"Safe centered overflow\">\n  <div id=\"target\" class=\"flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs\"><span>Start</span><span>End</span></div>\n</div>",
+      "<div id=\"layout\" class=\"flex overflow-auto (justify-content:unsafe|center) (width:15rem) max-w-full\" tabindex=\"0\" role=\"region\" aria-label=\"Unsafe centered overflow\">\n  <div id=\"target\" class=\"flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs\"><span>Start</span><span>End</span></div>\n</div>",
+      "<div id=\"layout\" class=\"flex overflow-auto (justify-content:safe|center) (width:15rem) max-w-full\" tabindex=\"0\" role=\"region\" aria-label=\"Safe centered fitting content\">\n  <div id=\"target\" class=\"flex (flex:none) justify-between (height:4rem) (width:12rem) p-xs\"><span>Start</span><span>End</span></div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "flex",
+      "overflow-auto",
+      "(justify-content:safe|center)",
+      "(width:15rem)",
+      "max-w-full",
+      "(flex:none)",
+      "justify-between",
+      "(height:4rem)",
+      "(width:17.5rem)",
+      "p-xs",
+      "(justify-content:unsafe|center)",
+      "(width:12rem)"
+    ],
+    "classLists": [
+      "flex overflow-auto (justify-content:safe|center) (width:15rem) max-w-full",
+      "flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs",
+      "flex overflow-auto (justify-content:unsafe|center) (width:15rem) max-w-full",
+      "flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs",
+      "flex overflow-auto (justify-content:safe|center) (width:15rem) max-w-full",
+      "flex (flex:none) justify-between (height:4rem) (width:12rem) p-xs"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/line-height.json

@@ -0,0 +1,28 @@
+[
+  {
+    "page": "line-height",
+    "id": "use-explicit-values",
+    "title": "Use explicit values",
+    "html": [
+      "<!-- Unitless · 1.5 -->\n<div id=\"context\" class=\"font-md (line-height:1.5)\">\n  <p class=\"m(0)\">Parent at 16px</p>\n  <p id=\"target\" class=\"m(0) font-2xl\">Child at 24px<br>Second line</p>\n</div>",
+      "<!-- Fixed length · 24px -->\n<div id=\"context\" class=\"font-md (line-height:24px)\">\n  <p class=\"m(0)\">Parent at 16px</p>\n  <p id=\"target\" class=\"m(0) font-2xl\">Child at 24px<br>Second line</p>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "font-md",
+      "(line-height:1.5)",
+      "m(0)",
+      "font-2xl",
+      "(line-height:24px)"
+    ],
+    "classLists": [
+      "font-md (line-height:1.5)",
+      "m(0)",
+      "m(0) font-2xl",
+      "font-md (line-height:24px)",
+      "m(0)",
+      "m(0) font-2xl"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/list-style-position.json

@@ -0,0 +1,36 @@
+[
+  {
+    "page": "list-style-position",
+    "id": "place-markers-inside-the-content-box",
+    "title": "Place markers inside the content box",
+    "html": [
+      "<!-- Outside · hanging marker -->\n<ul id=\"target\" class=\"w(260) max-w-full m(0) pl-lg font-md leading-lg\n    (list-style-type:disc) (list-style-position:outside) (list-style-image:initial)\">\n  <li class=\"mb-2xs\">Collect references</li>\n  <li class=\"mb-2xs\">Compare the spacing across every screen size.</li>\n  <li class=\"mb-2xs\">Review the composition</li>\n</ul>",
+      "<!-- Inside · marker on first line -->\n<ul id=\"target\" class=\"w(260) max-w-full m(0) pl-lg font-md leading-lg\n    (list-style-type:disc) (list-style-position:outside) (list-style-image:initial) (list-style-position:inside)\">\n  <li class=\"mb-2xs\">Collect references</li>\n  <li class=\"mb-2xs\">Compare the spacing across every screen size.</li>\n  <li class=\"mb-2xs\">Review the composition</li>\n</ul>"
+    ],
+    "css": "",
+    "classes": [
+      "w(260)",
+      "max-w-full",
+      "m(0)",
+      "pl-lg",
+      "font-md",
+      "leading-lg",
+      "(list-style-type:disc)",
+      "(list-style-position:outside)",
+      "(list-style-image:initial)",
+      "mb-2xs",
+      "(list-style-position:inside)"
+    ],
+    "classLists": [
+      "w(260) max-w-full m(0) pl-lg font-md leading-lg (list-style-type:disc) (list-style-position:outside) (list-style-image:initial)",
+      "mb-2xs",
+      "mb-2xs",
+      "mb-2xs",
+      "w(260) max-w-full m(0) pl-lg font-md leading-lg (list-style-type:disc) (list-style-position:outside) (list-style-image:initial) (list-style-position:inside)",
+      "mb-2xs",
+      "mb-2xs",
+      "mb-2xs"
+    ],
+    "highlighted": []
+  }
+]

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

@@ -0,0 +1,54 @@
+[
+  {
+    "page": "mask-image",
+    "id": "fade-overflowing-media",
+    "title": "Fade overflowing media",
+    "html": [
+      "<!-- Scrollable list · fixed lower fade -->\n<div class=\"w(240) max-w-full\">\n  <div class=\"outline(2):focus-within outline-solid:focus-within outline-blue:focus-within\n              outline-offset(3):focus-within\">\n    <div id=\"target\" role=\"region\" tabindex=\"0\"\n      aria-label=\"Layer list\"\n      aria-describedby=\"scroll-help\"\n      class=\"overflow-auto h(160) bg-surface-base\n             (mask-image:linear-gradient(to|bottom,black|60%,transparent))\n             (mask-mode:alpha) (outline:none):focus-visible\">\n      <ol class=\"m(0) pb-3xl pl-lg pr-sm font-sm fg-text-body\">\n        <li id=\"first-layer\" class=\"py-xs\">Outline</li>\n        <li class=\"py-xs\">Surface</li>\n        <li class=\"py-xs\">Foreground</li>\n        <li class=\"py-xs\">Accent</li>\n        <li class=\"py-xs\">Annotation</li>\n        <li class=\"py-xs\">Selection</li>\n        <li class=\"py-xs\">Focus</li>\n        <li id=\"last-layer\" class=\"py-xs\">Export</li>\n      </ol>\n    </div>\n  </div>\n  <p id=\"scroll-help\" class=\"mb(0) mt-sm font-sm fg-text-body\">\n    Eight layers. Scroll or follow the links below.\n  </p>\n  <nav aria-label=\"Layer navigation\"\n    class=\"flex flex-wrap gap-md mt-sm font-sm\">\n    <a href=\"#first-layer\">First layer</a>\n    <a href=\"#last-layer\">Last layer</a>\n  </nav>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "w(240)",
+      "max-w-full",
+      "outline(2):focus-within",
+      "outline-solid:focus-within",
+      "outline-blue:focus-within",
+      "outline-offset(3):focus-within",
+      "overflow-auto",
+      "h(160)",
+      "bg-surface-base",
+      "(mask-image:linear-gradient(to|bottom,black|60%,transparent))",
+      "(mask-mode:alpha)",
+      "(outline:none):focus-visible",
+      "m(0)",
+      "pb-3xl",
+      "pl-lg",
+      "pr-sm",
+      "font-sm",
+      "fg-text-body",
+      "py-xs",
+      "mb(0)",
+      "mt-sm",
+      "flex",
+      "flex-wrap",
+      "gap-md"
+    ],
+    "classLists": [
+      "w(240) max-w-full",
+      "outline(2):focus-within outline-solid:focus-within outline-blue:focus-within outline-offset(3):focus-within",
+      "overflow-auto h(160) bg-surface-base (mask-image:linear-gradient(to|bottom,black|60%,transparent)) (mask-mode:alpha) (outline:none):focus-visible",
+      "m(0) pb-3xl pl-lg pr-sm font-sm fg-text-body",
+      "py-xs",
+      "py-xs",
+      "py-xs",
+      "py-xs",
+      "py-xs",
+      "py-xs",
+      "py-xs",
+      "py-xs",
+      "mb(0) mt-sm font-sm fg-text-body",
+      "flex flex-wrap gap-md mt-sm font-sm"
+    ],
+    "highlighted": []
+  }
+]

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

@@ -0,0 +1,39 @@
+[
+  {
+    "page": "min-width",
+    "id": "allow-flexible-children-to-shrink",
+    "title": "Allow flexible children to shrink",
+    "html": [
+      "<!-- Automatic minimum -->\n<div id=\"layout\" class=\"flex gap-md (width:15rem)\" role=\"group\" aria-label=\"Available space\">\n  <div id=\"peer\" class=\"grow(0) shrink(0) basis(48) p-sm\">01</div>\n  <div id=\"target\" class=\"overflow-clip grow(1) shrink(1) basis(0)\"><span id=\"item-3\" class=\"block (width:14rem) p-sm\">Unbreakable content</span></div>\n</div>",
+      "<!-- Zero minimum -->\n<div id=\"layout\" class=\"flex gap-md (width:15rem)\" role=\"group\" aria-label=\"Available space\">\n  <div id=\"peer\" class=\"grow(0) shrink(0) basis(48) p-sm\">01</div>\n  <div id=\"target\" class=\"overflow-clip grow(1) shrink(1) basis(0) min-w(0)\"><span id=\"item-3\" class=\"block (width:14rem) p-sm\">Unbreakable content</span></div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "flex",
+      "gap-md",
+      "(width:15rem)",
+      "grow(0)",
+      "shrink(0)",
+      "basis(48)",
+      "p-sm",
+      "overflow-clip",
+      "grow(1)",
+      "shrink(1)",
+      "basis(0)",
+      "block",
+      "(width:14rem)",
+      "min-w(0)"
+    ],
+    "classLists": [
+      "flex gap-md (width:15rem)",
+      "grow(0) shrink(0) basis(48) p-sm",
+      "overflow-clip grow(1) shrink(1) basis(0)",
+      "block (width:14rem) p-sm",
+      "flex gap-md (width:15rem)",
+      "grow(0) shrink(0) basis(48) p-sm",
+      "overflow-clip grow(1) shrink(1) basis(0) min-w(0)",
+      "block (width:14rem) p-sm"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/mix-blend-mode.json

@@ -0,0 +1,43 @@
+[
+  {
+    "page": "mix-blend-mode",
+    "id": "blend-an-element-with-its-backdrop",
+    "title": "Blend an element with its backdrop",
+    "html": [
+      "<!-- Normal · one foreground color -->\n<div class=\"relative isolate h(160) w(240)\n         max-w-full (background-color:#e2e8f0)\">\n  <div aria-hidden=\"true\"\n    class=\"absolute bottom(0) right(0) top(0) w(120) (background-color:#c4b5fd)\"></div>\n  <div id=\"target\" role=\"img\"\n    aria-label=\"Blue foreground across two backdrops\"\n    class=\"absolute left(72) top-xl w(96) h(96) r-lg\n           (background-color:#2563eb) (mix-blend-mode:normal)\"></div>\n</div>",
+      "<!-- Multiply · combines with both backdrops -->\n<div class=\"relative isolate h(160) w(240)\n         max-w-full (background-color:#e2e8f0)\">\n  <div aria-hidden=\"true\"\n    class=\"absolute bottom(0) right(0) top(0) w(120) (background-color:#c4b5fd)\"></div>\n  <div id=\"target\" role=\"img\"\n    aria-label=\"Blue foreground across two backdrops\"\n    class=\"absolute left(72) top-xl w(96) h(96) r-lg\n           (background-color:#2563eb) (mix-blend-mode:multiply)\"></div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "relative",
+      "isolate",
+      "h(160)",
+      "w(240)",
+      "max-w-full",
+      "(background-color:#e2e8f0)",
+      "absolute",
+      "bottom(0)",
+      "right(0)",
+      "top(0)",
+      "w(120)",
+      "(background-color:#c4b5fd)",
+      "left(72)",
+      "top-xl",
+      "w(96)",
+      "h(96)",
+      "r-lg",
+      "(background-color:#2563eb)",
+      "(mix-blend-mode:normal)",
+      "(mix-blend-mode:multiply)"
+    ],
+    "classLists": [
+      "relative isolate h(160) w(240) max-w-full (background-color:#e2e8f0)",
+      "absolute bottom(0) right(0) top(0) w(120) (background-color:#c4b5fd)",
+      "absolute left(72) top-xl w(96) h(96) r-lg (background-color:#2563eb) (mix-blend-mode:normal)",
+      "relative isolate h(160) w(240) max-w-full (background-color:#e2e8f0)",
+      "absolute bottom(0) right(0) top(0) w(120) (background-color:#c4b5fd)",
+      "absolute left(72) top-xl w(96) h(96) r-lg (background-color:#2563eb) (mix-blend-mode:multiply)"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/object-fit.json

@@ -0,0 +1,27 @@
+[
+  {
+    "page": "object-fit",
+    "id": "cover-a-fixed-frame",
+    "title": "Cover a fixed frame",
+    "html": [
+      "<!-- Cover · preserved proportions -->\n<img id=\"target\" src=\"/demo/landscape.svg\"\n  width=\"320\" height=\"200\"\n  alt=\"Blue and violet mountains beneath a yellow sun\"\n  class=\"block w(220) h(220) max-w-full\n         bg-surface-base object-cover object-right\" />",
+      "<!-- Fill · stretched to the square -->\n<img id=\"target\" src=\"/demo/landscape.svg\"\n  width=\"320\" height=\"200\"\n  alt=\"Blue and violet mountains beneath a yellow sun\"\n  class=\"block w(220) h(220) max-w-full\n         bg-surface-base object-fill object-right\" />"
+    ],
+    "css": "",
+    "classes": [
+      "block",
+      "w(220)",
+      "h(220)",
+      "max-w-full",
+      "bg-surface-base",
+      "object-cover",
+      "object-right",
+      "object-fill"
+    ],
+    "classLists": [
+      "block w(220) h(220) max-w-full bg-surface-base object-cover object-right",
+      "block w(220) h(220) max-w-full bg-surface-base object-fill object-right"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/object-position.json

@@ -0,0 +1,27 @@
+[
+  {
+    "page": "object-position",
+    "id": "use-precise-positions",
+    "title": "Use precise positions",
+    "html": [
+      "<!-- 50% 25% · 12.5px top crop -->\n<img id=\"target\" src=\"/demo/landscape.svg\"\n  width=\"320\" height=\"200\"\n  alt=\"Blue and violet mountains beneath a yellow sun\"\n  class=\"block h(100) w(240) max-w-full\n         bg-surface-base object-cover\n         (object-position:50%|25%)\" />",
+      "<!-- Left 12px · top 8px -->\n<img id=\"target\" src=\"/demo/landscape.svg\"\n  width=\"320\" height=\"200\"\n  alt=\"Blue and violet mountains beneath a yellow sun\"\n  class=\"block h(100) w(240) max-w-full\n         bg-surface-base object-cover\n         (object-position:left|12px|top|8px)\" />"
+    ],
+    "css": "",
+    "classes": [
+      "block",
+      "h(100)",
+      "w(240)",
+      "max-w-full",
+      "bg-surface-base",
+      "object-cover",
+      "(object-position:50%|25%)",
+      "(object-position:left|12px|top|8px)"
+    ],
+    "classLists": [
+      "block h(100) w(240) max-w-full bg-surface-base object-cover (object-position:50%|25%)",
+      "block h(100) w(240) max-w-full bg-surface-base object-cover (object-position:left|12px|top|8px)"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/opacity.json

@@ -0,0 +1,37 @@
+[
+  {
+    "page": "opacity",
+    "id": "fade-an-entire-element",
+    "title": "Fade an entire element",
+    "html": [
+      "<!-- Opaque · complete group -->\n<details class=\"w(240) max-w-full\">\n  <summary id=\"target\"\n    class=\"p-md r-sm font-md bg-blue-60 fg-white\n           (opacity:1) (cursor:pointer)\">\n    Preview details\n  </summary>\n  <p class=\"mb(0) mt-sm font-sm fg-text-body\">\n    The layer is ready for review.\n  </p>\n</details>",
+      "<!-- Half opacity · same interaction -->\n<details class=\"w(240) max-w-full\">\n  <summary id=\"target\"\n    class=\"p-md r-sm font-md bg-blue-60 fg-white\n           (opacity:.5) (cursor:pointer)\">\n    Preview details\n  </summary>\n  <p class=\"mb(0) mt-sm font-sm fg-text-body\">\n    The layer is ready for review.\n  </p>\n</details>"
+    ],
+    "css": "",
+    "classes": [
+      "w(240)",
+      "max-w-full",
+      "p-md",
+      "r-sm",
+      "font-md",
+      "bg-blue-60",
+      "fg-white",
+      "(opacity:1)",
+      "(cursor:pointer)",
+      "mb(0)",
+      "mt-sm",
+      "font-sm",
+      "fg-text-body",
+      "(opacity:.5)"
+    ],
+    "classLists": [
+      "w(240) max-w-full",
+      "p-md r-sm font-md bg-blue-60 fg-white (opacity:1) (cursor:pointer)",
+      "mb(0) mt-sm font-sm fg-text-body",
+      "w(240) max-w-full",
+      "p-md r-sm font-md bg-blue-60 fg-white (opacity:.5) (cursor:pointer)",
+      "mb(0) mt-sm font-sm fg-text-body"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/order.json

@@ -0,0 +1,28 @@
+[
+  {
+    "page": "order",
+    "id": "keep-source-order-meaningful",
+    "title": "Keep source order meaningful",
+    "html": [
+      "<div id=\"layout\" class=\"flex gap-sm\">\n  <button id=\"target\" type=\"button\" tabindex=\"0\" class=\"(flex:none) order(2) (height:4rem) (width:5rem) p-xs\">Source 1</button>\n  <button id=\"peer\" type=\"button\" tabindex=\"0\" class=\"(flex:none) order(1) (height:4rem) (width:5rem) p-xs\">Source 2</button>\n  <button id=\"item-3\" type=\"button\" tabindex=\"0\" class=\"(flex:none) (height:4rem) (width:5rem) p-xs\">Source 3</button>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "flex",
+      "gap-sm",
+      "(flex:none)",
+      "order(2)",
+      "(height:4rem)",
+      "(width:5rem)",
+      "p-xs",
+      "order(1)"
+    ],
+    "classLists": [
+      "flex gap-sm",
+      "(flex:none) order(2) (height:4rem) (width:5rem) p-xs",
+      "(flex:none) order(1) (height:4rem) (width:5rem) p-xs",
+      "(flex:none) (height:4rem) (width:5rem) p-xs"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/overflow-wrap.json

@@ -0,0 +1,26 @@
+[
+  {
+    "page": "overflow-wrap",
+    "id": "allow-breaks-anywhere",
+    "title": "Allow breaks anywhere",
+    "html": [
+      "<!-- wrap-break-word -->\n<code id=\"target\" class=\"block wrap-break-word w-min m(0) font-md (line-height:24px)\">PREVIEW</code>",
+      "<!-- wrap-anywhere -->\n<code id=\"target\" class=\"block wrap-anywhere w-min m(0) font-md (line-height:24px)\">PREVIEW</code>"
+    ],
+    "css": "",
+    "classes": [
+      "block",
+      "wrap-break-word",
+      "w-min",
+      "m(0)",
+      "font-md",
+      "(line-height:24px)",
+      "wrap-anywhere"
+    ],
+    "classLists": [
+      "block wrap-break-word w-min m(0) font-md (line-height:24px)",
+      "block wrap-anywhere w-min m(0) font-md (line-height:24px)"
+    ],
+    "highlighted": []
+  }
+]