@forsakringskassan/docs-live-example 1.4.0 → 1.4.2

package/dist/{index.js → cjs/index.js}

@@ -32,7 +32,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 
 // node_modules/highlight.js/lib/core.js
 var require_core = __commonJS({
-  "node_modules/highlight.js/lib/core.js"(exports2, module2) {
+  "node_modules/highlight.js/lib/core.js"(exports, module2) {
     function deepFreeze(obj) {
       if (obj instanceof Map) {
         obj.clear = obj.delete = obj.set = function() {
@@ -1620,10 +1620,152 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // sfc-script:/home/runner/work/docs-live-example/docs-live-example/src/LiveExample.vue?type=script
+var import_vue5 = require("vue");
+
+// sfc-script:/home/runner/work/docs-live-example/docs-live-example/src/LiveExampleSourcecode.vue?type=script
+var import_vue = require("vue");
 var import_vue2 = require("vue");
 
+// src/expand-animation.ts
+var DURATION = 400;
+var ClassNames = {
+  EXPANDING: "expanding",
+  COLLAPSING: "collapsing"
+};
+var prefersReducedMotion = window.matchMedia("(prefers-reduced-motion)");
+var useAnimation = !prefersReducedMotion.matches;
+prefersReducedMotion.addEventListener("change", (event) => {
+  useAnimation = !event.matches;
+});
+function expandAnimation(element) {
+  let animation = null;
+  let isOpen = false;
+  let isClosing = false;
+  let isExpanding = false;
+  return {
+    get isOpen() {
+      return isOpen;
+    },
+    toggle() {
+      if (useAnimation) {
+        element.style.overflow = "hidden";
+        if (isExpanding || isOpen) {
+          isOpen = false;
+          shrink();
+        } else if (isClosing || !isOpen) {
+          isOpen = true;
+          open();
+        }
+        return;
+      }
+      if (isOpen) {
+        isOpen = false;
+        element.setAttribute("aria-expanded", "false");
+      } else {
+        isOpen = true;
+        element.setAttribute("aria-expanded", "true");
+      }
+    }
+  };
+  function shrink() {
+    isClosing = true;
+    const startHeight = `${element.offsetHeight}px`;
+    const endHeight = `0px`;
+    element.classList.add(ClassNames.COLLAPSING);
+    if (animation) {
+      animation.cancel();
+    }
+    animation = element.animate(
+      {
+        height: [startHeight, endHeight]
+      },
+      {
+        duration: DURATION,
+        easing: "ease-in-out"
+      }
+    );
+    animation.onfinish = () => {
+      onAnimationFinish(false);
+    };
+    animation.oncancel = () => {
+      element.classList.remove(ClassNames.COLLAPSING);
+      isClosing = false;
+    };
+  }
+  function open() {
+    let currentHeight = 0;
+    if (animation) {
+      currentHeight = element.getBoundingClientRect().height;
+    }
+    element.setAttribute("aria-expanded", "true");
+    window.requestAnimationFrame(() => expand(currentHeight));
+  }
+  function expand(currentHeight) {
+    isExpanding = true;
+    if (animation) {
+      animation.cancel();
+      element.style.height = "";
+    }
+    const startHeight = `${currentHeight}px`;
+    const endHeight = `${element.offsetHeight}px`;
+    element.classList.add(ClassNames.EXPANDING);
+    animation = element.animate(
+      {
+        height: [startHeight, endHeight]
+      },
+      {
+        duration: DURATION,
+        easing: "ease-in-out"
+      }
+    );
+    animation.onfinish = () => {
+      onAnimationFinish(true);
+    };
+    animation.oncancel = () => {
+      element.classList.remove(ClassNames.EXPANDING);
+      isExpanding = false;
+    };
+  }
+  function onAnimationFinish(open2) {
+    element.setAttribute("aria-expanded", open2 ? "true" : "false");
+    animation = null;
+    isClosing = false;
+    isExpanding = false;
+    element.classList.remove(ClassNames.EXPANDING);
+    element.classList.remove(ClassNames.COLLAPSING);
+    element.style.height = "";
+    element.style.overflow = "";
+  }
+}
+
+// src/utils/generate-id.ts
+function cyrb53(str) {
+  const a = 2654435761;
+  const b = 1597334677;
+  const c = 2246822507;
+  const d = 3266489909;
+  const e = 4294967296;
+  const f = 2097151;
+  const seed = 0;
+  let h1 = 3735928559 ^ seed;
+  let h2 = 1103547991 ^ seed;
+  for (let i = 0, ch; i < str.length; i++) {
+    ch = str.charCodeAt(i);
+    h1 = Math.imul(h1 ^ ch, a);
+    h2 = Math.imul(h2 ^ ch, b);
+  }
+  h1 = Math.imul(h1 ^ h1 >>> 16, c) ^ Math.imul(h2 ^ h2 >>> 13, d);
+  h2 = Math.imul(h2 ^ h2 >>> 16, c) ^ Math.imul(h1 ^ h1 >>> 13, d);
+  return e * (f & h2) + (h1 >>> 0);
+}
+function generateId(template) {
+  const hash = cyrb53(template);
+  return `le-${hash.toString(16)}`;
+}
+
 // src/utils/highlight.ts
-var prettier = __toESM(require("prettier"));
+var import_standalone = __toESM(require("prettier/standalone"));
+var import_parser_html = __toESM(require("prettier/parser-html"));
 
 // node_modules/highlight.js/es/core.js
 var import_core = __toESM(require_core(), 1);
@@ -1859,13 +2001,14 @@ function xml(hljs) {
 core_default.registerLanguage("html", xml);
 var prettierConfig = {
   parser: "html",
+  plugins: [import_parser_html.default],
   singleQuote: false,
   arrowParens: "always",
   tabWidth: 4,
   printWidth: 80
 };
 async function highlight(code) {
-  const formatted = await prettier.format(code, prettierConfig);
+  const formatted = await import_standalone.default.format(code, prettierConfig);
   const { value } = core_default.highlight(formatted, { language: "html" });
   return `<code class="hljs lang-html" tabindex="0">${value}</code>`;
 }
@@ -1876,10 +2019,224 @@ function stripComments(html) {
   return html.replace(commentPattern, "");
 }
 
-// src/LiveCode.ts
-var import_vue = require("vue");
-var LiveCode_default = (0, import_vue.defineComponent)({
-  name: "LiveCode",
+// src/utils/get-source-code.ts
+async function getSourceCode(options) {
+  const { language, template, element } = options;
+  if (language === "original") {
+    return await highlight(template);
+  } else {
+    const html = element.innerHTML;
+    const uncommented = stripComments(html);
+    return await highlight(uncommented);
+  }
+}
+
+// sfc-script:/home/runner/work/docs-live-example/docs-live-example/src/LiveExampleSourcecode.vue?type=script
+var LiveExampleSourcecode_default = /* @__PURE__ */ (0, import_vue.defineComponent)({
+  __name: "LiveExampleSourcecode",
+  props: {
+    element: {
+      type: HTMLElement,
+      required: true
+    },
+    template: {
+      type: String,
+      required: true
+    },
+    templateLanguage: {
+      type: String,
+      required: true
+    }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    let idPrefix = generateId(props.template);
+    const sourcecode = (0, import_vue2.ref)("");
+    const expandable = (0, import_vue2.ref)(null);
+    const animation = (0, import_vue2.ref)({
+      isOpen: false,
+      toggle() {
+      }
+    });
+    const selectedLanguage = (0, import_vue2.ref)(toSelectedLanguage(props.templateLanguage));
+    const codeToggleText = (0, import_vue2.computed)(() => {
+      return animation.value.isOpen ? "D\xF6lj kod" : "Visa kod";
+    });
+    (0, import_vue2.onMounted)(() => {
+      if (expandable.value) {
+        animation.value = expandAnimation(expandable.value);
+      } else {
+        throw new Error("Missing HTML element");
+      }
+      updateSourcecode();
+    });
+    (0, import_vue2.watch)(() => props.template, onUpdateTemplate);
+    (0, import_vue2.watch)(() => props.templateLanguage, updateSelectedLanguage, { once: true });
+    async function updateSourcecode() {
+      await (0, import_vue2.nextTick)();
+      sourcecode.value = await getSourceCode({
+        language: selectedLanguage.value,
+        template: props.template ?? "",
+        element: unwrapElement(props.element)
+      });
+    }
+    function unwrapElement(element) {
+      const firstElementChild = element.firstElementChild;
+      return firstElementChild ?? element;
+    }
+    function updateSelectedLanguage(value) {
+      selectedLanguage.value = toSelectedLanguage(value);
+    }
+    function id(suffix) {
+      return `${idPrefix}--${suffix}`;
+    }
+    function toSelectedLanguage(value) {
+      return value === "html" ? "rendered" : "original";
+    }
+    function onUpdateTemplate(template) {
+      idPrefix = generateId(template);
+      updateSourcecode();
+    }
+    function onToggleCode() {
+      animation.value.toggle();
+    }
+    const __returned__ = { props, get idPrefix() {
+      return idPrefix;
+    }, set idPrefix(v) {
+      idPrefix = v;
+    }, sourcecode, expandable, animation, selectedLanguage, codeToggleText, updateSourcecode, unwrapElement, updateSelectedLanguage, id, toSelectedLanguage, onUpdateTemplate, onToggleCode };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+// sfc-template:/home/runner/work/docs-live-example/docs-live-example/src/LiveExampleSourcecode.vue?type=template
+var import_vue3 = require("vue");
+var _withScopeId = (n) => ((0, import_vue3.pushScopeId)("data-v-7a98eb26"), n = n(), (0, import_vue3.popScopeId)(), n);
+var _hoisted_1 = { class: "live-example__code-toggle" };
+var _hoisted_2 = ["aria-controls", "aria-expanded"];
+var _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ (0, import_vue3.createElementVNode)(
+  "i",
+  { class: "icon icon--code" },
+  null,
+  -1
+  /* HOISTED */
+));
+var _hoisted_4 = ["id"];
+var _hoisted_5 = {
+  class: "live-example__code-languages",
+  onsubmit: "event.preventDefault()"
+};
+var _hoisted_6 = {
+  key: 0,
+  class: "fieldset radio-button-group radio-button-group--horizontal"
+};
+var _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ (0, import_vue3.createElementVNode)(
+  "legend",
+  { class: "label fieldset__label" },
+  "Kodspr\xE5k",
+  -1
+  /* HOISTED */
+));
+var _hoisted_8 = { class: "fieldset__content radio-button-group__content" };
+var _hoisted_9 = {
+  key: 0,
+  class: "radio-button"
+};
+var _hoisted_10 = ["id"];
+var _hoisted_11 = ["for"];
+var _hoisted_12 = { class: "radio-button" };
+var _hoisted_13 = ["id"];
+var _hoisted_14 = ["for"];
+var _hoisted_15 = ["innerHTML"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)(
+    import_vue3.Fragment,
+    null,
+    [
+      (0, import_vue3.createElementVNode)("div", _hoisted_1, [
+        (0, import_vue3.createElementVNode)("button", {
+          type: "button",
+          class: "button button--discrete",
+          "aria-controls": $setup.id("code-expand"),
+          "aria-expanded": $setup.animation.isOpen ? "true" : "false",
+          onClick: $setup.onToggleCode
+        }, [
+          _hoisted_3,
+          (0, import_vue3.createTextVNode)(
+            " " + (0, import_vue3.toDisplayString)($setup.codeToggleText),
+            1
+            /* TEXT */
+          )
+        ], 8, _hoisted_2)
+      ]),
+      (0, import_vue3.createElementVNode)("div", {
+        id: $setup.id("code-expand"),
+        ref: "expandable",
+        class: "collapsed"
+      }, [
+        (0, import_vue3.createCommentVNode)(" [html-validate-disable-next wcag/h32 -- this form is not meant to be submitted] "),
+        (0, import_vue3.createElementVNode)("form", _hoisted_5, [
+          $setup.sourcecode ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("fieldset", _hoisted_6, [
+            _hoisted_7,
+            (0, import_vue3.createElementVNode)("div", _hoisted_8, [
+              $props.templateLanguage === "vue" ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("div", _hoisted_9, [
+                (0, import_vue3.withDirectives)((0, import_vue3.createElementVNode)("input", {
+                  id: $setup.id("lang-original"),
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.selectedLanguage = $event),
+                  type: "radio",
+                  class: "radio-button__input",
+                  name: "selected-language",
+                  value: "original",
+                  onChange: $setup.updateSourcecode
+                }, null, 40, _hoisted_10), [
+                  [import_vue3.vModelRadio, $setup.selectedLanguage]
+                ]),
+                (0, import_vue3.createElementVNode)("label", {
+                  for: $setup.id("lang-original"),
+                  class: "radio-button__label"
+                }, " Vue ", 8, _hoisted_11)
+              ])) : (0, import_vue3.createCommentVNode)("v-if", true),
+              (0, import_vue3.createElementVNode)("div", _hoisted_12, [
+                (0, import_vue3.withDirectives)((0, import_vue3.createElementVNode)("input", {
+                  id: $setup.id("lang-rendered"),
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $setup.selectedLanguage = $event),
+                  type: "radio",
+                  class: "radio-button__input",
+                  name: "selected-language",
+                  value: "rendered",
+                  onChange: $setup.updateSourcecode
+                }, null, 40, _hoisted_13), [
+                  [import_vue3.vModelRadio, $setup.selectedLanguage]
+                ]),
+                (0, import_vue3.createElementVNode)("label", {
+                  for: $setup.id("lang-rendered"),
+                  class: "radio-button__label"
+                }, " HTML ", 8, _hoisted_14)
+              ])
+            ])
+          ])) : (0, import_vue3.createCommentVNode)("v-if", true)
+        ]),
+        (0, import_vue3.createCommentVNode)(" eslint-disable-next-line vue/no-v-html -- expected to show highlighted markup "),
+        (0, import_vue3.createElementVNode)("pre", { innerHTML: $setup.sourcecode }, null, 8, _hoisted_15)
+      ], 8, _hoisted_4)
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+
+// src/LiveExampleSourcecode.vue
+LiveExampleSourcecode_default.render = render;
+LiveExampleSourcecode_default.__file = "src/LiveExampleSourcecode.vue";
+LiveExampleSourcecode_default.__scopeId = "data-v-7a98eb26";
+var LiveExampleSourcecode_default2 = LiveExampleSourcecode_default;
+
+// src/live-vue-code.ts
+var import_vue4 = require("vue");
+var live_vue_code_default = (0, import_vue4.defineComponent)({
+  name: "LiveVueCode",
   props: {
     template: {
       type: String,
@@ -1899,8 +2256,12 @@ var LiveCode_default = (0, import_vue.defineComponent)({
     }
   },
   render() {
-    const renderFunction = (0, import_vue.compile)(this.template);
-    return (0, import_vue.h)(
+    const renderFunction = (0, import_vue4.compile)(this.template);
+    if (!renderFunction) {
+      const message = "Failed to compile Vue render function!";
+      return (0, import_vue4.h)("div", { style: "color: red" }, message);
+    }
+    return (0, import_vue4.h)(
       {
         name: "LiveComponent",
         data() {
@@ -1925,124 +2286,32 @@ var LiveCode_default = (0, import_vue.defineComponent)({
   }
 });
 
-// src/expand-animation.ts
-var DURATION = 400;
-var ClassNames = {
-  EXPANDING: "expanding",
-  COLLAPSING: "collapsing"
-};
-var prefersReducedMotion = window.matchMedia("(prefers-reduced-motion)");
-var useAnimation = !prefersReducedMotion.matches;
-prefersReducedMotion.addEventListener("change", (event) => {
-  useAnimation = !event.matches;
-});
-function expandAnimation(element) {
-  let animation = null;
-  let isOpen = false;
-  let isClosing = false;
-  let isExpanding = false;
-  return {
-    get isOpen() {
-      return isOpen;
-    },
-    toggle() {
-      if (useAnimation) {
-        element.style.overflow = "hidden";
-        if (isExpanding || isOpen) {
-          isOpen = false;
-          shrink();
-        } else if (isClosing || !isOpen) {
-          isOpen = true;
-          open();
-        }
-        return;
-      }
-      if (isOpen) {
-        isOpen = false;
-        element.setAttribute("aria-expanded", "false");
-      } else {
-        isOpen = true;
-        element.setAttribute("aria-expanded", "true");
-      }
-    }
-  };
-  function shrink() {
-    isClosing = true;
-    const startHeight = `${element.offsetHeight}px`;
-    const endHeight = `0px`;
-    element.classList.add(ClassNames.COLLAPSING);
-    if (animation) {
-      animation.cancel();
-    }
-    animation = element.animate(
-      {
-        height: [startHeight, endHeight]
-      },
-      {
-        duration: DURATION,
-        easing: "ease-in-out"
-      }
-    );
-    animation.onfinish = () => {
-      onAnimationFinish(false);
-    };
-    animation.oncancel = () => {
-      element.classList.remove(ClassNames.COLLAPSING);
-      isClosing = false;
-    };
-  }
-  function open() {
-    let currentHeight = 0;
-    if (animation) {
-      currentHeight = element.getBoundingClientRect().height;
-    }
-    element.setAttribute("aria-expanded", "true");
-    window.requestAnimationFrame(() => expand(currentHeight));
-  }
-  function expand(currentHeight) {
-    isExpanding = true;
-    if (animation) {
-      animation.cancel();
-      element.style.height = "";
-    }
-    const startHeight = `${currentHeight}px`;
-    const endHeight = `${element.offsetHeight}px`;
-    element.classList.add(ClassNames.EXPANDING);
-    animation = element.animate(
-      {
-        height: [startHeight, endHeight]
-      },
-      {
-        duration: DURATION,
-        easing: "ease-in-out"
-      }
-    );
-    animation.onfinish = () => {
-      onAnimationFinish(true);
-    };
-    animation.oncancel = () => {
-      element.classList.remove(ClassNames.EXPANDING);
-      isExpanding = false;
-    };
-  }
-  function onAnimationFinish(open2) {
-    element.setAttribute("aria-expanded", open2 ? "true" : "false");
-    animation = null;
-    isClosing = false;
-    isExpanding = false;
-    element.classList.remove(ClassNames.EXPANDING);
-    element.classList.remove(ClassNames.COLLAPSING);
-    element.style.height = "";
-    element.style.overflow = "";
-  }
-}
-
 // sfc-script:/home/runner/work/docs-live-example/docs-live-example/src/LiveExample.vue?type=script
-var idCounter = 1;
-var LiveExample_default = (0, import_vue2.defineComponent)({
+var LiveExample_default = (0, import_vue5.defineComponent)({
   name: "LiveExample",
-  components: { LiveCode: LiveCode_default },
+  components: { LiveExampleSourcecode: LiveExampleSourcecode_default2, LiveVueCode: live_vue_code_default },
   props: {
+    /**
+     * Explicitly render example in given language.
+     *
+     * Must be one of:
+     *
+     * - `"vue"` - Interpret `template` as a Vue SFC.
+     * - `"html"` - Interpret `template` as vanilla HTML.
+     *
+     * Default is `"auto"` but you should not explicitly set this value
+     * yourself. When set to `"auto"` the contents of `template` prop will
+     * be autodetected based on some heurestics (subject to change at any
+     * time).
+     */
+    language: {
+      type: String,
+      required: false,
+      default: "auto",
+      validator(value) {
+        return ["vue", "html", "auto"].includes(value);
+      }
+    },
     template: {
       type: String,
       required: true
@@ -2071,220 +2340,100 @@ var LiveExample_default = (0, import_vue2.defineComponent)({
   },
   data() {
     return {
-      idPrefix: `live-example-${idCounter++}`,
-      codeLanguage: "html",
-      codeExpand: {
-        isOpen: false,
-        toggle() {
-        }
-      }
+      /** Language declared by parent element via `data-language`, if any */
+      parentLanguage: "",
+      exampleElement: void 0
     };
   },
   computed: {
-    isVue() {
-      return Object.keys(this.components).length > 0;
-    },
-    codeToggleText() {
-      return this.codeExpand.isOpen ? "D\xF6lj kod" : "Visa kod";
-    },
-    exampleElement() {
-      return this.$refs.example;
-    },
-    expandableElement() {
-      return this.$refs.expandable;
-    },
-    templateElement() {
-      return this.$refs.template;
-    }
-  },
-  watch: {
-    template: {
-      immediate: false,
-      handler() {
-        this.compileCode();
+    templateLanguage() {
+      if (this.language !== "auto") {
+        return this.language;
       }
-    },
-    codeLanguage: {
-      immediate: false,
-      handler() {
-        this.compileCode();
+      if (this.parentLanguage) {
+        return this.parentLanguage;
       }
+      const hasChildComponents = Object.keys(this.components).length > 0;
+      return hasChildComponents ? "vue" : "html";
     }
   },
   mounted() {
-    if (this.isVue) {
-      this.codeLanguage = "vue";
-    }
-    this.codeExpand = expandAnimation(this.expandableElement);
-    this.compileCode();
-  },
-  methods: {
-    onToggleCode() {
-      this.codeExpand.toggle();
-    },
-    compileCode() {
-      switch (this.codeLanguage) {
-        case "vue":
-          this.compileVue();
-          break;
-        case "html":
-          this.compileHTML();
-          break;
-      }
-    },
-    async compileVue() {
-      const { templateElement } = this;
-      templateElement.innerHTML = await highlight(this.template);
-    },
-    async compileHTML() {
-      await this.$nextTick();
-      const { exampleElement, templateElement } = this;
-      const html = exampleElement.innerHTML;
-      const uncommented = stripComments(html);
-      templateElement.innerHTML = await highlight(uncommented);
+    const parent = this.$el.closest("[data-language]");
+    if (parent) {
+      this.parentLanguage = parent.dataset.language ?? "";
     }
+    this.exampleElement = this.$refs.example;
   }
 });
 
 // sfc-template:/home/runner/work/docs-live-example/docs-live-example/src/LiveExample.vue?type=template
-var import_vue3 = require("vue");
-var _withScopeId = (n) => ((0, import_vue3.pushScopeId)("data-v-f5e7ab48"), n = n(), (0, import_vue3.popScopeId)(), n);
-var _hoisted_1 = { class: "live-example__container" };
-var _hoisted_2 = {
+var import_vue6 = require("vue");
+var _hoisted_16 = { class: "live-example__container" };
+var _hoisted_22 = {
   ref: "example",
   class: "live-example__example"
 };
-var _hoisted_3 = { class: "live-example__controls" };
-var _hoisted_4 = { class: "live-example__code" };
-var _hoisted_5 = { class: "live-example__code-toggle" };
-var _hoisted_6 = ["aria-controls", "aria-expanded"];
-var _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ (0, import_vue3.createElementVNode)(
-  "i",
-  { class: "icon icon--code" },
+var _hoisted_32 = { key: 0 };
+var _hoisted_42 = ["innerHTML"];
+var _hoisted_52 = { key: 2 };
+var _hoisted_62 = /* @__PURE__ */ (0, import_vue6.createElementVNode)(
+  "pre",
   null,
+  "Unknown language, cannot render example",
   -1
   /* HOISTED */
-));
-var _hoisted_8 = ["id"];
-var _hoisted_9 = { class: "live-example__code-languages" };
-var _hoisted_10 = { class: "fieldset radio-button-group radio-button-group--horizontal" };
-var _hoisted_11 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ (0, import_vue3.createElementVNode)(
-  "legend",
-  { class: "label fieldset__label" },
-  "Kodspr\xE5k",
-  -1
-  /* HOISTED */
-));
-var _hoisted_12 = { class: "fieldset__content radio-button-group__content" };
-var _hoisted_13 = {
+);
+var _hoisted_72 = [
+  _hoisted_62
+];
+var _hoisted_82 = { class: "live-example__controls" };
+var _hoisted_92 = {
   key: 0,
-  class: "radio-button"
+  class: "live-example__code"
 };
-var _hoisted_14 = ["id"];
-var _hoisted_15 = ["for"];
-var _hoisted_16 = { class: "radio-button" };
-var _hoisted_17 = ["id"];
-var _hoisted_18 = ["for"];
-var _hoisted_19 = { ref: "template" };
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_live_code = (0, import_vue3.resolveComponent)("live-code");
-  return (0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("div", _hoisted_1, [
-    (0, import_vue3.createElementVNode)(
+function render2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_live_vue_code = (0, import_vue6.resolveComponent)("live-vue-code");
+  const _component_live_example_sourcecode = (0, import_vue6.resolveComponent)("live-example-sourcecode");
+  return (0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)("div", _hoisted_16, [
+    (0, import_vue6.createElementVNode)(
       "div",
-      _hoisted_2,
+      _hoisted_22,
       [
-        (0, import_vue3.createVNode)(_component_live_code, {
-          components: _ctx.components,
-          template: _ctx.template,
-          livedata: _ctx.livedata,
-          livemethods: _ctx.livemethods
-        }, null, 8, ["components", "template", "livedata", "livemethods"])
+        _ctx.templateLanguage === "vue" ? ((0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)("div", _hoisted_32, [
+          (0, import_vue6.createVNode)(_component_live_vue_code, {
+            components: _ctx.components,
+            template: _ctx.template,
+            livedata: _ctx.livedata,
+            livemethods: _ctx.livemethods
+          }, null, 8, ["components", "template", "livedata", "livemethods"])
+        ])) : _ctx.templateLanguage === "html" ? ((0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)(
+          import_vue6.Fragment,
+          { key: 1 },
+          [
+            (0, import_vue6.createCommentVNode)(" eslint-disable-next-line vue/no-v-html -- expected to show rendered html "),
+            (0, import_vue6.createElementVNode)("div", { innerHTML: _ctx.template }, null, 8, _hoisted_42)
+          ],
+          2112
+          /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+        )) : ((0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)("div", _hoisted_52, [..._hoisted_72]))
       ],
       512
       /* NEED_PATCH */
     ),
-    (0, import_vue3.createElementVNode)("div", _hoisted_3, [
-      (0, import_vue3.renderSlot)(_ctx.$slots, "default", {}, void 0, true)
+    (0, import_vue6.createElementVNode)("div", _hoisted_82, [
+      (0, import_vue6.renderSlot)(_ctx.$slots, "default")
     ]),
-    (0, import_vue3.createElementVNode)("div", _hoisted_4, [
-      (0, import_vue3.createElementVNode)("div", _hoisted_5, [
-        (0, import_vue3.createElementVNode)("button", {
-          type: "button",
-          class: "button button--discrete",
-          "aria-controls": _ctx.idPrefix + "-code-expand",
-          "aria-expanded": _ctx.codeExpand.isOpen ? "true" : "false",
-          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onToggleCode && _ctx.onToggleCode(...args))
-        }, [
-          _hoisted_7,
-          (0, import_vue3.createTextVNode)(
-            " " + (0, import_vue3.toDisplayString)(_ctx.codeToggleText),
-            1
-            /* TEXT */
-          )
-        ], 8, _hoisted_6)
-      ]),
-      (0, import_vue3.createElementVNode)("div", {
-        id: _ctx.idPrefix + "-code-expand",
-        ref: "expandable",
-        class: "collapsed"
-      }, [
-        (0, import_vue3.createElementVNode)("div", _hoisted_9, [
-          (0, import_vue3.createElementVNode)("fieldset", _hoisted_10, [
-            _hoisted_11,
-            (0, import_vue3.createElementVNode)("div", _hoisted_12, [
-              _ctx.isVue ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("div", _hoisted_13, [
-                (0, import_vue3.withDirectives)((0, import_vue3.createElementVNode)("input", {
-                  id: _ctx.idPrefix + "-lang-vue",
-                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.codeLanguage = $event),
-                  type: "radio",
-                  class: "radio-button__input",
-                  name: "code",
-                  value: "vue"
-                }, null, 8, _hoisted_14), [
-                  [import_vue3.vModelRadio, _ctx.codeLanguage]
-                ]),
-                (0, import_vue3.createElementVNode)("label", {
-                  for: _ctx.idPrefix + "-lang-vue",
-                  class: "radio-button__label"
-                }, " Vue ", 8, _hoisted_15)
-              ])) : (0, import_vue3.createCommentVNode)("v-if", true),
-              (0, import_vue3.createElementVNode)("div", _hoisted_16, [
-                (0, import_vue3.withDirectives)((0, import_vue3.createElementVNode)("input", {
-                  id: _ctx.idPrefix + "-lang-html",
-                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.codeLanguage = $event),
-                  type: "radio",
-                  class: "radio-button__input",
-                  name: "code",
-                  value: "html"
-                }, null, 8, _hoisted_17), [
-                  [import_vue3.vModelRadio, _ctx.codeLanguage]
-                ]),
-                (0, import_vue3.createElementVNode)("label", {
-                  for: _ctx.idPrefix + "-lang-html",
-                  class: "radio-button__label"
-                }, " HTML ", 8, _hoisted_18)
-              ])
-            ])
-          ])
-        ]),
-        (0, import_vue3.createElementVNode)(
-          "pre",
-          _hoisted_19,
-          null,
-          512
-          /* NEED_PATCH */
-        )
-      ], 8, _hoisted_8)
-    ])
+    _ctx.exampleElement ? ((0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)("div", _hoisted_92, [
+      (0, import_vue6.createVNode)(_component_live_example_sourcecode, {
+        element: _ctx.exampleElement,
+        template: _ctx.template,
+        "template-language": _ctx.templateLanguage
+      }, null, 8, ["element", "template", "template-language"])
+    ])) : (0, import_vue6.createCommentVNode)("v-if", true)
   ]);
 }
 
 // src/LiveExample.vue
-LiveExample_default.render = render;
+LiveExample_default.render = render2;
 LiveExample_default.__file = "src/LiveExample.vue";
-LiveExample_default.__scopeId = "data-v-f5e7ab48";
 var LiveExample_default2 = LiveExample_default;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  LiveExample
-});