@schalkneethling/miyagi-core 4.6.0 → 4.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/css/main.css +1 -1
  2. package/dist/js/main.build.js +1 -1
  3. package/dist/js/main.js +1 -1
  4. package/frontend/assets/css/main/controls.css +8 -0
  5. package/frontend/assets/js/_controls.js +1 -2
  6. package/lib/cli/run.js +4 -0
  7. package/lib/init/index.js +1 -0
  8. package/lib/mocks/resolve/tpl.js +1 -2
  9. package/lib/render/helpers/apply-overrides.js +0 -1
  10. package/lib/render/views/iframe/variation.js +1 -0
  11. package/lib/render/views/iframe/variation.standalone.js +1 -0
  12. package/package.json +6 -3
package/dist/css/main.css CHANGED
@@ -1 +1 @@
1
- html{--send-to-back:-1;--bring-to-front:9999;--bottom-layer:100;--middle-layer:200;--top-layer:300;--backdrop:400;--font-family:-apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Helvetica","Arial",sans-serif;--font-size:1rem;--line-height:1.5;--divider:0.0625rem solid var(--color-Divider);--color-Code-background:light-dark(var(--color-Code-background--light),var(--color-Code-background--dark));--color-Divider:light-dark(var(--color-Divider--light),var(--color-Divider--dark));--color-Icon:light-dark(var(--color-Icon--light),var(--color-Icon--dark));--color-Iframe-background:light-dark(var(--color-Iframe-background--light),var(--color-Iframe-background--dark));--color-Iframe-link:light-dark(var(--color-Iframe-link--light),var(--color-Iframe-link--dark));--color-Iframe-text-secondary:light-dark(var(--color-Iframe-text-secondary--light),var(--color-Iframe-text-secondary--dark));--color-Iframe-text-tertiary:light-dark(var(--color-Iframe-text-tertiary--light),var(--color-Iframe-text-tertiary--dark));--color-Iframe-text:light-dark(var(--color-Iframe-text--light),var(--color-Iframe-text--dark));--color-Link-active-background:light-dark(var(--color-Link-active-background--light),var(--color-Link-active-background--dark));--color-Link:light-dark(var(--color-Link--light),var(--color-Link--dark));--color-Menu-background:light-dark(var(--color-Menu-background--light),var(--color-Menu-background--dark));--color-MenuBar-background:light-dark(var(--color-MenuBar-background--light),var(--color-MenuBar-background--dark));--color-Negative:light-dark(var(--color-Negative--light),var(--color-Negative--dark));--color-Outline:light-dark(var(--color-Outline--light),var(--color-Outline--dark));--color-Positive:light-dark(var(--color-Positive--light),var(--color-Positive--dark));--color-Text:light-dark(var(--color-Text--light),var(--color-Text--dark));--color-Tooltip-background:light-dark(var(--color-Tooltip-background--light),var(--color-Tooltip-background--dark));--color-Tooltip-outline:light-dark(var(--color-Tooltip-outline--light),var(--color-Tooltip-outline--dark));--color-Code-background--light:#f5f5f5;--color-Divider--light:rgba(0,0,0,.1);--color-Icon--light:#8f8f8f;--color-Iframe-background--light:#fff;--color-Iframe-link--light:#1f1f1f;--color-Iframe-text--light:#1f1f1f;--color-Iframe-text-secondary--light:#5c5c5c;--color-Iframe-text-tertiary--light:#8f8f8f;--color-Link--light:#1f1f1f;--color-Link-active-background--light:#fff;--color-Menu-background--light:#f5f5f5;--color-MenuBar-background--light:rgb(0 0 0/5%);--color-Negative--light:#d9173e;--color-Outline--light:#dbdbdb;--color-Positive--light:#558000;--color-Text--light:#5c5c5c;--color-Tooltip-background--light:#f5f5f5;--color-Tooltip-outline--light:#ddd;--color-Code-background--dark:#292929;--color-Divider--dark:hsla(0,0%,100%,.05);--color-Icon--dark:#999;--color-Iframe-background--dark:#1f1f1f;--color-Iframe-link--dark:#fff;--color-Iframe-text--dark:#fff;--color-Iframe-text-secondary--dark:#ccc;--color-Iframe-text-tertiary--dark:#999;--color-Link--dark:#fff;--color-Link-active-background--dark:#1f1f1f;--color-Menu-background--dark:#292929;--color-MenuBar-background--dark:hsla(0,0%,100%,.025);--color-Negative--dark:#ff305a;--color-Outline--dark:#424242;--color-Positive--dark:#8dd203;--color-Text--dark:#ccc;--color-Tooltip-background--dark:#333;--color-Tooltip-outline--dark:#444;--toggle-border:0 solid var(--color-Icon);--toggle-borderWidth:0.25em;--toggle-fontSize:0.5em;--toggle-height:1em;--toggle-transition:transform 0.15s ease;--toggle-width:1em;color-scheme:light}@media (prefers-color-scheme:dark){html{color-scheme:dark}}.theme-light{color-scheme:light}.theme-dark{color-scheme:dark}html[dir=ltr]{--toggle-transition-closed:translate(-75%,-50%) rotate(45deg);--toggle-transition-opened:translate(-50%,-75%) rotate(135deg)}html[dir=rtl]{--toggle-transition-closed:translate(75%,-50%) rotate(-45deg);--toggle-transition-opened:translate(50%,-75%) rotate(-135deg)}*,:after,:before{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:initial}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}button,input,textarea{background:none;border:none;color:inherit;font:inherit;margin:0;padding:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:none;-moz-appearance:none;appearance:none;white-space:normal}a{color:inherit}::-webkit-input-placeholder{color:inherit;opacity:.618}::-moz-placeholder{color:inherit;opacity:.618}:-ms-input-placeholder{color:inherit;opacity:.618}::placeholder{color:inherit;opacity:.618}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{display:block;resize:vertical}a,button,input,label,select,textarea{-ms-touch-action:manipulation;touch-action:manipulation}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion:reduce){*,:after,:before{scroll-behavior:auto!important}}.ConfigSwitcher-options{display:flex;gap:.5rem;margin-block-start:.25rem}.ConfigSwitcher-option{position:relative}.ConfigSwitcher [type=radio]{inset-block-start:0;inset-inline-start:0;opacity:.01;position:absolute}.ConfigSwitcher label{cursor:pointer;display:flex;padding:.25em}.ConfigSwitcher :checked+label{outline:.0625em solid currentcolor}.ConfigSwitcher input:focus-visible+label{outline:var(--outline);outline-offset:var(--outline-offset)}.ConfigSwitcher svg{block-size:1em;fill:var(--color-Link);inline-size:1em}.ConfigSwitcher :checked+label svg{fill:var(--color-Link-active,var(--color-Link))}@media (width <= 40rem){.ConfigSwitchers{margin-block-start:1rem}}.ConfigSwitchers{background:var(--bar-background);display:flex}.ConfigSwitchers-toggle{--size:var(--bar-size);align-items:center;border-block-start:var(--divider);color:var(--color-Icon);cursor:pointer;display:flex;flex-shrink:0;gap:.5em;inline-size:100%;svg{block-size:var(--size);display:block;inline-size:var(--size);padding:.45em}}.ConfigSwitchers-toggle:focus-visible{outline-offset:calc(var(--outline-offset)*-1)}.ConfigSwitchers-toggleClose{block-size:75%;fill:currentcolor;inline-size:75%}.ConfigSwitchers-toggle[aria-expanded=false] .ConfigSwitchers-toggleClose,.ConfigSwitchers-toggle[aria-expanded=true] .ConfigSwitchers-toggleOpen{display:none}.ConfigSwitchers-container{background:var(--bar-background);flex:1;inset-block:0 calc(var(--bar-size) + .0625rem);inset-inline:0;padding:var(--bar-size);padding-inline-start:calc(var(--bar-size)*2);position:absolute;z-index:2}.ConfigSwitchers-container>*+*{margin-block-start:var(--menu-spacing)}.ConfigSwitchers-toggle[aria-expanded=false]~.ConfigSwitchers-container{display:none}.ConfigSwitchers-toggle[aria-expanded=true]~.ConfigSwitchers-container{display:block}.GoTo{background:var(--color-Menu-background);box-shadow:0 0 1rem rgba(0,0,0,.5);inline-size:calc(100% - 1rem);inset-block-start:50%;inset-inline-start:50%;max-inline-size:20em;padding:.25em .5em .5em;position:fixed;transform:translate(-50%,-50%)}.GoTo-label{display:block}.GoTo-input{background:var(--color-Menu-background);box-shadow:inset .1em .1em .3em rgba(0,0,0,.2);inline-size:100%;margin-block-start:.25em;outline:var(--divider);padding:.35em .5em}.Nav-entry{position:relative}.Nav-entry:not(.Nav-entry--lvl0):before{background:var(--color-MenuBar-background);content:"";display:block;inline-size:var(--bar-size);inset-block:0;inset-inline-start:0;position:absolute}.Nav-entry--directory{border-block-start:var(--divider)}.Nav-entry--lvl0:last-child{border-block-end:var(--divider)}.Nav-wrapper{position:relative}.Nav-toggle{inline-size:var(--bar-size);inset-block:0;inset-inline-end:0;z-index:1}.Nav-toggle,.Nav-toggle:after{display:block;position:absolute}.Nav-toggle:after{block-size:var(--toggle-height);border:var(--toggle-border);border-block-start-width:var(--toggle-borderWidth);border-inline-end-width:var(--toggle-borderWidth);content:"";font-size:var(--toggle-fontSize);inline-size:var(--toggle-width);inset-block-start:50%;inset-inline-start:50%;transition:var(--toggle-transition)}.Nav-toggle[aria-expanded=false]:after{transform:var(--toggle-transition-closed)}.Nav-toggle[aria-expanded=true]:after{border-color:var(--color-Text);transform:var(--toggle-transition-opened)}.Nav-item,.Nav-variant{display:block;margin-inline-start:var(--bar-size);padding-block:var(--menu-spacing);padding-inline-start:calc(var(--level, 1)*1em + var(--menu-spacing))}:where(.Nav-item,.Nav-variant) mark,:where(.Nav-item,.Nav-variant):not(:has(mark)){text-transform:capitalize}:where(.Nav-item,.Nav-variant)[aria-current=page]{background:var(--color-Link-active-background);color:var(--color-Link-active,var(--color-Link))}.is-no-match:not(:has(.is-match)){display:none}.Nav-entry--directory.has-match>.Nav-toggle,.Nav-entry--directory.is-match *{opacity:1!important}.Nav-item--directory{color:var(--color-Link);cursor:default;opacity:.75}.Nav-item--link{font-weight:600}.Nav-item--link,.Nav-variant{color:var(--color-Link);text-decoration:none}.Nav-item--link:where(:hover,:focus),.Nav-variant:where(:hover,:focus){text-decoration:underline}.Nav-item:focus-visible,.Nav-toggle:focus-visible{outline-offset:calc(var(--outline-offset)*-1)}.Search{border-block:var(--divider);display:flex;margin-block-end:var(--spacing-x);position:relative}.Search-label{flex-shrink:0}.Search-clear:not([hidden]),.Search-label{--size:var(--bar-size);align-items:center;block-size:var(--size);display:flex;inline-size:var(--size);justify-content:center}.Search-clear:not([hidden]){border-radius:50%;inset-block-start:0;inset-inline-end:0;position:absolute}.Search-icon{block-size:50%;color:var(--color-Icon);display:block;inline-size:50%}.Search-icon path{fill:currentcolor}.Search-icon circle{fill:none;stroke:currentcolor}.Search-input{inline-size:calc(100% - var(--bar-size));padding:.35em var(--menu-spacing);padding-inline-end:2.5em}.Search-input:focus{background:var(--color-Link-active-background);outline:none}.Search-clear:focus-visible{outline-offset:calc(var(--outline-offset)*-1)}.Title{display:flex;justify-content:center;margin-inline-end:var(--menu-spacing);margin-inline-start:calc(var(--menu-spacing) + var(--bar-size))}.Title-link{display:inline-block;font-size:.875em;font-weight:500}.Title-link:focus-visible{outline-offset:var(--outline-offset)}.Title-logo img{max-inline-size:100%;min-inline-size:50%;vertical-align:middle}.Title-logo+.Title-name{display:none}@media (width <= 40rem){.Title-logo img{block-size:2rem}}@media (width > 40rem){.Title{margin-block:1.5rem}}.Menu{--bar-size:2rem;--bar-background:var(--color-Menu-background) linear-gradient(to right,var(--color-MenuBar-background) var(--bar-size),transparent var(--bar-size));--menu-spacing:0.5rem;--outline:0.1875rem solid var(--color-Text);--outline-offset:0.125rem;background:var(--bar-background);display:flex;font-size:.875em;grid-area:nav;position:relative}.Menu :where(:focus-visible){outline:var(--outline)}.Menu-content{display:flex;flex-direction:column}.Menu-nav{flex:1;overflow-y:auto}@media (width <= 40rem){.Menu{--toggle-size:4rem;align-items:center;flex-wrap:wrap;justify-content:space-between}.Menu-content{background:var(--bar-background);block-size:calc(100dvb - var(--toggle-size));flex:0 0 100%;inset-block-start:var(--toggle-size);inset-inline:0;position:fixed}.Menu-search{position:relative}.Menu-toggleMobileMenu{block-size:var(--toggle-size);display:block;inline-size:var(--toggle-size);padding:1rem;position:relative}.Menu-toggleMobileMenu[aria-expanded=false]~.Menu-content{display:none}.Menu-toggleMobileMenu:after{block-size:var(--toggle-height);border:var(--toggle-border);border-inline-end-width:var(--toggle-borderWidth);border-top-width:var(--toggle-borderWidth);content:"";display:block;font-size:.75em;inline-size:var(--toggle-width);inset-block-start:50%;inset-inline-start:50%;position:absolute;transition:var(--toggle-transition)}.Menu-toggleMobileMenu[aria-expanded=false]:after{transform:var(--toggle-transition-closed)}.Menu-toggleMobileMenu[aria-expanded=true]:after{transform:var(--toggle-transition-opened)}}@media (width > 40rem){.Menu{block-size:100vh;flex-direction:column}.Menu-toggleMobileMenu{display:none}.Menu-content{flex:1;overflow:hidden}}.Controls{background:var(--color-Menu-background);border-top:var(--divider);flex:0 0 auto;padding:.75rem var(--spacing-x,2rem)}.Controls[data-mode=floating]{bottom:0;box-shadow:0 -4px 12px rgba(0,0,0,.15);left:0;position:fixed;right:0;z-index:var(--bottom-layer)}@media (width > 40rem){.Controls[data-mode=floating]{left:16rem}}.Controls-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.5rem}.Controls-heading{font-size:.75rem;font-weight:600;letter-spacing:.05em;margin:0;text-transform:uppercase}.Controls-modeToggle{background:none;border:1px solid var(--color-Outline);border-radius:.25rem;color:var(--color-Icon);cursor:pointer;font-size:.75rem;padding:.25rem .5rem}.Controls-modeToggle:hover{color:var(--color-Text)}.Controls-fields{display:flex;flex-wrap:wrap;gap:1rem}.Controls-field{min-width:8rem}.Controls-field,.Controls-label{display:flex;flex-direction:column;gap:.25rem}.Controls-label{font-size:.875rem}.Controls-labelText{color:var(--color-Text);font-weight:500}.Controls-select{background:var(--color-Link-active-background);border:1px solid var(--color-Outline);border-radius:.25rem;color:var(--color-Text);font-family:var(--font-family);font-size:.875rem;padding:.25rem .5rem}.Controls-checkbox{cursor:pointer;height:1rem;width:1rem}html{height:100%}body{background:var(--color-Menu-background);color:var(--color-Text);display:grid;font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);min-height:100%}.Content{display:flex;flex-direction:column;grid-area:iframe}.FrameWrapper{flex:1;min-height:0;width:100%}.Frame{display:block;height:100%;width:100%}@media (width <= 40rem){html{--spacing-x:1rem;--spacing-y:1rem}body{grid-template:"nav" "iframe" 1fr}}@media (width > 40rem){html{--spacing-x:2rem;--spacing-y:4rem}body{grid-template-areas:"nav iframe";grid-template-columns:16rem 1fr}}.u-hiddenVisually{border:0;clip-path:inset(100%);height:1px;margin:-1px;padding:0;position:absolute;width:1px;clip:rect(0 0 0 0);overflow:hidden}
1
+ html{--send-to-back:-1;--bring-to-front:9999;--bottom-layer:100;--middle-layer:200;--top-layer:300;--backdrop:400;--font-family:-apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Helvetica","Arial",sans-serif;--font-size:1rem;--line-height:1.5;--divider:0.0625rem solid var(--color-Divider);--color-Code-background:light-dark(var(--color-Code-background--light),var(--color-Code-background--dark));--color-Divider:light-dark(var(--color-Divider--light),var(--color-Divider--dark));--color-Icon:light-dark(var(--color-Icon--light),var(--color-Icon--dark));--color-Iframe-background:light-dark(var(--color-Iframe-background--light),var(--color-Iframe-background--dark));--color-Iframe-link:light-dark(var(--color-Iframe-link--light),var(--color-Iframe-link--dark));--color-Iframe-text-secondary:light-dark(var(--color-Iframe-text-secondary--light),var(--color-Iframe-text-secondary--dark));--color-Iframe-text-tertiary:light-dark(var(--color-Iframe-text-tertiary--light),var(--color-Iframe-text-tertiary--dark));--color-Iframe-text:light-dark(var(--color-Iframe-text--light),var(--color-Iframe-text--dark));--color-Link-active-background:light-dark(var(--color-Link-active-background--light),var(--color-Link-active-background--dark));--color-Link:light-dark(var(--color-Link--light),var(--color-Link--dark));--color-Menu-background:light-dark(var(--color-Menu-background--light),var(--color-Menu-background--dark));--color-MenuBar-background:light-dark(var(--color-MenuBar-background--light),var(--color-MenuBar-background--dark));--color-Negative:light-dark(var(--color-Negative--light),var(--color-Negative--dark));--color-Outline:light-dark(var(--color-Outline--light),var(--color-Outline--dark));--color-Positive:light-dark(var(--color-Positive--light),var(--color-Positive--dark));--color-Text:light-dark(var(--color-Text--light),var(--color-Text--dark));--color-Tooltip-background:light-dark(var(--color-Tooltip-background--light),var(--color-Tooltip-background--dark));--color-Tooltip-outline:light-dark(var(--color-Tooltip-outline--light),var(--color-Tooltip-outline--dark));--color-Code-background--light:#f5f5f5;--color-Divider--light:rgba(0,0,0,.1);--color-Icon--light:#8f8f8f;--color-Iframe-background--light:#fff;--color-Iframe-link--light:#1f1f1f;--color-Iframe-text--light:#1f1f1f;--color-Iframe-text-secondary--light:#5c5c5c;--color-Iframe-text-tertiary--light:#8f8f8f;--color-Link--light:#1f1f1f;--color-Link-active-background--light:#fff;--color-Menu-background--light:#f5f5f5;--color-MenuBar-background--light:rgb(0 0 0/5%);--color-Negative--light:#d9173e;--color-Outline--light:#dbdbdb;--color-Positive--light:#558000;--color-Text--light:#5c5c5c;--color-Tooltip-background--light:#f5f5f5;--color-Tooltip-outline--light:#ddd;--color-Code-background--dark:#292929;--color-Divider--dark:hsla(0,0%,100%,.05);--color-Icon--dark:#999;--color-Iframe-background--dark:#1f1f1f;--color-Iframe-link--dark:#fff;--color-Iframe-text--dark:#fff;--color-Iframe-text-secondary--dark:#ccc;--color-Iframe-text-tertiary--dark:#999;--color-Link--dark:#fff;--color-Link-active-background--dark:#1f1f1f;--color-Menu-background--dark:#292929;--color-MenuBar-background--dark:hsla(0,0%,100%,.025);--color-Negative--dark:#ff305a;--color-Outline--dark:#424242;--color-Positive--dark:#8dd203;--color-Text--dark:#ccc;--color-Tooltip-background--dark:#333;--color-Tooltip-outline--dark:#444;--toggle-border:0 solid var(--color-Icon);--toggle-borderWidth:0.25em;--toggle-fontSize:0.5em;--toggle-height:1em;--toggle-transition:transform 0.15s ease;--toggle-width:1em;color-scheme:light}@media (prefers-color-scheme:dark){html{color-scheme:dark}}.theme-light{color-scheme:light}.theme-dark{color-scheme:dark}html[dir=ltr]{--toggle-transition-closed:translate(-75%,-50%) rotate(45deg);--toggle-transition-opened:translate(-50%,-75%) rotate(135deg)}html[dir=rtl]{--toggle-transition-closed:translate(75%,-50%) rotate(-45deg);--toggle-transition-opened:translate(50%,-75%) rotate(-135deg)}*,:after,:before{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:initial}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}button,input,textarea{background:none;border:none;color:inherit;font:inherit;margin:0;padding:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:none;-moz-appearance:none;appearance:none;white-space:normal}a{color:inherit}::-webkit-input-placeholder{color:inherit;opacity:.618}::-moz-placeholder{color:inherit;opacity:.618}:-ms-input-placeholder{color:inherit;opacity:.618}::placeholder{color:inherit;opacity:.618}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{display:block;resize:vertical}a,button,input,label,select,textarea{-ms-touch-action:manipulation;touch-action:manipulation}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion:reduce){*,:after,:before{scroll-behavior:auto!important}}.ConfigSwitcher-options{display:flex;gap:.5rem;margin-block-start:.25rem}.ConfigSwitcher-option{position:relative}.ConfigSwitcher [type=radio]{inset-block-start:0;inset-inline-start:0;opacity:.01;position:absolute}.ConfigSwitcher label{cursor:pointer;display:flex;padding:.25em}.ConfigSwitcher :checked+label{outline:.0625em solid currentcolor}.ConfigSwitcher input:focus-visible+label{outline:var(--outline);outline-offset:var(--outline-offset)}.ConfigSwitcher svg{block-size:1em;fill:var(--color-Link);inline-size:1em}.ConfigSwitcher :checked+label svg{fill:var(--color-Link-active,var(--color-Link))}@media (width <= 40rem){.ConfigSwitchers{margin-block-start:1rem}}.ConfigSwitchers{background:var(--bar-background);display:flex}.ConfigSwitchers-toggle{--size:var(--bar-size);align-items:center;border-block-start:var(--divider);color:var(--color-Icon);cursor:pointer;display:flex;flex-shrink:0;gap:.5em;inline-size:100%;svg{block-size:var(--size);display:block;inline-size:var(--size);padding:.45em}}.ConfigSwitchers-toggle:focus-visible{outline-offset:calc(var(--outline-offset)*-1)}.ConfigSwitchers-toggleClose{block-size:75%;fill:currentcolor;inline-size:75%}.ConfigSwitchers-toggle[aria-expanded=false] .ConfigSwitchers-toggleClose,.ConfigSwitchers-toggle[aria-expanded=true] .ConfigSwitchers-toggleOpen{display:none}.ConfigSwitchers-container{background:var(--bar-background);flex:1;inset-block:0 calc(var(--bar-size) + .0625rem);inset-inline:0;padding:var(--bar-size);padding-inline-start:calc(var(--bar-size)*2);position:absolute;z-index:2}.ConfigSwitchers-container>*+*{margin-block-start:var(--menu-spacing)}.ConfigSwitchers-toggle[aria-expanded=false]~.ConfigSwitchers-container{display:none}.ConfigSwitchers-toggle[aria-expanded=true]~.ConfigSwitchers-container{display:block}.GoTo{background:var(--color-Menu-background);box-shadow:0 0 1rem rgba(0,0,0,.5);inline-size:calc(100% - 1rem);inset-block-start:50%;inset-inline-start:50%;max-inline-size:20em;padding:.25em .5em .5em;position:fixed;transform:translate(-50%,-50%)}.GoTo-label{display:block}.GoTo-input{background:var(--color-Menu-background);box-shadow:inset .1em .1em .3em rgba(0,0,0,.2);inline-size:100%;margin-block-start:.25em;outline:var(--divider);padding:.35em .5em}.Nav-entry{position:relative}.Nav-entry:not(.Nav-entry--lvl0):before{background:var(--color-MenuBar-background);content:"";display:block;inline-size:var(--bar-size);inset-block:0;inset-inline-start:0;position:absolute}.Nav-entry--directory{border-block-start:var(--divider)}.Nav-entry--lvl0:last-child{border-block-end:var(--divider)}.Nav-wrapper{position:relative}.Nav-toggle{inline-size:var(--bar-size);inset-block:0;inset-inline-end:0;z-index:1}.Nav-toggle,.Nav-toggle:after{display:block;position:absolute}.Nav-toggle:after{block-size:var(--toggle-height);border:var(--toggle-border);border-block-start-width:var(--toggle-borderWidth);border-inline-end-width:var(--toggle-borderWidth);content:"";font-size:var(--toggle-fontSize);inline-size:var(--toggle-width);inset-block-start:50%;inset-inline-start:50%;transition:var(--toggle-transition)}.Nav-toggle[aria-expanded=false]:after{transform:var(--toggle-transition-closed)}.Nav-toggle[aria-expanded=true]:after{border-color:var(--color-Text);transform:var(--toggle-transition-opened)}.Nav-item,.Nav-variant{display:block;margin-inline-start:var(--bar-size);padding-block:var(--menu-spacing);padding-inline-start:calc(var(--level, 1)*1em + var(--menu-spacing))}:where(.Nav-item,.Nav-variant) mark,:where(.Nav-item,.Nav-variant):not(:has(mark)){text-transform:capitalize}:where(.Nav-item,.Nav-variant)[aria-current=page]{background:var(--color-Link-active-background);color:var(--color-Link-active,var(--color-Link))}.is-no-match:not(:has(.is-match)){display:none}.Nav-entry--directory.has-match>.Nav-toggle,.Nav-entry--directory.is-match *{opacity:1!important}.Nav-item--directory{color:var(--color-Link);cursor:default;opacity:.75}.Nav-item--link{font-weight:600}.Nav-item--link,.Nav-variant{color:var(--color-Link);text-decoration:none}.Nav-item--link:where(:hover,:focus),.Nav-variant:where(:hover,:focus){text-decoration:underline}.Nav-item:focus-visible,.Nav-toggle:focus-visible{outline-offset:calc(var(--outline-offset)*-1)}.Search{border-block:var(--divider);display:flex;margin-block-end:var(--spacing-x);position:relative}.Search-label{flex-shrink:0}.Search-clear:not([hidden]),.Search-label{--size:var(--bar-size);align-items:center;block-size:var(--size);display:flex;inline-size:var(--size);justify-content:center}.Search-clear:not([hidden]){border-radius:50%;inset-block-start:0;inset-inline-end:0;position:absolute}.Search-icon{block-size:50%;color:var(--color-Icon);display:block;inline-size:50%}.Search-icon path{fill:currentcolor}.Search-icon circle{fill:none;stroke:currentcolor}.Search-input{inline-size:calc(100% - var(--bar-size));padding:.35em var(--menu-spacing);padding-inline-end:2.5em}.Search-input:focus{background:var(--color-Link-active-background);outline:none}.Search-clear:focus-visible{outline-offset:calc(var(--outline-offset)*-1)}.Title{display:flex;justify-content:center;margin-inline-end:var(--menu-spacing);margin-inline-start:calc(var(--menu-spacing) + var(--bar-size))}.Title-link{display:inline-block;font-size:.875em;font-weight:500}.Title-link:focus-visible{outline-offset:var(--outline-offset)}.Title-logo img{max-inline-size:100%;min-inline-size:50%;vertical-align:middle}.Title-logo+.Title-name{display:none}@media (width <= 40rem){.Title-logo img{block-size:2rem}}@media (width > 40rem){.Title{margin-block:1.5rem}}.Menu{--bar-size:2rem;--bar-background:var(--color-Menu-background) linear-gradient(to right,var(--color-MenuBar-background) var(--bar-size),transparent var(--bar-size));--menu-spacing:0.5rem;--outline:0.1875rem solid var(--color-Text);--outline-offset:0.125rem;background:var(--bar-background);display:flex;font-size:.875em;grid-area:nav;position:relative}.Menu :where(:focus-visible){outline:var(--outline)}.Menu-content{display:flex;flex-direction:column}.Menu-nav{flex:1;overflow-y:auto}@media (width <= 40rem){.Menu{--toggle-size:4rem;align-items:center;flex-wrap:wrap;justify-content:space-between}.Menu-content{background:var(--bar-background);block-size:calc(100dvb - var(--toggle-size));flex:0 0 100%;inset-block-start:var(--toggle-size);inset-inline:0;position:fixed}.Menu-search{position:relative}.Menu-toggleMobileMenu{block-size:var(--toggle-size);display:block;inline-size:var(--toggle-size);padding:1rem;position:relative}.Menu-toggleMobileMenu[aria-expanded=false]~.Menu-content{display:none}.Menu-toggleMobileMenu:after{block-size:var(--toggle-height);border:var(--toggle-border);border-inline-end-width:var(--toggle-borderWidth);border-top-width:var(--toggle-borderWidth);content:"";display:block;font-size:.75em;inline-size:var(--toggle-width);inset-block-start:50%;inset-inline-start:50%;position:absolute;transition:var(--toggle-transition)}.Menu-toggleMobileMenu[aria-expanded=false]:after{transform:var(--toggle-transition-closed)}.Menu-toggleMobileMenu[aria-expanded=true]:after{transform:var(--toggle-transition-opened)}}@media (width > 40rem){.Menu{block-size:100vh;flex-direction:column}.Menu-toggleMobileMenu{display:none}.Menu-content{flex:1;overflow:hidden}}.Controls{background:var(--color-Menu-background);border-top:var(--divider);flex:0 0 auto;padding:.75rem var(--spacing-x,2rem)}.Controls[data-mode=floating]{bottom:0;box-shadow:0 -4px 12px rgba(0,0,0,.15);left:0;position:fixed;right:0;z-index:var(--bottom-layer)}@media (width > 40rem){.Controls[data-mode=floating]{left:16rem}}.Controls-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.5rem}.Controls-heading{font-size:.75rem;font-weight:600;letter-spacing:.05em;margin:0;text-transform:uppercase}.Controls-modeToggle{background:none;border:1px solid var(--color-Outline);border-radius:.25rem;color:var(--color-Icon);cursor:pointer;font-size:.75rem;padding:.25rem .5rem}.Controls[data-mode=docked] .Controls-modeToggle:before{content:"Float"}.Controls[data-mode=floating] .Controls-modeToggle:before{content:"Dock"}.Controls-modeToggle:hover{color:var(--color-Text)}.Controls-fields{display:flex;flex-wrap:wrap;gap:1rem}.Controls-field{min-width:8rem}.Controls-field,.Controls-label{display:flex;flex-direction:column;gap:.25rem}.Controls-label{font-size:.875rem}.Controls-labelText{color:var(--color-Text);font-weight:500}.Controls-select{background:var(--color-Link-active-background);border:1px solid var(--color-Outline);border-radius:.25rem;color:var(--color-Text);font-family:var(--font-family);font-size:.875rem;padding:.25rem .5rem}.Controls-checkbox{cursor:pointer;height:1rem;width:1rem}html{height:100%}body{background:var(--color-Menu-background);color:var(--color-Text);display:grid;font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);min-height:100%}.Content{display:flex;flex-direction:column;grid-area:iframe}.FrameWrapper{flex:1;min-height:0;width:100%}.Frame{display:block;height:100%;width:100%}@media (width <= 40rem){html{--spacing-x:1rem;--spacing-y:1rem}body{grid-template:"nav" "iframe" 1fr}}@media (width > 40rem){html{--spacing-x:2rem;--spacing-y:4rem}body{grid-template-areas:"nav iframe";grid-template-columns:16rem 1fr}}.u-hiddenVisually{border:0;clip-path:inset(100%);height:1px;margin:-1px;padding:0;position:absolute;width:1px;clip:rect(0 0 0 0);overflow:hidden}
package/dist/js/main.build.js CHANGED
@@ -1 +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);
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);
package/dist/js/main.js CHANGED
@@ -1 +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);
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);
package/frontend/assets/css/main/controls.css CHANGED
@@ -45,6 +45,14 @@
45
45
  padding: 0.25rem 0.5rem;
