@getvitops/generator 5.0.0 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # @getvitops/generator
 
+## 6.0.0
+
+### Major Changes
+
+- Carousel rework: a scroll strip that is operable and discoverable with no JS in every engine, and
+  real controls where the scroll-marker pseudo-elements are missing.
+
+  `::scroll-button()`, `::scroll-marker` and `::scroll-marker-group` are still Chromium-only, and
+  there is no usable polyfill (the one prototype targets the superseded syntax and only re-parses
+  inline `<style>` elements). So the carousel no longer assumes them: `<wc-carousel>` builds real
+  prev/next `<button>`s and a real dot nav where they are absent, styled from the same declarations
+  as the native ones. Which branch is live is decided **by the stylesheet** — one `@supports` sets
+  `--carousel-native-nav: 1` and the element reads it back — so the condition is written once and
+  the two cannot disagree.
+
+  **Breaking — `.carousel` is now a shell and `.carousel__track` is the scroller** (all formats). The
+  hint and the controls need a home outside the scrollport, and absolute positioning against the
+  shell replaces `position: fixed` + `anchor-name`/`position-area`, which pinned controls to a
+  viewport corner in any engine without anchor positioning. The 5.x single-element form is still
+  styled via `:not(:has(> .carousel__track))` and is promoted by the element at runtime, but it is
+  deprecated: wrap your slides in `<ul class="carousel__track">`.
+
+  **Breaking — looping is opt-in.** `<wc-carousel loop>` clones the slides; the default no longer
+  does. Cloning triples the markup, duplicates every image element and makes the scrollbar report 3×
+  the real content. `autoplay` implies `loop`. Migration: add `loop`.
+
+  **Breaking — `[part='autoplay']` is now `.carousel__autoplay`** (aliased for one release; `part`
+  only crosses a shadow boundary and this element is light DOM, so it was never a part). The button
+  is also a child of the shell rather than the track, where it used to occupy a slide-width column.
+
+  **Breaking — the host role is `group`, not `region`.** `region` is a landmark, so every carousel
+  grew an entry in the landmark list. Pass `landmark` to `<Carousel />` where it really is one.
+
+  **Changed (visual)** — the scrollbar is visible by default (`scrollbar-width: thin`, was `none`)
+  and a "Scroll for more" hint renders above the strip; both dim once the visitor scrolls, via a
+  scroll-progress timeline where available and a `data-scrolled` attribute otherwise. Opt out with
+  `.carousel--no-scrollbar` and `hint={false}`. `@getvitops/core`'s `global.css` also gains a narrow
+  media reset (`max-inline-size: 100%` on replaced elements, `block-size: auto` on `img`/`video`) —
+  deliberately without `display: block`, which would change inline images in prose.
+
+  **Added** — `@getvitops/astro/components/Carousel.astro`, a tier-3 wrapper emitting semantic
+  `<ul>`/`<li>`/`<figure>` markup with the right per-slide image priorities: the first slide eager
+  and high (the LCP candidate), the rest `lazy`/`low`/`async`. `loading="lazy"` is honoured for
+  images clipped by a horizontal scroll container, so off-screen slides defer with no JavaScript at
+  all. Also new: `carousel--markers-below` and `carousel--no-scrollbar`, and
+  `--carousel-slide-aspect`, which keeps slide heights equal whatever each image's aspect ratio is.
+
+  **Fixed** — `::scroll-button()` glyphs sat off-centre in their circles (`global.css`'s `*` reset
+  does not reach a pseudo-element, so the button was `content-box` with the UA's `padding: 1px 6px`
+  and `inline-size` + `aspect-ratio` sized an ellipse); the hover state was a no-op (it set the same
+  token as the base rule); slide heights varied with each image's aspect ratio; navigation used
+  physical `left`/`right` and so put "previous" on the wrong side in RTL; cloned slides duplicated
+  their `id`s; and `scrollBy(clientWidth)` overshot whenever `--carousel-slide-size` was not `100%`.
+
+### Patch Changes
+
+- @getvitops/utils@6.0.0
+
 ## 5.0.0
 
 ### Major Changes

