@epilot/volt-ui-experimental-griffel 0.1.0-experiment.1

package/dist/renderer/index.js

@@ -0,0 +1,59 @@
+import { OWNER_ATTR as h } from "./contract.js";
+import { ensureInsertionPoint as T } from "./insertion-point.js";
+import { ruleClassKey as p } from "./rule-key.js";
+import { getStyleSheetKeyFromElement as d, adoptStyleSheetElement as A } from "./sheet-adoption.js";
+import { ensureCoreTokens as C } from "../tokens/install.js";
+import { createDOMRenderer as E } from "../node_modules/@griffel/core/src/renderer/createDOMRenderer.js";
+import { GRIFFEL_CLASS_SALT as f } from "../tokens/class-salt.generated.js";
+import { DATA_BUCKET_ATTR as _ } from "../node_modules/@griffel/core/src/constants.js";
+let o = null;
+function L(r = document, m = "autonomous") {
+  if (o) return o;
+  C(r);
+  const l = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new WeakMap(), t = E(r, {
+    classNameHashSalt: f,
+    insertionPoint: T(r),
+    styleElementAttributes: { [h]: f },
+    unstable_filterCSSRule: m === "off" ? void 0 : (s) => {
+      const e = p(s);
+      return e !== null && l.has(e) ? !1 : (e !== null && l.add(e), !0);
+    }
+  });
+  function R() {
+    r.head.querySelectorAll(
+      `style[${_}][${h}="${f}"]`
+    ).forEach((e) => {
+      const i = e.sheet;
+      if (!i) return;
+      let n;
+      try {
+        n = i.cssRules.length;
+      } catch {
+        return;
+      }
+      const c = d(e);
+      t.stylesheets[c] || (t.stylesheets[c] = A(
+        e
+      ));
+      const S = a.get(e) ?? 0;
+      if (S !== n) {
+        for (let u = S; u < n; u++) {
+          const y = p(i.cssRules[u].cssText);
+          y !== null && l.add(y);
+        }
+        a.set(e, n);
+      }
+    });
+  }
+  if (m !== "off") {
+    const s = t.insertCSSRules.bind(t);
+    t.insertCSSRules = (e) => {
+      R(), s(e);
+    };
+  }
+  return o = t, o;
+}
+export {
+  L as getVoltRenderer
+};
+//# sourceMappingURL=index.js.map

package/dist/renderer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/renderer/index.ts"],"sourcesContent":["import { createDOMRenderer, type GriffelRenderer } from \"@griffel/core\"\n\nimport { BUCKET_ATTR, GRIFFEL_CLASS_SALT, OWNER_ATTR } from \"./contract\"\nimport { ensureInsertionPoint } from \"./insertion-point\"\nimport { ruleClassKey } from \"./rule-key\"\nimport {\n  adoptStyleSheetElement,\n  getStyleSheetKeyFromElement,\n} from \"./sheet-adoption\"\nimport { ensureCoreTokens } from \"../tokens/install\"\n\nexport type DedupMode = \"autonomous\" | \"off\"\n\nexport type DedupStats = {\n  /** Atoms this copy skipped because another copy had already inserted them. */\n  skipped: number\n  /** Atoms this copy actually inserted. */\n  inserted: number\n  /** Style elements owned by another copy that this one adopted rather than duplicating. */\n  adoptedSheets: number\n}\n\nlet renderer: GriffelRenderer | null = null\nconst stats: DedupStats = { skipped: 0, inserted: 0, adoptedSheets: 0 }\n\nexport function getDedupStats(): DedupStats {\n  return { ...stats }\n}\n\n/** Test-only: drop the module-private renderer so a fresh document can be used. */\nexport function __resetRendererForTests(): void {\n  renderer = null\n  stats.skipped = 0\n  stats.inserted = 0\n  stats.adoptedSheets = 0\n}\n\n/**\n * The per-copy renderer.\n *\n * Created on first use rather than at import. `createDOMRenderer` happens to do no DOM work of its\n * own, but relying on that would make the \"no import-time injection\" guarantee depend on a Griffel\n * implementation detail; a lazy accessor makes it structural, which is what `sideEffects: false`\n * promises consumers.\n */\nexport function getVoltRenderer(\n  doc: Document = document,\n  mode: DedupMode = \"autonomous\"\n): GriffelRenderer {\n  if (renderer) return renderer\n\n  // Tokens must exist before the first atom referencing them paints. Installed here rather than at\n  // import for the same reason the renderer is lazy.\n  ensureCoreTokens(doc)\n\n  /** Atom class names known to be in the DOM already, whoever inserted them. */\n  const seen = new Set<string>()\n  /** Per adopted element, how many rules we have already accounted for. */\n  const watermarks = new WeakMap<HTMLStyleElement, number>()\n\n  const base = createDOMRenderer(doc, {\n    classNameHashSalt: GRIFFEL_CLASS_SALT,\n    insertionPoint: ensureInsertionPoint(doc),\n    styleElementAttributes: { [OWNER_ATTR]: GRIFFEL_CLASS_SALT },\n    unstable_filterCSSRule:\n      mode === \"off\"\n        ? undefined\n        : (ruleCSS: string) => {\n            const key = ruleClassKey(ruleCSS)\n            if (key !== null && seen.has(key)) {\n              stats.skipped++\n              return false\n            }\n            if (key !== null) seen.add(key)\n            stats.inserted++\n            return true\n          },\n  })\n\n  /**\n   * Cross-copy dedup. Two jobs, both cheap when nothing has changed:\n   *\n   *  1. ADOPT — register style elements owned by this contract that another copy created, so N\n   *     copies write into ONE set of <style> elements rather than N sets.\n   *  2. PRIME — read rules back out of the CSSOM (not `textContent`, which is empty for rules\n   *     inserted via `insertRule`) so this copy knows not to re-insert them.\n   *\n   * The watermark stops the cache going stale: if another copy has inserted since our last pass,\n   * only the delta is scanned. Cost when idle is one integer compare per owned element.\n   *\n   * Failure mode is partial dedup, never breakage — a stale cache re-inserts an identical rule\n   * into the same sheet, which costs bytes rather than correctness. That is safe precisely because\n   * Griffel class names are content hashes: the same name always means the same rule.\n   */\n  function syncFromDOM(): void {\n    const els = doc.head.querySelectorAll<HTMLStyleElement>(\n      `style[${BUCKET_ATTR}][${OWNER_ATTR}=\"${GRIFFEL_CLASS_SALT}\"]`\n    )\n    els.forEach((el) => {\n      const sheet = el.sheet\n      if (!sheet) return\n\n      let count: number\n      try {\n        count = sheet.cssRules.length\n      } catch {\n        return // cross-origin or detached — skip rather than throw in a render path\n      }\n\n      const key = getStyleSheetKeyFromElement(el)\n      if (!base.stylesheets[key]) {\n        base.stylesheets[key] = adoptStyleSheetElement(\n          el\n        ) as unknown as GriffelRenderer[\"stylesheets\"][string]\n        stats.adoptedSheets++\n      }\n\n      const from = watermarks.get(el) ?? 0\n      if (from === count) return\n      for (let i = from; i < count; i++) {\n        const ruleKey = ruleClassKey(sheet.cssRules[i].cssText)\n        if (ruleKey !== null) seen.add(ruleKey)\n      }\n      watermarks.set(el, count)\n    })\n  }\n\n  if (mode !== \"off\") {\n    const originalInsert = base.insertCSSRules.bind(base)\n    base.insertCSSRules = (cssRules) => {\n      syncFromDOM()\n      originalInsert(cssRules)\n    }\n  }\n\n  renderer = base\n  return renderer\n}\n"],"names":["renderer","getVoltRenderer","doc","mode","ensureCoreTokens","seen","watermarks","base","createDOMRenderer","GRIFFEL_CLASS_SALT","ensureInsertionPoint","OWNER_ATTR","ruleCSS","key","ruleClassKey","syncFromDOM","BUCKET_ATTR","el","sheet","count","getStyleSheetKeyFromElement","adoptStyleSheetElement","from","i","ruleKey","originalInsert","cssRules"],"mappings":";;;;;;;;AAsBA,IAAIA,IAAmC;AAuBhC,SAASC,EACdC,IAAgB,UAChBC,IAAkB,cACD;AACjB,MAAIH,EAAU,QAAOA;AAIrB,EAAAI,EAAiBF,CAAG;AAGpB,QAAMG,wBAAW,IAAA,GAEXC,wBAAiB,QAAA,GAEjBC,IAAOC,EAAkBN,GAAK;AAAA,IAClC,mBAAmBO;AAAA,IACnB,gBAAgBC,EAAqBR,CAAG;AAAA,IACxC,wBAAwB,EAAE,CAACS,CAAU,GAAGF,EAAA;AAAA,IACxC,wBACEN,MAAS,QACL,SACA,CAACS,MAAoB;AACnB,YAAMC,IAAMC,EAAaF,CAAO;AAChC,aAAIC,MAAQ,QAAQR,EAAK,IAAIQ,CAAG,IAEvB,MAELA,MAAQ,QAAMR,EAAK,IAAIQ,CAAG,GAEvB;AAAA,IACT;AAAA,EAAA,CACP;AAiBD,WAASE,IAAoB;AAI3B,IAHYb,EAAI,KAAK;AAAA,MACnB,SAASc,CAAW,KAAKL,CAAU,KAAKF,CAAkB;AAAA,IAAA,EAExD,QAAQ,CAACQ,MAAO;AAClB,YAAMC,IAAQD,EAAG;AACjB,UAAI,CAACC,EAAO;AAEZ,UAAIC;AACJ,UAAI;AACF,QAAAA,IAAQD,EAAM,SAAS;AAAA,MACzB,QAAQ;AACN;AAAA,MACF;AAEA,YAAML,IAAMO,EAA4BH,CAAE;AAC1C,MAAKV,EAAK,YAAYM,CAAG,MACvBN,EAAK,YAAYM,CAAG,IAAIQ;AAAA,QACtBJ;AAAA,MAAA;AAKJ,YAAMK,IAAOhB,EAAW,IAAIW,CAAE,KAAK;AACnC,UAAIK,MAASH,GACb;AAAA,iBAASI,IAAID,GAAMC,IAAIJ,GAAOI,KAAK;AACjC,gBAAMC,IAAUV,EAAaI,EAAM,SAASK,CAAC,EAAE,OAAO;AACtD,UAAIC,MAAY,QAAMnB,EAAK,IAAImB,CAAO;AAAA,QACxC;AACA,QAAAlB,EAAW,IAAIW,GAAIE,CAAK;AAAA;AAAA,IAC1B,CAAC;AAAA,EACH;AAEA,MAAIhB,MAAS,OAAO;AAClB,UAAMsB,IAAiBlB,EAAK,eAAe,KAAKA,CAAI;AACpD,IAAAA,EAAK,iBAAiB,CAACmB,MAAa;AAClC,MAAAX,EAAA,GACAU,EAAeC,CAAQ;AAAA,IACzB;AAAA,EACF;AAEA,SAAA1B,IAAWO,GACJP;AACT;"}

