diff --git a/index.html b/index.html
index f225186..56f3976 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
   <meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
   <title>Securing Verifiable Credentials using JOSE and COSE</title>
   <script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove"></script>
-  <script class="remove" src="https://cdn.jsdelivr.net/gh/w3c/vc-jose-cose/plugin/dist/main.js"></script>
+  <script class="remove" src="https://cdn.jsdelivr.net/gh/w3c/vc-jose-cose@357a6d2414985efadf6fa2f5cfb3ddf280de301c/plugin/dist/main.js"></script>
   <script class="remove">
     // See https://github.com/w3c/respec/wiki/ for how to configure
     // ReSpec
diff --git a/plugin/attic/sd-jwt/index.js b/plugin/attic/sd-jwt/index.js
deleted file mode 100644
index 888c1a1..0000000
--- a/plugin/attic/sd-jwt/index.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import yaml from 'yaml'
-import moment from 'moment';
-import SD from '@transmute/vc-jwt-sd'
-import {base64url, calculateJwkThumbprint} from 'jose';
-
-const digestName = 'sha-256'
-
-const isVC = (json) => json.type.includes('VerifiableCredential')
-const isVP = (json) => json.type.includes('VerifiablePresentation')
-
-const salter = () => {
-    const array = new Uint8Array(16);
-    crypto.getRandomValues(array);
-    return base64url.encode(array)
-}
-
-const digester = {
-    name: digestName,
-    digest: async (json) => {
-        const content = new TextEncoder().encode(json);
-        const digest = await crypto.subtle.digest(digestName.toUpperCase(), content);
-        return base64url.encode(new Uint8Array(digest));
-    }
-}
-
-export const generateIssuerClaims = (example)=> {
-    return yaml.stringify(example).replace(/id\: /g, '!sd id: ').replace(/type\:/g, '!sd type:')
-}
-
-export const generateHolderDisclosure = (example) => {
-    const claims = generateIssuerClaims(example)
-    // redact nested ideas at depth 2 (spaces)
-    const edited1 = claims.replace(/  !sd id\:(.*?)\n/g, `  id: False\n`)
-    // disclose types
-    const edited2 = edited1.replace(/\!sd type\:/g, `type:`)
-    // redact remaining ids
-    return edited2.replace(/\!sd id\:/g, `id:`)
-}
-
-export const getExampleMetadata = async ({ alg, json }) => {
-    console.log('getExampleMetadata', { alg, json })
-    let iss = undefined
-
-    if(json.issuer){
-        iss = typeof json.issuer === 'string' ? json.issuer: json.issuer.id
-    }
-
-    if (json.holder){
-        iss = typeof json.holder === 'string' ? json.holder: json.holder.id
-    }
-
-    const iat = moment().unix();
-    const exp = moment().add(1, 'years').unix();
-    const nonce = salter()
-    const aud = 'https://verifier.example'
-    const issuerKeyPair  = await SD.JWK.generate(alg)
-    const holderKeyPair  = await SD.JWK.generate(alg)
-    return { alg, json, iss, iat, exp, nonce, aud, issuerKeyPair, holderKeyPair }
-}
-
-export const issueAndVerifyWithSdJWt = async ({ alg, json , iss, iat, exp, nonce, aud, issuerKeyPair, holderKeyPair, claims, disclosure  }) =>{
-    const kid = await calculateJwkThumbprint(issuerKeyPair.publicKeyJwk)
-    let typ = undefined
-    let cty = undefined
-    if (isVC(json)){
-        typ = 'vc+ld+json+sd-jwt'
-        cty = 'vc+ld+json'
-    }
-    if (isVP(json)){
-        typ = 'vp+ld+json+sd-jwt'
-        cty = 'vp+ld+json'
-    }
-    const issuer = new SD.Issuer({
-        alg,
-        iss,
-        kid,
-        typ,
-        cty,
-        digester,
-        signer: await SD.JWS.signer(issuerKeyPair.secretKeyJwk),
-        salter
-    })
-    const holder = new SD.Holder({
-        alg,
-        digester,
-        signer: await SD.JWS.signer(holderKeyPair.secretKeyJwk)
-    })
-    const verifier = new SD.Verifier({
-        alg,
-        digester,
-        verifier: {
-            verify: async (token) => {
-                const parsed = SD.Parse.compact(token)
-                const verifier = await SD.JWS.verifier(issuerKeyPair.publicKeyJwk)
-                return verifier.verify(parsed.jwt)
-            }
-        }
-    })
-    const vc = await issuer.issue({
-        claims: claims,
-        iat: iat,
-        exp: exp,
-        holder: holderKeyPair.publicKeyJwk
-    })
-    const vp = await holder.present({
-        credential: vc,
-        disclosure: disclosure,
-        nonce,
-        aud
-    })
-    const verified = await verifier.verify({
-        presentation: vp,
-        nonce,
-        aud
-    })
-
-    return { verified, vc, vp }
-}
-
diff --git a/plugin/dist/main.js b/plugin/dist/main.js
index f276f02..b1d00db 100644
--- a/plugin/dist/main.js
+++ b/plugin/dist/main.js
@@ -16,7 +16,7 @@
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   processCombinedExample: () => (/* binding */ processCombinedExample),\n/* harmony export */   processCoseExample: () => (/* binding */ processCoseExample),\n/* harmony export */   processJwtExample: () => (/* binding */ processJwtExample),\n/* harmony export */   processSdJwtExample: () => (/* binding */ processSdJwtExample)\n/* harmony export */ });\n/* harmony import */ var _src_getHtml__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./src/getHtml */ \"./src/getHtml.js\");\n/* harmony import */ var _src_exampleKey__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./src/exampleKey */ \"./src/exampleKey.js\");\n/* harmony import */ var _src_exampleCose__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./src/exampleCose */ \"./src/exampleCose.js\");\n/* harmony import */ var _src_exampleJwt__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./src/exampleJwt */ \"./src/exampleJwt.js\");\n/* harmony import */ var _src_exampleSdJwt__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./src/exampleSdJwt */ \"./src/exampleSdJwt.js\");\n\n\n\n\n\n\nasync function processVcJoseCose() {\n    // add styling for examples\n    addVcJoseStyles();\n\n    // handle full vc-jose-cose examples\n    const examples = Array.from(document.querySelectorAll(\".vc-jose-cose\")).filter((e) => !!e.innerText)\n    for (const index in examples) {\n        const example = examples[index]\n        const json = JSON.parse(example.innerText.replace(/\\/\\/ .*$/gm, ''))\n        const processedData = await processCombinedExample(index, json);\n        example.outerHTML = processedData.html\n    }\n\n    // handle jwt examples\n    const jwtExamples = Array.from(document.querySelectorAll(\".vc-jose-cose-jwt\")).filter((e) => !!e.innerText)\n    for (const index in jwtExamples) {\n        const example = jwtExamples[index]\n        const json = JSON.parse(example.innerText.replace(/\\/\\/ .*$/gm, ''))\n        const processedData = await processJwtExample(index, json);\n        example.outerHTML = processedData.html\n    }\n\n    // handle sd-jwt examples\n    const sdJwtExamples = Array.from(document.querySelectorAll(\".vc-jose-cose-sd-jwt\")).filter((e) => !!e.innerText)\n    for (const index in sdJwtExamples) {\n        const example = sdJwtExamples[index]\n        const json = JSON.parse(example.innerText.replace(/\\/\\/ .*$/gm, ''))\n        const processedData = await processSdJwtExample(index, json);\n        example.outerHTML = processedData.html\n    }\n\n    // handle cose examples\n    const coseExamples = Array.from(document.querySelectorAll(\".vc-jose-cose-cose\")).filter((e) => !!e.innerText)\n    for (const index in coseExamples) {\n        const example = coseExamples[index]\n        const json = JSON.parse(example.innerText.replace(/\\/\\/ .*$/gm, ''))\n        const processedData = await processCoseExample(index, json);\n        example.outerHTML = processedData.html\n    }\n}\n\nfunction addVcJoseStyles() {\n    const styles = document.createElement('style');\n\n    styles.innerHTML += `\n .vc-jose-cose-tabbed, .vc-jose-cose-tabbed-jwt, .vc-jose-cose-tabbed-sd-jwt, .vc-jose-cose-tabbed-cose {\n  overflow-x: hidden;\n  margin: 0 0;\n}\n\n.vc-jose-cose-tabbed h1, .vc-jose-cose-jwt-tabbed h1, .vc-jose-cose-sd-jwt-tabbed h1, .vc-jose-cose-cose-tabbed h1 {\n  font-size: 1em;\n  margin: 0 0;\n}\n\n.vc-jose-cose-tabbed [type=\"radio\"], .vc-jose-cose-tabbed-jwt [type=\"radio\"], .vc-jose-cose-tabbed-sd-jwt [type=\"radio\"], .vc-jose-cose-tabbed-cose [type=\"radio\"] {\n  display: none;\n}\n\n.vc-jose-cose-tabs, .vc-jose-cose-jwt-tabs, .vc-jose-cose-sd-jwt-tabs, .vc-jose-cose-cose-tabs {\n  display: flex;\n  align-items: stretch;\n  list-style: none;\n  padding: 0;\n  border-bottom: 1px solid #ccc;\n}\n\nli.vc-jose-cose-tab, li.vc-jose-cose-jwt-tab, li.vc-jose-cose-sd-jwt-tab, li.vc-jose-cose-cose-tab {\n  margin: 0 0;\n  margin-left: 8px;\n}\n\n.vc-jose-cose-tab>label, .vc-jose-cose-jwt-tab>label, .vc-jose-cose-sd-jwt-tab>label, .vc-jose-cose-cose-tab>label {\n  display: block;\n  margin-bottom: -1px;\n  padding: .4em .5em;\n  border: 1px solid #ccc;\n  border-top-right-radius: .4em;\n  border-top-left-radius: .4em;\n  background: #eee;\n  color: #666;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n\n.vc-jose-cose-tab:hover label, .vc-jose-cose-jwt-tab:hover label, .vc-jose-cose-sd-jwt-tab:hover label, .vc-jose-cose-cose-tab:hover label {\n  border-left-color: #333;\n  border-top-color: #333;\n  border-right-color: #333;\n  color: #333;\n}\n\n.vc-jose-cose-tab-content {\n  display: none;\n}\n\n.vc-jose-cose-tabbed [type=\"radio\"]:nth-of-type(1):checked~.vc-jose-cose-tabs .vc-jose-cose-tab:nth-of-type(1) label,\n.vc-jose-cose-tabbed [type=\"radio\"]:nth-of-type(2):checked~.vc-jose-cose-tabs .vc-jose-cose-tab:nth-of-type(2) label,\n.vc-jose-cose-tabbed [type=\"radio\"]:nth-of-type(3):checked~.vc-jose-cose-tabs .vc-jose-cose-tab:nth-of-type(3) label {\n  border-bottom-color: #fff;\n  background: #fff;\n  color: #222;\n}\n\n.vc-jose-cose-tabbed [type=\"radio\"]:nth-of-type(1):checked~.vc-jose-cose-tab-content:nth-of-type(1),\n.vc-jose-cose-tabbed [type=\"radio\"]:nth-of-type(2):checked~.vc-jose-cose-tab-content:nth-of-type(2),\n.vc-jose-cose-tabbed [type=\"radio\"]:nth-of-type(3):checked~.vc-jose-cose-tab-content:nth-of-type(3) {\n  display: block;\n}\n\n.sd-jwt-header, .jwt-header, .vc-jose-cose-jwt .header, .vc-jose-cose-sd-jwt .header, .vc-jose-cose-cose .header {\n  color: red;\n}\n\n.sd-jwt-payload, .jwt-payload, .vc-jose-cose-jwt .payload, .vc-jose-cose-sd-jwt .payload, .vc-jose-cose-cose .payload {\n  color: green;\n}\n\n.sd-jwt-signature, .jwt-signature, .vc-jose-cose-jwt .signature, .vc-jose-cose-sd-jwt .signature, .vc-jose-cose-cose .signature {\n  color: blue;\n}\n\n.sd-jwt-disclosure, .vc-jose-cose-jwt .disclosure, .vc-jose-cose-sd-jwt .disclosure, .vc-jose-cose-cose .disclosure {\n  color: purple;\n}\n\n.sd-jwt-compact, .jwt-compact, .vc-jose-cose-jwt .compact, .vc-jose-cose-sd-jwt .compact, .vc-jose-cose-cose .compact {\n  background-color: rgba(0,0,0,.03);\n}\n\n.cose-text, .jose-text, .vc-jose-cose-jwt .text, .vc-jose-cose-sd-jwt .text, .vc-jose-cose-cose .text {\n  font-family: monospace;\n  color: green;\n}`;\n\n    document.head.appendChild(styles);\n}\n\nasync function processCombinedExample(index, json) {\n    const privateKey = await (0,_src_exampleKey__WEBPACK_IMPORTED_MODULE_1__.getPrivateKey)();\n    const coseExample = await (0,_src_exampleCose__WEBPACK_IMPORTED_MODULE_2__.getCoseExample)(privateKey, json);\n    const jwtExample = await (0,_src_exampleJwt__WEBPACK_IMPORTED_MODULE_3__.getJwtExample)(privateKey, json);\n    const sdJwtExample = await (0,_src_exampleSdJwt__WEBPACK_IMPORTED_MODULE_4__.getSdJwtExample)(privateKey, json);\n    const html = (0,_src_getHtml__WEBPACK_IMPORTED_MODULE_0__.getCombinedHtml)({index, coseExample, jwtExample, sdJwtExample});\n    return {html};\n}\n\nasync function processJwtExample(index, json) {\n    const privateKey = await (0,_src_exampleKey__WEBPACK_IMPORTED_MODULE_1__.getPrivateKey)();\n    const jwtExample = await (0,_src_exampleJwt__WEBPACK_IMPORTED_MODULE_3__.getJwtExample)(privateKey, json);\n    const html = (0,_src_getHtml__WEBPACK_IMPORTED_MODULE_0__.getJwtHtml)({index, jwtExample});\n    return {html};\n}\n\nasync function processSdJwtExample(index, json) {\n    const privateKey = await (0,_src_exampleKey__WEBPACK_IMPORTED_MODULE_1__.getPrivateKey)();\n    const sdJwtExample = await (0,_src_exampleSdJwt__WEBPACK_IMPORTED_MODULE_4__.getSdJwtExample)(privateKey, json);\n    const html = (0,_src_getHtml__WEBPACK_IMPORTED_MODULE_0__.getSdJwtHtml)({index, sdJwtExample});\n    return {html};\n}\n\nasync function processCoseExample(index, json) {\n    const privateKey = await (0,_src_exampleKey__WEBPACK_IMPORTED_MODULE_1__.getPrivateKey)();\n    const coseExample = await (0,_src_exampleCose__WEBPACK_IMPORTED_MODULE_2__.getCoseExample)(privateKey, json);\n    const html = (0,_src_getHtml__WEBPACK_IMPORTED_MODULE_0__.getCoseHtml)({index, coseExample});\n    return {html};\n}\n\nwindow.respecVcJoseCose = {\n    processVcJoseCose\n}\n\n\n//# sourceURL=webpack://respec-vc-jose-cose/./index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   processCombinedExample: () => (/* binding */ processCombinedExample),\n/* harmony export */   processCoseExample: () => (/* binding */ processCoseExample),\n/* harmony export */   processJwtExample: () => (/* binding */ processJwtExample),\n/* harmony export */   processSdJwtExample: () => (/* binding */ processSdJwtExample)\n/* harmony export */ });\n/* harmony import */ var _src_getHtml__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./src/getHtml */ \"./src/getHtml.js\");\n/* harmony import */ var _src_exampleKey__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./src/exampleKey */ \"./src/exampleKey.js\");\n/* harmony import */ var _src_exampleCose__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./src/exampleCose */ \"./src/exampleCose.js\");\n/* harmony import */ var _src_exampleJwt__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./src/exampleJwt */ \"./src/exampleJwt.js\");\n/* harmony import */ var _src_exampleSdJwt__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./src/exampleSdJwt */ \"./src/exampleSdJwt.js\");\n\n\n\n\n\n\nasync function processVcJoseCose() {\n    addVcJoseStyles();\n\n    const examples = Array.from(document.querySelectorAll(\".vc-jose-cose\")).filter((e) => !!e.innerText);\n    for (const index in examples) {\n        const example = examples[index];\n        const json = JSON.parse(example.innerText.replace(/\\/\\/ .*$/gm, ''));\n        const processedData = await processCombinedExample(index, json);\n        example.outerHTML = processedData.html;\n    }\n\n    const jwtExamples = Array.from(document.querySelectorAll(\".vc-jose-cose-jwt\")).filter((e) => !!e.innerText);\n    for (const index in jwtExamples) {\n        const example = jwtExamples[index];\n        const json = JSON.parse(example.innerText.replace(/\\/\\/ .*$/gm, ''));\n        const processedData = await processJwtExample(json);\n        example.outerHTML = processedData.html;\n    }\n\n    const sdJwtExamples = Array.from(document.querySelectorAll(\".vc-jose-cose-sd-jwt\")).filter((e) => !!e.innerText);\n    for (const index in sdJwtExamples) {\n        const example = sdJwtExamples[index];\n        const json = JSON.parse(example.innerText.replace(/\\/\\/ .*$/gm, ''));\n        const processedData = await processSdJwtExample(index, json);\n        example.outerHTML = processedData.html;\n    }\n\n    const coseExamples = Array.from(document.querySelectorAll(\".vc-jose-cose-cose\")).filter((e) => !!e.innerText);\n    for (const index in coseExamples) {\n        const example = coseExamples[index];\n        const json = JSON.parse(example.innerText.replace(/\\/\\/ .*$/gm, ''));\n        const processedData = await processCoseExample(json);\n        example.outerHTML = processedData.html;\n    }\n}\n\nasync function processCombinedExample(index, json) {\n    const privateKey = await (0,_src_exampleKey__WEBPACK_IMPORTED_MODULE_1__.getPrivateKey)();\n    const coseExample = await (0,_src_exampleCose__WEBPACK_IMPORTED_MODULE_2__.getCoseExample)(privateKey, json);\n    const jwtExample = await (0,_src_exampleJwt__WEBPACK_IMPORTED_MODULE_3__.getJwtExample)(privateKey, json);\n    const sdJwtExample = await (0,_src_exampleSdJwt__WEBPACK_IMPORTED_MODULE_4__.getSdJwtExample)(index, privateKey, json, 'combined');\n    const html = (0,_src_getHtml__WEBPACK_IMPORTED_MODULE_0__.getCombinedHtml)({ index, coseExample, jwtExample, sdJwtExample });\n    return { html };\n}\n\nasync function processJwtExample(json) {\n    const privateKey = await (0,_src_exampleKey__WEBPACK_IMPORTED_MODULE_1__.getPrivateKey)();\n    const jwtExample = await (0,_src_exampleJwt__WEBPACK_IMPORTED_MODULE_3__.getJwtExample)(privateKey, json);\n    const html = (0,_src_getHtml__WEBPACK_IMPORTED_MODULE_0__.getJwtHtml)({ jwtExample });\n    return { html };\n}\n\nasync function processSdJwtExample(index, json) {\n    const privateKey = await (0,_src_exampleKey__WEBPACK_IMPORTED_MODULE_1__.getPrivateKey)();\n    const sdJwtExample = await (0,_src_exampleSdJwt__WEBPACK_IMPORTED_MODULE_4__.getSdJwtExample)(index, privateKey, json, 'standalone');\n    const html = (0,_src_getHtml__WEBPACK_IMPORTED_MODULE_0__.getSdJwtHtml)({ sdJwtExample });\n    return { html };\n}\n\nasync function processCoseExample(json) {\n    const privateKey = await (0,_src_exampleKey__WEBPACK_IMPORTED_MODULE_1__.getPrivateKey)();\n    const coseExample = await (0,_src_exampleCose__WEBPACK_IMPORTED_MODULE_2__.getCoseExample)(privateKey, json);\n    const html = (0,_src_getHtml__WEBPACK_IMPORTED_MODULE_0__.getCoseHtml)({ coseExample });\n    return { html };\n}\n\nfunction addVcJoseStyles() {\n    const styles = document.createElement('style');\n    styles.innerHTML = `\n .vc-jose-cose-tabbed, .vc-jose-cose-tabbed-jwt, .vc-jose-cose-tabbed-sd-jwt, .vc-jose-cose-tabbed-cose,\n .sd-jwt-tabbed {\n  overflow-x: hidden;\n  margin: 0 0;\n}\n.vc-jose-cose-tabbed h1, .vc-jose-cose-jwt-tabbed h1, .vc-jose-cose-sd-jwt-tabbed h1, .vc-jose-cose-cose-tabbed h1,\n.sd-jwt-tabbed h1 {\n  font-size: 1em;\n  margin: 0 0;\n}\n.vc-jose-cose-tabbed [type=\"radio\"], .vc-jose-cose-tabbed-jwt [type=\"radio\"], .vc-jose-cose-tabbed-sd-jwt [type=\"radio\"], .vc-jose-cose-tabbed-cose [type=\"radio\"],\n.sd-jwt-tabbed [type=\"radio\"] {\n  display: none;\n}\n.vc-jose-cose-tabs, .vc-jose-cose-jwt-tabs, .vc-jose-cose-sd-jwt-tabs, .vc-jose-cose-cose-tabs,\n.sd-jwt-tabs {\n  display: flex;\n  align-items: stretch;\n  list-style: none;\n  padding: 0;\n  border-bottom: 1px solid #ccc;\n}\nli.vc-jose-cose-tab, li.vc-jose-cose-jwt-tab, li.vc-jose-cose-sd-jwt-tab, li.vc-jose-cose-cose-tab,\nli.sd-jwt-tab {\n  margin: 0 0;\n  margin-left: 8px;\n}\n.vc-jose-cose-tab>label, .vc-jose-cose-jwt-tab>label, .vc-jose-cose-sd-jwt-tab>label, .vc-jose-cose-cose-tab>label,\n.sd-jwt-tab>label {\n  display: block;\n  margin-bottom: -1px;\n  padding: .4em .5em;\n  border: 1px solid #ccc;\n  border-top-right-radius: .4em;\n  border-top-left-radius: .4em;\n  background: #eee;\n  color: #666;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.vc-jose-cose-tab:hover label, .vc-jose-cose-jwt-tab:hover label, .vc-jose-cose-sd-jwt-tab:hover label, .vc-jose-cose-cose-tab:hover label,\n.sd-jwt-tab:hover label {\n  border-left-color: #333;\n  border-top-color: #333;\n  border-right-color: #333;\n  color: #333;\n}\n.vc-jose-cose-tab-content,\n.sd-jwt-tab-content {\n  display: none;\n}\n.vc-jose-cose-tabbed [type=\"radio\"]:nth-of-type(1):checked~.vc-jose-cose-tabs .vc-jose-cose-tab:nth-of-type(1) label,\n.vc-jose-cose-tabbed [type=\"radio\"]:nth-of-type(2):checked~.vc-jose-cose-tabs .vc-jose-cose-tab:nth-of-type(2) label,\n.vc-jose-cose-tabbed [type=\"radio\"]:nth-of-type(3):checked~.vc-jose-cose-tabs .vc-jose-cose-tab:nth-of-type(3) label,\n.sd-jwt-tabbed [type=\"radio\"]:nth-of-type(1):checked~.sd-jwt-tabs .sd-jwt-tab:nth-of-type(1) label,\n.sd-jwt-tabbed [type=\"radio\"]:nth-of-type(2):checked~.sd-jwt-tabs .sd-jwt-tab:nth-of-type(2) label,\n.sd-jwt-tabbed [type=\"radio\"]:nth-of-type(3):checked~.sd-jwt-tabs .sd-jwt-tab:nth-of-type(3) label {\n  border-bottom-color: #fff;\n  background: #fff;\n  color: #222;\n}\n.vc-jose-cose-tabbed [type=\"radio\"]:nth-of-type(1):checked~.vc-jose-cose-tab-content:nth-of-type(1),\n.vc-jose-cose-tabbed [type=\"radio\"]:nth-of-type(2):checked~.vc-jose-cose-tab-content:nth-of-type(2),\n.vc-jose-cose-tabbed [type=\"radio\"]:nth-of-type(3):checked~.vc-jose-cose-tab-content:nth-of-type(3),\n.sd-jwt-tabbed [type=\"radio\"]:nth-of-type(1):checked~.sd-jwt-tab-content:nth-of-type(1),\n.sd-jwt-tabbed [type=\"radio\"]:nth-of-type(2):checked~.sd-jwt-tab-content:nth-of-type(2),\n.sd-jwt-tabbed [type=\"radio\"]:nth-of-type(3):checked~.sd-jwt-tab-content:nth-of-type(3) {\n  display: block;\n}\n.sd-jwt-header, .jwt-header, .vc-jose-cose-jwt .header, .vc-jose-cose-sd-jwt .header, .vc-jose-cose-cose .header {\n  color: red;\n}\n.sd-jwt-payload, .jwt-payload, .vc-jose-cose-jwt .payload, .vc-jose-cose-sd-jwt .payload, .vc-jose-cose-cose .payload {\n  color: green;\n}\n.sd-jwt-signature, .jwt-signature, .vc-jose-cose-jwt .signature, .vc-jose-cose-sd-jwt .signature, .vc-jose-cose-cose .signature {\n  color: blue;\n}\n.sd-jwt-disclosure, .vc-jose-cose-jwt .disclosure, .vc-jose-cose-sd-jwt .disclosure, .vc-jose-cose-cose .disclosure {\n  color: purple;\n}\n.sd-jwt-compact, .jwt-compact, .vc-jose-cose-jwt .compact, .vc-jose-cose-sd-jwt .compact, .vc-jose-cose-cose .compact {\n  background-color: rgba(0,0,0,.03);\n}\n.cose-text, .jose-text, .vc-jose-cose-jwt .text, .vc-jose-cose-sd-jwt .text, .vc-jose-cose-cose .text {\n  font-family: monospace;\n  color: green;\n}\n.disclosure {\n    margin: 10px 0;\n    font-size: 12px;\n    line-height: 1.6;\n    padding: 5px;\n}\n.disclosure h3 {\n    margin: 0;\n    font-size: 14px;\n    padding-left: 5px;\n}\n.disclosure .claim-name {\n    color: #333;\n}\n.disclosure .hash,\n.disclosure .disclosure-value,\n.disclosure .contents {\n    color: #555;\n    word-wrap: break-word;\n    display: inline;\n}\n.disclosure p {\n    margin: 0;\n    padding-left: 5px;\n}\n.disclosure pre {\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    margin: 0;\n    padding-left: 5px;\n    line-height: 1.6;\n    display: inline-block;\n}\n.header-value {\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    margin: 0;\n    padding-left: 5px;\n    line-height: 1.6;\n    font-size: 12px;\n}\n`;\n    document.head.appendChild(styles);\n}\n\nwindow.respecVcJoseCose = {\n    processVcJoseCose\n};\n\n\n//# sourceURL=webpack://respec-vc-jose-cose/./index.js?");
 
 /***/ }),
 
