@master/internal-site 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,50 @@
+[
+  {
+    "page": "accent-color",
+    "id": "set-the-accent-color",
+    "title": "Set the accent color",
+    "html": [
+      "<!-- Platform accent -->\n<form>\n  <fieldset id=\"target\"\n    class=\"grid gap-md min-w(0) m(0) p(0) b(0)\n           (accent-color:auto)\">\n    <legend class=\"sr-only\">Platform accent</legend>\n    <label class=\"flex items-center gap-sm\">\n      <input type=\"checkbox\" checked> Snap to grid\n    </label>\n    <div class=\"flex flex-wrap gap-md\">\n      <label class=\"flex items-center gap-sm\">\n        <input type=\"radio\" name=\"view\" value=\"canvas\" checked> Canvas\n      </label>\n      <label class=\"flex items-center gap-sm\">\n        <input type=\"radio\" name=\"view\" value=\"layers\"> Layers\n      </label>\n    </div>\n    <label class=\"grid gap-xs w(240) max-w-full\">\n      Zoom\n      <input type=\"range\" min=\"25\" max=\"100\" value=\"65\"\n        class=\"w-full\">\n    </label>\n  </fieldset>\n</form>",
+      "<!-- Blue accent -->\n<form>\n  <fieldset id=\"target\"\n    class=\"grid gap-md min-w(0) m(0) p(0) b(0)\n           accent-blue\">\n    <legend class=\"sr-only\">Blue accent</legend>\n    <label class=\"flex items-center gap-sm\">\n      <input type=\"checkbox\" checked> Snap to grid\n    </label>\n    <div class=\"flex flex-wrap gap-md\">\n      <label class=\"flex items-center gap-sm\">\n        <input type=\"radio\" name=\"view\" value=\"canvas\" checked> Canvas\n      </label>\n      <label class=\"flex items-center gap-sm\">\n        <input type=\"radio\" name=\"view\" value=\"layers\"> Layers\n      </label>\n    </div>\n    <label class=\"grid gap-xs w(240) max-w-full\">\n      Zoom\n      <input type=\"range\" min=\"25\" max=\"100\" value=\"65\"\n        class=\"w-full\">\n    </label>\n  </fieldset>\n</form>"
+    ],
+    "css": "",
+    "classes": [
+      "grid",
+      "gap-md",
+      "min-w(0)",
+      "m(0)",
+      "p(0)",
+      "b(0)",
+      "(accent-color:auto)",
+      "sr-only",
+      "flex",
+      "items-center",
+      "gap-sm",
+      "flex-wrap",
+      "gap-xs",
+      "w(240)",
+      "max-w-full",
+      "w-full",
+      "accent-blue"
+    ],
+    "classLists": [
+      "grid gap-md min-w(0) m(0) p(0) b(0) (accent-color:auto)",
+      "sr-only",
+      "flex items-center gap-sm",
+      "flex flex-wrap gap-md",
+      "flex items-center gap-sm",
+      "flex items-center gap-sm",
+      "grid gap-xs w(240) max-w-full",
+      "w-full",
+      "grid gap-md min-w(0) m(0) p(0) b(0) accent-blue",
+      "sr-only",
+      "flex items-center gap-sm",
+      "flex flex-wrap gap-md",
+      "flex items-center gap-sm",
+      "flex items-center gap-sm",
+      "grid gap-xs w(240) max-w-full",
+      "w-full"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/align-items.json

@@ -0,0 +1,56 @@
+[
+  {
+    "page": "align-items",
+    "id": "align-items-on-the-cross-axis",
+    "title": "Align items on the cross axis",
+    "html": [
+      "<div id=\"layout\" class=\"flex items-center gap-md\">\n  <img id=\"target\" class=\"(flex:none) (width:4rem) (height:4rem) object-cover\" src=\"/demo/landscape.svg\" alt=\"Sun above layered mountains\" />\n  <div id=\"peer\" class=\"p-sm\">Landscape study</div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "flex",
+      "items-center",
+      "gap-md",
+      "(flex:none)",
+      "(width:4rem)",
+      "(height:4rem)",
+      "object-cover",
+      "p-sm"
+    ],
+    "classLists": [
+      "flex items-center gap-md",
+      "(flex:none) (width:4rem) (height:4rem) object-cover",
+      "p-sm"
+    ],
+    "highlighted": []
+  },
+  {
+    "page": "align-items",
+    "id": "stretch-children",
+    "title": "Stretch automatic-sized children",
+    "html": [
+      "<div id=\"layout\" class=\"flex items-stretch gap-md (height:8rem)\">\n  <div id=\"target\" class=\"(width:6rem) p-sm\">Auto height</div>\n  <div id=\"peer\" class=\"(height:4rem) (width:6rem) p-sm\">64px height</div>\n</div>",
+      "<div id=\"layout\" class=\"flex items-stretch gap-md\">\n  <div id=\"target\" class=\"(width:6rem) p-sm\">Auto height</div>\n  <div id=\"peer\" class=\"(width:6rem) (height:6rem) p-sm\">96px height</div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "flex",
+      "items-stretch",
+      "gap-md",
+      "(height:8rem)",
+      "(width:6rem)",
+      "p-sm",
+      "(height:4rem)",
+      "(height:6rem)"
+    ],
+    "classLists": [
+      "flex items-stretch gap-md (height:8rem)",
+      "(width:6rem) p-sm",
+      "(height:4rem) (width:6rem) p-sm",
+      "flex items-stretch gap-md",
+      "(width:6rem) p-sm",
+      "(width:6rem) (height:6rem) p-sm"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/animation-delay.json

@@ -0,0 +1,55 @@
+[
+  {
+    "page": "animation-delay",
+    "id": "delay-animation-start",
+    "title": "Delay animation start",
+    "html": [
+      "<!-- No delay -->\n<div class=\"w(240) max-w-full\">\n  <p class=\"mb-sm font-mono font-xs fg-text-muted\">Base 0 · start 24 · end 96px</p>\n  <div aria-hidden=\"true\"\n    class=\"h(56) p-xs outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(40) w(48)\n             b(1) b-solid b-blue-60 r-sm bg-blue-10\n             fg-blue-80 (transform:none)\n             (animation-delay:0ms) (animation-duration:1s)\n             (animation-fill-mode:forwards)\n             (animation-name:layer-slide)\n             (animation-timing-function:linear)\n             (animation:none)@media(print)\n             (animation-play-state:paused)@motion-reduce\">→</span>\n  </div>\n</div>",
+      "<!-- 600ms delay -->\n<div class=\"w(240) max-w-full\">\n  <p class=\"mb-sm font-mono font-xs fg-text-muted\">Base 0 · start 24 · end 96px</p>\n  <div aria-hidden=\"true\"\n    class=\"h(56) p-xs outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(40) w(48)\n             b(1) b-solid b-blue-60 r-sm bg-blue-10\n             fg-blue-80 (transform:none)\n             (animation-delay:600ms) (animation-duration:1s)\n             (animation-fill-mode:forwards)\n             (animation-name:layer-slide)\n             (animation-timing-function:linear)\n             (animation:none)@media(print)\n             (animation-play-state:paused)@motion-reduce\">→</span>\n  </div>\n</div>"
+    ],
+    "css": "@theme {\n\n}\n@keyframes layer-slide {\n    from { transform: translateX(24px); }\n    to { transform: translateX(96px); }\n  }\n\n",
+    "classes": [
+      "w(240)",
+      "max-w-full",
+      "mb-sm",
+      "font-mono",
+      "font-xs",
+      "fg-text-muted",
+      "h(56)",
+      "p-xs",
+      "outline(1)",
+      "outline-dashed",
+      "outline-line-subtle",
+      "grid",
+      "(place-items:center)",
+      "h(40)",
+      "w(48)",
+      "b(1)",
+      "b-solid",
+      "b-blue-60",
+      "r-sm",
+      "bg-blue-10",
+      "fg-blue-80",
+      "(transform:none)",
+      "(animation-delay:0ms)",
+      "(animation-duration:1s)",
+      "(animation-fill-mode:forwards)",
+      "(animation-name:layer-slide)",
+      "(animation-timing-function:linear)",
+      "(animation:none)@media(print)",
+      "(animation-play-state:paused)@motion-reduce",
+      "(animation-delay:600ms)"
+    ],
+    "classLists": [
+      "w(240) max-w-full",
+      "mb-sm font-mono font-xs fg-text-muted",
+      "h(56) p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(40) w(48) b(1) b-solid b-blue-60 r-sm bg-blue-10 fg-blue-80 (transform:none) (animation-delay:0ms) (animation-duration:1s) (animation-fill-mode:forwards) (animation-name:layer-slide) (animation-timing-function:linear) (animation:none)@media(print) (animation-play-state:paused)@motion-reduce",
+      "w(240) max-w-full",
+      "mb-sm font-mono font-xs fg-text-muted",
+      "h(56) p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(40) w(48) b(1) b-solid b-blue-60 r-sm bg-blue-10 fg-blue-80 (transform:none) (animation-delay:600ms) (animation-duration:1s) (animation-fill-mode:forwards) (animation-name:layer-slide) (animation-timing-function:linear) (animation:none)@media(print) (animation-play-state:paused)@motion-reduce"
+    ],
+    "highlighted": []
+  }
+]

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

@@ -0,0 +1,49 @@
+[
+  {
+    "page": "animation-direction",
+    "id": "play-alternately",
+    "title": "Play alternately",
+    "html": [
+      "<!-- alternate -->\n<div class=\"w(240) max-w-full\">\n  <p class=\"mb-sm font-mono font-xs fg-text-muted\">Base 0 · start 24 · end 96px</p>\n  <div aria-hidden=\"true\"\n    class=\"h(56) p-xs outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(40) w(48)\n             b(1) b-solid b-blue-60 r-sm bg-blue-10\n             fg-blue-80 (transform:none)\n             (animation-direction:alternate)\n             (animation-duration:1s)\n             (animation-iteration-count:infinite)\n             (animation-name:layer-slide)\n             (animation-timing-function:linear)\n             (animation:none)@media(print)\n             (animation-play-state:paused)@motion-reduce\">→</span>\n  </div>\n</div>"
+    ],
+    "css": "@theme {\n\n}\n@keyframes layer-slide {\n    from { transform: translateX(24px); }\n    to { transform: translateX(96px); }\n  }\n\n",
+    "classes": [
+      "w(240)",
+      "max-w-full",
+      "mb-sm",
+      "font-mono",
+      "font-xs",
+      "fg-text-muted",
+      "h(56)",
+      "p-xs",
+      "outline(1)",
+      "outline-dashed",
+      "outline-line-subtle",
+      "grid",
+      "(place-items:center)",
+      "h(40)",
+      "w(48)",
+      "b(1)",
+      "b-solid",
+      "b-blue-60",
+      "r-sm",
+      "bg-blue-10",
+      "fg-blue-80",
+      "(transform:none)",
+      "(animation-direction:alternate)",
+      "(animation-duration:1s)",
+      "(animation-iteration-count:infinite)",
+      "(animation-name:layer-slide)",
+      "(animation-timing-function:linear)",
+      "(animation:none)@media(print)",
+      "(animation-play-state:paused)@motion-reduce"
+    ],
+    "classLists": [
+      "w(240) max-w-full",
+      "mb-sm font-mono font-xs fg-text-muted",
+      "h(56) p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(40) w(48) b(1) b-solid b-blue-60 r-sm bg-blue-10 fg-blue-80 (transform:none) (animation-direction:alternate) (animation-duration:1s) (animation-iteration-count:infinite) (animation-name:layer-slide) (animation-timing-function:linear) (animation:none)@media(print) (animation-play-state:paused)@motion-reduce"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/animation-fill-mode.json

@@ -0,0 +1,55 @@
+[
+  {
+    "page": "animation-fill-mode",
+    "id": "apply-both-before-and-after-states",
+    "title": "Apply both before and after states",
+    "html": [
+      "<!-- Backwards · starting state only -->\n<div class=\"w(240) max-w-full\">\n  <p class=\"mb-sm font-mono font-xs fg-text-muted\">Base 0 · start 24 · end 96px</p>\n  <div aria-hidden=\"true\"\n    class=\"h(56) p-xs outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(40) w(48)\n             b(1) b-solid b-blue-60 r-sm bg-blue-10\n             fg-blue-80 (transform:none)\n             (animation-delay:600ms) (animation-duration:1s)\n             (animation-fill-mode:backwards)\n             (animation-name:layer-slide)\n             (animation-timing-function:linear)\n             (animation:none)@media(print)\n             (animation-play-state:paused)@motion-reduce\">→</span>\n  </div>\n</div>",
+      "<!-- Both · starting and ending states -->\n<div class=\"w(240) max-w-full\">\n  <p class=\"mb-sm font-mono font-xs fg-text-muted\">Base 0 · start 24 · end 96px</p>\n  <div aria-hidden=\"true\"\n    class=\"h(56) p-xs outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(40) w(48)\n             b(1) b-solid b-blue-60 r-sm bg-blue-10\n             fg-blue-80 (transform:none)\n             (animation-delay:600ms) (animation-duration:1s)\n             (animation-fill-mode:both)\n             (animation-name:layer-slide)\n             (animation-timing-function:linear)\n             (animation:none)@media(print)\n             (animation-play-state:paused)@motion-reduce\">→</span>\n  </div>\n</div>"
+    ],
+    "css": "@theme {\n\n}\n@keyframes layer-slide {\n    from { transform: translateX(24px); }\n    to { transform: translateX(96px); }\n  }\n\n",
+    "classes": [
+      "w(240)",
+      "max-w-full",
+      "mb-sm",
+      "font-mono",
+      "font-xs",
+      "fg-text-muted",
+      "h(56)",
+      "p-xs",
+      "outline(1)",
+      "outline-dashed",
+      "outline-line-subtle",
+      "grid",
+      "(place-items:center)",
+      "h(40)",
+      "w(48)",
+      "b(1)",
+      "b-solid",
+      "b-blue-60",
+      "r-sm",
+      "bg-blue-10",
+      "fg-blue-80",
+      "(transform:none)",
+      "(animation-delay:600ms)",
+      "(animation-duration:1s)",
+      "(animation-fill-mode:backwards)",
+      "(animation-name:layer-slide)",
+      "(animation-timing-function:linear)",
+      "(animation:none)@media(print)",
+      "(animation-play-state:paused)@motion-reduce",
+      "(animation-fill-mode:both)"
+    ],
+    "classLists": [
+      "w(240) max-w-full",
+      "mb-sm font-mono font-xs fg-text-muted",
+      "h(56) p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(40) w(48) b(1) b-solid b-blue-60 r-sm bg-blue-10 fg-blue-80 (transform:none) (animation-delay:600ms) (animation-duration:1s) (animation-fill-mode:backwards) (animation-name:layer-slide) (animation-timing-function:linear) (animation:none)@media(print) (animation-play-state:paused)@motion-reduce",
+      "w(240) max-w-full",
+      "mb-sm font-mono font-xs fg-text-muted",
+      "h(56) p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(40) w(48) b(1) b-solid b-blue-60 r-sm bg-blue-10 fg-blue-80 (transform:none) (animation-delay:600ms) (animation-duration:1s) (animation-fill-mode:both) (animation-name:layer-slide) (animation-timing-function:linear) (animation:none)@media(print) (animation-play-state:paused)@motion-reduce"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/animation-iteration-count.json

@@ -0,0 +1,55 @@
+[
+  {
+    "page": "animation-iteration-count",
+    "id": "specify-n-iterations",
+    "title": "Specify a number of iterations",
+    "html": [
+      "<!-- Three cycles · ends at 96px -->\n<div class=\"w(240) max-w-full\">\n  <p class=\"mb-sm font-mono font-xs fg-text-muted\">Base 0 · start 24 · end 96px</p>\n  <div aria-hidden=\"true\"\n    class=\"h(56) p-xs outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(40) w(48)\n             b(1) b-solid b-blue-60 r-sm bg-blue-10\n             fg-blue-80 (transform:none)\n             (animation-duration:1s)\n             (animation-fill-mode:forwards)\n             (animation-iteration-count:3)\n             (animation-name:layer-slide)\n             (animation-timing-function:linear)\n             (animation:none)@media(print)\n             (animation-play-state:paused)@motion-reduce\">→</span>\n  </div>\n</div>",
+      "<!-- 2.5 cycles · ends at 60px -->\n<div class=\"w(240) max-w-full\">\n  <p class=\"mb-sm font-mono font-xs fg-text-muted\">Base 0 · start 24 · end 96px</p>\n  <div aria-hidden=\"true\"\n    class=\"h(56) p-xs outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(40) w(48)\n             b(1) b-solid b-blue-60 r-sm bg-blue-10\n             fg-blue-80 (transform:none)\n             (animation-duration:1s)\n             (animation-fill-mode:forwards)\n             (animation-iteration-count:2.5)\n             (animation-name:layer-slide)\n             (animation-timing-function:linear)\n             (animation:none)@media(print)\n             (animation-play-state:paused)@motion-reduce\">→</span>\n  </div>\n</div>"
+    ],
+    "css": "@theme {\n\n}\n@keyframes layer-slide {\n    from { transform: translateX(24px); }\n    to { transform: translateX(96px); }\n  }\n\n",
+    "classes": [
+      "w(240)",
+      "max-w-full",
+      "mb-sm",
+      "font-mono",
+      "font-xs",
+      "fg-text-muted",
+      "h(56)",
+      "p-xs",
+      "outline(1)",
+      "outline-dashed",
+      "outline-line-subtle",
+      "grid",
+      "(place-items:center)",
+      "h(40)",
+      "w(48)",
+      "b(1)",
+      "b-solid",
+      "b-blue-60",
+      "r-sm",
+      "bg-blue-10",
+      "fg-blue-80",
+      "(transform:none)",
+      "(animation-duration:1s)",
+      "(animation-fill-mode:forwards)",
+      "(animation-iteration-count:3)",
+      "(animation-name:layer-slide)",
+      "(animation-timing-function:linear)",
+      "(animation:none)@media(print)",
+      "(animation-play-state:paused)@motion-reduce",
+      "(animation-iteration-count:2.5)"
+    ],
+    "classLists": [
+      "w(240) max-w-full",
+      "mb-sm font-mono font-xs fg-text-muted",
+      "h(56) p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(40) w(48) b(1) b-solid b-blue-60 r-sm bg-blue-10 fg-blue-80 (transform:none) (animation-duration:1s) (animation-fill-mode:forwards) (animation-iteration-count:3) (animation-name:layer-slide) (animation-timing-function:linear) (animation:none)@media(print) (animation-play-state:paused)@motion-reduce",
+      "w(240) max-w-full",
+      "mb-sm font-mono font-xs fg-text-muted",
+      "h(56) p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(40) w(48) b(1) b-solid b-blue-60 r-sm bg-blue-10 fg-blue-80 (transform:none) (animation-duration:1s) (animation-fill-mode:forwards) (animation-iteration-count:2.5) (animation-name:layer-slide) (animation-timing-function:linear) (animation:none)@media(print) (animation-play-state:paused)@motion-reduce"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/animation-play-state.json

@@ -0,0 +1,83 @@
+[
+  {
+    "page": "animation-play-state",
+    "id": "run-an-animation",
+    "title": "Run an animation",
+    "html": [
+      "<!-- Native checkbox · run and pause -->\n<div\n  class=\"(animation-play-state:running):has(input:checked)>svg@media(screen)@motion-safe\">\n  <label class=\"block mb-sm font-sm\"><input type=\"checkbox\" class=\"mr-xs accent-blue outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible outline-offset(3):focus-visible\">Run indicator</label>\n  <svg id=\"target\" aria-hidden=\"true\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\"\n    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n    class=\"fg-text-blue\n           (animation-name:rotate) (animation-duration:2s) (animation-timing-function:linear) (animation-iteration-count:infinite)\n           (animation-play-state:paused)\n           (animation:none)@media(print)\">\n    <circle cx=\"24\" cy=\"24\" r=\"17\" opacity=\".25\" />\n    <path d=\"M24 8v16h12 M19 13l5-5 5 5\" />\n  </svg>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "(animation-play-state:running):has(input:checked)>svg@media(screen)@motion-safe",
+      "block",
+      "mb-sm",
+      "font-sm",
+      "mr-xs",
+      "accent-blue",
+      "outline(2):focus-visible",
+      "outline-solid:focus-visible",
+      "outline-blue:focus-visible",
+      "outline-offset(3):focus-visible",
+      "fg-text-blue",
+      "(animation-name:rotate)",
+      "(animation-duration:2s)",
+      "(animation-timing-function:linear)",
+      "(animation-iteration-count:infinite)",
+      "(animation-play-state:paused)",
+      "(animation:none)@media(print)"
+    ],
+    "classLists": [
+      "(animation-play-state:running):has(input:checked)>svg@media(screen)@motion-safe",
+      "block mb-sm font-sm",
+      "mr-xs accent-blue outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible outline-offset(3):focus-visible",
+      "fg-text-blue (animation-name:rotate) (animation-duration:2s) (animation-timing-function:linear) (animation-iteration-count:infinite) (animation-play-state:paused) (animation:none)@media(print)"
+    ],
+    "highlighted": []
+  },
+  {
+    "page": "animation-play-state",
+    "id": "pause-nonessential-motion",
+    "title": "Pause nonessential motion",
+    "html": [
+      "<!-- Pause while editing -->\n<div\n  class=\"(animation-play-state:paused):has(input:checked)>div:focus-within>svg@media(screen)@motion-safe\n         (animation-play-state:running):has(input:checked)>div>svg@media(screen)@motion-safe\">\n  <label class=\"block mb-sm font-sm\"><input type=\"checkbox\" class=\"mr-xs accent-blue outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible outline-offset(3):focus-visible\">Run indicator</label>\n  <div class=\"p-sm b(1) b-solid b-line-subtle r-sm\">\n    <label class=\"block mb-sm font-sm\">Project name <input type=\"text\" value=\"Canvas\" class=\"max-w-full p-xs b(1) b-solid b-line-subtle r-sm outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible outline-offset(3):focus-visible\"></label>\n    <svg id=\"target\" aria-hidden=\"true\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\"\n      fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n      class=\"fg-text-blue\n             (animation-name:rotate) (animation-duration:2s) (animation-timing-function:linear) (animation-iteration-count:infinite)\n             (animation-play-state:paused)\n             (animation:none)@media(print)\">\n      <circle cx=\"24\" cy=\"24\" r=\"17\" opacity=\".25\" />\n      <path d=\"M24 8v16h12 M19 13l5-5 5 5\" />\n    </svg>\n  </div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "(animation-play-state:paused):has(input:checked)>div:focus-within>svg@media(screen)@motion-safe",
+      "(animation-play-state:running):has(input:checked)>div>svg@media(screen)@motion-safe",
+      "block",
+      "mb-sm",
+      "font-sm",
+      "mr-xs",
+      "accent-blue",
+      "outline(2):focus-visible",
+      "outline-solid:focus-visible",
+      "outline-blue:focus-visible",
+      "outline-offset(3):focus-visible",
+      "p-sm",
+      "b(1)",
+      "b-solid",
+      "b-line-subtle",
+      "r-sm",
+      "max-w-full",
+      "p-xs",
+      "fg-text-blue",
+      "(animation-name:rotate)",
+      "(animation-duration:2s)",
+      "(animation-timing-function:linear)",
+      "(animation-iteration-count:infinite)",
+      "(animation-play-state:paused)",
+      "(animation:none)@media(print)"
+    ],
+    "classLists": [
+      "(animation-play-state:paused):has(input:checked)>div:focus-within>svg@media(screen)@motion-safe (animation-play-state:running):has(input:checked)>div>svg@media(screen)@motion-safe",
+      "block mb-sm font-sm",
+      "mr-xs accent-blue outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible outline-offset(3):focus-visible",
+      "p-sm b(1) b-solid b-line-subtle r-sm",
+      "block mb-sm font-sm",
+      "max-w-full p-xs b(1) b-solid b-line-subtle r-sm outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible outline-offset(3):focus-visible",
+      "fg-text-blue (animation-name:rotate) (animation-duration:2s) (animation-timing-function:linear) (animation-iteration-count:infinite) (animation-play-state:paused) (animation:none)@media(print)"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/animation-timing-function.json

@@ -0,0 +1,48 @@
+[
+  {
+    "page": "animation-timing-function",
+    "id": "match-easing-to-intent",
+    "title": "Match easing to intent",
+    "html": [
+      "<!-- Keyframe easing · four 18px steps -->\n<div class=\"w(240) max-w-full\">\n  <p class=\"mb-sm font-mono font-xs fg-text-muted\">Base 0 · start 24 · end 96px</p>\n  <div aria-hidden=\"true\"\n    class=\"h(56) p-xs outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(40) w(48)\n             b(1) b-solid b-blue-60 r-sm bg-blue-10\n             fg-blue-80 (transform:none)\n             (animation-duration:1s)\n             (animation-fill-mode:forwards)\n             (animation-name:layer-slide)\n             (animation-timing-function:linear)\n             (animation:none)@media(print)\n             (animation-play-state:paused)@motion-reduce\">→</span>\n  </div>\n</div>"
+    ],
+    "css": "@theme {\n\n}\n@keyframes layer-slide {\n    from { transform: translateX(24px); animation-timing-function:steps(4,end); }\n    to { transform: translateX(96px); }\n  }\n\n",
+    "classes": [
+      "w(240)",
+      "max-w-full",
+      "mb-sm",
+      "font-mono",
+      "font-xs",
+      "fg-text-muted",
+      "h(56)",
+      "p-xs",
+      "outline(1)",
+      "outline-dashed",
+      "outline-line-subtle",
+      "grid",
+      "(place-items:center)",
+      "h(40)",
+      "w(48)",
+      "b(1)",
+      "b-solid",
+      "b-blue-60",
+      "r-sm",
+      "bg-blue-10",
+      "fg-blue-80",
+      "(transform:none)",
+      "(animation-duration:1s)",
+      "(animation-fill-mode:forwards)",
+      "(animation-name:layer-slide)",
+      "(animation-timing-function:linear)",
+      "(animation:none)@media(print)",
+      "(animation-play-state:paused)@motion-reduce"
+    ],
+    "classLists": [
+      "w(240) max-w-full",
+      "mb-sm font-mono font-xs fg-text-muted",
+      "h(56) p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(40) w(48) b(1) b-solid b-blue-60 r-sm bg-blue-10 fg-blue-80 (transform:none) (animation-duration:1s) (animation-fill-mode:forwards) (animation-name:layer-slide) (animation-timing-function:linear) (animation:none)@media(print) (animation-play-state:paused)@motion-reduce"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/appearance.json

@@ -0,0 +1,44 @@
+[
+  {
+    "page": "appearance",
+    "id": "remove-default-styling",
+    "title": "Remove default styling",
+    "html": [
+      "<!-- Custom appearance -->\n<label class=\"grid gap-sm w(240) max-w-full\">\n  Sort assets\n  <span class=\"relative block\">\n    <select id=\"target\"\n\n    class=\"w-full pr-xl b(1) b-solid b-line-divider r-sm\n           bg-surface-base (appearance:none)\">\n      <option value=\"newest\">Newest first</option>\n      <option value=\"oldest\">Oldest first</option>\n      <option value=\"name\">Name</option>\n    </select>\n    <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n      fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\n      class=\"absolute right-sm (top:50%)\n             (transform:translateY(-50%)) pointer-none\">\n      <path d=\"m4 6 4 4 4-4\" />\n    </svg>\n  </span>\n</label>",
+      "<!-- Native comparison -->\n<label class=\"grid gap-sm w(240) max-w-full\">\n  Sort assets\n  <span class=\"relative block\">\n    <select id=\"target\" class=\"w-full (appearance:auto)\">\n      <option value=\"newest\">Newest first</option>\n      <option value=\"oldest\">Oldest first</option>\n      <option value=\"name\">Name</option>\n    </select>\n  </span>\n</label>"
+    ],
+    "css": "",
+    "classes": [
+      "grid",
+      "gap-sm",
+      "w(240)",
+      "max-w-full",
+      "relative",
+      "block",
+      "w-full",
+      "pr-xl",
+      "b(1)",
+      "b-solid",
+      "b-line-divider",
+      "r-sm",
+      "bg-surface-base",
+      "(appearance:none)",
+      "absolute",
+      "right-sm",
+      "(top:50%)",
+      "(transform:translateY(-50%))",
+      "pointer-none",
+      "(appearance:auto)"
+    ],
+    "classLists": [
+      "grid gap-sm w(240) max-w-full",
+      "relative block",
+      "w-full pr-xl b(1) b-solid b-line-divider r-sm bg-surface-base (appearance:none)",
+      "absolute right-sm (top:50%) (transform:translateY(-50%)) pointer-none",
+      "grid gap-sm w(240) max-w-full",
+      "relative block",
+      "w-full (appearance:auto)"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/aspect-ratio.json

@@ -0,0 +1,28 @@
+[
+  {
+    "page": "aspect-ratio",
+    "id": "pair-with-one-explicit-axis",
+    "title": "Pair with one explicit axis",
+    "html": [
+      "<!-- Automatic height · ratio applies -->\n<div id=\"layout\" class=\"(width:17.5rem) max-w-full\" role=\"group\" aria-label=\"Available space\">\n  <div id=\"target\" class=\"h-auto (width:15rem) (aspect-ratio:16/9) p-sm\">16:9</div>\n</div>",
+      "<!-- Definite height · 80px -->\n<div id=\"layout\" class=\"(width:17.5rem) max-w-full\" role=\"group\" aria-label=\"Available space\">\n  <div id=\"target\" class=\"(height:5rem) (width:15rem) (aspect-ratio:16/9) p-sm\">240 × 80</div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "(width:17.5rem)",
+      "max-w-full",
+      "h-auto",
+      "(width:15rem)",
+      "(aspect-ratio:16/9)",
+      "p-sm",
+      "(height:5rem)"
+    ],
+    "classLists": [
+      "(width:17.5rem) max-w-full",
+      "h-auto (width:15rem) (aspect-ratio:16/9) p-sm",
+      "(width:17.5rem) max-w-full",
+      "(height:5rem) (width:15rem) (aspect-ratio:16/9) p-sm"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/backdrop-filter.json

@@ -0,0 +1,44 @@
+[
+  {
+    "page": "backdrop-filter",
+    "id": "blur-content-behind-an-element",
+    "title": "Blur content behind an element",
+    "html": [
+      "<!-- No filter · sharp backdrop -->\n<div class=\"relative h(168) w(240) max-w-full\">\n  <img src=\"/demo/landscape.svg\"\n  width=\"320\" height=\"200\"\n  alt=\"\"\n  class=\"block h(168) w(240) max-w-full\n         object-cover\" />\n  <div id=\"target\"\n    class=\"absolute inset-md flex items-center\n           justify-center p-sm b(1) b-solid b-line-divider r-sm\n           font-md bg-surface-base/.64 fg-text-strong\n           (backdrop-filter:none)\">\n    Preview layer\n  </div>\n</div>",
+      "<!-- Blur · softened backdrop -->\n<div class=\"relative h(168) w(240) max-w-full\">\n  <img src=\"/demo/landscape.svg\"\n  width=\"320\" height=\"200\"\n  alt=\"\"\n  class=\"block h(168) w(240) max-w-full\n         object-cover\" />\n  <div id=\"target\"\n    class=\"absolute inset-md flex items-center\n           justify-center p-sm b(1) b-solid b-line-divider r-sm\n           font-md bg-surface-base/.64 fg-text-strong\n           (backdrop-filter:blur(8px))\">\n    Preview layer\n  </div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "relative",
+      "h(168)",
+      "w(240)",
+      "max-w-full",
+      "block",
+      "object-cover",
+      "absolute",
+      "inset-md",
+      "flex",
+      "items-center",
+      "justify-center",
+      "p-sm",
+      "b(1)",
+      "b-solid",
+      "b-line-divider",
+      "r-sm",
+      "font-md",
+      "bg-surface-base/.64",
+      "fg-text-strong",
+      "(backdrop-filter:none)",
+      "(backdrop-filter:blur(8px))"
+    ],
+    "classLists": [
+      "relative h(168) w(240) max-w-full",
+      "block h(168) w(240) max-w-full object-cover",
+      "absolute inset-md flex items-center justify-center p-sm b(1) b-solid b-line-divider r-sm font-md bg-surface-base/.64 fg-text-strong (backdrop-filter:none)",
+      "relative h(168) w(240) max-w-full",
+      "block h(168) w(240) max-w-full object-cover",
+      "absolute inset-md flex items-center justify-center p-sm b(1) b-solid b-line-divider r-sm font-md bg-surface-base/.64 fg-text-strong (backdrop-filter:blur(8px))"
+    ],
+    "highlighted": []
+  }
+]

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

@@ -0,0 +1,49 @@
+[
+  {
+    "page": "background-attachment",
+    "id": "attach-to-scrollable-content",
+    "title": "Attach to scrollable content",
+    "html": [
+      "<!-- Scrollable content · local attachment -->\n<body class=\"min-h(720)\">\n  <section id=\"target\" tabindex=\"0\" aria-label=\"Scrollable background specimen\"\n  class=\"overflow-auto h(220) w-xs max-w-full p-md b(1) b-solid b-line-divider\n         (background-attachment:local) (background-repeat:repeat-y) (background-position-x:50%) (background-position-y:0px)\n         (background-size:320px|200px) (background-image:url(/demo/landscape.svg))\"\n>\n    <div class=\"flex flex-col items-start justify-between h(480)\">\n      <p class=\"m(0) p-xs bg-surface-base fg-text-body\">Start of content</p>\n      <p class=\"m(0) p-xs bg-surface-base fg-text-body\">End of content</p>\n    </div>\n  </section>\n  <p class=\"mt-md font-sm fg-text-muted\">Scroll this page as well as the inner panel.</p>\n</body>"
+    ],
+    "css": "",
+    "classes": [
+      "min-h(720)",
+      "overflow-auto",
+      "h(220)",
+      "w-xs",
+      "max-w-full",
+      "p-md",
+      "b(1)",
+      "b-solid",
+      "b-line-divider",
+      "(background-attachment:local)",
+      "(background-repeat:repeat-y)",
+      "(background-position-x:50%)",
+      "(background-position-y:0px)",
+      "(background-size:320px|200px)",
+      "(background-image:url(/demo/landscape.svg))",
+      "flex",
+      "flex-col",
+      "items-start",
+      "justify-between",
+      "h(480)",
+      "m(0)",
+      "p-xs",
+      "bg-surface-base",
+      "fg-text-body",
+      "mt-md",
+      "font-sm",
+      "fg-text-muted"
+    ],
+    "classLists": [
+      "min-h(720)",
+      "overflow-auto h(220) w-xs max-w-full p-md b(1) b-solid b-line-divider (background-attachment:local) (background-repeat:repeat-y) (background-position-x:50%) (background-position-y:0px) (background-size:320px|200px) (background-image:url(/demo/landscape.svg))",
+      "flex flex-col items-start justify-between h(480)",
+      "m(0) p-xs bg-surface-base fg-text-body",
+      "m(0) p-xs bg-surface-base fg-text-body",
+      "mt-md font-sm fg-text-muted"
+    ],
+    "highlighted": []
+  }
+]