@getvitops/generator 3.0.0 → 4.1.0

package/assets/css/patterns/sitenav.css

@@ -17,10 +17,32 @@
  * OR click (native `[open]` pins it). Top-level submenus drop below their item;
  * deeper (megamenu) submenus fly out to the inline-end side.
  *
- * `.sitenav__disclosure` is `display: contents` so the `<summary>` (caret) and the
- * submenu `<ul>` participate directly in the branch item's grid — that is what lets
- * the caret sit inline with the link while the submenu spans full width on its own
- * row. Native `[open]` toggling is unaffected by `display: contents`.
+ * The `<details>` is grid-placed at column 2 and the submenu `<ul>` is its SIBLING,
+ * a real grid child of the branch item — that is what lets the caret sit inline with
+ * the link while the submenu spans full width on its own row.
+ *
+ * ── TWO BRANCHES, NOT BASE-PLUS-OVERRIDE ──
+ *
+ * `@container` contributes ZERO specificity, so a rule inside the wide block competes
+ * at its bare selector weight. A bare `.sitenav--drawer-end .sitenav__panel` (0,2,0)
+ * therefore beat the wide block's `.sitenav__panel` (0,1,0) reset *in the wide state*:
+ * the promoted navbar shipped translated a full panel-width off-screen, and the
+ * accordion's `overflow: hidden` clipped away every third-level megamenu. Before the
+ * four per-breakpoint blocks were folded into one style query, those resets carried a
+ * `.sitenav--bp-*` class and won the tie on source order; folding them removed it.
+ *
+ * So the rule is: **a narrow-state rule that is MORE SPECIFIC than its wide-state
+ * counterpart lives inside `@container style(--_sitenav-wide: 0)`.** Rules at (0,1,0)
+ * — the panel's box, the lists, the links — stay unscoped, because that same work is
+ * what neutralises the UA `[popover]` sheet, which applies in BOTH states; scoping it
+ * would mean writing it twice. `src/css/state-branch.test.ts` asserts the invariant.
+ *
+ * Both branches read an INHERITED flag, so every part must live inside `.sitenav`,
+ * which declares it. Note the file mixes two unnamed query kinds that resolve against
+ * DIFFERENT containers: `style()` against the nearest ancestor ELEMENT (every element
+ * is a style container — no `container-type` needed, and it resolves for a panel
+ * promoted to the top layer), the `(min-width:)` queries below against `body`
+ * (layout.css). That asymmetry is why the flag has to be a custom property.
  *
  * Per-breakpoint depth caps come pre-resolved from PHP as item classes:
  *   `.sitenav__item--desktop-branch` — caret + submenu shown only ≥ breakpoint;
@@ -75,6 +97,19 @@
   inset-block: 0;
   inline-size: min(100dvw, var(--sitenav-drawer-size, 20rem));
   max-inline-size: 100dvw;
+
+  /* The UA `[popover]` sheet supplies `margin: auto` and `height: fit-content`, and
+     neither was being undone — so `inset-block: 0` bought nothing and the "drawer"
+     rendered as a content-height card floating in the vertical centre, while at
+     width the auto margins absorbed the free space of any stretched `.sitenav`.
+     `drawer.css` resets margin for exactly this reason; this panel doesn't compose
+     it. Both live in the base block because the UA sheet applies in BOTH states:
+     against `position: fixed` + `inset-block: 0` an auto block-size stretches to
+     the drawer's full height, and against the wide branch's `position: static` the
+     same declaration sizes the navbar to its content. */
+  margin: 0;
+  block-size: auto;
+
   padding: 1.5rem;
   padding-block-start: 3.5rem; /* clearance for the close button */
   background: var(--color-bg-surface);
@@ -106,30 +141,42 @@
   }
 }
 
