@getvitops/core 8.2.0-alpha.0 → 8.3.0-alpha.0

package/css/patterns/sitenav.css

@@ -425,3 +425,265 @@
     display: none;
   }
 }
+
+/* ── Tiers (`<SiteNav>`'s optional `primary-mobile` / `primary-mega` menus) ──────
+   Each tier is its own `<nav>` in a `.sitenav-tier` wrapper, and a wrapper is
+   `display: none` outside its container-width window — so exactly one tier is ever
+   in the accessibility tree. Same container as the `--bp-*` flag above (the nearest
+   ancestor `container-type`, `body` per layout.css), so the hand-over width and the
+   drawer→navbar flip can never disagree. One pair per breakpoint; `sitenav.ts`'s
+   `VISIBILITY_CLASSES` lists them and `sitenav.test.ts` checks each is defined here. */
+@container (width < 30rem) {
+  .sitenav-tier--from-sm {
+    display: none;
+  }
+}
+@container (width >= 30rem) {
+  .sitenav-tier--below-sm {
+    display: none;
+  }
+}
+@container (width < 48rem) {
+  .sitenav-tier--from-md {
+    display: none;
+  }
+}
+@container (width >= 48rem) {
+  .sitenav-tier--below-md {
+    display: none;
+  }
+}
+@container (width < 64rem) {
+  .sitenav-tier--from-lg {
+    display: none;
+  }
+}
+@container (width >= 64rem) {
+  .sitenav-tier--below-lg {
+    display: none;
+  }
+}
+@container (width < 80rem) {
+  .sitenav-tier--from-xl {
+    display: none;
+  }
+}
+@container (width >= 80rem) {
+  .sitenav-tier--below-xl {
+    display: none;
+  }
+}
+
+/* ── Item description (EmDash `titleAttr` convention — see SiteNav.astro) ───── */
+.sitenav__link--described {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+}
+
+.sitenav__desc {
+  font-size: 0.875em;
+  opacity: 0.75;
+  font-weight: normal;
+}
+
+/* The current page. Text-weight + a non-colour cue, so it survives forced-colors. */
+.sitenav__link[aria-current='page'] {
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 0.25em;
+}
+
+/* ── Mega variant — WIDE ONLY ───────────────────────────────────────────────
+   Top-level submenus become full-width panels of columns under the nav row. The
+   branch item stops being the positioning context so the panel anchors to
+   `.sitenav--mega` instead. Inside the wide branch, with the same reasoning as the
+   rest of the file: a rule here competes at its bare selector weight. */
+@container style(--_sitenav-wide: 1) {
+  .sitenav--mega {
+    position: relative;
+  }
+  .sitenav--mega .sitenav__list > .sitenav__item--branch {
+    position: static;
+  }
+  .sitenav--mega .sitenav__list > .sitenav__item--branch > .sitenav__submenu {
+    inset-inline: 0;
+    inline-size: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 1.5rem;
+    padding: 1.5rem;
+  }
+  /* Third level is a column inside the panel, not a fly-out. */
+  .sitenav--mega .sitenav__submenu .sitenav__item--branch {
+    position: static;
+    display: block;
+  }
+  .sitenav--mega .sitenav__submenu .sitenav__item--branch > .sitenav__submenu {
+    position: static;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    translate: none;
+    box-shadow: none;
+    border: none;
+    padding: 0.25rem 0 0;
+    min-inline-size: 0;
+  }
+  .sitenav--mega .sitenav__submenu .sitenav__disclosure {
+    display: none;
+  }
+}
+
+/* ── In-page menu (`vitops.nav` block) ─────────────────────────────────────────
+ *
+ * A menu read in the body of a page — a site map, a section's links, footer-style columns —
+ * as plain nested lists. No disclosure and no drawer: that is the header's job (`.sitenav`).
+ *
+ *   <nav aria-label="Services"><ul class="navlist navlist--columns">
+ *     <li class="navlist__item"><a class="navlist__link">…</a><ul class="navlist__sub">…</ul></li>
+ *
+ * Modifiers: `--inline` (one wrapping row) and `--columns` (an auto-fit grid, each top-level
+ * item a column with its sub-links beneath it). */
+.navlist,
+.navlist__sub {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* The rhythm utility's `li + li` margin is the flow's job; the list's own gap does it here. */
+.navlist__item {
+  margin: 0;
+}
+
+.navlist__sub {
+  margin-block-start: 0.25rem;
+  padding-inline-start: 1rem;
+}
+
+.navlist__link {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  padding-block: 0.25rem;
+  border-radius: var(--br-control, 0.25rem);
+
+  &:focus-visible {
+    outline: 2px solid var(--sitenav-focus-color, var(--color-border-focus));
+    outline-offset: 2px;
+  }
+
+  &[aria-current='page'] {
+    font-weight: 600;
+  }
+}
+
+.navlist__label {
+  font-weight: 600;
+}
+
+.navlist--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.25rem 1.25rem;
+}
+
+.navlist--columns {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+  gap: 1.5rem;
+
+  > .navlist__item > :is(.navlist__link, .navlist__label) {
+    font-weight: 600;
+  }
+
+  > .navlist__item > .navlist__sub {
+    padding-inline-start: 0;
+  }
+}
+
+@media (forced-colors: active) {
+  .navlist__link:focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+/* ── Footer (`<SiteFooter>`) ───────────────────────────────────────────────── */
+.sitefooter {
+  margin-block-start: var(--space-2xl, 3rem);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-block: var(--space-l, 2rem);
+  border-block-start: 1px solid var(--color-border-neutral, currentColor);
+}
+
+.sitefooter__nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 3rem;
+  justify-content: space-between;
+}
+
+.sitefooter__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1.25rem;
+}
+
+.sitefooter__link {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  padding-block: 0.25rem;
+  border-radius: var(--br-control, 0.25rem);
+
+  &:focus-visible {
+    outline: 2px solid var(--sitenav-focus-color, var(--color-border-focus));
+    outline-offset: 2px;
+  }
+
+  &[aria-current='page'] {
+    font-weight: 600;
+  }
+}
+
+.sitefooter__copy {
+  margin: 0;
+  font-size: 0.875em;
+  opacity: 0.8;
+}
+
+/* ── Motion + forced colours (both site-nav and footer) ────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .sitenav__panel,
+  .sitenav__panel::backdrop,
+  .sitenav__submenu,
+  .sitenav__item--branch {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .sitenav__link:focus-visible,
+  .sitenav__toggle:focus-visible,
+  .sitenav__close:focus-visible,
+  .sitefooter__link:focus-visible {
+    outline-color: Highlight;
+  }
+  .sitenav__panel,
+  .sitenav__submenu {
+    border: 1px solid CanvasText;
+  }
+  .sitenav__link[aria-current='page'] {
+    text-decoration-thickness: 2px;
+  }
+}

package/css/patterns/splitter.css

@@ -210,3 +210,14 @@
     }
   }
 }
+
+/*
+ * Pre-upgrade display for the two elements that live in this partial — see the note on
+ * `wc-entries` in table.css. Both are a framed block of content (two panes; two images),
+ * and `wc-image-compare`'s upgraded `:host` is already `display: block`, so declaring it
+ * here removes the layout shift when it registers. `wc-split-panel` has no `:host` display
+ * at all, so this also fixes it after upgrade.
+ */
+:where(wc-split-panel, wc-image-compare) {
+  display: block;
+}