46
46
  }
47
47
 
48
+ .Controls[data-mode="docked"] .Controls-modeToggle::before {
49
+ content: "Float";
50
+ }
51
+
52
+ .Controls[data-mode="floating"] .Controls-modeToggle::before {
53
+ content: "Dock";
54
+ }
55
+
48
56
  .Controls-modeToggle:hover {
49
57
  color: var(--color-Text);
50
58
  }
package/frontend/assets/js/_controls.js CHANGED
@@ -100,8 +100,7 @@ function renderControls(controls, iframeSrc) {
100
100
  const option = document.createElement("option");
101
101
  option.value = value;
102
102
  option.textContent = value;
103
- // eslint-disable-next-line eqeqeq
104
- if (value == displayValue) {
103
+ if (value === displayValue) {
105
104
  option.selected = true;
106
105
  }
107
106
  inputEl.appendChild(option);
package/lib/cli/run.js CHANGED
@@ -226,6 +226,10 @@ async function runValidateHtmlCommand(args) {
226
226
  return await validateHtmlCli(args);
227
227
  }
228
228
 
229
+ /**
230
+ * @param {object} args
231
+ * @returns {Promise<object>}
232
+ */
229
233
  async function runDoctorCommand(args) {
230
234
  applyCliEnv(args);
231
235
  return await doctor(args);
package/lib/init/index.js CHANGED
@@ -29,6 +29,7 @@ export default async function init(mergedConfig) {
29
29
  global.app = express();
30
30
  global.app.use(cookieParser());
31
31
  global.config = mergedConfig;
32
+ global.app.set("query parser", "extended");
32
33
  global.app.set("view cache", global.config.isBuild);
33
34
  global.app.set("cache", global.config.isBuild);
34
35
 
package/lib/mocks/resolve/tpl.js CHANGED
@@ -151,7 +151,6 @@ async function render(entry) {
151
151
  if (entry.$tpl) {
152
152
  let data = { ...entry };
153
153
  delete data.$tpl;
154
- let filePath;
155
154
  let shortPath;
156
155
  let component;
157
156
 
@@ -228,7 +227,7 @@ async function render(entry) {
228
227
  if (err.code === "ENOENT") {
229
228
  messages.push({
230
229
  type: "error",
231
- text: t("templateDoesNotExist").replace("{{template}}", filePath),
230
+ text: t("templateDoesNotExist").replace("{{template}}", entry.$tpl),
232
231
  verbose: err,
233
232
  });
234
233
  return {
package/lib/render/helpers/apply-overrides.js CHANGED
@@ -2,7 +2,6 @@
2
2
  * Applies query-param override values to resolved component data.
3
3
  * Values are coerced to the appropriate type based on the JSON schema.
4
4
  * Only schema-defined properties are overridden; unknown keys are ignored.
5
- *
6
5
  * @param {object} data - the resolved mock data object
7
6
  * @param {object} overrides - key/value overrides from req.query.overrides
8
7
  * @param {object} [schema] - the JSON schema for the component
package/lib/render/views/iframe/variation.js CHANGED
@@ -14,6 +14,7 @@ import applyOverrides from "../../helpers/apply-overrides.js";
14
14
  * @param {Function} [object.cb] - callback function
15
15
  * @param {object} [object.cookies]
16
16
  * @param {object} [object.data]
17
+ * @param {object} [object.overrides] - query-param override values
17
18
  * @returns {Promise} gets resolved when the variation has been rendered
18
19
  */
19
20
  export default async function renderIframeVariation({
package/lib/render/views/iframe/variation.standalone.js CHANGED
@@ -12,6 +12,7 @@ import applyOverrides from "../../helpers/apply-overrides.js";
12
12
  * @param {object|null} [object.componentDeclaredAssets] - $assets from mocks
13
13
  * @param {Function} [object.cb] - callback function
14
14
  * @param {object} [object.cookies]
15
+ * @param {object} [object.overrides] - query-param override values
15
16
  * @returns {Promise} gets resolved when the variation has been rendered
16
17
  */
17
18
  export default async function renderIframeVariationStandalone({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@schalkneethling/miyagi-core",
3
- "version": "4.6.0",
3
+ "version": "4.6.2",
4
4
  "description": "miyagi is a component development tool for JavaScript template engines.",
5
5
  "main": "index.js",
6
6
  "author": "Schalk Neethling <schalkneethling@duck.com>, Michael Großklaus <mail@mgrossklaus.de> (https://www.mgrossklaus.de)",
@@ -52,7 +52,7 @@
52
52
  "yargs": "^18.0.0"
53
53
  },
54
54
  "devDependencies": {
55
- "@eslint/js": "^9.39.2",
55
+ "@eslint/js": "^10.0.1",
56
56
  "@rollup/plugin-node-resolve": "^16.0.3",
57
57
  "@rollup/plugin-terser": "^1.0.0",
58
58
  "@types/js-yaml": "^4.0.9",
@@ -82,7 +82,10 @@
82
82
  "fix": "eslint lib/ --fix && eslint frontend/assets/js/ --fix",
83
83
  "format": "prettier --write .",
84
84
  "docs:sync-default-config": "node scripts/docs/sync-default-config.mjs --write",
85
- "docs:check-default-config": "node scripts/docs/sync-default-config.mjs --check"
85
+ "docs:check-default-config": "node scripts/docs/sync-default-config.mjs --check",
86
+ "docs:dev": "pnpm --filter @schalkneethling/miyagi-docs dev",
87
+ "docs:build": "pnpm --filter @schalkneethling/miyagi-docs build",
88
+ "docs:preview": "pnpm --filter @schalkneethling/miyagi-docs preview"
86
89
  },
87
90
  "browserslist": [
88
91
  "last 2 versions",