@getvitops/core 2.1.0 → 4.0.0

package/css/patterns/drawer.css

@@ -21,24 +21,30 @@
   max-block-size: none;
 
   &::backdrop {
-    backdrop-filter: blur(4px);
+    backdrop-filter: var(--scrim-filter, blur(4px));
   }
 
   /**
-   * Modeless — a panel you work *alongside* rather than through. Drops the
-   * scrim so the page behind stays legible, which is the whole point for a
-   * live editor or an inspector: you're watching what your edits do.
+   * Each edge states WHERE IT STARTS in the animation system's own vocabulary
+   * (`--translate-<axis>-from`) instead of owning a keyframe. Add `.transition`
+   * and the top-layer driver in animation.css animates it — both ways.
    *
-   * Pair with `popover="manual"`. An `auto` popover light-dismisses on the
-   * first click outside — i.e. exactly the interaction a modeless panel exists
-   * to allow — and `manual` also drops Esc, so give it an explicit close
-   * control (and wire Esc yourself if the panel warrants it).
+   * This replaced four `@keyframes drawer-slide-in-*` driven by `animation:`,
+   * which only ever played on OPEN: the drawer's close was instant, while
+   * sitenav's transition-based copy of the same idea animated both ways.
+   *
+   * The var is set here rather than asking authors for a `.slide-*` effect
+   * class, because both would trip them up: the effect names read backwards for
+   * an edge panel (a LEFT drawer starts off-screen left and travels right, i.e.
+   * `.slide-right`), and `--slide-distance` defaults to 2rem where a drawer
+   * needs the full 100%. An explicit effect class still overrides this.
+   *
+   * EVERY edge states BOTH axes. The unset axis does not inherit a sensible
+   * zero — it inherits whatever the bare `.drawer` default left there, and the
+   * default is the left edge's `-100%`. Setting only `--translate-y-from` on
+   * `.drawer--bottom` therefore produced `translate: -100% 100%` and the panel
+   * flew in diagonally from the bottom-left corner.
    */
-  &.drawer--modeless::backdrop {
-    background: none;
-    backdrop-filter: none;
-  }
-
   &,
   &.drawer--left {
     inset-block: 0;
@@ -46,11 +52,8 @@
     block-size: 100dvh;
     inline-size: min(100dvi, var(--drawer-max-inline-size, 280px));
     border-radius: 0;
-
-    &[open],
-    &:popover-open {
-      animation: drawer-slide-in-left 0.3s ease;
-    }
+    --translate-x-from: -100%;
+    --translate-y-from: 0;
   }
 
   &.drawer--right {
@@ -58,22 +61,16 @@
     inset-inline-end: 0;
     inset-inline-start: auto;
     inline-size: min(100dvi, var(--drawer-max-inline-size, 280px));
-
-    &[open],
-    &:popover-open {
-      animation: drawer-slide-in-right 0.3s ease;
-    }
+    --translate-x-from: 100%;
+    --translate-y-from: 0;
   }
 
   &.drawer--top {
     inset-block-start: 0;
     inset-inline: 0;
     block-size: min(100dvb, var(--drawer-max-block-size, 100dvb));
-
-    &[open],
-    &:popover-open {
-      animation: drawer-slide-in-top 0.3s ease;
-    }
+    --translate-x-from: 0;
+    --translate-y-from: -100%;
   }
 
   &.drawer--bottom {
@@ -81,43 +78,7 @@
     inset-block-start: auto;
     inset-inline: 0;
     block-size: min(100dvb, var(--drawer-max-block-size, 100dvb));
-
-    &[open],
-    &:popover-open {
-      animation: drawer-slide-in-bottom 0.3s ease;
-    }
-  }
-}
-
-@keyframes drawer-slide-in-left {
-  from {
-    translate: -100% 0;
-  }
-  to {
-    translate: 0 0;
-  }
-}
-@keyframes drawer-slide-in-right {
-  from {
-    translate: 100% 0;
-  }
-  to {
-    translate: 0 0;
-  }
-}
-@keyframes drawer-slide-in-top {
-  from {
-    translate: 0 -100%;
-  }
-  to {
-    translate: 0 0;
-  }
-}
-@keyframes drawer-slide-in-bottom {
-  from {
-    translate: 0 100%;
-  }
-  to {
-    translate: 0 0;
+    --translate-x-from: 0;
+    --translate-y-from: 100%;
   }
 }