@@ -7862,7 +7862,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getJwtExample: () => (/* binding */ getJwtExample)\n/* harmony export */ });\n/* harmony import */ var _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @transmute/verifiable-credentials */ \"./node_modules/@transmute/verifiable-credentials/dist/index.js\");\n/* harmony import */ var _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var jose__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! jose */ \"./node_modules/jose/dist/browser/index.js\");\n\n\n\n\nconst getCredential = async (privateKey, byteSigner, messageType, messageJson) => {\n    return await (0,_transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_0__.issuer)({\n        alg: privateKey.alg,\n        type: messageType,\n        signer: byteSigner\n    }).issue({\n        claimset: new TextEncoder().encode(JSON.stringify(messageJson, null, 2))\n    });\n}\n\nconst getPresentation = async (privateKey, byteSigner, messageType, messageJson) => {\n    const disclosures = (messageJson.verifiableCredential || []).map((enveloped)=>{\n        const { id } = enveloped\n        const type = id.includes('base64url') ? id.split(';base64url,')[0].replace('data:', '') :id.split(';')[0].replace('data:', '')\n        const content = id.includes('base64url') ? new TextEncoder().encode(id.split('base64url,').pop()) : new TextEncoder().encode(id.split(';').pop())\n        return {\n            type,\n            credential: content\n        }\n    })\n    return await (0,_transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_0__.holder)({\n        alg: privateKey.alg,\n        type: messageType,\n    }).issue({\n        signer: byteSigner,\n        presentation: messageJson,\n        disclosures: disclosures\n    });\n}\n\n\nconst getJwtHtml = (token) =>{\n    const [header, payload, signature] = token.split('.');\n    return `\n<div class=\"jwt-compact\"><span class=\"jwt-header\">${header}</span>.<span class=\"sd-jwt-payload\">${payload}</span>.<span class=\"sd-jwt-signature\">${signature}</span></div>`\n}\n\nconst getBinaryMessage = async (privateKey, messageType, messageJson) =>{\n\n    const byteSigner = {\n        sign: async (bytes) => {\n\n            const jws = await new jose__WEBPACK_IMPORTED_MODULE_1__.CompactSign(\n                bytes\n            )\n                .setProtectedHeader({ kid: privateKey.kid, alg: privateKey.alg })\n                .sign(await _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_0__.key.importKeyLike({\n                    type: 'application/jwk+json',\n                    content: new TextEncoder().encode(JSON.stringify(privateKey))\n                }))\n            return _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_0__.text.encoder.encode(jws)\n        }\n    }\n    switch(messageType){\n        case 'application/vc+ld+json+jwt': {\n            return getCredential(privateKey, byteSigner, messageType, messageJson)\n        }\n        case 'application/vp+ld+json+jwt': {\n            return getPresentation(privateKey, byteSigner, messageType, messageJson)\n        }\n        default: {\n            throw new Error('Unknown message type')\n        }\n    }\n}\n\nconst getJwtExample = async (privateKey, messageJson) => {\n    const type = Array.isArray(messageJson.type) ? messageJson.type : [messageJson.type]\n    const messageType = type.includes('VerifiableCredential') ? 'application/vc+ld+json+jwt' : 'application/vp+ld+json+jwt'\n    const message = await getBinaryMessage(privateKey, messageType, messageJson)\n    const messageEncoded = new TextDecoder().decode(message)\n    // const decodedHeader = jose.decodeProtectedHeader(messageEncoded)\n    // Not displaying protected header to save space\n    // <h1>Protected</h1>\n    // <pre>\n    // ${JSON.stringify(decodedHeader, null, 2)}\n    // </pre>\n    return `\n<h1>${messageType.replace('+jwt', '')}</h1>\n<pre>\n${JSON.stringify(messageJson, null, 2)}\n</pre>\n<h1>${messageType}</h1>\n<div class=\"jose-text\">\n${getJwtHtml(messageEncoded)}\n</div>\n  `.trim()\n}\n\n\n//# sourceURL=webpack://respec-vc-jose-cose/./src/exampleJwt.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getJwtExample: () => (/* binding */ getJwtExample)\n/* harmony export */ });\n/* harmony import */ var _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @transmute/verifiable-credentials */ \"./node_modules/@transmute/verifiable-credentials/dist/index.js\");\n/* harmony import */ var _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var jose__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! jose */ \"./node_modules/jose/dist/browser/index.js\");\n\n\n\n\nconst getCredential = async (privateKey, byteSigner, messageType, messageJson) => {\n    return await (0,_transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_0__.issuer)({\n        alg: privateKey.alg,\n        type: messageType,\n        signer: byteSigner\n    }).issue({\n        claimset: new TextEncoder().encode(JSON.stringify(messageJson, null, 2))\n    });\n}\n\nconst getPresentation = async (privateKey, byteSigner, messageType, messageJson) => {\n    const disclosures = (messageJson.verifiableCredential || []).map((enveloped)=>{\n        const { id } = enveloped\n        const type = id.includes('base64url') ? id.split(';base64url,')[0].replace('data:', '') :id.split(';')[0].replace('data:', '')\n        const content = id.includes('base64url') ? new TextEncoder().encode(id.split('base64url,').pop()) : new TextEncoder().encode(id.split(';').pop())\n        return {\n            type,\n            credential: content\n        }\n    })\n    return await (0,_transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_0__.holder)({\n        alg: privateKey.alg,\n        type: messageType,\n    }).issue({\n        signer: byteSigner,\n        presentation: messageJson,\n        disclosures: disclosures\n    });\n}\n\n\nconst getJwtHtml = (token) =>{\n    const [header, payload, signature] = token.split('.');\n    return `\n<div class=\"jwt-compact\"><span class=\"jwt-header\">${header}</span>.<span class=\"sd-jwt-payload\">${payload}</span>.<span class=\"sd-jwt-signature\">${signature}</span></div>`\n}\n\nconst getBinaryMessage = async (privateKey, messageType, messageJson) =>{\n\n    const byteSigner = {\n        sign: async (bytes) => {\n\n            const jws = await new jose__WEBPACK_IMPORTED_MODULE_1__.CompactSign(\n                bytes\n            )\n                .setProtectedHeader({ kid: privateKey.kid, alg: privateKey.alg })\n                .sign(await _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_0__.key.importKeyLike({\n                    type: 'application/jwk+json',\n                    content: new TextEncoder().encode(JSON.stringify(privateKey))\n                }))\n            return _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_0__.text.encoder.encode(jws)\n        }\n    }\n    switch(messageType){\n        case 'application/vc+ld+json+jwt': {\n            return getCredential(privateKey, byteSigner, messageType, messageJson)\n        }\n        case 'application/vp+ld+json+jwt': {\n            return getPresentation(privateKey, byteSigner, messageType, messageJson)\n        }\n        default: {\n            throw new Error('Unknown message type')\n        }\n    }\n}\n\nconst getJwtExample = async (privateKey, messageJson) => {\n    const type = Array.isArray(messageJson.type) ? messageJson.type : [messageJson.type]\n    const messageType = type.includes('VerifiableCredential') ? 'application/vc+ld+json+jwt' : 'application/vp+ld+json+jwt'\n    const message = await getBinaryMessage(privateKey, messageType, messageJson)\n    const messageEncoded = new TextDecoder().decode(message)\n    const decodedHeader = jose__WEBPACK_IMPORTED_MODULE_1__.decodeProtectedHeader(messageEncoded)\n    return `\n<h1>Protected Headers</h1>\n<pre>\n${JSON.stringify(decodedHeader, null, 2)}\n</pre>\n<h1>${messageType.replace('+jwt', '')}</h1>\n<pre>\n${JSON.stringify(messageJson, null, 2)}\n</pre>\n<h1>${messageType}</h1>\n<div class=\"jose-text\">\n${getJwtHtml(messageEncoded)}\n</div>\n  `.trim()\n}\n\n\n//# sourceURL=webpack://respec-vc-jose-cose/./src/exampleJwt.js?");
 
 /***/ }),
 