package/dist/renderer/insertion-point.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The v2 insertion anchor, at `head.firstChild`.
+ *
+ * WHY THE TOP OF <head>, NOT THE BOTTOM. This was measured in a real browser rather than reasoned
+ * about, and both of the obvious alternatives failed:
+ *
+ * v1 let a consumer's utility class win by DELETION — tailwind-merge stripped the conflicting base
+ * class before render. Griffel cannot delete a class whose meaning it does not know, so an override
+ * has to be won on the cascade instead. The deployed v1 `style.css` emits its utilities UNLAYERED
+ * at (0,1,0), so v2 atoms anchored at the END of <head> are later in source order at equal
+ * specificity and beat the consumer.
+ *
+ * The two "make ourselves weaker" fixes both lost: `:where()` (specificity 0) and `@layer`
+ * (layered always loses to unlayered) are each beaten by a bare `button { … }` element reset —
+ * precisely what a Tailwind preflight ships, and most consumer MFEs run their own Tailwind. The
+ * requirement is to sit strictly between an element selector and a class, and specificity has no
+ * such slot.
+ *
+ * Anchoring at the TOP makes every consumer stylesheet — already present or injected later — come
+ * after us in source order. Equal-specificity consumer utilities then win by order, while element
+ * selectors still lose to us on specificity. No rule rewriting, so pseudo-elements and bucket
+ * ordering are untouched.
+ *
+ * The anchor is deliberately shared across copies: Griffel's bucket placement is first-writer-wins
+ * and page-global, so one anchor keeps ordering globally coherent rather than fighting it.
+ */
+export declare function ensureInsertionPoint(doc: Document): HTMLElement;
+/**
+ * The anchor's correctness is positional, so it has to be asserted rather than assumed. Turns the
+ * residual risk — "unless something injects a stylesheet above ours" — into a check.
+ */
+export declare function assertAnchorIsFirstInHead(doc?: Document): {
+    ok: boolean;
+    reason?: string;
+};

package/dist/renderer/insertion-point.js

@@ -0,0 +1,30 @@
+import { INSERTION_POINT_ATTR as n } from "./contract.js";
+import { GRIFFEL_CLASS_SALT as i } from "../tokens/class-salt.generated.js";
+function d(t) {
+  const r = t.head.querySelector(
+    `meta[${n}]`
+  );
+  if (r) return r;
+  const e = t.createElement("meta");
+  return e.setAttribute("name", "volt-v2-insertion-point"), e.setAttribute(n, i), t.head.insertBefore(e, t.head.firstChild), e;
+}
+function m(t = document) {
+  const r = t.head.querySelector(
+    `meta[${n}]`
+  );
+  if (!r)
+    return { ok: !1, reason: "no v2 insertion anchor present in <head>" };
+  if (t.head.firstChild !== r) {
+    const e = t.head.firstChild;
+    return {
+      ok: !1,
+      reason: `v2 anchor is not head.firstChild — ${e instanceof Element ? `<${e.tagName.toLowerCase()}${e.id ? ` id="${e.id}"` : ""}>` : String(e == null ? void 0 : e.nodeName)} precedes it, so consumer overrides anchored after it may lose`
+    };
+  }
+  return { ok: !0 };
+}
+export {
+  m as assertAnchorIsFirstInHead,
+  d as ensureInsertionPoint
+};
+//# sourceMappingURL=insertion-point.js.map

package/dist/renderer/insertion-point.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insertion-point.js","sources":["../../src/renderer/insertion-point.ts"],"sourcesContent":["import { GRIFFEL_CLASS_SALT, INSERTION_POINT_ATTR } from \"./contract\"\n\n/**\n * The v2 insertion anchor, at `head.firstChild`.\n *\n * WHY THE TOP OF <head>, NOT THE BOTTOM. This was measured in a real browser rather than reasoned\n * about, and both of the obvious alternatives failed:\n *\n * v1 let a consumer's utility class win by DELETION — tailwind-merge stripped the conflicting base\n * class before render. Griffel cannot delete a class whose meaning it does not know, so an override\n * has to be won on the cascade instead. The deployed v1 `style.css` emits its utilities UNLAYERED\n * at (0,1,0), so v2 atoms anchored at the END of <head> are later in source order at equal\n * specificity and beat the consumer.\n *\n * The two \"make ourselves weaker\" fixes both lost: `:where()` (specificity 0) and `@layer`\n * (layered always loses to unlayered) are each beaten by a bare `button { … }` element reset —\n * precisely what a Tailwind preflight ships, and most consumer MFEs run their own Tailwind. The\n * requirement is to sit strictly between an element selector and a class, and specificity has no\n * such slot.\n *\n * Anchoring at the TOP makes every consumer stylesheet — already present or injected later — come\n * after us in source order. Equal-specificity consumer utilities then win by order, while element\n * selectors still lose to us on specificity. No rule rewriting, so pseudo-elements and bucket\n * ordering are untouched.\n *\n * The anchor is deliberately shared across copies: Griffel's bucket placement is first-writer-wins\n * and page-global, so one anchor keeps ordering globally coherent rather than fighting it.\n */\nexport function ensureInsertionPoint(doc: Document): HTMLElement {\n  const existing = doc.head.querySelector<HTMLElement>(\n    `meta[${INSERTION_POINT_ATTR}]`\n  )\n  if (existing) return existing\n\n  const marker = doc.createElement(\"meta\")\n  marker.setAttribute(\"name\", \"volt-v2-insertion-point\")\n  marker.setAttribute(INSERTION_POINT_ATTR, GRIFFEL_CLASS_SALT)\n  doc.head.insertBefore(marker, doc.head.firstChild)\n  return marker\n}\n\n/**\n * The anchor's correctness is positional, so it has to be asserted rather than assumed. Turns the\n * residual risk — \"unless something injects a stylesheet above ours\" — into a check.\n */\nexport function assertAnchorIsFirstInHead(doc: Document = document): {\n  ok: boolean\n  reason?: string\n} {\n  const marker = doc.head.querySelector<HTMLElement>(\n    `meta[${INSERTION_POINT_ATTR}]`\n  )\n  if (!marker) {\n    return { ok: false, reason: \"no v2 insertion anchor present in <head>\" }\n  }\n  if (doc.head.firstChild !== marker) {\n    const intruder = doc.head.firstChild\n    const desc =\n      intruder instanceof Element\n        ? `<${intruder.tagName.toLowerCase()}${intruder.id ? ` id=\"${intruder.id}\"` : \"\"}>`\n        : String(intruder?.nodeName)\n    return {\n      ok: false,\n      reason: `v2 anchor is not head.firstChild — ${desc} precedes it, so consumer overrides anchored after it may lose`,\n    }\n  }\n  return { ok: true }\n}\n"],"names":["ensureInsertionPoint","doc","existing","INSERTION_POINT_ATTR","marker","GRIFFEL_CLASS_SALT","assertAnchorIsFirstInHead","intruder"],"mappings":";;AA4BO,SAASA,EAAqBC,GAA4B;AAC/D,QAAMC,IAAWD,EAAI,KAAK;AAAA,IACxB,QAAQE,CAAoB;AAAA,EAAA;AAE9B,MAAID,EAAU,QAAOA;AAErB,QAAME,IAASH,EAAI,cAAc,MAAM;AACvC,SAAAG,EAAO,aAAa,QAAQ,yBAAyB,GACrDA,EAAO,aAAaD,GAAsBE,CAAkB,GAC5DJ,EAAI,KAAK,aAAaG,GAAQH,EAAI,KAAK,UAAU,GAC1CG;AACT;AAMO,SAASE,EAA0BL,IAAgB,UAGxD;AACA,QAAMG,IAASH,EAAI,KAAK;AAAA,IACtB,QAAQE,CAAoB;AAAA,EAAA;AAE9B,MAAI,CAACC;AACH,WAAO,EAAE,IAAI,IAAO,QAAQ,2CAAA;AAE9B,MAAIH,EAAI,KAAK,eAAeG,GAAQ;AAClC,UAAMG,IAAWN,EAAI,KAAK;AAK1B,WAAO;AAAA,MACL,IAAI;AAAA,MACJ,QAAQ,sCALRM,aAAoB,UAChB,IAAIA,EAAS,QAAQ,aAAa,GAAGA,EAAS,KAAK,QAAQA,EAAS,EAAE,MAAM,EAAE,MAC9E,OAAOA,KAAA,gBAAAA,EAAU,QAAQ,CAGqB;AAAA,IAAA;AAAA,EAEtD;AACA,SAAO,EAAE,IAAI,GAAA;AACf;"}

