@vectoriox/iox-ui 5.43.0 → 5.45.0

package/fesm2022/vectoriox-iox-ui-design-core.mjs

@@ -1425,6 +1425,208 @@ const SPEC_AXES = {
                 "inverse-line": 0.03
             }
         }
+    },
+    "scrolls": {
+        "normal": {
+            "label": "Normal",
+            "he": "רגילה",
+            "hint": "The browser's own scrolling.",
+            "lenis": null
+        },
+        "smooth": {
+            "label": "Smooth",
+            "he": "חלקה",
+            "hint": "A short glide after each wheel turn — what every IOX site does today.",
+            "lenis": {
+                "duration": 1.2,
+                "easing": "expo-out",
+                "wheelMultiplier": 1,
+                "syncTouch": false
+            }
+        },
+        "extra": {
+            "label": "Extra smooth",
+            "he": "חלקה מאוד",
+            "hint": "A longer, softer glide; each wheel turn moves a little less.",
+            "lenis": {
+                "duration": 1.8,
+                "easing": "expo-out",
+                "wheelMultiplier": 0.9,
+                "syncTouch": false
+            }
+        }
+    },
+    "animations": {
+        "still": {
+            "label": "Still",
+            "he": "ללא",
+            "hint": "Nothing moves in as you scroll. Buttons and cards still respond to the pointer (Speed).",
+            "parts": {}
+        },
+        "subtle": {
+            "label": "Subtle",
+            "he": "עדינה",
+            "hint": "Each section's content fades in once, together.",
+            "parts": {
+                "content": {
+                    "type": "fadeIn",
+                    "duration": 500
+                }
+            }
+        },
+        "standard": {
+            "label": "Standard",
+            "he": "רגילה",
+            "hint": "Headings rise in; cards, prices and steps follow one after another.",
+            "parts": {
+                "heading": {
+                    "type": "moveUp",
+                    "distance": 16,
+                    "duration": 500
+                },
+                "items": {
+                    "type": "moveUp",
+                    "distance": 16,
+                    "duration": 450,
+                    "stagger": 80,
+                    "cap": 6
+                },
+                "media": {
+                    "type": "fadeIn",
+                    "duration": 600
+                }
+            }
+        },
+        "lively": {
+            "label": "Lively",
+            "he": "תוססת",
+            "hint": "Bigger, longer entrances; side-by-side rows slide in from their side; the hero's words fade in.",
+            "parts": {
+                "heroText": {
+                    "type": "fadeIn",
+                    "duration": 400
+                },
+                "heading": {
+                    "type": "moveUp",
+                    "distance": 24,
+                    "duration": 600
+                },
+                "items": {
+                    "type": "moveUp",
+                    "distance": 24,
+                    "duration": 600,
+                    "stagger": 100,
+                    "cap": 8
+                },
+                "media": {
+                    "type": "fadeIn",
+                    "duration": 700
+                },
+                "rowMedia": {
+                    "type": "moveLeft",
+                    "mirror": "moveRight",
+                    "distance": 24,
+                    "duration": 600
+                }
+            }
+        }
+    },
+    "animationFamilies": {
+        "nav": [],
+        "footer": [],
+        "hero": [
+            "heroText"
+        ],
+        "header": [
+            "heading"
+        ],
+        "detail": [
+            "heading",
+            "media"
+        ],
+        "proof": [
+            "content",
+            "heading",
+            "items"
+        ],
+        "feature": [
+            "content",
+            "heading",
+            "items",
+            "media",
+            "rowMedia"
+        ],
+        "collection": [
+            "content",
+            "heading",
+            "items"
+        ],
+        "story": [
+            "content",
+            "heading",
+            "media"
+        ],
+        "cta": [
+            "content",
+            "heading"
+        ],
+        "contact": [
+            "content",
+            "heading"
+        ],
+        "faq": [
+            "content",
+            "heading"
+        ],
+        "pricing": [
+            "content",
+            "heading",
+            "items"
+        ]
+    },
+    "betweens": {
+        "none": {
+            "label": "None",
+            "he": "ללא",
+            "hint": "The next page simply appears.",
+            "transition": "none"
+        },
+        "fade": {
+            "label": "Fade",
+            "he": "דהייה",
+            "hint": "The page fades into the next.",
+            "transition": "fade",
+            "feel": "snappy"
+        },
+        "slide": {
+            "label": "Slide",
+            "he": "החלקה",
+            "hint": "The next page pushes this one aside (from the left on a Hebrew site). On phones: Fade.",
+            "transition": "move-left",
+            "rtl": "move-right",
+            "feel": "smooth",
+            "phone": "fade"
+        },
+        "cinematic": {
+            "label": "Cinematic",
+            "he": "קולנועית",
+            "hint": "This page sinks back while the next rises over it. On phones: Fade.",
+            "transition": "parallax-up",
+            "feel": "cinematic",
+            "phone": "fade"
+        }
+    },
+    "motionChoices": {
+        "pre": {
+            "scroll": "smooth",
+            "animate": "still",
+            "between": "cinematic"
+        },
+        "reduced": {
+            "scroll": "normal",
+            "animate": "still",
+            "between": "none"
+        }
     }
 };
 const SPEC_SPRINGS = {
@@ -1437,6 +1639,773 @@ const SPEC_SPRINGS = {
         }
     }
 };