@@ -7884,7 +7884,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   generateHolderDisclosure: () => (/* binding */ generateHolderDisclosure),\n/* harmony export */   generateIssuerClaims: () => (/* binding */ generateIssuerClaims),\n/* harmony export */   getSdJwtExample: () => (/* binding */ getSdJwtExample)\n/* harmony export */ });\n/* harmony import */ var yaml__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! yaml */ \"./node_modules/yaml/browser/index.js\");\n/* harmony import */ var _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @transmute/verifiable-credentials */ \"./node_modules/@transmute/verifiable-credentials/dist/index.js\");\n/* harmony import */ var _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var jose__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! jose */ \"./node_modules/jose/dist/browser/index.js\");\n\n\n\n\n\nconst generateIssuerClaims = (example)=> {\n    return yaml__WEBPACK_IMPORTED_MODULE_0__[\"default\"].stringify(example).replace(/id\\: /g, '!sd id: ').replace(/type\\:/g, '!sd type:')\n}\n\nconst generateHolderDisclosure = (example) => {\n    const claims = generateIssuerClaims(example)\n    // redact nested ideas at depth 2 (spaces)\n    const edited1 = claims.replace(/  !sd id\\:(.*?)\\n/g, `  id: False\\n`)\n    // disclose types\n    const edited2 = edited1.replace(/\\!sd type\\:/g, `type:`)\n    // redact remaining ids\n    return edited2.replace(/\\!sd id\\:/g, `id:`)\n}\n\nconst getSdHtml = (vc) =>{\n    const [token, ...disclosure] = vc.split('~');\n    const [header, payload, signature] = token.split('.');\n    const disclosures = disclosure.map((d)=>{\n        return `~<span class=\"sd-jwt-disclosure\">${d}</span>`\n    }).join('')\n    return `\n<div class=\"sd-jwt-compact\"><span class=\"sd-jwt-header\">${header}</span>.<span class=\"sd-jwt-payload\">${payload}</span>.<span class=\"sd-jwt-signature\">${signature}</span>${disclosures}</div>`\n}\n\n\nconst getDisclosabilityHtml = (claims)=> {\n    return `<pre>\n${claims.trim().replace(/\\!sd/g, `<span class=\"sd-jwt-disclosure\">!sd</span>`)}\n  </pre>`\n}\n\nconst getCredential = async (privateKey, byteSigner, messageType, messageJson) => {\n    return await (0,_transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1__.issuer)({\n        alg: privateKey.alg,\n        type: messageType,\n        signer: byteSigner\n    }).issue({\n        claimset: new TextEncoder().encode(generateIssuerClaims(messageJson))\n    });\n}\n\nconst getPresentation = async (privateKey, byteSigner, messageType, messageJson) => {\n    // since examples are always enveloped, and truncated, we never actually process key binding or disclosures\n    return await getCredential(privateKey, byteSigner, 'application/vc+ld+json+sd-jwt', messageJson)\n}\n\nconst getBinaryMessage = async (privateKey, messageType, messageJson) =>{\n    const byteSigner = {\n        sign: async (bytes) => {\n            const jws = await new jose__WEBPACK_IMPORTED_MODULE_2__.CompactSign(\n                bytes\n            )\n                .setProtectedHeader({ kid: privateKey.kid, alg: privateKey.alg })\n                .sign(await _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1__.key.importKeyLike({\n                    type: 'application/jwk+json',\n                    content: new TextEncoder().encode(JSON.stringify(privateKey))\n                }))\n            return _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1__.text.encoder.encode(jws)\n        }\n    }\n    switch(messageType){\n        case 'application/vc+ld+json+sd-jwt': {\n            return getCredential(privateKey, byteSigner, messageType, messageJson)\n        }\n        case 'application/vp+ld+json+sd-jwt': {\n            return getPresentation(privateKey, byteSigner, messageType, messageJson)\n        }\n        default: {\n            throw new Error('Unknown message type')\n        }\n    }\n}\n\nconst getSdJwtExample = async (privateKey, messageJson) => {\n    const type = Array.isArray(messageJson.type) ? messageJson.type : [messageJson.type]\n    const messageType = type.includes('VerifiableCredential') ? 'application/vc+ld+json+sd-jwt' : 'application/vp+ld+json+sd-jwt'\n    const message = await getBinaryMessage(privateKey, messageType, messageJson)\n    const messageEncoded = new TextDecoder().decode(message)\n\n    const issuerClaims = generateIssuerClaims(messageJson)\n    const messageType2 = 'application/ld+yaml'\n\n// const decodedHeader = jose.decodeProtectedHeader(messageEncoded.split('~')[0])\n// Not displaying protected header to save space\n// <h1>Protected</h1>\n// <pre>\n// ${JSON.stringify(decodedHeader, null, 2)}\n// </pre>\n    return `\n\n<h1>${messageType2}</h1>\n<div>\n${getDisclosabilityHtml(issuerClaims)}\n</div>\n\n<h1>${messageType}</h1>\n<div class=\"jose-text\">\n${getSdHtml(messageEncoded)}\n</div>\n  `.trim()\n}\n\n\n//# sourceURL=webpack://respec-vc-jose-cose/./src/exampleSdJwt.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   generateIssuerClaims: () => (/* binding */ generateIssuerClaims),\n/* harmony export */   getBinaryMessage: () => (/* binding */ getBinaryMessage),\n/* harmony export */   getSdJwtExample: () => (/* binding */ getSdJwtExample)\n/* harmony export */ });\n/* harmony import */ var yaml__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! yaml */ \"./node_modules/yaml/browser/index.js\");\n/* harmony import */ var _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @transmute/verifiable-credentials */ \"./node_modules/@transmute/verifiable-credentials/dist/index.js\");\n/* harmony import */ var _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var jose__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! jose */ \"./node_modules/jose/dist/browser/index.js\");\n/* harmony import */ var crypto__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! crypto */ \"./node_modules/crypto-browserify/index.js\");\n\n\n\n\n\nconst calculateHash = (value) => {\n    return _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1__.base64url.encode(crypto__WEBPACK_IMPORTED_MODULE_3__.createHash('sha256').update(value).digest());\n};\n\nconst customJSONStringify = (obj) => {\n    return JSON.stringify(obj, null, 2).replace(/\\n/g, '<br>').replace(/\\s/g, '&nbsp;');\n};\n\nconst generateDisclosureHtml = (claimName, hash, disclosure, contents) => {\n    return `\n<div class=\"disclosure\">\n    <h3>Claim: <span class=\"claim-name\">${claimName}</span></h3>\n    <p><strong>SHA-256 Hash:</strong> <span class=\"hash\">${hash}</span></p>\n    <p><strong>Disclosure(s):</strong> <span class=\"disclosure-value\">${disclosure}</span></p>\n    <p><strong>Contents:</strong> <span class=\"contents\">${customJSONStringify(contents)}</span></p>\n</div>\n`;\n};\n\nconst getSdHtml = (vc) => {\n    const [token, ...disclosure] = vc.split('~');\n    const [header, payload, signature] = token.split('.');\n    const disclosures = disclosure.map((d) => {\n        return `~<span class=\"sd-jwt-disclosure\">${d}</span>`;\n    }).join('');\n    return `\n<div class=\"sd-jwt-compact\"><span class=\"sd-jwt-header\">${header}</span>.<span class=\"sd-jwt-payload\">${payload}</span>.<span class=\"sd-jwt-signature\">${signature}</span>${disclosures}</div>`;\n};\n\nconst getHeadersHtml = (vc) => {\n    const [token] = vc.split('~');\n    const [header] = token.split('.');\n    const headerJson = JSON.parse(new TextDecoder().decode(_transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1__.base64url.decode(header)));\n    return `<pre class=\"header-value\">${customJSONStringify(headerJson)}</pre>`;\n};\n\nconst getPayloadHtml = (vc) => {\n    const [token] = vc.split('~');\n    const [, payload] = token.split('.');\n    const payloadJson = JSON.parse(new TextDecoder().decode(_transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1__.base64url.decode(payload)));\n    return `<pre class=\"header-value\">${customJSONStringify(payloadJson)}</pre>`;\n};\n\nconst getDisclosuresHtml = async (vc) => {\n    const [_, ...disclosures] = vc.split('~');\n    const disclosureHtml = disclosures.map((disclosure) => {\n        const decodedDisclosure = JSON.parse(new TextDecoder().decode(_transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1__.base64url.decode(disclosure)));\n        const [, ...claimPath] = decodedDisclosure;\n        const claimName = claimPath.pop();\n        const hash = calculateHash(disclosure);\n\n        return generateDisclosureHtml(JSON.stringify(claimName), hash, disclosure, decodedDisclosure);\n    });\n\n    return `<div class=\"disclosures\">${disclosureHtml.join('\\n')}</div>`;\n};\n\nconst generateIssuerClaims = (example) => {\n    return yaml__WEBPACK_IMPORTED_MODULE_0__[\"default\"].stringify(example).replace(/id: /g, '!sd id: ').replace(/type:/g, '!sd type:');\n};\n\nconst getCredential = async (privateKey, byteSigner, messageType, messageJson) => {\n    return await (0,_transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1__.issuer)({\n        alg: privateKey.alg,\n        type: messageType,\n        signer: byteSigner\n    }).issue({\n        claimset: new TextEncoder().encode(generateIssuerClaims(messageJson))\n    });\n};\n\nconst getPresentation = async (privateKey, byteSigner, messageType, messageJson) => {\n    return await getCredential(privateKey, byteSigner, 'application/vc+ld+json+sd-jwt', messageJson);\n};\n\nconst getBinaryMessage = async (privateKey, messageType, messageJson) => {\n    const byteSigner = {\n        sign: async (bytes) => {\n            const jws = await new jose__WEBPACK_IMPORTED_MODULE_2__.CompactSign(bytes)\n                .setProtectedHeader({ kid: privateKey.kid, alg: privateKey.alg })\n                .sign(await _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1__.key.importKeyLike({\n                    type: 'application/jwk+json',\n                    content: new TextEncoder().encode(JSON.stringify(privateKey))\n                }));\n            return _transmute_verifiable_credentials__WEBPACK_IMPORTED_MODULE_1__.text.encoder.encode(jws);\n        }\n    };\n    switch (messageType) {\n        case 'application/vc+ld+json+sd-jwt': {\n            return getCredential(privateKey, byteSigner, messageType, messageJson);\n        }\n        case 'application/vp+ld+json+sd-jwt': {\n            return getPresentation(privateKey, byteSigner, messageType, messageJson);\n        }\n        default: {\n            throw new Error('Unknown message type');\n        }\n    }\n};\n\nconst getSdJwtExample = async (index, privateKey, messageJson, prefix = 'sd-jwt') => {\n    const type = Array.isArray(messageJson.type) ? messageJson.type : [messageJson.type];\n    const messageType = type.includes('VerifiableCredential') ? 'application/vc+ld+json+sd-jwt' : 'application/vp+ld+json+sd-jwt';\n    const binaryMessage = await getBinaryMessage(privateKey, messageType, messageJson);\n    const message = new TextDecoder().decode(binaryMessage);\n    const encoded = getSdHtml(message);\n    const header = getHeadersHtml(message);\n    const payload = getPayloadHtml(message);\n    const disclosures = await getDisclosuresHtml(message);\n    return `\n<div class=\"sd-jwt-tabbed\">\n    <input type=\"radio\" id=\"${prefix}-tab-${index}-encoded\" name=\"${prefix}-tabs-${index}\" checked=\"checked\" tabindex=\"0\">\n    <input type=\"radio\" id=\"${prefix}-tab-${index}-decoded\" name=\"${prefix}-tabs-${index}\" tabindex=\"0\">\n    <input type=\"radio\" id=\"${prefix}-tab-${index}-disclosures\" name=\"${prefix}-tabs-${index}\" tabindex=\"0\">\n    <ul class=\"sd-jwt-tabs\">\n      <li class=\"sd-jwt-tab\">\n        <label for=\"${prefix}-tab-${index}-encoded\">Encoded</label>\n      </li>\n      <li class=\"sd-jwt-tab\">\n        <label for=\"${prefix}-tab-${index}-decoded\">Decoded</label>\n      </li>\n      <li class=\"sd-jwt-tab\">\n        <label for=\"${prefix}-tab-${index}-disclosures\">Issuer Disclosures</label>\n      </li>\n    </ul>\n    <div class=\"sd-jwt-tab-content\" id=\"${prefix}-content-${index}-encoded\">\n        ${encoded}\n    </div>\n    <div class=\"sd-jwt-tab-content\" id=\"${prefix}-content-${index}-decoded\">\n      ${header}\n      ${payload}\n    </div>\n    <div class=\"sd-jwt-tab-content\" id=\"${prefix}-content-${index}-disclosures\">\n        ${disclosures}\n    </div>\n</div>\n`;\n};\n\n//# sourceURL=webpack://respec-vc-jose-cose/./src/exampleSdJwt.js?");
 
 /***/ }),
 