-/* Slide from the chosen edge (default inline-end). */
-.sitenav--drawer-end .sitenav__panel {
-  inset-inline-end: 0;
-  inset-inline-start: auto;
-  translate: 100% 0;
-}
-.sitenav--drawer-start .sitenav__panel {
-  inset-inline-start: 0;
-  inset-inline-end: auto;
-  translate: -100% 0;
-}
-.sitenav__panel:popover-open {
-  opacity: 1;
-  translate: 0 0;
-}
-@starting-style {
-  .sitenav--drawer-end .sitenav__panel:popover-open {
-    opacity: 0;
+/* ── Drawer geometry + transition — NARROW ONLY ─────────────────────────────
+   Scoped rather than bare because these are (0,2,0)/(0,3,0) and would outrank the
+   wide block's (0,1,0) panel reset. `:popover-open` and the `@starting-style`
+   pair are one transition system with the edge modifiers, so they travel with
+   them: both are inert at width only by coincidence (the panel is always
+   displayed there, and their values happen to match the reset's), which is the
+   same shape of accident as the bug itself. ── */
+@container style(--_sitenav-wide: 0) {
+  /* Slide from the chosen edge (default inline-end). The insets also undo the UA
+     `[popover] { inset: 0 }`; the wide branch does that job with `inset: auto`. */
+  .sitenav--drawer-end .sitenav__panel {
+    inset-inline-end: 0;
+    inset-inline-start: auto;
     translate: 100% 0;
   }
-  .sitenav--drawer-start .sitenav__panel:popover-open {
-    opacity: 0;
+  .sitenav--drawer-start .sitenav__panel {
+    inset-inline-start: 0;
+    inset-inline-end: auto;
     translate: -100% 0;
   }
+
+  .sitenav__panel:popover-open {
+    opacity: 1;
+    translate: 0 0;
+  }
+
+  @starting-style {
+    .sitenav--drawer-end .sitenav__panel:popover-open {
+      opacity: 0;
+      translate: 100% 0;
+    }
+    .sitenav--drawer-start .sitenav__panel:popover-open {
+      opacity: 0;
+      translate: -100% 0;
+    }
+  }
 }
 
 /* ── Lists + links ─────────────────────────────────────────────────────────── */
@@ -167,31 +214,7 @@
   font-style: italic;
 }
 
-/* ── Branch item — mobile accordion ────────────────────────────────────────
-   The item is a grid: [link | caret] on row 1, the submenu spanning row 2. The
-   <details> holds only the caret <summary>; the submenu <ul> is its sibling and a
-   real grid child of the item. The row-2 track animates 0fr→1fr when the details is
-   open (the classic no-JS accordion, driven by `:has`), so the submenu pushes the
-   content below rather than overlaying it. */
-.sitenav__item--branch {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-template-rows: auto 0fr;
-  align-items: center;
-  column-gap: 0.5rem;
-  transition: grid-template-rows 0.25s ease;
-}
-
-.sitenav__item--branch > .split-link__link {
-  grid-column: 1;
-  grid-row: 1;
-}
-
-/* <details> is only the caret; keep its box out of the flow's height. */
-.sitenav__disclosure {
-  grid-column: 2;
-  grid-row: 1;
-}
+/* ── Branch item — the two rules both presentations share ──────────────────── */
 
 /* The <summary>. `.split-link__toggle` supplies the flush look, hover + focus, and
    the caret transition; only the disclosure-marker reset is added here. */
@@ -204,31 +227,68 @@
   }
 }
 
-.sitenav__item--branch > .sitenav__submenu {
-  grid-column: 1 / -1;
-  grid-row: 2;
-  /* Stretch to the row-2 track (not content-sized) so the 0fr collapsed state
-     actually clips to 0 — the item's own align-self must beat the grid's
-     `align-items: center`, or overflow:hidden has nothing to clip against. */
-  align-self: stretch;
-  min-block-size: 0;
-  overflow: hidden;
-  padding-inline-start: 1rem;
-}
-
-.sitenav__item--branch:has(> .sitenav__disclosure[open]) {
-  grid-template-rows: auto 1fr;
-}
-
-/* Caret flips while the disclosure is open (summary carries no aria-expanded). */
+/* Caret flips while the disclosure is open (summary carries no aria-expanded).
+   Unscoped: at width the same native `[open]` pins a dropdown, so the flip is
+   wanted in both states. */
 .sitenav__disclosure[open] > .sitenav__subtoggle .split-link__caret {
   rotate: 180deg;
 }
 