package/dist/renderer/rule-key.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Stable identity for an inserted rule, used by cross-copy dedup.
+ *
+ * Keyed on the atom class name rather than the rule text, deliberately: rule text read back out of
+ * the CSSOM has been re-serialised by the browser and will not byte-match the string we generated,
+ * whereas the class name is a content hash and is therefore invariant.
+ *
+ * This is all that survives of the PoC's `rule-transform.ts`. The rest of that file — a `:where()`
+ * / `@layer` rewriting layer built on a hand-rolled brace-counting CSS parser, with an admitted
+ * mis-parse on braces inside string literals — was never called from `src/` at all. The
+ * insertion-point decision superseded it, having measured that both `:where()` and `@layer` lose
+ * to a bare `button {}` element reset. Deleted rather than carried forward.
+ */
+export declare function ruleClassKey(rule: string): string | null;

package/dist/renderer/rule-key.js

@@ -0,0 +1,12 @@
+function t(e) {
+  const r = /^@(?:-webkit-)?keyframes\s+([A-Za-z0-9_-]+)/.exec(
+    e.trim()
+  );
+  if (r) return `@kf:${r[1]}`;
+  const s = /\.([A-Za-z0-9_-]+)/.exec(e);
+  return s ? s[1] : null;
+}
+export {
+  t as ruleClassKey
+};
+//# sourceMappingURL=rule-key.js.map

package/dist/renderer/rule-key.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rule-key.js","sources":["../../src/renderer/rule-key.ts"],"sourcesContent":["/**\n * Stable identity for an inserted rule, used by cross-copy dedup.\n *\n * Keyed on the atom class name rather than the rule text, deliberately: rule text read back out of\n * the CSSOM has been re-serialised by the browser and will not byte-match the string we generated,\n * whereas the class name is a content hash and is therefore invariant.\n *\n * This is all that survives of the PoC's `rule-transform.ts`. The rest of that file — a `:where()`\n * / `@layer` rewriting layer built on a hand-rolled brace-counting CSS parser, with an admitted\n * mis-parse on braces inside string literals — was never called from `src/` at all. The\n * insertion-point decision superseded it, having measured that both `:where()` and `@layer` lose\n * to a bare `button {}` element reset. Deleted rather than carried forward.\n */\nexport function ruleClassKey(rule: string): string | null {\n  const keyframes = /^@(?:-webkit-)?keyframes\\s+([A-Za-z0-9_-]+)/.exec(\n    rule.trim()\n  )\n  if (keyframes) return `@kf:${keyframes[1]}`\n  const cls = /\\.([A-Za-z0-9_-]+)/.exec(rule)\n  return cls ? cls[1] : null\n}\n"],"names":["ruleClassKey","rule","keyframes","cls"],"mappings":"AAaO,SAASA,EAAaC,GAA6B;AACxD,QAAMC,IAAY,8CAA8C;AAAA,IAC9DD,EAAK,KAAA;AAAA,EAAK;AAEZ,MAAIC,EAAW,QAAO,OAAOA,EAAU,CAAC,CAAC;AACzC,QAAMC,IAAM,qBAAqB,KAAKF,CAAI;AAC1C,SAAOE,IAAMA,EAAI,CAAC,IAAI;AACxB;"}

package/dist/renderer/sheet-adoption.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Reimplementations of two Griffel internals that are NOT part of its public API.
+ *
+ * This is the highest-risk file in the package, and the risk is worth stating plainly: cross-copy
+ * dedup is the entire reason this architecture chose Griffel over static CSS, and it cannot be
+ * built on public API. Griffel exports `rehydrateRendererCache`, but that reads
+ * `styleElement.textContent` — and rules inserted on the client go in via `sheet.insertRule()`,
+ * which mutates the CSSOM and leaves `textContent` empty. It therefore only ever works for
+ * SSR-emitted markup.
+ *
+ * So reaching the same seam on the client means mirroring these helpers, which couples us to
+ * `@griffel/core`'s private `getStyleSheetForBucket`. If Griffel changes its bucket-key algorithm,
+ * adoption mis-keys and dedup is silently lost WHILE THE RUNTIME COST IS STILL PAID — the worst
+ * available failure shape, and nothing reports it.
+ *
+ * Two mitigations, both mandatory: `@griffel/core` is pinned exact (not a range), and
+ * `griffel-contract.test.ts` verifies the key we compute is actually a key Griffel used. That
+ * converts a silent degradation into a blocked upgrade. See DECISIONS.md D3.
+ */
+/** Mirrors `getStyleSheetKey` in @griffel/core/src/renderer/getStyleSheetForBucket.ts. */
+export declare function getStyleSheetKey(bucketName: string, mediaValue: string, priority: string | number): string;
+/** Mirrors `getStyleSheetKeyFromElement`. */
+export declare function getStyleSheetKeyFromElement(el: HTMLStyleElement): string;
+export type IsomorphicStyleSheet = {
+    elementAttributes: Record<string, string>;
+    insertRule: (rule: string) => number | undefined;
+    element: HTMLStyleElement;
+    bucketName: string;
+    cssRules: () => string[];
+};
+/** Mirrors `createIsomorphicStyleSheetFromElement`, so an existing element can be adopted as-is. */
+export declare function adoptStyleSheetElement(el: HTMLStyleElement): IsomorphicStyleSheet;

package/dist/renderer/sheet-adoption.js

@@ -0,0 +1,30 @@
+import { DATA_BUCKET_ATTR as n, DATA_PRIORITY_ATTR as u, DATA_CONTAINER_ATTR as o } from "../node_modules/@griffel/core/src/constants.js";
+function i(t, r, e) {
+  return t === "m" || t === "x" ? t + r + e : t + e;
+}
+function T(t) {
+  const r = t.getAttribute(n) ?? "", e = t.getAttribute(u) ?? "0", s = t.getAttribute(o);
+  return i(r, s ?? (t.media || "0"), e);
+}
+function c(t) {
+  const r = {};
+  for (const e of Array.from(t.attributes))
+    r[e.name] = e.value;
+  return {
+    elementAttributes: r,
+    element: t,
+    bucketName: r[n],
+    insertRule(e) {
+      if (t.sheet) return t.sheet.insertRule(e, t.sheet.cssRules.length);
+    },
+    cssRules() {
+      return t.sheet ? Array.from(t.sheet.cssRules).map((e) => e.cssText) : [];
+    }
+  };
+}
+export {
+  c as adoptStyleSheetElement,
+  i as getStyleSheetKey,
+  T as getStyleSheetKeyFromElement
+};
+//# sourceMappingURL=sheet-adoption.js.map

