@master/internal-site 0.0.0-stage → 0.1.0

package/src/demo/specimens/touch-action.json

@@ -0,0 +1,45 @@
+[
+  {
+    "page": "touch-action",
+    "id": "disable-browser-gestures-on-a-custom-surface",
+    "title": "Disable browser gestures on a custom surface",
+    "html": [
+      "<!-- None · native touch panning blocked -->\n<div id=\"target\" role=\"region\" aria-label=\"Gesture test\" tabindex=\"0\"\n\nclass=\"overflow-auto h(160) w(240) max-w-full\n       b(1) b-solid b-line-divider r-sm (touch-action:none)\">\n  <div\n\n  class=\"flex flex-col justify-between h(360)\n         w(480) p-md bg-surface-raised\">\n    <p class=\"m(0)\">Start · swipe vertically or horizontally</p>\n    <p class=\"self-end m(0) fg-text-blue\">End · 480 × 360px content</p>\n  </div>\n</div>",
+      "<!-- Auto · native touch panning allowed -->\n<div id=\"target\" role=\"region\" aria-label=\"Gesture test\" tabindex=\"0\"\n\nclass=\"overflow-auto h(160) w(240) max-w-full\n       b(1) b-solid b-line-divider r-sm (touch-action:auto)\">\n  <div\n\n  class=\"flex flex-col justify-between h(360)\n         w(480) p-md bg-surface-raised\">\n    <p class=\"m(0)\">Start · swipe vertically or horizontally</p>\n    <p class=\"self-end m(0) fg-text-blue\">End · 480 × 360px content</p>\n  </div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "overflow-auto",
+      "h(160)",
+      "w(240)",
+      "max-w-full",
+      "b(1)",
+      "b-solid",
+      "b-line-divider",
+      "r-sm",
+      "(touch-action:none)",
+      "flex",
+      "flex-col",
+      "justify-between",
+      "h(360)",
+      "w(480)",
+      "p-md",
+      "bg-surface-raised",
+      "m(0)",
+      "self-end",
+      "fg-text-blue",
+      "(touch-action:auto)"
+    ],
+    "classLists": [
+      "overflow-auto h(160) w(240) max-w-full b(1) b-solid b-line-divider r-sm (touch-action:none)",
+      "flex flex-col justify-between h(360) w(480) p-md bg-surface-raised",
+      "m(0)",
+      "self-end m(0) fg-text-blue",
+      "overflow-auto h(160) w(240) max-w-full b(1) b-solid b-line-divider r-sm (touch-action:auto)",
+      "flex flex-col justify-between h(360) w(480) p-md bg-surface-raised",
+      "m(0)",
+      "self-end m(0) fg-text-blue"
+    ],
+    "highlighted": []
+  }
+]

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

@@ -0,0 +1,37 @@
+[
+  {
+    "page": "transform-box",
+    "id": "choose-the-transform-reference-box",
+    "title": "Choose the transform reference box",
+    "html": [
+      "<!-- Fill box · translate 32 units -->\n<svg width=\"240\" height=\"160\" viewBox=\"0 0 240 160\"\n  role=\"img\" aria-label=\"Rectangle translated from its dashed source bounds\"\n  class=\"block h-auto max-w-full\n         outline(1) outline-solid outline-line-subtle\">\n  <rect x=\"24\" y=\"60\" width=\"64\" height=\"40\"\n    fill=\"none\" stroke=\"#7c3aed\" stroke-dasharray=\"4 4\" />\n  <rect id=\"target\" x=\"24\" y=\"60\" width=\"64\" height=\"40\"\n    class=\"fill-blue-20 stroke-blue-60\n           (transform:translateX(50%)) (transform-box:fill-box)\n           (stroke-width:16px)\" />\n</svg>",
+      "<!-- Stroke box · translate 40 units -->\n<svg width=\"240\" height=\"160\" viewBox=\"0 0 240 160\"\n  role=\"img\" aria-label=\"Rectangle translated from its dashed source bounds\"\n  class=\"block h-auto max-w-full\n         outline(1) outline-solid outline-line-subtle\">\n  <rect x=\"24\" y=\"60\" width=\"64\" height=\"40\"\n    fill=\"none\" stroke=\"#7c3aed\" stroke-dasharray=\"4 4\" />\n  <rect id=\"target\" x=\"24\" y=\"60\" width=\"64\" height=\"40\"\n    class=\"fill-blue-20 stroke-blue-60\n           (transform:translateX(50%)) (transform-box:stroke-box)\n           (stroke-width:16px)\" />\n</svg>",
+      "<!-- View box · translate 120 units -->\n<svg width=\"240\" height=\"160\" viewBox=\"0 0 240 160\"\n  role=\"img\" aria-label=\"Rectangle translated from its dashed source bounds\"\n  class=\"block h-auto max-w-full\n         outline(1) outline-solid outline-line-subtle\">\n  <rect x=\"24\" y=\"60\" width=\"64\" height=\"40\"\n    fill=\"none\" stroke=\"#7c3aed\" stroke-dasharray=\"4 4\" />\n  <rect id=\"target\" x=\"24\" y=\"60\" width=\"64\" height=\"40\"\n    class=\"fill-blue-20 stroke-blue-60\n           (transform:translateX(50%)) (transform-box:view-box)\n           (stroke-width:16px)\" />\n</svg>"
+    ],
+    "css": "",
+    "classes": [
+      "block",
+      "h-auto",
+      "max-w-full",
+      "outline(1)",
+      "outline-solid",
+      "outline-line-subtle",
+      "fill-blue-20",
+      "stroke-blue-60",
+      "(transform:translateX(50%))",
+      "(transform-box:fill-box)",
+      "(stroke-width:16px)",
+      "(transform-box:stroke-box)",
+      "(transform-box:view-box)"
+    ],
+    "classLists": [
+      "block h-auto max-w-full outline(1) outline-solid outline-line-subtle",
+      "fill-blue-20 stroke-blue-60 (transform:translateX(50%)) (transform-box:fill-box) (stroke-width:16px)",
+      "block h-auto max-w-full outline(1) outline-solid outline-line-subtle",
+      "fill-blue-20 stroke-blue-60 (transform:translateX(50%)) (transform-box:stroke-box) (stroke-width:16px)",
+      "block h-auto max-w-full outline(1) outline-solid outline-line-subtle",
+      "fill-blue-20 stroke-blue-60 (transform:translateX(50%)) (transform-box:view-box) (stroke-width:16px)"
+    ],
+    "highlighted": []
+  }
+]

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