-/* Depth cap (mobile side): a desktop-only branch shows just its parent link. */
-.sitenav__item--desktop-branch > .sitenav__disclosure,
-.sitenav__item--desktop-branch > .sitenav__submenu {
-  display: none;
+/* ── Mobile accordion — NARROW ONLY ─────────────────────────────────────────
+   The item is a grid: [link | caret] on row 1, the submenu spanning row 2. The
+   <details> holds only the caret <summary>; the submenu <ul> is its sibling and a
+   real grid child of the item. The row-2 track animates 0fr→1fr when the details is
+   open (the classic no-JS accordion, driven by `:has`), so the submenu pushes the
+   content below rather than overlaying it.
+
+   Scoped because these selectors are (0,2,0)/(0,3,0). Most of what is in here is
+   inert at width anyway — grid placement on a flex item, `align-self` on an
+   absolutely positioned box, `min-block-size: 0` where `auto` already computes to
+   0 — but `overflow: hidden` and `padding-inline-start` are NOT, and leaking them
+   into the navbar is what clipped the megamenus. ── */
+@container style(--_sitenav-wide: 0) {
+  .sitenav__item--branch {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto 0fr;
+    align-items: center;
+    column-gap: 0.5rem;
+    transition: grid-template-rows 0.25s ease;
+  }
+
+  .sitenav__item--branch > .split-link__link {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  /* <details> is only the caret; keep its box out of the flow's height. */
+  .sitenav__disclosure {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .sitenav__item--branch > .sitenav__submenu {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    /* Stretch to the row-2 track (not content-sized) so the 0fr collapsed state
+       actually clips to 0 — the item's own align-self must beat the grid's
+       `align-items: center`, or overflow:hidden has nothing to clip against. */
+    align-self: stretch;
+    min-block-size: 0;
+    overflow: hidden;
+    padding-inline-start: 1rem;
+  }
+
+  .sitenav__item--branch:has(> .sitenav__disclosure[open]) {
+    grid-template-rows: auto 1fr;
+  }
+
+  /* Depth cap (mobile side): a desktop-only branch shows just its parent link.
+     Scoped, so the wide branch needs no counter-rule — it simply stops applying. */
+  .sitenav__item--desktop-branch > .sitenav__disclosure,
+  .sitenav__item--desktop-branch > .sitenav__submenu {
+    display: none;
+  }
 }
 /* ── Desktop promotion.
  *
@@ -310,8 +370,9 @@
     position: relative;
     display: flex;
     align-items: center;
-    grid-template-columns: none;
-    grid-template-rows: none;
+    /* Restated, not inherited: this used to leak in from the accordion rule, which
+       is now narrow-scoped. Without it the caret hugs the link at width. */
+    column-gap: 0.5rem;
   }
   .sitenav__submenu {
     position: absolute;
@@ -319,7 +380,6 @@
     inset-inline-start: 0;
     min-inline-size: 13rem;
     padding: 0.5rem;
-    overflow: visible;
     background: var(--color-bg-surface);
     color: var(--color-text-surface);
     border: var(--b-panel);
@@ -335,6 +395,12 @@
       translate 0.15s ease,
       visibility 0.15s allow-discrete;
   }
+  /* Third level (megamenu) flies out to the inline-end side. Its containing block
+     is the inner `.sitenav__item--branch` (position: relative, above), which sits
+     INSIDE the parent submenu — so nothing between the two may clip. The
+     accordion's `overflow: hidden` used to leak in here at (0,2,0) and beat this
+     branch's (0,1,0) reset, and every megamenu was invisible at width. It is now
+     scoped to `style(--_sitenav-wide: 0)` and cannot. */
   .sitenav__submenu .sitenav__item--branch > .sitenav__submenu {
     inset-block-start: 0;
     inset-inline-start: 100%;
@@ -348,12 +414,12 @@
     pointer-events: auto;
     translate: 0 0;
   }
-  /* depth caps flip at the breakpoint: desktop-only branches reveal their caret +
-     dropdown; mobile-only branches collapse to a plain link. */
-  .sitenav__item--desktop-branch > .sitenav__disclosure,
-  .sitenav__item--desktop-branch > .sitenav__submenu {
-    display: block;
-  }
+  /* Depth cap (desktop side): a mobile-only branch collapses to a plain link. Its
+     mirror — hiding a DESKTOP-only branch below the breakpoint — lives in the
+     narrow branch, so there is nothing to undo here. A `display: block`
+     counter-rule used to sit alongside this one and, at (0,2,0), beat the base
+     `.sitenav__submenu`'s `display: flex` (0,1,0) — costing every desktop-only
+     dropdown its column direction and gap. */
   .sitenav__item--mobile-branch > .sitenav__disclosure,
   .sitenav__item--mobile-branch > .sitenav__submenu {
     display: none;

package/assets/css/patterns/tree.css

@@ -3,9 +3,38 @@
  * Consumes the generated token cascade (src/css/generated/tokens.css).
  */
 
+/* An unregistered custom element is `display: inline`, and `<wc-tree>` wraps a
+   `<ul>` — a block child in an inline box, which forces an anonymous block and
+   leaves the element unable to take sizing or spacing. It must be block whether
+   or not `elements.js` ever loads, because the tag is in the SSR'd markup either
+   way. (Same gap exists on most other `wc-*` tags; see the note in
+   `src/js/elements.ts`.) */
+wc-tree {
+  display: block;
+}
+
 /* ── Tree — hierarchical view over nested lists / <details> ───────────────── */
 .tree {
   --_p: var(--p-tree, var(--p-tree-group, var(--p-default)));
+  /* Resolved once here so the indent and the `--lines` elbow that must align to
+     it cannot disagree. Read through `--tree-indent` rather than assigning it, so
+     a consumer setting `--tree-indent` on an ancestor still wins — assigning the
+     default directly to `--tree-indent` on `.tree` would out-specify the hook and
+     silently ignore it. */
+  --_indent: var(--tree-indent, clamp(0.75rem, 2.5vw, 1.5rem));
+
+  /* The toggle column. A branch spends this on its chevron before its label; a
+     leaf has no chevron, so without compensation a leaf label sits one whole
+     column to the INLINE-START of its branch siblings and nothing at a given
+     depth lines up. Measured: 24px of misalignment at every level.
+
+     Two vars rather than one because they answer different questions —
+     `--_node-indent` is how wide the toggle column is, `--_leaf-indent` is what a
+     row without a toggle owes to sit in the same label column. Anything that
+     needs to align to the label (the description, a future `.tree__actions`
+     offset) reads `--_leaf-indent` rather than re-deriving the sum. */
+  --_node-indent: var(--tree-icon-size, 1.25rem);
+  --_leaf-indent: calc(var(--_node-indent) + var(--tree-gap, 0.25rem));
 
   list-style: none;
   margin: 0;
@@ -15,14 +44,49 @@
     position: relative;
   }
 
-  .tree__item > .tree {
-    margin-inline-start: var(--tree-indent, 1.5rem);
-    padding-inline-start: var(--tree-indent, 1.5rem);
+  /* Nested list indent. Two shapes are supported: the item may BE the
+     `<details>`, or be an `<li>` wrapping one — the latter is what `<Tree />`
+     emits, because `<ul>`/`<li>` is what gives assistive tech list position and
+     depth. Keep both; the flat shape is the pattern's original contract.
+
+     Indent is ONE `--tree-indent` per level, not two. This used to set both
+     `margin-inline-start` and `padding-inline-start` to it, putting the guide
+     border between them and costing 2× per level — 3rem × 10 levels = 480px on
+     the config schema, which is wider than a 390px viewport, so the deepest
+     fields sat entirely off-screen. The border now hugs the parent's edge and
+     the padding alone carries the offset, which looks the same at one level and
+     stays on screen at ten.
+
+     Fluid, because a tree's depth is a property of the DATA and can't be known
+     when the pattern is written: `2ch`-ish on a narrow screen, the full step on
+     a wide one. Deep trees stay usable on a phone without flattening the
+     hierarchy visually on a desktop. */
+  .tree__item > .tree,
+  .tree__item > details > .tree {
+    /* Reset BOTH box axes before re-applying the one indent this level owes.
+       Two separate leaks compounded here, each adding ~16px per level and each
+       invisible in the CSS:
+
+       1. `.tree { padding: var(--_p) }` applies to every nested `.tree`, not just
+          the outermost, so the container padding was charged once per level — on
+          all four sides, narrowing from the end as well.
+       2. `patterns/details.css` gives every non-summary child of a `<details>`
+          `margin-inline: var(--_content-margin)`. Its selector is
+          `details, .details`, which under CSS nesting takes `:is()` specificity
+          (0-1-1), so `.tree { margin: 0 }` at 0-1-0 LOSES to it. A nested tree is
+          exactly such a child.
+
+       Measured before this: 41px per level against a 24px design, so a 9-deep
+       tree spent 382px on indent and left its deepest label 162px wide. */
+    margin-inline: 0;
+    padding: 0;
+    padding-inline-start: var(--_indent);
     border-inline-start: 1px solid var(--color-bg-surface-muted);
   }
 
   .tree__content,
-  details.tree__item > summary {
+  details.tree__item > summary,
+  .tree__item > details > summary {
     display: flex;
     align-items: center;
     gap: var(--tree-gap, 0.25rem);
@@ -31,9 +95,13 @@
 
   .tree__content {
     cursor: default;
+    /* Sit in the same label column as a branch sibling, which spends this much on
+       its chevron. Without it a leaf reads as out-dented by one toggle width. */
+    padding-inline-start: var(--_leaf-indent);
   }
 
-  details.tree__item > summary {
+  details.tree__item > summary,
+  .tree__item > details > summary {
     cursor: pointer;
     list-style: none;
 
@@ -59,7 +127,8 @@
     transition: transform 0.2s ease;
   }
 
-  details.tree__item[open] > summary .tree__toggle {
+  details.tree__item[open] > summary .tree__toggle,
+  .tree__item > details[open] > summary .tree__toggle {
     transform: rotate(90deg);
   }
 
@@ -111,10 +180,10 @@
     &::before {
       content: '';
       position: absolute;
-      inset-inline-start: calc(-1 * var(--tree-indent, 1.5rem) + 0.5rem);
+      inset-inline-start: calc(-1 * var(--_indent) + 0.5rem);
       inset-block-start: 0;
       block-size: 1rem;
-      inline-size: calc(var(--tree-indent, 1.5rem) - 0.5rem);
+      inline-size: calc(var(--_indent) - 0.5rem);
       border-inline-start: 1px solid var(--color-bg-surface-muted);
       border-block-end: 1px solid var(--color-bg-surface-muted);
     }
@@ -123,4 +192,45 @@
   &.tree--lines > .tree__item::before {
     display: none;
   }
+
+  /* A node's own prose. `.tree__label` is `nowrap` + ellipsis for file-tree-style
+     single-line names, so a description can't live in it — it sits below the
+     summary row and wraps. Indented to the label, past the toggle. */
+  .tree__desc {
+    margin-block: 0.125rem 0.25rem;
+    margin-inline-start: var(--_leaf-indent);
+    color: var(--color-text-surface-muted);
+    text-wrap: pretty;
+  }
+}
+
+/* ── Tree toolbar — generated by <wc-tree>, never authored ─────────────────── */
+/*
+ * These controls only exist once the element upgrades, so they are styled but
+ * never present in a no-JS render. Kept out of the `.tree` block because the
+ * toolbar is a SIBLING of the tree, not a node in it — nesting it there would
+ * inherit `.tree`'s padding and the `.tree__item` positioning context.
+ */
+.tree__toolbar {
+  align-items: center;
+  margin-block-end: var(--p-tree, var(--p-tree-group, var(--p-default)));
+
+  /* The filter is wrapped in `.input-group` so forms.css styles it; the group is
+     what flexes, and the input fills it. */
+  .tree__filter-group {
+    flex: 1 1 12rem;
+    min-inline-size: 0;
+  }
+
+  .tree__filter {
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  .tree__count {
+    color: var(--color-text-surface-muted);
+    /* Hold the row height whether or not a count is showing, so typing into the
+       filter doesn't reflow the tree by a line. */
+    min-inline-size: 6ch;
+  }
 }

package/assets/js/consent.js

@@ -1 +1 @@
-const e=[`necessary`,`analytics`,`marketing`,`preferences`],t=`vitops_consent`,n=[`analytics`,`marketing`,`preferences`];function r(e){return{analytics:e,marketing:e,preferences:e}}function i(){return{decided:!1,ts:null,choices:r(!1)}}function a(e,t){for(let n of e.split(`;`)){let e=n.trim();if(e.slice(0,t.length+1)===`${t}=`)return e.slice(t.length+1)}return null}function o(e){if(!e)return i();let t;try{t=JSON.parse(decodeURIComponent(e))}catch{return i()}if(typeof t!=`object`||!t)return i();let a=t;if(a.v!==1||typeof a.c!=`object`||a.c===null)return i();let o=a.c,s=r(!1);for(let e of n)s[e]=o[e]===!0;return{decided:!0,ts:typeof a.ts==`number`?a.ts:null,choices:s}}function s(e){return encodeURIComponent(JSON.stringify({v:1,ts:e.ts??0,c:e.choices}))}function c(e,t){return t===`necessary`?!0:e.decided&&e.choices[t]===!0}function l(e,t){return{decided:!0,ts:t,choices:r(e)}}function u(e,t,r){let i={...e.choices};for(let e of n){let n=t[e];typeof n==`boolean`&&(i[e]=n)}return{decided:!0,ts:r,choices:i}}function d(e,t){return n.filter(n=>c(e,n)&&!c(t,n))}function f(e){return`; path=/; max-age=15552000; SameSite=Lax${e?`; Secure`:``}`}const p=`vitops:consent`,m=`vitops:consent-open`,h=location.protocol===`https:`;let g=o(a(document.cookie,t));const _=new Set,v=new WeakSet,y=new Set,b={idle:[],async:[],interaction:[]},x={idle:!1,async:!0,interaction:!1};function S(e){if(x[e])return;x[e]=!0;let t=b[e];b[e]=[];for(let e of t)e()}function C(e,t){x[e]?t():b[e].push(t)}function w(e){document.readyState===`complete`?e():addEventListener(`load`,e,{once:!0})}w(()=>{let e=globalThis.requestIdleCallback;e?e(()=>S(`idle`),{timeout:3e3}):setTimeout(()=>S(`idle`),1)});{let e=[`pointerdown`,`keydown`,`scroll`,`touchstart`],t=()=>{for(let n of e)removeEventListener(n,t);S(`interaction`)};for(let n of e)addEventListener(n,t,{once:!0,passive:!0});w(()=>setTimeout(()=>S(`interaction`),8e3))}const T=new Set([`type`,`src`,`data-vitops-tag`,`data-src`,`data-strategy`,`data-consent`,`data-consent-src`,`data-consent-cookies`]);function E(t){let n=t.getAttribute(`data-consent`);return e.includes(n??``)?n:`analytics`}function D(e){let t=e.textContent??``,n=e.getAttribute(`data-src`),r=t=>{let n=document.createElement(`script`);for(let{name:t,value:r}of Array.from(e.attributes))T.has(t)||n.setAttribute(t,r);t(n),e.parentNode?.insertBefore(n,e.nextSibling)};t.trim()&&r(e=>e.text=t),n&&r(e=>{e.async=!0,e.src=n})}function O(e){if(!v.has(e)){if(v.add(e),y.add(E(e)),e instanceof HTMLScriptElement)D(e);else{let t=e.getAttribute(`data-consent-src`);t&&e.setAttribute(`src`,t)}e.setAttribute(`data-vitops-activated`,``)}}function k(){let e=document.querySelectorAll(`script[data-vitops-tag]:not([data-vitops-activated]),[data-consent-src]:not([data-vitops-activated])`);for(let t of e){if(!c(g,E(t)))continue;let e=t.getAttribute(`data-strategy`);C(e===`async`||e===`interaction`?e:`idle`,()=>O(t))}}function A(e){let t=new Set;for(let n of e)for(let e of document.querySelectorAll(`[data-consent="${n}"]`))for(let n of(e.getAttribute(`data-consent-cookies`)??``).split(`,`))n.trim()&&t.add(n.trim());if(!t.size)return;let n=document.cookie.split(`;`).map(e=>e.trim().split(`=`)[0]??``),r=location.hostname.split(`.`).slice(-2).join(`.`),i=[``,`; domain=${location.hostname}`,`; domain=.${r}`];for(let e of n)if([...t].some(t=>t.endsWith(`*`)?e.startsWith(t.slice(0,-1)):e===t))for(let t of i)document.cookie=`${e}=; path=/; max-age=0${t}`}function j(e,n){let r=d(g,e),i=g;g=e,n?document.cookie=`${t}=${s(e)}${f(h)}`:document.cookie=`${t}=; path=/; max-age=0`,M(),k(),r.length&&(A(r),r.some(e=>y.has(e)&&c(i,e))&&N.reloadOnRevoke&&location.reload())}function M(){for(let e of _)e(g);document.dispatchEvent(new CustomEvent(p,{detail:g}))}const N={categories:e,reloadOnRevoke:!0,get:()=>g,granted:e=>c(g,e),needed:()=>!g.decided,set:e=>j(u(g,e,Date.now()),!0),acceptAll:()=>j(l(!0,Date.now()),!0),rejectAll:()=>j(l(!1,Date.now()),!0),reset:()=>j(i(),!1),open:()=>document.dispatchEvent(new CustomEvent(m)),subscribe(e){return _.add(e),e(g),()=>void _.delete(e)}};window.vitopsConsent=N,document.addEventListener(`click`,e=>{e.target?.closest?.(`[data-consent-open]`)&&(e.preventDefault(),N.open())}),document.addEventListener(`astro:page-load`,k),k(),M();const P=[`analytics`,`marketing`,`preferences`];var F=class extends HTMLElement{#e;get#t(){return window.vitopsConsent}get#n(){return this.querySelector(`[popover]`)}connectedCallback(){let e=this.#t;if(!e)return;let t=this.#n;t&&typeof t.showPopover!=`function`&&t.removeAttribute(`popover`),this.getAttribute(`reload-on-revoke`)===`false`&&(e.reloadOnRevoke=!1),this.addEventListener(`click`,this.#c),this.addEventListener(`submit`,this.#i),document.addEventListener(m,this.#r),this.#e=e.subscribe(()=>{e.needed()?this.#a():this.#o()})}disconnectedCallback(){this.removeEventListener(`click`,this.#c),this.removeEventListener(`submit`,this.#i),document.removeEventListener(m,this.#r),this.#e?.()}#r=()=>this.#a();#i=e=>e.preventDefault();#a(){this.#s(),this.hidden=!1;let e=this.#n;e?.isConnected&&!e.matches(`:popover-open`)&&e.showPopover()}#o(){this.#n?.hidePopover?.(),this.hidden=!0}#s(){let e=this.#t;if(e)for(let t of P){let n=this.querySelector(`input[name="${t}"]`);n&&(n.checked=e.granted(t))}}#c=e=>{let t=this.#t,n=e.target?.closest?.(`[data-consent-accept],[data-consent-reject],[data-consent-save]`);!t||!n||(e.preventDefault(),n.hasAttribute(`data-consent-accept`)?t.acceptAll():n.hasAttribute(`data-consent-reject`)?t.rejectAll():t.set(this.#l()),this.#o())};#l(){let e={};for(let t of P)e[t]=this.querySelector(`input[name="${t}"]`)?.checked===!0;return e}};customElements.get(`wc-consent`)||customElements.define(`wc-consent`,F);export{e as CATEGORIES,p as CONSENT_EVENT,m as CONSENT_OPEN_EVENT,t as COOKIE_NAME,N as consent};
+const e=[`necessary`,`analytics`,`marketing`,`preferences`],t=`vitops:consent`,n=`vitops:consent-open`,r=`vitops_consent`,i=[`analytics`,`marketing`,`preferences`];function a(e){return{analytics:e,marketing:e,preferences:e}}function o(){return{ts:null,choices:a(null)}}function s(e,t){for(let n of e.split(`;`)){let e=n.trim();if(e.slice(0,t.length+1)===`${t}=`)return e.slice(t.length+1)}return null}function c(e){if(!e)return o();let t;try{t=JSON.parse(decodeURIComponent(e))}catch{return o()}if(typeof t!=`object`||!t)return o();let n=t;if(n.v!==2||typeof n.c!=`object`||n.c===null)return o();let r=n.c,s=a(null);for(let e of i){let t=r[e];typeof t==`boolean`&&(s[e]=t)}return{ts:typeof n.ts==`number`?n.ts:null,choices:s}}function l(e){let t={};for(let n of i){let r=e.choices[n];typeof r==`boolean`&&(t[n]=r)}return encodeURIComponent(JSON.stringify({v:2,ts:e.ts??0,c:t}))}function u(e,t){return t===`necessary`?!0:e.choices[t]===!0}function d(e,t){return t===`necessary`?!0:e.choices[t]!==null}function f(e,t){for(let n of t)if(!d(e,n))return!0;return!1}function p(e,t){return{ts:t,choices:a(e)}}function m(e,t,n){let r={...e.choices};for(let e of i){let n=t[e];typeof n==`boolean`&&(r[e]=n)}return{ts:n,choices:r}}function h(e,t){return i.filter(n=>u(e,n)&&!u(t,n))}function g(e){return`; path=/; max-age=15552000; SameSite=Lax${e?`; Secure`:``}`}const _=location.protocol===`https:`;let v=c(s(document.cookie,r));const y=new Set,b=new WeakSet,x=new Set,S=new Set,C=new Map;function w(e){S.has(e)||(S.add(e),R())}function T(){for(let[e,t]of C)if(d(v,e)){C.delete(e);for(let n of t)n(u(v,e))}}const E={idle:[],async:[],interaction:[]},D={idle:!1,async:!0,interaction:!1};function O(e){if(D[e])return;D[e]=!0;let t=E[e];E[e]=[];for(let e of t)e()}function k(e,t){D[e]?t():E[e].push(t)}function A(e){document.readyState===`complete`?e():addEventListener(`load`,e,{once:!0})}A(()=>{let e=globalThis.requestIdleCallback;e?e(()=>O(`idle`),{timeout:3e3}):setTimeout(()=>O(`idle`),1)});{let e=[`pointerdown`,`keydown`,`scroll`,`touchstart`],t=()=>{for(let n of e)removeEventListener(n,t);O(`interaction`)};for(let n of e)addEventListener(n,t,{once:!0,passive:!0});A(()=>setTimeout(()=>O(`interaction`),8e3))}const j=new Set([`type`,`src`,`data-vitops-tag`,`data-src`,`data-strategy`,`data-consent`,`data-consent-src`,`data-consent-cookies`]);function M(t){let n=t.getAttribute(`data-consent`);return e.includes(n??``)?n:`analytics`}function N(e){let t=e.textContent??``,n=e.getAttribute(`data-src`),r=t=>{let n=document.createElement(`script`);for(let{name:t,value:r}of Array.from(e.attributes))j.has(t)||n.setAttribute(t,r);t(n),e.parentNode?.insertBefore(n,e.nextSibling)};t.trim()&&r(e=>e.text=t),n&&r(e=>{e.async=!0,e.src=n})}function P(e){if(!b.has(e)){if(b.add(e),x.add(M(e)),e instanceof HTMLScriptElement)N(e);else{let t=e.getAttribute(`data-consent-src`);t&&e.setAttribute(`src`,t)}e.setAttribute(`data-vitops-activated`,``)}}function F(){let e=document.querySelectorAll(`script[data-vitops-tag]:not([data-vitops-activated]),[data-consent-src]:not([data-vitops-activated])`);for(let t of e){let e=t.getAttribute(`data-strategy`);k(e===`async`||e===`interaction`?e:`idle`,()=>{let e=M(t);u(v,e)?P(t):w(e)})}}function I(e){let t=new Set;for(let n of e)for(let e of document.querySelectorAll(`[data-consent="${n}"]`))for(let n of(e.getAttribute(`data-consent-cookies`)??``).split(`,`))n.trim()&&t.add(n.trim());if(!t.size)return;let n=document.cookie.split(`;`).map(e=>e.trim().split(`=`)[0]??``),r=location.hostname.split(`.`).slice(-2).join(`.`),i=[``,`; domain=${location.hostname}`,`; domain=.${r}`];for(let e of n)if([...t].some(t=>t.endsWith(`*`)?e.startsWith(t.slice(0,-1)):e===t))for(let t of i)document.cookie=`${e}=; path=/; max-age=0${t}`}function L(e,t){let n=h(v,e),i=v;v=e,t?document.cookie=`${r}=${l(e)}${g(_)}`:document.cookie=`${r}=; path=/; max-age=0`,R(),F(),n.length&&(I(n),n.some(e=>x.has(e)&&u(i,e))&&z.reloadOnRevoke&&location.reload())}function R(){T();for(let e of y)e(v);document.dispatchEvent(new CustomEvent(t,{detail:v}))}const z={categories:e,reloadOnRevoke:!0,get:()=>v,granted:e=>u(v,e),needed:()=>f(v,S),demanded:()=>e.filter(e=>S.has(e)),require(e){return w(e),u(v,e)},request(e){return w(e),d(v,e)?Promise.resolve(u(v,e)):new Promise(t=>{let n=C.get(e);n?n.push(t):C.set(e,[t])})},set:e=>L(m(v,e,Date.now()),!0),acceptAll:()=>L(p(!0,Date.now()),!0),rejectAll:()=>L(p(!1,Date.now()),!0),reset:()=>L(o(),!1),open:()=>document.dispatchEvent(new CustomEvent(n)),subscribe(e){return y.add(e),e(v),()=>void y.delete(e)}},B=window.vitopsConsent?.q;if(window.vitopsConsent=z,B)for(let[e,t]of B)t?z.request(e).then(t):z.require(e);document.addEventListener(`click`,e=>{e.target?.closest?.(`[data-consent-open]`)&&(e.preventDefault(),z.open())}),document.addEventListener(`astro:page-load`,F),F(),R();var V=class extends HTMLElement{#e;#t=`prompt`;#n=!1;get#r(){return window.vitopsConsent}get#i(){return this.querySelector(`[popover]`)}connectedCallback(){let e=this.#r;if(!e)return;let t=this.#i;t&&typeof t.showPopover!=`function`&&t.removeAttribute(`popover`),this.getAttribute(`reload-on-revoke`)===`false`&&(e.reloadOnRevoke=!1),this.addEventListener(`click`,this.#p),this.addEventListener(`submit`,this.#o),document.addEventListener(n,this.#a),this.#e=e.subscribe(()=>{this.#n&&this.#t===`settings`?this.#f():e.needed()?this.#u(`prompt`):this.#d()})}disconnectedCallback(){this.removeEventListener(`click`,this.#p),this.removeEventListener(`submit`,this.#o),document.removeEventListener(n,this.#a),this.#e?.()}#a=()=>this.#u(`settings`);#o=e=>e.preventDefault();#s(e){return this.querySelector(`[data-consent-row="${e}"]`)??this.#c(e)?.closest(`label`)??null}#c(e){return this.querySelector(`input[name="${e}"]`)}#l(e){let t=this.#r;if(!t)return[];if(e===`settings`){let e=i.filter(e=>this.#s(e));return e.length?e:[...i]}let n=t.get();return i.filter(e=>t.demanded().includes(e)&&!d(n,e))}#u(e){if(!this.#l(e).length)return;this.#t=e,this.#f(),this.hidden=!1,this.#n=!0;let t=this.#i;t?.isConnected&&!t.matches(`:popover-open`)&&t.showPopover()}#d(){this.#n=!1,this.#i?.hidePopover?.(),this.hidden=!0}#f(){let e=this.#r;if(!e)return;let t=this.#l(this.#t);for(let n of i){let r=this.#s(n);r&&(r.hidden=!t.includes(n));let i=this.#c(n);i&&(i.checked=e.granted(n))}this.#i?.classList.toggle(`consent--single`,t.length<2)}#p=e=>{let t=this.#r,n=e.target?.closest?.(`[data-consent-accept],[data-consent-reject],[data-consent-save]`);if(!t||!n)return;e.preventDefault();let r=this.#l(this.#t);n.hasAttribute(`data-consent-accept`)?t.set(this.#m(r,()=>!0)):n.hasAttribute(`data-consent-reject`)?t.set(this.#m(r,()=>!1)):t.set(this.#m(r,e=>this.#c(e)?.checked===!0)),this.#d()};#m(e,t){let n={};for(let r of e)n[r]=t(r);return n}};customElements.get(`wc-consent`)||customElements.define(`wc-consent`,V);export{e as CATEGORIES,t as CONSENT_EVENT,n as CONSENT_OPEN_EVENT,r as COOKIE_NAME,z as consent};