package/dist/renderer/sheet-adoption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-adoption.js","sources":["../../src/renderer/sheet-adoption.ts"],"sourcesContent":["import { BUCKET_ATTR, CONTAINER_ATTR, PRIORITY_ATTR } from \"./contract\"\n\n/**\n * Reimplementations of two Griffel internals that are NOT part of its public API.\n *\n * This is the highest-risk file in the package, and the risk is worth stating plainly: cross-copy\n * dedup is the entire reason this architecture chose Griffel over static CSS, and it cannot be\n * built on public API. Griffel exports `rehydrateRendererCache`, but that reads\n * `styleElement.textContent` — and rules inserted on the client go in via `sheet.insertRule()`,\n * which mutates the CSSOM and leaves `textContent` empty. It therefore only ever works for\n * SSR-emitted markup.\n *\n * So reaching the same seam on the client means mirroring these helpers, which couples us to\n * `@griffel/core`'s private `getStyleSheetForBucket`. If Griffel changes its bucket-key algorithm,\n * adoption mis-keys and dedup is silently lost WHILE THE RUNTIME COST IS STILL PAID — the worst\n * available failure shape, and nothing reports it.\n *\n * Two mitigations, both mandatory: `@griffel/core` is pinned exact (not a range), and\n * `griffel-contract.test.ts` verifies the key we compute is actually a key Griffel used. That\n * converts a silent degradation into a blocked upgrade. See DECISIONS.md D3.\n */\n\n/** Mirrors `getStyleSheetKey` in @griffel/core/src/renderer/getStyleSheetForBucket.ts. */\nexport function getStyleSheetKey(\n  bucketName: string,\n  mediaValue: string,\n  priority: string | number\n): string {\n  if (bucketName === \"m\" || bucketName === \"x\") {\n    return bucketName + mediaValue + priority\n  }\n  return bucketName + priority\n}\n\n/** Mirrors `getStyleSheetKeyFromElement`. */\nexport function getStyleSheetKeyFromElement(el: HTMLStyleElement): string {\n  const bucketName = el.getAttribute(BUCKET_ATTR) ?? \"\"\n  const priority = el.getAttribute(PRIORITY_ATTR) ?? \"0\"\n  const container = el.getAttribute(CONTAINER_ATTR)\n  return getStyleSheetKey(bucketName, container ?? (el.media || \"0\"), priority)\n}\n\nexport type IsomorphicStyleSheet = {\n  elementAttributes: Record<string, string>\n  insertRule: (rule: string) => number | undefined\n  element: HTMLStyleElement\n  bucketName: string\n  cssRules: () => string[]\n}\n\n/** Mirrors `createIsomorphicStyleSheetFromElement`, so an existing element can be adopted as-is. */\nexport function adoptStyleSheetElement(\n  el: HTMLStyleElement\n): IsomorphicStyleSheet {\n  const elementAttributes: Record<string, string> = {}\n  for (const attr of Array.from(el.attributes)) {\n    elementAttributes[attr.name] = attr.value\n  }\n\n  return {\n    elementAttributes,\n    element: el,\n    bucketName: elementAttributes[BUCKET_ATTR],\n    insertRule(rule: string) {\n      if (el.sheet) return el.sheet.insertRule(rule, el.sheet.cssRules.length)\n      return undefined\n    },\n    cssRules() {\n      if (el.sheet) return Array.from(el.sheet.cssRules).map((r) => r.cssText)\n      return []\n    },\n  }\n}\n"],"names":["getStyleSheetKey","bucketName","mediaValue","priority","getStyleSheetKeyFromElement","el","BUCKET_ATTR","PRIORITY_ATTR","container","CONTAINER_ATTR","adoptStyleSheetElement","elementAttributes","attr","rule","r"],"mappings":";AAuBO,SAASA,EACdC,GACAC,GACAC,GACQ;AACR,SAAIF,MAAe,OAAOA,MAAe,MAChCA,IAAaC,IAAaC,IAE5BF,IAAaE;AACtB;AAGO,SAASC,EAA4BC,GAA8B;AACxE,QAAMJ,IAAaI,EAAG,aAAaC,CAAW,KAAK,IAC7CH,IAAWE,EAAG,aAAaE,CAAa,KAAK,KAC7CC,IAAYH,EAAG,aAAaI,CAAc;AAChD,SAAOT,EAAiBC,GAAYO,MAAcH,EAAG,SAAS,MAAMF,CAAQ;AAC9E;AAWO,SAASO,EACdL,GACsB;AACtB,QAAMM,IAA4C,CAAA;AAClD,aAAWC,KAAQ,MAAM,KAAKP,EAAG,UAAU;AACzC,IAAAM,EAAkBC,EAAK,IAAI,IAAIA,EAAK;AAGtC,SAAO;AAAA,IACL,mBAAAD;AAAA,IACA,SAASN;AAAA,IACT,YAAYM,EAAkBL,CAAW;AAAA,IACzC,WAAWO,GAAc;AACvB,UAAIR,EAAG,MAAO,QAAOA,EAAG,MAAM,WAAWQ,GAAMR,EAAG,MAAM,SAAS,MAAM;AAAA,IAEzE;AAAA,IACA,WAAW;AACT,aAAIA,EAAG,QAAc,MAAM,KAAKA,EAAG,MAAM,QAAQ,EAAE,IAAI,CAACS,MAAMA,EAAE,OAAO,IAChE,CAAA;AAAA,IACT;AAAA,EAAA;AAEJ;"}

package/dist/styles/make-styles.d.ts

@@ -0,0 +1,43 @@
+import { type GriffelResetStyle, type GriffelStyle } from "@griffel/core";
+/**
+ * Provider-free style hooks.
+ *
+ * `@griffel/react`'s `makeStyles` resolves its renderer from a React context whose default is a
+ * renderer we do not control — using it would mean either shipping ours through `RendererProvider`
+ * (so every consumer has to mount something) or silently rendering with an unsalted, unanchored
+ * default. `@griffel/core`'s `makeStyles(stylesBySlots, factory?)` returns a plain function taking
+ * `{ dir, renderer }`, so we hand it our own renderer and consumers mount nothing.
+ *
+ * Insertion happens synchronously inside the returned compute call, i.e. during render and before
+ * paint, so a v2 element is styled at its first paint. The PoC wrapped this in a custom insertion
+ * factory mirroring Griffel's; that existed to keep the bench harness's stack-walking attribution
+ * working, which is a measurement requirement rather than a product one. Griffel's default factory
+ * is used here instead.
+ */
+export type VoltStyles<Slots extends string> = Record<Slots, GriffelStyle>;
+/**
+ * One class per slot, atoms deduped against whatever is already on the page.
+ *
+ * **The generic is over the object, not over the key union, and that is load-bearing.** The obvious
+ * signature — `<Slots extends string>(styles: Record<Slots, GriffelStyle>) => () => Record<Slots, string>`
+ * — does not do what it looks like: inferring a type parameter from `Record<Slots, …>` against an
+ * object literal widens `Slots` to `string`, so the result is `Record<string, string>` and **every
+ * slot name typechecks, including ones that do not exist**.
+ *
+ * That is not theoretical. OptionCard read `styles.card` in two places and no `card` slot was ever
+ * declared, so the component rendered with no card styling at all — v1's card properties had been
+ * put on the `group` slot instead. `tsc` was clean throughout, 322 tests passed, and only a pixel
+ * diff caught it.
+ *
+ * Inferring `S` as the literal object type makes `keyof S` the real union, so a missing slot is a
+ * compile error.
+ */
+export declare function makeVoltStyles<S extends Record<string, GriffelStyle>>(styles: S): () => Record<keyof S & string, string>;
+/**
+ * One monolithic class for an element's invariant base, rather than atoms.
+ *
+ * Lands in Griffel's `r` bucket, which sorts before every atom bucket, so variant atoms override it
+ * by source order without any specificity escalation. Exactly one reset class per element —
+ * Griffel cannot merge two.
+ */
+export declare function makeVoltResetStyles(styles: GriffelResetStyle): () => string;

package/dist/styles/make-styles.js

@@ -0,0 +1,22 @@
+import { getVoltRenderer as r } from "../renderer/index.js";
+import { makeStyles as n } from "../node_modules/@griffel/core/src/makeStyles.js";
+import { makeResetStyles as l } from "../node_modules/@griffel/core/src/makeResetStyles.js";
+function i(e) {
+  const t = n(
+    e
+  );
+  return function() {
+    return t({ dir: "ltr", renderer: r() });
+  };
+}
+function c(e) {
+  const t = l(e);
+  return function() {
+    return t({ dir: "ltr", renderer: r() });
+  };
+}
+export {
+  c as makeVoltResetStyles,
+  i as makeVoltStyles
+};
+//# sourceMappingURL=make-styles.js.map

package/dist/styles/make-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"make-styles.js","sources":["../../src/styles/make-styles.ts"],"sourcesContent":["import {\n  makeResetStyles as coreMakeResetStyles,\n  makeStyles as coreMakeStyles,\n  type GriffelResetStyle,\n  type GriffelStyle,\n} from \"@griffel/core\"\n\nimport { getVoltRenderer } from \"../renderer\"\n\n/**\n * Provider-free style hooks.\n *\n * `@griffel/react`'s `makeStyles` resolves its renderer from a React context whose default is a\n * renderer we do not control — using it would mean either shipping ours through `RendererProvider`\n * (so every consumer has to mount something) or silently rendering with an unsalted, unanchored\n * default. `@griffel/core`'s `makeStyles(stylesBySlots, factory?)` returns a plain function taking\n * `{ dir, renderer }`, so we hand it our own renderer and consumers mount nothing.\n *\n * Insertion happens synchronously inside the returned compute call, i.e. during render and before\n * paint, so a v2 element is styled at its first paint. The PoC wrapped this in a custom insertion\n * factory mirroring Griffel's; that existed to keep the bench harness's stack-walking attribution\n * working, which is a measurement requirement rather than a product one. Griffel's default factory\n * is used here instead.\n */\n\nexport type VoltStyles<Slots extends string> = Record<Slots, GriffelStyle>\n\n/**\n * One class per slot, atoms deduped against whatever is already on the page.\n *\n * **The generic is over the object, not over the key union, and that is load-bearing.** The obvious\n * signature — `<Slots extends string>(styles: Record<Slots, GriffelStyle>) => () => Record<Slots, string>`\n * — does not do what it looks like: inferring a type parameter from `Record<Slots, …>` against an\n * object literal widens `Slots` to `string`, so the result is `Record<string, string>` and **every\n * slot name typechecks, including ones that do not exist**.\n *\n * That is not theoretical. OptionCard read `styles.card` in two places and no `card` slot was ever\n * declared, so the component rendered with no card styling at all — v1's card properties had been\n * put on the `group` slot instead. `tsc` was clean throughout, 322 tests passed, and only a pixel\n * diff caught it.\n *\n * Inferring `S` as the literal object type makes `keyof S` the real union, so a missing slot is a\n * compile error.\n */\nexport function makeVoltStyles<S extends Record<string, GriffelStyle>>(\n  styles: S\n): () => Record<keyof S & string, string> {\n  const compute = coreMakeStyles<keyof S & string>(\n    styles as VoltStyles<keyof S & string>\n  )\n  return function useVoltStyles(): Record<keyof S & string, string> {\n    return compute({ dir: \"ltr\", renderer: getVoltRenderer() })\n  }\n}\n\n/**\n * One monolithic class for an element's invariant base, rather than atoms.\n *\n * Lands in Griffel's `r` bucket, which sorts before every atom bucket, so variant atoms override it\n * by source order without any specificity escalation. Exactly one reset class per element —\n * Griffel cannot merge two.\n */\nexport function makeVoltResetStyles(styles: GriffelResetStyle): () => string {\n  const compute = coreMakeResetStyles(styles)\n  return function useVoltResetStyles(): string {\n    return compute({ dir: \"ltr\", renderer: getVoltRenderer() })\n  }\n}\n"],"names":["makeVoltStyles","styles","compute","coreMakeStyles","getVoltRenderer","makeVoltResetStyles","coreMakeResetStyles"],"mappings":";;;AA4CO,SAASA,EACdC,GACwC;AACxC,QAAMC,IAAUC;AAAAA,IACdF;AAAA,EAAA;AAEF,SAAO,WAA2D;AAChE,WAAOC,EAAQ,EAAE,KAAK,OAAO,UAAUE,EAAA,GAAmB;AAAA,EAC5D;AACF;AASO,SAASC,EAAoBJ,GAAyC;AAC3E,QAAMC,IAAUI,EAAoBL,CAAM;AAC1C,SAAO,WAAsC;AAC3C,WAAOC,EAAQ,EAAE,KAAK,OAAO,UAAUE,EAAA,GAAmB;AAAA,EAC5D;AACF;"}

