@master/internal-site 0.2.4 → 0.2.6

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

@@ -4,7 +4,7 @@
     "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>"
+      "<!-- 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": [
@@ -17,7 +17,7 @@
       "overflow-auto",
       "h(160)",
       "bg-surface-base",
-      "(mask-image:linear-gradient(to|bottom,black|60%,transparent))",
+      "(mask-image:linear-gradient(to_bottom,black_60%,transparent))",
       "(mask-mode:alpha)",
       "(outline:none):focus-visible",
       "m(0)",
@@ -36,7 +36,7 @@
     "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",
+      "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",

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

@@ -4,8 +4,8 @@
     "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)\" />"
+      "<!-- 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": [
@@ -15,12 +15,12 @@
       "max-w-full",
       "bg-surface-base",
       "object-cover",
-      "(object-position:50%|25%)",
-      "(object-position:left|12px|top|8px)"
+      "(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)"
+      "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/place-content.json

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

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

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

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

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

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

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

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

@@ -5,7 +5,7 @@
     "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>"
+      "<!-- 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": [
@@ -37,7 +37,7 @@
       "(border-radius:100%)",
       "bg-violet-60",
       "pointer-none",
-      "(transform-origin:top|left)",
+      "(transform-origin:top_left)",
       "left(-3)",
       "top(-3)"
     ],
@@ -48,7 +48,7 @@
       "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)",
+      "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/docs-shell/components/Image.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <script lang="ts">
-  /** Render a bitmap with intrinsic dimensions and, on Cloudflare, resized sources. */
+  /** Render a bitmap with intrinsic dimensions and resized sources: built AVIF candidates for imports, Cloudflare for URLs. */
   let { src, width, height, fill, priority, quality, placeholder: _placeholder, loading, sizes, style, alt = '', fetchpriority, ...props }: ImageProps = $props()
 
   const source = $derived(typeof src === 'string' ? src : src.src)
@@ -38,15 +38,18 @@
   const intrinsicHeight = $derived(fill ? undefined : Number(height ?? (typeof src === 'object' ? src.height : undefined)) || undefined)
   const url = (size: number) => createCloudflareImageUrl({ src: source, width: size, quality, siteUrl: import.meta.env.PUBLIC_URL })
   const widths = $derived(candidateWidths(intrinsicWidth, sizes))
-  const resized = $derived(transformations && url(widths[0]) !== source)
+  const built = $derived(typeof src === 'object' ? src.srcset : undefined)
+  const resized = $derived(!built && transformations && url(widths[0]) !== source)
+  // Built candidates use width descriptors; a fixed display width tells the browser which one fits.
+  const builtSizes = $derived(sizes ?? (fill ? '100vw' : width ? `${Number(width)}px` : undefined))
 </script>
 
 <img
   {...props}
   {alt}
   src={resized ? url(widths.at(-1)!) : source}
-  srcset={resized ? widths.map((size, index) => sizes || !intrinsicWidth ? `${url(size)} ${size}w` : `${url(size)} ${index + 1}x`).join(', ') : undefined}
-  sizes={resized ? sizes ?? (fill ? '100vw' : undefined) : undefined}
+  srcset={built ?? (resized ? widths.map((size, index) => sizes || !intrinsicWidth ? `${url(size)} ${size}w` : `${url(size)} ${index + 1}x`).join(', ') : undefined)}
+  sizes={built ? builtSizes : resized ? sizes ?? (fill ? '100vw' : undefined) : undefined}
   width={intrinsicWidth}
   height={intrinsicHeight}
   loading={priority ? 'eager' : loading ?? 'lazy'}

package/src/docs-shell/components/SearchButton.svelte

@@ -5,7 +5,7 @@
   import type { Snippet } from 'svelte'
   import type { HTMLButtonAttributes } from 'svelte/elements'
   import IconSearch from '@tabler/icons-svelte-runes/icons/search'
-  import { openSearch, searchLabels } from '../contexts/search'
+  import { openSearch, prefetchSearch, searchLabels } from '../contexts/search'
   import { getSite } from '../site'
 
   interface Props extends HTMLButtonAttributes {
@@ -13,7 +13,7 @@
   }
 
   /** Opens the page's search dialog. Without children it renders the search field trigger (`ui-search-trigger`) with its shortcut. */
-  let { class: className, children, onclick, type = 'button', ...props }: Props = $props()
+  let { class: className, children, onclick, onfocus, onpointerenter, type = 'button', ...props }: Props = $props()
   const { t, locale } = getSite()
   const { searchText, searchLabel } = searchLabels(t, locale)
 
@@ -23,7 +23,9 @@
   }
 </script>
 
-<button {...props} {type} class={className} aria-label={props['aria-label'] ?? searchLabel} aria-keyshortcuts="Meta+K Control+K" onclick={handleClick}>
+<button {...props} {type} class={className} aria-label={props['aria-label'] ?? searchLabel} aria-keyshortcuts="Meta+K Control+K" onclick={handleClick}
+  onpointerenter={event => { onpointerenter?.(event); prefetchSearch() }}
+  onfocus={event => { onfocus?.(event); prefetchSearch() }}>
   {#if children}
     {@render children()}
   {:else}

package/src/docs-shell/components/SearchDialog.svelte

@@ -1,176 +1,62 @@
-<script lang="ts" module>
-  import type { Attachment } from 'svelte/attachments'
-  import type { DocumentationSearchPage } from '../utils/documentation-search'
-
-  const cache: Record<string, Promise<DocumentationSearchPage[]>> = {}
-
-  async function loadPages(locale: string) {
-    cache[locale] ??= fetch(`/search/${encodeURIComponent(locale)}.json`).then(response => {
-      if (!response.ok) throw new Error(`Search unavailable (${response.status})`)
-      return response.json()
-    }).catch(error => { delete cache[locale]; throw error })
-    return cache[locale]
-  }
-
-  /** The dialog lives at the end of the body, outside the island that opens it. */
-  const portal: Attachment<HTMLElement> = (node) => {
-    document.body.append(node)
-    return () => node.remove()
-  }
-</script>
-
 <script lang="ts">
-  import '@master/internal-site/styles/interface.css'
-  import '@master/internal-site/styles/system/dialog.css'
-
-  import '../../styles/docs-shell/documentation-search.css'
-  import { untrack } from 'svelte'
-  import Link from './Link.svelte'
-  import { getSite } from '../site'
-  import { createDocumentationSearch } from '../utils/documentation-search'
-  import { openSearchEvent } from '../contexts/search'
-  import IconArrowDown from '@tabler/icons-svelte-runes/icons/arrow-down'
-  import IconArrowUp from '@tabler/icons-svelte-runes/icons/arrow-up'
-  import IconCornerDownLeft from '@tabler/icons-svelte-runes/icons/corner-down-left'
-  import IconSearch from '@tabler/icons-svelte-runes/icons/search'
-  import IconX from '@tabler/icons-svelte-runes/icons/x'
-  import { isInteractOutside } from '../utils/isInteractOutside'
-
-  /** The page's single search dialog; search triggers in other islands open it by event (`contexts/search`). */
-  const { t, locale } = getSite()
-  let opened = $state(false)
-  let query = $state('')
-  let shortcutModifier = $state('⌘')
-  let pages = $state.raw<DocumentationSearchPage[]>([])
-  let error = $state('')
-  let loading = $state(false)
-  let retry = $state(0)
-  let selected = $state(0)
-  let dialog = $state<HTMLDialogElement>()
-  let input = $state<HTMLInputElement>()
-  let scroll = $state<HTMLDivElement>()
-  let scrollTop = 0
-  let returnFocus: HTMLElement | null = null
-  const search = $derived(createDocumentationSearch(pages))
-  const results = $derived(search(query))
-
-  function selectQuery(value: string) {
-    query = value
-    selected = 0
-    scrollTop = 0
-    if (scroll) scroll.scrollTop = 0
-    input?.focus()
-  }
-
-  function close() {
-    scrollTop = scroll?.scrollTop ?? 0
-    dialog?.close()
-    opened = false
-    returnFocus?.focus()
-  }
-
-  function open(event?: Event) {
-    shortcutModifier = /Mac|iPhone|iPad|iPod/.test(navigator.platform) ? '⌘' : 'Ctrl'
-    const trigger = (event as CustomEvent<{ trigger?: HTMLElement }> | undefined)?.detail?.trigger
-    returnFocus = trigger instanceof HTMLElement ? trigger : document.activeElement as HTMLElement
-    opened = true
-  }
-
-  $effect(() => {
-    if (!opened) return
-    void retry
-    let active = true
-    loading = true
-    error = ''
-    loadPages(locale).then(data => {
-      if (active) { pages = data; loading = false }
-    }, reason => {
-      if (active) { error = reason.message; loading = false }
+  import type { Component } from 'svelte'
+  import { openSearchEvent, prefetchSearchEvent } from '../contexts/search'
+  // A client-only chunk delivers no CSS of its own: link the panel's compiled styles explicitly.
+  import searchStyles from '../../styles/docs-shell/documentation-search.css?url&no-inline'
+
+  type Panel = Component<{ initialTrigger?: HTMLElement | null }>
+
+  /** The page's single search dialog. Its panel and styles load on the first request or on intent
+   * (`prefetchSearch`), so a page does not deliver dialog CSS that its first render never uses. */
+  let Panel = $state<Panel>()
+  let initialTrigger = $state<HTMLElement | null>(null)
+  let loading: Promise<Panel | undefined> | undefined
+
+  function linkStylesheet(href: string) {
+    return new Promise<void>((resolve, reject) => {
+      if (document.querySelector(`link[rel="stylesheet"][href="${href}"]`)) return resolve()
+      const link = Object.assign(document.createElement('link'), { rel: 'stylesheet', href })
+      link.onload = () => resolve()
+      link.onerror = () => { link.remove(); reject(new Error(`Cannot load ${href}`)) }
+      document.head.append(link)
     })
-    return () => { active = false }
-  })
+  }
 
-  $effect(() => {
-    if (opened && dialog) {
-      untrack(() => {
-        if (!dialog!.open) dialog!.showModal()
-        input?.focus()
-        if (scroll) scroll.scrollTop = scrollTop
+  // The panel mounts only after its styles apply, so its first frame is styled.
+  function load() {
+    return loading ??= Promise.all([import('./SearchDialogPanel.svelte'), linkStylesheet(searchStyles)])
+      .then(([module]) => module.default)
+      .catch(error => {
+        loading = undefined
+        console.error('Search dialog could not load', error)
       })
-    }
-  })
-
-  const closeOnBackdropClick: Attachment<HTMLDialogElement> = (element) => {
-    const onclick = (event: MouseEvent) => {
-      if (event.target === element && isInteractOutside(element, event)) close()
-    }
-    element.addEventListener('click', onclick)
-    return () => element.removeEventListener('click', onclick)
   }
 
-  $effect(() => {
-    window.addEventListener(openSearchEvent, open)
-    return () => window.removeEventListener(openSearchEvent, open)
-  })
+  async function request(event: Event) {
+    const trigger = (event as CustomEvent<{ trigger?: HTMLElement }>).detail?.trigger
+    initialTrigger = trigger instanceof HTMLElement ? trigger : document.activeElement as HTMLElement | null
+    Panel = await load()
+  }
 
+  // Until the panel mounts, it owns no listeners: forward the first opening to it.
   function shortcut(event: KeyboardEvent) {
-    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') { event.preventDefault(); opened ? close() : open() }
+    if (Panel || !(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== 'k') return
+    event.preventDefault()
+    void request(event)
   }
 
-  function onkeydown(event: KeyboardEvent) {
-    if (event.isComposing || event.keyCode === 229) return
-    if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); close(); return }
-    if (event.key === 'Enter' && results.length) { event.preventDefault(); document.getElementById(`documentation-result-${selected}`)?.click() }
-    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-      event.preventDefault()
-      const next = Math.max(0, Math.min(results.length - 1, selected + (event.key === 'ArrowDown' ? 1 : -1)))
-      selected = next
-      document.getElementById(`documentation-result-${next}`)?.scrollIntoView({ block: 'nearest' })
+  $effect(() => {
+    if (Panel) return
+    const prefetch = () => void load()
+    window.addEventListener(openSearchEvent, request)
+    window.addEventListener(prefetchSearchEvent, prefetch)
+    return () => {
+      window.removeEventListener(openSearchEvent, request)
+      window.removeEventListener(prefetchSearchEvent, prefetch)
     }
-  }
-
-  const kinds: Record<string, string> = { utility: 'Utility', rule: 'Rule', tokens: 'Tokens', directive: 'Directive', tool: 'Tool', package: 'API' }
-
+  })
 </script>
 
 <svelte:window onkeydown={shortcut} />
 
-{#snippet excerpt(text: string, query: string)}
-  {@const index = text.toLowerCase().indexOf(query.toLowerCase())}
-  {@const start = Math.max(0, index - 45)}
-  {@const value = text.slice(start, start + 220)}
-  {@const offset = value.toLowerCase().indexOf(query.toLowerCase())}
-  {start > 0 ? '…' : ''}{#if offset < 0}{value}{:else}{value.slice(0, offset)}<mark>{value.slice(offset, offset + query.length)}</mark>{value.slice(offset + query.length)}{/if}{start + 220 < text.length ? '…' : ''}
-{/snippet}
-
-{#if opened}
-  <dialog bind:this={dialog} {@attach portal} {@attach closeOnBackdropClick} class="ui-dialog" data-variant="search" aria-label={t('Search documentation')} oncancel={close}>
-    <div class="ui-dialog-search">
-      <IconSearch size={18} stroke={1.5} aria-hidden="true" />
-      <input bind:this={input} type="search" role="combobox" aria-autocomplete="list" aria-expanded={Boolean(query)} value={query} autocomplete="off" spellcheck={false} placeholder={t('Search documentation…')} aria-label={t('Search documentation')} aria-controls="documentation-search-results" aria-activedescendant={results[selected] ? `documentation-result-${selected}` : undefined}
-        oninput={event => selectQuery(event.currentTarget.value)}
-        {onkeydown} />
-      {#if query}<button type="button" class="ui-button" data-variant="quiet" data-shape="icon" data-size="sm" onclick={() => selectQuery('')} aria-label={t('Clear search')}><IconX size={16} stroke={1.5} aria-hidden="true" /></button>{/if}
-      <button type="button" class="ui-button ui-dialog-close" data-variant="quiet" data-size="sm" onclick={close} aria-label={t('Close search')}><span class="ui-kbd">esc</span><span>{t('Cancel')}</span></button>
-    </div>
-    <div class="ui-dialog-body" bind:this={scroll}>
-      <p class="ui-dialog-status" role="status">{loading ? (t('Loading documentation…')) : error ? (t('Search could not load.')) : query ? t(results.length === 40 ? 'Top {count} results' : '{count} results').replace('{count}', String(results.length)) : (t('Find a name, alias or CSS property'))}</p>
-      {#if error}<div class="ui-dialog-note"><p>{t('Check your connection and try again.')}</p><button type="button" class="ui-button" data-size="sm" onclick={() => { retry += 1; input?.focus() }}>{t('Try again')}</button></div>{/if}
-      {#if !query && !error && !loading}<div class="ui-dialog-note">
-        <p>{t('Try searching')}</p>
-        {#each ['padding', 'padding-inline-start:', 'fg-red:hover@sm'] as value (value)}<button type="button" class="ui-button" data-size="sm" onclick={() => selectQuery(value)}><code>{value}</code><IconCornerDownLeft size={14} stroke={1.5} aria-hidden="true" /></button>{/each}
-      </div>{/if}
-      {#if query && !results.length && !error && !loading}<div class="ui-dialog-note" data-align="center"><IconSearch size={24} stroke={1.25} aria-hidden="true" /><b>{t('No matching documents')}</b><p>{t('Try a property name, a token name or a different keyword.')}</p></div>{/if}
-      <ol id="documentation-search-results" class="ui-results" role="listbox" aria-label={t('Search results')} aria-busy={loading}>
-        {#if !error}{#each results as result, index (result.page.url)}<li role="presentation">
-          <Link id={`documentation-result-${index}`} role="option" tabindex={-1} aria-selected={selected === index} href={result.href} onclick={close} onpointermove={() => { selected = index }}>
-            <small>{t(result.page.category ?? '')} · {t(kinds[result.page.kind ?? ''] ?? (result.page.url.includes('/guide') ? 'Guide' : 'Page'))} · {t(result.reason)}</small>
-            <b>{result.page.title}</b>
-            <span>{@render excerpt(result.excerpt, query)}</span>
-          </Link>
-        </li>{/each}{/if}
-      </ol>
-    </div>
-    <div class="ui-dialog-foot" aria-hidden="true"><span><span class="ui-kbd"><IconArrowUp size={12} /></span><span class="ui-kbd"><IconArrowDown size={12} /></span>{t('Navigate')}</span><span><span class="ui-kbd"><IconCornerDownLeft size={12} /></span>{t('Open')}</span><span class="ui-search-shortcut">{t('Search anytime')}<kbd class="ui-kbd">{shortcutModifier}</kbd><kbd class="ui-kbd">K</kbd></span></div>
-  </dialog>
-{/if}
+{#if Panel}<Panel {initialTrigger} />{/if}