+const SPEC_MOODS = {
+    "calm": "Calm",
+    "warm": "Warm",
+    "natural": "Natural",
+    "elegant": "Elegant",
+    "luxurious": "Luxurious",
+    "minimal": "Minimal",
+    "professional": "Professional",
+    "trustworthy": "Trustworthy",
+    "friendly": "Friendly",
+    "playful": "Playful",
+    "bold": "Bold",
+    "energetic": "Energetic",
+    "dark": "Dark",
+    "editorial": "Editorial",
+    "technical": "Technical",
+    "romantic": "Romantic",
+    "crafted": "Hand-made"
+};
+const SPEC_STYLE_PRESETS = [
+    {
+        "id": "clear-care",
+        "name": "Clear care",
+        "flavorId": "crisp",
+        "seed": "#0E7490",
+        "tint": "subtle",
+        "pairId": "manrope",
+        "shape": "soft",
+        "density": "regular",
+        "motion": "standard",
+        "pillButtons": false,
+        "moves": {
+            "scroll": "smooth",
+            "animate": "standard",
+            "between": "fade"
+        },
+        "modes": [
+            "light"
+        ],
+        "moods": [
+            "trustworthy",
+            "calm",
+            "professional"
+        ],
+        "uupm": [
+            "Accessible & Ethical",
+            "Minimalism & Swiss Style"
+        ],
+        "blurb": "Clean, light and easy to read. Says \"you are in good hands\".",
+        "slice": true
+    },
+    {
+        "id": "swiss-grid",
+        "name": "Swiss grid",
+        "flavorId": "crisp",
+        "seed": "#111827",
+        "tint": "neutral",
+        "pairId": "inter-tight",
+        "shape": "sharp",
+        "density": "compact",
+        "motion": "snappy",
+        "pillButtons": false,
+        "moves": {
+            "scroll": "normal",
+            "animate": "standard",
+            "between": "none"
+        },
+        "modes": [
+            "light",
+            "dark"
+        ],
+        "moods": [
+            "minimal",
+            "professional",
+            "technical"
+        ],
+        "uupm": [
+            "Minimalism & Swiss Style",
+            "Swiss Modernism 2.0"
+        ],
+        "blurb": "Black on white, a strict grid, nothing extra.",
+        "slice": true
+    },
+    {
+        "id": "trusted-advisor",
+        "name": "Trusted advisor",
+        "flavorId": "crisp",
+        "seed": "#1E3A8A",
+        "tint": "subtle",
+        "pairId": "plex",
+        "shape": "subtle",
+        "density": "regular",
+        "motion": "standard",
+        "pillButtons": false,
+        "moves": {
+            "scroll": "normal",
+            "animate": "standard",
+            "between": "fade"
+        },
+        "modes": [
+            "light"
+        ],
+        "moods": [
+            "trustworthy",
+            "professional"
+        ],
+        "uupm": [
+            "Accessible & Ethical",
+            "Trust & Authority (landing)"
+        ],
+        "blurb": "Navy, plain type, firm edges. Serious without being cold.",
+        "slice": true
+    },
+    {
+        "id": "fresh-practice",
+        "name": "Fresh practice",
+        "flavorId": "crisp",
+        "seed": "#0284C7",
+        "tint": "rich",
+        "pairId": "inter-tight",
+        "shape": "round",
+        "density": "airy",
+        "motion": "calm",
+        "pillButtons": true,
+        "moves": {
+            "scroll": "smooth",
+            "animate": "subtle",
+            "between": "fade"
+        },
+        "modes": [
+            "light"
+        ],
+        "moods": [
+            "friendly",
+            "calm",
+            "trustworthy"
+        ],
+        "uupm": [
+            "Soft UI Evolution",
+            "Accessible & Ethical"
+        ],
+        "blurb": "Bright, soft and reassuring, with rounded buttons.",
+        "slice": false
+    },
+    {
+        "id": "gallery-minimal",
+        "name": "Gallery minimal",
+        "flavorId": "linen",
+        "seed": "#3F4A5A",
+        "tint": "neutral",
+        "pairId": "instrument",
+        "shape": "sharp",
+        "density": "airy",
+        "motion": "calm",
+        "pillButtons": false,
+        "moves": {
+            "scroll": "extra",
+            "animate": "subtle",
+            "between": "fade"
+        },
+        "modes": [
+            "light",
+            "dark"
+        ],
+        "moods": [
+            "minimal",
+            "elegant",
+            "editorial"
+        ],
+        "uupm": [
+            "Exaggerated Minimalism",
+            "Editorial Grid / Magazine"
+        ],
+        "blurb": "White walls and a quiet serif. The work does the talking.",
+        "slice": true
+    },
+    {
+        "id": "warm-editorial",
+        "name": "Warm editorial",
+        "flavorId": "linen",
+        "seed": "#9A4F2B",
+        "tint": "subtle",
+        "pairId": "fraunces",
+        "shape": "sharp",
+        "density": "airy",
+        "motion": "calm",
+        "pillButtons": false,
+        "moves": {
+            "scroll": "smooth",
+            "animate": "subtle",
+            "between": "fade"
+        },
+        "modes": [
+            "light"
+        ],
+        "moods": [
+            "warm",
+            "editorial",
+            "crafted"
+        ],
+        "uupm": [
+            "Editorial Grid / Magazine",
+            "Nature Distilled"
+        ],
+        "blurb": "Cream paper, terracotta and a soft serif, like a good magazine.",
+        "slice": true
+    },
+    {
+        "id": "soft-spa",
+        "name": "Soft spa",
+        "flavorId": "linen",
+        "seed": "#7D4E5E",
+        "tint": "rich",
+        "pairId": "cormorant",
+        "shape": "soft",
+        "density": "airy",
+        "motion": "calm",
+        "pillButtons": false,
+        "moves": {
+            "scroll": "extra",
+            "animate": "subtle",
+            "between": "fade"
+        },
+        "modes": [
+            "light"
+        ],
+        "moods": [
+            "calm",
+            "elegant",
+            "natural"
+        ],
+        "uupm": [
+            "Soft UI Evolution",
+            "Nature Distilled"
+        ],
+        "blurb": "Rose-tinted cream, a fine serif and slow, gentle motion.",
+        "slice": true
+    },
+    {
+        "id": "quiet-luxury",
+        "name": "Quiet luxury",
+        "flavorId": "linen",
+        "seed": "#7A5B36",
+        "tint": "subtle",
+        "pairId": "cormorant",
+        "shape": "sharp",
+        "density": "airy",
+        "motion": "calm",
+        "pillButtons": false,
+        "moves": {
+            "scroll": "extra",
+            "animate": "subtle",
+            "between": "cinematic"
+        },
+        "modes": [
+            "light",
+            "dark"
+        ],
+        "moods": [
+            "luxurious",
+            "elegant",
+            "calm"
+        ],
+        "uupm": [
+            "Exaggerated Minimalism",
+            "Liquid Glass (luxury rows, without the glass)"
+        ],
+        "blurb": "Bronze on warm white. Expensive, never loud.",
+        "slice": false
+    },
+    {
+        "id": "after-dark",
+        "name": "After dark",
+        "flavorId": "midnight",
+        "seed": "#DB2777",
+        "tint": "subtle",
+        "pairId": "grotesk",
+        "shape": "soft",
+        "density": "regular",
+        "motion": "lively",
+        "pillButtons": false,
+        "moves": {
+            "scroll": "smooth",
+            "animate": "lively",
+            "between": "slide"
+        },
+        "modes": [
+            "dark"
+        ],
+        "moods": [
+            "bold",
+            "energetic",
+            "dark"
+        ],
+        "uupm": [
+            "Dark Mode (OLED)",
+            "Vibrant & Block-based"
+        ],
+        "blurb": "A night out: dark rooms, one bright colour, lively motion.",
+        "slice": false
+    },
+    {
+        "id": "ink-studio",
+        "name": "Ink studio",
+        "flavorId": "midnight",
+        "seed": "#EA580C",
+        "tint": "neutral",
+        "pairId": "inter-tight",
+        "shape": "sharp",
+        "density": "compact",
+        "motion": "snappy",
+        "pillButtons": false,
+        "moves": {
+            "scroll": "normal",
+            "animate": "standard",
+            "between": "slide"
+        },
+        "modes": [
+            "dark"
+        ],
+        "moods": [
+            "bold",
+            "dark",
+            "crafted"
+        ],
+        "uupm": [
+            "Dark Mode (OLED)",
+            "Brutalism"
+        ],
+        "blurb": "Black, sharp and orange. A shop with attitude.",
+        "slice": false
+    },
+    {
+        "id": "night-gallery",
+        "name": "Night gallery",
+        "flavorId": "midnight",
+        "seed": "#8B9BB4",
+        "tint": "neutral",
+        "pairId": "geist",
+        "shape": "sharp",
+        "density": "airy",
+        "motion": "calm",
+        "pillButtons": false,
+        "moves": {
+            "scroll": "extra",
+            "animate": "subtle",
+            "between": "cinematic"
+        },
+        "modes": [
+            "dark",
+            "light"
+        ],
+        "moods": [
+            "minimal",
+            "dark",
+            "editorial"
+        ],
+        "uupm": [
+            "Dark Mode (OLED)",
+            "Minimalism & Swiss Style"
+        ],
+        "blurb": "Pictures on black, like a darkened gallery.",
+        "slice": true
+    },
+    {
+        "id": "tech-studio",
+        "name": "Tech studio",
+        "flavorId": "midnight",
+        "seed": "#059669",
+        "tint": "subtle",
+        "pairId": "geist",
+        "shape": "soft",
+        "density": "regular",
+        "motion": "standard",
+        "pillButtons": false,
+        "moves": {
+            "scroll": "normal",
+            "animate": "standard",
+            "between": "fade"
+        },
+        "modes": [
+            "dark",
+            "light"
+        ],
+        "moods": [
+            "technical",
+            "bold",
+            "professional"
+        ],
+        "uupm": [
+            "Dark Mode (OLED)",
+            "Minimalism & Swiss Style"
+        ],
+        "blurb": "Dark, precise and modern, for people who build things.",
+        "slice": false
+    },
+    {
+        "id": "morning-glass",
+        "name": "Morning glass",
+        "flavorId": "glass",
+        "seed": "#0E8A89",
+        "tint": "subtle",
+        "pairId": "figtree",
+        "shape": "round",
+        "density": "regular",
+        "motion": "calm",
+        "pillButtons": true,
+        "moves": {
+            "scroll": "smooth",
+            "animate": "subtle",
+            "between": "fade"
+        },
+        "modes": [
+            "light"
+        ],
+        "moods": [
+            "calm",
+            "friendly",
+            "natural"
+        ],
+        "uupm": [
+            "Glassmorphism",
+            "Soft UI Evolution"
+        ],
+        "blurb": "Frosted panels over a soft teal light. Fresh and calm.",
+        "slice": true
+    },
+    {
+        "id": "holiday-light",
+        "name": "Holiday light",
+        "flavorId": "glass",
+        "seed": "#0A66E8",
+        "tint": "rich",
+        "pairId": "jakarta",
+        "shape": "round",
+        "density": "regular",
+        "motion": "lively",
+        "pillButtons": true,
+        "moves": {
+            "scroll": "smooth",
+            "animate": "lively",
+            "between": "slide"
+        },
+        "modes": [
+            "light"
+        ],
+        "moods": [
+            "friendly",
+            "energetic"
+        ],
+        "uupm": [
+            "Liquid Glass",
+            "Glassmorphism"
+        ],
+        "blurb": "Sea-blue glass and big photos. Makes people want to go.",
+        "slice": false
+    },
+    {
+        "id": "frosted-portfolio",
+        "name": "Frosted portfolio",
+        "flavorId": "glass",
+        "seed": "#1F2937",
+        "tint": "neutral",
+        "pairId": "manrope",
+        "shape": "round",
+        "density": "airy",
+        "motion": "calm",
+        "pillButtons": true,
+        "moves": {
+            "scroll": "extra",
+            "animate": "subtle",
+            "between": "cinematic"
+        },
+        "modes": [
+            "light",
+            "dark"
+        ],
+        "moods": [
+            "minimal",
+            "elegant"
+        ],
+        "uupm": [
+            "Glassmorphism",
+            "Spatial UI (VisionOS)"
+        ],
+        "blurb": "Grey glass and lots of space around your pictures.",
+        "slice": true
+    },
+    {
+        "id": "coral-studio",
+        "name": "Coral studio",
+        "flavorId": "glass",
+        "seed": "#E5484D",
+        "tint": "subtle",
+        "pairId": "figtree",
+        "shape": "round",
+        "density": "regular",
+        "motion": "lively",
+        "pillButtons": true,
+        "moves": {
+            "scroll": "smooth",
+            "animate": "lively",
+            "between": "slide"
+        },
+        "modes": [
+            "light"
+        ],
+        "moods": [
+            "energetic",
+            "friendly"
+        ],
+        "uupm": [
+            "Glassmorphism",
+            "Vibrant & Block-based"
+        ],
+        "blurb": "Warm coral and bouncy buttons. Full of energy.",
+        "slice": false
+    },
+    {
+        "id": "corner-cafe",
+        "name": "Corner café",
+        "flavorId": "bloom",
+        "seed": "#9C4146",
+        "tint": "subtle",
+        "pairId": "bricolage",
+        "shape": "bubbly",
+        "density": "regular",
+        "motion": "lively",
+        "pillButtons": true,
+        "moves": {
+            "scroll": "smooth",
+            "animate": "lively",
+            "between": "slide"
+        },
+        "modes": [
+            "light"
+        ],
+        "moods": [
+            "warm",
+            "friendly",
+            "playful"
+        ],
+        "uupm": [
+            "Vibrant & Block-based",
+            "Soft UI Evolution"
+        ],
+        "blurb": "Berry red, round shapes, a cheerful headline face.",
+        "slice": true
+    },
+    {
+        "id": "kind-community",
+        "name": "Kind community",
+        "flavorId": "bloom",
+        "seed": "#3B6939",
+        "tint": "subtle",
+        "pairId": "nunito",
+        "shape": "bubbly",
+        "density": "regular",
+        "motion": "standard",
+        "pillButtons": true,
+        "moves": {
+            "scroll": "normal",
+            "animate": "standard",
+            "between": "fade"
+        },
+        "modes": [
+            "light"
+        ],
+        "moods": [
+            "friendly",
+            "natural",
+            "trustworthy"
+        ],
+        "uupm": [
+            "Accessible & Ethical",
+            "Organic Biophilic"
+        ],
+        "blurb": "Leaf green and soft, open shapes. Welcoming to everyone.",
+        "slice": false
+    },
+    {
+        "id": "little-ones",
+        "name": "Little ones",
+        "flavorId": "bloom",
+        "seed": "#006A6A",
+        "tint": "rich",
+        "pairId": "sans-flex",
+        "shape": "bubbly",
+        "density": "regular",
+        "motion": "lively",
+        "pillButtons": true,
+        "moves": {
+            "scroll": "normal",
+            "animate": "lively",
+            "between": "slide"
+        },
+        "modes": [
+            "light"
+        ],
+        "moods": [
+            "playful",
+            "friendly"
+        ],
+        "uupm": [
+            "Claymorphism",
+            "Vibrant & Block-based"
+        ],
+        "blurb": "Teal, chunky and playful. Made for families.",
+        "slice": false
+    },
+    {
+        "id": "garden-party",
+        "name": "Garden party",
+        "flavorId": "bloom",
+        "seed": "#7D5260",
+        "tint": "subtle",
+        "pairId": "bricolage",
+        "shape": "bubbly",
+        "density": "airy",
+        "motion": "standard",
+        "pillButtons": true,
+        "moves": {
+            "scroll": "smooth",
+            "animate": "standard",
+            "between": "fade"
+        },
+        "modes": [
+            "light"
+        ],
+        "moods": [
+            "romantic",
+            "warm",
+            "friendly"
+        ],
+        "uupm": [
+            "Soft UI Evolution",
+            "Organic Biophilic"
+        ],
+        "blurb": "Dusty rose and soft lavender light. A celebration.",
+        "slice": true
+    },
+    {
+        "id": "bold-maker",
+        "name": "Bold maker",
+        "flavorId": "pop",
+        "seed": "#FF5C39",
+        "tint": "subtle",
+        "pairId": "grotesk",
+        "shape": "subtle",
+        "density": "compact",
+        "motion": "snappy",
+        "pillButtons": false,
+        "moves": {
+            "scroll": "normal",
+            "animate": "lively",
+            "between": "slide"
+        },
+        "modes": [
+            "light"
+        ],
+        "moods": [
+            "bold",
+            "playful",
+            "crafted"
+        ],
+        "uupm": [
+            "Neubrutalism",
+            "Vibrant & Block-based"
+        ],
+        "blurb": "Thick outlines and orange. Proud of what you make.",
+        "slice": true
+    },
+    {
+        "id": "festival",
+        "name": "Festival",
+        "flavorId": "pop",
+        "seed": "#FF4FA3",
+        "tint": "subtle",
+        "pairId": "archivo",
+        "shape": "subtle",
+        "density": "compact",
+        "motion": "snappy",
+        "pillButtons": false,
+        "moves": {
+            "scroll": "normal",
+            "animate": "lively",
+            "between": "slide"
+        },
+        "modes": [
+            "light",
+            "dark"
+        ],
+        "moods": [
+            "energetic",
+            "bold",
+            "playful"
+        ],
+        "uupm": [
+            "Memphis Design",
+            "Vibrant & Block-based"
+        ],
+        "blurb": "Pink, heavy type, poster energy.",
+        "slice": false
+    },
+    {
+        "id": "zine",
+        "name": "Zine",
+        "flavorId": "pop",
+        "seed": "#3D5AFE",
+        "tint": "neutral",
+        "pairId": "syne",
+        "shape": "sharp",
+        "density": "regular",
+        "motion": "snappy",
+        "pillButtons": false,
+        "moves": {
+            "scroll": "normal",
+            "animate": "standard",
+            "between": "slide"
+        },
+        "modes": [
+            "light"
+        ],
+        "moods": [
+            "bold",
+            "editorial",
+            "playful"
+        ],
+        "uupm": [
+            "Brutalism",
+            "Anti-Polish / Raw Aesthetic"
+        ],
+        "blurb": "Electric blue and an odd, wide face. Made by hand, on purpose.",
+        "slice": false
+    },
+    {
+        "id": "fresh-market",
+        "name": "Fresh market",
+        "flavorId": "pop",
+        "seed": "#00B86B",
+        "tint": "subtle",
+        "pairId": "grotesk",
+        "shape": "subtle",
+        "density": "regular",
+        "motion": "snappy",
+        "pillButtons": false,
+        "moves": {
+            "scroll": "normal",
+            "animate": "standard",
+            "between": "slide"
+        },
+        "modes": [
+            "light"
+        ],
+        "moods": [
+            "energetic",
+            "friendly",
+            "natural"
+        ],
+        "uupm": [
+            "Vibrant & Block-based",
+            "Flat Design"
+        ],
+        "blurb": "Green and bright, like a market stall in the morning.",
+        "slice": false
+    }
+];
 const SPEC_FONTS = {
     "Inter": "Inter:wght@300;400;500;600;700",
     "Inter Tight": "Inter+Tight:wght@500;600;700",
@@ -14016,6 +14985,13 @@ const DESIGN_TOKEN_GROUPS = ['colour', 'type', 'shape', 'depth', 'space', 'motio
 const TINT_IDS = Object.keys(SPEC_AXES.tints);
 /** What a studio that stored its look BEFORE the tint existed wears: exactly the look's own palette. */
 const PRE_TINT_DEFAULT = 'neutral';
+const SCROLL_IDS = Object.keys(SPEC_AXES.scrolls);
+const ANIMATE_IDS = Object.keys(SPEC_AXES.animations);
+const BETWEEN_IDS = Object.keys(SPEC_AXES.betweens);
+/** What a look stored BEFORE rev 3.1 wears: exactly what every live site did (Smooth · Still · Cinematic). */
+const PRE_MOTION = SPEC_AXES.motionChoices.pre;
+/** What a visitor who asks for reduced motion always gets, whatever the look chose. */
+const REDUCED_DESIGN_MOTION = SPEC_AXES.motionChoices.reduced;
 /** The spec's flavors, typed. Assignment here is the compile-time proof that the generated
  *  data fits `FlavorPackV2`. */
 const SPEC_FLAVORS = SPEC_FLAVOR_PACKS;
@@ -16503,6 +17479,7 @@ function defaultDesignChoices(pack) {
         seed: pack.seed,
         pairId: pack.pairs[0]?.id ?? '',
         ...pack.defaults,
+        ...PRE_MOTION,
     };
 }
 /**
@@ -16830,6 +17807,9 @@ var DesignConfigKey;
     DesignConfigKey["Mode"] = "mode";
     DesignConfigKey["Tint"] = "tint";
     DesignConfigKey["Fonts"] = "fonts";
+    DesignConfigKey["Scroll"] = "scroll";
+    DesignConfigKey["Animate"] = "animate";
+    DesignConfigKey["Between"] = "between";
     DesignConfigKey["Revert"] = "revert";
 })(DesignConfigKey || (DesignConfigKey = {}));
 const MODES = SPEC_AXES.modes;
@@ -16907,6 +17887,15 @@ function resolveDesignChoices(partial) {
         mode: (MODES.includes(asString(partial?.mode) ?? '') ? asString(partial?.mode) : pack.defaults.mode),
         tint: keyOf(SPEC_AXES.tints, asString(partial?.tint)) ?? pack.defaults.tint,
         ...(fonts ? { fonts } : {}),
+        ...resolveDesignMotion(partial),
+    };
+}
+/** The look's motion, completed: an absent or unknown choice reads `PRE_MOTION` — what the site already does. */
+function resolveDesignMotion(partial) {
+    return {
+        scroll: keyOf(SPEC_AXES.scrolls, asString(partial?.scroll)) ?? PRE_MOTION.scroll,
+        animate: keyOf(SPEC_AXES.animations, asString(partial?.animate)) ?? PRE_MOTION.animate,
+        between: keyOf(SPEC_AXES.betweens, asString(partial?.between)) ?? PRE_MOTION.between,
     };
 }
 /** The pack's own defaults for `flavorId` — what picking a card means before anything is tuned. */
@@ -16916,13 +17905,14 @@ function packDesignChoices(flavorId) {
 /**
  * What picking a pack card means, given the design the studio wears: the applied pack → the applied
  * choices; another pack → that pack's defaults, CARRYING the author's chosen fonts (§5b — a font the
- * author chose survives a pack switch unless the author changes it). Both picker homes call this.
+ * author chose survives a pack switch unless the author changes it) and the site's motion (rev 3.1 MO-D3 —
+ * how it scrolls and changes page is not a pack's, so a Look pick never resets it). Both picker homes call this.
  */
 function choicesForPack(flavorId, applied) {
     const pack = flavorPackById(flavorId) ?? defaultPack();
     if (applied && resolveDesignChoices(applied).flavorId === pack.id)
         return resolveDesignChoices(applied);
-    return resolveDesignChoices({ flavorId: pack.id, fonts: applied?.fonts });
+    return resolveDesignChoices({ flavorId: pack.id, fonts: applied?.fonts, ...resolveDesignMotion(applied) });
 }
 /**
  * A stored `settings.design` config → the resolved design. No row (or no config) → Crisp's defaults. A
@@ -16945,6 +17935,9 @@ function readDesignConfig(config, hasRow = !!config) {
         mode: map.get(DesignConfigKey.Mode),
         tint: (storedTint ?? undefined),
         fonts: map.get(DesignConfigKey.Fonts),
+        scroll: map.get(DesignConfigKey.Scroll),
+        animate: map.get(DesignConfigKey.Animate),
+        between: map.get(DesignConfigKey.Between),
     });
     return {
         choices,
@@ -16959,6 +17952,10 @@ function readDesignConfig(config, hasRow = !!config) {
 function designModeOf(config) {
     return readDesignConfig(config).choices.mode;
 }
+/** The look's motion of a stored config — what the public page read hands the engine (`designMotion`). */
+function designMotionOf(config) {
+    return resolveDesignMotion(readDesignConfig(config).choices);
+}
 /** Resolved choices (+ the revert snapshot) → the config array a settings row stores. */
 function designConfigEntries(choices, flavorVersion, revert) {
     const c = resolveDesignChoices(choices);
@@ -16973,6 +17970,9 @@ function designConfigEntries(choices, flavorVersion, revert) {
         { key: DesignConfigKey.PillButtons, value: String(c.pillButtons) },
         { key: DesignConfigKey.Mode, value: c.mode },
         { key: DesignConfigKey.Tint, value: c.tint },
+        { key: DesignConfigKey.Scroll, value: c.scroll },
+        { key: DesignConfigKey.Animate, value: c.animate },
+        { key: DesignConfigKey.Between, value: c.between },
         ...(c.fonts ? [{ key: DesignConfigKey.Fonts, value: JSON.stringify(c.fonts) }] : []),
         ...(revert ? [{ key: DesignConfigKey.Revert, value: JSON.stringify(revert) }] : []),
     ];
@@ -16984,6 +17984,7 @@ function sameDesignChoices(a, b) {
     return x.flavorId === y.flavorId && x.seed.toLowerCase() === y.seed.toLowerCase() && x.pairId === y.pairId
         && x.shape === y.shape && x.density === y.density && x.motion === y.motion
         && x.pillButtons === y.pillButtons && x.mode === y.mode && x.tint === y.tint
+        && x.scroll === y.scroll && x.animate === y.animate && x.between === y.between
         && JSON.stringify(x.fonts ?? {}) === JSON.stringify(y.fonts ?? {});
 }
 
@@ -17241,6 +18242,35 @@ function planFontFamilyRemoval(existing, previous, family) {
     return { roles, choices, plan, fallbacks };
 }
 
+const MOOD_IDS = Object.keys(SPEC_MOODS);
+const MOOD_LABELS = SPEC_MOODS;
+/** The 24, catalogue order (four per flavor). Assignment here proves the generated data fits the type. */
+const STYLE_PRESETS = SPEC_STYLE_PRESETS;
+function stylePresetById(id) {
+    return id ? STYLE_PRESETS.find(p => p.id === id) : undefined;
+}
+const FOLLOW_VISITOR = 'auto';
+/** The modes Design offers for a preset: the audited ones, then "Follow visitor" when it passed both (H-D3). */
+function presetModes(preset) {
+    return preset.modes.length > 1 ? [...preset.modes, FOLLOW_VISITOR] : [...preset.modes];
+}
+/**
+ * What picking a preset means — the complete `DesignChoices`, its motion included — in `mode` (default:
+ * its first). A mode it was not audited in is REFUSED (null): a light-only preset is never worn dark.
+ */
+function presetChoices(id, mode) {
+    const preset = stylePresetById(id);
+    if (!preset)
+        return null;
+    const wear = mode ?? preset.modes[0];
+    if (!presetModes(preset).includes(wear))
+        return null;
+    return resolveDesignChoices({
+        flavorId: preset.flavorId, seed: preset.seed, pairId: preset.pairId, shape: preset.shape, density: preset.density,
+        motion: preset.motion, pillButtons: preset.pillButtons, mode: wear, tint: preset.tint, ...preset.moves,
+    });
+}
+
 /**
  * @vectoriox/iox-ui/design-core — the shared, FRAMEWORK-FREE core of the design system
  * (design-system plan §3e): the token vocabulary, the flavor contract (generated 1:1 from
@@ -17256,5 +18286,5 @@ function planFontFamilyRemoval(existing, previous, family) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCENT_TOKEN_NAMES, AdoptOutcome, AdoptSkipReason, BAR_RESERVE_BREAKPOINTS, BAR_RESERVE_CLASS, BOTTOM_BAR_STYLE, BUTTON_VARIANT_TO_STYLE, CANVAS_LINK_ATTRIBUTE, CARD_LINK_CLASS, COLOR_SCHEMES, COLOR_SCHEME_TRAIT, COLOR_SCHEME_TYPES, ColorScheme, ColourCheckId, DEFAULT_FLAVOR_ID, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, DesignConfigKey, ELEMENT_STYLES, ELEMENT_STYLE_MARKER_CLASS, ELEMENT_STYLE_STATES, EMPTY_IMAGE_ATTRIBUTE, EMPTY_IMAGE_SRC, ElementStyleState, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, FONT_FILE_ACCEPT, FONT_FILE_EXTENSIONS, FONT_FILE_FORMATS, FONT_STYLES, FONT_WEIGHTS, FontUploadError, GOOGLE_FONTS_CSS_ORIGIN, GOOGLE_FONTS_FILE_ORIGIN, HELD_CONTRAST, INHERITED_TEXT, LinkType, MAX_FONT_FILE_BYTES, NEW_NODE_STYLE_DEFAULTS, OwnedTraitLink, PALETTE_PRESETS, PRE_DS2_FLAVOR_DEFAULTS, PRE_TINT_DEFAULT, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, SCHEME_INK, SPEC_A11Y, SPEC_AXES, SPEC_BUTTON_VARIANT_TO_STYLE, SPEC_CONTRAST, SPEC_CONTRAST_AUDIT, SPEC_DEFAULT_ELEMENT_STYLE, SPEC_ELEMENT_STYLES, SPEC_FIELD_CLASS_BASELINE, SPEC_FLAVORS, SPEC_FLAVOR_PACKS, SPEC_FONTS, SPEC_FONT_ROLES, SPEC_INK_SCOPES, SPEC_LEGACY_ALIASES, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SCHEME_INK, SPEC_SPRINGS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, SUPERSEDED_STYLE_VALUES, SWISS_FLAVOR, TINT_FULL_CHROMA, TINT_IDS, TINT_LEVELS, TINT_OWN_HUE_CHROMA, TINT_TURN_CHROMA, USER_TOKEN_SOURCE, WCAG_AA_TEXT, WCAG_AA_UI, adoptElementStyles, adoptionStyleFor, apcaLc, applyElementStyle, applyHeadingLevelRule, atLightness, atLightnessMaxChroma, auditDesignContrast, barReserveClass, buildFlavorTokens, buildFontFaceCss, buttonBlockHref, catalogFontId, checkFontWeight, choicesForPack, colorSchemeClass, colorSchemeOf, colourTabChecks, compareFontWeights, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, compositeOver, cssString, defaultDesignChoices, defaultElementStyleFor, deriveAccentTokens, deriveBrandTokens, designApplySnapshot, designBaseline, designConfigEntries, designModeOf, designRevertConfig, designTokenRepairs, designTokenRows, elementStyleById, elementStyleClass, elementStylesFor, emptyImageLabelSrc, emptyImagePlaceholder, emptyImageSrc, ensureAlpha, ensureContrast, flavorColours, flavorPackById, flavorSeedWrites, flavorSourceStamp, fontFamilyKey, fontFileName, fontFileStem, fontFormatOf, fontPreloads, fontRoleReferences, fontStackWithout, fontWeightCovers, fontWeightRange, fontWeightValue, fontsForTokens, formatFontFamilies, formatFontFamily, formatFontWeight, googleFontHref, groupFontFamilies, hasElementStyleMarker, headingHref, inSrgbGamut, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, isFontWeightRange, isRetiredFlavorId, legacyDesignTokenRows, legacyFlavorTokens, legacyRuleTokenReferences, matchFontWeight, missingDesignRows, missingFontRoles, nodeDesignClasses, normalizeFontStyle, normalizeFontWeight, normalizeFontWeightValue, oklabToRgb, ownedTraitStatus, ownedTraitsOf, packDesignChoices, paintColours, parseCssColour, parseFontFamilies, parseFontWeight, parseHexColor, planDesignApply, planDesignRevert, planFlavorRevert, planFlavorSeed, planFontFamilyRemoval, planSwissMigration, preTintAccentGrounds, previewElementStyleAdoption, previewFontWeight, quantizeRgb, readDesignConfig, readOwnedTrait, relativeLuminance, releaseElementStyle, resolveDesignChoices, resolveSchemeTokenValues, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, ringColour, roleClass, sameDesignChoices, setColorScheme, specTokenNames, splitTopLevel, springToLinear, stackNamesFamily, styleKeyToKebab, switchElementStyle, syncNodeDesignClasses, toHexColor, tokenReferences, tokensToDarkVarMap, tokensToVarMap, unknownTokenReferences, untouchedSeedRow, userFontStack, validateFlavorPack, wcagContrastRatio, withSchemeInk, writeOwnedTrait };
+export { ACCENT_TOKEN_NAMES, ANIMATE_IDS, AdoptOutcome, AdoptSkipReason, BAR_RESERVE_BREAKPOINTS, BAR_RESERVE_CLASS, BETWEEN_IDS, BOTTOM_BAR_STYLE, BUTTON_VARIANT_TO_STYLE, CANVAS_LINK_ATTRIBUTE, CARD_LINK_CLASS, COLOR_SCHEMES, COLOR_SCHEME_TRAIT, COLOR_SCHEME_TYPES, ColorScheme, ColourCheckId, DEFAULT_FLAVOR_ID, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, DesignConfigKey, ELEMENT_STYLES, ELEMENT_STYLE_MARKER_CLASS, ELEMENT_STYLE_STATES, EMPTY_IMAGE_ATTRIBUTE, EMPTY_IMAGE_SRC, ElementStyleState, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, FONT_FILE_ACCEPT, FONT_FILE_EXTENSIONS, FONT_FILE_FORMATS, FONT_STYLES, FONT_WEIGHTS, FontUploadError, GOOGLE_FONTS_CSS_ORIGIN, GOOGLE_FONTS_FILE_ORIGIN, HELD_CONTRAST, INHERITED_TEXT, LinkType, MAX_FONT_FILE_BYTES, MOOD_IDS, MOOD_LABELS, NEW_NODE_STYLE_DEFAULTS, OwnedTraitLink, PALETTE_PRESETS, PRE_DS2_FLAVOR_DEFAULTS, PRE_MOTION, PRE_TINT_DEFAULT, REDUCED_DESIGN_MOTION, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, SCHEME_INK, SCROLL_IDS, SPEC_A11Y, SPEC_AXES, SPEC_BUTTON_VARIANT_TO_STYLE, SPEC_CONTRAST, SPEC_CONTRAST_AUDIT, SPEC_DEFAULT_ELEMENT_STYLE, SPEC_ELEMENT_STYLES, SPEC_FIELD_CLASS_BASELINE, SPEC_FLAVORS, SPEC_FLAVOR_PACKS, SPEC_FONTS, SPEC_FONT_ROLES, SPEC_INK_SCOPES, SPEC_LEGACY_ALIASES, SPEC_MOODS, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SCHEME_INK, SPEC_SPRINGS, SPEC_STYLE_PRESETS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, STYLE_PRESETS, SUPERSEDED_STYLE_VALUES, SWISS_FLAVOR, TINT_FULL_CHROMA, TINT_IDS, TINT_LEVELS, TINT_OWN_HUE_CHROMA, TINT_TURN_CHROMA, USER_TOKEN_SOURCE, WCAG_AA_TEXT, WCAG_AA_UI, adoptElementStyles, adoptionStyleFor, apcaLc, applyElementStyle, applyHeadingLevelRule, atLightness, atLightnessMaxChroma, auditDesignContrast, barReserveClass, buildFlavorTokens, buildFontFaceCss, buttonBlockHref, catalogFontId, checkFontWeight, choicesForPack, colorSchemeClass, colorSchemeOf, colourTabChecks, compareFontWeights, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, compositeOver, cssString, defaultDesignChoices, defaultElementStyleFor, deriveAccentTokens, deriveBrandTokens, designApplySnapshot, designBaseline, designConfigEntries, designModeOf, designMotionOf, designRevertConfig, designTokenRepairs, designTokenRows, elementStyleById, elementStyleClass, elementStylesFor, emptyImageLabelSrc, emptyImagePlaceholder, emptyImageSrc, ensureAlpha, ensureContrast, flavorColours, flavorPackById, flavorSeedWrites, flavorSourceStamp, fontFamilyKey, fontFileName, fontFileStem, fontFormatOf, fontPreloads, fontRoleReferences, fontStackWithout, fontWeightCovers, fontWeightRange, fontWeightValue, fontsForTokens, formatFontFamilies, formatFontFamily, formatFontWeight, googleFontHref, groupFontFamilies, hasElementStyleMarker, headingHref, inSrgbGamut, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, isFontWeightRange, isRetiredFlavorId, legacyDesignTokenRows, legacyFlavorTokens, legacyRuleTokenReferences, matchFontWeight, missingDesignRows, missingFontRoles, nodeDesignClasses, normalizeFontStyle, normalizeFontWeight, normalizeFontWeightValue, oklabToRgb, ownedTraitStatus, ownedTraitsOf, packDesignChoices, paintColours, parseCssColour, parseFontFamilies, parseFontWeight, parseHexColor, planDesignApply, planDesignRevert, planFlavorRevert, planFlavorSeed, planFontFamilyRemoval, planSwissMigration, preTintAccentGrounds, presetChoices, presetModes, previewElementStyleAdoption, previewFontWeight, quantizeRgb, readDesignConfig, readOwnedTrait, relativeLuminance, releaseElementStyle, resolveDesignChoices, resolveDesignMotion, resolveSchemeTokenValues, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, ringColour, roleClass, sameDesignChoices, setColorScheme, specTokenNames, splitTopLevel, springToLinear, stackNamesFamily, styleKeyToKebab, stylePresetById, switchElementStyle, syncNodeDesignClasses, toHexColor, tokenReferences, tokensToDarkVarMap, tokensToVarMap, unknownTokenReferences, untouchedSeedRow, userFontStack, validateFlavorPack, wcagContrastRatio, withSchemeInk, writeOwnedTrait };
 //# sourceMappingURL=vectoriox-iox-ui-design-core.mjs.map