@@ -7895,7 +7895,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getCombinedHtml: () => (/* binding */ getCombinedHtml),\n/* harmony export */   getCoseHtml: () => (/* binding */ getCoseHtml),\n/* harmony export */   getJwtHtml: () => (/* binding */ getJwtHtml),\n/* harmony export */   getSdJwtHtml: () => (/* binding */ getSdJwtHtml)\n/* harmony export */ });\n\n\nconst getCombinedHtml = ({ index, coseExample, jwtExample, sdJwtExample })=>{\n    return `\n<div class=\"vc-jose-cose-tabbed\">\n    <input type=\"radio\" id=\"vc-jose-cose-tab-${index}-cose\" name=\"vc-jose-cose-tabs-${index}\" checked=\"checked\">\n    <input type=\"radio\" id=\"vc-jose-cose-tab-${index}-jwt\" name=\"vc-jose-cose-tabs-${index}\">\n    <input type=\"radio\" id=\"vc-jose-cose-tab-${index}-sd-jwt\" name=\"vc-jose-cose-tabs-${index}\">\n    <ul class=\"vc-jose-cose-tabs\">\n      <li class=\"vc-jose-cose-tab\">\n        <label for=\"vc-jose-cose-tab-${index}-cose\">COSE</label>\n      </li>\n      <li class=\"vc-jose-cose-tab\">\n        <label for=\"vc-jose-cose-tab-${index}-jwt\">JWT</label>\n      </li>\n      <li class=\"vc-jose-cose-tab\">\n        <label for=\"vc-jose-cose-tab-${index}-sd-jwt\">SD-JWT</label>\n      </li>\n    </ul>\n    <div class=\"vc-jose-cose-tab-content\">\n${coseExample}\n    </div>\n    <div class=\"vc-jose-cose-tab-content\">\n${jwtExample}\n    </div>\n    <div class=\"vc-jose-cose-tab-content\">\n${sdJwtExample}\n    </div> \n</div>`\n}\n\nconst getJwtHtml = ({ index, jwtExample })=>{\n    return `\n<div class=\"vc-jose-cose-jwt-tabbed\">\n    <ul class=\"vc-jose-cose-jwt-tabs\">\n      <li class=\"vc-jose-cose-jwt-tab\">\n        <label>JWT</label>\n      </li>\n    </ul>\n    <div class=\"vc-jose-cose-jwt-tab-content\">\n${jwtExample}\n    </div>\n</div>`\n}\n\nconst getSdJwtHtml = ({ index, sdJwtExample })=>{\n    return `\n<div class=\"vc-jose-cose-sd-jwt-tabbed\">\n    <ul class=\"vc-jose-cose-sd-jwt-tabs\">\n      <li class=\"vc-jose-cose-sd-jwt-tab\">\n        <label>SD-JWT</label>\n      </li>\n    </ul>\n    <div class=\"vc-jose-cose-sd-jwt-tab-content\">\n${sdJwtExample}\n    </div>\n</div>`\n}\n\nconst getCoseHtml = ({ index, coseExample })=>{\n    return `\n<div class=\"vc-jose-cose-cose-tabbed\">\n    <ul class=\"vc-jose-cose-cose-tabs\">\n      <li class=\"vc-jose-cose-cose-tab\">\n        <label>COSE</label>\n      </li>\n    </ul>\n    <div class=\"vc-jose-cose-cose-tab-content\">\n${coseExample}\n    </div>\n</div>`\n}\n\n\n//# sourceURL=webpack://respec-vc-jose-cose/./src/getHtml.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getCombinedHtml: () => (/* binding */ getCombinedHtml),\n/* harmony export */   getCoseHtml: () => (/* binding */ getCoseHtml),\n/* harmony export */   getJwtHtml: () => (/* binding */ getJwtHtml),\n/* harmony export */   getSdJwtHtml: () => (/* binding */ getSdJwtHtml)\n/* harmony export */ });\nconst getCombinedHtml = ({index, coseExample, jwtExample, sdJwtExample}) => {\n    return `\n<div class=\"vc-jose-cose-tabbed\">\n    <input type=\"radio\" id=\"vc-jose-cose-tab-${index}-cose\" name=\"vc-jose-cose-tabs-${index}\" checked=\"checked\">\n    <input type=\"radio\" id=\"vc-jose-cose-tab-${index}-jwt\" name=\"vc-jose-cose-tabs-${index}\">\n    <input type=\"radio\" id=\"vc-jose-cose-tab-${index}-sd-jwt\" name=\"vc-jose-cose-tabs-${index}\">\n    <ul class=\"vc-jose-cose-tabs\">\n      <li class=\"vc-jose-cose-tab\">\n        <label for=\"vc-jose-cose-tab-${index}-cose\">COSE</label>\n      </li>\n      <li class=\"vc-jose-cose-tab\">\n        <label for=\"vc-jose-cose-tab-${index}-jwt\">JWT</label>\n      </li>\n      <li class=\"vc-jose-cose-tab\">\n        <label for=\"vc-jose-cose-tab-${index}-sd-jwt\">SD-JWT</label>\n      </li>\n    </ul>\n    <div class=\"vc-jose-cose-tab-content\">\n${coseExample}\n    </div>\n    <div class=\"vc-jose-cose-tab-content\">\n${jwtExample}\n    </div>\n    <div class=\"vc-jose-cose-tab-content\">\n${sdJwtExample}\n    </div> \n</div>`\n}\n\nconst getJwtHtml = ({jwtExample}) => {\n    return `\n<div class=\"vc-jose-cose-jwt-tabbed\">\n    <ul class=\"vc-jose-cose-jwt-tabs\">\n      <li class=\"vc-jose-cose-jwt-tab\">\n        <label>JWT</label>\n      </li>\n    </ul>\n    <div class=\"vc-jose-cose-jwt-tab-content\">\n${jwtExample}\n    </div>\n</div>`\n}\n\nconst getSdJwtHtml = ({sdJwtExample}) => {\n    return `\n<div>\n${sdJwtExample}\n</div>\n`.trim();\n};\n\nconst getCoseHtml = ({coseExample}) => {\n    return `\n<div class=\"vc-jose-cose-cose-tabbed\">\n    <ul class=\"vc-jose-cose-cose-tabs\">\n      <li class=\"vc-jose-cose-cose-tab\">\n        <label>COSE</label>\n      </li>\n    </ul>\n    <div class=\"vc-jose-cose-cose-tab-content\">\n${coseExample}\n    </div>\n</div>`\n};\n\n//# sourceURL=webpack://respec-vc-jose-cose/./src/getHtml.js?");
 
 /***/ }),
 