package/dist/tokens/class-salt.generated.d.ts

@@ -0,0 +1,2 @@
+export declare const GRIFFEL_CLASS_SALT = "f407044b35";
+export declare const GRIFFEL_VERSION = "1.21.3";

package/dist/tokens/class-salt.generated.js

@@ -0,0 +1,5 @@
+const L = "f407044b35";
+export {
+  L as GRIFFEL_CLASS_SALT
+};
+//# sourceMappingURL=class-salt.generated.js.map

package/dist/tokens/class-salt.generated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"class-salt.generated.js","sources":["../../src/tokens/class-salt.generated.ts"],"sourcesContent":["/* GENERATED by scripts/generate-tokens.ts — do not edit. */\nexport const GRIFFEL_CLASS_SALT = \"f407044b35\"\nexport const GRIFFEL_VERSION = \"1.21.3\"\n"],"names":["GRIFFEL_CLASS_SALT"],"mappings":"AACO,MAAMA,IAAqB;"}

package/dist/tokens/core.generated.d.ts

@@ -0,0 +1,3 @@
+export declare const NS = "bf9a721";
+export declare const SHEET_HASH = "560832a";
+export declare const CSS = ":root,\n.light,\n[data-theme=\"light\"] {\n  --volt2-bf9a721-accent-1: #fcfdfe;\n  --volt2-bf9a721-accent-10: #004fa3;\n  --volt2-bf9a721-accent-11: #0f65bc;\n  --volt2-bf9a721-accent-12: #113157;\n  --volt2-bf9a721-accent-2: #f6fafe;\n  --volt2-bf9a721-accent-3: #ebf3fd;\n  --volt2-bf9a721-accent-4: #dcebfe;\n  --volt2-bf9a721-accent-5: #cbe1fe;\n  --volt2-bf9a721-accent-6: #b6d5fc;\n  --volt2-bf9a721-accent-7: #9dc3f2;\n  --volt2-bf9a721-accent-8: #7aabe7;\n  --volt2-bf9a721-accent-9: #005eb4;\n  --volt2-bf9a721-accent-a1: #0055aa03;\n  --volt2-bf9a721-accent-a10: #004fa3;\n  --volt2-bf9a721-accent-a11: #005bb8f0;\n  --volt2-bf9a721-accent-a12: #00224bee;\n  --volt2-bf9a721-accent-a2: #0072e309;\n  --volt2-bf9a721-accent-a3: #0066e614;\n  --volt2-bf9a721-accent-a4: #006ef823;\n  --volt2-bf9a721-accent-a5: #006cfb34;\n  --volt2-bf9a721-accent-a6: #006df549;\n  --volt2-bf9a721-accent-a7: #0063de62;\n  --volt2-bf9a721-accent-a8: #005ed185;\n  --volt2-bf9a721-accent-a9: #005eb4;\n  --volt2-bf9a721-accent-contrast: #fff;\n  --volt2-bf9a721-accent-indicator: #005eb4;\n  --volt2-bf9a721-accent-surface: #f4f9fecc;\n  --volt2-bf9a721-accent-track: #005eb4;\n  --volt2-bf9a721-body: #ffffff;\n  --volt2-bf9a721-container-2xl: 42rem;\n  --volt2-bf9a721-container-3xl: 48rem;\n  --volt2-bf9a721-container-4xl: 56rem;\n  --volt2-bf9a721-container-5xl: 64rem;\n  --volt2-bf9a721-container-lg: 32rem;\n  --volt2-bf9a721-container-md: 28rem;\n  --volt2-bf9a721-container-sm: 24rem;\n  --volt2-bf9a721-container-xl: 36rem;\n  --volt2-bf9a721-error-1: #fffcfc;\n  --volt2-bf9a721-error-10: #bf0001;\n  --volt2-bf9a721-error-11: #d4201e;\n  --volt2-bf9a721-error-12: #661713;\n  --volt2-bf9a721-error-2: #fff7f6;\n  --volt2-bf9a721-error-3: #ffebe8;\n  --volt2-bf9a721-error-4: #ffdbd5;\n  --volt2-bf9a721-error-5: #ffcdc4;\n  --volt2-bf9a721-error-6: #ffbcb3;\n  --volt2-bf9a721-error-7: #f8a89d;\n  --volt2-bf9a721-error-8: #ef8d80;\n  --volt2-bf9a721-error-9: #d01919;\n  --volt2-bf9a721-error-a1: #ff000003;\n  --volt2-bf9a721-error-a10: #bf0001;\n  --volt2-bf9a721-error-a11: #ce0200e1;\n  --volt2-bf9a721-error-a12: #5a0400ec;\n  --volt2-bf9a721-error-a2: #ff1d0009;\n  --volt2-bf9a721-error-a3: #ff220017;\n  --volt2-bf9a721-error-a4: #ff25002a;\n  --volt2-bf9a721-error-a5: #ff27013b;\n  --volt2-bf9a721-error-a6: #ff1f004c;\n  --volt2-bf9a721-error-a7: #ed1d0062;\n  --volt2-bf9a721-error-a8: #df1b007f;\n  --volt2-bf9a721-error-a9: #cb0000e6;\n  --volt2-bf9a721-error-contrast: #fff;\n  --volt2-bf9a721-error-indicator: #d01919;\n  --volt2-bf9a721-error-surface: #fff5f4cc;\n  --volt2-bf9a721-error-track: #d01919;\n  --volt2-bf9a721-font-weight-bold: 700;\n  --volt2-bf9a721-font-weight-medium: 500;\n  --volt2-bf9a721-font-weight-normal: 400;\n  --volt2-bf9a721-font-weight-semibold: 600;\n  --volt2-bf9a721-gray-1: #fdfcfd;\n  --volt2-bf9a721-gray-10: #84828e;\n  --volt2-bf9a721-gray-11: #65636d;\n  --volt2-bf9a721-gray-12: #211f26;\n  --volt2-bf9a721-gray-2: #faf9fb;\n  --volt2-bf9a721-gray-3: #f2eff3;\n  --volt2-bf9a721-gray-4: #eae7ec;\n  --volt2-bf9a721-gray-5: #e3dfe6;\n  --volt2-bf9a721-gray-6: #dbd8e0;\n  --volt2-bf9a721-gray-7: #d0cdd7;\n  --volt2-bf9a721-gray-8: #bcbac7;\n  --volt2-bf9a721-gray-9: #8e8c99;\n  --volt2-bf9a721-gray-a1: #55005503;\n  --volt2-bf9a721-gray-a10: #0500197d;\n  --volt2-bf9a721-gray-a11: #0400119c;\n  --volt2-bf9a721-gray-a12: #020008e0;\n  --volt2-bf9a721-gray-a2: #2b005506;\n  --volt2-bf9a721-gray-a3: #30004010;\n  --volt2-bf9a721-gray-a4: #20003618;\n  --volt2-bf9a721-gray-a5: #20003820;\n  --volt2-bf9a721-gray-a6: #14003527;\n  --volt2-bf9a721-gray-a7: #10003332;\n  --volt2-bf9a721-gray-a8: #08003145;\n  --volt2-bf9a721-gray-a9: #05001d73;\n  --volt2-bf9a721-gray-contrast: #ffffff;\n  --volt2-bf9a721-gray-indicator: #8e8c99;\n  --volt2-bf9a721-gray-surface: #ffffffcc;\n  --volt2-bf9a721-gray-track: #8e8c99;\n  --volt2-bf9a721-info-1: #fbfdff;\n  --volt2-bf9a721-info-10: #0588f0;\n  --volt2-bf9a721-info-11: #0d74ce;\n  --volt2-bf9a721-info-12: #113264;\n  --volt2-bf9a721-info-2: #f4faff;\n  --volt2-bf9a721-info-3: #e6f4fe;\n  --volt2-bf9a721-info-4: #d5efff;\n  --volt2-bf9a721-info-5: #c2e5ff;\n  --volt2-bf9a721-info-6: #acd8fc;\n  --volt2-bf9a721-info-7: #8ec8f6;\n  --volt2-bf9a721-info-8: #5eb1ef;\n  --volt2-bf9a721-info-9: #0090ff;\n  --volt2-bf9a721-info-a1: #0080ff04;\n  --volt2-bf9a721-info-a10: #0086f0fa;\n  --volt2-bf9a721-info-a11: #006dcbf2;\n  --volt2-bf9a721-info-a12: #002359ee;\n  --volt2-bf9a721-info-a2: #008cff0b;\n  --volt2-bf9a721-info-a3: #008ff519;\n  --volt2-bf9a721-info-a4: #009eff2a;\n  --volt2-bf9a721-info-a5: #0093ff3d;\n  --volt2-bf9a721-info-a6: #0088f653;\n  --volt2-bf9a721-info-a7: #0083eb71;\n  --volt2-bf9a721-info-a8: #0084e6a1;\n  --volt2-bf9a721-info-a9: #0090ff;\n  --volt2-bf9a721-info-contrast: #ffffff;\n  --volt2-bf9a721-info-indicator: #0090ff;\n  --volt2-bf9a721-info-surface: #f1f9ffcc;\n  --volt2-bf9a721-info-track: #0090ff;\n  --volt2-bf9a721-leading-2xl: 2rem;\n  --volt2-bf9a721-leading-3xl: 2.25rem;\n  --volt2-bf9a721-leading-base: 1.5rem;\n  --volt2-bf9a721-leading-lg: 1.75rem;\n  --volt2-bf9a721-leading-sm: 1.25rem;\n  --volt2-bf9a721-leading-xl: 1.75rem;\n  --volt2-bf9a721-leading-xs: 1rem;\n  --volt2-bf9a721-level-1: var(--volt2-bf9a721-gray-1);\n  --volt2-bf9a721-radius-2xl: 1rem;\n  --volt2-bf9a721-radius-lg: 0.5rem;\n  --volt2-bf9a721-radius-md: 0.375rem;\n  --volt2-bf9a721-radius-sm: 0.25rem;\n  --volt2-bf9a721-radius-xl: 0.75rem;\n  --volt2-bf9a721-sem-accent-contrast: var(--volt2-bf9a721-accent-contrast);\n  --volt2-bf9a721-sem-accent-default: var(--volt2-bf9a721-accent-a12);\n  --volt2-bf9a721-sem-accent-disabled: var(--volt2-bf9a721-accent-a8);\n  --volt2-bf9a721-sem-accent-high-contrast: var(--volt2-bf9a721-accent-a12);\n  --volt2-bf9a721-sem-accent-light: var(--volt2-bf9a721-accent-a11);\n  --volt2-bf9a721-sem-accent-on-high-contrast: var(--volt2-bf9a721-accent-1);\n  --volt2-bf9a721-sem-accent-on-solid: var(--volt2-bf9a721-accent-contrast);\n  --volt2-bf9a721-sem-accent-soft: var(--volt2-bf9a721-accent-a3);\n  --volt2-bf9a721-sem-accent-soft-hover: var(--volt2-bf9a721-accent-a4);\n  --volt2-bf9a721-sem-accent-solid: var(--volt2-bf9a721-accent-a9);\n  --volt2-bf9a721-sem-accent-solid-hover: var(--volt2-bf9a721-accent-a10);\n  --volt2-bf9a721-sem-accent-surface: var(--volt2-bf9a721-accent-surface);\n  --volt2-bf9a721-sem-accent-surface-hover: var(--volt2-bf9a721-accent-a3);\n  --volt2-bf9a721-sem-accent-ui: var(--volt2-bf9a721-accent-a7);\n  --volt2-bf9a721-sem-accent-ui-hover: var(--volt2-bf9a721-accent-a8);\n  --volt2-bf9a721-sem-body: var(--volt2-bf9a721-body);\n  --volt2-bf9a721-sem-error-contrast: var(--volt2-bf9a721-error-contrast);\n  --volt2-bf9a721-sem-error-default: var(--volt2-bf9a721-error-a12);\n  --volt2-bf9a721-sem-error-disabled: var(--volt2-bf9a721-error-a8);\n  --volt2-bf9a721-sem-error-high-contrast: var(--volt2-bf9a721-error-a12);\n  --volt2-bf9a721-sem-error-light: var(--volt2-bf9a721-error-a11);\n  --volt2-bf9a721-sem-error-on-high-contrast: var(--volt2-bf9a721-error-1);\n  --volt2-bf9a721-sem-error-on-solid: var(--volt2-bf9a721-error-contrast);\n  --volt2-bf9a721-sem-error-soft: var(--volt2-bf9a721-error-a3);\n  --volt2-bf9a721-sem-error-soft-hover: var(--volt2-bf9a721-error-a4);\n  --volt2-bf9a721-sem-error-solid: var(--volt2-bf9a721-error-a9);\n  --volt2-bf9a721-sem-error-solid-hover: var(--volt2-bf9a721-error-a10);\n  --volt2-bf9a721-sem-error-surface: var(--volt2-bf9a721-error-surface);\n  --volt2-bf9a721-sem-error-surface-hover: var(--volt2-bf9a721-error-a3);\n  --volt2-bf9a721-sem-error-ui: var(--volt2-bf9a721-error-a7);\n  --volt2-bf9a721-sem-error-ui-hover: var(--volt2-bf9a721-error-a8);\n  --volt2-bf9a721-sem-gray-contrast: var(--volt2-bf9a721-gray-contrast);\n  --volt2-bf9a721-sem-gray-default: var(--volt2-bf9a721-gray-a12);\n  --volt2-bf9a721-sem-gray-disabled: var(--volt2-bf9a721-gray-a8);\n  --volt2-bf9a721-sem-gray-high-contrast: var(--volt2-bf9a721-gray-a12);\n  --volt2-bf9a721-sem-gray-light: var(--volt2-bf9a721-gray-a11);\n  --volt2-bf9a721-sem-gray-on-high-contrast: var(--volt2-bf9a721-gray-1);\n  --volt2-bf9a721-sem-gray-on-solid: var(--volt2-bf9a721-gray-contrast);\n  --volt2-bf9a721-sem-gray-soft: var(--volt2-bf9a721-gray-a3);\n  --volt2-bf9a721-sem-gray-soft-hover: var(--volt2-bf9a721-gray-a4);\n  --volt2-bf9a721-sem-gray-solid: var(--volt2-bf9a721-gray-a9);\n  --volt2-bf9a721-sem-gray-solid-hover: var(--volt2-bf9a721-gray-a10);\n  --volt2-bf9a721-sem-gray-surface: var(--volt2-bf9a721-gray-surface);\n  --volt2-bf9a721-sem-gray-surface-hover: var(--volt2-bf9a721-gray-a3);\n  --volt2-bf9a721-sem-gray-ui: var(--volt2-bf9a721-gray-a7);\n  --volt2-bf9a721-sem-gray-ui-hover: var(--volt2-bf9a721-gray-a8);\n  --volt2-bf9a721-sem-info-contrast: var(--volt2-bf9a721-info-contrast);\n  --volt2-bf9a721-sem-info-default: var(--volt2-bf9a721-info-a12);\n  --volt2-bf9a721-sem-info-disabled: var(--volt2-bf9a721-info-a8);\n  --volt2-bf9a721-sem-info-high-contrast: var(--volt2-bf9a721-info-a12);\n  --volt2-bf9a721-sem-info-light: var(--volt2-bf9a721-info-a11);\n  --volt2-bf9a721-sem-info-on-high-contrast: var(--volt2-bf9a721-info-1);\n  --volt2-bf9a721-sem-info-on-solid: var(--volt2-bf9a721-info-contrast);\n  --volt2-bf9a721-sem-info-soft: var(--volt2-bf9a721-info-a3);\n  --volt2-bf9a721-sem-info-soft-hover: var(--volt2-bf9a721-info-a4);\n  --volt2-bf9a721-sem-info-solid: var(--volt2-bf9a721-info-a9);\n  --volt2-bf9a721-sem-info-solid-hover: var(--volt2-bf9a721-info-a10);\n  --volt2-bf9a721-sem-info-surface: var(--volt2-bf9a721-info-surface);\n  --volt2-bf9a721-sem-info-surface-hover: var(--volt2-bf9a721-info-a3);\n  --volt2-bf9a721-sem-info-ui: var(--volt2-bf9a721-info-a7);\n  --volt2-bf9a721-sem-info-ui-hover: var(--volt2-bf9a721-info-a8);\n  --volt2-bf9a721-sem-level-1: var(--volt2-bf9a721-level-1);\n  --volt2-bf9a721-sem-level-2: var(--volt2-bf9a721-gray-2);\n  --volt2-bf9a721-sem-level-3: var(--volt2-bf9a721-gray-3);\n  --volt2-bf9a721-sem-success-contrast: var(--volt2-bf9a721-success-contrast);\n  --volt2-bf9a721-sem-success-default: var(--volt2-bf9a721-success-a12);\n  --volt2-bf9a721-sem-success-disabled: var(--volt2-bf9a721-success-a8);\n  --volt2-bf9a721-sem-success-high-contrast: var(--volt2-bf9a721-success-a12);\n  --volt2-bf9a721-sem-success-light: var(--volt2-bf9a721-success-a11);\n  --volt2-bf9a721-sem-success-on-high-contrast: var(--volt2-bf9a721-success-1);\n  --volt2-bf9a721-sem-success-on-solid: var(--volt2-bf9a721-success-contrast);\n  --volt2-bf9a721-sem-success-soft: var(--volt2-bf9a721-success-a3);\n  --volt2-bf9a721-sem-success-soft-hover: var(--volt2-bf9a721-success-a4);\n  --volt2-bf9a721-sem-success-solid: var(--volt2-bf9a721-success-a9);\n  --volt2-bf9a721-sem-success-solid-hover: var(--volt2-bf9a721-success-a10);\n  --volt2-bf9a721-sem-success-surface: var(--volt2-bf9a721-success-surface);\n  --volt2-bf9a721-sem-success-surface-hover: var(--volt2-bf9a721-success-a3);\n  --volt2-bf9a721-sem-success-ui: var(--volt2-bf9a721-success-a7);\n  --volt2-bf9a721-sem-success-ui-hover: var(--volt2-bf9a721-success-a8);\n  --volt2-bf9a721-sem-warning-contrast: var(--volt2-bf9a721-warning-contrast);\n  --volt2-bf9a721-sem-warning-default: var(--volt2-bf9a721-warning-a12);\n  --volt2-bf9a721-sem-warning-disabled: var(--volt2-bf9a721-warning-a8);\n  --volt2-bf9a721-sem-warning-high-contrast: var(--volt2-bf9a721-warning-a12);\n  --volt2-bf9a721-sem-warning-light: var(--volt2-bf9a721-warning-a11);\n  --volt2-bf9a721-sem-warning-on-high-contrast: var(--volt2-bf9a721-warning-1);\n  --volt2-bf9a721-sem-warning-on-solid: var(--volt2-bf9a721-warning-contrast);\n  --volt2-bf9a721-sem-warning-soft: var(--volt2-bf9a721-warning-a3);\n  --volt2-bf9a721-sem-warning-soft-hover: var(--volt2-bf9a721-warning-a4);\n  --volt2-bf9a721-sem-warning-solid: var(--volt2-bf9a721-warning-a9);\n  --volt2-bf9a721-sem-warning-solid-hover: var(--volt2-bf9a721-warning-a10);\n  --volt2-bf9a721-sem-warning-surface: var(--volt2-bf9a721-warning-surface);\n  --volt2-bf9a721-sem-warning-surface-hover: var(--volt2-bf9a721-warning-a3);\n  --volt2-bf9a721-sem-warning-ui: var(--volt2-bf9a721-warning-a7);\n  --volt2-bf9a721-sem-warning-ui-hover: var(--volt2-bf9a721-warning-a8);\n  --volt2-bf9a721-spacing-element-1: 0.25rem;\n  --volt2-bf9a721-spacing-element-2: 0.5rem;\n  --volt2-bf9a721-spacing-element-3: 0.75rem;\n  --volt2-bf9a721-spacing-group-1: 0.5rem;\n  --volt2-bf9a721-spacing-group-2: 1rem;\n  --volt2-bf9a721-spacing-layout-1: 1.5rem;\n  --volt2-bf9a721-spacing-layout-2: 2rem;\n  --volt2-bf9a721-success-1: #fbfefc;\n  --volt2-bf9a721-success-10: #2b9a66;\n  --volt2-bf9a721-success-11: #218358;\n  --volt2-bf9a721-success-12: #193b2d;\n  --volt2-bf9a721-success-2: #f4fbf6;\n  --volt2-bf9a721-success-3: #e6f6eb;\n  --volt2-bf9a721-success-4: #d6f1df;\n  --volt2-bf9a721-success-5: #c4e8d1;\n  --volt2-bf9a721-success-6: #adddc0;\n  --volt2-bf9a721-success-7: #8eceaa;\n  --volt2-bf9a721-success-8: #5bb98b;\n  --volt2-bf9a721-success-9: #30a46c;\n  --volt2-bf9a721-success-a1: #00c04004;\n  --volt2-bf9a721-success-a10: #008647d4;\n  --volt2-bf9a721-success-a11: #00713fde;\n  --volt2-bf9a721-success-a12: #002616e6;\n  --volt2-bf9a721-success-a2: #00a32f0b;\n  --volt2-bf9a721-success-a3: #00a43319;\n  --volt2-bf9a721-success-a4: #00a83829;\n  --volt2-bf9a721-success-a5: #019c393b;\n  --volt2-bf9a721-success-a6: #00963c52;\n  --volt2-bf9a721-success-a7: #00914071;\n  --volt2-bf9a721-success-a8: #00924ba4;\n  --volt2-bf9a721-success-a9: #008f4acf;\n  --volt2-bf9a721-success-contrast: #ffffff;\n  --volt2-bf9a721-success-indicator: #30a46c;\n  --volt2-bf9a721-success-surface: #f1faf4cc;\n  --volt2-bf9a721-success-track: #30a46c;\n  --volt2-bf9a721-text-2xl: 1.5rem;\n  --volt2-bf9a721-text-3xl: 1.875rem;\n  --volt2-bf9a721-text-base: 1rem;\n  --volt2-bf9a721-text-lg: 1.125rem;\n  --volt2-bf9a721-text-sm: 0.875rem;\n  --volt2-bf9a721-text-xl: 1.25rem;\n  --volt2-bf9a721-text-xs: 0.75rem;\n  --volt2-bf9a721-tracking-normal: 0em;\n  --volt2-bf9a721-tracking-tight: -0.025em;\n  --volt2-bf9a721-tracking-tighter: -0.05em;\n  --volt2-bf9a721-warning-1: #fefcfb;\n  --volt2-bf9a721-warning-10: #ef5f00;\n  --volt2-bf9a721-warning-11: #cc4e00;\n  --volt2-bf9a721-warning-12: #582d1d;\n  --volt2-bf9a721-warning-2: #fff7ed;\n  --volt2-bf9a721-warning-3: #ffefd6;\n  --volt2-bf9a721-warning-4: #ffdfb5;\n  --volt2-bf9a721-warning-5: #ffd19a;\n  --volt2-bf9a721-warning-6: #ffc182;\n  --volt2-bf9a721-warning-7: #f5ae73;\n  --volt2-bf9a721-warning-8: #ec9455;\n  --volt2-bf9a721-warning-9: #f76b15;\n  --volt2-bf9a721-warning-a1: #c0400004;\n  --volt2-bf9a721-warning-a10: #ef5f00;\n  --volt2-bf9a721-warning-a11: #cc4e00;\n  --volt2-bf9a721-warning-a12: #431200e2;\n  --volt2-bf9a721-warning-a2: #ff8e0012;\n  --volt2-bf9a721-warning-a3: #ff9c0029;\n  --volt2-bf9a721-warning-a4: #ff91014a;\n  --volt2-bf9a721-warning-a5: #ff8b0065;\n  --volt2-bf9a721-warning-a6: #ff81007d;\n  --volt2-bf9a721-warning-a7: #ed6c008c;\n  --volt2-bf9a721-warning-a8: #e35f00aa;\n  --volt2-bf9a721-warning-a9: #f65e00ea;\n  --volt2-bf9a721-warning-contrast: #ffffff;\n  --volt2-bf9a721-warning-indicator: #f76b15;\n  --volt2-bf9a721-warning-surface: #fff5e9cc;\n  --volt2-bf9a721-warning-track: #f76b15;\n}\n.dark,\n[data-theme=\"dark\"] {\n  --volt2-bf9a721-accent-1: #07121f;\n  --volt2-bf9a721-accent-10: #00509d;\n  --volt2-bf9a721-accent-11: #71b8ff;\n  --volt2-bf9a721-accent-12: #c5e4ff;\n  --volt2-bf9a721-accent-2: #0b1929;\n  --volt2-bf9a721-accent-3: #002650;\n  --volt2-bf9a721-accent-4: #002f6f;\n  --volt2-bf9a721-accent-5: #003b83;\n  --volt2-bf9a721-accent-6: #004996;\n  --volt2-bf9a721-accent-7: #0058ae;\n  --volt2-bf9a721-accent-8: #0069cf;\n  --volt2-bf9a721-accent-9: #005eb4;\n  --volt2-bf9a721-accent-a1: #0022ff0f;\n  --volt2-bf9a721-accent-a10: #007cff96;\n  --volt2-bf9a721-accent-a11: #71b8ff;\n  --volt2-bf9a721-accent-a12: #c5e4ff;\n  --volt2-bf9a721-accent-a2: #0060fd1a;\n  --volt2-bf9a721-accent-a3: #0060fe44;\n  --volt2-bf9a721-accent-a4: #005dff65;\n  --volt2-bf9a721-accent-a5: #0068fd7b;\n  --volt2-bf9a721-accent-a6: #0075ff8f;\n  --volt2-bf9a721-accent-a7: #007cfea9;\n  --volt2-bf9a721-accent-a8: #007fffcc;\n  --volt2-bf9a721-accent-a9: #0082ffaf;\n  --volt2-bf9a721-accent-contrast: #fff;\n  --volt2-bf9a721-accent-indicator: #005eb4;\n  --volt2-bf9a721-accent-surface: #06214180;\n  --volt2-bf9a721-accent-track: #005eb4;\n  --volt2-bf9a721-body: #121212;\n  --volt2-bf9a721-error-1: #190e0c;\n  --volt2-bf9a721-error-10: #bf0001;\n  --volt2-bf9a721-error-11: #ff9081;\n  --volt2-bf9a721-error-12: #ffcdc4;\n  --volt2-bf9a721-error-2: #23110f;\n  --volt2-bf9a721-error-3: #440504;\n  --volt2-bf9a721-error-4: #5e0000;\n  --volt2-bf9a721-error-5: #710000;\n  --volt2-bf9a721-error-6: #840001;\n  --volt2-bf9a721-error-7: #a01111;\n  --volt2-bf9a721-error-8: #cf1718;\n  --volt2-bf9a721-error-9: #d01919;\n  --volt2-bf9a721-error-a1: #f4000009;\n  --volt2-bf9a721-error-a10: #fe0000bb;\n  --volt2-bf9a721-error-a11: #ff9081;\n  --volt2-bf9a721-error-a12: #ffcdc4;\n  --volt2-bf9a721-error-a2: #f7110014;\n  --volt2-bf9a721-error-a3: #fe000037;\n  --volt2-bf9a721-error-a4: #fe000053;\n  --volt2-bf9a721-error-a5: #ff000067;\n  --volt2-bf9a721-error-a6: #fd00007c;\n  --volt2-bf9a721-error-a7: #fe11119a;\n  --volt2-bf9a721-error-a8: #ff191acc;\n  --volt2-bf9a721-error-a9: #ff1b1bcd;\n  --volt2-bf9a721-error-contrast: #fff;\n  --volt2-bf9a721-error-indicator: #d01919;\n  --volt2-bf9a721-error-surface: #35110e80;\n  --volt2-bf9a721-error-track: #d01919;\n  --volt2-bf9a721-gray-1: #121113;\n  --volt2-bf9a721-gray-10: #7c7a85;\n  --volt2-bf9a721-gray-11: #b5b2bc;\n  --volt2-bf9a721-gray-12: #eeeef0;\n  --volt2-bf9a721-gray-2: #1a191b;\n  --volt2-bf9a721-gray-3: #232225;\n  --volt2-bf9a721-gray-4: #2b292d;\n  --volt2-bf9a721-gray-5: #323035;\n  --volt2-bf9a721-gray-6: #3c393f;\n  --volt2-bf9a721-gray-7: #49474e;\n  --volt2-bf9a721-gray-8: #625f69;\n  --volt2-bf9a721-gray-9: #6f6d78;\n  --volt2-bf9a721-gray-a1: #00000000;\n  --volt2-bf9a721-gray-a10: #ece9fd7c;\n  --volt2-bf9a721-gray-a11: #f5f1ffb7;\n  --volt2-bf9a721-gray-a12: #fdfdffef;\n  --volt2-bf9a721-gray-a2: #f5f4f609;\n  --volt2-bf9a721-gray-a3: #ebeaf814;\n  --volt2-bf9a721-gray-a4: #eee5f81d;\n  --volt2-bf9a721-gray-a5: #efe6fe25;\n  --volt2-bf9a721-gray-a6: #f1e6fd30;\n  --volt2-bf9a721-gray-a7: #eee9ff40;\n  --volt2-bf9a721-gray-a8: #eee7ff5d;\n  --volt2-bf9a721-gray-a9: #eae6fd6e;\n  --volt2-bf9a721-gray-contrast: #ffffff;\n  --volt2-bf9a721-gray-indicator: #6f6d78;\n  --volt2-bf9a721-gray-surface: #22212380;\n  --volt2-bf9a721-gray-track: #6f6d78;\n  --volt2-bf9a721-info-1: #0d1520;\n  --volt2-bf9a721-info-10: #3b9eff;\n  --volt2-bf9a721-info-11: #70b8ff;\n  --volt2-bf9a721-info-12: #c2e6ff;\n  --volt2-bf9a721-info-2: #111927;\n  --volt2-bf9a721-info-3: #0d2847;\n  --volt2-bf9a721-info-4: #003362;\n  --volt2-bf9a721-info-5: #004074;\n  --volt2-bf9a721-info-6: #104d87;\n  --volt2-bf9a721-info-7: #205d9e;\n  --volt2-bf9a721-info-8: #2870bd;\n  --volt2-bf9a721-info-9: #0090ff;\n  --volt2-bf9a721-info-a1: #004df211;\n  --volt2-bf9a721-info-a10: #3b9eff;\n  --volt2-bf9a721-info-a11: #70b8ff;\n  --volt2-bf9a721-info-a12: #c2e6ff;\n  --volt2-bf9a721-info-a2: #1166fb18;\n  --volt2-bf9a721-info-a3: #0077ff3a;\n  --volt2-bf9a721-info-a4: #0075ff57;\n  --volt2-bf9a721-info-a5: #0081fd6b;\n  --volt2-bf9a721-info-a6: #0f89fd7f;\n  --volt2-bf9a721-info-a7: #2a91fe98;\n  --volt2-bf9a721-info-a8: #3094feb9;\n  --volt2-bf9a721-info-a9: #0090ff;\n  --volt2-bf9a721-info-contrast: #ffffff;\n  --volt2-bf9a721-info-indicator: #0090ff;\n  --volt2-bf9a721-info-surface: #11213d80;\n  --volt2-bf9a721-info-track: #0090ff;\n  --volt2-bf9a721-success-1: #0e1512;\n  --volt2-bf9a721-success-10: #33b074;\n  --volt2-bf9a721-success-11: #3dd68c;\n  --volt2-bf9a721-success-12: #b1f1cb;\n  --volt2-bf9a721-success-2: #121b17;\n  --volt2-bf9a721-success-3: #132d21;\n  --volt2-bf9a721-success-4: #113b29;\n  --volt2-bf9a721-success-5: #174933;\n  --volt2-bf9a721-success-6: #20573e;\n  --volt2-bf9a721-success-7: #28684a;\n  --volt2-bf9a721-success-8: #2f7c57;\n  --volt2-bf9a721-success-9: #30a46c;\n  --volt2-bf9a721-success-a1: #00de4505;\n  --volt2-bf9a721-success-a10: #43fea4ab;\n  --volt2-bf9a721-success-a11: #46fea5d4;\n  --volt2-bf9a721-success-a12: #bbffd7f0;\n  --volt2-bf9a721-success-a2: #29f99d0b;\n  --volt2-bf9a721-success-a3: #22ff991e;\n  --volt2-bf9a721-success-a4: #11ff992d;\n  --volt2-bf9a721-success-a5: #2bffa23c;\n  --volt2-bf9a721-success-a6: #44ffaa4b;\n  --volt2-bf9a721-success-a7: #50fdac5e;\n  --volt2-bf9a721-success-a8: #54ffad73;\n  --volt2-bf9a721-success-a9: #44ffa49e;\n  --volt2-bf9a721-success-contrast: #ffffff;\n  --volt2-bf9a721-success-indicator: #30a46c;\n  --volt2-bf9a721-success-surface: #15251d80;\n  --volt2-bf9a721-success-track: #30a46c;\n  --volt2-bf9a721-warning-1: #17120e;\n  --volt2-bf9a721-warning-10: #ff801f;\n  --volt2-bf9a721-warning-11: #ffa057;\n  --volt2-bf9a721-warning-12: #ffe0c2;\n  --volt2-bf9a721-warning-2: #1e160f;\n  --volt2-bf9a721-warning-3: #331e0b;\n  --volt2-bf9a721-warning-4: #462100;\n  --volt2-bf9a721-warning-5: #562800;\n  --volt2-bf9a721-warning-6: #66350c;\n  --volt2-bf9a721-warning-7: #7e451d;\n  --volt2-bf9a721-warning-8: #a35829;\n  --volt2-bf9a721-warning-9: #f76b15;\n  --volt2-bf9a721-warning-a1: #ec360007;\n  --volt2-bf9a721-warning-a10: #ff801f;\n  --volt2-bf9a721-warning-a11: #ffa057;\n  --volt2-bf9a721-warning-a12: #ffe0c2;\n  --volt2-bf9a721-warning-a2: #fe6d000e;\n  --volt2-bf9a721-warning-a3: #fb6a0025;\n  --volt2-bf9a721-warning-a4: #ff590039;\n  --volt2-bf9a721-warning-a5: #ff61004a;\n  --volt2-bf9a721-warning-a6: #fd75045c;\n  --volt2-bf9a721-warning-a7: #ff832c75;\n  --volt2-bf9a721-warning-a8: #fe84389d;\n  --volt2-bf9a721-warning-a9: #fe6d15f7;\n  --volt2-bf9a721-warning-contrast: #ffffff;\n  --volt2-bf9a721-warning-indicator: #f76b15;\n  --volt2-bf9a721-warning-surface: #271d1380;\n  --volt2-bf9a721-warning-track: #f76b15;\n}";