@kya-os/consent 0.1.37 → 0.1.39

package/dist/consent.js

@@ -9,10 +9,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 
-// ../../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js
 var t = globalThis;
 var e = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype;
-var s = Symbol();
+var s = /* @__PURE__ */ Symbol();
 var o = /* @__PURE__ */ new WeakMap();
 var n = class {
   constructor(t6, e8, o8) {
@@ -34,15 +34,15 @@ var n = class {
 };
 var r = (t6) => new n("string" == typeof t6 ? t6 : t6 + "", void 0, s);
 var i = (t6, ...e8) => {
-  const o8 = 1 === t6.length ? t6[0] : e8.reduce(((e9, s4, o9) => e9 + ((t7) => {
+  const o8 = 1 === t6.length ? t6[0] : e8.reduce((e9, s4, o9) => e9 + ((t7) => {
     if (true === t7._$cssResult$) return t7.cssText;
     if ("number" == typeof t7) return t7;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + t7 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-  })(s4) + t6[o9 + 1]), t6[0]);
+  })(s4) + t6[o9 + 1], t6[0]);
   return new n(o8, t6, s);
 };
 var S = (s4, o8) => {
-  if (e) s4.adoptedStyleSheets = o8.map(((t6) => t6 instanceof CSSStyleSheet ? t6 : t6.styleSheet));
+  if (e) s4.adoptedStyleSheets = o8.map((t6) => t6 instanceof CSSStyleSheet ? t6 : t6.styleSheet);
   else for (const e8 of o8) {
     const o9 = document.createElement("style"), n5 = t.litNonce;
     void 0 !== n5 && o9.setAttribute("nonce", n5), o9.textContent = e8.cssText, s4.appendChild(o9);
@@ -54,7 +54,7 @@ var c = e ? (t6) => t6 : (t6) => t6 instanceof CSSStyleSheet ? ((t7) => {
   return r(e8);
 })(t6) : t6;
 
-// ../../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/reactive-element.js
 var { is: i2, defineProperty: e2, getOwnPropertyDescriptor: h, getOwnPropertyNames: r2, getOwnPropertySymbols: o2, getPrototypeOf: n2 } = Object;
 var a = globalThis;
 var c2 = a.trustedTypes;
@@ -92,7 +92,7 @@ var u = { toAttribute(t6, s4) {
 } };
 var f = (t6, s4) => !i2(t6, s4);
 var b = { attribute: true, type: String, converter: u, reflect: false, useDefault: false, hasChanged: f };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), a.litPropertyMetadata ?? (a.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+Symbol.metadata ?? (Symbol.metadata = /* @__PURE__ */ Symbol("metadata")), a.litPropertyMetadata ?? (a.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 var y = class extends HTMLElement {
   static addInitializer(t6) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t6);
@@ -102,7 +102,7 @@ var y = class extends HTMLElement {
   }
   static createProperty(t6, s4 = b) {
     if (s4.state && (s4.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t6) && ((s4 = Object.create(s4)).wrapped = true), this.elementProperties.set(t6, s4), !s4.noAccessor) {
-      const i6 = Symbol(), h3 = this.getPropertyDescriptor(t6, i6, s4);
+      const i6 = /* @__PURE__ */ Symbol(), h3 = this.getPropertyDescriptor(t6, i6, s4);
       void 0 !== h3 && e2(this.prototype, t6, h3);
     }
   }
@@ -159,7 +159,7 @@ var y = class extends HTMLElement {
     super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
   }
   _$Ev() {
-    this._$ES = new Promise(((t6) => this.enableUpdating = t6)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((t6) => t6(this)));
+    this._$ES = new Promise((t6) => this.enableUpdating = t6), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((t6) => t6(this));
   }
   addController(t6) {
     (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t6), void 0 !== this.renderRoot && this.isConnected && t6.hostConnected?.();
@@ -177,12 +177,12 @@ var y = class extends HTMLElement {
     return S(t6, this.constructor.elementStyles), t6;
   }
   connectedCallback() {
-    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), this._$EO?.forEach(((t6) => t6.hostConnected?.()));
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), this._$EO?.forEach((t6) => t6.hostConnected?.());
   }
   enableUpdating(t6) {
   }
   disconnectedCallback() {
-    this._$EO?.forEach(((t6) => t6.hostDisconnected?.()));
+    this._$EO?.forEach((t6) => t6.hostDisconnected?.());
   }
   attributeChangedCallback(t6, s4, i6) {
     this._$AK(t6, i6);
@@ -203,10 +203,10 @@ var y = class extends HTMLElement {
       this[e8] = r7 ?? this._$Ej?.get(e8) ?? r7, this._$Em = null;
     }
   }
-  requestUpdate(t6, s4, i6) {
+  requestUpdate(t6, s4, i6, e8 = false, h3) {
     if (void 0 !== t6) {
-      const e8 = this.constructor, h3 = this[t6];
-      if (i6 ?? (i6 = e8.getPropertyOptions(t6)), !((i6.hasChanged ?? f)(h3, s4) || i6.useDefault && i6.reflect && h3 === this._$Ej?.get(t6) && !this.hasAttribute(e8._$Eu(t6, i6)))) return;
+      const r7 = this.constructor;
+      if (false === e8 && (h3 = this[t6]), i6 ?? (i6 = r7.getPropertyOptions(t6)), !((i6.hasChanged ?? f)(h3, s4) || i6.useDefault && i6.reflect && h3 === this._$Ej?.get(t6) && !this.hasAttribute(r7._$Eu(t6, i6)))) return;
       this.C(t6, s4, i6);
     }
     false === this.isUpdatePending && (this._$ES = this._$EP());
@@ -243,7 +243,7 @@ var y = class extends HTMLElement {
     let t6 = false;
     const s4 = this._$AL;
     try {
-      t6 = this.shouldUpdate(s4), t6 ? (this.willUpdate(s4), this._$EO?.forEach(((t7) => t7.hostUpdate?.())), this.update(s4)) : this._$EM();
+      t6 = this.shouldUpdate(s4), t6 ? (this.willUpdate(s4), this._$EO?.forEach((t7) => t7.hostUpdate?.()), this.update(s4)) : this._$EM();
     } catch (s5) {
       throw t6 = false, this._$EM(), s5;
     }
@@ -252,7 +252,7 @@ var y = class extends HTMLElement {
   willUpdate(t6) {
   }
   _$AE(t6) {
-    this._$EO?.forEach(((t7) => t7.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t6)), this.updated(t6);
+    this._$EO?.forEach((t7) => t7.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t6)), this.updated(t6);
   }
   _$EM() {
     this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false;
@@ -267,105 +267,106 @@ var y = class extends HTMLElement {
     return true;
   }
   update(t6) {
-    this._$Eq && (this._$Eq = this._$Eq.forEach(((t7) => this._$ET(t7, this[t7])))), this._$EM();
+    this._$Eq && (this._$Eq = this._$Eq.forEach((t7) => this._$ET(t7, this[t7]))), this._$EM();
   }
   updated(t6) {
   }
   firstUpdated(t6) {
   }
 };
-y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d("elementProperties")] = /* @__PURE__ */ new Map(), y[d("finalized")] = /* @__PURE__ */ new Map(), p?.({ ReactiveElement: y }), (a.reactiveElementVersions ?? (a.reactiveElementVersions = [])).push("2.1.1");
+y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d("elementProperties")] = /* @__PURE__ */ new Map(), y[d("finalized")] = /* @__PURE__ */ new Map(), p?.({ ReactiveElement: y }), (a.reactiveElementVersions ?? (a.reactiveElementVersions = [])).push("2.1.2");
 
-// ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js
+// ../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js
 var t2 = globalThis;
-var i3 = t2.trustedTypes;
-var s2 = i3 ? i3.createPolicy("lit-html", { createHTML: (t6) => t6 }) : void 0;
-var e3 = "$lit$";
-var h2 = `lit$${Math.random().toFixed(9).slice(2)}$`;
-var o3 = "?" + h2;
-var n3 = `<${o3}>`;
-var r3 = document;
-var l2 = () => r3.createComment("");
-var c3 = (t6) => null === t6 || "object" != typeof t6 && "function" != typeof t6;
-var a2 = Array.isArray;
-var u2 = (t6) => a2(t6) || "function" == typeof t6?.[Symbol.iterator];
-var d2 = "[ 	\n\f\r]";
-var f2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g;
-var v = /-->/g;
-var _ = />/g;
-var m = RegExp(`>|${d2}(?:([^\\s"'>=/]+)(${d2}*=${d2}*(?:[^ 	
+var i3 = (t6) => t6;
+var s2 = t2.trustedTypes;
+var e3 = s2 ? s2.createPolicy("lit-html", { createHTML: (t6) => t6 }) : void 0;
+var h2 = "$lit$";
+var o3 = `lit$${Math.random().toFixed(9).slice(2)}$`;
+var n3 = "?" + o3;
+var r3 = `<${n3}>`;
+var l2 = document;
+var c3 = () => l2.createComment("");
+var a2 = (t6) => null === t6 || "object" != typeof t6 && "function" != typeof t6;
+var u2 = Array.isArray;
+var d2 = (t6) => u2(t6) || "function" == typeof t6?.[Symbol.iterator];
+var f2 = "[ 	\n\f\r]";
+var v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g;
+var _ = /-->/g;
+var m = />/g;
+var p2 = RegExp(`>|${f2}(?:([^\\s"'>=/]+)(${f2}*=${f2}*(?:[^ 	
 \f\r"'\`<>=]|("|')|))|$)`, "g");
-var p2 = /'/g;
-var g = /"/g;
-var $ = /^(?:script|style|textarea|title)$/i;
-var y2 = (t6) => (i6, ...s4) => ({ _$litType$: t6, strings: i6, values: s4 });
-var x = y2(1);
-var b2 = y2(2);
-var w = y2(3);
-var T = Symbol.for("lit-noChange");
-var E = Symbol.for("lit-nothing");
-var A = /* @__PURE__ */ new WeakMap();
-var C = r3.createTreeWalker(r3, 129);
-function P(t6, i6) {
-  if (!a2(t6) || !t6.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return void 0 !== s2 ? s2.createHTML(i6) : i6;
+var g = /'/g;
+var $ = /"/g;
+var y2 = /^(?:script|style|textarea|title)$/i;
+var x = (t6) => (i6, ...s4) => ({ _$litType$: t6, strings: i6, values: s4 });
+var b2 = x(1);
+var w = x(2);
+var T = x(3);
+var E = /* @__PURE__ */ Symbol.for("lit-noChange");
+var A = /* @__PURE__ */ Symbol.for("lit-nothing");
+var C = /* @__PURE__ */ new WeakMap();
+var P = l2.createTreeWalker(l2, 129);
+function V(t6, i6) {
+  if (!u2(t6) || !t6.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return void 0 !== e3 ? e3.createHTML(i6) : i6;
 }
-var V = (t6, i6) => {
-  const s4 = t6.length - 1, o8 = [];
-  let r7, l3 = 2 === i6 ? "<svg>" : 3 === i6 ? "<math>" : "", c4 = f2;
+var N = (t6, i6) => {
+  const s4 = t6.length - 1, e8 = [];
+  let n5, l3 = 2 === i6 ? "<svg>" : 3 === i6 ? "<math>" : "", c4 = v;
   for (let i7 = 0; i7 < s4; i7++) {
     const s5 = t6[i7];
-    let a3, u3, d3 = -1, y3 = 0;
-    for (; y3 < s5.length && (c4.lastIndex = y3, u3 = c4.exec(s5), null !== u3); ) y3 = c4.lastIndex, c4 === f2 ? "!--" === u3[1] ? c4 = v : void 0 !== u3[1] ? c4 = _ : void 0 !== u3[2] ? ($.test(u3[2]) && (r7 = RegExp("</" + u3[2], "g")), c4 = m) : void 0 !== u3[3] && (c4 = m) : c4 === m ? ">" === u3[0] ? (c4 = r7 ?? f2, d3 = -1) : void 0 === u3[1] ? d3 = -2 : (d3 = c4.lastIndex - u3[2].length, a3 = u3[1], c4 = void 0 === u3[3] ? m : '"' === u3[3] ? g : p2) : c4 === g || c4 === p2 ? c4 = m : c4 === v || c4 === _ ? c4 = f2 : (c4 = m, r7 = void 0);
-    const x2 = c4 === m && t6[i7 + 1].startsWith("/>") ? " " : "";
-    l3 += c4 === f2 ? s5 + n3 : d3 >= 0 ? (o8.push(a3), s5.slice(0, d3) + e3 + s5.slice(d3) + h2 + x2) : s5 + h2 + (-2 === d3 ? i7 : x2);
+    let a3, u3, d3 = -1, f3 = 0;
+    for (; f3 < s5.length && (c4.lastIndex = f3, u3 = c4.exec(s5), null !== u3); ) f3 = c4.lastIndex, c4 === v ? "!--" === u3[1] ? c4 = _ : void 0 !== u3[1] ? c4 = m : void 0 !== u3[2] ? (y2.test(u3[2]) && (n5 = RegExp("</" + u3[2], "g")), c4 = p2) : void 0 !== u3[3] && (c4 = p2) : c4 === p2 ? ">" === u3[0] ? (c4 = n5 ?? v, d3 = -1) : void 0 === u3[1] ? d3 = -2 : (d3 = c4.lastIndex - u3[2].length, a3 = u3[1], c4 = void 0 === u3[3] ? p2 : '"' === u3[3] ? $ : g) : c4 === $ || c4 === g ? c4 = p2 : c4 === _ || c4 === m ? c4 = v : (c4 = p2, n5 = void 0);
+    const x2 = c4 === p2 && t6[i7 + 1].startsWith("/>") ? " " : "";
+    l3 += c4 === v ? s5 + r3 : d3 >= 0 ? (e8.push(a3), s5.slice(0, d3) + h2 + s5.slice(d3) + o3 + x2) : s5 + o3 + (-2 === d3 ? i7 : x2);
   }
-  return [P(t6, l3 + (t6[s4] || "<?>") + (2 === i6 ? "</svg>" : 3 === i6 ? "</math>" : "")), o8];
+  return [V(t6, l3 + (t6[s4] || "<?>") + (2 === i6 ? "</svg>" : 3 === i6 ? "</math>" : "")), e8];
 };
-var N = class _N {
-  constructor({ strings: t6, _$litType$: s4 }, n5) {
+var S2 = class _S {
+  constructor({ strings: t6, _$litType$: i6 }, e8) {
     let r7;
     this.parts = [];
-    let c4 = 0, a3 = 0;
-    const u3 = t6.length - 1, d3 = this.parts, [f3, v2] = V(t6, s4);
-    if (this.el = _N.createElement(f3, n5), C.currentNode = this.el.content, 2 === s4 || 3 === s4) {
+    let l3 = 0, a3 = 0;
+    const u3 = t6.length - 1, d3 = this.parts, [f3, v2] = N(t6, i6);
+    if (this.el = _S.createElement(f3, e8), P.currentNode = this.el.content, 2 === i6 || 3 === i6) {
       const t7 = this.el.content.firstChild;
       t7.replaceWith(...t7.childNodes);
     }
-    for (; null !== (r7 = C.nextNode()) && d3.length < u3; ) {
+    for (; null !== (r7 = P.nextNode()) && d3.length < u3; ) {
       if (1 === r7.nodeType) {
-        if (r7.hasAttributes()) for (const t7 of r7.getAttributeNames()) if (t7.endsWith(e3)) {
-          const i6 = v2[a3++], s5 = r7.getAttribute(t7).split(h2), e8 = /([.?@])?(.*)/.exec(i6);
-          d3.push({ type: 1, index: c4, name: e8[2], strings: s5, ctor: "." === e8[1] ? H : "?" === e8[1] ? I : "@" === e8[1] ? L : k }), r7.removeAttribute(t7);
-        } else t7.startsWith(h2) && (d3.push({ type: 6, index: c4 }), r7.removeAttribute(t7));
-        if ($.test(r7.tagName)) {
-          const t7 = r7.textContent.split(h2), s5 = t7.length - 1;
-          if (s5 > 0) {
-            r7.textContent = i3 ? i3.emptyScript : "";
-            for (let i6 = 0; i6 < s5; i6++) r7.append(t7[i6], l2()), C.nextNode(), d3.push({ type: 2, index: ++c4 });
-            r7.append(t7[s5], l2());
+        if (r7.hasAttributes()) for (const t7 of r7.getAttributeNames()) if (t7.endsWith(h2)) {
+          const i7 = v2[a3++], s4 = r7.getAttribute(t7).split(o3), e9 = /([.?@])?(.*)/.exec(i7);
+          d3.push({ type: 1, index: l3, name: e9[2], strings: s4, ctor: "." === e9[1] ? I : "?" === e9[1] ? L : "@" === e9[1] ? z : H }), r7.removeAttribute(t7);
+        } else t7.startsWith(o3) && (d3.push({ type: 6, index: l3 }), r7.removeAttribute(t7));
+        if (y2.test(r7.tagName)) {
+          const t7 = r7.textContent.split(o3), i7 = t7.length - 1;
+          if (i7 > 0) {
+            r7.textContent = s2 ? s2.emptyScript : "";
+            for (let s4 = 0; s4 < i7; s4++) r7.append(t7[s4], c3()), P.nextNode(), d3.push({ type: 2, index: ++l3 });
+            r7.append(t7[i7], c3());
           }
         }
-      } else if (8 === r7.nodeType) if (r7.data === o3) d3.push({ type: 2, index: c4 });
+      } else if (8 === r7.nodeType) if (r7.data === n3) d3.push({ type: 2, index: l3 });
       else {
         let t7 = -1;
-        for (; -1 !== (t7 = r7.data.indexOf(h2, t7 + 1)); ) d3.push({ type: 7, index: c4 }), t7 += h2.length - 1;
+        for (; -1 !== (t7 = r7.data.indexOf(o3, t7 + 1)); ) d3.push({ type: 7, index: l3 }), t7 += o3.length - 1;
       }
-      c4++;
+      l3++;
     }
   }
   static createElement(t6, i6) {
-    const s4 = r3.createElement("template");
+    const s4 = l2.createElement("template");
     return s4.innerHTML = t6, s4;
   }
 };
-function S2(t6, i6, s4 = t6, e8) {
-  if (i6 === T) return i6;
+function M(t6, i6, s4 = t6, e8) {
+  if (i6 === E) return i6;
   let h3 = void 0 !== e8 ? s4._$Co?.[e8] : s4._$Cl;
-  const o8 = c3(i6) ? void 0 : i6._$litDirective$;
-  return h3?.constructor !== o8 && (h3?._$AO?.(false), void 0 === o8 ? h3 = void 0 : (h3 = new o8(t6), h3._$AT(t6, s4, e8)), void 0 !== e8 ? (s4._$Co ?? (s4._$Co = []))[e8] = h3 : s4._$Cl = h3), void 0 !== h3 && (i6 = S2(t6, h3._$AS(t6, i6.values), h3, e8)), i6;
+  const o8 = a2(i6) ? void 0 : i6._$litDirective$;
+  return h3?.constructor !== o8 && (h3?._$AO?.(false), void 0 === o8 ? h3 = void 0 : (h3 = new o8(t6), h3._$AT(t6, s4, e8)), void 0 !== e8 ? (s4._$Co ?? (s4._$Co = []))[e8] = h3 : s4._$Cl = h3), void 0 !== h3 && (i6 = M(t6, h3._$AS(t6, i6.values), h3, e8)), i6;
 }
-var M = class {
+var R = class {
   constructor(t6, i6) {
     this._$AV = [], this._$AN = void 0, this._$AD = t6, this._$AM = i6;
   }
@@ -376,29 +377,29 @@ var M = class {
     return this._$AM._$AU;
   }
   u(t6) {
-    const { el: { content: i6 }, parts: s4 } = this._$AD, e8 = (t6?.creationScope ?? r3).importNode(i6, true);
-    C.currentNode = e8;
-    let h3 = C.nextNode(), o8 = 0, n5 = 0, l3 = s4[0];
-    for (; void 0 !== l3; ) {
-      if (o8 === l3.index) {
+    const { el: { content: i6 }, parts: s4 } = this._$AD, e8 = (t6?.creationScope ?? l2).importNode(i6, true);
+    P.currentNode = e8;
+    let h3 = P.nextNode(), o8 = 0, n5 = 0, r7 = s4[0];
+    for (; void 0 !== r7; ) {
+      if (o8 === r7.index) {
         let i7;
-        2 === l3.type ? i7 = new R(h3, h3.nextSibling, this, t6) : 1 === l3.type ? i7 = new l3.ctor(h3, l3.name, l3.strings, this, t6) : 6 === l3.type && (i7 = new z(h3, this, t6)), this._$AV.push(i7), l3 = s4[++n5];
+        2 === r7.type ? i7 = new k(h3, h3.nextSibling, this, t6) : 1 === r7.type ? i7 = new r7.ctor(h3, r7.name, r7.strings, this, t6) : 6 === r7.type && (i7 = new Z(h3, this, t6)), this._$AV.push(i7), r7 = s4[++n5];
       }
-      o8 !== l3?.index && (h3 = C.nextNode(), o8++);
+      o8 !== r7?.index && (h3 = P.nextNode(), o8++);
     }
-    return C.currentNode = r3, e8;
+    return P.currentNode = l2, e8;
   }
   p(t6) {
     let i6 = 0;
     for (const s4 of this._$AV) void 0 !== s4 && (void 0 !== s4.strings ? (s4._$AI(t6, s4, i6), i6 += s4.strings.length - 2) : s4._$AI(t6[i6])), i6++;
   }
 };
-var R = class _R {
+var k = class _k {
   get _$AU() {
     return this._$AM?._$AU ?? this._$Cv;
   }
   constructor(t6, i6, s4, e8) {
-    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t6, this._$AB = i6, this._$AM = s4, this.options = e8, this._$Cv = e8?.isConnected ?? true;
+    this.type = 2, this._$AH = A, this._$AN = void 0, this._$AA = t6, this._$AB = i6, this._$AM = s4, this.options = e8, this._$Cv = e8?.isConnected ?? true;
   }
   get parentNode() {
     let t6 = this._$AA.parentNode;
@@ -412,7 +413,7 @@ var R = class _R {
     return this._$AB;
   }
   _$AI(t6, i6 = this) {
-    t6 = S2(this, t6, i6), c3(t6) ? t6 === E || null == t6 || "" === t6 ? (this._$AH !== E && this._$AR(), this._$AH = E) : t6 !== this._$AH && t6 !== T && this._(t6) : void 0 !== t6._$litType$ ? this.$(t6) : void 0 !== t6.nodeType ? this.T(t6) : u2(t6) ? this.k(t6) : this._(t6);
+    t6 = M(this, t6, i6), a2(t6) ? t6 === A || null == t6 || "" === t6 ? (this._$AH !== A && this._$AR(), this._$AH = A) : t6 !== this._$AH && t6 !== E && this._(t6) : void 0 !== t6._$litType$ ? this.$(t6) : void 0 !== t6.nodeType ? this.T(t6) : d2(t6) ? this.k(t6) : this._(t6);
   }
   O(t6) {
     return this._$AA.parentNode.insertBefore(t6, this._$AB);
@@ -421,38 +422,38 @@ var R = class _R {
     this._$AH !== t6 && (this._$AR(), this._$AH = this.O(t6));
   }
   _(t6) {
-    this._$AH !== E && c3(this._$AH) ? this._$AA.nextSibling.data = t6 : this.T(r3.createTextNode(t6)), this._$AH = t6;
+    this._$AH !== A && a2(this._$AH) ? this._$AA.nextSibling.data = t6 : this.T(l2.createTextNode(t6)), this._$AH = t6;
   }
   $(t6) {
-    const { values: i6, _$litType$: s4 } = t6, e8 = "number" == typeof s4 ? this._$AC(t6) : (void 0 === s4.el && (s4.el = N.createElement(P(s4.h, s4.h[0]), this.options)), s4);
+    const { values: i6, _$litType$: s4 } = t6, e8 = "number" == typeof s4 ? this._$AC(t6) : (void 0 === s4.el && (s4.el = S2.createElement(V(s4.h, s4.h[0]), this.options)), s4);
     if (this._$AH?._$AD === e8) this._$AH.p(i6);
     else {
-      const t7 = new M(e8, this), s5 = t7.u(this.options);
+      const t7 = new R(e8, this), s5 = t7.u(this.options);
       t7.p(i6), this.T(s5), this._$AH = t7;
     }
   }
   _$AC(t6) {
-    let i6 = A.get(t6.strings);
-    return void 0 === i6 && A.set(t6.strings, i6 = new N(t6)), i6;
+    let i6 = C.get(t6.strings);
+    return void 0 === i6 && C.set(t6.strings, i6 = new S2(t6)), i6;
   }
   k(t6) {
-    a2(this._$AH) || (this._$AH = [], this._$AR());
+    u2(this._$AH) || (this._$AH = [], this._$AR());
     const i6 = this._$AH;
     let s4, e8 = 0;
-    for (const h3 of t6) e8 === i6.length ? i6.push(s4 = new _R(this.O(l2()), this.O(l2()), this, this.options)) : s4 = i6[e8], s4._$AI(h3), e8++;
+    for (const h3 of t6) e8 === i6.length ? i6.push(s4 = new _k(this.O(c3()), this.O(c3()), this, this.options)) : s4 = i6[e8], s4._$AI(h3), e8++;
     e8 < i6.length && (this._$AR(s4 && s4._$AB.nextSibling, e8), i6.length = e8);
   }
-  _$AR(t6 = this._$AA.nextSibling, i6) {
-    for (this._$AP?.(false, true, i6); t6 !== this._$AB; ) {
-      const i7 = t6.nextSibling;
-      t6.remove(), t6 = i7;
+  _$AR(t6 = this._$AA.nextSibling, s4) {
+    for (this._$AP?.(false, true, s4); t6 !== this._$AB; ) {
+      const s5 = i3(t6).nextSibling;
+      i3(t6).remove(), t6 = s5;
     }
   }
   setConnected(t6) {
     void 0 === this._$AM && (this._$Cv = t6, this._$AP?.(t6));
   }
 };
-var k = class {
+var H = class {
   get tagName() {
     return this.element.tagName;
   }
@@ -460,53 +461,53 @@ var k = class {
     return this._$AM._$AU;
   }
   constructor(t6, i6, s4, e8, h3) {
-    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t6, this.name = i6, this._$AM = e8, this.options = h3, s4.length > 2 || "" !== s4[0] || "" !== s4[1] ? (this._$AH = Array(s4.length - 1).fill(new String()), this.strings = s4) : this._$AH = E;
+    this.type = 1, this._$AH = A, this._$AN = void 0, this.element = t6, this.name = i6, this._$AM = e8, this.options = h3, s4.length > 2 || "" !== s4[0] || "" !== s4[1] ? (this._$AH = Array(s4.length - 1).fill(new String()), this.strings = s4) : this._$AH = A;
   }
   _$AI(t6, i6 = this, s4, e8) {
     const h3 = this.strings;
     let o8 = false;
-    if (void 0 === h3) t6 = S2(this, t6, i6, 0), o8 = !c3(t6) || t6 !== this._$AH && t6 !== T, o8 && (this._$AH = t6);
+    if (void 0 === h3) t6 = M(this, t6, i6, 0), o8 = !a2(t6) || t6 !== this._$AH && t6 !== E, o8 && (this._$AH = t6);
     else {
       const e9 = t6;
       let n5, r7;
-      for (t6 = h3[0], n5 = 0; n5 < h3.length - 1; n5++) r7 = S2(this, e9[s4 + n5], i6, n5), r7 === T && (r7 = this._$AH[n5]), o8 || (o8 = !c3(r7) || r7 !== this._$AH[n5]), r7 === E ? t6 = E : t6 !== E && (t6 += (r7 ?? "") + h3[n5 + 1]), this._$AH[n5] = r7;
+      for (t6 = h3[0], n5 = 0; n5 < h3.length - 1; n5++) r7 = M(this, e9[s4 + n5], i6, n5), r7 === E && (r7 = this._$AH[n5]), o8 || (o8 = !a2(r7) || r7 !== this._$AH[n5]), r7 === A ? t6 = A : t6 !== A && (t6 += (r7 ?? "") + h3[n5 + 1]), this._$AH[n5] = r7;
     }
     o8 && !e8 && this.j(t6);
   }
   j(t6) {
-    t6 === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t6 ?? "");
+    t6 === A ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t6 ?? "");
   }
 };
-var H = class extends k {
+var I = class extends H {
   constructor() {
     super(...arguments), this.type = 3;
   }
   j(t6) {
-    this.element[this.name] = t6 === E ? void 0 : t6;
+    this.element[this.name] = t6 === A ? void 0 : t6;
   }
 };
-var I = class extends k {
+var L = class extends H {
   constructor() {
     super(...arguments), this.type = 4;
   }
   j(t6) {
-    this.element.toggleAttribute(this.name, !!t6 && t6 !== E);
+    this.element.toggleAttribute(this.name, !!t6 && t6 !== A);
   }
 };
-var L = class extends k {
+var z = class extends H {
   constructor(t6, i6, s4, e8, h3) {
     super(t6, i6, s4, e8, h3), this.type = 5;
   }
   _$AI(t6, i6 = this) {
-    if ((t6 = S2(this, t6, i6, 0) ?? E) === T) return;
-    const s4 = this._$AH, e8 = t6 === E && s4 !== E || t6.capture !== s4.capture || t6.once !== s4.once || t6.passive !== s4.passive, h3 = t6 !== E && (s4 === E || e8);
+    if ((t6 = M(this, t6, i6, 0) ?? A) === E) return;
+    const s4 = this._$AH, e8 = t6 === A && s4 !== A || t6.capture !== s4.capture || t6.once !== s4.once || t6.passive !== s4.passive, h3 = t6 !== A && (s4 === A || e8);
     e8 && this.element.removeEventListener(this.name, this, s4), h3 && this.element.addEventListener(this.name, this, t6), this._$AH = t6;
   }
   handleEvent(t6) {
     "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t6) : this._$AH.handleEvent(t6);
   }
 };
-var z = class {
+var Z = class {
   constructor(t6, i6, s4) {
     this.element = t6, this.type = 6, this._$AN = void 0, this._$AM = i6, this.options = s4;
   }
@@ -514,22 +515,22 @@ var z = class {
     return this._$AM._$AU;
   }
   _$AI(t6) {
-    S2(this, t6);
+    M(this, t6);
   }
 };
-var j = t2.litHtmlPolyfillSupport;
-j?.(N, R), (t2.litHtmlVersions ?? (t2.litHtmlVersions = [])).push("3.3.1");
-var B = (t6, i6, s4) => {
+var B = t2.litHtmlPolyfillSupport;
+B?.(S2, k), (t2.litHtmlVersions ?? (t2.litHtmlVersions = [])).push("3.3.2");
+var D = (t6, i6, s4) => {
   const e8 = s4?.renderBefore ?? i6;
   let h3 = e8._$litPart$;
   if (void 0 === h3) {
     const t7 = s4?.renderBefore ?? null;
-    e8._$litPart$ = h3 = new R(i6.insertBefore(l2(), t7), t7, void 0, s4 ?? {});
+    e8._$litPart$ = h3 = new k(i6.insertBefore(c3(), t7), t7, void 0, s4 ?? {});
   }
   return h3._$AI(t6), h3;
 };
 
-// ../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js
+// ../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js
 var s3 = globalThis;
 var i4 = class extends y {
   constructor() {
@@ -542,7 +543,7 @@ var i4 = class extends y {
   }
   update(t6) {
     const r7 = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t6), this._$Do = B(r7, this.renderRoot, this.renderOptions);
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t6), this._$Do = D(r7, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     super.connectedCallback(), this._$Do?.setConnected(true);
@@ -551,22 +552,22 @@ var i4 = class extends y {
     super.disconnectedCallback(), this._$Do?.setConnected(false);
   }
   render() {
-    return T;
+    return E;
   }
 };
 i4._$litElement$ = true, i4["finalized"] = true, s3.litElementHydrateSupport?.({ LitElement: i4 });
 var o4 = s3.litElementPolyfillSupport;
 o4?.({ LitElement: i4 });
-(s3.litElementVersions ?? (s3.litElementVersions = [])).push("4.2.1");
+(s3.litElementVersions ?? (s3.litElementVersions = [])).push("4.2.2");
 
-// ../../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/custom-element.js
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/custom-element.js
 var t3 = (t6) => (e8, o8) => {
-  void 0 !== o8 ? o8.addInitializer((() => {
+  void 0 !== o8 ? o8.addInitializer(() => {
     customElements.define(t6, e8);
-  })) : customElements.define(t6, e8);
+  }) : customElements.define(t6, e8);
 };
 
-// ../../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js
 var o5 = { attribute: true, type: String, converter: u, reflect: false, hasChanged: f };
 var r4 = (t6 = o5, e8, r7) => {
   const { kind: n5, metadata: i6 } = r7;
@@ -575,7 +576,7 @@ var r4 = (t6 = o5, e8, r7) => {
     const { name: o8 } = r7;
     return { set(r8) {
       const n6 = e8.get.call(this);
-      e8.set.call(this, r8), this.requestUpdate(o8, n6, t6);
+      e8.set.call(this, r8), this.requestUpdate(o8, n6, t6, true, r8);
     }, init(e9) {
       return void 0 !== e9 && this.C(o8, void 0, t6, e9), e9;
     } };
@@ -584,7 +585,7 @@ var r4 = (t6 = o5, e8, r7) => {
     const { name: o8 } = r7;
     return function(r8) {
       const n6 = this[o8];
-      e8.call(this, r8), this.requestUpdate(o8, n6, t6);
+      e8.call(this, r8), this.requestUpdate(o8, n6, t6, true, r8);
     };
   }
   throw Error("Unsupported decorator location: " + n5);
@@ -596,15 +597,15 @@ function n4(t6) {
   })(t6, e8, o8);
 }
 
-// ../../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js
 function r5(r7) {
   return n4({ ...r7, state: true, attribute: false });
 }
 
-// ../../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/base.js
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/base.js
 var e4 = (e8, t6, c4) => (c4.configurable = true, c4.enumerable = true, Reflect.decorate && "object" != typeof t6 && Object.defineProperty(e8, t6, c4), c4);
 
-// ../../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-all.js
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-all.js
 var e5;
 function r6(r7) {
   return (n5, o8) => e4(n5, o8, { get() {
@@ -634,7 +635,7 @@ var ConsentButton = class extends i4 {
     }
   }
   render() {
-    return x`
+    return b2`
       <button
         part="button"
         type="button"
@@ -642,7 +643,7 @@ var ConsentButton = class extends i4 {
         aria-busy=${this.loading}
         @click=${this.handleClick}
       >
-        ${this.loading ? x`<span class="spinner"></span>` : null}
+        ${this.loading ? b2`<span class="spinner"></span>` : null}
         <slot></slot>
       </button>
     `;
@@ -777,7 +778,7 @@ var ConsentCheckbox = class extends i4 {
     );
   }
   render() {
-    return x`
+    return b2`
       <label part="label">
         <input
           part="checkbox"
@@ -961,18 +962,18 @@ var ConsentInput = class extends i4 {
   }
   renderPasswordToggle() {
     if (this.type !== "password") return null;
-    const icon = this.showPassword ? x`
+    const icon = this.showPassword ? b2`
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
             <line x1="1" y1="1" x2="23" y2="23"/>
           </svg>
-        ` : x`
+        ` : b2`
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
             <circle cx="12" cy="12" r="3"/>
           </svg>
         `;
-    return x`
+    return b2`
       <button
         type="button"
         class="password-toggle"
@@ -986,11 +987,11 @@ var ConsentInput = class extends i4 {
   }
   render() {
     const inputType = this.type === "password" && this.showPassword ? "text" : this.type;
-    return x`
+    return b2`
       <div class="field">
-        ${this.label ? x`
+        ${this.label ? b2`
               <label part="label" for="input">
-                ${this.label}${this.required ? x`<span class="required">*</span>` : null}
+                ${this.label}${this.required ? b2`<span class="required">*</span>` : null}
               </label>
             ` : null}
         <div class="input-wrapper${this.error ? " has-error" : ""}">
@@ -1009,7 +1010,7 @@ var ConsentInput = class extends i4 {
           />
           ${this.renderPasswordToggle()}
         </div>
-        ${this.error ? x`<div class="error-message">${this.error}</div>` : null}
+        ${this.error ? b2`<div class="error-message">${this.error}</div>` : null}
       </div>
     `;
   }
@@ -1190,7 +1191,7 @@ var ConsentShell = class extends i4 {
   }
   renderLogo() {
     if (this.logoUrl) {
-      return x`
+      return b2`
         <img
           class="logo"
           src=${this.logoUrl}
@@ -1198,7 +1199,7 @@ var ConsentShell = class extends i4 {
         />
       `;
     }
-    return x`
+    return b2`
       <div class="default-icon">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -1226,11 +1227,11 @@ var ConsentShell = class extends i4 {
     }
   }
   render() {
-    return x`
+    return b2`
       <div class="container" part="container">
         <header class="header" part="header">
           ${this.renderLogo()}
-          ${this.companyName ? x`<div class="company-name">${this.companyName}</div>` : null}
+          ${this.companyName ? b2`<div class="company-name">${this.companyName}</div>` : null}
           <h1 class="title">${this.pageTitle}</h1>
         </header>
 
@@ -1461,9 +1462,9 @@ var ConsentPermissions = class extends i4 {
   renderIcon() {
     switch (this.iconStyle) {
       case "bullet":
-        return x`<div class="icon icon-bullet"></div>`;
+        return b2`<div class="icon icon-bullet"></div>`;
       case "shield":
-        return x`
+        return b2`
           <div class="icon icon-shield">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1477,7 +1478,7 @@ var ConsentPermissions = class extends i4 {
           </div>
         `;
       default:
-        return x`
+        return b2`
           <div class="icon icon-check">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1494,9 +1495,9 @@ var ConsentPermissions = class extends i4 {
   }
   renderPermissionItem(scope) {
     const isSelected = this.selectedScopes.has(scope.id);
-    return x`
+    return b2`
       <li class="permission-item" part="item">
-        ${this.interactive ? x`
+        ${this.interactive ? b2`
               <input
                 type="checkbox"
                 class="checkbox"
@@ -1512,9 +1513,9 @@ var ConsentPermissions = class extends i4 {
         <div class="content">
           <span class="label">
             ${scope.label}
-            ${scope.required ? x`<span class="required-badge">Required</span>` : null}
+            ${scope.required ? b2`<span class="required-badge">Required</span>` : null}
           </span>
-          ${scope.description ? x`<div class="description">${scope.description}</div>` : null}
+          ${scope.description ? b2`<div class="description">${scope.description}</div>` : null}
         </div>
       </li>
     `;
@@ -1522,9 +1523,9 @@ var ConsentPermissions = class extends i4 {
   render() {
     const scopes = this.normalizedScopes;
     if (scopes.length === 0) {
-      return x`<div class="empty">No permissions requested</div>`;
+      return b2`<div class="empty">No permissions requested</div>`;
     }
-    return x`
+    return b2`
       <ul class="permission-list" part="list" role="list">
         ${scopes.map((scope) => this.renderPermissionItem(scope))}
       </ul>
@@ -1752,7 +1753,7 @@ var ConsentTerms = class extends i4 {
   }
   renderLink(text, url) {
     if (url) {
-      return x`<a
+      return b2`<a
         href=${url}
         target="_blank"
         rel="noopener noreferrer"
@@ -1761,11 +1762,11 @@ var ConsentTerms = class extends i4 {
         >${text}</a
       >`;
     }
-    return x`<span>${text}</span>`;
+    return b2`<span>${text}</span>`;
   }
   render() {
     const hasPrivacy = this.privacyText && this.privacyUrl;
-    return x`
+    return b2`
       <label part="label">
         <input
           part="checkbox"
@@ -1779,11 +1780,11 @@ var ConsentTerms = class extends i4 {
         />
         <span class="text">
           ${this.labelPrefix} ${this.renderLink(this.text, this.url)}
-          ${hasPrivacy ? x`
+          ${hasPrivacy ? b2`
                 ${this.conjunction}
                 ${this.renderLink(this.privacyText, this.privacyUrl)}
-              ` : E}
-          ${this.required ? x`<span class="required">*</span>` : E}
+              ` : A}
+          ${this.required ? b2`<span class="required">*</span>` : A}
         </span>
       </label>
     `;
@@ -1936,7 +1937,7 @@ ConsentTerms = __decorateClass([
   t3("consent-terms")
 ], ConsentTerms);
 
-// ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directive.js
+// ../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directive.js
 var t4 = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 };
 var e6 = (t6) => (...e8) => ({ _$litDirective$: t6, values: e8 });
 var i5 = class {
@@ -1956,14 +1957,14 @@ var i5 = class {
   }
 };
 
-// ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js
+// ../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/unsafe-html.js
 var e7 = class extends i5 {
   constructor(i6) {
-    if (super(i6), this.it = E, i6.type !== t4.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+    if (super(i6), this.it = A, i6.type !== t4.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
   render(r7) {
-    if (r7 === E || null == r7) return this._t = void 0, this.it = r7;
-    if (r7 === T) return r7;
+    if (r7 === A || null == r7) return this._t = void 0, this.it = r7;
+    if (r7 === E) return r7;
     if ("string" != typeof r7) throw Error(this.constructor.directiveName + "() called with a non-string value");
     if (r7 === this.it) return this._t;
     this.it = r7;
@@ -1974,7 +1975,7 @@ var e7 = class extends i5 {
 e7.directiveName = "unsafeHTML", e7.resultType = 1;
 var o6 = e6(e7);
 
-// ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-svg.js
+// ../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/unsafe-svg.js
 var t5 = class extends e7 {
 };
 t5.directiveName = "unsafeSVG", t5.resultType = 2;
@@ -2080,11 +2081,11 @@ var ConsentOAuthButton = class extends i4 {
   renderProviderIcon() {
     if (this.customIcon) {
       const sanitized = sanitizeSvg(this.customIcon);
-      return x`<div class="icon">${o7(sanitized)}</div>`;
+      return b2`<div class="icon">${o7(sanitized)}</div>`;
     }
     switch (this.provider) {
       case "google":
-        return x`
+        return b2`
           <div class="icon">
             <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -2107,7 +2108,7 @@ var ConsentOAuthButton = class extends i4 {
           </div>
         `;
       case "microsoft":
-        return x`
+        return b2`
           <div class="icon">
             <svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
               <rect x="1" y="1" width="9" height="9" fill="#f25022" />
@@ -2118,7 +2119,7 @@ var ConsentOAuthButton = class extends i4 {
           </div>
         `;
       case "apple":
-        return x`
+        return b2`
           <div class="icon">
             <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -2129,7 +2130,7 @@ var ConsentOAuthButton = class extends i4 {
           </div>
         `;
       case "github":
-        return x`
+        return b2`
           <div class="icon">
             <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -2140,7 +2141,7 @@ var ConsentOAuthButton = class extends i4 {
           </div>
         `;
       case "twitter":
-        return x`
+        return b2`
           <div class="icon">
             <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -2151,7 +2152,7 @@ var ConsentOAuthButton = class extends i4 {
           </div>
         `;
       case "facebook":
-        return x`
+        return b2`
           <div class="icon">
             <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -2162,7 +2163,7 @@ var ConsentOAuthButton = class extends i4 {
           </div>
         `;
       default:
-        return E;
+        return A;
     }
   }
   updated(changedProperties) {
@@ -2176,7 +2177,7 @@ var ConsentOAuthButton = class extends i4 {
   }
   render() {
     const isLoading = this.loading || this.redirecting;
-    return x`
+    return b2`
       <button
         part="button"
         type="button"
@@ -2189,7 +2190,7 @@ var ConsentOAuthButton = class extends i4 {
         "
         aria-busy=${isLoading}
       >
-        ${isLoading ? x`<span class="spinner"></span>` : this.renderProviderIcon()}
+        ${isLoading ? b2`<span class="spinner"></span>` : this.renderProviderIcon()}
         <span class="text" part="text">${this.displayText}</span>
       </button>
     `;
@@ -2475,7 +2476,7 @@ var ConsentOTPInput = class extends i4 {
   renderDigitInput(index) {
     const digit = this.digits[index] || "";
     const isFilled = digit !== "";
-    return x`
+    return b2`
       <input
         part="input"
         type=${this.inputType}
@@ -2495,7 +2496,7 @@ var ConsentOTPInput = class extends i4 {
     `;
   }
   render() {
-    return x`
+    return b2`
       <div class="container" part="container" role="group" aria-label="One-time password input">
         ${Array.from({ length: this.length }, (_2, i6) => this.renderDigitInput(i6))}
       </div>
@@ -2615,6 +2616,1229 @@ ConsentOTPInput = __decorateClass([
   t3("consent-otp-input")
 ], ConsentOTPInput);
 
+// src/copy/tokens.ts
+var CONSENT_COPY_TOKENS = {
+  eyebrow: {
+    /** Light theme (consent screen). */
+    permissionRequest: "PERMISSION REQUEST",
+    /** Dark theme (gateway). `{Brand}` → operator-set brand name. */
+    gatewayBrand: "{Brand} Gateway"
+  },
+  headline: {
+    /**
+     * `{Agent}` → agent display name (serif italic at render time).
+     * `{Verb}`  → operator verb, default "use".
+     * `{Org}`   → organization display name (serif italic at render time).
+     */
+    template: "{Agent} would like to {Verb} at {Org} for you."
+  },
+  subhead: {
+    /** `{Agent}` → agent display name. */
+    template: "Pick what {Agent} is allowed to do on your behalf. You stay in charge \u2014 change or cancel anytime."
+  },
+  agentTile: {
+    verifiedPill: "Verified",
+    unverifiedPill: "UNVERIFIED",
+    /** `{Vendor}` → vendor name. `{Surface}` → surface label. */
+    metaTemplate: "Made by {Vendor} \xB7 Asking from your {Surface} \xB7 {Connected}",
+    connectedJustNow: "Connected just now",
+    /** `{Minutes}` → minutes since connection. */
+    connectedMinutesAgo: "Connected {Minutes} min ago"
+  },
+  section: {
+    /** `{Agent}` → agent display name (uppercased at render time). */
+    capabilitiesHeader: "WHAT {Agent} CAN DO FOR YOU",
+    tapToToggle: "Tap to toggle",
+    /** Used in the dark gateway theme. */
+    permissionsRequested: "PERMISSIONS REQUESTED"
+  },
+  capabilityRow: {
+    higherRiskChip: "HIGHER RISK",
+    viewPolicyLink: "View policy",
+    /** Disclosure title above the raw Cedar. */
+    rawPolicyTitle: "Cedar policy",
+    /** Disclosure title above the plain-language gloss. */
+    glossTitle: "What this allows",
+    /** Used in the gloss when no resource is extractable. */
+    glossUnknownResource: "this deployment"
+  },
+  footer: {
+    /**
+     * `{RevocationPath}` → e.g. "Account → Connected Agents".
+     * `{Org}`            → organization display name.
+     */
+    revocationTemplate: "You can change or revoke any of these permissions anytime under {RevocationPath} at {Org}.",
+    /** `{Days}` → inactivity days, default 90. */
+    inactivityTemplate: "Permissions automatically expire after {Days} days of inactivity."
+  },
+  actions: {
+    /** Light theme primary. `{Agent}` → agent display name. */
+    allowAgentTemplate: "Allow {Agent}",
+    /** Dark theme primary. */
+    allowAccess: "Allow access",
+    /** Light theme secondary. */
+    notNow: "Not now",
+    /** Dark theme secondary. */
+    deny: "Deny"
+  },
+  attribution: {
+    /** Light theme. */
+    protectedBy: "Protected by Checkpoint",
+    /** Dark theme. */
+    securedBy: "Secured by Checkpoint",
+    howThisWorks: "How does this work?"
+  }
+};
+function formatToken(template, values) {
+  return template.replace(/\{(\w+)\}/g, (match, key) => {
+    const value = values[key];
+    return value === void 0 ? match : String(value);
+  });
+}
+
+// src/components/consent-agent-header.ts
+var ConsentAgentHeader = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.agentName = "";
+    this.vendor = "";
+    this.surfaceLabel = "";
+    this.verified = false;
+    this.logoUrl = "";
+    this.connectedAt = "";
+  }
+  renderConnectedFragment() {
+    if (!this.connectedAt) {
+      return CONSENT_COPY_TOKENS.agentTile.connectedJustNow;
+    }
+    const ts = Date.parse(this.connectedAt);
+    if (Number.isNaN(ts)) {
+      return CONSENT_COPY_TOKENS.agentTile.connectedJustNow;
+    }
+    const minutes = Math.max(0, Math.floor((Date.now() - ts) / 6e4));
+    if (minutes < 1) {
+      return CONSENT_COPY_TOKENS.agentTile.connectedJustNow;
+    }
+    return formatToken(CONSENT_COPY_TOKENS.agentTile.connectedMinutesAgo, {
+      Minutes: minutes
+    });
+  }
+  renderMeta() {
+    if (!this.vendor && !this.surfaceLabel) {
+      return this.renderConnectedFragment();
+    }
+    return formatToken(CONSENT_COPY_TOKENS.agentTile.metaTemplate, {
+      Vendor: this.vendor || "\u2014",
+      Surface: this.surfaceLabel || "this device",
+      Connected: this.renderConnectedFragment()
+    });
+  }
+  render() {
+    const initial = (this.agentName || "?").trim().charAt(0).toUpperCase();
+    const verifiedLabel = this.verified ? CONSENT_COPY_TOKENS.agentTile.verifiedPill : CONSENT_COPY_TOKENS.agentTile.unverifiedPill;
+    const verifiedClass = this.verified ? "verified" : "unverified";
+    return b2`
+      <div class="tile" part="tile">
+        <div class="logo" aria-hidden="true">
+          ${this.logoUrl ? b2`<img src="${this.logoUrl}" alt="" />` : b2`<div class="placeholder">${initial}</div>`}
+        </div>
+        <div class="body">
+          <div class="row-name">
+            <span class="name">${this.agentName || A}</span>
+            <span class="pill ${verifiedClass}" part="pill">
+              ${verifiedLabel}
+            </span>
+          </div>
+          <div class="meta">${this.renderMeta()}</div>
+        </div>
+      </div>
+    `;
+  }
+};
+ConsentAgentHeader.styles = i`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .tile {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px 18px;
+      border-radius: 14px;
+      background: var(--cs-surface-inset, transparent);
+      border: 1px solid var(--cs-surface-border, transparent);
+    }
+
+    .logo {
+      width: 44px;
+      height: 44px;
+      border-radius: 12px;
+      flex-shrink: 0;
+      background: var(--cs-surface-card, #fff);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      border: 1px solid var(--cs-surface-border, transparent);
+    }
+
+    .logo img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .logo .placeholder {
+      width: 100%;
+      height: 100%;
+      background: var(--cs-surface-accent, #0F172A);
+      color: var(--cs-surface-accent-text, #fff);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 18px;
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+    }
+
+    .row-name {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+
+    .name {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--cs-text-primary, #0F172A);
+      letter-spacing: -0.01em;
+    }
+
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px;
+      border-radius: 999px;
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+    }
+
+    .pill.verified {
+      background: var(--cs-pill-verified-bg, #DCFCE7);
+      color: var(--cs-pill-verified-text, #166534);
+    }
+
+    .pill.unverified {
+      background: var(--cs-pill-unverified-bg, #F1F5F9);
+      color: var(--cs-pill-unverified-text, #475569);
+      letter-spacing: 0.08em;
+    }
+
+    .meta {
+      font-size: 12px;
+      color: var(--cs-text-tertiary, #64748B);
+      line-height: 1.5;
+    }
+  `;
+__decorateClass([
+  n4({ type: String })
+], ConsentAgentHeader.prototype, "agentName", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentAgentHeader.prototype, "vendor", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentAgentHeader.prototype, "surfaceLabel", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], ConsentAgentHeader.prototype, "verified", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentAgentHeader.prototype, "logoUrl", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentAgentHeader.prototype, "connectedAt", 2);
+ConsentAgentHeader = __decorateClass([
+  t3("consent-agent-header")
+], ConsentAgentHeader);
+
+// src/cedar/explain.ts
+var ACTION_SINGLE = /action\s*==\s*Action::"([^"]+)"/g;
+var ACTION_LIST = /action\s+in\s*\[([^\]]+)\]/g;
+var ACTION_STRING_IN_LIST = /Action::"([^"]+)"/g;
+var RESOURCE_IN = /resource\s+in\s+([^,)\n]+)/i;
+var RESOURCE_EQ = /resource\s*==\s*([^,)\n]+)/i;
+var CONDITION_BLOCK = /(when|unless)\s*\{([^}]+)\}/g;
+function explainCedarFragment(cedar) {
+  return {
+    actions: extractActions(cedar),
+    resource: extractResource(cedar),
+    conditions: extractConditions(cedar)
+  };
+}
+function extractActions(cedar) {
+  const actions = /* @__PURE__ */ new Set();
+  for (const match of cedar.matchAll(ACTION_SINGLE)) {
+    if (match[1]) actions.add(match[1]);
+  }
+  for (const listMatch of cedar.matchAll(ACTION_LIST)) {
+    const inner = listMatch[1];
+    if (!inner) continue;
+    for (const stringMatch of inner.matchAll(ACTION_STRING_IN_LIST)) {
+      if (stringMatch[1]) actions.add(stringMatch[1]);
+    }
+  }
+  return Array.from(actions);
+}
+function extractResource(cedar) {
+  const inMatch = RESOURCE_IN.exec(cedar);
+  if (inMatch && inMatch[1]) {
+    return inMatch[1].trim();
+  }
+  const eqMatch = RESOURCE_EQ.exec(cedar);
+  if (eqMatch && eqMatch[1]) {
+    return eqMatch[1].trim();
+  }
+  return "";
+}
+function extractConditions(cedar) {
+  const conditions = [];
+  for (const match of cedar.matchAll(CONDITION_BLOCK)) {
+    const keyword = match[1];
+    const body = match[2];
+    if (!keyword || !body) continue;
+    conditions.push(`${keyword} ${body.trim().replace(/\s+/g, " ")}`);
+  }
+  return conditions;
+}
+
+// src/components/consent-capability-card.ts
+var ConsentCapabilityCard = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.capabilityId = "";
+    this.label = "";
+    this.description = "";
+    this.icon = "neutral";
+    this.riskLevel = "low";
+    this.checked = false;
+    this.compiledCedar = "";
+    this.policyOpen = false;
+  }
+  toggleChecked() {
+    this.checked = !this.checked;
+    const detail = {
+      id: this.capabilityId,
+      checked: this.checked
+    };
+    this.dispatchEvent(
+      new CustomEvent("capability-toggle", {
+        detail,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  togglePolicy() {
+    this.policyOpen = !this.policyOpen;
+  }
+  isHigherRisk() {
+    return this.riskLevel === "high" || this.riskLevel === "critical";
+  }
+  renderIcon() {
+    return iconSvgFor(this.icon);
+  }
+  renderPolicy() {
+    if (!this.policyOpen) return A;
+    if (!this.compiledCedar) return A;
+    const explanation = explainCedarFragment(this.compiledCedar);
+    const tokens = CONSENT_COPY_TOKENS.capabilityRow;
+    return b2`
+      <div class="policy-disclosure" part="policy">
+        <h4>${tokens.glossTitle}</h4>
+        <ul>
+          ${explanation.actions.length === 0 ? b2`<li>—</li>` : explanation.actions.map(
+      (action) => b2`<li><code>${action}</code></li>`
+    )}
+        </ul>
+        ${explanation.resource ? b2`<p>
+              On <code>${explanation.resource}</code>
+            </p>` : b2`<p>On ${tokens.glossUnknownResource}</p>`}
+        <h4>${tokens.rawPolicyTitle}</h4>
+        <pre><code>${this.compiledCedar}</code></pre>
+      </div>
+    `;
+  }
+  render() {
+    const tokens = CONSENT_COPY_TOKENS.capabilityRow;
+    return b2`
+      <div class="row" part="row">
+        <button
+          class="checkbox"
+          part="checkbox"
+          role="checkbox"
+          aria-checked="${String(this.checked)}"
+          aria-label="${this.label}"
+          @click=${this.toggleChecked}
+          type="button"
+        >
+          ${this.checked ? b2`<span class="check-mark">✓</span>` : A}
+        </button>
+        <div class="icon-tile" aria-hidden="true">${this.renderIcon()}</div>
+        <div class="body">
+          <div class="row-label">
+            <span><strong>${this.label}</strong> <span class="description">${this.description}</span></span>
+            ${this.isHigherRisk() ? b2`<span class="risk-chip">${tokens.higherRiskChip}</span>` : A}
+          </div>
+          <button
+            class="policy-toggle"
+            type="button"
+            @click=${this.togglePolicy}
+            aria-expanded="${String(this.policyOpen)}"
+          >
+            ${tokens.viewPolicyLink}
+          </button>
+          ${this.renderPolicy()}
+        </div>
+      </div>
+    `;
+  }
+};
+ConsentCapabilityCard.styles = i`
+    :host {
+      display: block;
+      border-bottom: 1px solid var(--cs-surface-border, rgba(15, 23, 42, 0.08));
+    }
+
+    :host(:last-of-type) {
+      border-bottom: none;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: 22px 36px 1fr;
+      gap: 14px;
+      padding: 16px 0;
+      align-items: flex-start;
+    }
+
+    .checkbox {
+      width: 22px;
+      height: 22px;
+      border-radius: 6px;
+      border: 1.5px solid var(--cs-text-secondary, #334155);
+      background: transparent;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      transition: background 0.12s ease, border-color 0.12s ease;
+    }
+
+    .checkbox[aria-checked="true"] {
+      background: var(--cs-surface-accent, #0F172A);
+      border-color: var(--cs-surface-accent, #0F172A);
+    }
+
+    .checkbox:focus-visible {
+      outline: 2px solid var(--cs-focus-ring, #0F172A);
+      outline-offset: 2px;
+    }
+
+    .check-mark {
+      color: var(--cs-surface-accent-text, #fff);
+      font-size: 14px;
+      line-height: 1;
+    }
+
+    .icon-tile {
+      width: 36px;
+      height: 36px;
+      border-radius: 10px;
+      background: var(--cs-surface-inset, #F1ECE2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--cs-text-secondary, #334155);
+    }
+
+    .icon-tile svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      min-width: 0;
+    }
+
+    .row-label {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+      font-size: 14.5px;
+      color: var(--cs-text-primary, #0F172A);
+      line-height: 1.45;
+    }
+
+    .row-label strong {
+      font-weight: 600;
+    }
+
+    .description {
+      color: var(--cs-text-secondary, #334155);
+    }
+
+    .risk-chip {
+      display: inline-flex;
+      padding: 2px 8px;
+      border-radius: 999px;
+      font-size: 10.5px;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      background: var(--cs-chip-risk-bg, #FCE7B6);
+      color: var(--cs-chip-risk-text, #7A4F00);
+    }
+
+    .policy-toggle {
+      align-self: flex-start;
+      background: none;
+      border: none;
+      padding: 0;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--cs-text-tertiary, #64748B);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+      cursor: pointer;
+    }
+
+    .policy-toggle:focus-visible {
+      outline: 2px solid var(--cs-focus-ring, #0F172A);
+      outline-offset: 2px;
+    }
+
+    .policy-disclosure {
+      margin-top: 8px;
+      border-radius: 10px;
+      background: var(--cs-surface-inset, #F1ECE2);
+      padding: 10px 12px;
+      font-size: 12px;
+      color: var(--cs-text-secondary, #334155);
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .policy-disclosure h4 {
+      margin: 0;
+      font-size: 11px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--cs-text-tertiary, #64748B);
+    }
+
+    .policy-disclosure pre {
+      margin: 0;
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 11.5px;
+      line-height: 1.5;
+      white-space: pre-wrap;
+      word-break: break-word;
+      color: var(--cs-text-primary, #0F172A);
+    }
+
+    .policy-disclosure ul {
+      margin: 0;
+      padding-left: 18px;
+    }
+  `;
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilityCard.prototype, "capabilityId", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilityCard.prototype, "label", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilityCard.prototype, "description", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilityCard.prototype, "icon", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilityCard.prototype, "riskLevel", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ConsentCapabilityCard.prototype, "checked", 2);
+__decorateClass([
+  n4({ type: String, attribute: "compiled-cedar" })
+], ConsentCapabilityCard.prototype, "compiledCedar", 2);
+__decorateClass([
+  r5()
+], ConsentCapabilityCard.prototype, "policyOpen", 2);
+ConsentCapabilityCard = __decorateClass([
+  t3("consent-capability-card")
+], ConsentCapabilityCard);
+function iconSvgFor(icon) {
+  switch (icon) {
+    case "search":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="5.25"/><path d="m13.25 13.25 3.5 3.5"/></svg>`;
+    case "cart":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h2l1.4 9.4a1.5 1.5 0 0 0 1.5 1.3h7.6a1.5 1.5 0 0 0 1.5-1.2L18 6H6"/><circle cx="9" cy="17" r="1.2"/><circle cx="15" cy="17" r="1.2"/></svg>`;
+    case "card":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4.5" width="15" height="11" rx="2"/><path d="M2.5 9h15"/><path d="M5.5 13h3"/></svg>`;
+    case "pin":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 17s-5.5-5-5.5-9a5.5 5.5 0 1 1 11 0c0 4-5.5 9-5.5 9z"/><circle cx="10" cy="8" r="2"/></svg>`;
+    case "pin-new":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 17s-5.5-5-5.5-9a5.5 5.5 0 1 1 11 0c0 4-5.5 9-5.5 9z"/><path d="M10 6v4"/><path d="M8 8h4"/></svg>`;
+    case "shield":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.5 4 5v5.5C4 14 6.5 16.5 10 17.5c3.5-1 6-3.5 6-7V5z"/></svg>`;
+    case "key":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="13" r="3.25"/><path d="m9.5 11 6.5-6.5"/><path d="m13.5 7 2 2"/></svg>`;
+    case "tools":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m4 4 6 6"/><path d="m10 4 6 6"/><path d="m4 16 12-12"/></svg>`;
+    case "user":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3"/><path d="M3 17a7 7 0 0 1 14 0"/></svg>`;
+    case "calendar":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="14" height="13" rx="2"/><path d="M3 8h14"/><path d="M7 2v4M13 2v4"/></svg>`;
+    case "lock":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="9" width="12" height="8" rx="2"/><path d="M7 9V6a3 3 0 0 1 6 0v3"/></svg>`;
+    case "eye":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10s3-6 8-6 8 6 8 6-3 6-8 6-8-6-8-6z"/><circle cx="10" cy="10" r="2.25"/></svg>`;
+    case "send":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m17 3-7 7-2 7-3-9z"/></svg>`;
+    case "package":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m10 2 7 4v8l-7 4-7-4V6z"/><path d="m3 6 7 4 7-4"/><path d="M10 18V10"/></svg>`;
+    default:
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="5"/></svg>`;
+  }
+}
+
+// src/components/consent-action-bar.ts
+var ConsentActionBar = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.agentName = "";
+    this.theme = "light";
+    this.disabled = false;
+    this.loading = false;
+  }
+  emitAllow() {
+    if (this.disabled || this.loading) return;
+    this.dispatchEvent(
+      new CustomEvent("consent-allow", { bubbles: true, composed: true })
+    );
+  }
+  emitDeny() {
+    if (this.loading) return;
+    this.dispatchEvent(
+      new CustomEvent("consent-deny", { bubbles: true, composed: true })
+    );
+  }
+  render() {
+    const allowLabel = this.theme === "dark" ? CONSENT_COPY_TOKENS.actions.allowAccess : `${formatToken(CONSENT_COPY_TOKENS.actions.allowAgentTemplate, {
+      Agent: this.agentName || "this agent"
+    })} \u2192`;
+    const denyLabel = this.theme === "dark" ? CONSENT_COPY_TOKENS.actions.deny : CONSENT_COPY_TOKENS.actions.notNow;
+    return b2`
+      <button
+        class="primary"
+        type="button"
+        ?disabled=${this.disabled || this.loading}
+        @click=${this.emitAllow}
+      >
+        ${allowLabel}
+      </button>
+      <button
+        class="secondary"
+        type="button"
+        ?disabled=${this.loading}
+        @click=${this.emitDeny}
+      >
+        ${denyLabel}
+      </button>
+    `;
+  }
+};
+ConsentActionBar.styles = i`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      width: 100%;
+    }
+
+    button {
+      width: 100%;
+      padding: 14px 18px;
+      border-radius: 999px;
+      font-size: 15px;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      transition: opacity 0.15s ease, transform 0.05s ease;
+      border: none;
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    button:focus-visible {
+      outline: 2px solid var(--cs-focus-ring, #0F172A);
+      outline-offset: 3px;
+    }
+
+    .primary {
+      background: var(--cs-surface-accent, #0F172A);
+      color: var(--cs-surface-accent-text, #FFFFFF);
+    }
+
+    .primary:hover:not(:disabled) {
+      opacity: 0.92;
+    }
+
+    .secondary {
+      background: transparent;
+      color: var(--cs-text-secondary, #334155);
+      padding: 10px 18px;
+      font-weight: 500;
+    }
+
+    .secondary:hover:not(:disabled) {
+      color: var(--cs-text-primary, #0F172A);
+    }
+  `;
+__decorateClass([
+  n4({ type: String })
+], ConsentActionBar.prototype, "agentName", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentActionBar.prototype, "theme", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], ConsentActionBar.prototype, "disabled", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], ConsentActionBar.prototype, "loading", 2);
+ConsentActionBar = __decorateClass([
+  t3("consent-action-bar")
+], ConsentActionBar);
+
+// src/components/consent-footer.ts
+var ConsentFooter = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.theme = "light";
+    this.howItWorksUrl = "";
+  }
+  render() {
+    const attribution = this.theme === "dark" ? CONSENT_COPY_TOKENS.attribution.securedBy : CONSENT_COPY_TOKENS.attribution.protectedBy;
+    return b2`
+      <span class="left">
+        <svg
+          class="check"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m3.5 8.5 3 3 6-6.5" />
+        </svg>
+        ${attribution}
+      </span>
+      ${this.howItWorksUrl ? b2`<a href="${this.howItWorksUrl}" target="_blank" rel="noopener">
+            ${CONSENT_COPY_TOKENS.attribution.howThisWorks}
+          </a>` : b2`<span>${CONSENT_COPY_TOKENS.attribution.howThisWorks}</span>`}
+    `;
+  }
+};
+ConsentFooter.styles = i`
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      padding-top: 12px;
+      font-size: 12px;
+      color: var(--cs-text-tertiary, #64748B);
+      border-top: 1px solid var(--cs-surface-border, transparent);
+    }
+
+    .left {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .check {
+      width: 14px;
+      height: 14px;
+      color: var(--cs-text-secondary, #334155);
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    a:hover {
+      color: var(--cs-text-primary, #0F172A);
+    }
+  `;
+__decorateClass([
+  n4({ type: String })
+], ConsentFooter.prototype, "theme", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentFooter.prototype, "howItWorksUrl", 2);
+ConsentFooter = __decorateClass([
+  t3("consent-footer")
+], ConsentFooter);
+
+// src/components/consent-revocation-notice.ts
+var ConsentRevocationNotice = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.revocationPath = "Account \u2192 Connected Agents";
+    this.orgName = "this site";
+    this.inactivityDays = 90;
+  }
+  render() {
+    const revoke = formatToken(CONSENT_COPY_TOKENS.footer.revocationTemplate, {
+      RevocationPath: this.revocationPath,
+      Org: this.orgName
+    });
+    const inactivity = formatToken(
+      CONSENT_COPY_TOKENS.footer.inactivityTemplate,
+      { Days: this.inactivityDays }
+    );
+    return b2`
+      <svg
+        class="icon"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.6"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <circle cx="10" cy="10" r="7.5" />
+        <path d="M10 6v4l2.5 1.5" />
+      </svg>
+      <div class="content">
+        <span>${revoke}</span>
+        <span>${inactivity}</span>
+      </div>
+    `;
+  }
+};
+ConsentRevocationNotice.styles = i`
+    :host {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      padding: 12px 14px;
+      border-radius: 12px;
+      background: var(--cs-surface-inset, #F1ECE2);
+      color: var(--cs-text-secondary, #334155);
+      font-size: 12.5px;
+      line-height: 1.5;
+    }
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+      margin-top: 2px;
+      color: var(--cs-text-tertiary, #64748B);
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    em {
+      font-style: normal;
+      color: var(--cs-text-primary, #0F172A);
+      font-weight: 500;
+    }
+  `;
+__decorateClass([
+  n4({ type: String })
+], ConsentRevocationNotice.prototype, "revocationPath", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentRevocationNotice.prototype, "orgName", 2);
+__decorateClass([
+  n4({ type: Number })
+], ConsentRevocationNotice.prototype, "inactivityDays", 2);
+ConsentRevocationNotice = __decorateClass([
+  t3("consent-revocation-notice")
+], ConsentRevocationNotice);
+
+// src/styles/theme.ts
+var FIXED_RISK_CHIP_BG = "#FCE7B6";
+var FIXED_RISK_CHIP_TEXT = "#7A4F00";
+var lightTheme = {
+  surfaceBg: "#F4F1EA",
+  surfaceCard: "#FFFFFF",
+  surfaceBorder: "rgba(15, 23, 42, 0.10)",
+  surfaceInset: "#F1ECE2",
+  textPrimary: "#0F172A",
+  textSecondary: "#334155",
+  textTertiary: "#64748B",
+  surfaceAccent: "#0F172A",
+  surfaceAccentText: "#FFFFFF",
+  pillVerifiedBg: "#DCFCE7",
+  pillVerifiedText: "#166534",
+  pillUnverifiedBg: "#F1F5F9",
+  pillUnverifiedText: "#475569",
+  chipRiskBg: FIXED_RISK_CHIP_BG,
+  chipRiskText: FIXED_RISK_CHIP_TEXT,
+  focusRing: "rgba(15, 23, 42, 0.35)",
+  cardShadow: "0 30px 80px -40px rgba(15, 23, 42, 0.40)"
+};
+var darkTheme = {
+  surfaceBg: "#0B0808",
+  surfaceCard: "rgba(20, 20, 22, 0.92)",
+  surfaceBorder: "rgba(255, 255, 255, 0.08)",
+  surfaceInset: "rgba(255, 255, 255, 0.04)",
+  textPrimary: "#F8FAFC",
+  textSecondary: "#CBD5E1",
+  textTertiary: "#94A3B8",
+  surfaceAccent: "#F8FAFC",
+  surfaceAccentText: "#0F172A",
+  pillVerifiedBg: "rgba(34, 197, 94, 0.16)",
+  pillVerifiedText: "#86EFAC",
+  pillUnverifiedBg: "rgba(148, 163, 184, 0.18)",
+  pillUnverifiedText: "#CBD5E1",
+  chipRiskBg: FIXED_RISK_CHIP_BG,
+  chipRiskText: FIXED_RISK_CHIP_TEXT,
+  focusRing: "rgba(248, 250, 252, 0.55)",
+  cardShadow: "0 40px 90px -40px rgba(0, 0, 0, 0.85)"
+};
+function getConsentTheme(theme) {
+  return theme === "dark" ? darkTheme : lightTheme;
+}
+function themeToCssVariables(tokens) {
+  const declarations = [];
+  for (const [key, value] of Object.entries(tokens)) {
+    declarations.push(`  --cs-${camelToKebab(key)}: ${value};`);
+  }
+  return declarations.join("\n");
+}
+function camelToKebab(value) {
+  return value.replace(/[A-Z]/g, (c4) => `-${c4.toLowerCase()}`);
+}
+
+// src/cedar/compile.ts
+var PLACEHOLDER_PATTERN = /\{\{\s*(agent_did|user_did|org|deployment)\s*\}\}/g;
+function compileSingleCapability(capability, context) {
+  const compiled = capability.cedar.replace(PLACEHOLDER_PATTERN, (_2, key) => {
+    const value = context[key];
+    if (typeof value !== "string" || value.length === 0) {
+      throw new Error(
+        `Cedar template context missing required value for placeholder \`${key}\``
+      );
+    }
+    return value;
+  });
+  if (compiled.trim().length === 0) {
+    throw new Error(
+      `Cedar fragment for capability \`${capability.id}\` is empty after compilation`
+    );
+  }
+  return compiled;
+}
+
+// src/components/consent-capabilities-screen.ts
+var ConsentCapabilitiesScreen = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.capabilities = [];
+    this.orgName = "";
+    this.headlineVerb = "use";
+    this.revocationPath = "Account \u2192 Connected Agents";
+    this.inactivityDays = 90;
+    this.theme = "light";
+    this.howItWorksUrl = "";
+    this.loading = false;
+    this.selected = /* @__PURE__ */ new Set();
+    this.onCapabilityToggle = (event) => {
+      const detail = event.detail;
+      const next = new Set(this.selected);
+      if (detail.checked) next.add(detail.id);
+      else next.delete(detail.id);
+      this.selected = next;
+    };
+    this.onAllow = () => {
+      if (this.loading) return;
+      const selectedIds = Array.from(this.selected);
+      const selectedScopes = this.capabilities.filter((c4) => this.selected.has(c4.id)).flatMap((c4) => c4.scopes);
+      const detail = {
+        selectedCapabilityIds: selectedIds,
+        selectedScopes
+      };
+      this.dispatchEvent(
+        new CustomEvent("capabilities-allow", {
+          detail,
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    this.onDeny = () => {
+      this.dispatchEvent(
+        new CustomEvent("capabilities-deny", { bubbles: true, composed: true })
+      );
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.seedDefaults();
+  }
+  willUpdate(changed) {
+    if (changed.has("capabilities")) {
+      this.seedDefaults();
+    }
+  }
+  seedDefaults() {
+    const next = /* @__PURE__ */ new Set();
+    for (const capability of this.capabilities) {
+      if (capability.defaultOn) next.add(capability.id);
+    }
+    this.selected = next;
+  }
+  hostStyle() {
+    return `:host { ${themeToCssVariables(getConsentTheme(this.theme))} }`;
+  }
+  compileCapabilityCedar(capability) {
+    if (!this.cedarContext) {
+      return capability.cedar;
+    }
+    try {
+      return compileSingleCapability(capability, this.cedarContext);
+    } catch {
+      return capability.cedar;
+    }
+  }
+  renderHeadline() {
+    const agentName = this.agentMetadata?.name || "this agent";
+    const tokens = CONSENT_COPY_TOKENS;
+    const raw = formatToken(tokens.headline.template, {
+      Agent: "@@AGENT@@",
+      Verb: this.headlineVerb || "use",
+      Org: "@@ORG@@"
+    });
+    const escaped = escapeHtml(raw);
+    const withSerifEntities = escaped.replace("@@AGENT@@", `<em>${escapeHtml(agentName)}</em>`).replace("@@ORG@@", `<em>${escapeHtml(this.orgName || "this site")}</em>`);
+    return b2`<h1
+      class="headline"
+      .innerHTML=${withSerifEntities}
+    ></h1>`;
+  }
+  render() {
+    const tokens = CONSENT_COPY_TOKENS;
+    const agentName = this.agentMetadata?.name || "this agent";
+    const subhead = formatToken(tokens.subhead.template, { Agent: agentName });
+    const sectionHeader = formatToken(tokens.section.capabilitiesHeader, {
+      Agent: agentName.toUpperCase()
+    });
+    return b2`
+      <style>
+        ${this.hostStyle()}
+      </style>
+      <div class="card" part="card">
+        <span class="eyebrow">${tokens.eyebrow.permissionRequest}</span>
+        ${this.renderHeadline()}
+        <p class="subhead">${subhead}</p>
+        ${this.agentMetadata ? b2`<consent-agent-header
+              agentName="${this.agentMetadata.name}"
+              vendor="${this.agentMetadata.vendor || ""}"
+              surfaceLabel="${this.agentMetadata.surfaceLabel || ""}"
+              ?verified=${this.agentMetadata.verified}
+              logoUrl="${this.agentMetadata.logoUrl || ""}"
+              connectedAt="${this.agentMetadata.connectedAt || ""}"
+            ></consent-agent-header>` : A}
+        <div>
+          <div class="section-header">
+            <span>${sectionHeader}</span>
+            <span class="hint">${tokens.section.tapToToggle}</span>
+          </div>
+          <div class="rows" @capability-toggle=${this.onCapabilityToggle}>
+            ${this.capabilities.map(
+      (capability) => b2`
+                <consent-capability-card
+                  capabilityId="${capability.id}"
+                  label="${capability.label}"
+                  description="${capability.description}"
+                  icon="${capability.icon}"
+                  riskLevel="${capability.riskLevel}"
+                  ?checked=${this.selected.has(capability.id)}
+                  compiled-cedar="${this.compileCapabilityCedar(capability)}"
+                ></consent-capability-card>
+              `
+    )}
+          </div>
+        </div>
+        <consent-revocation-notice
+          revocationPath="${this.revocationPath}"
+          orgName="${this.orgName || "this site"}"
+          inactivityDays=${this.inactivityDays}
+        ></consent-revocation-notice>
+        <consent-action-bar
+          agentName="${agentName}"
+          theme="${this.theme}"
+          ?loading=${this.loading}
+          ?disabled=${this.selected.size === 0}
+          @consent-allow=${this.onAllow}
+          @consent-deny=${this.onDeny}
+        ></consent-action-bar>
+        <consent-footer
+          theme="${this.theme}"
+          howItWorksUrl="${this.howItWorksUrl}"
+        ></consent-footer>
+      </div>
+    `;
+  }
+};
+ConsentCapabilitiesScreen.styles = i`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      max-width: 560px;
+      margin: 0 auto;
+    }
+
+    .card {
+      background: var(--cs-surface-card);
+      border: 1px solid var(--cs-surface-border);
+      border-radius: 22px;
+      box-shadow: var(--cs-card-shadow);
+      padding: 28px 28px 22px;
+      display: flex;
+      flex-direction: column;
+      gap: 22px;
+      color: var(--cs-text-primary);
+    }
+
+    .eyebrow {
+      font-size: 11px;
+      letter-spacing: 0.16em;
+      font-weight: 600;
+      color: var(--cs-text-tertiary);
+      text-transform: uppercase;
+    }
+
+    .headline {
+      font-family: "Times New Roman", Georgia, serif;
+      font-size: 30px;
+      line-height: 1.18;
+      letter-spacing: -0.01em;
+      color: var(--cs-text-primary);
+      margin: 0;
+    }
+
+    .headline em {
+      font-style: italic;
+    }
+
+    .subhead {
+      font-size: 14.5px;
+      color: var(--cs-text-secondary);
+      line-height: 1.55;
+      margin: 0;
+    }
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 11px;
+      letter-spacing: 0.14em;
+      font-weight: 600;
+      color: var(--cs-text-tertiary);
+      text-transform: uppercase;
+    }
+
+    .section-header .hint {
+      letter-spacing: 0;
+      font-weight: 400;
+      text-transform: none;
+      font-size: 12px;
+    }
+
+    .rows {
+      display: flex;
+      flex-direction: column;
+    }
+  `;
+__decorateClass([
+  n4({ type: Array })
+], ConsentCapabilitiesScreen.prototype, "capabilities", 2);
+__decorateClass([
+  n4({ type: Object })
+], ConsentCapabilitiesScreen.prototype, "agentMetadata", 2);
+__decorateClass([
+  n4({ type: Object })
+], ConsentCapabilitiesScreen.prototype, "cedarContext", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilitiesScreen.prototype, "orgName", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilitiesScreen.prototype, "headlineVerb", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilitiesScreen.prototype, "revocationPath", 2);
+__decorateClass([
+  n4({ type: Number })
+], ConsentCapabilitiesScreen.prototype, "inactivityDays", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilitiesScreen.prototype, "theme", 2);
+__decorateClass([
+  n4({ type: String, attribute: "how-it-works-url" })
+], ConsentCapabilitiesScreen.prototype, "howItWorksUrl", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], ConsentCapabilitiesScreen.prototype, "loading", 2);
+__decorateClass([
+  r5()
+], ConsentCapabilitiesScreen.prototype, "selected", 2);
+ConsentCapabilitiesScreen = __decorateClass([
+  t3("consent-capabilities-screen")
+], ConsentCapabilitiesScreen);
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+
 // src/types/modes.types.ts
 var AUTH_MODES = {
   /** Simple consent with no authentication - Consent → Success (2 screens) */
@@ -2949,6 +4173,13 @@ var McpConsent = class extends i4 {
     this.credentialUserEmail = "";
     this.credentialProviderUserId = "";
     this.oauthUrl = "";
+    this.capabilities = [];
+    this.orgName = "";
+    this.headlineVerb = "use";
+    this.revocationPath = "Account \u2192 Connected Agents";
+    this.inactivityDays = 90;
+    this.consentTheme = "light";
+    this.howItWorksUrl = "";
     this.authorizationType = "password";
     this.oauthProviderType = "";
     this.currentMode = AUTH_MODES.CONSENT_ONLY;
@@ -2958,6 +4189,13 @@ var McpConsent = class extends i4 {
     this.formData = {};
     this.resendCooldown = 0;
     this.selectedScopes = [];
+    this.closeFailed = false;
+    this.onCapabilitiesAllow = (event) => {
+      const detail = event.detail;
+      this.selectedScopes = Array.from(new Set(detail.selectedScopes));
+      this.termsAccepted = true;
+      void this.handleApprove();
+    };
   }
   // === LIFECYCLE ===
   connectedCallback() {
@@ -3152,6 +4390,12 @@ var McpConsent = class extends i4 {
     );
     window.close();
   }
+  handleClose() {
+    window.close();
+    setTimeout(() => {
+      this.closeFailed = true;
+    }, 300);
+  }
   handleTermsChange(e8) {
     this.termsAccepted = e8.detail.checked;
   }
@@ -3184,7 +4428,7 @@ var McpConsent = class extends i4 {
   // === RENDER METHODS ===
   renderAgentInfo() {
     const agentDisplay = this.agentName || "this agent";
-    return x`
+    return b2`
       <div class="agent-info">
         <div class="agent-icon">
           <svg
@@ -3201,7 +4445,7 @@ var McpConsent = class extends i4 {
         <div class="agent-text">
           <p>
             <strong>${agentDisplay}</strong> is requesting permission to
-            ${this.tool ? x`use the <strong>${this.tool}</strong> tool` : "access your data"}
+            ${this.tool ? b2`use the <strong>${this.tool}</strong> tool` : "access your data"}
             on your behalf.
           </p>
         </div>
@@ -3212,8 +4456,8 @@ var McpConsent = class extends i4 {
     this.selectedScopes = e8.detail.selected;
   }
   renderPermissions() {
-    if (this.scopes.length === 0) return E;
-    return x`
+    if (this.scopes.length === 0) return A;
+    return b2`
       <p class="permissions-header">
         ${this.resolved?.ui.permissionsHeader ?? "The agent is requesting the following permissions:"}
       </p>
@@ -3229,7 +4473,7 @@ var McpConsent = class extends i4 {
   }
   renderExpiration() {
     const days = this.resolved?.expirationDays ?? 7;
-    return x`
+    return b2`
       <p class="expiration">
         ${this.resolved?.ui.expirationText ?? "This delegation will expire in"}
         <strong>${days} ${days === 1 ? "day" : "days"}</strong>
@@ -3237,8 +4481,8 @@ var McpConsent = class extends i4 {
     `;
   }
   renderTerms() {
-    if (!this.resolved?.terms) return E;
-    return x`
+    if (!this.resolved?.terms) return A;
+    return b2`
       <div class="terms">
         <consent-terms
           name="termsAccepted"
@@ -3251,11 +4495,11 @@ var McpConsent = class extends i4 {
     `;
   }
   renderError() {
-    if (!this.error) return E;
-    return x`<div class="error-message">${this.error}</div>`;
+    if (!this.error) return A;
+    return b2`<div class="error-message">${this.error}</div>`;
   }
   renderFooter() {
-    return x`
+    return b2`
       <div slot="footer">
         <consent-button variant="secondary" @click=${this.handleDeny}>
           ${this.resolved?.ui.cancelButtonText ?? "Cancel"}
@@ -3273,7 +4517,7 @@ var McpConsent = class extends i4 {
   }
   // === MODE-SPECIFIC RENDERS ===
   renderConsentOnly() {
-    return x`
+    return b2`
       <consent-shell
         page-title=${this.resolved?.ui.title ?? "Permission Request"}
         company-name=${this.resolved?.branding.companyName ?? ""}
@@ -3292,7 +4536,7 @@ var McpConsent = class extends i4 {
   }
   renderCredentials() {
     const creds = this.resolved?.credentials;
-    return x`
+    return b2`
       <consent-shell
         page-title=${this.resolved?.ui.title ?? "Sign In"}
         company-name=${this.resolved?.branding.companyName ?? ""}
@@ -3333,7 +4577,7 @@ var McpConsent = class extends i4 {
             ></consent-input>
           </div>
 
-          ${creds?.showForgotPassword && creds.forgotPasswordUrl ? x`
+          ${creds?.showForgotPassword && creds.forgotPasswordUrl ? b2`
                 <p style="text-align: right; margin-bottom: 1rem;">
                   <a
                     href=${creds.forgotPasswordUrl}
@@ -3342,7 +4586,7 @@ var McpConsent = class extends i4 {
                     Forgot password?
                   </a>
                 </p>
-              ` : E}
+              ` : A}
         </div>
         ${this.renderFooter()}
       </consent-shell>
@@ -3353,7 +4597,7 @@ var McpConsent = class extends i4 {
     const provider = oauth?.providerId ?? this.provider ?? "oauth";
     const providerName = oauth?.providerName ?? this.provider ?? "OAuth Provider";
     const oauthButtonUrl = this.oauthUrl ? this.oauthUrl : `${this.serverUrl}/oauth/${encodeURIComponent(provider)}?session_id=${encodeURIComponent(this.sessionId)}`;
-    return x`
+    return b2`
       <consent-shell
         page-title=${this.resolved?.ui.title ?? "Sign In"}
         company-name=${this.resolved?.branding.companyName ?? ""}
@@ -3378,7 +4622,7 @@ var McpConsent = class extends i4 {
   }
   renderMagicLink() {
     const ml = this.resolved?.magicLink;
-    return x`
+    return b2`
       <consent-shell
         page-title=${this.resolved?.ui.title ?? "Sign In"}
         company-name=${this.resolved?.branding.companyName ?? ""}
@@ -3423,7 +4667,7 @@ var McpConsent = class extends i4 {
   }
   renderOTP() {
     const otp = this.resolved?.otp;
-    return x`
+    return b2`
       <consent-shell
         page-title=${this.resolved?.ui.title ?? "Verify Code"}
         company-name=${this.resolved?.branding.companyName ?? ""}
@@ -3496,7 +4740,7 @@ var McpConsent = class extends i4 {
     const agentDisplay = this.getAgentDisplayName();
     const expiryDate = this.formatExpiryDate();
     const displayScopes = this.selectedScopes.length > 0 ? this.selectedScopes : this.scopes;
-    return x`
+    return b2`
       <div class="success-container">
         <!-- Success Header -->
         <div class="success-header">
@@ -3529,18 +4773,18 @@ var McpConsent = class extends i4 {
           <div class="credential-label">Delegation Credential</div>
           <div class="credential-agent">${agentDisplay}</div>
 
-          ${displayScopes.length > 0 ? x`
+          ${displayScopes.length > 0 ? b2`
                 <div class="credential-permissions-label">
                   Permissions granted
                 </div>
                 <div class="credential-permissions">
                   ${displayScopes.map(
-      (scope) => x`
+      (scope) => b2`
                       <span class="permission-badge">${scope}</span>
                     `
     )}
                 </div>
-              ` : E}
+              ` : A}
 
           <div class="credential-expiry">Expires ${expiryDate}</div>
 
@@ -3567,13 +4811,15 @@ var McpConsent = class extends i4 {
 
         <!-- Footer with Continue Button -->
         <div class="success-footer">
-          <consent-button
-            variant="primary"
-            full-width
-            @click=${() => window.close()}
-          >
-            ${success?.continueButtonText ?? "Continue"}
-          </consent-button>
+          ${this.closeFailed ? b2`<p class="close-message">You can safely close this tab.</p>` : b2`
+                <consent-button
+                  variant="primary"
+                  full-width
+                  @click=${this.handleClose}
+                >
+                  ${success?.continueButtonText ?? "Continue"}
+                </consent-button>
+              `}
         </div>
       </div>
     `;
@@ -3584,6 +4830,9 @@ var McpConsent = class extends i4 {
     if (displayStep === "success") {
       return this.renderSuccess();
     }
+    if (this.capabilities.length > 0 && this.currentMode === AUTH_MODES.CONSENT_ONLY) {
+      return this.renderCapabilitiesScreen();
+    }
     switch (this.currentMode) {
       case AUTH_MODES.CREDENTIALS:
         return this.renderCredentials();
@@ -3598,6 +4847,39 @@ var McpConsent = class extends i4 {
         return this.renderConsentOnly();
     }
   }
+  /**
+   * Render the new humanized capability layout. Selection state is owned by
+   * `<consent-capabilities-screen>`; on `capabilities-allow`, we hydrate the
+   * legacy form-data path (selectedScopes, terms accepted) and reuse the
+   * existing handleApprove submission logic.
+   */
+  renderCapabilitiesScreen() {
+    const flatCapabilities = this.capabilities.flatMap(
+      (group) => group.capabilities
+    );
+    return b2`
+      ${this.error ? b2`<div role="alert" style="
+            color: var(--cs-text-danger, #b91c1c);
+            margin: 0 auto 12px;
+            max-width: 560px;
+            font-size: 13px;
+          ">${this.error}</div>` : A}
+      <consent-capabilities-screen
+        .capabilities=${flatCapabilities}
+        .agentMetadata=${this.agentMetadata}
+        .cedarContext=${this.cedarContext}
+        orgName="${this.orgName}"
+        headlineVerb="${this.headlineVerb}"
+        revocationPath="${this.revocationPath}"
+        inactivityDays=${this.inactivityDays}
+        theme="${this.consentTheme}"
+        how-it-works-url="${this.howItWorksUrl}"
+        ?loading=${this.loading}
+        @capabilities-allow=${this.onCapabilitiesAllow}
+        @capabilities-deny=${this.handleDeny}
+      ></consent-capabilities-screen>
+    `;
+  }
 };
 McpConsent.styles = i`
     :host {
@@ -3919,6 +5201,14 @@ McpConsent.styles = i`
       margin-top: 1.5rem;
     }
 
+    .close-message {
+      text-align: center;
+      color: #6b7280;
+      font-size: 0.875rem;
+      margin: 0;
+      padding: 0.75rem 0;
+    }
+
     /* OTP section */
     .otp-section {
       text-align: center;
@@ -4033,6 +5323,75 @@ __decorateClass([
 __decorateClass([
   n4({ type: String, attribute: "oauth-url" })
 ], McpConsent.prototype, "oauthUrl", 2);
+__decorateClass([
+  n4({
+    type: Array,
+    converter: {
+      fromAttribute: (value) => {
+        if (!value) return [];
+        try {
+          const parsed = JSON.parse(value);
+          return Array.isArray(parsed) ? parsed : [];
+        } catch {
+          return [];
+        }
+      },
+      toAttribute: (value) => JSON.stringify(value)
+    }
+  })
+], McpConsent.prototype, "capabilities", 2);
+__decorateClass([
+  n4({
+    type: Object,
+    attribute: "agent-metadata",
+    converter: {
+      fromAttribute: (value) => {
+        if (!value) return void 0;
+        try {
+          return JSON.parse(value);
+        } catch {
+          return void 0;
+        }
+      },
+      toAttribute: (value) => value ? JSON.stringify(value) : ""
+    }
+  })
+], McpConsent.prototype, "agentMetadata", 2);
+__decorateClass([
+  n4({ type: String, attribute: "org-name" })
+], McpConsent.prototype, "orgName", 2);
+__decorateClass([
+  n4({ type: String, attribute: "headline-verb" })
+], McpConsent.prototype, "headlineVerb", 2);
+__decorateClass([
+  n4({ type: String, attribute: "revocation-path" })
+], McpConsent.prototype, "revocationPath", 2);
+__decorateClass([
+  n4({ type: Number, attribute: "inactivity-days" })
+], McpConsent.prototype, "inactivityDays", 2);
+__decorateClass([
+  n4({ type: String, attribute: "consent-theme" })
+], McpConsent.prototype, "consentTheme", 2);
+__decorateClass([
+  n4({ type: String, attribute: "how-it-works-url" })
+], McpConsent.prototype, "howItWorksUrl", 2);
+__decorateClass([
+  n4({
+    type: Object,
+    attribute: "cedar-context",
+    converter: {
+      fromAttribute: (value) => {
+        if (!value) return void 0;
+        try {
+          return JSON.parse(value);
+        } catch {
+          return void 0;
+        }
+      },
+      toAttribute: (value) => value ? JSON.stringify(value) : ""
+    }
+  })
+], McpConsent.prototype, "cedarContext", 2);
 __decorateClass([
   n4({ type: String, attribute: "authorization-type" })
 ], McpConsent.prototype, "authorizationType", 2);
@@ -4085,16 +5444,25 @@ __decorateClass([
 __decorateClass([
   r5()
 ], McpConsent.prototype, "selectedScopes", 2);
+__decorateClass([
+  r5()
+], McpConsent.prototype, "closeFailed", 2);
 McpConsent = __decorateClass([
   t3("mcp-consent")
 ], McpConsent);
 export {
+  ConsentActionBar,
+  ConsentAgentHeader,
   ConsentButton,
+  ConsentCapabilitiesScreen,
+  ConsentCapabilityCard,
   ConsentCheckbox,
+  ConsentFooter,
   ConsentInput,
   ConsentOAuthButton,
   ConsentOTPInput,
   ConsentPermissions,
+  ConsentRevocationNotice,
   ConsentShell,
   ConsentTerms,
   McpConsent