package/css/patterns/stats.css

@@ -0,0 +1,61 @@
+/**
+ * Stats — a row of headline figures ("11 hrs/week", "82%") and, as `.stats--tiles`, a
+ * grid of labelled tiles with a group, a delta and a state (the generic kernel of a
+ * dashboard mock: "Open jobs  24  +3 this week").
+ *
+ * The figure is the `.counter` pattern, so the count-up is `<wc-counter>`'s; this
+ * partial only lays the figures out. With no JS and no CSS each figure is plain text
+ * beside its label.
+ *
+ * `data-state` on a tile (`up` / `down`) drives the delta's colour through the semantic
+ * roles, so "good" and "bad" follow the site's own success/danger rather than a hard-coded
+ * green and red. The delta's words stay in the text: colour is never the only carrier.
+ */
+.stats {
+  display: grid;
+  gap: var(--stats-gap, 1.5rem);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--stats-min, 12rem)), 1fr));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  .stats__item {
+    display: grid;
+    gap: 0.25rem;
+    align-content: start;
+    margin: 0;
+  }
+
+  .stats__figure,
+  .stats__label,
+  .stats__group,
+  .stats__delta {
+    margin: 0;
+  }
+
+  .stats__figure {
+    color: var(--tone-fg, inherit);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .stats__group {
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    opacity: 0.8;
+  }
+
+  .stats__item[data-state='up'] .stats__delta {
+    color: var(--color-text-success, inherit);
+  }
+
+  .stats__item[data-state='down'] .stats__delta {
+    color: var(--color-text-danger, inherit);
+  }
+
+  &.stats--tiles .stats__item {
+    padding: var(--stats-tile-padding, 1rem 1.25rem);
+    border: var(--b-card, var(--b-card-group, var(--b-default)));
+    border-radius: var(--br-card, var(--br-card-group, var(--br-default)));
+    background-color: var(--tone-bg, transparent);
+  }
+}

