@schalkneethling/miyagi-core 4.5.1 → 4.6.1

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 (20) hide show
  1. package/dist/css/iframe.css +1 -1
  2. package/dist/css/main.css +1 -1
  3. package/dist/js/iframe.js +1 -1
  4. package/dist/js/main.build.js +1 -1
  5. package/dist/js/main.js +1 -1
  6. package/frontend/assets/css/main/controls.css +99 -0
  7. package/frontend/assets/css/main.css +5 -1
  8. package/frontend/assets/css/tokens.css +7 -0
  9. package/frontend/assets/js/_controls.js +206 -0
  10. package/frontend/assets/js/_main.js +2 -0
  11. package/frontend/assets/js/_socket.js +23 -0
  12. package/frontend/assets/js/iframe.js +12 -0
  13. package/frontend/views/component_variation.twig.miyagi +3 -0
  14. package/frontend/views/main.twig.miyagi +9 -0
  15. package/lib/init/index.js +1 -0
  16. package/lib/init/router.js +56 -1
  17. package/lib/render/helpers/apply-overrides.js +36 -0
  18. package/lib/render/views/iframe/variation.js +19 -1
  19. package/lib/render/views/iframe/variation.standalone.js +9 -0
  20. package/package.json +2 -2
package/dist/css/iframe.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer miyagi{html{--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}}@layer miyagi{@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)}.Code{--color:light-dark(#000,#fff);--text-shadow:light-dark(#fff,#000);--background:light-dark(#f5f2f0,#4d4033);--color-comment:light-dark(#666,#999);--color-property:light-dark(#d9173e,#ff5c7c);--color-selector:light-dark(#527a00,#8dd203);--color-operator:light-dark(#7a4613,#dd7f22);--color-atrule:light-dark(#07a,#d1949e);--color-function:#dd4a68;--color-regex:#e90;--color-deleted:red}code[class*=language-],pre[class*=language-]{background:none;color:var(--color);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;hyphens:none;line-height:1.5;overflow-wrap:normal;tab-size:4;text-align:start;text-shadow:0 -.1em .2em var(--text-shadow);white-space:pre;word-break:normal;word-spacing:normal}:not(pre)>code[class*=language-],pre[class*=language-]{background:var(--background)}pre[class*=language-]{border-radius:.5em;margin:.5em 0;overflow:auto;padding:1em}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.15em .2em .05em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:var(--color-comment)}.token.namespace,.token.punctuation{opacity:.7}.token.boolean,.token.constant,.token.number,.token.property,.token.symbol,.token.tag{color:var(--color-property)}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:var(--color-selector)}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:var(--color-operator)}.token.atrule,.token.attr-value,.token.keyword{color:var(--color-atrule)}.token.class-name,.token.function{color:var(--color-function)}.token.important,.token.regex,.token.variable{color:var(--color-regex)}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.deleted{color:var(--color-deleted)}accordion-tabs{display:flex;flex-direction:column;overflow:hidden}accordion-tabs details{border-block-end:var(--divider)}accordion-tabs details:first-child{border-block-start:var(--divider)}accordion-tabs summary{align-items:center;display:flex;font-weight:600;justify-content:space-between;list-style:none;padding-block:.75em}}@layer miyagi{}@layer miyagi{accordion-tabs summary::-webkit-details-marker{display:none}accordion-tabs summary:after{background-image:light-dark(url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 1 8 8 1 1'/%3E%3C/svg%3E"),url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 1 8 8 1 1'/%3E%3C/svg%3E"));block-size:.5625em;content:"";display:block;inline-size:1em}accordion-tabs details p{margin-block-start:0}accordion-tabs [open]>summary:after{rotate:-180deg}accordion-tabs [role=tablist]{display:flex;list-style:none;margin-block:0 -.0625rem;padding-inline:0;position:relative}accordion-tabs [role=tab]{appearance:none;background:none;border:.0625rem solid transparent;color:inherit;font:inherit;padding:.5em 1em}accordion-tabs [role=tab][aria-selected=true]{background:var(--color-Code-background);border-color:var(--color-Outline);border-block-end-color:var(--color-Code-background)}accordion-tabs [role=tabpanel] .Code{margin-block-start:0}accordion-tabs [role=tabpanel][hidden]{display:none}.json-tree-js{--json-tree-js-text-bold-weight:400;--json-tree-js-header-bold-weight:700;--json-tree-js-title-bold-weight:var(--json-tree-js-header-bold-weight);--json-tree-js-text-bold-weight-active:var(
1
+ @layer miyagi{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}}@layer miyagi{@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)}.Code{--color:light-dark(#000,#fff);--text-shadow:light-dark(#fff,#000);--background:light-dark(#f5f2f0,#4d4033);--color-comment:light-dark(#666,#999);--color-property:light-dark(#d9173e,#ff5c7c);--color-selector:light-dark(#527a00,#8dd203);--color-operator:light-dark(#7a4613,#dd7f22);--color-atrule:light-dark(#07a,#d1949e);--color-function:#dd4a68;--color-regex:#e90;--color-deleted:red}code[class*=language-],pre[class*=language-]{background:none;color:var(--color);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;hyphens:none;line-height:1.5;overflow-wrap:normal;tab-size:4;text-align:start;text-shadow:0 -.1em .2em var(--text-shadow);white-space:pre;word-break:normal;word-spacing:normal}:not(pre)>code[class*=language-],pre[class*=language-]{background:var(--background)}pre[class*=language-]{border-radius:.5em;margin:.5em 0;overflow:auto;padding:1em}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.15em .2em .05em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:var(--color-comment)}.token.namespace,.token.punctuation{opacity:.7}.token.boolean,.token.constant,.token.number,.token.property,.token.symbol,.token.tag{color:var(--color-property)}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:var(--color-selector)}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:var(--color-operator)}.token.atrule,.token.attr-value,.token.keyword{color:var(--color-atrule)}.token.class-name,.token.function{color:var(--color-function)}.token.important,.token.regex,.token.variable{color:var(--color-regex)}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.deleted{color:var(--color-deleted)}accordion-tabs{display:flex;flex-direction:column;overflow:hidden}accordion-tabs details{border-block-end:var(--divider)}accordion-tabs details:first-child{border-block-start:var(--divider)}accordion-tabs summary{align-items:center;display:flex;font-weight:600;justify-content:space-between;list-style:none;padding-block:.75em}}@layer miyagi{}@layer miyagi{accordion-tabs summary::-webkit-details-marker{display:none}accordion-tabs summary:after{background-image:light-dark(url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 1 8 8 1 1'/%3E%3C/svg%3E"),url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 1 8 8 1 1'/%3E%3C/svg%3E"));block-size:.5625em;content:"";display:block;inline-size:1em}accordion-tabs details p{margin-block-start:0}accordion-tabs [open]>summary:after{rotate:-180deg}accordion-tabs [role=tablist]{display:flex;list-style:none;margin-block:0 -.0625rem;padding-inline:0;position:relative}accordion-tabs [role=tab]{appearance:none;background:none;border:.0625rem solid transparent;color:inherit;font:inherit;padding:.5em 1em}accordion-tabs [role=tab][aria-selected=true]{background:var(--color-Code-background);border-color:var(--color-Outline);border-block-end-color:var(--color-Code-background)}accordion-tabs [role=tabpanel] .Code{margin-block-start:0}accordion-tabs [role=tabpanel][hidden]{display:none}.json-tree-js{--json-tree-js-text-bold-weight:400;--json-tree-js-header-bold-weight:700;--json-tree-js-title-bold-weight:var(--json-tree-js-header-bold-weight);--json-tree-js-text-bold-weight-active:var(
2
2
  --json-tree-js-header-bold-weight
3
3
  );--json-tree-js-color-black:#3b3a3a;--json-tree-js-color-white:currentcolor;--json-tree-js-color-snow-white:currentcolor;--json-tree-js-color-boolean:light-dark(#d9173e,#ff5c7c);--json-tree-js-color-decimal:#e3c868;--json-tree-js-color-number:#666bf9;--json-tree-js-color-string:light-dark(#527a00,#8dd203);--json-tree-js-color-date:#a656f5;--json-tree-js-color-array:light-dark(#7a4613,#dd7f22);--json-tree-js-color-object:currentcolor;--json-tree-js-color-null:#bbb;--json-tree-js-color-function:var(--json-tree-js-color-null);--json-tree-js-color-unknown:var(--json-tree-js-color-null);--json-tree-js-container-background-color:#22272e;--json-tree-js-container-border-color:#454c56;--json-tree-js-button-background-color:#2d333b;--json-tree-js-button-border-color:var(
4
4
  --json-tree-js-container-border-color
package/dist/css/main.css CHANGED
@@ -1 +1 @@
1
- html{--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}}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{grid-area:iframe}.Frame,.FrameWrapper{height:100%;width:100%}.Frame{display:block}@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/iframe.js CHANGED
@@ -1 +1 @@
1
- customElements.define("accordion-tabs",class extends HTMLElement{#e;#t;#n;#i;#s;static get observedAttributes(){return["breakpoint","current"]}constructor(){super()}connectedCallback(){if(!this.closest("code")){if(this.content=[],this.hasAttribute("breakpoint")){const e=this.getAttribute("breakpoint"),t=parseInt(e,10);let n;n=e.endsWith("rem")?t*parseInt(window.getComputedStyle(document.documentElement).fontSize,10):e.endsWith("em")?t*parseInt(window.getComputedStyle(this).fontSize,10):t,this.#t=n}window.requestAnimationFrame(()=>{this.details=Array.from(this.children),this.details.forEach((e,t)=>{const n=e.querySelector("summary");e.open&&(this.index=t),this.content.push({title:n.textContent,content:[...n.parentElement.children].filter(e=>1===e.nodeType&&e!==n)})});let e=!1;this.#i=new ResizeObserver(t=>{if(e)for(const e of t)this.#r(e.borderBoxSize[0].inlineSize);e=!0}),this.#r(this.clientWidth,()=>{this.#i.observe(this)})})}}attributeChangedCallback(e,t,n){"current"===e&&(this.index=parseInt(n,10),this.#r(this.clientWidth))}disconnectedCallback(){this.#i&&this.#i.disconnect()}async#r(e,t){!this.#t||e<this.#t?(await this.#o(),this.#n="accordion"):(await this.#a(),this.#n="tabs"),t&&t()}#o(){return this.#e||(this.#e=new e(this)),"tabs"===this.#n?(this.#c(),this.#e.setElements(),this.#e.elements.forEach(e=>this.appendChild(e))):this.#e.render(),!0}async#a(){this.#c(),this.#s?(this.#s.index="number"==typeof this.index?this.index:0,this.#s.setElements()):this.#s=new t(this);const[e,n]=this.#s.elements;return this.appendChild(e),n.forEach(e=>{this.appendChild(e)}),await this.#s.render(!1)}#c(){Array.from(this.children).forEach(e=>this.removeChild(e))}});class e{constructor(e){this.AccordionTabs=e,this.elements=this.AccordionTabs.details,this.elements.forEach((e,t)=>{e.querySelector("summary").addEventListener("click",({target:e})=>{requestAnimationFrame(()=>{this.#d(e.closest("details"),t)})})}),this.render()}setElements(){this.elements.forEach((e,t)=>{this.AccordionTabs.content[t].content.forEach(t=>e.appendChild(t)),e.open=t===this.AccordionTabs.index})}render(){this.elements.forEach((e,t)=>{e.open=t===this.AccordionTabs.index})}#d(e,t){e.open?(this.elements.forEach(t=>{e!==t&&(t.open=!1)}),this.AccordionTabs.index=t):this.AccordionTabs.index=null}}class t{#h;#l=[];#b=[];#u;constructor(e){this.#h=e,this.elements=this.getElements(),this.index="number"==typeof this.#h.index?this.#h.index:0,this.#u=new n(this)}getElements(){const e=document.createElement("ol"),t=[];return this.#h.content.forEach(({title:n,content:i},s)=>{const r=document.createElement("button"),o=document.createElement("li"),a=document.createElement("div"),c=crypto.randomUUID(),d=`tab-${c}`,h=`panel-${c}`;e.setAttribute("role","tablist"),o.setAttribute("role","presentation"),r.textContent=n,r.type="button",r.id=d,r.setAttribute("aria-selected",s===this.index?"true":"false"),r.setAttribute("tabindex",s===this.index?0:-1),r.setAttribute("aria-controls",h),r.setAttribute("role","tab"),this.#l.push(r),o.appendChild(r),e.appendChild(o),i.forEach(e=>{a.appendChild(e)}),a.id=h,a.hidden=this.index!==s,a.setAttribute("role","tabpanel"),a.setAttribute("tabindex","0"),a.setAttribute("aria-labelledby",d),t.push(a),this.#b.push(a)}),[e,t]}setElements(){this.elements[1].forEach((e,t)=>{this.#h.content[t].content.forEach(t=>e.appendChild(t))})}setActiveTab(e){this.#h.index=this.index=e,this.render()}async render(e=!0){return this.elements[1].forEach((e,t)=>{e.hidden=t!==this.index}),await this.#u.render(e)}}class n{#m;#p;constructor(e){this.#m=e,this.#p=Array.from(this.#m.elements[0].querySelectorAll("button")),this.#p.forEach(e=>{e.addEventListener("click",this.#T.bind(this)),e.addEventListener("keydown",this.#f.bind(this))})}#T({currentTarget:e}){this.#m.setActiveTab(this.#p.indexOf(e))}#f(e){const{dir:t}=e.target.closest("[dir]")||document.documentElement;let n=!1;switch(e.key){case"ArrowLeft":"rtl"===t?this.#w():this.#A(),n=!0;break;case"ArrowRight":"rtl"===t?this.#A():this.#w(),n=!0;break;case"Home":this.#m.setActiveTab(0),n=!0;break;case"End":this.#m.setActiveTab(this.#p.length-1),n=!0}n&&(e.stopPropagation(),e.preventDefault())}#w(){this.#m.setActiveTab(this.#m.index===this.#p.length-1?0:this.#m.index+1)}#A(){this.#m.setActiveTab(0===this.#m.index?this.#p.length-1:this.#m.index-1)}render(e=!0){return this.#p.forEach((t,n)=>{n===this.#m.index?(t.setAttribute("aria-selected","true"),t.removeAttribute("tabindex"),e&&t.focus()):(t.setAttribute("aria-selected","false"),t.setAttribute("tabindex",-1))}),new Promise(e=>setTimeout(e,1e3))}}let i,s=250;function r(e){const t=function(e){return"reloadParent"===e?"parent":"string"==typeof e&&0===e.length?"iframe":null}(e);return t||function(e){try{return JSON.parse(e).scope||"iframe"}catch{return"iframe"}}(e)}function o(){i=new WebSocket(`${"https:"===window.location.protocol?"wss":"ws"}://${window.location.host}/__miyagi_ws`),i.onopen=()=>{s=250},i.onmessage=e=>{"parent"!==r(e.data)?window.location.reload():parent.window.location.reload()},i.onerror=()=>{i.close()},i.onclose=()=>{!function(){const e=Math.floor(100*Math.random()),t=Math.min(s+e,5e3);s=Math.min(2*s,5e3),window.setTimeout(()=>{o()},t)}()}}o();function a(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}window.location.pathname.startsWith("/component?")&&window.location.href.indexOf("&embedded=true")>=0&&window.self===window.top&&(window.location=new URL(window.location).replace("&embedded=true","")),document.addEventListener("DOMContentLoaded",function(){const e=Array.from(document.querySelectorAll(".Component-file")),t=document.querySelector(".Styleguide");e.length>0&&import("./_iframe-links-DdifIr4P.js").then(t=>{t.default(e)}).catch(e=>console.error(e)),document.querySelector(".Code")&&import("./_prism-By3NMwUd.js"),t&&import("./index-BKDKaBC6.js").then(e=>new e.default(t)).catch(e=>console.error(e)),document.querySelector(".js-openMockData")&&import("./_mock-data-Dypo4Bl_.js")}),document.addEventListener("keyup",e=>{const{path:t,originalTarget:n,target:i,key:s}=e,r=t?t[0]:n||i;((e,t)=>!a(e.tagName)&&"f"===t)(r,s)?parent.window.dispatchEvent(new CustomEvent("searchTriggered")):((e,t)=>!a(e.tagName)&&"g"===t)(r,s)&&parent.window.dispatchEvent(new CustomEvent("gotoTriggered"))});
1
+ customElements.define("accordion-tabs",class extends HTMLElement{#e;#t;#n;#i;#s;static get observedAttributes(){return["breakpoint","current"]}constructor(){super()}connectedCallback(){if(!this.closest("code")){if(this.content=[],this.hasAttribute("breakpoint")){const e=this.getAttribute("breakpoint"),t=parseInt(e,10);let n;n=e.endsWith("rem")?t*parseInt(window.getComputedStyle(document.documentElement).fontSize,10):e.endsWith("em")?t*parseInt(window.getComputedStyle(this).fontSize,10):t,this.#t=n}window.requestAnimationFrame(()=>{this.details=Array.from(this.children),this.details.forEach((e,t)=>{const n=e.querySelector("summary");e.open&&(this.index=t),this.content.push({title:n.textContent,content:[...n.parentElement.children].filter(e=>1===e.nodeType&&e!==n)})});let e=!1;this.#i=new ResizeObserver(t=>{if(e)for(const e of t)this.#r(e.borderBoxSize[0].inlineSize);e=!0}),this.#r(this.clientWidth,()=>{this.#i.observe(this)})})}}attributeChangedCallback(e,t,n){"current"===e&&(this.index=parseInt(n,10),this.#r(this.clientWidth))}disconnectedCallback(){this.#i&&this.#i.disconnect()}async#r(e,t){!this.#t||e<this.#t?(await this.#o(),this.#n="accordion"):(await this.#a(),this.#n="tabs"),t&&t()}#o(){return this.#e||(this.#e=new e(this)),"tabs"===this.#n?(this.#c(),this.#e.setElements(),this.#e.elements.forEach(e=>this.appendChild(e))):this.#e.render(),!0}async#a(){this.#c(),this.#s?(this.#s.index="number"==typeof this.index?this.index:0,this.#s.setElements()):this.#s=new t(this);const[e,n]=this.#s.elements;return this.appendChild(e),n.forEach(e=>{this.appendChild(e)}),await this.#s.render(!1)}#c(){Array.from(this.children).forEach(e=>this.removeChild(e))}});class e{constructor(e){this.AccordionTabs=e,this.elements=this.AccordionTabs.details,this.elements.forEach((e,t)=>{e.querySelector("summary").addEventListener("click",({target:e})=>{requestAnimationFrame(()=>{this.#d(e.closest("details"),t)})})}),this.render()}setElements(){this.elements.forEach((e,t)=>{this.AccordionTabs.content[t].content.forEach(t=>e.appendChild(t)),e.open=t===this.AccordionTabs.index})}render(){this.elements.forEach((e,t)=>{e.open=t===this.AccordionTabs.index})}#d(e,t){e.open?(this.elements.forEach(t=>{e!==t&&(t.open=!1)}),this.AccordionTabs.index=t):this.AccordionTabs.index=null}}class t{#h;#l=[];#b=[];#u;constructor(e){this.#h=e,this.elements=this.getElements(),this.index="number"==typeof this.#h.index?this.#h.index:0,this.#u=new n(this)}getElements(){const e=document.createElement("ol"),t=[];return this.#h.content.forEach(({title:n,content:i},s)=>{const r=document.createElement("button"),o=document.createElement("li"),a=document.createElement("div"),c=crypto.randomUUID(),d=`tab-${c}`,h=`panel-${c}`;e.setAttribute("role","tablist"),o.setAttribute("role","presentation"),r.textContent=n,r.type="button",r.id=d,r.setAttribute("aria-selected",s===this.index?"true":"false"),r.setAttribute("tabindex",s===this.index?0:-1),r.setAttribute("aria-controls",h),r.setAttribute("role","tab"),this.#l.push(r),o.appendChild(r),e.appendChild(o),i.forEach(e=>{a.appendChild(e)}),a.id=h,a.hidden=this.index!==s,a.setAttribute("role","tabpanel"),a.setAttribute("tabindex","0"),a.setAttribute("aria-labelledby",d),t.push(a),this.#b.push(a)}),[e,t]}setElements(){this.elements[1].forEach((e,t)=>{this.#h.content[t].content.forEach(t=>e.appendChild(t))})}setActiveTab(e){this.#h.index=this.index=e,this.render()}async render(e=!0){return this.elements[1].forEach((e,t)=>{e.hidden=t!==this.index}),await this.#u.render(e)}}class n{#m;#p;constructor(e){this.#m=e,this.#p=Array.from(this.#m.elements[0].querySelectorAll("button")),this.#p.forEach(e=>{e.addEventListener("click",this.#f.bind(this)),e.addEventListener("keydown",this.#w.bind(this))})}#f({currentTarget:e}){this.#m.setActiveTab(this.#p.indexOf(e))}#w(e){const{dir:t}=e.target.closest("[dir]")||document.documentElement;let n=!1;switch(e.key){case"ArrowLeft":"rtl"===t?this.#T():this.#A(),n=!0;break;case"ArrowRight":"rtl"===t?this.#A():this.#T(),n=!0;break;case"Home":this.#m.setActiveTab(0),n=!0;break;case"End":this.#m.setActiveTab(this.#p.length-1),n=!0}n&&(e.stopPropagation(),e.preventDefault())}#T(){this.#m.setActiveTab(this.#m.index===this.#p.length-1?0:this.#m.index+1)}#A(){this.#m.setActiveTab(0===this.#m.index?this.#p.length-1:this.#m.index-1)}render(e=!0){return this.#p.forEach((t,n)=>{n===this.#m.index?(t.setAttribute("aria-selected","true"),t.removeAttribute("tabindex"),e&&t.focus()):(t.setAttribute("aria-selected","false"),t.setAttribute("tabindex",-1))}),new Promise(e=>setTimeout(e,1e3))}}let i,s=250;function r(e){const t=function(e){return"reloadParent"===e?"parent":"string"==typeof e&&0===e.length?"iframe":null}(e);return t||function(e){try{return JSON.parse(e).scope||"iframe"}catch{return"iframe"}}(e)}function o(e){try{return JSON.parse(e).paths??[]}catch{return[]}}function a(){i=new WebSocket(`${"https:"===window.location.protocol?"wss":"ws"}://${window.location.host}/__miyagi_ws`),i.onopen=()=>{s=250},i.onmessage=e=>{const t=function(e){try{return JSON.parse(e).reason??null}catch{return null}}(e.data);"schema"!==t&&"data"!==t||window.parent.postMessage({type:"miyagi:invalidate-cache",paths:o(e.data)},"*"),"parent"!==r(e.data)?window.location.reload():parent.window.location.reload()},i.onerror=()=>{i.close()},i.onclose=()=>{!function(){const e=Math.floor(100*Math.random()),t=Math.min(s+e,5e3);s=Math.min(2*s,5e3),window.setTimeout(()=>{a()},t)}()}}a();function c(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}window.location.pathname.startsWith("/component?")&&window.location.href.indexOf("&embedded=true")>=0&&window.self===window.top&&(window.location=new URL(window.location).replace("&embedded=true","")),document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("miyagi-mock-data");if(e)try{const t=JSON.parse(e.textContent);document.dispatchEvent(new CustomEvent("miyagi:mockdata",{detail:t}))}catch(e){console.debug("[miyagi] Failed to parse mock data island:",e)}}),document.addEventListener("DOMContentLoaded",function(){const e=Array.from(document.querySelectorAll(".Component-file")),t=document.querySelector(".Styleguide");e.length>0&&import("./_iframe-links-DdifIr4P.js").then(t=>{t.default(e)}).catch(e=>console.error(e)),document.querySelector(".Code")&&import("./_prism-By3NMwUd.js"),t&&import("./index-BKDKaBC6.js").then(e=>new e.default(t)).catch(e=>console.error(e)),document.querySelector(".js-openMockData")&&import("./_mock-data-Dypo4Bl_.js")}),document.addEventListener("keyup",e=>{const{path:t,originalTarget:n,target:i,key:s}=e,r=t?t[0]:n||i;((e,t)=>!c(e.tagName)&&"f"===t)(r,s)?parent.window.dispatchEvent(new CustomEvent("searchTriggered")):((e,t)=>!c(e.tagName)&&"g"===t)(r,s)&&parent.window.dispatchEvent(new CustomEvent("gotoTriggered"))});
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 o=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=o.replace("{{component}}",t))}),window.addEventListener("keyup",o=>{const{path:r,originalTarget:i,target:l,key:c}=o;if(c){const o=r?r[0]:i||l,m=c.toLowerCase();((t,n)=>!e(t.tagName)&&"g"===n)(o,m)?s(t,a):n&&"escape"===m&&(d=a,t.classList.add("u-hiddenVisually"),d.value="",d.blur(),n=!1)}var d}),window.addEventListener("gotoTriggered",()=>s(t,a))}}function s(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"),s=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 o(){n.hidden=!0,s.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="",o()}),t.addEventListener("input",function({target:e}){const t=e.value.toLowerCase();t.length>0?(a=t,n.hidden=!1,s.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")})}),s.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}),s.forEach(e=>{e.listItem.classList.contains("has-match")||e.listItem.classList.add("has-no-match")})):o();var a}),t.addEventListener("keyup",function({target:e,key:t}){"escape"===t.toLowerCase()&&(e.value="",e.blur(),o())}),window.addEventListener("keyup",n=>{const{path:s,originalTarget:o,target:a,key:r}=n;((t,n)=>!e(t.tagName)&&"f"===n)(s?s[0]:o||a,r)&&t.focus()}),window.addEventListener("searchTriggered",()=>{t.focus()}))});class t{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 s=n.split("=");return s[0]===e?decodeURIComponent(s[1]):t},"")}}class n extends t{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 s extends t{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 o extends t{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 a{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 n(document.querySelector(".js-ThemeSwitcher")),new s(document.querySelector(".js-TextDirectionSwitcher")),new o(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)}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 s=this.elements.links.find(e=>e.getAttribute("aria-current"));return s&&s.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){a.toggleExpandedAttribute(e)}onComponentToggleClick(e){a.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 r extends a{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 r);
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 o=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=o.replace("{{component}}",t))}),window.addEventListener("keyup",o=>{const{path:r,originalTarget:i,target:l,key:c}=o;if(c){const o=r?r[0]:i||l,h=c.toLowerCase();((t,n)=>!e(t.tagName)&&"g"===n)(o,h)?s(t,a):n&&"escape"===h&&(d=a,t.classList.add("u-hiddenVisually"),d.value="",d.blur(),n=!1)}var d}),window.addEventListener("gotoTriggered",()=>s(t,a))}}function s(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"),s=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 o(){n.hidden=!0,s.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="",o()}),t.addEventListener("input",function({target:e}){const t=e.value.toLowerCase();t.length>0?(a=t,n.hidden=!1,s.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")})}),s.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}),s.forEach(e=>{e.listItem.classList.contains("has-match")||e.listItem.classList.add("has-no-match")})):o();var a}),t.addEventListener("keyup",function({target:e,key:t}){"escape"===t.toLowerCase()&&(e.value="",e.blur(),o())}),window.addEventListener("keyup",n=>{const{path:s,originalTarget:o,target:a,key:r}=n;((t,n)=>!e(t.tagName)&&"f"===n)(s?s[0]:o||a,r)&&t.focus()}),window.addEventListener("searchTriggered",()=>{t.focus()}))});class t{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 s=n.split("=");return s[0]===e?decodeURIComponent(s[1]):t},"")}}class n extends t{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 s extends t{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 o extends t{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 a{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 n(document.querySelector(".js-ThemeSwitcher")),new s(document.querySelector(".js-TextDirectionSwitcher")),new o(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)}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 s=this.elements.links.find(e=>e.getAttribute("aria-current"));return s&&s.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){a.toggleExpandedAttribute(e)}onComponentToggleClick(e){a.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 r extends a{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 r);
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 ADDED
@@ -0,0 +1,99 @@
1
+ .Controls {
2
+ background: var(--color-Menu-background);
3
+ border-top: var(--divider);
4
+ flex: 0 0 auto;
5
+ padding: 0.75rem var(--spacing-x, 2rem);
6
+ }
7
+
8
+ .Controls[data-mode="floating"] {
9
+ bottom: 0;
10
+ box-shadow: 0 -4px 12px rgb(0 0 0 / 15%);
11
+ left: 0;
12
+ position: fixed;
13
+ right: 0;
14
+ z-index: var(--bottom-layer);
15
+ }
16
+
17
+ @media (width > 40rem) {
18
+ .Controls[data-mode="floating"] {
19
+ left: 16rem;
20
+ }
21
+ }
22
+
23
+ .Controls-header {
24
+ align-items: center;
25
+ display: flex;
26
+ justify-content: space-between;
27
+ margin-bottom: 0.5rem;
28
+ }
29
+
30
+ .Controls-heading {
31
+ font-size: 0.75rem;
32
+ font-weight: 600;
33
+ letter-spacing: 0.05em;
34
+ margin: 0;
35
+ text-transform: uppercase;
36
+ }
37
+
38
+ .Controls-modeToggle {
39
+ background: none;
40
+ border: 1px solid var(--color-Outline);
41
+ border-radius: 0.25rem;
42
+ color: var(--color-Icon);
43
+ cursor: pointer;
44
+ font-size: 0.75rem;
45
+ padding: 0.25rem 0.5rem;
46
+ }
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
+
56
+ .Controls-modeToggle:hover {
57
+ color: var(--color-Text);
58
+ }
59
+
60
+ .Controls-fields {
61
+ display: flex;
62
+ flex-wrap: wrap;
63
+ gap: 1rem;
64
+ }
65
+
66
+ .Controls-field {
67
+ display: flex;
68
+ flex-direction: column;
69
+ gap: 0.25rem;
70
+ min-width: 8rem;
71
+ }
72
+
73
+ .Controls-label {
74
+ display: flex;
75
+ flex-direction: column;
76
+ font-size: 0.875rem;
77
+ gap: 0.25rem;
78
+ }
79
+
80
+ .Controls-labelText {
81
+ color: var(--color-Text);
82
+ font-weight: 500;
83
+ }
84
+
85
+ .Controls-select {
86
+ background: var(--color-Link-active-background);
87
+ border: 1px solid var(--color-Outline);
88
+ border-radius: 0.25rem;
89
+ color: var(--color-Text);
90
+ font-family: var(--font-family);
91
+ font-size: 0.875rem;
92
+ padding: 0.25rem 0.5rem;
93
+ }
94
+
95
+ .Controls-checkbox {
96
+ cursor: pointer;
97
+ height: 1rem;
98
+ width: 1rem;
99
+ }
package/frontend/assets/css/main.css CHANGED
@@ -2,6 +2,7 @@
2
2
  @import url("./shared.css");
3
3
  @import url("./main/reset.css");
4
4
  @import url("./main/menu.css");
5
+ @import url("./main/controls.css");
5
6
 
6
7
  html {
7
8
  height: 100%;
@@ -18,11 +19,14 @@ body {
18
19
  }
19
20
 
20
21
  .Content {
22
+ display: flex;
23
+ flex-direction: column;
21
24
  grid-area: iframe;
22
25
  }
23
26
 
24
27
  .FrameWrapper {
25
- height: 100%;
28
+ flex: 1;
29
+ min-height: 0;
26
30
  width: 100%;
27
31
  }
28
32
 
package/frontend/assets/css/tokens.css CHANGED
@@ -1,4 +1,11 @@
1
1
  html {
2
+ /* z-index scale */
3
+ --send-to-back: -1;
4
+ --bring-to-front: 9999;
5
+ --bottom-layer: 100;
6
+ --middle-layer: 200;
7
+ --top-layer: 300;
8
+ --backdrop: 400;
2
9
  --font-family:
3
10
  -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica",
4
11
  "Arial", sans-serif;
package/frontend/assets/js/_controls.js ADDED
@@ -0,0 +1,206 @@
1
+ const CACHE_PREFIX = "miyagi-controls::";
2
+ const LS_MODE_KEY = "miyagi-controls-mode";
3
+
4
+ function getPanel() {
5
+ return document.getElementById("controls-panel");
6
+ }
7
+
8
+ function getFieldsContainer() {
9
+ return document.getElementById("controls-fields");
10
+ }
11
+
12
+ function hidePanel() {
13
+ const panel = getPanel();
14
+ if (!panel) {
15
+ return;
16
+ }
17
+ panel.hidden = true;
18
+ getFieldsContainer().innerHTML = "";
19
+ }
20
+
21
+ function showPanel() {
22
+ const panel = getPanel();
23
+ if (panel) {
24
+ panel.hidden = false;
25
+ }
26
+ }
27
+
28
+ function initMode() {
29
+ const panel = getPanel();
30
+ if (!panel) {
31
+ return;
32
+ }
33
+
34
+ const mode = localStorage.getItem(LS_MODE_KEY) ?? "docked";
35
+ panel.setAttribute("data-mode", mode);
36
+
37
+ const toggle = document.getElementById("controls-mode-toggle");
38
+ if (toggle) {
39
+ toggle.addEventListener("click", () => {
40
+ const next =
41
+ panel.getAttribute("data-mode") === "docked" ? "floating" : "docked";
42
+ panel.setAttribute("data-mode", next);
43
+ localStorage.setItem(LS_MODE_KEY, next);
44
+ });
45
+ }
46
+ }
47
+
48
+ function buildOverrideSrc(baseSrc, property, value) {
49
+ const url = new URL(baseSrc, window.location.origin);
50
+ url.searchParams.set(`overrides[${property}]`, String(value));
51
+ return url.pathname + url.search;
52
+ }
53
+
54
+ function updateIframe(src) {
55
+ const iframe = document.getElementById("iframe");
56
+ const frameWrapper = document.querySelector(".FrameWrapper");
57
+ if (!iframe || !frameWrapper) {
58
+ return;
59
+ }
60
+ iframe.remove();
61
+ iframe.src = src;
62
+ frameWrapper.appendChild(iframe);
63
+ loadControls(src);
64
+ }
65
+
66
+ function renderControls(controls, iframeSrc) {
67
+ const fieldsContainer = getFieldsContainer();
68
+ fieldsContainer.innerHTML = "";
69
+
70
+ const url = new URL(iframeSrc, window.location.origin);
71
+ const urlOverrides = {};
72
+ url.searchParams.forEach((value, key) => {
73
+ const match = key.match(/^overrides\[(.+)\]$/);
74
+ if (match) {
75
+ urlOverrides[match[1]] = value;
76
+ }
77
+ });
78
+
79
+ controls.forEach(({ property, type, values, current }) => {
80
+ const displayValue =
81
+ urlOverrides[property] !== undefined ? urlOverrides[property] : current;
82
+
83
+ const fieldEl = document.createElement("div");
84
+ fieldEl.className = "Controls-field";
85
+
86
+ const labelEl = document.createElement("label");
87
+ labelEl.className = "Controls-label";
88
+
89
+ const labelText = document.createElement("span");
90
+ labelText.className = "Controls-labelText";
91
+ labelText.textContent = property;
92
+ labelEl.appendChild(labelText);
93
+
94
+ let inputEl;
95
+
96
+ if (type === "enum") {
97
+ inputEl = document.createElement("select");
98
+ inputEl.className = "Controls-select";
99
+ values.forEach((value) => {
100
+ const option = document.createElement("option");
101
+ option.value = value;
102
+ option.textContent = value;
103
+ // eslint-disable-next-line eqeqeq
104
+ if (value == displayValue) {
105
+ option.selected = true;
106
+ }
107
+ inputEl.appendChild(option);
108
+ });
109
+ inputEl.addEventListener("change", () => {
110
+ updateIframe(buildOverrideSrc(iframeSrc, property, inputEl.value));
111
+ });
112
+ } else if (type === "boolean") {
113
+ inputEl = document.createElement("input");
114
+ inputEl.type = "checkbox";
115
+ inputEl.className = "Controls-checkbox";
116
+ inputEl.checked =
117
+ typeof displayValue === "string"
118
+ ? displayValue === "true"
119
+ : Boolean(displayValue);
120
+ inputEl.addEventListener("change", () => {
121
+ updateIframe(buildOverrideSrc(iframeSrc, property, inputEl.checked));
122
+ });
123
+ }
124
+
125
+ if (inputEl) {
126
+ labelEl.appendChild(inputEl);
127
+ fieldEl.appendChild(labelEl);
128
+ fieldsContainer.appendChild(fieldEl);
129
+ }
130
+ });
131
+
132
+ showPanel();
133
+ }
134
+
135
+ export async function loadControls(iframeSrc) {
136
+ const url = new URL(iframeSrc, window.location.origin);
137
+ const file = url.searchParams.get("file");
138
+ const variation = url.searchParams.get("variation");
139
+
140
+ if (!file || !variation) {
141
+ hidePanel();
142
+ return;
143
+ }
144
+
145
+ const cacheKey = `${CACHE_PREFIX}${file}::${variation}`;
146
+ let data = null;
147
+ try {
148
+ data = JSON.parse(sessionStorage.getItem(cacheKey) ?? "null");
149
+ } catch {
150
+ sessionStorage.removeItem(cacheKey);
151
+ }
152
+
153
+ if (!data) {
154
+ try {
155
+ const res = await fetch(
156
+ `/api/component-controls?file=${encodeURIComponent(file)}&variation=${encodeURIComponent(variation)}`,
157
+ );
158
+ data = await res.json();
159
+ sessionStorage.setItem(cacheKey, JSON.stringify(data));
160
+ } catch {
161
+ hidePanel();
162
+ return;
163
+ }
164
+ }
165
+
166
+ if (data.controls?.length) {
167
+ renderControls(data.controls, iframeSrc);
168
+ } else {
169
+ hidePanel();
170
+ }
171
+ }
172
+
173
+ export function invalidateControlsCache(paths) {
174
+ for (const key of Object.keys(sessionStorage)) {
175
+ if (!key.startsWith(CACHE_PREFIX)) {
176
+ continue;
177
+ }
178
+
179
+ if (!paths || paths.length === 0) {
180
+ sessionStorage.removeItem(key);
181
+ continue;
182
+ }
183
+
184
+ const file = key.slice(CACHE_PREFIX.length).split("::")[0];
185
+ if (paths.some((p) => p.includes(file))) {
186
+ sessionStorage.removeItem(key);
187
+ }
188
+ }
189
+ }
190
+
191
+ window.addEventListener("message", (e) => {
192
+ if (e.data?.type === "miyagi:invalidate-cache") {
193
+ invalidateControlsCache(e.data.paths ?? []);
194
+ }
195
+ });
196
+
197
+ document.addEventListener("DOMContentLoaded", () => {
198
+ initMode();
199
+ const iframe = document.getElementById("iframe");
200
+ if (iframe) {
201
+ const src = iframe.getAttribute("src");
202
+ if (src) {
203
+ loadControls(src);
204
+ }
205
+ }
206
+ });
package/frontend/assets/js/_main.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import "./_goto.js";
2
2
  import "./_search.js";
3
+ import { loadControls } from "./_controls.js";
3
4
  import ThemeConfigSwitcher from "./config-switcher/theme.js";
4
5
  import TextDirectionConfigSwitcher from "./config-switcher/text-direction.js";
5
6
  import DevelopmentModeConfigSwitcher from "./config-switcher/development-mode.js";
@@ -77,6 +78,7 @@ class Main {
77
78
  this.elements.iframe.remove();
78
79
  this.elements.iframe.src = src;
79
80
  this.elements.frameWrapper.appendChild(this.elements.iframe);
81
+ loadControls(src);
80
82
  }
81
83
 
82
84
  /**
package/frontend/assets/js/_socket.js CHANGED
@@ -49,6 +49,22 @@ function parseScope(messageData) {
49
49
  return parseJsonScope(messageData);
50
50
  }
51
51
 
52
+ function parseReason(messageData) {
53
+ try {
54
+ return JSON.parse(messageData).reason ?? null;
55
+ } catch {
56
+ return null;
57
+ }
58
+ }
59
+
60
+ function parsePaths(messageData) {
61
+ try {
62
+ return JSON.parse(messageData).paths ?? [];
63
+ } catch {
64
+ return [];
65
+ }
66
+ }
67
+
52
68
  function scheduleReconnect() {
53
69
  const jitter = Math.floor(Math.random() * 100);
54
70
  const delay = Math.min(retryDelay + jitter, MAX_RETRY_DELAY_MS);
@@ -67,6 +83,13 @@ function connect() {
67
83
  };
68
84
 
69
85
  websocket.onmessage = (message) => {
86
+ const reason = parseReason(message.data);
87
+ if (reason === "schema" || reason === "data") {
88
+ window.parent.postMessage(
89
+ { type: "miyagi:invalidate-cache", paths: parsePaths(message.data) },
90
+ "*",
91
+ );
92
+ }
70
93
  triggerReload(parseScope(message.data));
71
94
  };
72
95
 
package/frontend/assets/js/iframe.js CHANGED
@@ -13,6 +13,18 @@ if (
13
13
  window.location = new URL(window.location).replace("&embedded=true", "");
14
14
  }
15
15
 
16
+ document.addEventListener("DOMContentLoaded", () => {
17
+ const mockDataEl = document.getElementById("miyagi-mock-data");
18
+ if (mockDataEl) {
19
+ try {
20
+ const detail = JSON.parse(mockDataEl.textContent);
21
+ document.dispatchEvent(new CustomEvent("miyagi:mockdata", { detail }));
22
+ } catch (e) {
23
+ console.debug("[miyagi] Failed to parse mock data island:", e);
24
+ }
25
+ }
26
+ });
27
+
16
28
  document.addEventListener("DOMContentLoaded", function () {
17
29
  const links = Array.from(document.querySelectorAll(".Component-file"));
18
30
  const styleguide = document.querySelector(".Styleguide");
package/frontend/views/component_variation.twig.miyagi CHANGED
@@ -24,6 +24,9 @@
24
24
  {% if assets.js %}
25
25
  <script src="{{ assets.js }}"></script>
26
26
  {% endif %}
27
+ {% if mockDataResolved is defined %}
28
+ <script type="application/json" id="miyagi-mock-data">{{ mockDataResolved|replace({'</script>': '<\\/script>'})|raw }}</script>
29
+ {% endif %}
27
30
  <script>
28
31
  {{ theme.js }}
29
32
 
package/frontend/views/main.twig.miyagi CHANGED
@@ -19,6 +19,15 @@
19
19
  <div class="FrameWrapper">
20
20
  <iframe class="Frame" id="iframe" src="{{ iframeSrc }}" name="iframe" title="Components"></iframe>
21
21
  </div>
22
+ <div class="Controls" id="controls-panel" hidden>
23
+ <div class="Controls-header">
24
+ <h2 class="Controls-heading">Controls</h2>
25
+ <button class="Controls-modeToggle" id="controls-mode-toggle">
26
+ <span class="u-hiddenVisually">Toggle floating panel</span>
27
+ </button>
28
+ </div>
29
+ <div class="Controls-fields" id="controls-fields"></div>
30
+ </div>
22
31
  </main>
23
32
  </body>
24
33
  </html>
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/init/router.js CHANGED
@@ -160,8 +160,61 @@ export default function Router() {
160
160
  }
161
161
  });
162
162
 
163
+ global.app.get("/api/component-controls", async (req, res) => {
164
+ const { file, variation } = req.query;
165
+
166
+ if (!file || !variation) {
167
+ return res.json({ controls: [] });
168
+ }
169
+
170
+ const routesEntry = global.state.routes.find(
171
+ (route) => route.paths.dir.short === file,
172
+ );
173
+
174
+ if (!routesEntry) {
175
+ return res.json({ controls: [] });
176
+ }
177
+
178
+ const schemaPath = routesEntry.paths?.schema?.full;
179
+ const schema = schemaPath
180
+ ? global.state.fileContents[schemaPath]
181
+ : undefined;
182
+
183
+ if (!schema?.properties) {
184
+ return res.json({ controls: [] });
185
+ }
186
+
187
+ if (!getDataForComponent(routesEntry)) {
188
+ return res.json({ controls: [] });
189
+ }
190
+
191
+ const data = await getVariationData(routesEntry, decodeURI(variation));
192
+ const resolvedData = data?.resolved ?? {};
193
+ const controls = [];
194
+
195
+ for (const [property, propSchema] of Object.entries(schema.properties)) {
196
+ if (Array.isArray(propSchema.enum) && propSchema.enum.length > 0) {
197
+ controls.push({
198
+ property,
199
+ type: "enum",
200
+ values: propSchema.enum,
201
+ current:
202
+ resolvedData[property] ?? propSchema.default ?? propSchema.enum[0],
203
+ });
204
+ } else if (propSchema.type === "boolean") {
205
+ controls.push({
206
+ property,
207
+ type: "boolean",
208
+ current: resolvedData[property] ?? propSchema.default ?? false,
209
+ });
210
+ }
211
+ }
212
+
213
+ return res.json({ controls });
214
+ });
215
+
163
216
  global.app.get("/component", async (req, res) => {
164
- const { file, variation, embedded } = req.query;
217
+ const { file, variation, embedded, overrides } = req.query;
165
218
 
166
219
  if (!file) {
167
220
  return res.redirect(302, global.config.indexPath.default);
@@ -209,6 +262,7 @@ export default function Router() {
209
262
  variation,
210
263
  cookies: req.cookies,
211
264
  data,
265
+ overrides: overrides ?? null,
212
266
  });
213
267
  }
214
268
 
@@ -224,6 +278,7 @@ export default function Router() {
224
278
  componentData: data?.resolved ?? {},
225
279
  componentDeclaredAssets: data?.$assets || null,
226
280
  cookies: req.cookies,
281
+ overrides: overrides ?? null,
227
282
  });
228
283
  }
229
284
 
package/lib/render/helpers/apply-overrides.js ADDED
@@ -0,0 +1,36 @@
1
+ /**
2
+ * Applies query-param override values to resolved component data.
3
+ * Values are coerced to the appropriate type based on the JSON schema.
4
+ * Only schema-defined properties are overridden; unknown keys are ignored.
5
+ *
6
+ * @param {object} data - the resolved mock data object
7
+ * @param {object} overrides - key/value overrides from req.query.overrides
8
+ * @param {object} [schema] - the JSON schema for the component
9
+ * @returns {object} a new object with overrides applied
10
+ */
11
+ export default function applyOverrides(data, overrides, schema) {
12
+ if (!overrides || typeof overrides !== "object") {
13
+ return data;
14
+ }
15
+
16
+ const properties = schema?.properties ?? {};
17
+ const coerced = {};
18
+
19
+ for (const [key, value] of Object.entries(overrides)) {
20
+ const propSchema = properties[key];
21
+ if (!propSchema) continue;
22
+
23
+ if (propSchema.type === "boolean") {
24
+ coerced[key] = value === "true";
25
+ } else if (
26
+ Array.isArray(propSchema.enum) &&
27
+ propSchema.enum.every((v) => typeof v === "number")
28
+ ) {
29
+ coerced[key] = Number(value);
30
+ } else {
31
+ coerced[key] = value;
32
+ }
33
+ }
34
+
35
+ return { ...data, ...coerced };
36
+ }
package/lib/render/views/iframe/variation.js CHANGED
@@ -4,6 +4,7 @@ import { t } from "../../../i18n/index.js";
4
4
  import * as helpers from "../../../helpers.js";
5
5
  import validateMocks from "../../../validator/mocks.js";
6
6
  import { getUserUiConfig, getThemeMode } from "../../helpers.js";
7
+ import applyOverrides from "../../helpers/apply-overrides.js";
7
8
 
8
9
  /**
9
10
  * @param {object} object - parameter object
@@ -22,9 +23,16 @@ export default async function renderIframeVariation({
22
23
  cb,
23
24
  cookies,
24
25
  data,
26
+ overrides,
25
27
  }) {
26
28
  const rawComponentData = (data && data.raw) ?? null;
27
- const componentData = (data && data.resolved) ?? null;
29
+ let componentData = (data && data.resolved) ?? null;
30
+
31
+ if (overrides && componentData) {
32
+ const schema =
33
+ global.state.fileContents[component.paths?.schema?.full] ?? null;
34
+ componentData = applyOverrides(componentData, overrides, schema);
35
+ }
28
36
  const themeMode = getThemeMode(cookies);
29
37
 
30
38
  const validatedMocks = validateMocks(component, [
@@ -44,6 +52,16 @@ export default async function renderIframeVariation({
44
52
  standaloneUrl = `/component?file=${path.dirname(
45
53
  component.paths.tpl.short,
46
54
  )}&variation=${encodeURIComponent(variation)}`;
55
+
56
+ if (overrides && Object.keys(overrides).length > 0) {
57
+ const overrideParams = Object.entries(overrides)
58
+ .map(
59
+ ([k, v]) =>
60
+ `overrides[${encodeURIComponent(k)}]=${encodeURIComponent(v)}`,
61
+ )
62
+ .join("&");
63
+ standaloneUrl += `&${overrideParams}`;
64
+ }
47
65
  }
48
66
 
49
67
  const mockValidation = validatedMocks
package/lib/render/views/iframe/variation.standalone.js CHANGED
@@ -2,6 +2,7 @@ import path from "path";
2
2
  import config from "../../../default-config.js";
3
3
  import { getUserUiConfig } from "../../helpers.js";
4
4
  import resolveAssets from "../../helpers/resolve-assets.js";
5
+ import applyOverrides from "../../helpers/apply-overrides.js";
5
6
 
6
7
  /**
7
8
  * @param {object} object - parameter object
@@ -20,7 +21,14 @@ export default async function renderIframeVariationStandalone({
20
21
  componentDeclaredAssets = null,
21
22
  cb,
22
23
  cookies,
24
+ overrides,
23
25
  }) {
26
+ if (overrides) {
27
+ const schema =
28
+ global.state.fileContents[component.paths?.schema?.full] ?? null;
29
+ componentData = applyOverrides(componentData ?? {}, overrides, schema);
30
+ }
31
+
24
32
  const directoryPath = component.paths.dir.short;
25
33
 
26
34
  return new Promise((resolve, reject) => {
@@ -49,6 +57,7 @@ export default async function renderIframeVariationStandalone({
49
57
  "component_variation.twig.miyagi",
50
58
  {
51
59
  html: result,
60
+ mockDataResolved: JSON.stringify(componentData ?? {}),
52
61
  cssFiles,
53
62
  jsFilesHead,
54
63
  jsFilesBody,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@schalkneethling/miyagi-core",
3
- "version": "4.5.1",
3
+ "version": "4.6.1",
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)",
@@ -60,7 +60,7 @@
60
60
  "@types/yargs": "^17.0.35",
61
61
  "@vitest/coverage-v8": "^4.0.6",
62
62
  "cssnano": "^7.1.2",
63
- "eslint": "^9.39.0",
63
+ "eslint": "^10.2.0",
64
64
  "eslint-plugin-jsdoc": "^62.5.4",
65
65
  "globals": "^17.4.0",
66
66
  "gulp": "^5.0.1",