@schalkneethling/miyagi-core 4.4.4 → 4.6.0

package/api/index.js

@@ -12,6 +12,11 @@ import {
   toSchemaValidationResult,
   validateSchemas,
 } from "../lib/validator/schemas.js";
+import {
+  validateAllHtml as validateAllHtmlImpl,
+  validateComponentHtml as validateComponentHtmlImpl,
+} from "../lib/validator/html.js";
+import { generateMarkdownReport } from "../lib/validator/html-report.js";
 
 /**
  * @param {object} obj
@@ -307,6 +312,54 @@ function getComponentsObject(component) {
  * @param {Map<string, Array<object>>} params.errorMap
  * @returns {Array<object>}
  */
+/**
+ * @param {object} [options]
+ * @param {object} [options.htmlValidateConfig]
+ * @returns {Promise<object>}
+ */
+export const validateHtml = async (options = {}) => {
+  global.app = await init("api");
+  const results = await validateAllHtmlImpl(options);
+  const report = generateMarkdownReport(results);
+  return {
+    success: results.summary.failed === 0,
+    data: { results, report },
+  };
+};
+
+/**
+ * @param {object} obj
+ * @param {string|null} obj.component
+ * @param {object} [obj.htmlValidateConfig]
+ * @returns {Promise<object>}
+ */
+export const validateHtmlComponent = async (
+  { component, ...options } = { component: null },
+) => {
+  if (!component)
+    return {
+      success: false,
+      message:
+        'Please pass a component to `validateHtmlComponent` ({ component: "name" }).',
+    };
+
+  global.app = await init("api");
+
+  const componentObject = getComponentsObject(component);
+
+  if (!componentObject)
+    return {
+      success: false,
+      message: `Component "${component}" does not exist.`,
+    };
+
+  const result = await validateComponentHtmlImpl(componentObject, options);
+  return {
+    success: result.variations.every((v) => v.valid),
+    data: result,
+  };
+};
+
 function getLintComponentErrorsInRouteOrder({ components, errorMap }) {
   return components
     .map((route) => {

package/dist/css/iframe.css

@@ -1,4 +1,4 @@
-@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(
+@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(
     --json-tree-js-header-bold-weight
   );--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(
     --json-tree-js-container-border-color

package/dist/css/main.css

@@ -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}
+html{--send-to-back:-1;--bring-to-front:9999;--bottom-layer:100;--middle-layer:200;--top-layer:300;--backdrop:400;--font-family:-apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Helvetica","Arial",sans-serif;--font-size:1rem;--line-height:1.5;--divider:0.0625rem solid var(--color-Divider);--color-Code-background:light-dark(var(--color-Code-background--light),var(--color-Code-background--dark));--color-Divider:light-dark(var(--color-Divider--light),var(--color-Divider--dark));--color-Icon:light-dark(var(--color-Icon--light),var(--color-Icon--dark));--color-Iframe-background:light-dark(var(--color-Iframe-background--light),var(--color-Iframe-background--dark));--color-Iframe-link:light-dark(var(--color-Iframe-link--light),var(--color-Iframe-link--dark));--color-Iframe-text-secondary:light-dark(var(--color-Iframe-text-secondary--light),var(--color-Iframe-text-secondary--dark));--color-Iframe-text-tertiary:light-dark(var(--color-Iframe-text-tertiary--light),var(--color-Iframe-text-tertiary--dark));--color-Iframe-text:light-dark(var(--color-Iframe-text--light),var(--color-Iframe-text--dark));--color-Link-active-background:light-dark(var(--color-Link-active-background--light),var(--color-Link-active-background--dark));--color-Link:light-dark(var(--color-Link--light),var(--color-Link--dark));--color-Menu-background:light-dark(var(--color-Menu-background--light),var(--color-Menu-background--dark));--color-MenuBar-background:light-dark(var(--color-MenuBar-background--light),var(--color-MenuBar-background--dark));--color-Negative:light-dark(var(--color-Negative--light),var(--color-Negative--dark));--color-Outline:light-dark(var(--color-Outline--light),var(--color-Outline--dark));--color-Positive:light-dark(var(--color-Positive--light),var(--color-Positive--dark));--color-Text:light-dark(var(--color-Text--light),var(--color-Text--dark));--color-Tooltip-background:light-dark(var(--color-Tooltip-background--light),var(--color-Tooltip-background--dark));--color-Tooltip-outline:light-dark(var(--color-Tooltip-outline--light),var(--color-Tooltip-outline--dark));--color-Code-background--light:#f5f5f5;--color-Divider--light:rgba(0,0,0,.1);--color-Icon--light:#8f8f8f;--color-Iframe-background--light:#fff;--color-Iframe-link--light:#1f1f1f;--color-Iframe-text--light:#1f1f1f;--color-Iframe-text-secondary--light:#5c5c5c;--color-Iframe-text-tertiary--light:#8f8f8f;--color-Link--light:#1f1f1f;--color-Link-active-background--light:#fff;--color-Menu-background--light:#f5f5f5;--color-MenuBar-background--light:rgb(0 0 0/5%);--color-Negative--light:#d9173e;--color-Outline--light:#dbdbdb;--color-Positive--light:#558000;--color-Text--light:#5c5c5c;--color-Tooltip-background--light:#f5f5f5;--color-Tooltip-outline--light:#ddd;--color-Code-background--dark:#292929;--color-Divider--dark:hsla(0,0%,100%,.05);--color-Icon--dark:#999;--color-Iframe-background--dark:#1f1f1f;--color-Iframe-link--dark:#fff;--color-Iframe-text--dark:#fff;--color-Iframe-text-secondary--dark:#ccc;--color-Iframe-text-tertiary--dark:#999;--color-Link--dark:#fff;--color-Link-active-background--dark:#1f1f1f;--color-Menu-background--dark:#292929;--color-MenuBar-background--dark:hsla(0,0%,100%,.025);--color-Negative--dark:#ff305a;--color-Outline--dark:#424242;--color-Positive--dark:#8dd203;--color-Text--dark:#ccc;--color-Tooltip-background--dark:#333;--color-Tooltip-outline--dark:#444;--toggle-border:0 solid var(--color-Icon);--toggle-borderWidth:0.25em;--toggle-fontSize:0.5em;--toggle-height:1em;--toggle-transition:transform 0.15s ease;--toggle-width:1em;color-scheme:light}@media (prefers-color-scheme:dark){html{color-scheme:dark}}.theme-light{color-scheme:light}.theme-dark{color-scheme:dark}html[dir=ltr]{--toggle-transition-closed:translate(-75%,-50%) rotate(45deg);--toggle-transition-opened:translate(-50%,-75%) rotate(135deg)}html[dir=rtl]{--toggle-transition-closed:translate(75%,-50%) rotate(-45deg);--toggle-transition-opened:translate(50%,-75%) rotate(-135deg)}*,:after,:before{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:initial}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}button,input,textarea{background:none;border:none;color:inherit;font:inherit;margin:0;padding:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:none;-moz-appearance:none;appearance:none;white-space:normal}a{color:inherit}::-webkit-input-placeholder{color:inherit;opacity:.618}::-moz-placeholder{color:inherit;opacity:.618}:-ms-input-placeholder{color:inherit;opacity:.618}::placeholder{color:inherit;opacity:.618}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{display:block;resize:vertical}a,button,input,label,select,textarea{-ms-touch-action:manipulation;touch-action:manipulation}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion:reduce){*,:after,:before{scroll-behavior:auto!important}}.ConfigSwitcher-options{display:flex;gap:.5rem;margin-block-start:.25rem}.ConfigSwitcher-option{position:relative}.ConfigSwitcher [type=radio]{inset-block-start:0;inset-inline-start:0;opacity:.01;position:absolute}.ConfigSwitcher label{cursor:pointer;display:flex;padding:.25em}.ConfigSwitcher :checked+label{outline:.0625em solid currentcolor}.ConfigSwitcher input:focus-visible+label{outline:var(--outline);outline-offset:var(--outline-offset)}.ConfigSwitcher svg{block-size:1em;fill:var(--color-Link);inline-size:1em}.ConfigSwitcher :checked+label svg{fill:var(--color-Link-active,var(--color-Link))}@media (width <= 40rem){.ConfigSwitchers{margin-block-start:1rem}}.ConfigSwitchers{background:var(--bar-background);display:flex}.ConfigSwitchers-toggle{--size:var(--bar-size);align-items:center;border-block-start:var(--divider);color:var(--color-Icon);cursor:pointer;display:flex;flex-shrink:0;gap:.5em;inline-size:100%;svg{block-size:var(--size);display:block;inline-size:var(--size);padding:.45em}}.ConfigSwitchers-toggle:focus-visible{outline-offset:calc(var(--outline-offset)*-1)}.ConfigSwitchers-toggleClose{block-size:75%;fill:currentcolor;inline-size:75%}.ConfigSwitchers-toggle[aria-expanded=false] .ConfigSwitchers-toggleClose,.ConfigSwitchers-toggle[aria-expanded=true] .ConfigSwitchers-toggleOpen{display:none}.ConfigSwitchers-container{background:var(--bar-background);flex:1;inset-block:0 calc(var(--bar-size) + .0625rem);inset-inline:0;padding:var(--bar-size);padding-inline-start:calc(var(--bar-size)*2);position:absolute;z-index:2}.ConfigSwitchers-container>*+*{margin-block-start:var(--menu-spacing)}.ConfigSwitchers-toggle[aria-expanded=false]~.ConfigSwitchers-container{display:none}.ConfigSwitchers-toggle[aria-expanded=true]~.ConfigSwitchers-container{display:block}.GoTo{background:var(--color-Menu-background);box-shadow:0 0 1rem rgba(0,0,0,.5);inline-size:calc(100% - 1rem);inset-block-start:50%;inset-inline-start:50%;max-inline-size:20em;padding:.25em .5em .5em;position:fixed;transform:translate(-50%,-50%)}.GoTo-label{display:block}.GoTo-input{background:var(--color-Menu-background);box-shadow:inset .1em .1em .3em rgba(0,0,0,.2);inline-size:100%;margin-block-start:.25em;outline:var(--divider);padding:.35em .5em}.Nav-entry{position:relative}.Nav-entry:not(.Nav-entry--lvl0):before{background:var(--color-MenuBar-background);content:"";display:block;inline-size:var(--bar-size);inset-block:0;inset-inline-start:0;position:absolute}.Nav-entry--directory{border-block-start:var(--divider)}.Nav-entry--lvl0:last-child{border-block-end:var(--divider)}.Nav-wrapper{position:relative}.Nav-toggle{inline-size:var(--bar-size);inset-block:0;inset-inline-end:0;z-index:1}.Nav-toggle,.Nav-toggle:after{display:block;position:absolute}.Nav-toggle:after{block-size:var(--toggle-height);border:var(--toggle-border);border-block-start-width:var(--toggle-borderWidth);border-inline-end-width:var(--toggle-borderWidth);content:"";font-size:var(--toggle-fontSize);inline-size:var(--toggle-width);inset-block-start:50%;inset-inline-start:50%;transition:var(--toggle-transition)}.Nav-toggle[aria-expanded=false]:after{transform:var(--toggle-transition-closed)}.Nav-toggle[aria-expanded=true]:after{border-color:var(--color-Text);transform:var(--toggle-transition-opened)}.Nav-item,.Nav-variant{display:block;margin-inline-start:var(--bar-size);padding-block:var(--menu-spacing);padding-inline-start:calc(var(--level, 1)*1em + var(--menu-spacing))}:where(.Nav-item,.Nav-variant) mark,:where(.Nav-item,.Nav-variant):not(:has(mark)){text-transform:capitalize}:where(.Nav-item,.Nav-variant)[aria-current=page]{background:var(--color-Link-active-background);color:var(--color-Link-active,var(--color-Link))}.is-no-match:not(:has(.is-match)){display:none}.Nav-entry--directory.has-match>.Nav-toggle,.Nav-entry--directory.is-match *{opacity:1!important}.Nav-item--directory{color:var(--color-Link);cursor:default;opacity:.75}.Nav-item--link{font-weight:600}.Nav-item--link,.Nav-variant{color:var(--color-Link);text-decoration:none}.Nav-item--link:where(:hover,:focus),.Nav-variant:where(:hover,:focus){text-decoration:underline}.Nav-item:focus-visible,.Nav-toggle:focus-visible{outline-offset:calc(var(--outline-offset)*-1)}.Search{border-block:var(--divider);display:flex;margin-block-end:var(--spacing-x);position:relative}.Search-label{flex-shrink:0}.Search-clear:not([hidden]),.Search-label{--size:var(--bar-size);align-items:center;block-size:var(--size);display:flex;inline-size:var(--size);justify-content:center}.Search-clear:not([hidden]){border-radius:50%;inset-block-start:0;inset-inline-end:0;position:absolute}.Search-icon{block-size:50%;color:var(--color-Icon);display:block;inline-size:50%}.Search-icon path{fill:currentcolor}.Search-icon circle{fill:none;stroke:currentcolor}.Search-input{inline-size:calc(100% - var(--bar-size));padding:.35em var(--menu-spacing);padding-inline-end:2.5em}.Search-input:focus{background:var(--color-Link-active-background);outline:none}.Search-clear:focus-visible{outline-offset:calc(var(--outline-offset)*-1)}.Title{display:flex;justify-content:center;margin-inline-end:var(--menu-spacing);margin-inline-start:calc(var(--menu-spacing) + var(--bar-size))}.Title-link{display:inline-block;font-size:.875em;font-weight:500}.Title-link:focus-visible{outline-offset:var(--outline-offset)}.Title-logo img{max-inline-size:100%;min-inline-size:50%;vertical-align:middle}.Title-logo+.Title-name{display:none}@media (width <= 40rem){.Title-logo img{block-size:2rem}}@media (width > 40rem){.Title{margin-block:1.5rem}}.Menu{--bar-size:2rem;--bar-background:var(--color-Menu-background) linear-gradient(to right,var(--color-MenuBar-background) var(--bar-size),transparent var(--bar-size));--menu-spacing:0.5rem;--outline:0.1875rem solid var(--color-Text);--outline-offset:0.125rem;background:var(--bar-background);display:flex;font-size:.875em;grid-area:nav;position:relative}.Menu :where(:focus-visible){outline:var(--outline)}.Menu-content{display:flex;flex-direction:column}.Menu-nav{flex:1;overflow-y:auto}@media (width <= 40rem){.Menu{--toggle-size:4rem;align-items:center;flex-wrap:wrap;justify-content:space-between}.Menu-content{background:var(--bar-background);block-size:calc(100dvb - var(--toggle-size));flex:0 0 100%;inset-block-start:var(--toggle-size);inset-inline:0;position:fixed}.Menu-search{position:relative}.Menu-toggleMobileMenu{block-size:var(--toggle-size);display:block;inline-size:var(--toggle-size);padding:1rem;position:relative}.Menu-toggleMobileMenu[aria-expanded=false]~.Menu-content{display:none}.Menu-toggleMobileMenu:after{block-size:var(--toggle-height);border:var(--toggle-border);border-inline-end-width:var(--toggle-borderWidth);border-top-width:var(--toggle-borderWidth);content:"";display:block;font-size:.75em;inline-size:var(--toggle-width);inset-block-start:50%;inset-inline-start:50%;position:absolute;transition:var(--toggle-transition)}.Menu-toggleMobileMenu[aria-expanded=false]:after{transform:var(--toggle-transition-closed)}.Menu-toggleMobileMenu[aria-expanded=true]:after{transform:var(--toggle-transition-opened)}}@media (width > 40rem){.Menu{block-size:100vh;flex-direction:column}.Menu-toggleMobileMenu{display:none}.Menu-content{flex:1;overflow:hidden}}.Controls{background:var(--color-Menu-background);border-top:var(--divider);flex:0 0 auto;padding:.75rem var(--spacing-x,2rem)}.Controls[data-mode=floating]{bottom:0;box-shadow:0 -4px 12px rgba(0,0,0,.15);left:0;position:fixed;right:0;z-index:var(--bottom-layer)}@media (width > 40rem){.Controls[data-mode=floating]{left:16rem}}.Controls-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.5rem}.Controls-heading{font-size:.75rem;font-weight:600;letter-spacing:.05em;margin:0;text-transform:uppercase}.Controls-modeToggle{background:none;border:1px solid var(--color-Outline);border-radius:.25rem;color:var(--color-Icon);cursor:pointer;font-size:.75rem;padding:.25rem .5rem}.Controls-modeToggle:hover{color:var(--color-Text)}.Controls-fields{display:flex;flex-wrap:wrap;gap:1rem}.Controls-field{min-width:8rem}.Controls-field,.Controls-label{display:flex;flex-direction:column;gap:.25rem}.Controls-label{font-size:.875rem}.Controls-labelText{color:var(--color-Text);font-weight:500}.Controls-select{background:var(--color-Link-active-background);border:1px solid var(--color-Outline);border-radius:.25rem;color:var(--color-Text);font-family:var(--font-family);font-size:.875rem;padding:.25rem .5rem}.Controls-checkbox{cursor:pointer;height:1rem;width:1rem}html{height:100%}body{background:var(--color-Menu-background);color:var(--color-Text);display:grid;font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);min-height:100%}.Content{display:flex;flex-direction:column;grid-area:iframe}.FrameWrapper{flex:1;min-height:0;width:100%}.Frame{display:block;height:100%;width:100%}@media (width <= 40rem){html{--spacing-x:1rem;--spacing-y:1rem}body{grid-template:"nav" "iframe" 1fr}}@media (width > 40rem){html{--spacing-x:2rem;--spacing-y:4rem}body{grid-template-areas:"nav iframe";grid-template-columns:16rem 1fr}}.u-hiddenVisually{border:0;clip-path:inset(100%);height:1px;margin:-1px;padding:0;position:absolute;width:1px;clip:rect(0 0 0 0);overflow:hidden}

package/dist/js/iframe.js

@@ -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"))});
+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

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

package/dist/js/main.js

@@ -1 +1 @@
-function e(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".GoTo");let n=!1;if(t){const 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);
+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

@@ -0,0 +1,91 @@
+.Controls {
+  background: var(--color-Menu-background);
+  border-top: var(--divider);
+  flex: 0 0 auto;
+  padding: 0.75rem var(--spacing-x, 2rem);
+}
+
+.Controls[data-mode="floating"] {
+  bottom: 0;
+  box-shadow: 0 -4px 12px rgb(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: 0.5rem;
+}
+
+.Controls-heading {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.Controls-modeToggle {
+  background: none;
+  border: 1px solid var(--color-Outline);
+  border-radius: 0.25rem;
+  color: var(--color-Icon);
+  cursor: pointer;
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.Controls-modeToggle:hover {
+  color: var(--color-Text);
+}
+
+.Controls-fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.Controls-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 8rem;
+}
+
+.Controls-label {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.875rem;
+  gap: 0.25rem;
+}
+
+.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: 0.25rem;
+  color: var(--color-Text);
+  font-family: var(--font-family);
+  font-size: 0.875rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.Controls-checkbox {
+  cursor: pointer;
+  height: 1rem;
+  width: 1rem;
+}

package/frontend/assets/css/main.css

@@ -2,6 +2,7 @@
 @import url("./shared.css");
 @import url("./main/reset.css");
 @import url("./main/menu.css");
+@import url("./main/controls.css");
 
 html {
   height: 100%;
@@ -18,11 +19,14 @@ body {
 }
 
 .Content {
+  display: flex;
+  flex-direction: column;
   grid-area: iframe;
 }
 
 .FrameWrapper {
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   width: 100%;
 }
 

package/frontend/assets/css/tokens.css

@@ -1,4 +1,11 @@
 html {
+  /* z-index scale */
+  --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;