diff --git a/plugin/index.html b/plugin/index.html
index 47b9348..58d2ae9 100644
--- a/plugin/index.html
+++ b/plugin/index.html
@@ -96,14 +96,21 @@ <h2>Credential</h2>
     "https://www.w3.org/ns/credentials/examples/v2"
   ],
   "id": "http://university.example/credentials/1872",
-  "type": ["VerifiableCredential", "ExampleAlumniCredential"],
+  "type": [
+    "VerifiableCredential",
+    "ExampleAlumniCredential"
+  ],
   "issuer": "https://university.example/issuers/565049",
   "validFrom": "2010-01-01T19:23:24Z",
+  "credentialSchema": {
+    "id": "https://example.org/examples/degree.json",
+    "type": "JsonSchema"
+  },
   "credentialSubject": {
-    "id": "did:example:ebfeb1f712ebc6f1c276e12ec21",
-    "alumniOf": {
-      "id": "did:example:c276e12ec21ebfeb1f712ebc6f1",
-      "name": "Example University"
+    "id": "did:example:123",
+    "degree": {
+      "type": "BachelorDegree",
+      "name": "Bachelor of Science and Arts"
     }
   }
 }
diff --git a/plugin/index.js b/plugin/index.js
index e06b1c1..2201512 100644
--- a/plugin/index.js
+++ b/plugin/index.js
@@ -1,82 +1,107 @@
-import {getCombinedHtml, getCoseHtml, getHtml, getJwtHtml, getSdJwtHtml} from './src/getHtml';
+import { getCombinedHtml, getCoseHtml, getJwtHtml, getSdJwtHtml } from './src/getHtml';
 import { getPrivateKey } from './src/exampleKey';
 import { getCoseExample } from './src/exampleCose';
 import { getJwtExample } from './src/exampleJwt';
 import { getSdJwtExample } from './src/exampleSdJwt';
 
 async function processVcJoseCose() {
-    // add styling for examples
     addVcJoseStyles();
 
-    // handle full vc-jose-cose examples
-    const examples = Array.from(document.querySelectorAll(".vc-jose-cose")).filter((e) => !!e.innerText)
+    const examples = Array.from(document.querySelectorAll(".vc-jose-cose")).filter((e) => !!e.innerText);
     for (const index in examples) {
-        const example = examples[index]
-        const json = JSON.parse(example.innerText.replace(/\/\/ .*$/gm, ''))
+        const example = examples[index];
+        const json = JSON.parse(example.innerText.replace(/\/\/ .*$/gm, ''));
         const processedData = await processCombinedExample(index, json);
-        example.outerHTML = processedData.html
+        example.outerHTML = processedData.html;
     }
 
-    // handle jwt examples
-    const jwtExamples = Array.from(document.querySelectorAll(".vc-jose-cose-jwt")).filter((e) => !!e.innerText)
+    const jwtExamples = Array.from(document.querySelectorAll(".vc-jose-cose-jwt")).filter((e) => !!e.innerText);
     for (const index in jwtExamples) {
-        const example = jwtExamples[index]
-        const json = JSON.parse(example.innerText.replace(/\/\/ .*$/gm, ''))
-        const processedData = await processJwtExample(index, json);
-        example.outerHTML = processedData.html
+        const example = jwtExamples[index];
+        const json = JSON.parse(example.innerText.replace(/\/\/ .*$/gm, ''));
+        const processedData = await processJwtExample(json);
+        example.outerHTML = processedData.html;
     }
 
-    // handle sd-jwt examples
-    const sdJwtExamples = Array.from(document.querySelectorAll(".vc-jose-cose-sd-jwt")).filter((e) => !!e.innerText)
+    const sdJwtExamples = Array.from(document.querySelectorAll(".vc-jose-cose-sd-jwt")).filter((e) => !!e.innerText);
     for (const index in sdJwtExamples) {
-        const example = sdJwtExamples[index]
-        const json = JSON.parse(example.innerText.replace(/\/\/ .*$/gm, ''))
+        const example = sdJwtExamples[index];
+        const json = JSON.parse(example.innerText.replace(/\/\/ .*$/gm, ''));
         const processedData = await processSdJwtExample(index, json);
-        example.outerHTML = processedData.html
+        example.outerHTML = processedData.html;
     }
 
-    // handle cose examples
-    const coseExamples = Array.from(document.querySelectorAll(".vc-jose-cose-cose")).filter((e) => !!e.innerText)
+    const coseExamples = Array.from(document.querySelectorAll(".vc-jose-cose-cose")).filter((e) => !!e.innerText);
     for (const index in coseExamples) {
-        const example = coseExamples[index]
-        const json = JSON.parse(example.innerText.replace(/\/\/ .*$/gm, ''))
-        const processedData = await processCoseExample(index, json);
-        example.outerHTML = processedData.html
+        const example = coseExamples[index];
+        const json = JSON.parse(example.innerText.replace(/\/\/ .*$/gm, ''));
+        const processedData = await processCoseExample(json);
+        example.outerHTML = processedData.html;
     }
 }
 