package/css/patterns/dropdown.css

@@ -19,7 +19,19 @@
       opacity 0.2s ease,
       translate 0.2s ease,
       visibility 0.2s allow-discrete;
+    /* `position: absolute`, anchored to the `position: relative` host above.
+       This is the whole reason a hover dropdown ever worked or didn't: a closed
+       popover is NOT in the top layer, but it keeps the UA's
+       `[popover] { position: fixed }`. Resetting only `inset` left it fixed to
+       the VIEWPORT at whatever static position it resolved to — measured 3300px
+       below its own trigger and off-screen, so the panel faithfully faded in
+       somewhere nobody was looking, which reads exactly like "hover does
+       nothing". Anchoring it puts it under the trigger and makes it follow on
+       scroll. */
+    position: absolute;
     inset: auto;
+    inset-block-start: 100%;
+    inset-inline-start: 0;
     margin: 0;
   }
 
@@ -39,7 +51,9 @@
     padding-block-start: var(--dropdown-gap, 0.5rem);
   }
 
+  /* Was `!important`, to beat popover.css's then plain-specificity ::backdrop.
+     That rule is `:where()` (0,0,0) now, so ordinary specificity is enough. */
   > [popover]::backdrop {
-    background: transparent !important;
+    background: transparent;
   }
 }

package/css/patterns/lightbox.css

@@ -52,9 +52,9 @@ dialog.lightbox-dialog {
   display: grid;
   place-items: center;
 
-  &::backdrop {
-    background: transparent;
-  }
+  /* No scrim. Stated through popover.css's token rather than overriding its
+     ::backdrop rule, so it keeps the shared fade timing. */
+  --scrim: transparent;
 
   &[open] {
     display: grid;

package/css/patterns/marquee.css

@@ -1,21 +1,47 @@
 /**
  * Marquee — CSS-only infinite scrolling row/column migrated from old-css-lib.
- * Duplicate the .marquee__content for a seamless loop. Pauses on hover with the
- * --pause-hover modifier; reverses / goes vertical via modifiers.
+ *
+ *   <div class="marquee marquee--pause-hover">
+ *     <div class="marquee__content"><span class="marquee__item">…</span></div>
+ *     <div class="marquee__content" aria-hidden="true">…the same items…</div>
+ *   </div>
+ *
+ * TWO `.marquee__content` blocks, not one. Each is `min-inline-size: 100%` and the
+ * keyframe travels exactly its own width, so the second copy is what occupies the
+ * space the first vacates. With a single copy the track scrolls off and leaves
+ * blank space — which reads as "the marquee isn't working" rather than as a
+ * missing duplicate.
+ *
+ * Spacing is `--marquee-gap`, and it has to be applied in BOTH places: between
+ * items inside a copy, and between the two copies. The keyframe then travels
+ * `100% + gap`, because the seam between copies is one more gap that has to be
+ * consumed for the loop to be seamless — translate by a bare `-100%` and the
+ * items visibly bunch up once per revolution.
  */
 
 .marquee {
   --_marquee-direction: var(--marquee-direction, normal);
 
+  /* `<wc-marquee>` overrides this to `auto`, releasing the 100% floor. */
+  --_marquee-min: 100%;
+
   display: flex;
+  gap: var(--marquee-gap, 1rem);
   overflow: hidden;
   user-select: none;
   mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
 
   .marquee__content {
     display: flex;
+    gap: var(--marquee-gap, 1rem);
     flex-shrink: 0;
-    min-inline-size: 100%;
+    /* 100% pads a short copy out to the track width, which puts the leftover
+       space at the end of every copy and makes the seam gap wider than the item
+       gaps. `<wc-marquee>` sets `--_marquee-min: auto` and clones enough copies to
+       cover the track, so the copy can be its own width and every gap matches.
+       Without the element this stays 100% — the CSS-only loop still works, it
+       just needs the author to duplicate the content. */
+    min-inline-size: var(--_marquee-min, 100%);
     animation: marquee-scroll var(--marquee-duration, 20s) linear infinite;
     animation-direction: var(--_marquee-direction);
   }
@@ -54,7 +80,9 @@
     translate: 0 0;
   }
   to {
-    translate: -100% 0;
+    /* One copy + one gap. `--_marquee-distance` is the measured px value when
+       the element is present; the percentage is the CSS-only equivalent. */
+    translate: calc(-1 * var(--_marquee-distance, calc(100% + var(--marquee-gap, 1rem)))) 0;
   }
 }
 
@@ -63,6 +91,6 @@
     translate: 0 0;
   }
   to {
-    translate: 0 -100%;
+    translate: 0 calc(-1 * var(--_marquee-distance, calc(100% + var(--marquee-gap, 1rem))));
   }
 }

