@schalkneethling/miyagi-core 4.6.1 → 4.7.0

package/dist/js/main.build.js

@@ -1 +1 @@
-function e(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".GoTo");let n=!1;if(t){const s=t.dataset.urlPattern,a=t.querySelector(".GoTo-input"),r=t.querySelector("#goto-list");if(a&&r){const i=Array.from(r.querySelectorAll("option")).map(e=>e.value);a.addEventListener("input",({target:e})=>{const t=e.value;i.includes(t)&&(document.location.href=s.replace("{{component}}",t))}),window.addEventListener("keyup",s=>{const{path:r,originalTarget:i,target:c,key:l}=s;if(l){const s=r?r[0]:i||c,m=l.toLowerCase();((t,n)=>!e(t.tagName)&&"g"===n)(s,m)?o(t,a):n&&"escape"===m&&(d=a,t.classList.add("u-hiddenVisually"),d.value="",d.blur(),n=!1)}var d}),window.addEventListener("gotoTriggered",()=>o(t,a))}}function o(e,t){e.classList.remove("u-hiddenVisually"),t.focus(),n=!0}}),document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".Search-input"),n=document.querySelector(".Search-clear"),o=Array.from(document.querySelectorAll(".Nav-item")).map(e=>({node:e,listItem:e.closest(".Nav-entry"),label:e.textContent,lowercaseLabel:e.textContent.toLowerCase(),matchesQuery:!1,toggle:e.previousElementSibling||null,parentToggles:a(e),initiallyOpened:!!e.previousElementSibling&&"true"===e.previousElementSibling.getAttribute("aria-expanded")}));function s(){n.hidden=!0,o.forEach(e=>{e.matchesQuery&&(e.node.textContent=e.label),e.matchesQuery=!1,e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!e.initiallyOpened,e.toggle.setAttribute("aria-expanded",e.initiallyOpened?"true":"false"))}),document.querySelectorAll(".is-match, .is-no-match, .has-match, .has-no-match").forEach(e=>e.classList.remove("is-match","is-no-match","has-match","has-no-match"))}function a(e){const t=[];let n=e;for(;n.closest(".Nav-entry").parentNode.closest(".Nav-entry");){const e=n.closest(".Nav-entry").parentNode.closest(".Nav-entry").querySelector(".Nav-toggle");e&&t.push(e),n=n.closest(".Nav-entry").parentNode.closest(".Nav-entry")}return t}t&&(n&&n.addEventListener("click",function(){t.value="",s()}),t.addEventListener("input",function({target:e}){const t=e.value.toLowerCase();t.length>0?(a=t,n.hidden=!1,o.forEach(e=>{e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!0,e.toggle.setAttribute("aria-expanded","false")),e.parentToggles.forEach(e=>{e.parentNode.classList.remove("has-match")})}),o.forEach(e=>{e.matchesQuery=e.lowercaseLabel.includes(a),e.listItem.classList.toggle("is-match",e.matchesQuery),e.listItem.classList.toggle("is-no-match",!e.matchesQuery),e.matchesQuery?(e.node.innerHTML=e.label.replace(new RegExp(a,"g"),`<mark>${a}</mark>`),e.parentToggles.forEach(e=>{e.parentNode.classList.add("has-match"),e.parentNode.classList.remove("has-no-match"),document.getElementById(e.getAttribute("aria-controls")).hidden=!1,e.setAttribute("aria-expanded","true")})):e.node.textContent=e.label}),o.forEach(e=>{e.listItem.classList.contains("has-match")||e.listItem.classList.add("has-no-match")})):s();var a}),t.addEventListener("keyup",function({target:e,key:t}){"escape"===t.toLowerCase()&&(e.value="",e.blur(),s())}),window.addEventListener("keyup",n=>{const{path:o,originalTarget:s,target:a,key:r}=n;((t,n)=>!e(t.tagName)&&"f"===n)(o?o[0]:s||a,r)&&t.focus()}),window.addEventListener("searchTriggered",()=>{t.focus()}))});const t="miyagi-controls::",n="miyagi-controls-mode";function o(){return document.getElementById("controls-panel")}function s(){return document.getElementById("controls-fields")}function a(){const e=o();e&&(e.hidden=!0,s().innerHTML="")}function r(e,t,n){const o=new URL(e,window.location.origin);return o.searchParams.set(`overrides[${t}]`,String(n)),o.pathname+o.search}function i(e){const t=document.getElementById("iframe"),n=document.querySelector(".FrameWrapper");t&&n&&(t.remove(),t.src=e,n.appendChild(t),l(e))}function c(e,t){const n=s();n.innerHTML="";const a=new URL(t,window.location.origin),c={};a.searchParams.forEach((e,t)=>{const n=t.match(/^overrides\[(.+)\]$/);n&&(c[n[1]]=e)}),e.forEach(({property:e,type:o,values:s,current:a})=>{const l=void 0!==c[e]?c[e]:a,d=document.createElement("div");d.className="Controls-field";const m=document.createElement("label");m.className="Controls-label";const h=document.createElement("span");let u;h.className="Controls-labelText",h.textContent=e,m.appendChild(h),"enum"===o?(u=document.createElement("select"),u.className="Controls-select",s.forEach(e=>{const t=document.createElement("option");t.value=e,t.textContent=e,e==l&&(t.selected=!0),u.appendChild(t)}),u.addEventListener("change",()=>{i(r(t,e,u.value))})):"boolean"===o&&(u=document.createElement("input"),u.type="checkbox",u.className="Controls-checkbox",u.checked="string"==typeof l?"true"===l:Boolean(l),u.addEventListener("change",()=>{i(r(t,e,u.checked))})),u&&(m.appendChild(u),d.appendChild(m),n.appendChild(d))}),function(){const e=o();e&&(e.hidden=!1)}()}async function l(e){const n=new URL(e,window.location.origin),o=n.searchParams.get("file"),s=n.searchParams.get("variation");if(!o||!s)return void a();const r=`${t}${o}::${s}`;let i=null;try{i=JSON.parse(sessionStorage.getItem(r)??"null")}catch{sessionStorage.removeItem(r)}if(!i)try{const e=await fetch(`/api/component-controls?file=${encodeURIComponent(o)}&variation=${encodeURIComponent(s)}`);i=await e.json(),sessionStorage.setItem(r,JSON.stringify(i))}catch{return void a()}i.controls?.length?c(i.controls,e):a()}window.addEventListener("message",e=>{"miyagi:invalidate-cache"===e.data?.type&&function(e){for(const n of Object.keys(sessionStorage)){if(!n.startsWith(t))continue;if(!e||0===e.length){sessionStorage.removeItem(n);continue}const o=n.slice(17).split("::")[0];e.some(e=>e.includes(o))&&sessionStorage.removeItem(n)}}(e.data.paths??[])}),document.addEventListener("DOMContentLoaded",()=>{!function(){const e=o();if(!e)return;const t=localStorage.getItem(n)??"docked";e.setAttribute("data-mode",t);const s=document.getElementById("controls-mode-toggle");s&&s.addEventListener("click",()=>{const t="docked"===e.getAttribute("data-mode")?"floating":"docked";e.setAttribute("data-mode",t),localStorage.setItem(n,t)})}();const e=document.getElementById("iframe");if(e){const t=e.getAttribute("src");t&&l(t)}});class d{constructor(e){this.form=e,this.inputs=Array.from(this.form.querySelectorAll('[type="radio"], [type="checkbox"]')),this.options=this.inputs.map(e=>e.value),this.name=this.inputs[0].name,this.cookieName=`miyagi_${document.title.replaceAll(" ","-")}_${this.name}`,this.cookieValue=this.#e(this.cookieName),this.inputs.forEach(e=>{e.addEventListener("change",this.onThemeChange.bind(this))}),this.renderSwitcher()}onThemeChange({target:e}){const{value:t}=e;this.saveTheme(t),this.renderTheme(t)}saveTheme(e){document.cookie=`${this.cookieName}=${e};`}renderSwitcher(){const e=this.form.querySelector(`[value="${this.cookieValue}"]`);e&&(e.checked=!0)}#e(e){return document.cookie.split("; ").reduce((t,n)=>{const o=n.split("=");return o[0]===e?decodeURIComponent(o[1]):t},"")}}class m extends d{constructor(e){super(e),this.logoWrapper=document.querySelector(".Title-logo"),this.logoWrapper&&(this.logoImage=this.logoWrapper.querySelector("img")),window.frames.iframe&&(this.cookieValue&&this.render(this.cookieValue),window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)}))}onThemeChange({target:e}){super.onThemeChange({target:e}),this.render(e.value)}renderTheme(e){this.options.forEach(e=>{window.frames.iframe.document.documentElement&&window.frames.iframe.document.documentElement.classList.remove(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.remove(`theme-${e}`)})}),window.frames.iframe.document.documentElement.classList.add(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.add(`theme-${e}`)})}render(e){this.options.forEach(e=>{document.documentElement.classList.remove(`${this.name}-${e}`)}),document.documentElement.classList.add(`${this.name}-${e}`),this.logoWrapper&&("auto"===e?this.options.forEach(e=>{if("auto"===e)return;const t=document.createElement("source");t.srcset=this.logoImage.dataset[e],t.media=`(prefers-color-scheme: ${e})`,this.logoWrapper.prepend(t)}):(this.logoWrapper.querySelectorAll("source").forEach(e=>e.remove()),this.logoImage.src=this.logoImage.dataset[e]))}}class h extends d{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}renderTheme(e){Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.setAttribute("dir",e)})}}class u extends d{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}onThemeChange({target:e}){const t=e.checked?"dev":"presentation";this.saveTheme(t),this.renderTheme(t)}renderSwitcher(){this.cookieValue&&(this.form.querySelector('[type="checkbox"]').checked="dev"==this.cookieValue)}renderTheme(e){window.frames.iframe.document.documentElement.dataset.mode=e}}class g{constructor(){this.classes={content:"Content",iframe:"Frame",frameWrapper:"FrameWrapper",toggleMenu:"Menu-toggleMobileMenu",menu:{rootLink:"Title-link",list:"Nav-list",children:"Nav-children",link:"Nav-item--link",variant:"Nav-variant",listItem:"Nav-entry",toggleComponent:"Nav-toggle"}},this.elements={rootLink:document.querySelector(`.${this.classes.menu.rootLink}`),content:document.querySelector(`.${this.classes.content}`),frameWrapper:document.querySelector(`.${this.classes.frameWrapper}`),iframe:document.querySelector(`.${this.classes.iframe}`),toggleMenu:document.querySelector(`.${this.classes.toggleMenu}`),children:Array.from(document.querySelectorAll(`.${this.classes.menu.children}`)),links:Array.from(document.querySelectorAll(`.${this.classes.menu.link}, .${this.classes.menu.variant}`)),componentToggles:Array.from(document.querySelectorAll(`.${this.classes.menu.toggleComponent}`))},this.addToggleMenuClickListener(),this.addComponentTogglesClickListener(),this.addLinksClickListener(),this.addPopStateLisener(),this.addPageChangedListener(),new m(document.querySelector(".js-ThemeSwitcher")),new h(document.querySelector(".js-TextDirectionSwitcher")),new u(document.querySelector(".js-DevelopmentModeSwitcher"))}static toggleExpandedAttribute(e){const t="false"===e.getAttribute("aria-expanded");e.setAttribute("aria-expanded",t?"true":"false"),document.getElementById(e.getAttribute("aria-controls")).hidden=!t}updateIframe(e){this.elements.iframe.remove(),this.elements.iframe.src=e,this.elements.frameWrapper.appendChild(this.elements.iframe),l(e)}convertPathToMainPath(e){return e.replace(this.paths.embedded,this.paths.container).replace(this.embeddedParam,"")}closeOtherOpenedComponents(e){this.elements.componentToggles.forEach(t=>{"true"===t.getAttribute("aria-expanded")&&(t.closest(`.${this.classes.menu.listItem}`).contains(e)||t.setAttribute("aria-expanded",!1))})}openParentComponent(e){if(e){const t=this.elements.componentToggles.find(t=>t.getAttribute("aria-controls")===e.id);t&&(t.setAttribute("aria-expanded",!0),this.openParentComponent(t.closest(`.${this.classes.menu.listContainer}`)))}}setActiveStateInNav(e){var t=this.elements.links.find(t=>e==t.getAttribute("href")||t.getAttribute("href")==e.replace(this.paths.container,this.paths.embedded));if(t){const e=t.previousElementSibling;var n=e&&e.classList.contains(this.classes.menu.toggleComponent)?e:null}const o=this.elements.links.find(e=>e.getAttribute("aria-current"));return o&&o.removeAttribute("aria-current"),t&&t.setAttribute("aria-current","page"),n&&(n.setAttribute("aria-expanded","true"),document.getElementById(n.getAttribute("aria-controls")).hidden=!1),t}openParentComponents(e){this.openParentComponent(e.closest(`.${this.classes.menu.listContainer}`))}closeToggleMenu(){window.innerWidth<=512&&this.elements.toggleMenu.setAttribute("aria-expanded",!1)}updateUrl(e){e.startsWith("iframe-")?history.pushState(null,e,e.replace("iframe-","")):e.startsWith("/iframe")?history.pushState(null,e,e.replace("/iframe","")):e===this.indexPath?history.pushState(null,e,document.querySelector("base").href):history.pushState(null,e,this.convertPathToMainPath(e))}onPageChanged({detail:e}){const t=this.setActiveStateInNav(e);t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t)),history.pushState(null,e,this.convertPathToMainPath(e))}onToggleMenuClick(e){g.toggleExpandedAttribute(e)}onComponentToggleClick(e){g.toggleExpandedAttribute(e)}onRootLinkClick(e){const t=e.closest("a"),n=t.getAttribute("href");t.setAttribute("aria-current","page"),this.elements.componentToggles.forEach(e=>{e.setAttribute("aria-expanded",e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0"))}),this.elements.links.forEach(e=>{e.removeAttribute("aria-current")}),this.elements.children.forEach(e=>{e.hidden=!e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0")}),this.updateIframe(n),this.closeToggleMenu(),this.updateUrl(n)}onLinkClick(e){const t=e.closest("a").getAttribute("href");this.setActiveStateInNav(t),this.updateIframe(t),this.closeToggleMenu(),this.updateUrl(t)}onPopState(e){const t=this.setActiveStateInNav(e);this.updateIframe(e),t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t))}addToggleMenuClickListener(){this.elements.toggleMenu&&(this.elements.toggleMenu.addEventListener("click",e=>{e.preventDefault(),this.onToggleMenuClick(e.target)}),this.elements.toggleMenu.addEventListener("keyup",e=>{23===e.keyCode&&(e.preventDefault(),this.onToggleMenuClick(e.target))}))}addComponentTogglesClickListener(){this.elements.componentToggles.forEach(e=>{e.addEventListener("click",e=>{e.preventDefault(),this.onComponentToggleClick(e.target)}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onComponentToggleClick(e.target))})})}addLinksClickListener(){this.elements.rootLink.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onRootLinkClick(e.target))}),this.elements.links.forEach(e=>{e.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onLinkClick(e.target))}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onLinkClick(e.target))})})}addPopStateLisener(){window.addEventListener("popstate",this.onPopState.bind(this))}addPageChangedListener(){window.addEventListener("pageChanged",this.onPageChanged.bind(this))}}class p extends g{constructor(){super(),this.paths={embedded:"component-",container:"show-"},this.indexPath="component-all-embedded.html",this.embeddedParam="-embedded"}onPopState(){let e;e=document.location.pathname.startsWith("/design-tokens")?document.location.pathname.replace("/","/iframe-"):"/"!==document.location.pathname?document.location.pathname.replace(this.paths.container,this.paths.embedded).replace(/\.html$/,`${this.embeddedParam}.html`).slice(1):`${this.paths.embedded}all-embedded.html`,super.onPopState(e)}}document.addEventListener("DOMContentLoaded",()=>new p);
+function e(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".GoTo");let n=!1;if(t){const s=t.dataset.urlPattern,a=t.querySelector(".GoTo-input"),r=t.querySelector("#goto-list");if(a&&r){const i=Array.from(r.querySelectorAll("option")).map(e=>e.value);a.addEventListener("input",({target:e})=>{const t=e.value;i.includes(t)&&(document.location.href=s.replace("{{component}}",t))}),window.addEventListener("keyup",s=>{const{path:r,originalTarget:i,target:c,key:l}=s;if(l){const s=r?r[0]:i||c,m=l.toLowerCase();((t,n)=>!e(t.tagName)&&"g"===n)(s,m)?o(t,a):n&&"escape"===m&&(d=a,t.classList.add("u-hiddenVisually"),d.value="",d.blur(),n=!1)}var d}),window.addEventListener("gotoTriggered",()=>o(t,a))}}function o(e,t){e.classList.remove("u-hiddenVisually"),t.focus(),n=!0}}),document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".Search-input"),n=document.querySelector(".Search-clear"),o=Array.from(document.querySelectorAll(".Nav-item")).map(e=>({node:e,listItem:e.closest(".Nav-entry"),label:e.textContent,lowercaseLabel:e.textContent.toLowerCase(),matchesQuery:!1,toggle:e.previousElementSibling||null,parentToggles:a(e),initiallyOpened:!!e.previousElementSibling&&"true"===e.previousElementSibling.getAttribute("aria-expanded")}));function s(){n.hidden=!0,o.forEach(e=>{e.matchesQuery&&(e.node.textContent=e.label),e.matchesQuery=!1,e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!e.initiallyOpened,e.toggle.setAttribute("aria-expanded",e.initiallyOpened?"true":"false"))}),document.querySelectorAll(".is-match, .is-no-match, .has-match, .has-no-match").forEach(e=>e.classList.remove("is-match","is-no-match","has-match","has-no-match"))}function a(e){const t=[];let n=e;for(;n.closest(".Nav-entry").parentNode.closest(".Nav-entry");){const e=n.closest(".Nav-entry").parentNode.closest(".Nav-entry").querySelector(".Nav-toggle");e&&t.push(e),n=n.closest(".Nav-entry").parentNode.closest(".Nav-entry")}return t}t&&(n&&n.addEventListener("click",function(){t.value="",s()}),t.addEventListener("input",function({target:e}){const t=e.value.toLowerCase();t.length>0?(a=t,n.hidden=!1,o.forEach(e=>{e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!0,e.toggle.setAttribute("aria-expanded","false")),e.parentToggles.forEach(e=>{e.parentNode.classList.remove("has-match")})}),o.forEach(e=>{e.matchesQuery=e.lowercaseLabel.includes(a),e.listItem.classList.toggle("is-match",e.matchesQuery),e.listItem.classList.toggle("is-no-match",!e.matchesQuery),e.matchesQuery?(e.node.innerHTML=e.label.replace(new RegExp(a,"g"),`<mark>${a}</mark>`),e.parentToggles.forEach(e=>{e.parentNode.classList.add("has-match"),e.parentNode.classList.remove("has-no-match"),document.getElementById(e.getAttribute("aria-controls")).hidden=!1,e.setAttribute("aria-expanded","true")})):e.node.textContent=e.label}),o.forEach(e=>{e.listItem.classList.contains("has-match")||e.listItem.classList.add("has-no-match")})):s();var a}),t.addEventListener("keyup",function({target:e,key:t}){"escape"===t.toLowerCase()&&(e.value="",e.blur(),s())}),window.addEventListener("keyup",n=>{const{path:o,originalTarget:s,target:a,key:r}=n;((t,n)=>!e(t.tagName)&&"f"===n)(o?o[0]:s||a,r)&&t.focus()}),window.addEventListener("searchTriggered",()=>{t.focus()}))});const t="miyagi-controls::",n="miyagi-controls-mode";function o(){return document.getElementById("controls-panel")}function s(){return document.getElementById("controls-fields")}function a(){const e=o();e&&(e.hidden=!0,s().innerHTML="")}function r(e,t,n){const o=new URL(e,window.location.origin);return o.searchParams.set(`overrides[${t}]`,String(n)),o.pathname+o.search}function i(e){const t=document.getElementById("iframe"),n=document.querySelector(".FrameWrapper");t&&n&&(t.remove(),t.src=e,n.appendChild(t),l(e))}function c(e,t){const n=s();n.innerHTML="";const a=new URL(t,window.location.origin),c={};a.searchParams.forEach((e,t)=>{const n=t.match(/^overrides\[(.+)\]$/);n&&(c[n[1]]=e)}),e.forEach(({property:e,type:o,values:s,current:a})=>{const l=void 0!==c[e]?c[e]:a,d=document.createElement("div");d.className="Controls-field";const m=document.createElement("label");m.className="Controls-label";const h=document.createElement("span");let u;h.className="Controls-labelText",h.textContent=e,m.appendChild(h),"enum"===o?(u=document.createElement("select"),u.className="Controls-select",s.forEach(e=>{const t=document.createElement("option");t.value=e,t.textContent=e,e===l&&(t.selected=!0),u.appendChild(t)}),u.addEventListener("change",()=>{i(r(t,e,u.value))})):"boolean"===o&&(u=document.createElement("input"),u.type="checkbox",u.className="Controls-checkbox",u.checked="string"==typeof l?"true"===l:Boolean(l),u.addEventListener("change",()=>{i(r(t,e,u.checked))})),u&&(m.appendChild(u),d.appendChild(m),n.appendChild(d))}),function(){const e=o();e&&(e.hidden=!1)}()}async function l(e){const n=new URL(e,window.location.origin),o=n.searchParams.get("file"),s=n.searchParams.get("variation");if(!o||!s)return void a();const r=`${t}${o}::${s}`;let i=null;try{i=JSON.parse(sessionStorage.getItem(r)??"null")}catch{sessionStorage.removeItem(r)}if(!i)try{const e=await fetch(`/api/component-controls?file=${encodeURIComponent(o)}&variation=${encodeURIComponent(s)}`);i=await e.json(),sessionStorage.setItem(r,JSON.stringify(i))}catch{return void a()}i.controls?.length?c(i.controls,e):a()}window.addEventListener("message",e=>{"miyagi:invalidate-cache"===e.data?.type&&function(e){for(const n of Object.keys(sessionStorage)){if(!n.startsWith(t))continue;if(!e||0===e.length){sessionStorage.removeItem(n);continue}const o=n.slice(17).split("::")[0];e.some(e=>e.includes(o))&&sessionStorage.removeItem(n)}}(e.data.paths??[])}),document.addEventListener("DOMContentLoaded",()=>{!function(){const e=o();if(!e)return;const t=localStorage.getItem(n)??"docked";e.setAttribute("data-mode",t);const s=document.getElementById("controls-mode-toggle");s&&s.addEventListener("click",()=>{const t="docked"===e.getAttribute("data-mode")?"floating":"docked";e.setAttribute("data-mode",t),localStorage.setItem(n,t)})}();const e=document.getElementById("iframe");if(e){const t=e.getAttribute("src");t&&l(t)}});class d{constructor(e){this.form=e,this.inputs=Array.from(this.form.querySelectorAll('[type="radio"], [type="checkbox"]')),this.options=this.inputs.map(e=>e.value),this.name=this.inputs[0].name,this.cookieName=`miyagi_${document.title.replaceAll(" ","-")}_${this.name}`,this.cookieValue=this.#e(this.cookieName),this.inputs.forEach(e=>{e.addEventListener("change",this.onThemeChange.bind(this))}),this.renderSwitcher()}onThemeChange({target:e}){const{value:t}=e;this.saveTheme(t),this.renderTheme(t)}saveTheme(e){document.cookie=`${this.cookieName}=${e};`}renderSwitcher(){const e=this.form.querySelector(`[value="${this.cookieValue}"]`);e&&(e.checked=!0)}#e(e){return document.cookie.split("; ").reduce((t,n)=>{const o=n.split("=");return o[0]===e?decodeURIComponent(o[1]):t},"")}}class m extends d{constructor(e){super(e),this.logoWrapper=document.querySelector(".Title-logo"),this.logoWrapper&&(this.logoImage=this.logoWrapper.querySelector("img")),window.frames.iframe&&(this.cookieValue&&this.render(this.cookieValue),window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)}))}onThemeChange({target:e}){super.onThemeChange({target:e}),this.render(e.value)}renderTheme(e){this.options.forEach(e=>{window.frames.iframe.document.documentElement&&window.frames.iframe.document.documentElement.classList.remove(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.remove(`theme-${e}`)})}),window.frames.iframe.document.documentElement.classList.add(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.add(`theme-${e}`)})}render(e){this.options.forEach(e=>{document.documentElement.classList.remove(`${this.name}-${e}`)}),document.documentElement.classList.add(`${this.name}-${e}`),this.logoWrapper&&("auto"===e?this.options.forEach(e=>{if("auto"===e)return;const t=document.createElement("source");t.srcset=this.logoImage.dataset[e],t.media=`(prefers-color-scheme: ${e})`,this.logoWrapper.prepend(t)}):(this.logoWrapper.querySelectorAll("source").forEach(e=>e.remove()),this.logoImage.src=this.logoImage.dataset[e]))}}class h extends d{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}renderTheme(e){Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.setAttribute("dir",e)})}}class u extends d{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}onThemeChange({target:e}){const t=e.checked?"dev":"presentation";this.saveTheme(t),this.renderTheme(t)}renderSwitcher(){this.cookieValue&&(this.form.querySelector('[type="checkbox"]').checked="dev"==this.cookieValue)}renderTheme(e){window.frames.iframe.document.documentElement.dataset.mode=e}}class g{constructor(){this.classes={content:"Content",iframe:"Frame",frameWrapper:"FrameWrapper",toggleMenu:"Menu-toggleMobileMenu",menu:{rootLink:"Title-link",list:"Nav-list",children:"Nav-children",link:"Nav-item--link",variant:"Nav-variant",listItem:"Nav-entry",toggleComponent:"Nav-toggle"}},this.elements={rootLink:document.querySelector(`.${this.classes.menu.rootLink}`),content:document.querySelector(`.${this.classes.content}`),frameWrapper:document.querySelector(`.${this.classes.frameWrapper}`),iframe:document.querySelector(`.${this.classes.iframe}`),toggleMenu:document.querySelector(`.${this.classes.toggleMenu}`),children:Array.from(document.querySelectorAll(`.${this.classes.menu.children}`)),links:Array.from(document.querySelectorAll(`.${this.classes.menu.link}, .${this.classes.menu.variant}`)),componentToggles:Array.from(document.querySelectorAll(`.${this.classes.menu.toggleComponent}`))},this.addToggleMenuClickListener(),this.addComponentTogglesClickListener(),this.addLinksClickListener(),this.addPopStateLisener(),this.addPageChangedListener(),new m(document.querySelector(".js-ThemeSwitcher")),new h(document.querySelector(".js-TextDirectionSwitcher")),new u(document.querySelector(".js-DevelopmentModeSwitcher"))}static toggleExpandedAttribute(e){const t="false"===e.getAttribute("aria-expanded");e.setAttribute("aria-expanded",t?"true":"false"),document.getElementById(e.getAttribute("aria-controls")).hidden=!t}updateIframe(e){this.elements.iframe.remove(),this.elements.iframe.src=e,this.elements.frameWrapper.appendChild(this.elements.iframe),l(e)}convertPathToMainPath(e){return e.replace(this.paths.embedded,this.paths.container).replace(this.embeddedParam,"")}closeOtherOpenedComponents(e){this.elements.componentToggles.forEach(t=>{"true"===t.getAttribute("aria-expanded")&&(t.closest(`.${this.classes.menu.listItem}`).contains(e)||t.setAttribute("aria-expanded",!1))})}openParentComponent(e){if(e){const t=this.elements.componentToggles.find(t=>t.getAttribute("aria-controls")===e.id);t&&(t.setAttribute("aria-expanded",!0),this.openParentComponent(t.closest(`.${this.classes.menu.listContainer}`)))}}setActiveStateInNav(e){var t=this.elements.links.find(t=>e==t.getAttribute("href")||t.getAttribute("href")==e.replace(this.paths.container,this.paths.embedded));if(t){const e=t.previousElementSibling;var n=e&&e.classList.contains(this.classes.menu.toggleComponent)?e:null}const o=this.elements.links.find(e=>e.getAttribute("aria-current"));return o&&o.removeAttribute("aria-current"),t&&t.setAttribute("aria-current","page"),n&&(n.setAttribute("aria-expanded","true"),document.getElementById(n.getAttribute("aria-controls")).hidden=!1),t}openParentComponents(e){this.openParentComponent(e.closest(`.${this.classes.menu.listContainer}`))}closeToggleMenu(){window.innerWidth<=512&&this.elements.toggleMenu.setAttribute("aria-expanded",!1)}updateUrl(e){e.startsWith("iframe-")?history.pushState(null,e,e.replace("iframe-","")):e.startsWith("/iframe")?history.pushState(null,e,e.replace("/iframe","")):e===this.indexPath?history.pushState(null,e,document.querySelector("base").href):history.pushState(null,e,this.convertPathToMainPath(e))}onPageChanged({detail:e}){const t=this.setActiveStateInNav(e);t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t)),history.pushState(null,e,this.convertPathToMainPath(e))}onToggleMenuClick(e){g.toggleExpandedAttribute(e)}onComponentToggleClick(e){g.toggleExpandedAttribute(e)}onRootLinkClick(e){const t=e.closest("a"),n=t.getAttribute("href");t.setAttribute("aria-current","page"),this.elements.componentToggles.forEach(e=>{e.setAttribute("aria-expanded",e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0"))}),this.elements.links.forEach(e=>{e.removeAttribute("aria-current")}),this.elements.children.forEach(e=>{e.hidden=!e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0")}),this.updateIframe(n),this.closeToggleMenu(),this.updateUrl(n)}onLinkClick(e){const t=e.closest("a").getAttribute("href");this.setActiveStateInNav(t),this.updateIframe(t),this.closeToggleMenu(),this.updateUrl(t)}onPopState(e){const t=this.setActiveStateInNav(e);this.updateIframe(e),t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t))}addToggleMenuClickListener(){this.elements.toggleMenu&&(this.elements.toggleMenu.addEventListener("click",e=>{e.preventDefault(),this.onToggleMenuClick(e.target)}),this.elements.toggleMenu.addEventListener("keyup",e=>{23===e.keyCode&&(e.preventDefault(),this.onToggleMenuClick(e.target))}))}addComponentTogglesClickListener(){this.elements.componentToggles.forEach(e=>{e.addEventListener("click",e=>{e.preventDefault(),this.onComponentToggleClick(e.target)}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onComponentToggleClick(e.target))})})}addLinksClickListener(){this.elements.rootLink.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onRootLinkClick(e.target))}),this.elements.links.forEach(e=>{e.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onLinkClick(e.target))}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onLinkClick(e.target))})})}addPopStateLisener(){window.addEventListener("popstate",this.onPopState.bind(this))}addPageChangedListener(){window.addEventListener("pageChanged",this.onPageChanged.bind(this))}}class p extends g{constructor(){super(),this.paths={embedded:"component-",container:"show-"},this.indexPath="component-all-embedded.html",this.embeddedParam="-embedded"}onPopState(){let e;e=document.location.pathname.startsWith("/design-tokens")?document.location.pathname.replace("/","/iframe-"):"/"!==document.location.pathname?document.location.pathname.replace(this.paths.container,this.paths.embedded).replace(/\.html$/,`${this.embeddedParam}.html`).slice(1):`${this.paths.embedded}all-embedded.html`,super.onPopState(e)}}document.addEventListener("DOMContentLoaded",()=>new p);

package/dist/js/main.js

@@ -1 +1 @@
-function e(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".GoTo");let n=!1;if(t){const s=t.dataset.urlPattern,a=t.querySelector(".GoTo-input"),r=t.querySelector("#goto-list");if(a&&r){const i=Array.from(r.querySelectorAll("option")).map(e=>e.value);a.addEventListener("input",({target:e})=>{const t=e.value;i.includes(t)&&(document.location.href=s.replace("{{component}}",t))}),window.addEventListener("keyup",s=>{const{path:r,originalTarget:i,target:c,key:l}=s;if(l){const s=r?r[0]:i||c,m=l.toLowerCase();((t,n)=>!e(t.tagName)&&"g"===n)(s,m)?o(t,a):n&&"escape"===m&&(d=a,t.classList.add("u-hiddenVisually"),d.value="",d.blur(),n=!1)}var d}),window.addEventListener("gotoTriggered",()=>o(t,a))}}function o(e,t){e.classList.remove("u-hiddenVisually"),t.focus(),n=!0}}),document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".Search-input"),n=document.querySelector(".Search-clear"),o=Array.from(document.querySelectorAll(".Nav-item")).map(e=>({node:e,listItem:e.closest(".Nav-entry"),label:e.textContent,lowercaseLabel:e.textContent.toLowerCase(),matchesQuery:!1,toggle:e.previousElementSibling||null,parentToggles:a(e),initiallyOpened:!!e.previousElementSibling&&"true"===e.previousElementSibling.getAttribute("aria-expanded")}));function s(){n.hidden=!0,o.forEach(e=>{e.matchesQuery&&(e.node.textContent=e.label),e.matchesQuery=!1,e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!e.initiallyOpened,e.toggle.setAttribute("aria-expanded",e.initiallyOpened?"true":"false"))}),document.querySelectorAll(".is-match, .is-no-match, .has-match, .has-no-match").forEach(e=>e.classList.remove("is-match","is-no-match","has-match","has-no-match"))}function a(e){const t=[];let n=e;for(;n.closest(".Nav-entry").parentNode.closest(".Nav-entry");){const e=n.closest(".Nav-entry").parentNode.closest(".Nav-entry").querySelector(".Nav-toggle");e&&t.push(e),n=n.closest(".Nav-entry").parentNode.closest(".Nav-entry")}return t}t&&(n&&n.addEventListener("click",function(){t.value="",s()}),t.addEventListener("input",function({target:e}){const t=e.value.toLowerCase();t.length>0?(a=t,n.hidden=!1,o.forEach(e=>{e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!0,e.toggle.setAttribute("aria-expanded","false")),e.parentToggles.forEach(e=>{e.parentNode.classList.remove("has-match")})}),o.forEach(e=>{e.matchesQuery=e.lowercaseLabel.includes(a),e.listItem.classList.toggle("is-match",e.matchesQuery),e.listItem.classList.toggle("is-no-match",!e.matchesQuery),e.matchesQuery?(e.node.innerHTML=e.label.replace(new RegExp(a,"g"),`<mark>${a}</mark>`),e.parentToggles.forEach(e=>{e.parentNode.classList.add("has-match"),e.parentNode.classList.remove("has-no-match"),document.getElementById(e.getAttribute("aria-controls")).hidden=!1,e.setAttribute("aria-expanded","true")})):e.node.textContent=e.label}),o.forEach(e=>{e.listItem.classList.contains("has-match")||e.listItem.classList.add("has-no-match")})):s();var a}),t.addEventListener("keyup",function({target:e,key:t}){"escape"===t.toLowerCase()&&(e.value="",e.blur(),s())}),window.addEventListener("keyup",n=>{const{path:o,originalTarget:s,target:a,key:r}=n;((t,n)=>!e(t.tagName)&&"f"===n)(o?o[0]:s||a,r)&&t.focus()}),window.addEventListener("searchTriggered",()=>{t.focus()}))});const t="miyagi-controls::",n="miyagi-controls-mode";function o(){return document.getElementById("controls-panel")}function s(){return document.getElementById("controls-fields")}function a(){const e=o();e&&(e.hidden=!0,s().innerHTML="")}function r(e,t,n){const o=new URL(e,window.location.origin);return o.searchParams.set(`overrides[${t}]`,String(n)),o.pathname+o.search}function i(e){const t=document.getElementById("iframe"),n=document.querySelector(".FrameWrapper");t&&n&&(t.remove(),t.src=e,n.appendChild(t),l(e))}function c(e,t){const n=s();n.innerHTML="";const a=new URL(t,window.location.origin),c={};a.searchParams.forEach((e,t)=>{const n=t.match(/^overrides\[(.+)\]$/);n&&(c[n[1]]=e)}),e.forEach(({property:e,type:o,values:s,current:a})=>{const l=void 0!==c[e]?c[e]:a,d=document.createElement("div");d.className="Controls-field";const m=document.createElement("label");m.className="Controls-label";const h=document.createElement("span");let u;h.className="Controls-labelText",h.textContent=e,m.appendChild(h),"enum"===o?(u=document.createElement("select"),u.className="Controls-select",s.forEach(e=>{const t=document.createElement("option");t.value=e,t.textContent=e,e==l&&(t.selected=!0),u.appendChild(t)}),u.addEventListener("change",()=>{i(r(t,e,u.value))})):"boolean"===o&&(u=document.createElement("input"),u.type="checkbox",u.className="Controls-checkbox",u.checked="string"==typeof l?"true"===l:Boolean(l),u.addEventListener("change",()=>{i(r(t,e,u.checked))})),u&&(m.appendChild(u),d.appendChild(m),n.appendChild(d))}),function(){const e=o();e&&(e.hidden=!1)}()}async function l(e){const n=new URL(e,window.location.origin),o=n.searchParams.get("file"),s=n.searchParams.get("variation");if(!o||!s)return void a();const r=`${t}${o}::${s}`;let i=null;try{i=JSON.parse(sessionStorage.getItem(r)??"null")}catch{sessionStorage.removeItem(r)}if(!i)try{const e=await fetch(`/api/component-controls?file=${encodeURIComponent(o)}&variation=${encodeURIComponent(s)}`);i=await e.json(),sessionStorage.setItem(r,JSON.stringify(i))}catch{return void a()}i.controls?.length?c(i.controls,e):a()}window.addEventListener("message",e=>{"miyagi:invalidate-cache"===e.data?.type&&function(e){for(const n of Object.keys(sessionStorage)){if(!n.startsWith(t))continue;if(!e||0===e.length){sessionStorage.removeItem(n);continue}const o=n.slice(17).split("::")[0];e.some(e=>e.includes(o))&&sessionStorage.removeItem(n)}}(e.data.paths??[])}),document.addEventListener("DOMContentLoaded",()=>{!function(){const e=o();if(!e)return;const t=localStorage.getItem(n)??"docked";e.setAttribute("data-mode",t);const s=document.getElementById("controls-mode-toggle");s&&s.addEventListener("click",()=>{const t="docked"===e.getAttribute("data-mode")?"floating":"docked";e.setAttribute("data-mode",t),localStorage.setItem(n,t)})}();const e=document.getElementById("iframe");if(e){const t=e.getAttribute("src");t&&l(t)}});class d{constructor(e){this.form=e,this.inputs=Array.from(this.form.querySelectorAll('[type="radio"], [type="checkbox"]')),this.options=this.inputs.map(e=>e.value),this.name=this.inputs[0].name,this.cookieName=`miyagi_${document.title.replaceAll(" ","-")}_${this.name}`,this.cookieValue=this.#e(this.cookieName),this.inputs.forEach(e=>{e.addEventListener("change",this.onThemeChange.bind(this))}),this.renderSwitcher()}onThemeChange({target:e}){const{value:t}=e;this.saveTheme(t),this.renderTheme(t)}saveTheme(e){document.cookie=`${this.cookieName}=${e};`}renderSwitcher(){const e=this.form.querySelector(`[value="${this.cookieValue}"]`);e&&(e.checked=!0)}#e(e){return document.cookie.split("; ").reduce((t,n)=>{const o=n.split("=");return o[0]===e?decodeURIComponent(o[1]):t},"")}}class m extends d{constructor(e){super(e),this.logoWrapper=document.querySelector(".Title-logo"),this.logoWrapper&&(this.logoImage=this.logoWrapper.querySelector("img")),window.frames.iframe&&(this.cookieValue&&this.render(this.cookieValue),window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)}))}onThemeChange({target:e}){super.onThemeChange({target:e}),this.render(e.value)}renderTheme(e){this.options.forEach(e=>{window.frames.iframe.document.documentElement&&window.frames.iframe.document.documentElement.classList.remove(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.remove(`theme-${e}`)})}),window.frames.iframe.document.documentElement.classList.add(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.add(`theme-${e}`)})}render(e){this.options.forEach(e=>{document.documentElement.classList.remove(`${this.name}-${e}`)}),document.documentElement.classList.add(`${this.name}-${e}`),this.logoWrapper&&("auto"===e?this.options.forEach(e=>{if("auto"===e)return;const t=document.createElement("source");t.srcset=this.logoImage.dataset[e],t.media=`(prefers-color-scheme: ${e})`,this.logoWrapper.prepend(t)}):(this.logoWrapper.querySelectorAll("source").forEach(e=>e.remove()),this.logoImage.src=this.logoImage.dataset[e]))}}class h extends d{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}renderTheme(e){Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.setAttribute("dir",e)})}}class u extends d{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}onThemeChange({target:e}){const t=e.checked?"dev":"presentation";this.saveTheme(t),this.renderTheme(t)}renderSwitcher(){this.cookieValue&&(this.form.querySelector('[type="checkbox"]').checked="dev"==this.cookieValue)}renderTheme(e){window.frames.iframe.document.documentElement.dataset.mode=e}}class g{constructor(){this.classes={content:"Content",iframe:"Frame",frameWrapper:"FrameWrapper",toggleMenu:"Menu-toggleMobileMenu",menu:{rootLink:"Title-link",list:"Nav-list",children:"Nav-children",link:"Nav-item--link",variant:"Nav-variant",listItem:"Nav-entry",toggleComponent:"Nav-toggle"}},this.elements={rootLink:document.querySelector(`.${this.classes.menu.rootLink}`),content:document.querySelector(`.${this.classes.content}`),frameWrapper:document.querySelector(`.${this.classes.frameWrapper}`),iframe:document.querySelector(`.${this.classes.iframe}`),toggleMenu:document.querySelector(`.${this.classes.toggleMenu}`),children:Array.from(document.querySelectorAll(`.${this.classes.menu.children}`)),links:Array.from(document.querySelectorAll(`.${this.classes.menu.link}, .${this.classes.menu.variant}`)),componentToggles:Array.from(document.querySelectorAll(`.${this.classes.menu.toggleComponent}`))},this.addToggleMenuClickListener(),this.addComponentTogglesClickListener(),this.addLinksClickListener(),this.addPopStateLisener(),this.addPageChangedListener(),new m(document.querySelector(".js-ThemeSwitcher")),new h(document.querySelector(".js-TextDirectionSwitcher")),new u(document.querySelector(".js-DevelopmentModeSwitcher"))}static toggleExpandedAttribute(e){const t="false"===e.getAttribute("aria-expanded");e.setAttribute("aria-expanded",t?"true":"false"),document.getElementById(e.getAttribute("aria-controls")).hidden=!t}updateIframe(e){this.elements.iframe.remove(),this.elements.iframe.src=e,this.elements.frameWrapper.appendChild(this.elements.iframe),l(e)}convertPathToMainPath(e){return e.replace(this.paths.embedded,this.paths.container).replace(this.embeddedParam,"")}closeOtherOpenedComponents(e){this.elements.componentToggles.forEach(t=>{"true"===t.getAttribute("aria-expanded")&&(t.closest(`.${this.classes.menu.listItem}`).contains(e)||t.setAttribute("aria-expanded",!1))})}openParentComponent(e){if(e){const t=this.elements.componentToggles.find(t=>t.getAttribute("aria-controls")===e.id);t&&(t.setAttribute("aria-expanded",!0),this.openParentComponent(t.closest(`.${this.classes.menu.listContainer}`)))}}setActiveStateInNav(e){var t=this.elements.links.find(t=>e==t.getAttribute("href")||t.getAttribute("href")==e.replace(this.paths.container,this.paths.embedded));if(t){const e=t.previousElementSibling;var n=e&&e.classList.contains(this.classes.menu.toggleComponent)?e:null}const o=this.elements.links.find(e=>e.getAttribute("aria-current"));return o&&o.removeAttribute("aria-current"),t&&t.setAttribute("aria-current","page"),n&&(n.setAttribute("aria-expanded","true"),document.getElementById(n.getAttribute("aria-controls")).hidden=!1),t}openParentComponents(e){this.openParentComponent(e.closest(`.${this.classes.menu.listContainer}`))}closeToggleMenu(){window.innerWidth<=512&&this.elements.toggleMenu.setAttribute("aria-expanded",!1)}updateUrl(e){e.startsWith("iframe-")?history.pushState(null,e,e.replace("iframe-","")):e.startsWith("/iframe")?history.pushState(null,e,e.replace("/iframe","")):e===this.indexPath?history.pushState(null,e,document.querySelector("base").href):history.pushState(null,e,this.convertPathToMainPath(e))}onPageChanged({detail:e}){const t=this.setActiveStateInNav(e);t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t)),history.pushState(null,e,this.convertPathToMainPath(e))}onToggleMenuClick(e){g.toggleExpandedAttribute(e)}onComponentToggleClick(e){g.toggleExpandedAttribute(e)}onRootLinkClick(e){const t=e.closest("a"),n=t.getAttribute("href");t.setAttribute("aria-current","page"),this.elements.componentToggles.forEach(e=>{e.setAttribute("aria-expanded",e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0"))}),this.elements.links.forEach(e=>{e.removeAttribute("aria-current")}),this.elements.children.forEach(e=>{e.hidden=!e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0")}),this.updateIframe(n),this.closeToggleMenu(),this.updateUrl(n)}onLinkClick(e){const t=e.closest("a").getAttribute("href");this.setActiveStateInNav(t),this.updateIframe(t),this.closeToggleMenu(),this.updateUrl(t)}onPopState(e){const t=this.setActiveStateInNav(e);this.updateIframe(e),t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t))}addToggleMenuClickListener(){this.elements.toggleMenu&&(this.elements.toggleMenu.addEventListener("click",e=>{e.preventDefault(),this.onToggleMenuClick(e.target)}),this.elements.toggleMenu.addEventListener("keyup",e=>{23===e.keyCode&&(e.preventDefault(),this.onToggleMenuClick(e.target))}))}addComponentTogglesClickListener(){this.elements.componentToggles.forEach(e=>{e.addEventListener("click",e=>{e.preventDefault(),this.onComponentToggleClick(e.target)}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onComponentToggleClick(e.target))})})}addLinksClickListener(){this.elements.rootLink.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onRootLinkClick(e.target))}),this.elements.links.forEach(e=>{e.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onLinkClick(e.target))}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onLinkClick(e.target))})})}addPopStateLisener(){window.addEventListener("popstate",this.onPopState.bind(this))}addPageChangedListener(){window.addEventListener("pageChanged",this.onPageChanged.bind(this))}}class p extends g{constructor(){super(),this.paths={embedded:"component?",container:"show?"},this.embeddedParam="&embedded=true",this.indexPath=`/${this.paths.embedded}file=all${this.embeddedParam}`}onPopState(){let e;document.location.pathname.startsWith("/design-tokens")?e=`/iframe${document.location.pathname}`:""!==document.location.search?(e=`${document.location.href.replace(this.paths.container,this.paths.embedded)}${this.embeddedParam}`,e=e.replace(document.location.origin,"")):(e=this.indexPath,e=e.replace(document.location.origin,"")),super.onPopState(e)}}document.addEventListener("DOMContentLoaded",()=>new p);
+function e(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".GoTo");let n=!1;if(t){const s=t.dataset.urlPattern,a=t.querySelector(".GoTo-input"),r=t.querySelector("#goto-list");if(a&&r){const i=Array.from(r.querySelectorAll("option")).map(e=>e.value);a.addEventListener("input",({target:e})=>{const t=e.value;i.includes(t)&&(document.location.href=s.replace("{{component}}",t))}),window.addEventListener("keyup",s=>{const{path:r,originalTarget:i,target:c,key:l}=s;if(l){const s=r?r[0]:i||c,m=l.toLowerCase();((t,n)=>!e(t.tagName)&&"g"===n)(s,m)?o(t,a):n&&"escape"===m&&(d=a,t.classList.add("u-hiddenVisually"),d.value="",d.blur(),n=!1)}var d}),window.addEventListener("gotoTriggered",()=>o(t,a))}}function o(e,t){e.classList.remove("u-hiddenVisually"),t.focus(),n=!0}}),document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".Search-input"),n=document.querySelector(".Search-clear"),o=Array.from(document.querySelectorAll(".Nav-item")).map(e=>({node:e,listItem:e.closest(".Nav-entry"),label:e.textContent,lowercaseLabel:e.textContent.toLowerCase(),matchesQuery:!1,toggle:e.previousElementSibling||null,parentToggles:a(e),initiallyOpened:!!e.previousElementSibling&&"true"===e.previousElementSibling.getAttribute("aria-expanded")}));function s(){n.hidden=!0,o.forEach(e=>{e.matchesQuery&&(e.node.textContent=e.label),e.matchesQuery=!1,e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!e.initiallyOpened,e.toggle.setAttribute("aria-expanded",e.initiallyOpened?"true":"false"))}),document.querySelectorAll(".is-match, .is-no-match, .has-match, .has-no-match").forEach(e=>e.classList.remove("is-match","is-no-match","has-match","has-no-match"))}function a(e){const t=[];let n=e;for(;n.closest(".Nav-entry").parentNode.closest(".Nav-entry");){const e=n.closest(".Nav-entry").parentNode.closest(".Nav-entry").querySelector(".Nav-toggle");e&&t.push(e),n=n.closest(".Nav-entry").parentNode.closest(".Nav-entry")}return t}t&&(n&&n.addEventListener("click",function(){t.value="",s()}),t.addEventListener("input",function({target:e}){const t=e.value.toLowerCase();t.length>0?(a=t,n.hidden=!1,o.forEach(e=>{e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!0,e.toggle.setAttribute("aria-expanded","false")),e.parentToggles.forEach(e=>{e.parentNode.classList.remove("has-match")})}),o.forEach(e=>{e.matchesQuery=e.lowercaseLabel.includes(a),e.listItem.classList.toggle("is-match",e.matchesQuery),e.listItem.classList.toggle("is-no-match",!e.matchesQuery),e.matchesQuery?(e.node.innerHTML=e.label.replace(new RegExp(a,"g"),`<mark>${a}</mark>`),e.parentToggles.forEach(e=>{e.parentNode.classList.add("has-match"),e.parentNode.classList.remove("has-no-match"),document.getElementById(e.getAttribute("aria-controls")).hidden=!1,e.setAttribute("aria-expanded","true")})):e.node.textContent=e.label}),o.forEach(e=>{e.listItem.classList.contains("has-match")||e.listItem.classList.add("has-no-match")})):s();var a}),t.addEventListener("keyup",function({target:e,key:t}){"escape"===t.toLowerCase()&&(e.value="",e.blur(),s())}),window.addEventListener("keyup",n=>{const{path:o,originalTarget:s,target:a,key:r}=n;((t,n)=>!e(t.tagName)&&"f"===n)(o?o[0]:s||a,r)&&t.focus()}),window.addEventListener("searchTriggered",()=>{t.focus()}))});const t="miyagi-controls::",n="miyagi-controls-mode";function o(){return document.getElementById("controls-panel")}function s(){return document.getElementById("controls-fields")}function a(){const e=o();e&&(e.hidden=!0,s().innerHTML="")}function r(e,t,n){const o=new URL(e,window.location.origin);return o.searchParams.set(`overrides[${t}]`,String(n)),o.pathname+o.search}function i(e){const t=document.getElementById("iframe"),n=document.querySelector(".FrameWrapper");t&&n&&(t.remove(),t.src=e,n.appendChild(t),l(e))}function c(e,t){const n=s();n.innerHTML="";const a=new URL(t,window.location.origin),c={};a.searchParams.forEach((e,t)=>{const n=t.match(/^overrides\[(.+)\]$/);n&&(c[n[1]]=e)}),e.forEach(({property:e,type:o,values:s,current:a})=>{const l=void 0!==c[e]?c[e]:a,d=document.createElement("div");d.className="Controls-field";const m=document.createElement("label");m.className="Controls-label";const h=document.createElement("span");let u;h.className="Controls-labelText",h.textContent=e,m.appendChild(h),"enum"===o?(u=document.createElement("select"),u.className="Controls-select",s.forEach(e=>{const t=document.createElement("option");t.value=e,t.textContent=e,e===l&&(t.selected=!0),u.appendChild(t)}),u.addEventListener("change",()=>{i(r(t,e,u.value))})):"boolean"===o&&(u=document.createElement("input"),u.type="checkbox",u.className="Controls-checkbox",u.checked="string"==typeof l?"true"===l:Boolean(l),u.addEventListener("change",()=>{i(r(t,e,u.checked))})),u&&(m.appendChild(u),d.appendChild(m),n.appendChild(d))}),function(){const e=o();e&&(e.hidden=!1)}()}async function l(e){const n=new URL(e,window.location.origin),o=n.searchParams.get("file"),s=n.searchParams.get("variation");if(!o||!s)return void a();const r=`${t}${o}::${s}`;let i=null;try{i=JSON.parse(sessionStorage.getItem(r)??"null")}catch{sessionStorage.removeItem(r)}if(!i)try{const e=await fetch(`/api/component-controls?file=${encodeURIComponent(o)}&variation=${encodeURIComponent(s)}`);i=await e.json(),sessionStorage.setItem(r,JSON.stringify(i))}catch{return void a()}i.controls?.length?c(i.controls,e):a()}window.addEventListener("message",e=>{"miyagi:invalidate-cache"===e.data?.type&&function(e){for(const n of Object.keys(sessionStorage)){if(!n.startsWith(t))continue;if(!e||0===e.length){sessionStorage.removeItem(n);continue}const o=n.slice(17).split("::")[0];e.some(e=>e.includes(o))&&sessionStorage.removeItem(n)}}(e.data.paths??[])}),document.addEventListener("DOMContentLoaded",()=>{!function(){const e=o();if(!e)return;const t=localStorage.getItem(n)??"docked";e.setAttribute("data-mode",t);const s=document.getElementById("controls-mode-toggle");s&&s.addEventListener("click",()=>{const t="docked"===e.getAttribute("data-mode")?"floating":"docked";e.setAttribute("data-mode",t),localStorage.setItem(n,t)})}();const e=document.getElementById("iframe");if(e){const t=e.getAttribute("src");t&&l(t)}});class d{constructor(e){this.form=e,this.inputs=Array.from(this.form.querySelectorAll('[type="radio"], [type="checkbox"]')),this.options=this.inputs.map(e=>e.value),this.name=this.inputs[0].name,this.cookieName=`miyagi_${document.title.replaceAll(" ","-")}_${this.name}`,this.cookieValue=this.#e(this.cookieName),this.inputs.forEach(e=>{e.addEventListener("change",this.onThemeChange.bind(this))}),this.renderSwitcher()}onThemeChange({target:e}){const{value:t}=e;this.saveTheme(t),this.renderTheme(t)}saveTheme(e){document.cookie=`${this.cookieName}=${e};`}renderSwitcher(){const e=this.form.querySelector(`[value="${this.cookieValue}"]`);e&&(e.checked=!0)}#e(e){return document.cookie.split("; ").reduce((t,n)=>{const o=n.split("=");return o[0]===e?decodeURIComponent(o[1]):t},"")}}class m extends d{constructor(e){super(e),this.logoWrapper=document.querySelector(".Title-logo"),this.logoWrapper&&(this.logoImage=this.logoWrapper.querySelector("img")),window.frames.iframe&&(this.cookieValue&&this.render(this.cookieValue),window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)}))}onThemeChange({target:e}){super.onThemeChange({target:e}),this.render(e.value)}renderTheme(e){this.options.forEach(e=>{window.frames.iframe.document.documentElement&&window.frames.iframe.document.documentElement.classList.remove(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.remove(`theme-${e}`)})}),window.frames.iframe.document.documentElement.classList.add(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.add(`theme-${e}`)})}render(e){this.options.forEach(e=>{document.documentElement.classList.remove(`${this.name}-${e}`)}),document.documentElement.classList.add(`${this.name}-${e}`),this.logoWrapper&&("auto"===e?this.options.forEach(e=>{if("auto"===e)return;const t=document.createElement("source");t.srcset=this.logoImage.dataset[e],t.media=`(prefers-color-scheme: ${e})`,this.logoWrapper.prepend(t)}):(this.logoWrapper.querySelectorAll("source").forEach(e=>e.remove()),this.logoImage.src=this.logoImage.dataset[e]))}}class h extends d{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}renderTheme(e){Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.setAttribute("dir",e)})}}class u extends d{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}onThemeChange({target:e}){const t=e.checked?"dev":"presentation";this.saveTheme(t),this.renderTheme(t)}renderSwitcher(){this.cookieValue&&(this.form.querySelector('[type="checkbox"]').checked="dev"==this.cookieValue)}renderTheme(e){window.frames.iframe.document.documentElement.dataset.mode=e}}class g{constructor(){this.classes={content:"Content",iframe:"Frame",frameWrapper:"FrameWrapper",toggleMenu:"Menu-toggleMobileMenu",menu:{rootLink:"Title-link",list:"Nav-list",children:"Nav-children",link:"Nav-item--link",variant:"Nav-variant",listItem:"Nav-entry",toggleComponent:"Nav-toggle"}},this.elements={rootLink:document.querySelector(`.${this.classes.menu.rootLink}`),content:document.querySelector(`.${this.classes.content}`),frameWrapper:document.querySelector(`.${this.classes.frameWrapper}`),iframe:document.querySelector(`.${this.classes.iframe}`),toggleMenu:document.querySelector(`.${this.classes.toggleMenu}`),children:Array.from(document.querySelectorAll(`.${this.classes.menu.children}`)),links:Array.from(document.querySelectorAll(`.${this.classes.menu.link}, .${this.classes.menu.variant}`)),componentToggles:Array.from(document.querySelectorAll(`.${this.classes.menu.toggleComponent}`))},this.addToggleMenuClickListener(),this.addComponentTogglesClickListener(),this.addLinksClickListener(),this.addPopStateLisener(),this.addPageChangedListener(),new m(document.querySelector(".js-ThemeSwitcher")),new h(document.querySelector(".js-TextDirectionSwitcher")),new u(document.querySelector(".js-DevelopmentModeSwitcher"))}static toggleExpandedAttribute(e){const t="false"===e.getAttribute("aria-expanded");e.setAttribute("aria-expanded",t?"true":"false"),document.getElementById(e.getAttribute("aria-controls")).hidden=!t}updateIframe(e){this.elements.iframe.remove(),this.elements.iframe.src=e,this.elements.frameWrapper.appendChild(this.elements.iframe),l(e)}convertPathToMainPath(e){return e.replace(this.paths.embedded,this.paths.container).replace(this.embeddedParam,"")}closeOtherOpenedComponents(e){this.elements.componentToggles.forEach(t=>{"true"===t.getAttribute("aria-expanded")&&(t.closest(`.${this.classes.menu.listItem}`).contains(e)||t.setAttribute("aria-expanded",!1))})}openParentComponent(e){if(e){const t=this.elements.componentToggles.find(t=>t.getAttribute("aria-controls")===e.id);t&&(t.setAttribute("aria-expanded",!0),this.openParentComponent(t.closest(`.${this.classes.menu.listContainer}`)))}}setActiveStateInNav(e){var t=this.elements.links.find(t=>e==t.getAttribute("href")||t.getAttribute("href")==e.replace(this.paths.container,this.paths.embedded));if(t){const e=t.previousElementSibling;var n=e&&e.classList.contains(this.classes.menu.toggleComponent)?e:null}const o=this.elements.links.find(e=>e.getAttribute("aria-current"));return o&&o.removeAttribute("aria-current"),t&&t.setAttribute("aria-current","page"),n&&(n.setAttribute("aria-expanded","true"),document.getElementById(n.getAttribute("aria-controls")).hidden=!1),t}openParentComponents(e){this.openParentComponent(e.closest(`.${this.classes.menu.listContainer}`))}closeToggleMenu(){window.innerWidth<=512&&this.elements.toggleMenu.setAttribute("aria-expanded",!1)}updateUrl(e){e.startsWith("iframe-")?history.pushState(null,e,e.replace("iframe-","")):e.startsWith("/iframe")?history.pushState(null,e,e.replace("/iframe","")):e===this.indexPath?history.pushState(null,e,document.querySelector("base").href):history.pushState(null,e,this.convertPathToMainPath(e))}onPageChanged({detail:e}){const t=this.setActiveStateInNav(e);t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t)),history.pushState(null,e,this.convertPathToMainPath(e))}onToggleMenuClick(e){g.toggleExpandedAttribute(e)}onComponentToggleClick(e){g.toggleExpandedAttribute(e)}onRootLinkClick(e){const t=e.closest("a"),n=t.getAttribute("href");t.setAttribute("aria-current","page"),this.elements.componentToggles.forEach(e=>{e.setAttribute("aria-expanded",e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0"))}),this.elements.links.forEach(e=>{e.removeAttribute("aria-current")}),this.elements.children.forEach(e=>{e.hidden=!e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0")}),this.updateIframe(n),this.closeToggleMenu(),this.updateUrl(n)}onLinkClick(e){const t=e.closest("a").getAttribute("href");this.setActiveStateInNav(t),this.updateIframe(t),this.closeToggleMenu(),this.updateUrl(t)}onPopState(e){const t=this.setActiveStateInNav(e);this.updateIframe(e),t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t))}addToggleMenuClickListener(){this.elements.toggleMenu&&(this.elements.toggleMenu.addEventListener("click",e=>{e.preventDefault(),this.onToggleMenuClick(e.target)}),this.elements.toggleMenu.addEventListener("keyup",e=>{23===e.keyCode&&(e.preventDefault(),this.onToggleMenuClick(e.target))}))}addComponentTogglesClickListener(){this.elements.componentToggles.forEach(e=>{e.addEventListener("click",e=>{e.preventDefault(),this.onComponentToggleClick(e.target)}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onComponentToggleClick(e.target))})})}addLinksClickListener(){this.elements.rootLink.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onRootLinkClick(e.target))}),this.elements.links.forEach(e=>{e.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onLinkClick(e.target))}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onLinkClick(e.target))})})}addPopStateLisener(){window.addEventListener("popstate",this.onPopState.bind(this))}addPageChangedListener(){window.addEventListener("pageChanged",this.onPageChanged.bind(this))}}class p extends g{constructor(){super(),this.paths={embedded:"component?",container:"show?"},this.embeddedParam="&embedded=true",this.indexPath=`/${this.paths.embedded}file=all${this.embeddedParam}`}onPopState(){let e;document.location.pathname.startsWith("/design-tokens")?e=`/iframe${document.location.pathname}`:""!==document.location.search?(e=`${document.location.href.replace(this.paths.container,this.paths.embedded)}${this.embeddedParam}`,e=e.replace(document.location.origin,"")):(e=this.indexPath,e=e.replace(document.location.origin,"")),super.onPopState(e)}}document.addEventListener("DOMContentLoaded",()=>new p);

package/frontend/assets/js/_controls.js

@@ -100,8 +100,7 @@ function renderControls(controls, iframeSrc) {
         const option = document.createElement("option");
         option.value = value;
         option.textContent = value;
-        // eslint-disable-next-line eqeqeq
-        if (value == displayValue) {
+        if (value === displayValue) {
           option.selected = true;
         }
         inputEl.appendChild(option);

package/frontend/views/component_variation.twig.miyagi

@@ -24,8 +24,8 @@
     {% if assets.js %}
       <script src="{{ assets.js }}"></script>
     {% endif %}
-    {% if mockDataResolved is defined %}
-    <script type="application/json" id="miyagi-mock-data">{{ mockDataResolved|replace({'</script>': '<\\/script>'})|raw }}</script>
+    {% if dataJson is defined and dataJson %}
+    <script type="application/json" id="{{ dataJsonId }}">{{ dataJson|replace({'</script>': '<\\/script>'})|raw }}</script>
     {% endif %}
     <script>
       {{ theme.js }}

package/frontend/views/iframe_component.twig.miyagi

@@ -34,6 +34,12 @@
 								<div id="json-tree-resolved-mocks" data-jsontree-js="jsontree.mocks"></div>
 							</details>
 						{% endif %}
+						{% if dataJson %}
+							<details class="Tabs-tab">
+								<summary>Data</summary>
+								<div id="json-tree-resolved-data" data-jsontree-js="jsontree.data"></div>
+							</details>
+						{% endif %}
 						{% if template %}
 							<details class="Tabs-tab">
 								<summary>Template</summary>
@@ -135,6 +141,9 @@
 				},
 				"mocks": {
 					"data": {{ mocks|default({})|replace({'</script>': '<\\/script>'})|raw }}
+				},
+				"data": {
+					"data": {{ dataJson|default({})|replace({'</script>': '<\\/script>'})|raw }}
 				}
 			};
 		</script>

package/lib/build/index.js

@@ -665,6 +665,7 @@ export default () => {
             component,
             componentData: data.resolved,
             componentDeclaredAssets: data.$assets || null,
+            variation,
             cb: async (err, response) => {
               if (err) {
                 if (typeof err === "string") {

package/lib/cli/run.js

@@ -226,6 +226,10 @@ async function runValidateHtmlCommand(args) {
   return await validateHtmlCli(args);
 }
 
+/**
+ * @param {object} args
+ * @returns {Promise<object>}
+ */
 async function runDoctorCommand(args) {
   applyCliEnv(args);
   return await doctor(args);

package/lib/data-json/index.js

@@ -0,0 +1,69 @@
+import { getVariationData, getComponentData } from "../mocks/index.js";
+import log from "../logger.js";
+
+/**
+ * Resolves the data.json content for a component.
+ *
+ * If no data.json exists, returns null values (no JSON exposed in DOM).
+ * If data.json has useMocks: true, uses the mocks pipeline as the data source.
+ * Otherwise, uses the data.json content directly (stripping the useMocks key).
+ * @param {object} component - the component route object
+ * @param {object} options
+ * @param {string} [options.variation] - the variation name (used when useMocks is true)
+ * @returns {Promise<{ json: string|null, id: string }>}
+ */
+export async function resolveDataJson(component, { variation } = {}) {
+  const dataJsonPath = component.paths.data.full;
+  const dataJsonContent = global.state.fileContents[dataJsonPath];
+
+  if (!dataJsonContent) {
+    return { json: null, id: "miyagi-mock-data" };
+  }
+
+  if (dataJsonContent.useMocks === true) {
+    return resolveFromMocks(component, variation);
+  }
+
+  return resolveFromDataJson(dataJsonContent);
+}
+
+/**
+ * Uses the mocks pipeline to produce the JSON content.
+ * @param {object} component
+ * @param {string} [variation]
+ * @returns {Promise<{ json: string|null, id: string }>}
+ */
+async function resolveFromMocks(component, variation) {
+  try {
+    let data;
+
+    if (variation) {
+      data = await getVariationData(component, variation);
+    } else {
+      const allData = await getComponentData(component);
+      data = allData?.[0] ?? null;
+    }
+
+    const resolved = data?.resolved ?? {};
+    return { json: JSON.stringify(resolved), id: "miyagi-mock-data" };
+  } catch (err) {
+    log(
+      "error",
+      `Error resolving mock data for data.json in ${component.paths.dir.short}`,
+      err,
+    );
+    return { json: null, id: "miyagi-mock-data" };
+  }
+}
+
+/**
+ * Uses the data.json content directly, stripping internal properties.
+ * @param {object} dataJsonContent - parsed data.json object
+ * @returns {{ json: string, id: string }}
+ */
+function resolveFromDataJson(dataJsonContent) {
+  const clone = structuredClone(dataJsonContent);
+  delete clone.useMocks;
+
+  return { json: JSON.stringify(clone), id: "miyagi-mock-data" };
+}

package/lib/helpers.js

@@ -1,4 +1,3 @@
-import v8 from "v8";
 import path from "path";
 
 /**
@@ -69,7 +68,7 @@ export const getResolvedFileName = function (nameInConfig, fileName) {
  * @returns {object} clone of rhe given object
  */
 export const cloneDeep = function (obj) {
-  return v8.deserialize(v8.serialize(obj));
+  return structuredClone(obj);
 };
 
 /**
@@ -133,6 +132,15 @@ export const fileIsSchemaFile = function (filePath) {
   );
 };
 
+/**
+ * Accepts a file path and checks if it is a data.json file
+ * @param {string} filePath - path to any type of file
+ * @returns {boolean} is true if the given file is a data.json file
+ */
+export const fileIsDataJsonFile = function (filePath) {
+  return path.basename(filePath) === "data.json";
+};
+
 /**
  * Accepts a file path and checks if it is component js or css file
  * @param {string} filePath - path to any type of file

package/lib/init/router.js

@@ -279,6 +279,7 @@ export default function Router() {
           componentDeclaredAssets: data?.$assets || null,
           cookies: req.cookies,
           overrides: overrides ?? null,
+          variation,
         });
       }
 

package/lib/init/watcher.js

@@ -298,6 +298,7 @@ async function updateFileContents(events) {
           fs.lstatSync(fullPath).isFile() &&
           (helpers.fileIsTemplateFile(relativePath) ||
             helpers.fileIsDataFile(relativePath) ||
+            helpers.fileIsDataJsonFile(relativePath) ||
             helpers.fileIsDocumentationFile(relativePath) ||
             helpers.fileIsSchemaFile(relativePath))
         ) {
@@ -357,6 +358,9 @@ async function handleFileChange(events) {
   const schemaEvents = events.filter(({ relativePath }) =>
     helpers.fileIsSchemaFile(relativePath),
   );
+  const dataJsonEvents = events.filter(({ relativePath }) =>
+    helpers.fileIsDataJsonFile(relativePath),
+  );
   const componentAssetEvents = events.filter(({ relativePath }) =>
     helpers.fileIsAssetFile(relativePath),
   );
@@ -532,6 +536,19 @@ async function handleFileChange(events) {
     return;
   }
 
+  if (dataJsonEvents.length > 0) {
+    await setState({
+      fileContents: await updateFileContents(dataJsonEvents),
+    });
+
+    sendReload(watchRules.data, {
+      reason: "data-json",
+      paths: dataJsonEvents.map(({ relativePath }) => relativePath),
+    });
+    log("success", `${t("updatingDone")}\n`);
+    return;
+  }
+
   if (componentAssetEvents.length > 0) {
     sendReload(watchRules.componentAsset, {
       reason: "component-asset",

package/lib/mocks/resolve/tpl.js

@@ -151,7 +151,6 @@ async function render(entry) {
   if (entry.$tpl) {
     let data = { ...entry };
     delete data.$tpl;
-    let filePath;
     let shortPath;
     let component;
 
@@ -228,7 +227,7 @@ async function render(entry) {
       if (err.code === "ENOENT") {
         messages.push({
           type: "error",
-          text: t("templateDoesNotExist").replace("{{template}}", filePath),
+          text: t("templateDoesNotExist").replace("{{template}}", entry.$tpl),
           verbose: err,
         });
         return {

package/lib/render/helpers/apply-overrides.js

@@ -2,7 +2,6 @@
  * Applies query-param override values to resolved component data.
  * Values are coerced to the appropriate type based on the JSON schema.
  * Only schema-defined properties are overridden; unknown keys are ignored.
- *
  * @param {object} data - the resolved mock data object
  * @param {object} overrides - key/value overrides from req.query.overrides
  * @param {object} [schema] - the JSON schema for the component

package/lib/render/views/iframe/component.js

@@ -32,6 +32,8 @@ export default async function renderIframeComponent({
     global.state.fileContents[path.join(component.paths.dir.full, "README.md")];
   const componentSchema =
     global.state.fileContents[component.paths.schema.full];
+  const componentDataJson =
+    global.state.fileContents[component.paths.data.full] ?? null;
   const componentTemplate = hasTemplate
     ? global.state.fileContents[component.paths.tpl.full]
     : null;
@@ -103,6 +105,16 @@ export default async function renderIframeComponent({
           ),
         }
       : null,
+    data: componentDataJson
+      ? {
+          string: JSON.stringify(componentDataJson, null, 2),
+          type: "json",
+          file: path.join(
+            global.config.components.folder,
+            component.paths.data.short,
+          ),
+        }
+      : null,
   };
 
   await renderVariations({
@@ -205,13 +217,24 @@ async function renderVariations({
     }
   }
 
+  let dataJson;
+
+  if (fileContents?.data?.string) {
+    try {
+      dataJson = JSON.stringify(JSON.parse(fileContents.data.string));
+    } catch (err) {
+      log("error", null, err);
+    }
+  }
+
   return Promise.all(promises)
     .then(async () => {
       const themeMode = getThemeMode(cookies);
       const renderFileTabs = !!(
         fileContents.schema ||
         fileContents.mocks ||
-        fileContents.template
+        fileContents.template ||
+        fileContents.data
       );
       const componentsEntry = global.state.components.find(
         ({ shortPath }) => shortPath === component.paths.dir.short,
@@ -259,6 +282,7 @@ async function renderVariations({
               ? validatedMocks[0].data.map((error) => error.message).join("\n")
               : null,
           mocks: mocksJson,
+          dataJson,
           template: fileContents.template,
           renderInformation: renderFileTabs || variations.length > 0,
           renderFileTabs,

package/lib/render/views/iframe/variation.js

@@ -14,6 +14,7 @@ import applyOverrides from "../../helpers/apply-overrides.js";
  * @param {Function} [object.cb] - callback function
  * @param {object} [object.cookies]
  * @param {object} [object.data]
+ * @param {object} [object.overrides] - query-param override values
  * @returns {Promise} gets resolved when the variation has been rendered
  */
 export default async function renderIframeVariation({

package/lib/render/views/iframe/variation.standalone.js

@@ -1,5 +1,6 @@
 import path from "path";
 import config from "../../../default-config.js";
+import { resolveDataJson } from "../../../data-json/index.js";
 import { getUserUiConfig } from "../../helpers.js";
 import resolveAssets from "../../helpers/resolve-assets.js";
 import applyOverrides from "../../helpers/apply-overrides.js";
@@ -12,6 +13,8 @@ import applyOverrides from "../../helpers/apply-overrides.js";
  * @param {object|null} [object.componentDeclaredAssets] - $assets from mocks
  * @param {Function} [object.cb] - callback function
  * @param {object} [object.cookies]
+ * @param {object} [object.overrides] - query-param override values
+ * @param {string} [object.variation] - the variation name
  * @returns {Promise} gets resolved when the variation has been rendered
  */
 export default async function renderIframeVariationStandalone({
@@ -22,6 +25,7 @@ export default async function renderIframeVariationStandalone({
   cb,
   cookies,
   overrides,
+  variation,
 }) {
   if (overrides) {
     const schema =
@@ -30,6 +34,9 @@ export default async function renderIframeVariationStandalone({
   }
 
   const directoryPath = component.paths.dir.short;
+  const { json: dataJson, id: dataJsonId } = await resolveDataJson(component, {
+    variation,
+  });
 
   return new Promise((resolve, reject) => {
     global.app.render(
@@ -57,7 +64,8 @@ export default async function renderIframeVariationStandalone({
             "component_variation.twig.miyagi",
             {
               html: result,
-              mockDataResolved: JSON.stringify(componentData ?? {}),
+              dataJson,
+              dataJsonId,
               cssFiles,
               jsFilesHead,
               jsFilesBody,

package/lib/state/components.js

@@ -116,6 +116,10 @@ function addToRoutes({ name, shortPath, fullPath }, partials = []) {
           full: path.join(fullPath, "README.md"),
           short: path.join(shortPath, "README.md"),
         },
+        data: {
+          full: path.join(fullPath, "data.json"),
+          short: path.join(shortPath, "data.json"),
+        },
       },
       type: "components",
     };

package/lib/state/file-contents.js

@@ -69,6 +69,7 @@ async function getFilePaths(sourceTree) {
               `${files.mocks.name}.${files.mocks.extension[0]}`,
               `${files.mocks.name}.${files.mocks.extension[1]}`,
               `${files.schema.name}.${files.schema.extension}`,
+              "data.json",
             ]) ||
             helpers.fileIsDocumentationFile(entry.path)
           ) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schalkneethling/miyagi-core",
-  "version": "4.6.1",
+  "version": "4.7.0",
   "description": "miyagi is a component development tool for JavaScript template engines.",
   "main": "index.js",
   "author": "Schalk Neethling <schalkneethling@duck.com>, Michael Großklaus <mail@mgrossklaus.de> (https://www.mgrossklaus.de)",
@@ -52,7 +52,7 @@
     "yargs": "^18.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
+    "@eslint/js": "^10.0.1",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^1.0.0",
     "@types/js-yaml": "^4.0.9",
@@ -82,7 +82,10 @@
     "fix": "eslint lib/ --fix && eslint frontend/assets/js/ --fix",
     "format": "prettier --write .",
     "docs:sync-default-config": "node scripts/docs/sync-default-config.mjs --write",
-    "docs:check-default-config": "node scripts/docs/sync-default-config.mjs --check"
+    "docs:check-default-config": "node scripts/docs/sync-default-config.mjs --check",
+    "docs:dev": "pnpm --filter @schalkneethling/miyagi-docs dev",
+    "docs:build": "pnpm --filter @schalkneethling/miyagi-docs build",
+    "docs:preview": "pnpm --filter @schalkneethling/miyagi-docs preview"
   },
   "browserslist": [
     "last 2 versions",