@@ -0,0 +1,56 @@
+[
+  {
+    "page": "transform-origin",
+    "id": "set-the-pivot-point",
+    "title": "Set the pivot point",
+    "html": [
+      "<!-- Center · four edges move inward -->\n<div class=\"p-lg\">\n  <div class=\"relative h(96) w(160) outline(1) outline-dashed outline-line-subtle\">\n    <div id=\"target\"\n      class=\"grid items-start (justify-items:center) h(96) w(160) p-sm\n             b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n             fg-blue-80 (transform:scale(.75))\n             (transform-origin:center)\">\n      Center pivot\n    </div>\n    <span aria-hidden=\"true\"\n      class=\"absolute left(77) top(45) w(6) h(6) (border-radius:100%)\n             bg-violet-60 pointer-none\"></span>\n  </div>\n</div>",
+      "<!-- Top left · two edges stay fixed -->\n<div class=\"p-lg\">\n  <div class=\"relative h(96) w(160) outline(1) outline-dashed outline-line-subtle\">\n    <div id=\"target\"\n      class=\"grid items-start (justify-items:center) h(96) w(160) p-sm\n             b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n             fg-blue-80 (transform:scale(.75))\n             (transform-origin:top|left)\">\n      Corner pivot\n    </div>\n    <span aria-hidden=\"true\"\n      class=\"absolute left(-3) top(-3) w(6) h(6) (border-radius:100%)\n             bg-violet-60 pointer-none\"></span>\n  </div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "p-lg",
+      "relative",
+      "h(96)",
+      "w(160)",
+      "outline(1)",
+      "outline-dashed",
+      "outline-line-subtle",
+      "grid",
+      "items-start",
+      "(justify-items:center)",
+      "p-sm",
+      "b(1)",
+      "b-solid",
+      "b-blue-60",
+      "r-sm",
+      "font-sm",
+      "bg-blue-10",
+      "fg-blue-80",
+      "(transform:scale(.75))",
+      "(transform-origin:center)",
+      "absolute",
+      "left(77)",
+      "top(45)",
+      "w(6)",
+      "h(6)",
+      "(border-radius:100%)",
+      "bg-violet-60",
+      "pointer-none",
+      "(transform-origin:top|left)",
+      "left(-3)",
+      "top(-3)"
+    ],
+    "classLists": [
+      "p-lg",
+      "relative h(96) w(160) outline(1) outline-dashed outline-line-subtle",
+      "grid items-start (justify-items:center) h(96) w(160) p-sm b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10 fg-blue-80 (transform:scale(.75)) (transform-origin:center)",
+      "absolute left(77) top(45) w(6) h(6) (border-radius:100%) bg-violet-60 pointer-none",
+      "p-lg",
+      "relative h(96) w(160) outline(1) outline-dashed outline-line-subtle",
+      "grid items-start (justify-items:center) h(96) w(160) p-sm b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10 fg-blue-80 (transform:scale(.75)) (transform-origin:top|left)",
+      "absolute left(-3) top(-3) w(6) h(6) (border-radius:100%) bg-violet-60 pointer-none"
+    ],
+    "highlighted": []
+  }
+]

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