package/css/patterns/nav.css

@@ -1,8 +1,18 @@
 /**
- * Nav — base / navbar / drawer / collapse navigation presentations migrated
- * from old-css-lib. CSS shell: drawer + submenu use the Popover API / <details>
- * with @starting-style transitions (polyfilled). The open/close toggle wiring
- * arrives with the Lit nav component; the CSS degrades to plain links without it.
+ * Nav — LEGACY. Base / drawer / collapse navigation presentations migrated from
+ * old-css-lib, superseded by the three patterns below. Kept because it ships in
+ * a published major; removal is its own breaking change.
+ *
+ * This header used to say "the open/close toggle wiring arrives with the Lit nav
+ * component". No such component was ever written, and none is planned — the
+ * house pattern is native (`popovertarget` + `[popover]`, `<details>`), which
+ * needs no JS at all beyond the Popover polyfill.
+ *
+ * Which one you actually want:
+ *   · `patterns/navbar.css`  — a horizontal row of links, with alignment.
+ *   · `patterns/sitenav.css` — navbar at width ⇄ toggle + drawer below it.
+ *   · `patterns/navshell.css` — a nav ASIDE beside main content, collapsing to a
+ *                               toggle + drawer. Nestable (site nav + on-page nav).
  */
 
 nav:has(> .nav-items) {
@@ -133,48 +143,20 @@ nav:has(> .nav-items) {
   width: 100%;
   background: var(--color-bg-surface);
   color: var(--color-text-surface);
-  opacity: 0;
-  translate: -100%;
-  transition-timing-function: var(--interact-easing, ease);
-  transition:
-    opacity 0.4s,
-    translate 0.4s,
-    overlay 0.4s allow-discrete,
-    display 0.4s allow-discrete;
+
+  /* Entry direction only. The transition, the `@starting-style` and the scrim
+     used to be restated here in full; they now come from the top-layer driver in
+     animation.css and the single `::backdrop` in popover.css. Add an effect
+     class to change the motion (`class="drawer-menu open-fade-in"`).
+
+     Timing moved with them: this was a hand-set 0.4s / 0.7s pair and is now the
+     framework's `--animation-duration` + `--custom-ease-out`, like every other
+     transition in the system. */
+  --translate-x-from: -100%;
 
   &[open],
   &:popover-open {
     display: flex;
-    opacity: 1;
-    translate: 0%;
-  }
-
-  @starting-style {
-    &[open],
-    &:popover-open {
-      opacity: 0;
-      translate: -100%;
-    }
-  }
-
-  &::backdrop {
-    background-color: transparent;
-    transition:
-      display 0.7s allow-discrete,
-      overlay 0.7s allow-discrete,
-      background-color 0.7s;
-  }
-
-  &[open]::backdrop,
-  &:popover-open::backdrop {
-    background-color: rgb(0 0 0 / 25%);
-  }
-
-  @starting-style {
-    &[open]::backdrop,
-    &:popover-open::backdrop {
-      background-color: transparent;
-    }
   }
 }
 
@@ -193,43 +175,9 @@ nav:has(> .nav-items) {
   overflow-y: auto;
 }
 
-/* ── Navbar presentation ──────────────────────────────────────────────────── */
-.navbar {
-  display: flex;
-  align-items: center;
-  gap: 2rem;
-
-  nav {
-    flex: 1;
-    flex-direction: row;
-  }
-
-  .nav-items {
-    flex: 1;
-    flex-direction: row;
-    gap: 2.25rem;
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-
-  .nav-actions {
-    flex-direction: row;
-    gap: 2.25rem;
-    border-top: none;
-    padding-top: 0;
-  }
-
-  .nav-header {
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-}
-
-.navbar-sticky {
-  position: sticky;
-  top: 0;
-  z-index: var(--z-tier-sticky);
-}
+/* Navbar presentation moved to patterns/navbar.css, where it is a primitive
+   rather than one half of this file's drawer⇄navbar pair. `.navbar-sticky`
+   is aliased there so existing markup keeps working. */
 
 .nav-split {
   margin-block-start: auto;

package/css/patterns/navbar.css

@@ -0,0 +1,86 @@
+/**
+ * Navbar — a horizontal row of links, with alignment.
+ *
+ *   <nav class="navbar navbar--end">
+ *     <a class="link" href="/guides">Guides</a>
+ *     <a class="link" href="/reference">Reference</a>
+ *   </nav>
+ *
+ * Extracted from patterns/nav.css, where `.navbar` already lived but only as the
+ * horizontal half of that file's drawer⇄navbar pair — it could not be used on
+ * its own, and it had no way to say where the links should sit. It is a
+ * primitive now, so `sitenav` (and anything else that needs a link row at width)
+ * composes it instead of restating `display: flex` and a gap.
+ *
+ * Deliberately NOT a `.cluster`: a cluster wraps and is content-agnostic; a
+ * navbar is a single row of navigation that stays a row, and carries the
+ * alignment vocabulary a nav actually needs.
+ */
+.navbar {
+  display: flex;
+  align-items: center;
+  gap: var(--navbar-gap, 2rem);
+
+  /* Links stay on one line — a navbar that wraps mid-row reads as broken chrome.
+     Above its breakpoint `sitenav` is what decides there is room; below it, the
+     drawer is the answer, not a wrapped bar. */
+  flex-wrap: nowrap;
+}
+
+/* ── Alignment. `--start` is the default and exists so the intent can be stated
+   rather than inferred from its absence. ── */
+.navbar--start {
+  justify-content: flex-start;
+}
+.navbar--center {
+  justify-content: center;
+}
+.navbar--end {
+  justify-content: flex-end;
+}
+
+/**
+ * Push everything after this element to the far edge — the usual "brand on the
+ * left, links on the right" split, without a wrapper element per side.
+ */
+.navbar__spacer {
+  margin-inline-start: auto;
+}
+
+.navbar--sticky,
+/* The pre-extraction spelling. Kept so an existing consumer's markup keeps
+   working; prefer `.navbar--sticky`. */
+.navbar-sticky {
+  position: sticky;
+  inset-block-start: var(--navbar-sticky-offset, 0);
+  z-index: var(--z-tier-sticky);
+}
+
+/* ── Legacy composition: nav.css's `.nav-*` parts inside a navbar. Kept with the
+   pattern they belong to so nav.css can be retired as one piece. ── */
+.navbar {
+  nav {
+    flex: 1;
+    flex-direction: row;
+  }
+
+  .nav-items {
+    flex: 1;
+    flex-direction: row;
+    gap: 2.25rem;
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+
+  .nav-actions {
+    flex-direction: row;
+    gap: 2.25rem;
+    border-top: none;
+    padding-top: 0;
+  }
+
+  .nav-header {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+}