package/css/patterns/steps.css

@@ -0,0 +1,98 @@
+/**
+ * Steps — an ordered sequence ("getting started is simple") with a connector line
+ * running through the numbered markers.
+ *
+ * It is an `<ol>`, so the order is semantic and announced with no CSS. The number is a
+ * CSS counter and the connector a pseudo-element on each item; without this stylesheet
+ * the list is simply a numbered list. Vertical by default, side by side with `--row`
+ * once the container has room.
+ *
+ * The marker takes its fill from `.tone` (`--tone-solid` / `--tone-on-solid`), so one
+ * `tone` field recolours the whole sequence.
+ */
+.steps {
+  --_marker: var(--steps-marker-size, 2.5rem);
+  --_line: var(--steps-line-width, 2px);
+  --_gap: var(--steps-gap, 1.5rem);
+
+  display: grid;
+  gap: var(--_gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: step;
+
+  .steps__item {
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--_marker) minmax(0, 1fr);
+    column-gap: 1rem;
+    align-items: start;
+    counter-increment: step;
+  }
+
+  /* The marker. */
+  .steps__item::before {
+    content: counter(step);
+    display: grid;
+    place-items: center;
+    inline-size: var(--_marker);
+    block-size: var(--_marker);
+    border-radius: 50%;
+    font-weight: 700;
+    background-color: var(--tone-solid, currentColor);
+    color: var(--tone-on-solid, Canvas);
+    position: relative;
+    z-index: 1;
+  }
+
+  /* The connector: from this marker down to the next. */
+  .steps__item:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    inset-inline-start: calc(var(--_marker) / 2 - var(--_line) / 2);
+    inset-block-start: var(--_marker);
+    inset-block-end: calc(var(--_gap) * -1);
+    inline-size: var(--_line);
+    background-color: var(--tone-border, currentColor);
+    opacity: 0.4;
+  }
+
+  .steps__body {
+    display: grid;
+    gap: 0.25rem;
+    grid-column: 2;
+    min-inline-size: 0;
+  }
+
+  .steps__title,
+  .steps__text {
+    margin: 0;
+  }
+}
+
+/* Side by side once there is room: the marker sits above its text and the line runs across. */
+@container (min-width: 48rem) {
+  .steps.steps--row {
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+
+    .steps__item {
+      grid-template-columns: minmax(0, 1fr);
+      row-gap: 0.75rem;
+    }
+
+    .steps__body {
+      grid-column: 1;
+    }
+
+    .steps__item:not(:last-child)::after {
+      inset-inline-start: var(--_marker);
+      inset-inline-end: calc(var(--_gap) * -1);
+      inset-block-start: calc(var(--_marker) / 2 - var(--_line) / 2);
+      inset-block-end: auto;
+      inline-size: auto;
+      block-size: var(--_line);
+    }
+  }
+}