package/assets/bricks/elements/carousel.php

@@ -2,14 +2,24 @@
 /**
  * Vitops — Carousel element (Bricks Builder).
  *
- * Renders the <wc-carousel> Lit component (src/web-components/WCCarousel.ts): an
- * infinite-loop carousel that progressively enhances the CSS-only `.carousel`. Each
- * direct child is a slide. Without JS the `.carousel` classes still yield a working
- * (non-looping) scroll-snap carousel, so the builder canvas stays functional.
+ * Renders the <wc-carousel> Lit component (src/web-components/WCCarousel.ts) around a
+ * `.carousel__track` scroll container. Each direct child of the element is a slide.
+ *
+ * Without JS the `.carousel` classes still yield a working scroll-snap carousel with a
+ * visible scrollbar, a "scroll for more" hint and — in Chromium — native prev/next
+ * buttons and dot navigation, so the builder canvas stays functional. Where those
+ * pseudo-elements are missing (Firefox, older Safari) the component builds real
+ * buttons and dots styled to match.
  *
  * The `.carousel` base rides on the built-in "CSS classes" setting (defaulted below) so
  * it applies in the canvas and the frontend. Add modifier classes there:
- * `carousel--scroll-buttons`, `carousel--scroll-markers`, `carousel--auto-pages`.
+ * `carousel--scroll-buttons`, `carousel--scroll-markers`, `carousel--auto-pages`,
+ * `carousel--inert`, `carousel--force-stop`, `carousel--no-scrollbar`,
+ * `carousel--markers-below`.
+ *
+ * Note the slide track here is a <div>, not a <ul>: Bricks children are blocks, so the
+ * list semantics the Astro component emits are not available on this platform. The CSS
+ * targets `> *`, so everything else is identical.
  *
  * Owned by the framework repo (vitops: bricks/elements/); copied into the theme's
  * dist/bricks/ on build — do not hand-edit in the theme.
@@ -41,7 +51,14 @@ class Vitops_Element_Carousel extends \Bricks\Element {
 			'label'       => esc_html__( 'Autoplay interval (ms)', 'bricks' ),
 			'type'        => 'number',
 			'placeholder' => '0',
-			'description' => esc_html__( 'Milliseconds between slides. Leave empty / 0 to disable.', 'bricks' ),
+			'description' => esc_html__( 'Milliseconds between slides. Leave empty / 0 to disable. Autoplay implies looping.', 'bricks' ),
+		);
+
+		$this->controls['loop'] = array(
+			'tab'         => 'content',
+			'label'       => esc_html__( 'Loop', 'bricks' ),
+			'type'        => 'checkbox',
+			'description' => esc_html__( 'Clone the slides at both ends for a seamless infinite strip. Off by default: it triples the markup and duplicates every image.', 'bricks' ),
 		);
 
 		$this->controls['label'] = array(
@@ -50,14 +67,30 @@ class Vitops_Element_Carousel extends \Bricks\Element {
 			'type'  => 'text',
 		);
 
+		$this->controls['aspect'] = array(
+			'tab'         => 'content',
+			'label'       => esc_html__( 'Slide media aspect ratio', 'bricks' ),
+			'type'        => 'text',
+			'placeholder' => '16 / 9',
+			'description' => esc_html__( 'Sets --carousel-slide-aspect, the ratio each slide\'s media box takes. Keeps slide heights equal whatever the image.', 'bricks' ),
+		);
+
+		$this->controls['hint'] = array(
+			'tab'         => 'content',
+			'label'       => esc_html__( 'Scroll hint', 'bricks' ),
+			'type'        => 'text',
+			'placeholder' => 'Scroll for more',
+			'description' => esc_html__( 'Shown beside the strip and dimmed once the visitor scrolls. Clear to omit it.', 'bricks' ),
+		);
+
 		$this->controls['modifiersInfo'] = array(
 			'tab'     => 'content',
 			'type'    => 'info',
-			'content' => esc_html__( 'Add modifier classes in "CSS classes": carousel--scroll-buttons, carousel--scroll-markers, carousel--auto-pages. Each direct child is a slide.', 'bricks' ),
+			'content' => esc_html__( 'Add modifier classes in "CSS classes": carousel--scroll-buttons, carousel--scroll-markers, carousel--auto-pages, carousel--inert, carousel--force-stop, carousel--no-scrollbar, carousel--markers-below. Each direct child is a slide.', 'bricks' ),
 		);
 
 		// Base carousel class defaulted onto the built-in "CSS classes" setting.
-		$this->controls['_cssClasses']['default'] = 'carousel';
+		$this->controls['_cssClasses']['default'] = 'carousel carousel--scroll-buttons carousel--scroll-markers';
 	}
 
 	// Seed three empty slides — the author fills each.
@@ -72,18 +105,31 @@ class Vitops_Element_Carousel extends \Bricks\Element {
 	public function render() {
 		$s     = $this->settings;
 		$attrs = array();
+		$style = '';
 
 		if ( isset( $s['autoplay'] ) && '' !== $s['autoplay'] && (int) $s['autoplay'] > 0 ) {
 			$attrs[] = 'autoplay="' . esc_attr( $s['autoplay'] ) . '"';
 		}
+		if ( ! empty( $s['loop'] ) ) {
+			$attrs[] = 'loop';
+		}
 		if ( ! empty( $s['label'] ) ) {
 			$attrs[] = 'aria-label="' . esc_attr( $s['label'] ) . '"';
 		}
+		if ( ! empty( $s['aspect'] ) ) {
+			$style = ' style="--carousel-slide-aspect:' . esc_attr( $s['aspect'] ) . '"';
+		}
 
 		$attr_str = implode( ' ', $attrs );
+		$hint     = isset( $s['hint'] ) ? $s['hint'] : esc_html__( 'Scroll for more', 'bricks' );
 
-		echo "<wc-carousel {$attr_str} {$this->render_attributes( '_root' )}>";
+		echo "<wc-carousel {$attr_str} {$this->render_attributes( '_root' )}{$style}>";
+		echo '<div class="carousel__track" tabindex="0">';
 		echo \Bricks\Frontend::render_children( $this );
+		echo '</div>';
+		if ( '' !== $hint ) {
+			echo '<p class="carousel__hint font-footnote" aria-hidden="true">' . esc_html( $hint ) . '</p>';
+		}
 		echo '</wc-carousel>';
 	}
 }

package/assets/css/global.css

@@ -26,6 +26,30 @@
   box-sizing: border-box;
 }
 
+/* Media never overflows its container. `:where()` so it carries zero specificity
+   and this file's layer (`vitops.base`) so it loses to everything, including a
+   consumer's unlayered rule.
+
+   Deliberately NOT the classic `img { display: block }` half of this reset. That
+   is the part that breaks things here: inline images in prose lose baseline
+   alignment, `patterns/icon.css`'s `.icon > img` and marquee logo runs break onto
+   their own lines, and `layout.css`'s
+   `.rhythm > :where(p, h1…h6, ul, ol) + :where(figure, img, picture, video)`
+   rules start spacing images that were previously inline. Every framework pattern
+   that wants a block image already declares it (media.css, subgrid.css,
+   carousel.css), which is the right place for it.
+
+   `svg` is excluded from `block-size: auto` because `patterns/svg.css` ships a
+   bare `svg` rule and SVGs commonly size from presentation attributes;
+   `max-inline-size` alone is safe there. */
+:where(img, svg, video, canvas, iframe, embed, object) {
+  max-inline-size: 100%;
+}
+
+:where(img, video) {
+  block-size: auto;
+}
+
 /* Drop the UA's 8px body margin. The framework owns page gutters via `.centered`
    (--gutter), so the UA default just offsets every full-bleed surface — sticky
    headers and `bg-*` bands end up inset by 8px with a sliver of canvas showing