@projektemacher/storymapjs 0.10.8 → 0.11.0

package/src/scss/slider/VCO.StorySlider.scss

@@ -1,4 +1,5 @@
 @use "../core/Mixins" as *;
+@use "../Variables" as *;
 
 /* StorySlider
 ================================================== */
@@ -10,6 +11,12 @@
     height: 100%;
     overflow: hidden;
 
+    // the container itself is in the tab order: keyboard focus gets a ring
+    &:focus-visible {
+        outline: 2px solid var(--vco-color-dark, #{$color-dark});
+        outline-offset: -2px;
+    }
+
     // horizontal drags belong to the slider; vertical panning passes
     // through to the page (mobile navigation, #288)
     touch-action: pan-y;
@@ -36,6 +43,9 @@
     }
 
     .vco-slider-touch-mask {
+        width: 100%;
+        height: 100%;
+        position: absolute;
         z-index: 25;
         top: 0;
         left: 0;
@@ -43,8 +53,11 @@
 
     .vco-slider-container-mask {
         text-align: center;
+        width: 100%;
+        height: 100%;
 
         // overflow: scroll;
+        position: relative;
         z-index: 5;
 
         .vco-slider-container {
@@ -63,4 +76,41 @@
             }
         }
     }
+
+    /* Static reading mode (mode: "static"): all slides stacked in a
+       scrollable list instead of a translating strip; the scroll-spy in
+       StorySlider follows the reading position. The container chain gets
+       definite heights so the slides' percentage min-height resolves and
+       the list actually overflows into a scroll. Specificity is raised via
+       .vco-storymap because this block compiles before the entry-file
+       landscape/base rules it must beat. Standard mode is untouched.
+    ================================================== */
+    @at-root .vco-storymap &.vco-static {
+        overflow-y: auto;
+
+        .vco-slider-container-mask {
+            overflow: visible;
+            height: 100%;
+        }
+
+        .vco-slider-container {
+            position: relative;
+            height: 100%;
+        }
+
+        .vco-slider-item-container {
+            position: relative;
+            display: block;
+            height: 100%;
+        }
+
+        .vco-slide {
+            position: relative;
+            left: auto !important;
+            top: auto !important;
+            height: auto;
+            min-height: 60%;
+            margin-bottom: 24px;
+        }
+    }
 }

package/src/scss/snapmap/VCO.SnapMap.scss

@@ -10,7 +10,7 @@
             text-transform: none !important;
 
             a {
-                color: color.adjust($color-dark, $lightness: 40%);
+                color: var(--vco-color-text-muted, #{color.adjust($color-dark, $lightness: 40%)});
             }
         }
     }
@@ -21,7 +21,7 @@
         font-weight: bold;
         margin-top: 10px;
         font-size: 12px;