+export async function processCombinedExample(index, json) {
+    const privateKey = await getPrivateKey();
+    const coseExample = await getCoseExample(privateKey, json);
+    const jwtExample = await getJwtExample(privateKey, json);
+    const sdJwtExample = await getSdJwtExample(index, privateKey, json, 'combined');
+    const html = getCombinedHtml({ index, coseExample, jwtExample, sdJwtExample });
+    return { html };
+}
+
+export async function processJwtExample(json) {
+    const privateKey = await getPrivateKey();
+    const jwtExample = await getJwtExample(privateKey, json);
+    const html = getJwtHtml({ jwtExample });
+    return { html };
+}
+
+export async function processSdJwtExample(index, json) {
+    const privateKey = await getPrivateKey();
+    const sdJwtExample = await getSdJwtExample(index, privateKey, json, 'standalone');
+    const html = getSdJwtHtml({ sdJwtExample });
+    return { html };
+}
+
+export async function processCoseExample(json) {
+    const privateKey = await getPrivateKey();
+    const coseExample = await getCoseExample(privateKey, json);
+    const html = getCoseHtml({ coseExample });
+    return { html };
+}
+
 function addVcJoseStyles() {
     const styles = document.createElement('style');
-
-    styles.innerHTML += `
- .vc-jose-cose-tabbed, .vc-jose-cose-tabbed-jwt, .vc-jose-cose-tabbed-sd-jwt, .vc-jose-cose-tabbed-cose {
+    styles.innerHTML = `
+ .vc-jose-cose-tabbed, .vc-jose-cose-tabbed-jwt, .vc-jose-cose-tabbed-sd-jwt, .vc-jose-cose-tabbed-cose,
+ .sd-jwt-tabbed {
   overflow-x: hidden;
   margin: 0 0;
 }
-
-.vc-jose-cose-tabbed h1, .vc-jose-cose-jwt-tabbed h1, .vc-jose-cose-sd-jwt-tabbed h1, .vc-jose-cose-cose-tabbed h1 {
+.vc-jose-cose-tabbed h1, .vc-jose-cose-jwt-tabbed h1, .vc-jose-cose-sd-jwt-tabbed h1, .vc-jose-cose-cose-tabbed h1,
+.sd-jwt-tabbed h1 {
   font-size: 1em;
   margin: 0 0;
 }
-
-.vc-jose-cose-tabbed [type="radio"], .vc-jose-cose-tabbed-jwt [type="radio"], .vc-jose-cose-tabbed-sd-jwt [type="radio"], .vc-jose-cose-tabbed-cose [type="radio"] {
+.vc-jose-cose-tabbed [type="radio"], .vc-jose-cose-tabbed-jwt [type="radio"], .vc-jose-cose-tabbed-sd-jwt [type="radio"], .vc-jose-cose-tabbed-cose [type="radio"],
+.sd-jwt-tabbed [type="radio"] {
   display: none;
 }
-
-.vc-jose-cose-tabs, .vc-jose-cose-jwt-tabs, .vc-jose-cose-sd-jwt-tabs, .vc-jose-cose-cose-tabs {
+.vc-jose-cose-tabs, .vc-jose-cose-jwt-tabs, .vc-jose-cose-sd-jwt-tabs, .vc-jose-cose-cose-tabs,
+.sd-jwt-tabs {
   display: flex;
   align-items: stretch;
   list-style: none;
   padding: 0;
   border-bottom: 1px solid #ccc;
 }
-
-li.vc-jose-cose-tab, li.vc-jose-cose-jwt-tab, li.vc-jose-cose-sd-jwt-tab, li.vc-jose-cose-cose-tab {
+li.vc-jose-cose-tab, li.vc-jose-cose-jwt-tab, li.vc-jose-cose-sd-jwt-tab, li.vc-jose-cose-cose-tab,
+li.sd-jwt-tab {
   margin: 0 0;
   margin-left: 8px;
 }
-
-.vc-jose-cose-tab>label, .vc-jose-cose-jwt-tab>label, .vc-jose-cose-sd-jwt-tab>label, .vc-jose-cose-cose-tab>label {
+.vc-jose-cose-tab>label, .vc-jose-cose-jwt-tab>label, .vc-jose-cose-sd-jwt-tab>label, .vc-jose-cose-cose-tab>label,
+.sd-jwt-tab>label {
   display: block;
   margin-bottom: -1px;
   padding: .4em .5em;
@@ -88,90 +113,99 @@ li.vc-jose-cose-tab, li.vc-jose-cose-jwt-tab, li.vc-jose-cose-sd-jwt-tab, li.vc-
   cursor: pointer;
   transition: all 0.3s;
 }
-
-.vc-jose-cose-tab:hover label, .vc-jose-cose-jwt-tab:hover label, .vc-jose-cose-sd-jwt-tab:hover label, .vc-jose-cose-cose-tab:hover label {
+.vc-jose-cose-tab:hover label, .vc-jose-cose-jwt-tab:hover label, .vc-jose-cose-sd-jwt-tab:hover label, .vc-jose-cose-cose-tab:hover label,
+.sd-jwt-tab:hover label {
   border-left-color: #333;
   border-top-color: #333;
   border-right-color: #333;
   color: #333;
 }
-
-.vc-jose-cose-tab-content {
+.vc-jose-cose-tab-content,
+.sd-jwt-tab-content {
   display: none;
 }
-
 .vc-jose-cose-tabbed [type="radio"]:nth-of-type(1):checked~.vc-jose-cose-tabs .vc-jose-cose-tab:nth-of-type(1) label,
 .vc-jose-cose-tabbed [type="radio"]:nth-of-type(2):checked~.vc-jose-cose-tabs .vc-jose-cose-tab:nth-of-type(2) label,
-.vc-jose-cose-tabbed [type="radio"]:nth-of-type(3):checked~.vc-jose-cose-tabs .vc-jose-cose-tab:nth-of-type(3) label {
+.vc-jose-cose-tabbed [type="radio"]:nth-of-type(3):checked~.vc-jose-cose-tabs .vc-jose-cose-tab:nth-of-type(3) label,
+.sd-jwt-tabbed [type="radio"]:nth-of-type(1):checked~.sd-jwt-tabs .sd-jwt-tab:nth-of-type(1) label,
+.sd-jwt-tabbed [type="radio"]:nth-of-type(2):checked~.sd-jwt-tabs .sd-jwt-tab:nth-of-type(2) label,
+.sd-jwt-tabbed [type="radio"]:nth-of-type(3):checked~.sd-jwt-tabs .sd-jwt-tab:nth-of-type(3) label {
   border-bottom-color: #fff;
   background: #fff;
   color: #222;
 }
-
 .vc-jose-cose-tabbed [type="radio"]:nth-of-type(1):checked~.vc-jose-cose-tab-content:nth-of-type(1),
 .vc-jose-cose-tabbed [type="radio"]:nth-of-type(2):checked~.vc-jose-cose-tab-content:nth-of-type(2),
-.vc-jose-cose-tabbed [type="radio"]:nth-of-type(3):checked~.vc-jose-cose-tab-content:nth-of-type(3) {
+.vc-jose-cose-tabbed [type="radio"]:nth-of-type(3):checked~.vc-jose-cose-tab-content:nth-of-type(3),
+.sd-jwt-tabbed [type="radio"]:nth-of-type(1):checked~.sd-jwt-tab-content:nth-of-type(1),
+.sd-jwt-tabbed [type="radio"]:nth-of-type(2):checked~.sd-jwt-tab-content:nth-of-type(2),
+.sd-jwt-tabbed [type="radio"]:nth-of-type(3):checked~.sd-jwt-tab-content:nth-of-type(3) {
   display: block;
 }
-
 .sd-jwt-header, .jwt-header, .vc-jose-cose-jwt .header, .vc-jose-cose-sd-jwt .header, .vc-jose-cose-cose .header {
   color: red;
 }
-
 .sd-jwt-payload, .jwt-payload, .vc-jose-cose-jwt .payload, .vc-jose-cose-sd-jwt .payload, .vc-jose-cose-cose .payload {
   color: green;
 }
-
 .sd-jwt-signature, .jwt-signature, .vc-jose-cose-jwt .signature, .vc-jose-cose-sd-jwt .signature, .vc-jose-cose-cose .signature {
   color: blue;
 }
-
 .sd-jwt-disclosure, .vc-jose-cose-jwt .disclosure, .vc-jose-cose-sd-jwt .disclosure, .vc-jose-cose-cose .disclosure {
   color: purple;
 }
-
 .sd-jwt-compact, .jwt-compact, .vc-jose-cose-jwt .compact, .vc-jose-cose-sd-jwt .compact, .vc-jose-cose-cose .compact {
   background-color: rgba(0,0,0,.03);
 }
-
 .cose-text, .jose-text, .vc-jose-cose-jwt .text, .vc-jose-cose-sd-jwt .text, .vc-jose-cose-cose .text {
   font-family: monospace;
   color: green;
-}`;
-
-    document.head.appendChild(styles);
-}
-
-export async function processCombinedExample(index, json) {
-    const privateKey = await getPrivateKey();
-    const coseExample = await getCoseExample(privateKey, json);
-    const jwtExample = await getJwtExample(privateKey, json);
-    const sdJwtExample = await getSdJwtExample(privateKey, json);
-    const html = getCombinedHtml({index, coseExample, jwtExample, sdJwtExample});
-    return {html};
 }
-
-export async function processJwtExample(index, json) {
-    const privateKey = await getPrivateKey();
-    const jwtExample = await getJwtExample(privateKey, json);
-    const html = getJwtHtml({index, jwtExample});
-    return {html};
-}
-
-export async function processSdJwtExample(index, json) {
-    const privateKey = await getPrivateKey();
-    const sdJwtExample = await getSdJwtExample(privateKey, json);
-    const html = getSdJwtHtml({index, sdJwtExample});
-    return {html};
-}
-
-export async function processCoseExample(index, json) {
-    const privateKey = await getPrivateKey();
-    const coseExample = await getCoseExample(privateKey, json);
-    const html = getCoseHtml({index, coseExample});
-    return {html};
+.disclosure {
+    margin: 10px 0;
+    font-size: 12px;
+    line-height: 1.6;
+    padding: 5px;
+}
+.disclosure h3 {
+    margin: 0;
+    font-size: 14px;
+    padding-left: 5px;
+}
+.disclosure .claim-name {
+    color: #333;
+}
+.disclosure .hash,
+.disclosure .disclosure-value,
+.disclosure .contents {
+    color: #555;
+    word-wrap: break-word;
+    display: inline;
+}
+.disclosure p {
+    margin: 0;
+    padding-left: 5px;
+}
+.disclosure pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    margin: 0;
+    padding-left: 5px;
+    line-height: 1.6;
+    display: inline-block;
+}
+.header-value {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    margin: 0;
+    padding-left: 5px;
+    line-height: 1.6;
+    font-size: 12px;
+}
+`;
+    document.head.appendChild(styles);
 }
 
 window.respecVcJoseCose = {
     processVcJoseCose
-}
+};
diff --git a/plugin/src/exampleJwt.js b/plugin/src/exampleJwt.js
index 91bff82..8290099 100644
--- a/plugin/src/exampleJwt.js
+++ b/plugin/src/exampleJwt.js
@@ -1,4 +1,4 @@
-import {holder, issuer, key, text} from "@transmute/verifiable-credentials";
+import { base64url, holder, issuer, key, text } from "@transmute/verifiable-credentials";
 
 import * as jose from 'jose'
 
@@ -73,13 +73,12 @@ export const getJwtExample = async (privateKey, messageJson) => {
     const messageType = type.includes('VerifiableCredential') ? 'application/vc+ld+json+jwt' : 'application/vp+ld+json+jwt'
     const message = await getBinaryMessage(privateKey, messageType, messageJson)
     const messageEncoded = new TextDecoder().decode(message)
-    // const decodedHeader = jose.decodeProtectedHeader(messageEncoded)
-    // Not displaying protected header to save space
-    // <h1>Protected</h1>
-    // <pre>
-    // ${JSON.stringify(decodedHeader, null, 2)}
-    // </pre>
+    const decodedHeader = jose.decodeProtectedHeader(messageEncoded)
     return `
+<h1>Protected Headers</h1>
+<pre>
+${JSON.stringify(decodedHeader, null, 2)}
+</pre>
 <h1>${messageType.replace('+jwt', '')}</h1>
 <pre>
 ${JSON.stringify(messageJson, null, 2)}
diff --git a/plugin/src/exampleSdJwt.js b/plugin/src/exampleSdJwt.js
index 9998933..798719c 100644
--- a/plugin/src/exampleSdJwt.js
+++ b/plugin/src/exampleSdJwt.js
@@ -1,38 +1,68 @@
-import yaml from 'yaml'
-import {issuer, key, text} from "@transmute/verifiable-credentials";
+import yaml from 'yaml';
+import { base64url, issuer, key, text } from "@transmute/verifiable-credentials";
+import * as jose from 'jose';
+import crypto from 'crypto';
 
-import * as jose from 'jose'
+const calculateHash = (value) => {
+    return base64url.encode(crypto.createHash('sha256').update(value).digest());
+};
 
-export const generateIssuerClaims = (example)=> {
-    return yaml.stringify(example).replace(/id\: /g, '!sd id: ').replace(/type\:/g, '!sd type:')
-}
+const customJSONStringify = (obj) => {
+    return JSON.stringify(obj, null, 2).replace(/\n/g, '<br>').replace(/\s/g, '&nbsp;');
+};
 
-export const generateHolderDisclosure = (example) => {
-    const claims = generateIssuerClaims(example)
-    // redact nested ideas at depth 2 (spaces)
-    const edited1 = claims.replace(/  !sd id\:(.*?)\n/g, `  id: False\n`)
-    // disclose types
-    const edited2 = edited1.replace(/\!sd type\:/g, `type:`)
-    // redact remaining ids
-    return edited2.replace(/\!sd id\:/g, `id:`)
-}
+const generateDisclosureHtml = (claimName, hash, disclosure, contents) => {
+    return `
+<div class="disclosure">
+    <h3>Claim: <span class="claim-name">${claimName}</span></h3>
+    <p><strong>SHA-256 Hash:</strong> <span class="hash">${hash}</span></p>
+    <p><strong>Disclosure(s):</strong> <span class="disclosure-value">${disclosure}</span></p>
+    <p><strong>Contents:</strong> <span class="contents">${customJSONStringify(contents)}</span></p>
+</div>
+`;
+};
 
-const getSdHtml = (vc) =>{
+const getSdHtml = (vc) => {
     const [token, ...disclosure] = vc.split('~');
     const [header, payload, signature] = token.split('.');
-    const disclosures = disclosure.map((d)=>{
-        return `~<span class="sd-jwt-disclosure">${d}</span>`
-    }).join('')
+    const disclosures = disclosure.map((d) => {
+        return `~<span class="sd-jwt-disclosure">${d}</span>`;
+    }).join('');
     return `
-<div class="sd-jwt-compact"><span class="sd-jwt-header">${header}</span>.<span class="sd-jwt-payload">${payload}</span>.<span class="sd-jwt-signature">${signature}</span>${disclosures}</div>`
-}
+<div class="sd-jwt-compact"><span class="sd-jwt-header">${header}</span>.<span class="sd-jwt-payload">${payload}</span>.<span class="sd-jwt-signature">${signature}</span>${disclosures}</div>`;
+};
+
+const getHeadersHtml = (vc) => {
+    const [token] = vc.split('~');
+    const [header] = token.split('.');
+    const headerJson = JSON.parse(new TextDecoder().decode(base64url.decode(header)));
+    return `<pre class="header-value">${customJSONStringify(headerJson)}</pre>`;
+};
+
+const getPayloadHtml = (vc) => {
+    const [token] = vc.split('~');
+    const [, payload] = token.split('.');
+    const payloadJson = JSON.parse(new TextDecoder().decode(base64url.decode(payload)));
+    return `<pre class="header-value">${customJSONStringify(payloadJson)}</pre>`;
+};
+
+const getDisclosuresHtml = async (vc) => {
+    const [_, ...disclosures] = vc.split('~');
+    const disclosureHtml = disclosures.map((disclosure) => {
+        const decodedDisclosure = JSON.parse(new TextDecoder().decode(base64url.decode(disclosure)));
+        const [, ...claimPath] = decodedDisclosure;
+        const claimName = claimPath.pop();
+        const hash = calculateHash(disclosure);
+
+        return generateDisclosureHtml(JSON.stringify(claimName), hash, disclosure, decodedDisclosure);
+    });
 
+    return `<div class="disclosures">${disclosureHtml.join('\n')}</div>`;
+};
 
-const getDisclosabilityHtml = (claims)=> {
-    return `<pre>
-${claims.trim().replace(/\!sd/g, `<span class="sd-jwt-disclosure">!sd</span>`)}
-  </pre>`
-}
+export const generateIssuerClaims = (example) => {
+    return yaml.stringify(example).replace(/id: /g, '!sd id: ').replace(/type:/g, '!sd type:');
+};
 
 const getCredential = async (privateKey, byteSigner, messageType, messageJson) => {
     return await issuer({
@@ -42,65 +72,72 @@ const getCredential = async (privateKey, byteSigner, messageType, messageJson) =
     }).issue({
         claimset: new TextEncoder().encode(generateIssuerClaims(messageJson))
     });
-}
+};
 
 const getPresentation = async (privateKey, byteSigner, messageType, messageJson) => {
-    // since examples are always enveloped, and truncated, we never actually process key binding or disclosures
-    return await getCredential(privateKey, byteSigner, 'application/vc+ld+json+sd-jwt', messageJson)
-}
+    return await getCredential(privateKey, byteSigner, 'application/vc+ld+json+sd-jwt', messageJson);
+};
 
-const getBinaryMessage = async (privateKey, messageType, messageJson) =>{
+export const getBinaryMessage = async (privateKey, messageType, messageJson) => {
     const byteSigner = {
         sign: async (bytes) => {
-            const jws = await new jose.CompactSign(
-                bytes
-            )
+            const jws = await new jose.CompactSign(bytes)
                 .setProtectedHeader({ kid: privateKey.kid, alg: privateKey.alg })
                 .sign(await key.importKeyLike({
                     type: 'application/jwk+json',
                     content: new TextEncoder().encode(JSON.stringify(privateKey))
-                }))
-            return text.encoder.encode(jws)
+                }));
+            return text.encoder.encode(jws);
         }
-    }
-    switch(messageType){
+    };
+    switch (messageType) {
         case 'application/vc+ld+json+sd-jwt': {
-            return getCredential(privateKey, byteSigner, messageType, messageJson)
+            return getCredential(privateKey, byteSigner, messageType, messageJson);
         }
         case 'application/vp+ld+json+sd-jwt': {
-            return getPresentation(privateKey, byteSigner, messageType, messageJson)
+            return getPresentation(privateKey, byteSigner, messageType, messageJson);
         }
         default: {
-            throw new Error('Unknown message type')
+            throw new Error('Unknown message type');
         }
     }
-}
-
-export const getSdJwtExample = async (privateKey, messageJson) => {
-    const type = Array.isArray(messageJson.type) ? messageJson.type : [messageJson.type]
-    const messageType = type.includes('VerifiableCredential') ? 'application/vc+ld+json+sd-jwt' : 'application/vp+ld+json+sd-jwt'
-    const message = await getBinaryMessage(privateKey, messageType, messageJson)
-    const messageEncoded = new TextDecoder().decode(message)
-
-    const issuerClaims = generateIssuerClaims(messageJson)
-    const messageType2 = 'application/ld+yaml'
+};
 
-// const decodedHeader = jose.decodeProtectedHeader(messageEncoded.split('~')[0])
-// Not displaying protected header to save space
-// <h1>Protected</h1>
-// <pre>
-// ${JSON.stringify(decodedHeader, null, 2)}
-// </pre>
+export const getSdJwtExample = async (index, privateKey, messageJson, prefix = 'sd-jwt') => {
+    const type = Array.isArray(messageJson.type) ? messageJson.type : [messageJson.type];
+    const messageType = type.includes('VerifiableCredential') ? 'application/vc+ld+json+sd-jwt' : 'application/vp+ld+json+sd-jwt';
+    const binaryMessage = await getBinaryMessage(privateKey, messageType, messageJson);
+    const message = new TextDecoder().decode(binaryMessage);
+    const encoded = getSdHtml(message);
+    const header = getHeadersHtml(message);
+    const payload = getPayloadHtml(message);
+    const disclosures = await getDisclosuresHtml(message);
     return `
-
-<h1>${messageType2}</h1>
-<div>
-${getDisclosabilityHtml(issuerClaims)}
-</div>
-
-<h1>${messageType}</h1>
-<div class="jose-text">
-${getSdHtml(messageEncoded)}
+<div class="sd-jwt-tabbed">
+    <input type="radio" id="${prefix}-tab-${index}-encoded" name="${prefix}-tabs-${index}" checked="checked" tabindex="0">
+    <input type="radio" id="${prefix}-tab-${index}-decoded" name="${prefix}-tabs-${index}" tabindex="0">
+    <input type="radio" id="${prefix}-tab-${index}-disclosures" name="${prefix}-tabs-${index}" tabindex="0">
+    <ul class="sd-jwt-tabs">
+      <li class="sd-jwt-tab">
+        <label for="${prefix}-tab-${index}-encoded">Encoded</label>
+      </li>
+      <li class="sd-jwt-tab">
+        <label for="${prefix}-tab-${index}-decoded">Decoded</label>
+      </li>
+      <li class="sd-jwt-tab">
+        <label for="${prefix}-tab-${index}-disclosures">Issuer Disclosures</label>
+      </li>
+    </ul>
+    <div class="sd-jwt-tab-content" id="${prefix}-content-${index}-encoded">
+        ${encoded}
+    </div>
+    <div class="sd-jwt-tab-content" id="${prefix}-content-${index}-decoded">
+      ${header}
+      ${payload}
+    </div>
+    <div class="sd-jwt-tab-content" id="${prefix}-content-${index}-disclosures">
+        ${disclosures}
+    </div>
 </div>
-  `.trim()
-}
+`;
+};
\ No newline at end of file
diff --git a/plugin/src/getHtml.js b/plugin/src/getHtml.js
index 053b404..d49c052 100644
--- a/plugin/src/getHtml.js
+++ b/plugin/src/getHtml.js
@@ -1,6 +1,4 @@
-
-
-export const getCombinedHtml = ({ index, coseExample, jwtExample, sdJwtExample })=>{
+export const getCombinedHtml = ({index, coseExample, jwtExample, sdJwtExample}) => {
     return `
 <div class="vc-jose-cose-tabbed">
     <input type="radio" id="vc-jose-cose-tab-${index}-cose" name="vc-jose-cose-tabs-${index}" checked="checked">
@@ -29,7 +27,7 @@ ${sdJwtExample}
 </div>`
 }
 
-export const getJwtHtml = ({ index, jwtExample })=>{
+export const getJwtHtml = ({jwtExample}) => {
     return `
 <div class="vc-jose-cose-jwt-tabbed">
     <ul class="vc-jose-cose-jwt-tabs">
@@ -43,21 +41,15 @@ ${jwtExample}
 </div>`
 }
 
-export const getSdJwtHtml = ({ index, sdJwtExample })=>{
+export const getSdJwtHtml = ({sdJwtExample}) => {
     return `
-<div class="vc-jose-cose-sd-jwt-tabbed">
-    <ul class="vc-jose-cose-sd-jwt-tabs">
-      <li class="vc-jose-cose-sd-jwt-tab">
-        <label>SD-JWT</label>
-      </li>
-    </ul>
-    <div class="vc-jose-cose-sd-jwt-tab-content">
+<div>
 ${sdJwtExample}
-    </div>
-</div>`
-}
+</div>
+`.trim();
+};
 
-export const getCoseHtml = ({ index, coseExample })=>{
+export const getCoseHtml = ({coseExample}) => {
     return `
 <div class="vc-jose-cose-cose-tabbed">
     <ul class="vc-jose-cose-cose-tabs">
@@ -69,4 +61,4 @@ export const getCoseHtml = ({ index, coseExample })=>{
 ${coseExample}
     </div>
 </div>`
-}
+};
\ No newline at end of file