@@ -0,0 +1,55 @@
+[
+  {
+    "page": "transform-style",
+    "id": "flatten-nested-transforms",
+    "title": "Flatten nested transforms",
+    "html": [
+      "<!-- Explicit flat · default flattening -->\n<div class=\"grid (place-items:center) h(200) w(240)\n         max-w-full (perspective:400px)\">\n  <div id=\"target\"\n    class=\"relative h(104) w(144) b(2) b-solid b-violet-60\n           font-sm bg-violet-10 fg-violet-80\n           (transform:rotateY(32deg))\n           (transform-style:flat)\">\n    <span class=\"block p-xs\">Parent · 0</span>\n    <div id=\"front\"\n      class=\"absolute left-md top-xl grid (place-items:center)\n             h(80) w(120) b(2) b-solid b-blue-60\n             bg-blue-20 fg-blue-80\n             (transform:translateZ(48px))\">\n      Front · +48px\n    </div>\n  </div>\n</div>",
+      "<!-- Opacity .8 · preserve-3d is flattened -->\n<div class=\"grid (place-items:center) h(200) w(240)\n         max-w-full (perspective:400px)\">\n  <div id=\"target\"\n    class=\"relative h(104) w(144) b(2) b-solid b-violet-60\n           font-sm bg-violet-10 fg-violet-80 (opacity:.8)\n           (transform:rotateY(32deg))\n           (transform-style:preserve-3d)\">\n    <span class=\"block p-xs\">Parent · 0</span>\n    <div id=\"front\"\n      class=\"absolute left-md top-xl grid (place-items:center)\n             h(80) w(120) b(2) b-solid b-blue-60\n             bg-blue-20 fg-blue-80\n             (transform:translateZ(48px))\">\n      Front · +48px\n    </div>\n  </div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "grid",
+      "(place-items:center)",
+      "h(200)",
+      "w(240)",
+      "max-w-full",
+      "(perspective:400px)",
+      "relative",
+      "h(104)",
+      "w(144)",
+      "b(2)",
+      "b-solid",
+      "b-violet-60",
+      "font-sm",
+      "bg-violet-10",
+      "fg-violet-80",
+      "(transform:rotateY(32deg))",
+      "(transform-style:flat)",
+      "block",
+      "p-xs",
+      "absolute",
+      "left-md",
+      "top-xl",
+      "h(80)",
+      "w(120)",
+      "b-blue-60",
+      "bg-blue-20",
+      "fg-blue-80",
+      "(transform:translateZ(48px))",
+      "(opacity:.8)",
+      "(transform-style:preserve-3d)"
+    ],
+    "classLists": [
+      "grid (place-items:center) h(200) w(240) max-w-full (perspective:400px)",
+      "relative h(104) w(144) b(2) b-solid b-violet-60 font-sm bg-violet-10 fg-violet-80 (transform:rotateY(32deg)) (transform-style:flat)",
+      "block p-xs",
+      "absolute left-md top-xl grid (place-items:center) h(80) w(120) b(2) b-solid b-blue-60 bg-blue-20 fg-blue-80 (transform:translateZ(48px))",
+      "grid (place-items:center) h(200) w(240) max-w-full (perspective:400px)",
+      "relative h(104) w(144) b(2) b-solid b-violet-60 font-sm bg-violet-10 fg-violet-80 (opacity:.8) (transform:rotateY(32deg)) (transform-style:preserve-3d)",
+      "block p-xs",
+      "absolute left-md top-xl grid (place-items:center) h(80) w(120) b(2) b-solid b-blue-60 bg-blue-20 fg-blue-80 (transform:translateZ(48px))"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/transform.json

@@ -0,0 +1,47 @@
+[
+  {
+    "page": "transform",
+    "id": "move-an-element",
+    "title": "Move an element",
+    "html": [
+      "<!-- Translate upward · hover or focus -->\n<div class=\"p-lg\">\n  <div class=\"relative h(96) w(160) outline(1) outline-dashed outline-line-subtle\">\n    <button id=\"target\" type=\"button\"\n      class=\"grid (place-items:center) h(96) w(160) p-sm\n             b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n             fg-blue-80 (transform:none)\n             outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible\n             outline-offset(3):focus-visible\n             (transform:none)@media(print)\n             (transition-property:transform)@motion-safe (transition-duration:var(--duration-fast))@motion-safe (transition-timing-function:ease-out)@motion-safe\n             (transform:translateY(-8px)):hover@media(screen)\n             (transform:translateY(-8px)):focus-visible@media(screen)\">\n      Lift layer\n    </button>\n  </div>\n</div>"
+    ],
+    "css": "",
+    "classes": [
+      "p-lg",
+      "relative",
+      "h(96)",
+      "w(160)",
+      "outline(1)",
+      "outline-dashed",
+      "outline-line-subtle",
+      "grid",
+      "(place-items:center)",
+      "p-sm",
+      "b(1)",
+      "b-solid",
+      "b-blue-60",
+      "r-sm",
+      "font-sm",
+      "bg-blue-10",
+      "fg-blue-80",
+      "(transform:none)",
+      "outline(2):focus-visible",
+      "outline-solid:focus-visible",
+      "outline-blue:focus-visible",
+      "outline-offset(3):focus-visible",
+      "(transform:none)@media(print)",
+      "(transition-property:transform)@motion-safe",
+      "(transition-duration:var(--duration-fast))@motion-safe",
+      "(transition-timing-function:ease-out)@motion-safe",
+      "(transform:translateY(-8px)):hover@media(screen)",
+      "(transform:translateY(-8px)):focus-visible@media(screen)"
+    ],
+    "classLists": [
+      "p-lg",
+      "relative h(96) w(160) outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(96) w(160) p-sm b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10 fg-blue-80 (transform:none) outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible outline-offset(3):focus-visible (transform:none)@media(print) (transition-property:transform)@motion-safe (transition-duration:var(--duration-fast))@motion-safe (transition-timing-function:ease-out)@motion-safe (transform:translateY(-8px)):hover@media(screen) (transform:translateY(-8px)):focus-visible@media(screen)"
+    ],
+    "highlighted": []
+  }
+]

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

@@ -0,0 +1,57 @@
+[
+  {
+    "page": "transition-delay",
+    "id": "stagger-sibling-elements",
+    "title": "Stagger sibling elements",
+    "html": [
+      "<!-- One native trigger · two independent timelines -->\n<label class=\"block w(280) max-w-full font-sm\n              (transform:translateX(96px)):has(input:checked)>span>span@media(screen)\">\n  <input type=\"checkbox\" aria-label=\"Move both layers\"\n    class=\"mr-xs accent-blue\n           outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible\n           outline-offset(3):focus-visible\">\n  Move both layers\n  <span aria-hidden=\"true\"\n    class=\"block mt-md p-xs outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"first\"\n      class=\"grid (place-items:center) h(48) w(128)\n             b(1) b-solid b-blue-60 r-sm bg-blue-10\n             fg-blue-80 (transform:none)\n             (transition:none)@media(print)\n             (transition-property:transform)@media(screen)@motion-safe (transition-duration:var(--duration-slowest))@media(screen)@motion-safe (transition-timing-function:linear)@media(screen)@motion-safe\">\n      First · no delay\n    </span>\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(48) w(128) mt-sm\n             b(1) b-solid b-violet-60 r-sm bg-violet-10\n             fg-violet-80 (transform:none)\n             (transition:none)@media(print)\n             (transition-property:transform)@media(screen)@motion-safe (transition-duration:var(--duration-slowest))@media(screen)@motion-safe (transition-timing-function:linear)@media(screen)@motion-safe\n             transition-delay-slow@media(screen)@motion-safe\">\n      Second · 300ms\n    </span>\n  </span>\n</label>"
+    ],
+    "css": "",
+    "classes": [
+      "block",
+      "w(280)",
+      "max-w-full",
+      "font-sm",
+      "(transform:translateX(96px)):has(input:checked)>span>span@media(screen)",
+      "mr-xs",
+      "accent-blue",
+      "outline(2):focus-visible",
+      "outline-solid:focus-visible",
+      "outline-blue:focus-visible",
+      "outline-offset(3):focus-visible",
+      "mt-md",
+      "p-xs",
+      "outline(1)",
+      "outline-dashed",
+      "outline-line-subtle",
+      "grid",
+      "(place-items:center)",
+      "h(48)",
+      "w(128)",
+      "b(1)",
+      "b-solid",
+      "b-blue-60",
+      "r-sm",
+      "bg-blue-10",
+      "fg-blue-80",
+      "(transform:none)",
+      "(transition:none)@media(print)",
+      "(transition-property:transform)@media(screen)@motion-safe",
+      "(transition-duration:var(--duration-slowest))@media(screen)@motion-safe",
+      "(transition-timing-function:linear)@media(screen)@motion-safe",
+      "mt-sm",
+      "b-violet-60",
+      "bg-violet-10",
+      "fg-violet-80",
+      "transition-delay-slow@media(screen)@motion-safe"
+    ],
+    "classLists": [
+      "block w(280) max-w-full font-sm (transform:translateX(96px)):has(input:checked)>span>span@media(screen)",
+      "mr-xs accent-blue outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible outline-offset(3):focus-visible",
+      "block mt-md p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(48) w(128) b(1) b-solid b-blue-60 r-sm bg-blue-10 fg-blue-80 (transform:none) (transition:none)@media(print) (transition-property:transform)@media(screen)@motion-safe (transition-duration:var(--duration-slowest))@media(screen)@motion-safe (transition-timing-function:linear)@media(screen)@motion-safe",
+      "grid (place-items:center) h(48) w(128) mt-sm b(1) b-solid b-violet-60 r-sm bg-violet-10 fg-violet-80 (transform:none) (transition:none)@media(print) (transition-property:transform)@media(screen)@motion-safe (transition-duration:var(--duration-slowest))@media(screen)@motion-safe (transition-timing-function:linear)@media(screen)@motion-safe transition-delay-slow@media(screen)@motion-safe"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/transition-duration.json

@@ -0,0 +1,60 @@
+[
+  {
+    "page": "transition-duration",
+    "id": "match-duration-to-distance",
+    "title": "Match duration to distance",
+    "html": [
+      "<!-- 48px / 300ms · 160px per second -->\n<label class=\"block w(280) max-w-full font-sm\n         (transform:translateX(48px)):has(input:checked)>span>span@media(screen)\">\n  <input type=\"checkbox\" aria-label=\"Move short distance\"\n    class=\"mr-xs accent-blue\n           outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible\n           outline-offset(3):focus-visible\">\n  Move short distance\n  <span aria-hidden=\"true\"\n    class=\"block h(64) mt-md p-xs\n           outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(48) w(128)\n             b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n             fg-blue-80 (opacity:1) (transform:none)\n             (transition-property:transform)\n             (transition-timing-function:linear)\n             (transition-duration:0ms)@media(print)\n             transition-slow@media(screen)@motion-safe\">\n      Layer 01\n    </span>\n  </span>\n</label>",
+      "<!-- 96px / 600ms · 160px per second -->\n<label class=\"block w(280) max-w-full font-sm\n         (transform:translateX(96px)):has(input:checked)>span>span@media(screen)\">\n  <input type=\"checkbox\" aria-label=\"Move long distance\"\n    class=\"mr-xs accent-blue\n           outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible\n           outline-offset(3):focus-visible\">\n  Move long distance\n  <span aria-hidden=\"true\"\n    class=\"block h(64) mt-md p-xs\n           outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(48) w(128)\n             b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n             fg-blue-80 (opacity:1) (transform:none)\n             (transition-property:transform)\n             (transition-timing-function:linear)\n             (transition-duration:0ms)@media(print)\n             (transition-duration:600ms)@media(screen)@motion-safe\">\n      Layer 01\n    </span>\n  </span>\n</label>"
+    ],
+    "css": "",
+    "classes": [
+      "block",
+      "w(280)",
+      "max-w-full",
+      "font-sm",
+      "(transform:translateX(48px)):has(input:checked)>span>span@media(screen)",
+      "mr-xs",
+      "accent-blue",
+      "outline(2):focus-visible",
+      "outline-solid:focus-visible",
+      "outline-blue:focus-visible",
+      "outline-offset(3):focus-visible",
+      "h(64)",
+      "mt-md",
+      "p-xs",
+      "outline(1)",
+      "outline-dashed",
+      "outline-line-subtle",
+      "grid",
+      "(place-items:center)",
+      "h(48)",
+      "w(128)",
+      "b(1)",
+      "b-solid",
+      "b-blue-60",
+      "r-sm",
+      "bg-blue-10",
+      "fg-blue-80",
+      "(opacity:1)",
+      "(transform:none)",
+      "(transition-property:transform)",
+      "(transition-timing-function:linear)",
+      "(transition-duration:0ms)@media(print)",
+      "transition-slow@media(screen)@motion-safe",
+      "(transform:translateX(96px)):has(input:checked)>span>span@media(screen)",
+      "(transition-duration:600ms)@media(screen)@motion-safe"
+    ],
+    "classLists": [
+      "block w(280) max-w-full font-sm (transform:translateX(48px)):has(input:checked)>span>span@media(screen)",
+      "mr-xs accent-blue outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible outline-offset(3):focus-visible",
+      "block h(64) mt-md p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(48) w(128) b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10 fg-blue-80 (opacity:1) (transform:none) (transition-property:transform) (transition-timing-function:linear) (transition-duration:0ms)@media(print) transition-slow@media(screen)@motion-safe",
+      "block w(280) max-w-full font-sm (transform:translateX(96px)):has(input:checked)>span>span@media(screen)",
+      "mr-xs accent-blue outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible outline-offset(3):focus-visible",
+      "block h(64) mt-md p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(48) w(128) b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10 fg-blue-80 (opacity:1) (transform:none) (transition-property:transform) (transition-timing-function:linear) (transition-duration:0ms)@media(print) (transition-duration:600ms)@media(screen)@motion-safe"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/transition-property.json

@@ -0,0 +1,60 @@
+[
+  {
+    "page": "transition-property",
+    "id": "limit-what-can-animate",
+    "title": "Limit what can animate",
+    "html": [
+      "<!-- Opacity only · position changes immediately -->\n<label class=\"block w(280) max-w-full font-sm\n         (opacity:.72):has(input:checked)>span>span@media(screen)\n         (transform:translateX(96px)):has(input:checked)>span>span@media(screen)\">\n  <input type=\"checkbox\" aria-label=\"Move and fade\"\n    class=\"mr-xs accent-blue\n           outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible\n           outline-offset(3):focus-visible\">\n  Move and fade\n  <span aria-hidden=\"true\"\n    class=\"block h(64) mt-md p-xs\n           outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(48) w(128)\n             b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n             fg-blue-80 (opacity:1) (transform:none)\n             (transition-property:opacity)\n             (transition-timing-function:linear)\n             (transition-duration:0ms)@media(print)\n             transition-slowest@media(screen)@motion-safe\">\n      Layer 01\n    </span>\n  </span>\n</label>",
+      "<!-- Opacity + transform · both interpolate -->\n<label class=\"block w(280) max-w-full font-sm\n         (opacity:.72):has(input:checked)>span>span@media(screen)\n         (transform:translateX(96px)):has(input:checked)>span>span@media(screen)\">\n  <input type=\"checkbox\" aria-label=\"Move and fade\"\n    class=\"mr-xs accent-blue\n           outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible\n           outline-offset(3):focus-visible\">\n  Move and fade\n  <span aria-hidden=\"true\"\n    class=\"block h(64) mt-md p-xs\n           outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(48) w(128)\n             b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n             fg-blue-80 (opacity:1) (transform:none)\n             (transition-property:opacity,transform)\n             (transition-timing-function:linear)\n             (transition-duration:0ms)@media(print)\n             transition-slowest@media(screen)@motion-safe\">\n      Layer 01\n    </span>\n  </span>\n</label>"
+    ],
+    "css": "",
+    "classes": [
+      "block",
+      "w(280)",
+      "max-w-full",
+      "font-sm",
+      "(opacity:.72):has(input:checked)>span>span@media(screen)",
+      "(transform:translateX(96px)):has(input:checked)>span>span@media(screen)",
+      "mr-xs",
+      "accent-blue",
+      "outline(2):focus-visible",
+      "outline-solid:focus-visible",
+      "outline-blue:focus-visible",
+      "outline-offset(3):focus-visible",
+      "h(64)",
+      "mt-md",
+      "p-xs",
+      "outline(1)",
+      "outline-dashed",
+      "outline-line-subtle",
+      "grid",
+      "(place-items:center)",
+      "h(48)",
+      "w(128)",
+      "b(1)",
+      "b-solid",
+      "b-blue-60",
+      "r-sm",
+      "bg-blue-10",
+      "fg-blue-80",
+      "(opacity:1)",
+      "(transform:none)",
+      "(transition-property:opacity)",
+      "(transition-timing-function:linear)",
+      "(transition-duration:0ms)@media(print)",
+      "transition-slowest@media(screen)@motion-safe",
+      "(transition-property:opacity,transform)"
+    ],
+    "classLists": [
+      "block w(280) max-w-full font-sm (opacity:.72):has(input:checked)>span>span@media(screen) (transform:translateX(96px)):has(input:checked)>span>span@media(screen)",
+      "mr-xs accent-blue outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible outline-offset(3):focus-visible",
+      "block h(64) mt-md p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(48) w(128) b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10 fg-blue-80 (opacity:1) (transform:none) (transition-property:opacity) (transition-timing-function:linear) (transition-duration:0ms)@media(print) transition-slowest@media(screen)@motion-safe",
+      "block w(280) max-w-full font-sm (opacity:.72):has(input:checked)>span>span@media(screen) (transform:translateX(96px)):has(input:checked)>span>span@media(screen)",
+      "mr-xs accent-blue outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible outline-offset(3):focus-visible",
+      "block h(64) mt-md p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(48) w(128) b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10 fg-blue-80 (opacity:1) (transform:none) (transition-property:opacity,transform) (transition-timing-function:linear) (transition-duration:0ms)@media(print) transition-slowest@media(screen)@motion-safe"
+    ],
+    "highlighted": []
+  }
+]

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

@@ -0,0 +1,65 @@
+[
+  {
+    "page": "transition-timing-function",
+    "id": "choose-an-easing-curve",
+    "title": "Choose an easing curve",
+    "html": [
+      "<!-- Linear · constant progress -->\n<label class=\"block w(280) max-w-full font-sm\n         (transform:translateX(96px)):has(input:checked)>span>span@media(screen)\">\n  <input type=\"checkbox\" aria-label=\"Move layer\"\n    class=\"mr-xs accent-blue\n           outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible\n           outline-offset(3):focus-visible\">\n  Move layer\n  <span aria-hidden=\"true\"\n    class=\"block h(64) mt-md p-xs\n           outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(48) w(128)\n             b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n             fg-blue-80 (opacity:1) (transform:none)\n             (transition-property:transform)\n             (transition-timing-function:linear)\n             (transition:none)@media(print)\n             transition-slowest@media(screen)@motion-safe\">\n      Layer 01\n    </span>\n  </span>\n</label>",
+      "<!-- Ease in · slower at the beginning -->\n<label class=\"block w(280) max-w-full font-sm\n         (transform:translateX(96px)):has(input:checked)>span>span@media(screen)\">\n  <input type=\"checkbox\" aria-label=\"Move layer\"\n    class=\"mr-xs accent-blue\n           outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible\n           outline-offset(3):focus-visible\">\n  Move layer\n  <span aria-hidden=\"true\"\n    class=\"block h(64) mt-md p-xs\n           outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(48) w(128)\n             b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n             fg-blue-80 (opacity:1) (transform:none)\n             (transition-property:transform)\n             (transition-timing-function:ease-in)\n             (transition:none)@media(print)\n             transition-slowest@media(screen)@motion-safe\">\n      Layer 01\n    </span>\n  </span>\n</label>",
+      "<!-- Ease out · slower at the end -->\n<label class=\"block w(280) max-w-full font-sm\n         (transform:translateX(96px)):has(input:checked)>span>span@media(screen)\">\n  <input type=\"checkbox\" aria-label=\"Move layer\"\n    class=\"mr-xs accent-blue\n           outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible\n           outline-offset(3):focus-visible\">\n  Move layer\n  <span aria-hidden=\"true\"\n    class=\"block h(64) mt-md p-xs\n           outline(1) outline-dashed outline-line-subtle\">\n    <span id=\"target\"\n      class=\"grid (place-items:center) h(48) w(128)\n             b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n             fg-blue-80 (opacity:1) (transform:none)\n             (transition-property:transform)\n             (transition-timing-function:ease-out)\n             (transition:none)@media(print)\n             transition-slowest@media(screen)@motion-safe\">\n      Layer 01\n    </span>\n  </span>\n</label>"
+    ],
+    "css": "",
+    "classes": [
+      "block",
+      "w(280)",
+      "max-w-full",
+      "font-sm",
+      "(transform:translateX(96px)):has(input:checked)>span>span@media(screen)",
+      "mr-xs",
+      "accent-blue",
+      "outline(2):focus-visible",
+      "outline-solid:focus-visible",
+      "outline-blue:focus-visible",
+      "outline-offset(3):focus-visible",
+      "h(64)",
+      "mt-md",
+      "p-xs",
+      "outline(1)",
+      "outline-dashed",
+      "outline-line-subtle",
+      "grid",
+      "(place-items:center)",
+      "h(48)",
+      "w(128)",
+      "b(1)",
+      "b-solid",
+      "b-blue-60",
+      "r-sm",
+      "bg-blue-10",
+      "fg-blue-80",
+      "(opacity:1)",
+      "(transform:none)",
+      "(transition-property:transform)",
+      "(transition-timing-function:linear)",
+      "(transition:none)@media(print)",
+      "transition-slowest@media(screen)@motion-safe",
+      "(transition-timing-function:ease-in)",
+      "(transition-timing-function:ease-out)"
+    ],
+    "classLists": [
+      "block w(280) max-w-full font-sm (transform:translateX(96px)):has(input:checked)>span>span@media(screen)",
+      "mr-xs accent-blue outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible outline-offset(3):focus-visible",
+      "block h(64) mt-md p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(48) w(128) b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10 fg-blue-80 (opacity:1) (transform:none) (transition-property:transform) (transition-timing-function:linear) (transition:none)@media(print) transition-slowest@media(screen)@motion-safe",
+      "block w(280) max-w-full font-sm (transform:translateX(96px)):has(input:checked)>span>span@media(screen)",
+      "mr-xs accent-blue outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible outline-offset(3):focus-visible",
+      "block h(64) mt-md p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(48) w(128) b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10 fg-blue-80 (opacity:1) (transform:none) (transition-property:transform) (transition-timing-function:ease-in) (transition:none)@media(print) transition-slowest@media(screen)@motion-safe",
+      "block w(280) max-w-full font-sm (transform:translateX(96px)):has(input:checked)>span>span@media(screen)",
+      "mr-xs accent-blue outline(2):focus-visible outline-solid:focus-visible outline-blue:focus-visible outline-offset(3):focus-visible",
+      "block h(64) mt-md p-xs outline(1) outline-dashed outline-line-subtle",
+      "grid (place-items:center) h(48) w(128) b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10 fg-blue-80 (opacity:1) (transform:none) (transition-property:transform) (transition-timing-function:ease-out) (transition:none)@media(print) transition-slowest@media(screen)@motion-safe"
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/user-drag.json

@@ -0,0 +1,28 @@
+[
+  {
+    "page": "user-drag",
+    "id": "prevent-dragging-media",
+    "title": "Prevent dragging media",
+    "html": [
+      "<!-- CSS · native image drag disabled -->\n<img id=\"target\" src=\"/demo/landscape.svg\" alt=\"Sun above layered mountains\"\n  width=\"240\" height=\"144\" class=\"block h-auto w(240) max-w-full r-sm (user-drag:none)\">",
+      "<!-- Default image · native drag allowed -->\n<img id=\"target\" src=\"/demo/landscape.svg\" alt=\"Sun above layered mountains\"\n  width=\"240\" height=\"144\" class=\"block h-auto w(240) max-w-full r-sm (user-drag:auto)\">",
+      "<!-- HTML · explicit false -->\n<img id=\"target\" src=\"/demo/landscape.svg\" alt=\"Sun above layered mountains\"\n  width=\"240\" height=\"144\" class=\"block h-auto w(240) max-w-full r-sm \" draggable=\"false\">"
+    ],
+    "css": "",
+    "classes": [
+      "block",
+      "h-auto",
+      "w(240)",
+      "max-w-full",
+      "r-sm",
+      "(user-drag:none)",
+      "(user-drag:auto)"
+    ],
+    "classLists": [
+      "block h-auto w(240) max-w-full r-sm (user-drag:none)",
+      "block h-auto w(240) max-w-full r-sm (user-drag:auto)",
+      "block h-auto w(240) max-w-full r-sm "
+    ],
+    "highlighted": []
+  }
+]

package/src/demo/specimens/user-select.json

@@ -0,0 +1,25 @@
+[
+  {
+    "page": "user-select",
+    "id": "select-all-text-in-one-click",
+    "title": "Select a whole value",
+    "html": [
+      "<code id=\"target\"\n  class=\"block p-sm b(1) b-solid b-line-divider r-sm font-mono\n         select-all\">pnpm install @master/css</code>"
+    ],
+    "css": "",
+    "classes": [
+      "block",
+      "p-sm",
+      "b(1)",
+      "b-solid",
+      "b-line-divider",
+      "r-sm",
+      "font-mono",
+      "select-all"
+    ],
+    "classLists": [
+      "block p-sm b(1) b-solid b-line-divider r-sm font-mono select-all"
+    ],
+    "highlighted": []
+  }
+]

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

@@ -0,0 +1,28 @@
+[
+  {
+    "page": "vertical-align",
+    "id": "align-icons-with-text",
+    "title": "Align icons with text",
+    "html": [
+      "<!-- vertical-baseline -->\n<button type=\"button\" id=\"context\" class=\"font-md leading-lg\"><svg id=\"target\" class=\"inline-block w(32) h(32) vertical-baseline\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M4 5h16v14H4zM8 9h8M8 13h5\" /></svg> Layers</button>",
+      "<!-- vertical-middle -->\n<button type=\"button\" id=\"context\" class=\"font-md leading-lg\"><svg id=\"target\" class=\"inline-block w(32) h(32) vertical-middle\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M4 5h16v14H4zM8 9h8M8 13h5\" /></svg> Layers</button>"
+    ],
+    "css": "",
+    "classes": [
+      "font-md",
+      "leading-lg",
+      "inline-block",
+      "w(32)",
+      "h(32)",
+      "vertical-baseline",
+      "vertical-middle"
+    ],
+    "classLists": [
+      "font-md leading-lg",
+      "inline-block w(32) h(32) vertical-baseline",
+      "font-md leading-lg",
+      "inline-block w(32) h(32) vertical-middle"
+    ],
+    "highlighted": []
+  }
+]