package/css/patterns/table.css

@@ -104,3 +104,13 @@ table,
     min-inline-size: var(--table-min-inline-size, 100%);
   }
 }
+
+/*
+ * Before upgrade (or with elements.js absent) an unregistered custom element is
+ * `display: inline`, forming an inline box around block content. The default-view
+ * `<h3>` + `<dl>` pairs are block content, as is the table the element builds.
+ * Zero specificity, so any consumer rule wins.
+ */
+:where(wc-entries) {
+  display: block;
+}

package/css/patterns/tone.css

@@ -0,0 +1,38 @@
+/**
+ * Tone — one convention for "colour this block", shared by every block that colours
+ * anything (section, callout, stats, steps, cards `panel`, hero).
+ *
+ * A block never names a colour class. Class names cannot be built from a field value
+ * (Tailwind only sees literals), so a renderer sets custom properties on the element
+ * and `.tone` reads them:
+ *
+ *   --tone-bg      a tint of the role (`--color-bg-<role>-muted`)
+ *   --tone-fg      its readable text (`--color-text-<role>`)
+ *   --tone-border  its boundary (`--color-border-<role>`)
+ *   --tone-solid / --tone-on-solid   the filled variant and its computed foreground
+ *
+ * Each is a `var()` chain — the role, then its semantic fallbacks, then `neutral` — so a
+ * tone a site never defined degrades to a neutral surface instead of to nothing.
+ * `@getvitops/emdash`'s `resolveTone()` writes the chains. Unset, `.tone` is inert.
+ *
+ * `.tone--tint` is the default; `--solid` fills with the role's solid and its `on` colour.
+ */
+.tone {
+  --_bg: var(--tone-bg, transparent);
+  --_fg: var(--tone-fg, inherit);
+
+  background-color: var(--_bg);
+  color: var(--_fg);
+  border-color: var(--tone-border, currentColor);
+
+  &.tone--solid {
+    background-color: var(--tone-solid, var(--_bg));
+    color: var(--tone-on-solid, var(--_fg));
+  }
+}
+
+/* An accent run inside a heading (`<em class="accent">`): colour, not italics. */
+.accent {
+  font-style: normal;
+  color: var(--accent-color, var(--color-text-ui-accent, currentColor));
+}

package/dist/consent.js

