@getvitops/generator 5.0.0 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,368 @@
 # @getvitops/generator
 
+## 7.0.0
+
+### Major Changes
+
+- aad43b7: A gallery/lightbox that is a fully working modal lightbox with **zero JavaScript**, plus
+  `ImageMetadata` support in `<Carousel />`.
+
+  Only `@getvitops/core`, `generator` and `astro` change here. This changeset makes **no
+  consumer-facing change** to `utils`, `cli` or `vite` — they still ship in this release because
+  the six share one version, but from a different changeset (`localbusiness-schema.md`) that
+  touches `utils` and `generator` for an unrelated reason.
+
+  **Breaking — `css`/`bricks`/`tailwind` (all formats):** the `.lightbox` thumbnail grid is now
+  `.gallery`, so it composes with the dialog it opens (`.lightbox-dialog`, unchanged) rather than
+  sharing its name. `vitops lint --fix` cannot cover this: `movedTokens()` renames colour token
+  names only, and there is no class-rename mechanism in `@getvitops/cli`. Migrate by hand:
+
+  | Old                | New               |
+  | ------------------ | ----------------- |
+  | `.lightbox`        | `.gallery`        |
+  | `.lightbox__item`  | `.gallery__item`  |
+  | `.lightbox__thumb` | `.gallery__thumb` |
+
+  `.lightbox-dialog` and its `__content` / `__image` / `__close` / `__nav` / `__nav-button` /
+  `__caption` parts are unchanged.
+
+  **Added — `css`/`bricks`/`tailwind` (all formats):** `patterns/gallery.css` — the `.gallery` grid,
+  now on the token cascade (`--br-gallery` etc.) it only half-had before.
+
+  **Added — `wc`:** `<wc-gallery>` (`@getvitops/core/elements`). Wraps a `.gallery` grid of
+  `command="show-modal"` triggers and the `.lightbox-dialog`s they open. With no JS, each trigger is
+  a real Invoker Commands button for its own dialog — open and close both work. `<wc-gallery>` adds
+  what the fallback deliberately cannot contain: prev/next, arrow keys, swipe (horizontal to step,
+  vertical to dismiss), an announced image counter, neighbour preload, and a thumbnail → full-image
+  `document.startViewTransition` morph where supported. Prev/next can't exist in the fallback — a
+  second `show-modal` invoker inside an already-open dialog stacks a second modal rather than
+  replacing the first — so it is generated by the element, never authored, the same rule
+  `<wc-tree>`'s search field follows.
+
+  **Added — `astro`:** `<Gallery />` (`@getvitops/astro/components/Gallery.astro`) — emits a
+  `.gallery` grid plus one `.lightbox-dialog` per image and its own `<wc-gallery>`; do not wrap it in
+  one. Images take `string | ImageMetadata`, rendered through a new internal `<ResponsiveImage />`
+  helper: a plain string renders the same raw `<img>` every component here used before, unchanged;
+  an `astro:assets` import renders through `<Picture />` for AVIF/WebP derivatives.
+
+  **Changed — `astro`:** `<Carousel />`'s `CarouselSlide.src` now also accepts `ImageMetadata`,
+  through the same `<ResponsiveImage />` helper, plus a new `formats` prop. Every existing
+  string-`src` call site renders byte-identical markup — purely additive.
+
+  **Added — `wc`:** the Invoker Commands API (`<button command commandfor>`) polyfill
+  (`invokers-polyfill`, feature-detected via `@getvitops/core/polyfills`) — resolves the TODO
+  `polyfills.ts` carried since 4.0. `<wc-gallery>`'s fallback and `<Drawer />` (which already emitted
+  `command="show-modal"` unconditionally) both now get real cross-browser coverage rather than
+  depending on it being "too new to rely on yet." Fetched only in an engine that doesn't support the
+  API natively, so a current browser downloads none of it.
+
+  **Migration:** rename `.lightbox` → `.gallery` and `.lightbox__item`/`.lightbox__thumb` →
+  `.gallery__item`/`.gallery__thumb` wherever authored (see table above); everything else is
+  additive. Consumers using the CSS pattern with no JS need no other change — the fallback markup is
+  unchanged in shape, only the class names moved.
+
+- eb9ac79: `<wc-tree>` gains WAI-ARIA tree semantics and roving-tabindex keyboard navigation, and the
+  keyboard-navigation code behind it lands as shared utilities the next roving-tabindex component
+  (Dropdown, Tabs, Combobox) can reuse.
+
+  **Breaking — `wc` (`@getvitops/core`).** On upgrade, `<wc-tree>` now unwraps every branch's
+  `<details>`/`<summary>` into a plain, JS-owned structure (`role="tree"` on the root,
+  `role="treeitem"` on every item, `role="group"` on every nested list, a roving `tabindex`, and
+  `aria-expanded` mirroring expand state). This is a deliberate, named exception to the framework's
+  normal "parse the fallback and augment it in place" rule — the alternative, an ARIA-attribute
+  overlay left on top of the native `<details>`/`<summary>` structure, was tried first and rejected
+  because `<summary>` stays focusable regardless, which leaves a permanent duplicate `role="button"`
+  node inside every branch. The no-JS fallback is completely unaffected: it is still native nested
+  `<details>`, exactly as `<Tree />` has always rendered it, and `enhance={false}` still gets the
+  bare fragment with no `<wc-tree>` at all.
+
+  Two concrete things break for a consumer that reached into the enhanced DOM directly:
+  - A script holding a reference to the original `<details>`/`<summary>` nodes — including one
+    captured via `getElementById` before upgrade, since the flat markup shape's `<details>` carries
+    the item's `id` — loses that reference once JS runs. `tree-toggle` (mirroring the existing
+    `tree-filter` custom event) is the replacement surface for reacting to expand/collapse.
+  - `<wc-tree>` becomes a single tab stop. Tabbing through every row in a large tree no longer
+    works; arrow keys replace it (Up/Down between visible nodes, Right/Left to open/close a branch or
+    step in/out, Home/End, type-ahead), matching the WAI-ARIA tree pattern. Left/Right flip under
+    `direction: rtl`.
+
+  **Fixed — `wc` (`@getvitops/core`).** `<wc-carousel>`'s dot-nav arrow keys now follow writing
+  direction. In an RTL document, `ArrowLeft` moves the roving tabindex to the visually-left dot and
+  `ArrowRight` to the visually-right one — previously both were index-based and moved the focus ring
+  against the direction the dots are actually drawn in. `ArrowUp`/`ArrowDown` are unchanged and never
+  flip (`direction` is a horizontal-axis property). The prev/next buttons are unchanged too — they
+  still step to the previous/next slide in both directions, and only their glyph flips. Also fixed:
+  two arrow presses faster than the dot nav's smooth scroll can settle now reliably advance two dots
+  instead of sometimes landing on the same one twice.
+
+  **Changed — `css`/`bricks`/`tailwind` (all formats).** `patterns/tree.css` gains a `.tree__summary`
+  row class (the enhanced-state replacement for `<summary>`), a hand-rolled expand/collapse animation
+  replacing the native `<details>` one that no longer applies post-upgrade, and a focus ring scoped to
+  the row rather than the whole item (the roving tabindex now lands on `.tree__item`, whose box wraps
+  its entire subtree once expanded). Visually equivalent to before; no consumer class rename needed.
+
+  **Added — `wc` (`@getvitops/core`, internal).** `web-components/utils/keynav.ts` (generic
+  key-decoding + type-ahead primitives) and `utils/tree-nav.ts` (tree-specific navigation decisions)
+  are new pure modules, and `utils/RovingTabindex.ts` is a new shared `ReactiveController` — modelled
+  on the existing `DragController` — that owns roving-tabindex bookkeeping for any keyboard-navigable
+  group. `<wc-carousel>`'s dot nav now runs on it too, and `<wc-gallery>` reuses `keynav.ts`'s
+  `stepIndex`. None of the three are in `@getvitops/core`'s public `exports` map. Only
+  `RovingTabindex` is re-exported from `web-components/index.ts`, the same way `DragController`
+  already is, not as new published API; `keynav.ts` and `tree-nav.ts` stay internal modules imported
+  directly by path (as `RovingTabindex.ts` and `gallery.ts` already do) since neither is consumed
+  outside the components that already import them directly.
+
+  **This changeset makes no consumer-facing change in `@getvitops/generator` beyond documentation
+  output.** `tiers.ts`'s `tree` entry gains `tree__summary` to its class list and describes the new
+  keyboard navigation and ARIA semantics — this changes what `vitops docs components` /
+  `concepts/components.md` render for the `tree` pattern, nothing else. `generator`'s real change in
+  this release is unrelated to `wc-tree` — see `localbusiness-schema.md`.
+
+### Minor Changes
+
+- c0c092b: `vitops search` now works from a `gcloud` login, and attributes API usage per site.
+
+  **Being logged in is enough.** With no `VITOPS_GOOGLE_*` set, an Application Default Credentials
+  login is used — the credential `gcloud auth application-default login` already wrote. It needs the
+  Search Console scopes, which are not in the default ADC set:
+
+  ```
+  gcloud auth application-default login \
+    --scopes=openid,https://www.googleapis.com/auth/siteverification,\
+  https://www.googleapis.com/auth/webmasters,https://www.googleapis.com/auth/cloud-platform
+  ```
+
+  Explicit `VITOPS_GOOGLE_*` vars still win. Ambient credentials are only a fallback, because a stale
+  local login silently overriding a deliberate CI secret is the worst available precedence.
+
+  Beyond convenience, this removes a documented footgun: an OAuth client you create yourself sits in
+  _Testing_ publishing status, where Google **expires the refresh token after 7 days**. The Cloud SDK
+  client is published, so an ADC credential doesn't rot between onboarding runs.
+
+  **New: `site.google.project`** — the Google Cloud project API usage is attributed to, sent as
+  `x-goog-user-project`. One project per site is what keeps each site's usage and billing separate,
+  and it is the same field Maps or anything else will read later, rather than a `quotaProject` here
+  and a `mapsProject` there.
+
+  It is **required for a user credential and wrong for a service account**, which is why it is not
+  sent unconditionally. A user credential authenticates through a shared OAuth client that owns no
+  project, so Google refuses the call outright — measured: `403 "requires a quota project, which is
+not set by default"`. A service account already belongs to a project, and pointing it at a
+  different one would newly require `serviceusage.services.use` there, turning a working CI
+  credential into a 403 for no benefit.
+
+  Using it needs both APIs (`searchconsole.googleapis.com`, `siteverification.googleapis.com`)
+  enabled on that project, and `serviceusage.services.use` for the identity — one grant per site,
+  which suits an agency administering many sites from one admin identity.
+
+  An ADC credential with no `site.google.project` is now **refused before any request is made**,
+  naming the file the credential came from and the project gcloud recorded with it:
+
+  ```
+  ✖ this Google credential comes from ~/.config/gcloud/application_default_credentials.json,
+    which authenticates through a shared OAuth client that owns no project — so it needs
+    "site.google.project" in site.json to say which project the API usage belongs to.
+    gcloud recorded "acme-web" as the quota project for that login, so that is probably the value.
+  ```
+
+  That is the mistake waiting for the _second_ site: the command gets copied from whatever
+  onboarded the first one, the field is left out, and Google's own answer names neither the config
+  field nor the credential.
+
+  **Fixed: an ADC file in `GOOGLE_APPLICATION_CREDENTIALS` no longer hard-exits.** That variable is
+  Google's own convention _and_ where gcloud writes ADC, so the same variable carries two kinds of
+  credential. Parsing an `authorized_user` file as a service account failed with `service account
+JSON is missing client_email or private_key` — while holding a credential the command already knew
+  how to use. It is now discriminated on `type`, the field Google's own libraries switch on.
+
+  **Also fixed — `search setup --dry` and `--check` are not offline.** The docs implied otherwise. The
+  state gather runs before the planner, so both read from Cloudflare and Google and both need
+  credentials. They still create and change nothing; `notify --dry` remains genuinely request-free.
+
+  New in `@getvitops/utils/indexing`: `parseAdcUser`, `adcQuotaProject`, `adcCredentialsPath` (pure,
+  so what is decidable is asserted without a filesystem), plus `googleHeaders` and the `GoogleAuth` /
+  `GoogleAuthLike` types. The seven exported Google request functions now take a token **or** a
+  `{ token, quotaProject }` — a bare string still works everywhere, so nothing needs changing.
+
+- 2b50f9e: Extract the LocalBusiness JSON-LD builder out of `<LocalBusiness />` into a reusable
+  `localBusinessGraph()`, and add the location fields listing platforms (GBP, Bing Places, Apple
+  Business Connect) actually need.
+
+  **Added — `@getvitops/utils`.** `localBusinessGraph(options)` (+ its `LocalBusinessGraphOptions`,
+  `OpeningHoursSpecification` and `SpecialHoursSpecification` types) is now exported from
+  `@getvitops/utils`, alongside the existing `organizationGraph`/`articleGraph`/`breadcrumbGraph`/
+  `faqGraph` builders — same module, same shape, usable anywhere a JSON-LD graph is built outside an
+  Astro component.
+
+  **Added — `authoring`/`config` (`@getvitops/generator`).** Four new `organization.locations.<slug>`
+  fields: `hoursSpecial` (dated deviations from the recurring `hours` — holiday hours, a one-off
+  closure), `photos` (`ImageRefSchema[]` → JSON-LD `image`), `sameAs` (this location's own listing
+  URLs, distinct from `organization.sameAs`, which is the company overall), and `listings` (external
+  listing ids keyed by platform — `google` | `bing` | `apple` — not consumed by the generator today;
+  recorded so a future listings-sync command has a stable id to match against).
+
+  **Changed — `astro`.** `<LocalBusiness />`'s `Props` type is now `LocalBusinessGraphOptions`
+  (re-exported, not redefined) rather than a local interface that had drifted from what the builder
+  actually accepted. No markup or prop-name change for an existing consumer.
+
+- a6a8b39: `radii.pill` / `--br-pill` is gone. `999px` is a shape, not a design decision, so it no longer
+  has a config-editable token of its own — it's now the `rounded-full` utility, named and valued
+  to match Tailwind's own class, alongside a new `rounded-none`.
+
+  **Breaking — `css`/`bricks` only** (the tailwind format never emitted `--br-pill`; Tailwind
+  already ships `rounded-full`/`rounded-none` natively and always has). A consumer who overrode
+  `--br-pill` directly, or set `radii.pill` in their own `design-system.json` expecting it to
+  reshape the switch track, the facet-list count or the badge-indicator bubble, has to migrate:
+  - The switch track, facet count and badge indicator each already had their own consumer hook
+    (`--br-switch-track`, `--br-count`, `--br-badge-indicator`) and now fall back straight to the
+    literal `999px` instead of chaining through `--br-pill`. Override the specific hook instead of
+    the removed shared one.
+  - `.badge` is unaffected — it already resolved to `999px` and still does, now via its own
+    override (`patterns.items.badge.overrides.br`) rather than a shared primitive.
+  - Anything that wants a fully round corner outside those three patterns should reach for
+    `class="rounded-full"` (or `rounded-none` to zero one out) rather than a `--br-*` variable.
+
+  This is **not** reachable by `vitops lint --fix` — its token-rename table is built from colour
+  role names, and there is no equivalent static table for a shape primitive going away — so this
+  entry is the migration.
+
+  `radii.circle` / `--br-circle` (50%) is untouched: `status`, the radio and the switch thumb all
+  depend on it, and Tailwind has no equivalent to defer to.
+
+- 7b391b3: Add `<wc-counter>` — animates a number from a start value to the value already in its fallback
+  text, on intersection. The stat/percentage figure in a media tile ("0 → 94%"), a KPI row, a
+  metrics band.
+
+  No consumer-facing change in this release outside `core`, `generator` and `astro` — `utils`,
+  `cli` and `vite` still ship in this release only because the six share one version.
+
+  **Added — `css`/`bricks`/`tailwind` (all formats):** `.counter` / `.counter__value` /
+  `.counter__presentation` (`patterns/counter.css`). A registered `--_n` custom property drives the
+  count via a plain CSS `@keyframes` animation — the interpolation and the easing curve are CSS's,
+  never duplicated in JS.
+
+  **Added — `wc` (`@getvitops/core`).** `<wc-counter>` parses the final value out of its own
+  `.counter__value` fallback text — never from a separate attribute, so the no-JS reading and the
+  animated reading can't disagree — and renders it back through `Intl.NumberFormat`, seeded from the
+  fallback text's own separators (a grouped `1,284` never animates through ungrouped intermediates).
+  `counter()` cannot do that part: no decimals, no locale grouping, which is the one thing here that
+  genuinely needs JavaScript.
+  - Triggers on intersection via a single shared `IntersectionObserver`, not on upgrade — a counter
+    below the fold that finished before the visitor scrolled to it would have done nothing.
+  - `prefers-reduced-motion: reduce` means don't animate at all, checked before the observer is even
+    created, with `patterns/counter.css`'s own reduced-motion query as a second belt.
+  - The accessible name stays the final value for the whole animation: `.counter__value` is toggled
+    to the framework's `.sr-only` utility while running, never hidden — `display: none`/`visibility:
+hidden` would pull it out of the accessible-name computation along with the visual hiding, and a
+    screen reader must never be read ~60 intermediate numbers. The animated text lives in a separate
+    `aria-hidden` presentation span it never reaches.
+  - `data-from` (default `0`), `data-duration` (ms, default `1200`), `data-easing` (`linear` |
+    `ease-in` | `ease-out` | `float-sine` | `float-bounce` — maps onto the real
+    `--custom-ease-*`/`--ease-float-*` tokens, so a curve edited in `animation.css` cannot drift out
+    of step with this element), `data-decimals` (inferred from the fallback text when absent).
+  - Never leaves an intermediate value on screen as the resting state: disconnecting mid-animation
+    restores the fallback immediately, and it was never mutated in the first place — only the
+    presentation span was ever written to.
+
+  **Added — `astro`.** `<Counter value="94%" />` emits its own `<wc-counter>` — do NOT wrap it in
+  one, same rule as `Gallery`/`Carousel`/`Tree`. `value` is the only source of the final figure;
+  there is no separate `to` prop, for the same one-source-of-truth reason the element itself parses
+  its fallback rather than taking a duplicate attribute. `enhance={false}` emits the bare fallback
+  for a page that cannot run `elements.js`.
+
+### Patch Changes
+
+- **Added — `utils`.** `itemListGraph()`, a pure schema.org `ItemList` JSON-LD builder — a sibling
+  of `breadcrumbGraph()`/`localBusinessGraph()`. Extracted from `@getvitops/astro`'s `<Carousel />`
+  so any consumer can build a valid `ItemList` (Google's "all-in-one page" carousel format:
+  `ListItem.item` carrying `@type`/`name`/`url`) for content that isn't one of the six Google
+  carousel rich-result types (`Article`/`Recipe`/`Movie`/`Course`/`Restaurant`/`Product`) — the
+  entity type is no longer constrained to that set.
+
+  **Changed — `astro`.** `<Carousel />`'s `CarouselItem['type']` now accepts any string, not just
+  the six carousel rich-result types — non-breaking, the union only widens. It's a thin wrapper
+  over `itemListGraph()` now; behaviour for existing callers is unchanged.
+
+  No consumer-facing change in this release outside `utils` and `astro` — `generator`, `cli` and
+  `vite` still ship in this release only because the six share one version.
+
+  **Fixed — `core` (`css`/`bricks`/`tailwind` build output, all formats).** The CSS and HTML
+  authored inside Lit's `css`/`html` tagged templates in `<wc-*>` component sources previously
+  survived JS minification verbatim — a JS minifier treats a template literal's cooked text as
+  opaque, so `elements.js` shipped ~690 lines of indented, unminified CSS (and the equivalent in
+  HTML) inside an otherwise-minified 886-line file. Two source-level build transforms now collapse
+  both before bundling: `postcss` + `postcss-lit` + `cssnano` for `css` templates, `minify-html-literals`
+  (`conservativeCollapse: true`, so whitespace between inline elements in light-DOM components never
+  collapses to zero) for `html` templates. `elements.js` drops from 886 lines / ~101 KB to 49 lines /
+  ~96 KB. A second build step deduplicates the 17 `@license` comment blocks (only 6 are textually
+  distinct) down to one verbatim copy of each — required by BSD-3/MIT/Apache-2.0's notice-retention
+  terms either way, just no longer repeated once per source file that carries it. No API change;
+  build-time only, and none of the added tooling (`postcss`, `postcss-lit`, `cssnano`,
+  `minify-html-literals`) is a runtime or published dependency.
+
+- Updated dependencies [c0c092b]
+- Updated dependencies
+- Updated dependencies [2b50f9e]
+  - @getvitops/utils@7.0.0
+
+## 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/animation.css

@@ -71,6 +71,15 @@
   animation-duration: var(--animation-duration-xslow);
 }
 
+/* The gallery/lightbox thumbnail → full-image morph (see patterns/lightbox.css)
+   needs a shorter duration than a whole-page navigation. Scoped to `*` because a
+   repo-wide `::view-transition-old/new` selector belongs at the engine layer, not
+   inside the one pattern partial that happens to use it first. */
+::view-transition-old(*),
+::view-transition-new(*) {
+  animation-duration: 0.3s;
+}
+
 /* ===========================================
  * Keyframes - Layout Stage (most expensive)
  * =========================================== */

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

package/assets/css/index.css

@@ -43,6 +43,7 @@
    panel surface navshell's desktop block has to undo. */
 @import './patterns/navshell.css';
 @import './patterns/notification.css';
+@import './patterns/gallery.css';
 @import './patterns/lightbox.css';
 @import './patterns/overlay.css';
 /* was forms.css */
@@ -69,6 +70,7 @@
 @import './patterns/text-effects.css';
 @import './patterns/svg.css';
 @import './patterns/marquee.css';
+@import './patterns/counter.css';
 @import './patterns/nav.css';
 @import './patterns/carousel.css';
 @import './patterns/copy.css';