-        color: color.adjust($color-dark, $lightness: 40%);
+        color: var(--vco-color-text-muted, #{color.adjust($color-dark, $lightness: 40%)});
 
         /*
 		&:before {
@@ -51,7 +51,7 @@
         display: none;
 
         a {
-            color: #000;
+            color: var(--vco-color-dark, #{$color-dark});
         }
 
         .vco-snapmap-instagram-posts,

package/src/scss/ui/VCO.Consent.scss

@@ -20,12 +20,12 @@
     .vco-consent-title {
         margin: 0;
         font-weight: bold;
-        color: $color-foreground;
+        color: var(--vco-color-foreground, #{$color-foreground});
     }
 
     .vco-consent-message {
         margin: 0;
-        color: $color-dark;
+        color: var(--vco-color-dark, #{$color-dark});
     }
 
     .vco-consent-buttons {
@@ -35,26 +35,32 @@
 
         button {
             padding: 8px 18px;
-            border: 1px solid $color-dark;
+            min-height: 44px;
+            border: 1px solid var(--vco-color-dark, #{$color-dark});
             border-radius: 4px;
             background-color: transparent;
-            color: $color-dark;
+            color: var(--vco-color-dark, #{$color-dark});
             font-family: $font-sanserif;
             cursor: pointer;
 
             &:hover {
-                background-color: $color-dark;
-                color: $color-background;
+                background-color: var(--vco-color-dark, #{$color-dark});
+                color: var(--vco-color-background, #{$color-background});
+            }
+
+            &:focus-visible {
+                outline: 2px solid var(--vco-color-dark, #{$color-dark});
+                outline-offset: 2px;
             }
 
             &.vco-consent-allow {
-                background-color: $color-theme;
-                border-color: $color-theme;
-                color: $color-background;
+                background-color: var(--vco-color-theme, #{$color-theme});
+                border-color: var(--vco-color-theme, #{$color-theme});
+                color: var(--vco-color-background, #{$color-background});
 
                 &:hover {
-                    background-color: $color-theme-dark;
-                    border-color: $color-theme-dark;
+                    background-color: var(--vco-color-theme-dark, #{$color-theme-dark});
+                    border-color: var(--vco-color-theme-dark, #{$color-theme-dark});
                 }
             }
         }
@@ -69,8 +75,8 @@
     height: 100%;
     min-height: 120px;
     padding: 20px;
-    background-color: $color-background;
-    color: $color-dark;
+    background-color: var(--vco-color-background, #{$color-background});
+    color: var(--vco-color-dark, #{$color-dark});
     font-family: $font-sanserif;
     font-size: $base-font-size;
     text-align: center;
@@ -102,7 +108,7 @@
     }
 
     .vco-consent-service-label {
-        color: $color-dark;
+        color: var(--vco-color-dark, #{$color-dark});
         text-align: left;
     }
 

package/src/scss/ui/VCO.Layers.scss

@@ -0,0 +1,119 @@
+@use "sass:color";
+@use "../Variables" as *;
+
+/* Layers control (show_layers_control option)
+================================================== */
+
+// Disclosure button. The open/active state lives on the button itself:
+// MenuBar.setColor() replaces the .vco-menubar className wholesale, so a
+// state class on the menubar would not survive a repaint.
+.vco-menubar-button.vco-menubar-layers {
+    &.vco-active {
+        background: var(--vco-color-theme, #{$color-theme});
+        color: var(--vco-color-background, #{$color-background});
+    }
+}
+
+// The panel is absolutely positioned under the disclosure button so it never
+// contributes to .vco-menubar.offsetHeight (menubar_height drives the map and
+// slider heights).
+.vco-layers {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 12;
+    min-width: 200px;
+    max-width: min(320px, 90vw);
+    max-height: 70vh;
+    overflow-y: auto;
+    padding: 8px 0;
+    border: 1px solid var(--vco-color-border, #{color.adjust($color-background, $lightness: -10%)});
+    border-radius: 0 0 7px;
+    background-color: var(--vco-color-background, #{$color-background});
+    color: var(--vco-color-foreground, #{$color-foreground});
+    font-family: $font-sanserif;
+    font-size: $base-font-size-small;
+    text-align: left;
+
+    &[hidden] {
+        display: none;
+    }
+
+    .vco-layers-group {
+        margin: 0;
+        padding: 4px 0;
+        border: 0;
+        border-top: 1px solid
+            var(--vco-color-border, #{color.adjust($color-background, $lightness: -10%)});
+
+        &:first-child {
+            border-top: 0;
+        }
+
+        legend {
+            padding: 0 12px;
+            font-weight: bold;
+            color: var(--vco-color-text, #{$color-text});
+        }
+
+        label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            min-height: 44px;
+            padding: 4px 12px;
+            cursor: pointer;
+
+            &:hover {
+                background-color: var(
+                    --vco-color-hover,
+                    #{color.adjust($color-background, $lightness: -5%)}
+                );
+            }
+
+            &:has(input:checked) {
+                font-weight: bold;
+            }
+
+            &:has(input:disabled) {
+                opacity: 0.55;
+                cursor: default;
+            }
+
+            input[type="radio"],
+            input[type="checkbox"] {
+                flex-shrink: 0;
+                margin: 0;
+                accent-color: var(--vco-color-theme, #{$color-theme});
+
+                &:disabled {
+                    cursor: default;
+                }
+
+                &:focus-visible {
+                    outline: 2px solid var(--vco-color-theme, #{$color-theme});
+                    outline-offset: 2px;
+                }
+            }
+        }
+    }
+}
+
+/* Right to Left: anchor the panel under the button from the right
+================================================== */
+.vco-rtl {
+    .vco-layers {
+        right: 0;
+        left: auto;
+        text-align: right;
+    }
+}
+
+/* Mobile: cap the panel width so it never covers the slide
+================================================== */
+.vco-mobile {
+    .vco-layers {
+        min-width: 0;
+        max-width: 240px;
+    }
+}

package/src/scss/ui/VCO.MenuBar.Button.scss

@@ -4,18 +4,49 @@
 /* MenuBar Button
 ================================================== */
 
-.vco-menubar-button {
-    border-left: 1px solid color.adjust($color-background, $lightness: -10%);
+.vco-menubar .vco-menubar-button {
+    // scoped under .vco-menubar on purpose: the ported normalize reset in
+    // core/Reset.scss targets `.vco-storymap button` (0,1,1) and would
+    // otherwise zero the padding, border, size and weight below
+    border-left: 1px solid
+        var(--vco-color-border, #{color.adjust($color-background, $lightness: -10%)});
     font-size: 14px;
+
+    // real <button>s do not inherit the typeface: without this they render
+    // in the UA system font instead of the storymap stack the pre-0.9.0
+    // divs inherited. No `font` shorthand: it would reset font-weight.
+    font-family: inherit;
+    line-height: inherit;
     padding: 6px 12px;
 
+    // pointer targets stay usable for coarse pointers and low vision
+    min-height: 44px;
+
+    // the widget root is content-box (see VCO.StoryMap.scss): without this
+    // the 6px+6px padding lands on top of the 44px instead of inside it
+    box-sizing: border-box;
+
+    // the 44px box dwarfs the label: center it so the original padding
+    // reads as padding, not as dead space below the text
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    // text-to-icon spacing lives here, not as a literal space in the
+    // button markup: flex ignores inter-item whitespace, and a gap stays
+    // consistent across locales, RTL and icon-only mobile buttons
+    gap: 6px;
+
     // position:relative;
     // top:-24px;
-    background-color: fadeout($ui-background-color, 10%);
-    background-color: $color-background;
+    background-color: var(--vco-color-ui-fade, #{fadeout($ui-background-color, 10%)});
+    background-color: var(--vco-color-background, #{$color-background});
     cursor: pointer;
     font-weight: bold;
-    color: $color-text;
+
+    // pre-0.9.0 gray, not the body text color: the classic menubar buttons
+    // read as chrome, not content. 4.7:1 on white, so no contrast cost.
+    color: #737373;
 
     .vco-icon-arrow-up,
     .vco-icon-arrow-down {
@@ -28,29 +59,61 @@
     }
 
     &:hover {
-        background: $color-theme;
-        color: $color-background;
+        background: var(--vco-color-theme, #{$color-theme});
+        color: var(--vco-color-background, #{$color-background});
     }
 
-    // keyboard focus parity with the hover state
+    // keyboard focus parity with the hover state. The ring is dark on the
+    // theme background (a theme-coloured ring on itself is 1:1) and sits
+    // outside the button edge so it is never covered.
     &:focus-visible {
-        background: $color-theme;
-        color: $color-background;
-        outline: 2px solid $color-theme;
-        outline-offset: -2px;
+        background: var(--vco-color-theme, #{$color-theme});
+        color: var(--vco-color-background, #{$color-background});
+        outline: 2px solid var(--vco-color-dark, #{$color-dark});
+        outline-offset: 2px;
+    }
+}
+
+// dark mode keeps a lighter gray for the same chrome look: #737373 on the
+// dark panel would fail contrast (the themed text it replaces passed).
+// Mirrors the data-vco-theme / prefers-color-scheme switching in
+// VCO.StoryMap.scss.
+.vco-storymap[data-vco-theme="dark"] .vco-menubar-button {
+    color: #b3b3b3;
+}
+
+@media (prefers-color-scheme: dark) {
+    .vco-storymap:not([data-vco-theme="light"]) .vco-menubar-button {
+        color: #b3b3b3;
+    }
+}
+
+// the dark resting color above ties with :hover/:focus-visible (0,3,0)
+// and wins by source order, leaving gray text on the theme background —
+// restate the inverted interactive look explicitly so dark hover matches
+// light hover (panel text on the theme background, high contrast both ways)
+.vco-storymap[data-vco-theme="dark"] .vco-menubar-button:hover,
+.vco-storymap[data-vco-theme="dark"] .vco-menubar-button:focus-visible {
+    color: var(--vco-color-background, #222);
+}
+
+@media (prefers-color-scheme: dark) {
+    .vco-storymap:not([data-vco-theme="light"]) .vco-menubar-button:hover,
+    .vco-storymap:not([data-vco-theme="light"]) .vco-menubar-button:focus-visible {
+        color: var(--vco-color-background, #222);
     }
 }
 
 .vco-mobile {
     .vco-menubar-button {
         &:hover {
-            background-color: fadeout($ui-background-color, 33%);
-            color: $color-text;
+            background-color: var(--vco-color-ui-faint, #{fadeout($ui-background-color, 33%)});
+            color: var(--vco-color-text, #{$color-text});
         }
 
         &:active {
-            background: $color-theme;
-            color: $color-background;
+            background: var(--vco-color-theme, #{$color-theme});
+            color: var(--vco-color-background, #{$color-background});
         }
     }
 }
@@ -83,7 +146,7 @@
     height: 6px;
     margin: 0 12px;
     vertical-align: middle;
-    background-color: color.adjust($color-background, $lightness: -10%);
+    background-color: var(--vco-color-border, #{color.adjust($color-background, $lightness: -10%)});
     border-radius: 3px;
     overflow: hidden;
 
@@ -91,9 +154,67 @@
         display: block;
         height: 100%;
         width: 0;
-        background-color: $color-theme;
+        background-color: var(--vco-color-theme, #{$color-theme});
         border-radius: 3px;
     }
+
+    // height variants of the fill bar (progressbar block/thinblock)
+    &.vco-menubar-progress-block {
+        height: 12px;
+    }
+
+    &.vco-menubar-progress-thinblock {
+        height: 3px;
+    }
+
+    // per-slide steps (progressbar dots/squares): buttons jumping to
+    // their slide, built by MenuBar._renderProgressSteps
+    &.vco-menubar-progress-dots,
+    &.vco-menubar-progress-squares {
+        width: auto;
+        height: auto;
+        background: none;
+        overflow: visible;
+    }
+
+    .vco-menubar-progress-step {
+        display: inline-block;
+        min-height: 0;
+        min-width: 0;
+        margin: 0 3px;
+        padding: 0;
+        border: 1px solid var(--vco-color-theme, #{$color-theme});
+        background: transparent;
+        cursor: pointer;
+        vertical-align: middle;
+
+        &.vco-menubar-progress-dots {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+        }
+
+        &.vco-menubar-progress-squares {
+            width: 10px;
+            height: 10px;
+            border-radius: 0;
+        }
+
+        &.vco-past {
+            background-color: var(--vco-color-theme, #{$color-theme});
+        }
+
+        &.vco-active {
+            background-color: var(--vco-color-theme, #{$color-theme});
+            outline: 2px solid var(--vco-color-dark, #{$color-dark});
+            outline-offset: 1px;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--vco-color-dark, #{$color-dark});
+            outline-offset: 2px;
+        }
+    }
 }
 
 /* Route distance display (issue #341)
@@ -103,5 +224,5 @@
     margin: 0 12px;
     vertical-align: middle;
     font-size: $base-font-size-small;
-    color: $color-dark;
+    color: var(--vco-color-dark, #{$color-dark});
 }

package/src/scss/ui/VCO.MenuBar.scss

@@ -9,11 +9,18 @@
     z-index: 11;
     text-align: left;
     overflow: hidden;
-    border-bottom: 1px solid color.adjust($color-background, $lightness: -10%);
-    border-right: 1px solid color.adjust($color-background, $lightness: -10%);
+    border-bottom: 1px solid
+        var(--vco-color-border, #{color.adjust($color-background, $lightness: -10%)});
+    border-right: 1px solid
+        var(--vco-color-border, #{color.adjust($color-background, $lightness: -10%)});
     border-bottom-right-radius: 7px;
     left: 0;
 
+    // opt-in HUD palette (hudcolor/hudbgcolor): the theme values stay the
+    // default, so stories without the options render unchanged
+    background-color: var(--vco-hud-bg, transparent);
+    color: var(--vco-hud-fg, inherit);
+
     .vco-menubar-button:first-child {
         border-left: 0;
     }

package/src/scss/ui/VCO.Message.scss

@@ -1,4 +1,5 @@
 @use "../core/Mixins" as *;
+@use "../Variables" as *;
 
 /* MESSAGE
 ================================================== */
@@ -10,6 +11,12 @@
     height: 100%;
     position: absolute;
 
+    // dismissable by click and keyboard: keyboard focus gets a ring
+    &.vco-message-dismiss:focus-visible {
+        outline: 2px solid var(--vco-color-dark, #{$color-dark});
+        outline-offset: -2px;
+    }
+
     // position: 			relative;
 
     display: table;
@@ -49,6 +56,13 @@
 
             // margin: 100px auto;
             animation: rotateplane 1.2s infinite ease-in-out;
+
+            // an infinite loader is vestibular-hostile: freeze it for
+            // reduced-motion visitors (a static square still reads "busy"
+            // next to the loading text)
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+            }
         }
 
         @keyframes rotateplane {