@motion-proto/live-tokens 0.84.0 → 0.86.0

package/src/testing-js/{chunk-WQJ6QB6Y.js → chunk-OHU5BHGZ.js}

@@ -783,6 +783,7 @@ var dialogContract = {
   properties: [
     {
       paints: {
+        backdrop: { backgroundColor: "--dialog-scrim-surface" },
         root: {
           backgroundColor: "--dialog-surface",
           borderTopColor: "--dialog-border",
@@ -831,9 +832,7 @@ var dialogContract = {
     { state: "footer" }
   ],
   uncovered: {
-    "--dialog-blur": "consumed via backdrop-filter: blur(), which no probe covers",
-    "--dialog-scrim-color": "composed into the fill through color-mix(), so no computed style reports the token verbatim",
-    "--dialog-scrim-opacity": "composed into the fill through color-mix(), so no computed style reports the token verbatim"
+    "--dialog-blur": "consumed via backdrop-filter: blur(), which no probe covers"
   },
   persistence: {
     cases: [
@@ -1118,6 +1117,7 @@ var imageLightboxContract = {
           borderRadius: "--imagelightbox-tile-radius",
           boxShadow: "--imagelightbox-tile-shadow"
         },
+        overlay: { backgroundColor: "--imagelightbox-scrim-surface" },
         closeButton: {
           backgroundColor: "--imagelightbox-chrome-surface",
           borderTopColor: "--imagelightbox-chrome-border",
@@ -1137,10 +1137,6 @@ var imageLightboxContract = {
     }
   ],
   states: [{ state: "tile" }, { state: "overlay" }, { state: "chrome" }],
-  uncovered: {
-    "--imagelightbox-scrim-color": "composed into the fill through color-mix(), so no computed style reports the token verbatim",
-    "--imagelightbox-scrim-opacity": "composed into the fill through color-mix(), so no computed style reports the token verbatim"
-  },
   persistence: {
     cases: [
       {
@@ -3314,6 +3310,345 @@ var tooltipContract = {
   }
 };
 
+// src/testing/contracts/videolightbox.ts
+var videoLightboxContract = {
+  id: "videolightbox",
+  origin: "system",
+  root: "root",
+  // The editor renders an `inline` copy of the open lightbox beside the tile,
+  // so the overlay and close button are measurable without opening a modal.
+  parts: {
+    root: ".videolightbox",
+    trigger: ".videolightbox-trigger",
+    overlay: ".videolightbox-modal.inline",
+    closeButton: ".videolightbox-modal.inline .videolightbox-close",
+    closeIcon: ".videolightbox-modal.inline .videolightbox-close svg"
+  },
+  properties: [
+    {
+      paints: {
+        root: {
+          backgroundColor: "--videolightbox-tile-surface",
+          borderTopColor: "--videolightbox-tile-border",
+          borderTopWidth: "--videolightbox-tile-border-width",
+          borderRadius: "--videolightbox-tile-radius",
+          boxShadow: "--videolightbox-tile-shadow"
+        },
+        overlay: {
+          backgroundColor: "--videolightbox-scrim-surface",
+          paddingTop: "--videolightbox-overlay-padding"
+        },
+        closeButton: {
+          backgroundColor: "--videolightbox-chrome-surface",
+          borderTopColor: "--videolightbox-chrome-border",
+          borderTopWidth: "--videolightbox-chrome-border-width",
+          borderRadius: "--videolightbox-chrome-radius",
+          color: "--videolightbox-chrome-icon"
+        },
+        closeIcon: { stroke: "--videolightbox-chrome-icon" }
+      }
+    },
+    // The inline close button has no handler, so the click leaves the pointer
+    // resting on it and its real :hover rule applies.
+    {
+      setup: [{ kind: "click", part: "closeButton" }],
+      paints: { closeButton: { backgroundColor: "--videolightbox-chrome-hover-surface" } }
+    }
+  ],
+  states: [{ state: "default" }, { state: "hover" }],
+  uncovered: {
+    "--videolightbox-overlay-duration": "consumed inside the opacity transition shorthand, never a standalone computed value",
+    "--videolightbox-overlay-easing": "consumed inside the opacity transition shorthand, never a standalone computed value"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--videolightbox-tile-border-width",
+        observe: { part: "root", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--videolightbox-tile-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: [
+      "--videolightbox-tile-border-width",
+      "--videolightbox-tile-radius",
+      "--videolightbox-chrome-border-width",
+      "--videolightbox-chrome-radius"
+    ],
+    unchanged: ["--videolightbox-tile-shadow"],
+    aliasedTo: {
+      "--videolightbox-tile-border-width": "--border-width-2",
+      "--videolightbox-tile-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--videolightbox-tile-border-width" }
+  },
+  interaction: {
+    part: "trigger",
+    role: "button",
+    cases: [
+      {
+        name: "clicking the still opens the lightbox",
+        action: { kind: "click", part: "trigger" },
+        expect: { kind: "attribute", part: "trigger", name: "aria-expanded", value: "true" }
+      }
+    ]
+  },
+  behavior: {
+    applicable: false,
+    reason: "the lightbox declares no callback prop; opening portals a modal and plays media, which happy-dom cannot run"
+  },
+  sketch: {
+    style: "pencil",
+    parts: [
+      { part: "root", fill: "--videolightbox-tile-surface", stroke: "--videolightbox-tile-border" }
+    ]
+  }
+};
+
+// src/testing/contracts/videoframe.ts
+var videoFrameContract = {
+  id: "videoframe",
+  origin: "system",
+  root: "root",
+  parts: {
+    root: ".videoframe-frame",
+    clip: ".videoframe-clip",
+    trigger: ".videoframe-trigger",
+    badge: ".videoframe-badge",
+    badgeIcon: ".videoframe-badge svg"
+  },
+  properties: [
+    {
+      paints: {
+        root: {
+          backgroundColor: "--videoframe-frame-surface",
+          borderTopColor: "--videoframe-frame-border",
+          borderTopWidth: "--videoframe-frame-border-width",
+          borderRadius: "--videoframe-frame-radius"
+        },
+        clip: { backgroundColor: "--videoframe-clip-surface" },
+        badge: {
+          backgroundColor: "--videoframe-badge-default-surface",
+          borderTopColor: "--videoframe-badge-default-border",
+          borderTopWidth: "--videoframe-badge-default-border-width",
+          width: "--videoframe-badge-default-size",
+          color: "--videoframe-badge-default-icon"
+        },
+        badgeIcon: { width: "--videoframe-badge-default-icon-size" }
+      }
+    },
+    {
+      state: "hover",
+      paints: {
+        badge: {
+          backgroundColor: "--videoframe-badge-hover-surface",
+          borderTopColor: "--videoframe-badge-hover-border",
+          color: "--videoframe-badge-hover-icon"
+        }
+      }
+    }
+  ],
+  states: [{ state: "default" }, { state: "hover" }],
+  uncovered: {
+    "--videoframe-badge-duration": "consumed inside the badge transition shorthand, never a standalone computed value",
+    "--videoframe-badge-easing": "consumed inside the badge transition shorthand, never a standalone computed value"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--videoframe-frame-border-width",
+        observe: { part: "root", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--videoframe-frame-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--videoframe-frame-border-width", "--videoframe-frame-radius"],
+    unchanged: ["--videoframe-badge-default-size"],
+    aliasedTo: {
+      "--videoframe-frame-border-width": "--border-width-3",
+      "--videoframe-frame-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--videoframe-frame-border-width" }
+  },
+  interaction: {
+    part: "trigger",
+    role: "button",
+    cases: [
+      {
+        name: "clicking the poster starts the clip",
+        action: { kind: "click", part: "trigger" },
+        expect: { kind: "attribute", part: "root", name: "data-playing", value: "true" }
+      }
+    ]
+  },
+  behavior: {
+    applicable: false,
+    reason: "the frame declares no callback prop; playback is the browser's own media element"
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "root", fill: "--videoframe-frame-surface", stroke: "--videoframe-frame-border" }]
+  }
+};
+
+// src/testing/contracts/slidepager.ts
+var behaviorSlides = [
+  { src: "a.webp", alt: "First slide" },
+  { src: "b.webp", alt: "Second slide" },
+  { src: "c.webp", alt: "Third slide" }
+];
+var slidePagerContract = {
+  id: "slidepager",
+  origin: "system",
+  root: "root",
+  // The editor renders an `inline` copy of the full-screen read beside the
+  // pager, so the overlay and its close button are measurable in place.
+  parts: {
+    root: ".slidepager",
+    frame: ".slidepager .slidepager-frame",
+    stage: ".slidepager .slidepager-stage",
+    bar: ".slidepager > .slidepager-bar",
+    prevControl: '.slidepager > .slidepager-bar [data-nav="prev"]',
+    nextControl: '.slidepager > .slidepager-bar [data-nav="next"]',
+    controlIcon: '.slidepager > .slidepager-bar [data-nav="next"] svg',
+    counter: ".slidepager > .slidepager-bar .slidepager-counter",
+    overlay: ".slidepager-modal.inline",
+    closeButton: ".slidepager-modal.inline .slidepager-close"
+  },
+  properties: [
+    {
+      paints: {
+        frame: {
+          backgroundColor: "--slidepager-frame-surface",
+          borderTopColor: "--slidepager-frame-border",
+          borderTopWidth: "--slidepager-frame-border-width",
+          borderRadius: "--slidepager-frame-radius",
+          boxShadow: "--slidepager-frame-shadow"
+        },
+        bar: { columnGap: "--slidepager-bar-gap", paddingTop: "--slidepager-bar-padding" },
+        nextControl: {
+          backgroundColor: "--slidepager-control-surface",
+          borderTopColor: "--slidepager-control-border",
+          borderTopWidth: "--slidepager-control-border-width",
+          borderRadius: "--slidepager-control-radius",
+          width: "--slidepager-control-size",
+          color: "--slidepager-control-icon"
+        },
+        controlIcon: { width: "--slidepager-control-icon-size" },
+        counter: {
+          color: "--slidepager-counter-text",
+          fontFamily: "--slidepager-counter-font-family",
+          fontSize: "--slidepager-counter-font-size",
+          fontWeight: "--slidepager-counter-font-weight",
+          lineHeight: "--slidepager-counter-line-height",
+          letterSpacing: "--slidepager-counter-letter-spacing"
+        },
+        overlay: {
+          backgroundColor: "--slidepager-scrim-surface",
+          paddingTop: "--slidepager-overlay-padding"
+        },
+        closeButton: { top: "--slidepager-close-margin" }
+      }
+    },
+    // The inline close button has no handler, so the click leaves the pointer
+    // resting on it and its real :hover rule applies.
+    {
+      setup: [{ kind: "click", part: "closeButton" }],
+      paints: {
+        closeButton: {
+          backgroundColor: "--slidepager-control-hover-surface",
+          borderTopColor: "--slidepager-control-hover-border",
+          color: "--slidepager-control-hover-icon"
+        }
+      }
+    },
+    // The preview opens on the middle slide, so one click back lands on the
+    // first and disables the control under the pointer.
+    {
+      setup: [{ kind: "click", part: "prevControl" }],
+      paints: {
+        prevControl: {
+          backgroundColor: "--slidepager-control-disabled-surface",
+          borderTopColor: "--slidepager-control-disabled-border",
+          color: "--slidepager-control-disabled-icon"
+        }
+      }
+    }
+  ],
+  states: [{ state: "default" }, { state: "hover" }, { state: "disabled" }],
+  uncovered: {
+    "--slidepager-overlay-duration": "consumed inside the opacity transition shorthand, never a standalone computed value",
+    "--slidepager-overlay-easing": "consumed inside the opacity transition shorthand, never a standalone computed value"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--slidepager-frame-border-width",
+        observe: { part: "frame", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--slidepager-frame-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: [
+      "--slidepager-frame-border-width",
+      "--slidepager-frame-radius",
+      "--slidepager-control-border-width",
+      "--slidepager-control-radius"
+    ],
+    unchanged: ["--slidepager-control-size"],
+    aliasedTo: {
+      "--slidepager-frame-border-width": "--border-width-3",
+      "--slidepager-frame-radius": "--radius-none"
+    },
+    observe: { part: "frame", css: "borderTopWidth", variable: "--slidepager-frame-border-width" }
+  },
+  interaction: {
+    part: "stage",
+    role: "button",
+    cases: [
+      {
+        name: "the next chevron moves the frame to the next slide",
+        action: { kind: "click", part: "nextControl" },
+        expect: { kind: "attribute", part: "stage", name: "aria-label", value: "Open slide 3 full screen" }
+      }
+    ]
+  },
+  behavior: {
+    cases: [
+      {
+        name: "the next chevron reports the slide it moved to",
+        props: { slides: behaviorSlides, index: 0 },
+        action: { kind: "click", part: "nextControl" },
+        expect: { kind: "callback", prop: "onchange", args: [1] }
+      },
+      {
+        name: "the previous chevron is silent on the first slide",
+        props: { slides: behaviorSlides, index: 0 },
+        action: { kind: "click", part: "prevControl" },
+        expect: { kind: "no-callback", prop: "onchange" }
+      },
+      {
+        name: "the counter names the slide index opens on",
+        props: { slides: behaviorSlides, index: 2 },
+        expect: { kind: "text", part: "counter", value: "3 / 3" }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "frame", fill: "--slidepager-frame-surface", stroke: "--slidepager-frame-border" }]
+  }
+};
+
 // src/testing/contracts/index.ts
 var shippedContracts = [
   badgeContract,
@@ -3341,7 +3676,10 @@ var shippedContracts = [
   tabBarContract,
   tableContract,
   toggleContract,
-  tooltipContract
+  tooltipContract,
+  videoLightboxContract,
+  videoFrameContract,
+  slidePagerContract
 ];
 var CONTRACTS_MODULE_ENV = "LIVE_TOKENS_CONTRACTS_MODULE";
 async function loadCustomContracts() {
@@ -3372,4 +3710,4 @@ export {
   allContracts,
   selectedContracts
 };
-//# sourceMappingURL=chunk-WQJ6QB6Y.js.map
+//# sourceMappingURL=chunk-OHU5BHGZ.js.map