@@ -1 +1 @@
-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`||e.choices[t]===!0}function d(e,t){return t===`necessary`||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=/* @__PURE__ */ new Set,b=/* @__PURE__ */ new WeakSet,x=/* @__PURE__ */ new Set,S=/* @__PURE__ */ new Set,C=/* @__PURE__ */ new Map,w=/* @__PURE__ */ new Set;function T(e){w.has(e)||(w.add(e),queueMicrotask(()=>{document.querySelector(`wc-consent`)||console.warn(`[vitops] something requested the "${e}" consent category, but this page has no <wc-consent> element to ask with — so the request can never be granted and whatever waited on it will not run. Render <CookieConsent /> on every page that gates anything.`)}))}function E(e){S.has(e)||(S.add(e),T(e),B())}function D(){for(let[e,t]of C)if(d(v,e)){C.delete(e);for(let n of t)n(u(v,e))}}const O={idle:[],async:[],interaction:[]},k={idle:!1,async:!0,interaction:!1};function A(e){if(k[e])return;k[e]=!0;let t=O[e];O[e]=[];for(let e of t)e()}function j(e,t){k[e]?t():O[e].push(t)}function M(e){document.readyState===`complete`?e():addEventListener(`load`,e,{once:!0})}M(()=>{let e=globalThis.requestIdleCallback;e?e(()=>A(`idle`),{timeout:3e3}):setTimeout(()=>A(`idle`),1)});{let e=[`pointerdown`,`keydown`,`scroll`,`touchstart`],t=()=>{for(let n of e)removeEventListener(n,t);A(`interaction`)};for(let n of e)addEventListener(n,t,{once:!0,passive:!0});M(()=>setTimeout(()=>A(`interaction`),8e3))}const N=/* @__PURE__ */ new Set([`type`,`src`,`data-vitops-tag`,`data-src`,`data-strategy`,`data-consent`,`data-consent-src`,`data-consent-cookies`]);function P(t){let n=t.getAttribute(`data-consent`);return e.includes(n??``)?n:`analytics`}function F(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))N.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 I(e){if(!b.has(e)){if(b.add(e),x.add(P(e)),e instanceof HTMLScriptElement)F(e);else{let t=e.getAttribute(`data-consent-src`);t&&e.setAttribute(`src`,t)}e.setAttribute(`data-vitops-activated`,``)}}function L(){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`);j(e===`async`||e===`interaction`?e:`idle`,()=>{let e=P(t);u(v,e)?I(t):E(e)})}}function R(e){let t=/* @__PURE__ */ 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 z(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`,B(),L(),n.length&&(R(n),n.some(e=>x.has(e)&&u(i,e))&&V.reloadOnRevoke&&location.reload())}function B(){D();for(let e of y)e(v);document.dispatchEvent(new CustomEvent(t,{detail:v}))}const V={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 E(e),u(v,e)},request(e){return E(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=>z(m(v,e,Date.now()),!0),acceptAll:()=>z(p(!0,Date.now()),!0),rejectAll:()=>z(p(!1,Date.now()),!0),reset:()=>z(o(),!1),open:()=>document.dispatchEvent(new CustomEvent(n)),subscribe(e){return y.add(e),e(v),()=>void y.delete(e)}},H=window.vitopsConsent?.q;if(window.vitopsConsent=V,H)for(let[e,t]of H)t?V.request(e).then(t):V.require(e);document.addEventListener(`click`,e=>{e.target?.closest?.(`[data-consent-open]`)&&(e.preventDefault(),V.open())}),document.addEventListener(`astro:page-load`,L),L(),B();var U=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`,U);export{e as CATEGORIES,t as CONSENT_EVENT,n as CONSENT_OPEN_EVENT,r as COOKIE_NAME,V 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`||e.choices[t]===!0}function d(e,t){return t===`necessary`||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=/* @__PURE__ */ new Set,b=/* @__PURE__ */ new WeakSet,x=/* @__PURE__ */ new Set,S=/* @__PURE__ */ new Set,C=/* @__PURE__ */ new Map,w=/* @__PURE__ */ new Set;function T(e){w.has(e)||(w.add(e),queueMicrotask(()=>{document.querySelector(`wc-consent`)||console.warn(`[vitops] something requested the "${e}" consent category, but this page has no <wc-consent> element to ask with — so the request can never be granted and whatever waited on it will not run. Render <CookieConsent /> on every page that gates anything.`)}))}function E(e){S.has(e)||(S.add(e),T(e),B())}function D(){for(let[e,t]of C)if(d(v,e)){C.delete(e);for(let n of t)n(u(v,e))}}const O={idle:[],async:[],interaction:[]},k={idle:!1,async:!0,interaction:!1};function A(e){if(k[e])return;k[e]=!0;let t=O[e];O[e]=[];for(let e of t)e()}function j(e,t){k[e]?t():O[e].push(t)}function M(e){document.readyState===`complete`?e():addEventListener(`load`,e,{once:!0})}M(()=>{let e=globalThis.requestIdleCallback;e?e(()=>A(`idle`),{timeout:3e3}):setTimeout(()=>A(`idle`),1)});{let e=[`pointerdown`,`keydown`,`scroll`,`touchstart`],t=()=>{for(let n of e)removeEventListener(n,t);A(`interaction`)};for(let n of e)addEventListener(n,t,{once:!0,passive:!0});M(()=>setTimeout(()=>A(`interaction`),8e3))}const N=/* @__PURE__ */ new Set([`type`,`src`,`data-vitops-tag`,`data-src`,`data-strategy`,`data-consent`,`data-consent-src`,`data-consent-cookies`]);function P(t){let n=t.getAttribute(`data-consent`);return e.includes(n??``)?n:`analytics`}function F(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))N.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 I(e){if(!b.has(e)){if(b.add(e),x.add(P(e)),e instanceof HTMLScriptElement)F(e);else{let t=e.getAttribute(`data-consent-src`);t&&e.setAttribute(`src`,t)}e.setAttribute(`data-vitops-activated`,``)}}function L(){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`);j(e===`async`||e===`interaction`?e:`idle`,()=>{let e=P(t);u(v,e)?I(t):E(e)})}}function R(e){let t=/* @__PURE__ */ 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 z(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`,B(),L(),n.length&&(R(n),n.some(e=>x.has(e)&&u(i,e))&&V.reloadOnRevoke&&location.reload())}function B(){D();for(let e of y)e(v);document.dispatchEvent(new CustomEvent(t,{detail:v}))}const V={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 E(e),u(v,e)},request(e){return E(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=>z(m(v,e,Date.now()),!0),acceptAll:()=>z(p(!0,Date.now()),!0),rejectAll:()=>z(p(!1,Date.now()),!0),reset:()=>z(o(),!1),open:()=>document.dispatchEvent(new CustomEvent(n)),subscribe(e){return y.add(e),e(v),()=>void y.delete(e)}},H=window.vitopsConsent?.q;if(window.vitopsConsent=V,H)for(let[e,t]of H)t?V.request(e).then(t):V.require(e);document.addEventListener(`click`,e=>{e.target?.closest?.(`[data-consent-open]`)&&(e.preventDefault(),V.open())}),document.addEventListener(`astro:page-load`,L),L(),B();var U=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.#m),this.addEventListener(`submit`,this.#o),document.addEventListener(n,this.#a),this.#e=e.subscribe(()=>{this.#n&&this.#t===`settings`?this.#p():e.needed()?this.#u(`prompt`):this.#f()})}disconnectedCallback(){this.removeEventListener(`click`,this.#m),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.#p(),this.hidden=!1,this.#n=!0;let t=this.#i;t?.isConnected&&!t.matches(`:popover-open`)&&t.showPopover(),e===`settings`&&t&&(this.#d=document.activeElement instanceof HTMLElement?document.activeElement:null,t.tabIndex=-1,t.focus({preventScroll:!0}))}#d=null;#f(){this.#n=!1,this.#i?.hidePopover?.(),this.hidden=!0;let e=this.#d;this.#d=null,e?.isConnected&&e.focus({preventScroll:!0})}#p(){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)}#m=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.#h(r,()=>!0)):n.hasAttribute(`data-consent-reject`)?t.set(this.#h(r,()=>!1)):t.set(this.#h(r,e=>this.#c(e)?.checked===!0)),this.#f()};#h(e,t){let n={};for(let r of e)n[r]=t(r);return n}};customElements.get(`wc-consent`)||customElements.define(`wc-consent`,U);export{e as CATEGORIES,t as CONSENT_EVENT,n as CONSENT_OPEN_EVENT,r as COOKIE_NAME,V as consent};