@schalkneethling/miyagi-core 4.8.1 → 4.9.1

package/api/index.js

@@ -17,8 +17,6 @@ import {
   validateComponentHtml as validateComponentHtmlImpl,
 } from "../lib/validator/html.js";
 import { generateMarkdownReport } from "../lib/validator/html-report.js";
-import { runPerformance } from "../lib/performance/index.js";
-import { generatePerformanceReport } from "../lib/performance/report.js";
 
 /**
  * @param {object} obj
@@ -329,39 +327,6 @@ export const validateHtml = async (options = {}) => {
   };
 };
 
-/**
- * Run the performance-budget check programmatically.
- * @param {object} [options]
- * @param {boolean} [options.html] - include post-build HTML pages
- * @param {string} [options.buildFolder] - required when html is true
- * @param {"raw"|"gzip"|"brotli"} [options.compression] - override config compression
- * @returns {Promise<object>}
- */
-export const getPerformance = async (options = {}) => {
-  global.app = await init("api");
-
-  if (options.compression) {
-    global.config.performance = {
-      ...(global.config.performance || {}),
-      compression: options.compression,
-    };
-  }
-
-  const result = runPerformance({
-    config: global.config,
-    html: Boolean(options.html),
-    buildFolder: options.buildFolder,
-  });
-
-  return {
-    success: result.summary.exceed === 0,
-    data: {
-      result,
-      report: generatePerformanceReport(result),
-    },
-  };
-};
-
 /**
  * @param {object} obj
  * @param {string|null} obj.component

package/dist/css/iframe.css

@@ -4,4 +4,4 @@
     --json-tree-js-container-border-color
   );--json-tree-js-button-text-color:var(--json-tree-js-color-white);--json-tree-js-button-background-color-hover:var(
     --json-tree-js-container-border-color
-  );--json-tree-js-button-text-color-hover:var(--json-tree-js-color-snow-white);--json-tree-js-button-background-color-active:#616b79;--json-tree-js-button-text-color-active:var(--json-tree-js-color-snow-white);--json-tree-js-border-radius:0.5rem;--json-tree-js-border-style-scrollbar:inset 0 0 6px var(--json-tree-js-color-dark-gray);--json-tree-js-border-size:0.5px;--json-tree-js-spacing:10px;--json-tree-js-spacing-font-size:1em;--json-tree-js-transition:all 0.3s}div.json-tree-js{background-color:var(--color-Code-background);border:.0625rem solid var(--color-Outline);box-sizing:border-box;color:var(--json-tree-js-color-white);display:inline-block;font-size:var(--json-tree-js-spacing-font-size);font-weight:var(--json-tree-js-text-bold-weight);line-height:1.5;margin:0!important;padding:var(--json-tree-js-spacing);width:100%}div.json-tree-js div.no-click{pointer-events:none!important}div.json-tree-js *,div.json-tree-js :after,div.json-tree-js :before{box-sizing:border-box}}@layer miyagi{div.json-tree-js :is(.down-arrow,.right-arrow,.no-arrow){appearance:none;background:none;border:none;display:inline-flex;font:inherit;height:1.5em;padding:0;width:1.5em}div.json-tree-js .no-arrow{pointer-events:none;visibility:hidden}div.json-tree-js :is(.down-arrow,.right-arrow){align-items:center;cursor:pointer;justify-content:center;transform:translateY(-.125em)}div.json-tree-js :is(.down-arrow,.right-arrow):after{border:var(--toggle-border);border-color:currentcolor;border-inline-end-width:.25em;border-top-width:.25em;content:"";display:inline-block;flex:0 0 var(--toggle-width);font-size:.4em;height:var(--toggle-height)}div.json-tree-js :is(.down-arrow,.right-arrow):hover{opacity:.7}div.json-tree-js .down-arrow:after{transform:translateY(-25%) rotate(135deg)}div.json-tree-js .right-arrow:after{transform:translateX(-25%) rotate(45deg)}div.json-tree-js div.title-bar{display:flex;margin-bottom:var(--json-tree-js-spacing)}div.json-tree-js div.title-bar div.controls,div.json-tree-js div.title-bar div.title{display:none}div.json-tree-js div.object-type-title{font-weight:var(--json-tree-js-header-bold-weight);text-align:left!important}div.json-tree-js div.object-type-title span.array{color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-title span.object{color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-title span.count{font-weight:var(--json-tree-js-text-bold-weight);margin-left:calc(var(--json-tree-js-spacing)/2)}div.json-tree-js div.object-type-contents{margin-left:calc(var(--json-tree-js-spacing)*2);margin-top:calc(var(--json-tree-js-spacing)/2);text-align:left!important}div.json-tree-js div.object-type-contents div.object-type-value{margin-bottom:calc(var(--json-tree-js-spacing)/2);margin-top:calc(var(--json-tree-js-spacing)/2)}div.json-tree-js div.object-type-contents div.object-type-value span.split{margin-left:calc(var(--json-tree-js-spacing)/2);margin-right:calc(var(--json-tree-js-spacing)/2)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean,div.json-tree-js div.object-type-contents div.object-type-value span.date,div.json-tree-js div.object-type-contents div.object-type-value span.decimal,div.json-tree-js div.object-type-contents div.object-type-value span.function,div.json-tree-js div.object-type-contents div.object-type-value span.null,div.json-tree-js div.object-type-contents div.object-type-value span.number,div.json-tree-js div.object-type-contents div.object-type-value span.string,div.json-tree-js div.object-type-contents div.object-type-value span.unknown{transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.object-type-contents div.object-type-value span.boolean:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.date:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.decimal:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.function:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.null:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.number:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.string:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.unknown:not(.no-hover):hover{cursor:pointer;opacity:.7}div.json-tree-js div.object-type-contents div.object-type-value span.comma{color:var(--json-tree-js-color-white);font-weight:var(--json-tree-js-text-bold-weight)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean{color:var(--json-tree-js-color-boolean)}div.json-tree-js div.object-type-contents div.object-type-value span.decimal{color:var(--json-tree-js-color-decimal)}div.json-tree-js div.object-type-contents div.object-type-value span.number{color:var(--json-tree-js-color-number)}div.json-tree-js div.object-type-contents div.object-type-value span.string{color:var(--json-tree-js-color-string)}div.json-tree-js div.object-type-contents div.object-type-value span.date{color:var(--json-tree-js-color-date)}div.json-tree-js div.object-type-contents div.object-type-value span.array{color:var(--json-tree-js-color-array);font-weight:var(--json-tree-js-header-bold-weight)}div.json-tree-js div.object-type-contents div.object-type-value span.object{color:var(--json-tree-js-color-object);font-weight:var(--json-tree-js-header-bold-weight)}div.json-tree-js div.object-type-contents div.object-type-value span.null{color:var(--json-tree-js-color-null);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.function{color:var(--json-tree-js-color-function);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.unknown{color:var(--json-tree-js-color-unknown);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.count{font-weight:var(--json-tree-js-text-bold-weight);margin-left:calc(var(--json-tree-js-spacing)/2)}.custom-scroll-bars::-webkit-scrollbar{width:12px}.custom-scroll-bars::-webkit-scrollbar-thumb,.custom-scroll-bars::-webkit-scrollbar-track{box-shadow:var(--json-tree-js-border-style-scrollbar)}.custom-scroll-bars::-webkit-scrollbar-thumb{background:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:hover{background-color:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:active{background-color:var(--json-tree-js-color-lighter-gray)}}@layer miyagi{.Colors{display:grid;gap:3em;grid-template-columns:repeat(auto-fill,minmax(14em,1fr))}.Colors-button{--size:3em;display:flex;flex-wrap:wrap}.Colors-button:after,.Colors-button:before{display:block}.Colors--all .Colors-button:before{margin-inline-end:10px;width:var(--size)}.Colors--all .Colors-button:before,.Colors--decoration .Colors-button:before{background:var(--color);border:1px solid var(--backdrop,transparent);content:"";height:var(--size);order:-1}.Colors--decoration .Colors-button:before{width:100%}.Colors--all .Colors-button:after,.Colors--typo .Colors-button:after{color:var(--color);font-size:var(--size);font-weight:700;order:-1;-webkit-text-stroke:1px var(--backdrop,transparent);text-stroke:1px var(--backdrop,transparent)}.Colors--all .Colors-button:after{content:"Aa"}.Colors--typo .Colors-button:after{content:"AaBbCc"}.Colors-prop,.Colors-value{flex:1 0 100%;margin:10px 0 0}.Fonts-item:not(:first-child){margin-top:3em}.Fonts-button{color:inherit}.Fonts-button:before{content:"The quick brown fox jumps over the lazy dog";font-family:var(--font-family);font-feature-settings:var(--font-feature-settings);font-kerning:var(--font-kerning);font-size:var(--font-size);font-size-adjust:var(--font-size-adjust);font-stretch:var(--font-stretch);font-style:var(--font-style);font-variant:var(--font-variant);font-variant-caps:var(--font-variant-caps);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);line-height:var(--line-height);text-shadow:var(--text-shadow);text-transform:var(--text-transform)}.Fonts-details{display:flex;list-style:none;padding:0}.Fonts-details>li:not(:last-child){border-inline-end:.0625rem solid currentcolor;margin-inline-end:.5em;padding-inline-end:.5em}.Spacings{align-items:flex-start;display:flex;flex-direction:column}.Spacings-item:not(:first-child){margin-top:3em}.Spacings-button{color:inherit}.Spacings-button:before{background:currentcolor;content:"";display:block;height:var(--spacing);width:var(--spacing)}.CustomPropsGroup{list-style:none;margin:3em 0;padding:0}.CustomProp{border:.0625rem solid transparent}.CustomProp,.CustomProp[aria-selected=true]{position:relative}.CustomProp-prop{display:block;margin:10px 0 0;word-break:break-all}.CustomProp-button{appearance:none;background:none;border:none;font:inherit;padding:0;text-align:start;width:fit-content}.CustomProp-button:focus{outline:none}.CustomProp-button:not([aria-expanded=true]):focus .CustomProp-prop,.CustomProp-button:not([aria-expanded=true]):hover .CustomProp-prop{text-decoration:underline}.CustomProp-details{background:var(--color-Tooltip-background);bottom:calc(100% + 15px);box-shadow:0 4px 10px rgba(0,0,0,.1);box-sizing:border-box;display:none;font-size:14px;gap:.5rem 1rem;grid-template-columns:fit-content(50%) 1fr;inset-inline-start:0;line-height:1.5;margin:0;outline:.0625rem solid var(--color-Tooltip-outline);padding:15px;position:absolute;white-space:nowrap;z-index:1}}@layer miyagi{}@layer miyagi{}@layer miyagi{@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.CustomProp-button:hover+.CustomProp-details,.CustomProp-details:not([hidden]){animation:fadeIn .15s ease;display:grid}.CustomProp-details:after,.CustomProp-details:before{border:10px solid transparent;content:"";display:block;height:0;inset-inline-start:15px;position:absolute;width:0}.CustomProp-details:before{border-top-color:var(--color-Tooltip-outline);top:100%}.CustomProp-details:after{border-top-color:var(--color-Tooltip-background);top:calc(100% - 2px)}.CustomProp-detailsProperty{font-weight:600}.CustomProp-detailsValue{margin:0}.PerformanceTable{border-collapse:collapse;margin-block:1em;width:100%}}@layer miyagi{.PerformanceTable :is(th,td){padding:.35em .75em;text-align:start;vertical-align:top}.PerformanceTable thead th{border-block-end:.0625rem solid currentcolor;font-size:.875em;font-weight:700;letter-spacing:.0375em;text-transform:uppercase}.PerformanceTable tbody tr:not(:last-child) :is(td,th){border-block-end:.0625rem solid var(--color-Outline)}.PerformanceTable-totals :is(th,td){font-weight:700}.PerformanceTable tr[data-missing=true] td{color:var(--color-Iframe-text-secondary)}.PerformanceStatus{border-radius:.25em;display:inline-block;font-size:.875em;font-weight:700;letter-spacing:.0375em;padding:.15em .6em;text-transform:uppercase}.PerformanceStatus--ok{background:color-mix(in srgb,var(--color-Positive) 20%,transparent);color:var(--color-Positive)}.PerformanceStatus--warn{background:color-mix(in srgb,var(--color-Iframe-text-secondary) 25%,transparent);color:var(--color-Iframe-text)}.PerformanceStatus--exceed{background:color-mix(in srgb,var(--color-Negative) 20%,transparent);color:var(--color-Negative)}.PerformanceStatus--unbudgeted{color:var(--color-Iframe-text-secondary)}}html{--iframe-spacing:clamp(0.75rem,4vi,2.5rem);height:100%}body{background:var(--color-Iframe-background);color:var(--color-Iframe-text);font-family:var(--font-family);margin:0;min-height:100%}.Wrapper{box-sizing:border-box;padding:var(--iframe-spacing);width:100%}a{color:var(--color-Iframe-link);text-decoration:underline}a:focus-visible,button:focus-visible,summary:focus-visible{border-radius:.25em;outline:3px solid currentcolor;outline-offset:2px}code[class*=language-],pre[class*=language-]{border-radius:0;box-shadow:none;text-shadow:none}.Code code,.Documentation code,:not(pre)>code[class*=language-]{font-size-adjust:.525;text-shadow:none}.Code code,.Documentation,.ErrorMessage,.Information,:not(pre)>code[class*=language-]{line-height:3.125ex}.Code code,.Documentation code,.Information code,:not(pre)>code[class*=language-]{font-family:Menlo,Monaco,monospace}.Documentation h1{font-size:2.4em;font-weight:700;line-height:1;text-transform:capitalize}.Documentation>*+*{margin-top:3.125ex}.Documentation i{font-style:italic}.Documentation table{border-spacing:0}.Documentation th{border-block-end:.0625rem solid currentcolor;text-align:left}.Documentation :is(th,td){padding:.25em .5em}.Documentation tr:not(:last-child) td{border-block-end:.0625rem solid var(--color-Outline)}.Information-val{margin-inline-start:0}.Component-variationHeader{display:flex;font-size:14px;gap:16px;inset-inline-end:40px;line-height:1;position:absolute;top:13px}.Documentation>:first-child{margin-top:0}.Documentation p{max-width:64ch}.SectionTitle{align-items:center;display:flex;font-size:1.6em;margin:2em 0 1em;scroll-margin-top:1.5em}.SectionTitle:after{background:var(--color-Outline);content:"";flex:1;height:.0625rem;margin-inline-start:20px}.Information-wrapper+.Information-wrapper{margin-top:30px}.Information-attr{color:var(--color-Iframe-text-secondary);font-family:var(--font-family);font-size:.875em;letter-spacing:.0375em;text-decoration:none;text-transform:uppercase}.Information-attr:not(:first-child){margin-top:1em}.Documentation code,.Information code{font-weight:600}.Status:before{display:inline-block;margin-inline-end:.5em}.Status--valid{color:var(--color-Positive)}.Status--valid:before{content:"✓"}.Status--invalid{color:var(--color-Negative)}.Status--invalid:before{content:"✗"}.Error{align-items:center;display:flex;height:100%;justify-content:center;margin:0}.Error,.ErrorMessage{color:var(--color-Negative)}.ErrorMessage{margin:1.5em 0}.Iframe-newTabLink{align-items:center;display:flex;font-weight:400}.Iframe-newTabLink:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3'/%3E%3C/svg%3E");content:"";display:block;height:1em;margin-inline-end:.5em;width:1em}.Code,:not(pre)>code[class*=language-],pre[class*=language-]{background:var(--color-Code-background)}:not(pre)>code[class*=language-],pre[class*=language-]{border-color:var(--color-Outline)}.Code,:not(pre)>code[class*=language-]{border:.0625rem solid var(--color-Outline);padding:calc(var(--iframe-spacing)/2)}.Code,pre[class*=language-]{font-size:.875em}.Tabs-tab summary{cursor:default;list-style-type:none;padding-block:10px;padding-inline-start:16px;position:relative}.Tabs-tab summary:before{border:var(--toggle-border);border-color:currentcolor;border-inline-end-width:.25em;border-top-width:.25em;content:"";display:block;font-size:.4em;height:var(--toggle-height);inset-inline-start:.25rem;position:absolute;top:50%;transition:var(--toggle-transition);width:var(--toggle-width)}.Tabs-tab summary::-webkit-details-marker{display:none}.Tabs-tab:not([open]) summary:before{transform:var(--toggle-transition-closed)}.Tabs-tab[open] summary:before{transform:var(--toggle-transition-opened)}.Component:not(:last-child){margin-bottom:calc(var(--iframe-spacing)*2)}.Component-iframeWrapper{height:calc(100vh - var(--iframe-spacing)*2.5);width:100%}.Component-iframeWrapper:not(.has-fixedHeight){outline:.0625rem solid var(--color-Outline);resize:both}.Component-iframe{height:100%;width:100%}.Component-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding:0 0 20px}.Component-headMeta{align-items:center;display:flex;gap:16px}.Component-mockValidation{appearance:none;background:none;border:none;color:var(--color-Iframe-link);cursor:pointer;font-family:var(--font-family);font-size:inherit;line-height:1;margin:0;padding:0;text-decoration:underline}.Component-mockData{background:light-dark(#f2f2f2,#1f1f1f);border:none;box-sizing:border-box;height:calc(100vb - var(--iframe-spacing)*2);max-width:70ch;overscroll-behavior:contain;padding:var(--iframe-spacing);width:calc(100vi - var(--iframe-spacing)*2)}.Component-mockData::backdrop{background:light-dark(hsla(0,0%,100%,.8),rgba(0,0,0,.8))}.Component-mockData:not([open]){display:none}.Component-mockDataHeading{margin-block:0 1em}.Component-closeMockData{appearance:none;background:none;border:0;color:var(--color-Iframe-link);cursor:pointer;inset-block-start:1rem;inset-inline-end:1rem;line-height:1;margin:0;padding:0;position:absolute;text-decoration:underline}.Component-closeMockData,.Component-file{font-family:var(--font-family);font-size:.875em}.Component-file{align-items:center;color:var(--color-Iframe-text-secondary);display:inline-flex;flex-wrap:wrap;letter-spacing:.0375em;text-decoration:none;text-transform:uppercase}.Component-file:active,.Component-file:focus,.Component-file:hover{text-decoration:underline}.Component-fileFolders{color:var(--color-Iframe-text-tertiary)}.ComponentView{border:.0625rem solid var(--color-Outline);box-sizing:border-box;height:calc(100vh - var(--iframe-spacing)*2);overflow:hidden;resize:both;width:100%}.ComponentView-iframe{height:100%;width:100%}[data-mode=presentation] .DeveloperInformation{display:none}@media screen and (prefers-reduced-motion){*,:after,:before{animation:none!important;transition:none!important}}@media (prefers-color-scheme:dark){.Iframe-newTabLink:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3'/%3E%3C/svg%3E")}}
+  );--json-tree-js-button-text-color-hover:var(--json-tree-js-color-snow-white);--json-tree-js-button-background-color-active:#616b79;--json-tree-js-button-text-color-active:var(--json-tree-js-color-snow-white);--json-tree-js-border-radius:0.5rem;--json-tree-js-border-style-scrollbar:inset 0 0 6px var(--json-tree-js-color-dark-gray);--json-tree-js-border-size:0.5px;--json-tree-js-spacing:10px;--json-tree-js-spacing-font-size:1em;--json-tree-js-transition:all 0.3s}div.json-tree-js{background-color:var(--color-Code-background);border:.0625rem solid var(--color-Outline);box-sizing:border-box;color:var(--json-tree-js-color-white);display:inline-block;font-size:var(--json-tree-js-spacing-font-size);font-weight:var(--json-tree-js-text-bold-weight);line-height:1.5;margin:0!important;padding:var(--json-tree-js-spacing);width:100%}div.json-tree-js div.no-click{pointer-events:none!important}div.json-tree-js *,div.json-tree-js :after,div.json-tree-js :before{box-sizing:border-box}}@layer miyagi{div.json-tree-js :is(.down-arrow,.right-arrow,.no-arrow){appearance:none;background:none;border:none;display:inline-flex;font:inherit;height:1.5em;padding:0;width:1.5em}div.json-tree-js .no-arrow{pointer-events:none;visibility:hidden}div.json-tree-js :is(.down-arrow,.right-arrow){align-items:center;cursor:pointer;justify-content:center;transform:translateY(-.125em)}div.json-tree-js :is(.down-arrow,.right-arrow):after{border:var(--toggle-border);border-color:currentcolor;border-inline-end-width:.25em;border-top-width:.25em;content:"";display:inline-block;flex:0 0 var(--toggle-width);font-size:.4em;height:var(--toggle-height)}div.json-tree-js :is(.down-arrow,.right-arrow):hover{opacity:.7}div.json-tree-js .down-arrow:after{transform:translateY(-25%) rotate(135deg)}div.json-tree-js .right-arrow:after{transform:translateX(-25%) rotate(45deg)}div.json-tree-js div.title-bar{display:flex;margin-bottom:var(--json-tree-js-spacing)}div.json-tree-js div.title-bar div.controls,div.json-tree-js div.title-bar div.title{display:none}div.json-tree-js div.object-type-title{font-weight:var(--json-tree-js-header-bold-weight);text-align:left!important}div.json-tree-js div.object-type-title span.array{color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-title span.object{color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-title span.count{font-weight:var(--json-tree-js-text-bold-weight);margin-left:calc(var(--json-tree-js-spacing)/2)}div.json-tree-js div.object-type-contents{margin-left:calc(var(--json-tree-js-spacing)*2);margin-top:calc(var(--json-tree-js-spacing)/2);text-align:left!important}div.json-tree-js div.object-type-contents div.object-type-value{margin-bottom:calc(var(--json-tree-js-spacing)/2);margin-top:calc(var(--json-tree-js-spacing)/2)}div.json-tree-js div.object-type-contents div.object-type-value span.split{margin-left:calc(var(--json-tree-js-spacing)/2);margin-right:calc(var(--json-tree-js-spacing)/2)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean,div.json-tree-js div.object-type-contents div.object-type-value span.date,div.json-tree-js div.object-type-contents div.object-type-value span.decimal,div.json-tree-js div.object-type-contents div.object-type-value span.function,div.json-tree-js div.object-type-contents div.object-type-value span.null,div.json-tree-js div.object-type-contents div.object-type-value span.number,div.json-tree-js div.object-type-contents div.object-type-value span.string,div.json-tree-js div.object-type-contents div.object-type-value span.unknown{transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.object-type-contents div.object-type-value span.boolean:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.date:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.decimal:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.function:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.null:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.number:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.string:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.unknown:not(.no-hover):hover{cursor:pointer;opacity:.7}div.json-tree-js div.object-type-contents div.object-type-value span.comma{color:var(--json-tree-js-color-white);font-weight:var(--json-tree-js-text-bold-weight)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean{color:var(--json-tree-js-color-boolean)}div.json-tree-js div.object-type-contents div.object-type-value span.decimal{color:var(--json-tree-js-color-decimal)}div.json-tree-js div.object-type-contents div.object-type-value span.number{color:var(--json-tree-js-color-number)}div.json-tree-js div.object-type-contents div.object-type-value span.string{color:var(--json-tree-js-color-string)}div.json-tree-js div.object-type-contents div.object-type-value span.date{color:var(--json-tree-js-color-date)}div.json-tree-js div.object-type-contents div.object-type-value span.array{color:var(--json-tree-js-color-array);font-weight:var(--json-tree-js-header-bold-weight)}div.json-tree-js div.object-type-contents div.object-type-value span.object{color:var(--json-tree-js-color-object);font-weight:var(--json-tree-js-header-bold-weight)}div.json-tree-js div.object-type-contents div.object-type-value span.null{color:var(--json-tree-js-color-null);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.function{color:var(--json-tree-js-color-function);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.unknown{color:var(--json-tree-js-color-unknown);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.count{font-weight:var(--json-tree-js-text-bold-weight);margin-left:calc(var(--json-tree-js-spacing)/2)}.custom-scroll-bars::-webkit-scrollbar{width:12px}.custom-scroll-bars::-webkit-scrollbar-thumb,.custom-scroll-bars::-webkit-scrollbar-track{box-shadow:var(--json-tree-js-border-style-scrollbar)}.custom-scroll-bars::-webkit-scrollbar-thumb{background:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:hover{background-color:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:active{background-color:var(--json-tree-js-color-lighter-gray)}}@layer miyagi{.Colors{display:grid;gap:3em;grid-template-columns:repeat(auto-fill,minmax(14em,1fr))}.Colors-button{--size:3em;display:flex;flex-wrap:wrap}.Colors-button:after,.Colors-button:before{display:block}.Colors--all .Colors-button:before{margin-inline-end:10px;width:var(--size)}.Colors--all .Colors-button:before,.Colors--decoration .Colors-button:before{background:var(--color);border:1px solid var(--backdrop,transparent);content:"";height:var(--size);order:-1}.Colors--decoration .Colors-button:before{width:100%}.Colors--all .Colors-button:after,.Colors--typo .Colors-button:after{color:var(--color);font-size:var(--size);font-weight:700;order:-1;-webkit-text-stroke:1px var(--backdrop,transparent);text-stroke:1px var(--backdrop,transparent)}.Colors--all .Colors-button:after{content:"Aa"}.Colors--typo .Colors-button:after{content:"AaBbCc"}.Colors-prop,.Colors-value{flex:1 0 100%;margin:10px 0 0}.Fonts-item:not(:first-child){margin-top:3em}.Fonts-button{color:inherit}.Fonts-button:before{content:"The quick brown fox jumps over the lazy dog";font-family:var(--font-family);font-feature-settings:var(--font-feature-settings);font-kerning:var(--font-kerning);font-size:var(--font-size);font-size-adjust:var(--font-size-adjust);font-stretch:var(--font-stretch);font-style:var(--font-style);font-variant:var(--font-variant);font-variant-caps:var(--font-variant-caps);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);line-height:var(--line-height);text-shadow:var(--text-shadow);text-transform:var(--text-transform)}.Fonts-details{display:flex;list-style:none;padding:0}.Fonts-details>li:not(:last-child){border-inline-end:.0625rem solid currentcolor;margin-inline-end:.5em;padding-inline-end:.5em}.Spacings{align-items:flex-start;display:flex;flex-direction:column}.Spacings-item:not(:first-child){margin-top:3em}.Spacings-button{color:inherit}.Spacings-button:before{background:currentcolor;content:"";display:block;height:var(--spacing);width:var(--spacing)}.CustomPropsGroup{list-style:none;margin:3em 0;padding:0}.CustomProp{border:.0625rem solid transparent}.CustomProp,.CustomProp[aria-selected=true]{position:relative}.CustomProp-prop{display:block;margin:10px 0 0;word-break:break-all}.CustomProp-button{appearance:none;background:none;border:none;font:inherit;padding:0;text-align:start;width:fit-content}.CustomProp-button:focus{outline:none}.CustomProp-button:not([aria-expanded=true]):focus .CustomProp-prop,.CustomProp-button:not([aria-expanded=true]):hover .CustomProp-prop{text-decoration:underline}.CustomProp-details{background:var(--color-Tooltip-background);bottom:calc(100% + 15px);box-shadow:0 4px 10px rgba(0,0,0,.1);box-sizing:border-box;display:none;font-size:14px;gap:.5rem 1rem;grid-template-columns:fit-content(50%) 1fr;inset-inline-start:0;line-height:1.5;margin:0;outline:.0625rem solid var(--color-Tooltip-outline);padding:15px;position:absolute;white-space:nowrap;z-index:1}}@layer miyagi{}@layer miyagi{}@layer miyagi{@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.CustomProp-button:hover+.CustomProp-details,.CustomProp-details:not([hidden]){animation:fadeIn .15s ease;display:grid}.CustomProp-details:after,.CustomProp-details:before{border:10px solid transparent;content:"";display:block;height:0;inset-inline-start:15px;position:absolute;width:0}.CustomProp-details:before{border-top-color:var(--color-Tooltip-outline);top:100%}.CustomProp-details:after{border-top-color:var(--color-Tooltip-background);top:calc(100% - 2px)}.CustomProp-detailsProperty{font-weight:600}.CustomProp-detailsValue{margin:0}.PerfSection .PerfChip{background:var(--color-Code-background);border:1px solid var(--color-Outline);border-radius:999px;display:inline-block;font-family:var(--font-family);font-size:.875em;padding:.125rem .625rem}.PerfSection .PerfChip--ok{background:light-dark(#def7e4,#203c27);border-color:var(--color-Positive)}.PerfSection .PerfChip--warn{background:light-dark(#fceec5,#453917);border-color:light-dark(#da840b,#eba747)}.PerfSection .PerfChip--exceed{background:light-dark(#f9dcdc,#4f2222);border-color:var(--color-Negative);color:var(--color-Negative)}.PerfSection .PerfChip--missing{border-style:dashed;color:var(--color-Iframe-text-secondary)}.PerfSection .PerfChip--unbudgeted{background:transparent;color:var(--color-Iframe-text-secondary)}}@layer miyagi{}html{--iframe-spacing:clamp(0.75rem,4vi,2.5rem);height:100%}body{background:var(--color-Iframe-background);color:var(--color-Iframe-text);font-family:var(--font-family);margin:0;min-height:100%}.Wrapper{box-sizing:border-box;padding:var(--iframe-spacing);width:100%}a{color:var(--color-Iframe-link);text-decoration:underline}a:focus-visible,button:focus-visible,summary:focus-visible{border-radius:.25em;outline:3px solid currentcolor;outline-offset:2px}code[class*=language-],pre[class*=language-]{border-radius:0;box-shadow:none;text-shadow:none}.Code code,.Documentation code,:not(pre)>code[class*=language-]{font-size-adjust:.525;text-shadow:none}.Code code,.Documentation,.ErrorMessage,.Information,:not(pre)>code[class*=language-]{line-height:3.125ex}.Code code,.Documentation code,.Information code,:not(pre)>code[class*=language-]{font-family:Menlo,Monaco,monospace}.Documentation h1{font-size:2.4em;font-weight:700;line-height:1;text-transform:capitalize}.Documentation>*+*{margin-top:3.125ex}.Documentation i{font-style:italic}.Documentation table{border-spacing:0}.Documentation th{border-block-end:.0625rem solid currentcolor;text-align:left}.Documentation :is(th,td){padding:.25em .5em}.Documentation tr:not(:last-child) td{border-block-end:.0625rem solid var(--color-Outline)}.Information-val{margin-inline-start:0}.Component-variationHeader{display:flex;font-size:14px;gap:16px;inset-inline-end:40px;line-height:1;position:absolute;top:13px}.Documentation>:first-child{margin-top:0}.Documentation p{max-width:64ch}.SectionTitle{align-items:center;display:flex;font-size:1.6em;margin:2em 0 1em;scroll-margin-top:1.5em}.SectionTitle:after{background:var(--color-Outline);content:"";flex:1;height:.0625rem;margin-inline-start:20px}.Information-wrapper+.Information-wrapper{margin-top:30px}.Information-attr{color:var(--color-Iframe-text-secondary);font-family:var(--font-family);font-size:.875em;letter-spacing:.0375em;text-decoration:none;text-transform:uppercase}.Information-attr:not(:first-child){margin-top:1em}.Documentation code,.Information code{font-weight:600}.Status:before{display:inline-block;margin-inline-end:.5em}.Status--valid{color:var(--color-Positive)}.Status--valid:before{content:"✓"}.Status--invalid{color:var(--color-Negative)}.Status--invalid:before{content:"✗"}.Error{align-items:center;display:flex;height:100%;justify-content:center;margin:0}.Error,.ErrorMessage{color:var(--color-Negative)}.ErrorMessage{margin:1.5em 0}.Iframe-newTabLink{align-items:center;display:flex;font-weight:400}.Iframe-newTabLink:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3'/%3E%3C/svg%3E");content:"";display:block;height:1em;margin-inline-end:.5em;width:1em}.Code,:not(pre)>code[class*=language-],pre[class*=language-]{background:var(--color-Code-background)}:not(pre)>code[class*=language-],pre[class*=language-]{border-color:var(--color-Outline)}.Code,:not(pre)>code[class*=language-]{border:.0625rem solid var(--color-Outline);padding:calc(var(--iframe-spacing)/2)}.Code,pre[class*=language-]{font-size:.875em}.Tabs-tab summary{cursor:default;list-style-type:none;padding-block:10px;padding-inline-start:16px;position:relative}.Tabs-tab summary:before{border:var(--toggle-border);border-color:currentcolor;border-inline-end-width:.25em;border-top-width:.25em;content:"";display:block;font-size:.4em;height:var(--toggle-height);inset-inline-start:.25rem;position:absolute;top:50%;transition:var(--toggle-transition);width:var(--toggle-width)}.Tabs-tab summary::-webkit-details-marker{display:none}.Tabs-tab:not([open]) summary:before{transform:var(--toggle-transition-closed)}.Tabs-tab[open] summary:before{transform:var(--toggle-transition-opened)}.Component:not(:last-child){margin-bottom:calc(var(--iframe-spacing)*2)}.Component-iframeWrapper{height:calc(100vh - var(--iframe-spacing)*2.5);width:100%}.Component-iframeWrapper:not(.has-fixedHeight){outline:.0625rem solid var(--color-Outline);resize:both}.Component-iframe{height:100%;width:100%}.Component-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding:0 0 20px}.Component-headMeta{align-items:center;display:flex;gap:16px}.Component-mockValidation{appearance:none;background:none;border:none;color:var(--color-Iframe-link);cursor:pointer;font-family:var(--font-family);font-size:inherit;line-height:1;margin:0;padding:0;text-decoration:underline}.Component-mockData{background:light-dark(#f2f2f2,#1f1f1f);border:none;box-sizing:border-box;height:calc(100vb - var(--iframe-spacing)*2);max-width:70ch;overscroll-behavior:contain;padding:var(--iframe-spacing);width:calc(100vi - var(--iframe-spacing)*2)}.Component-mockData::backdrop{background:light-dark(hsla(0,0%,100%,.8),rgba(0,0,0,.8))}.Component-mockData:not([open]){display:none}.Component-mockDataHeading{margin-block:0 1em}.Component-closeMockData{appearance:none;background:none;border:0;color:var(--color-Iframe-link);cursor:pointer;inset-block-start:1rem;inset-inline-end:1rem;line-height:1;margin:0;padding:0;position:absolute;text-decoration:underline}.Component-closeMockData,.Component-file{font-family:var(--font-family);font-size:.875em}.Component-file{align-items:center;color:var(--color-Iframe-text-secondary);display:inline-flex;flex-wrap:wrap;letter-spacing:.0375em;text-decoration:none;text-transform:uppercase}.Component-file:active,.Component-file:focus,.Component-file:hover{text-decoration:underline}.Component-fileFolders{color:var(--color-Iframe-text-tertiary)}.ComponentView{border:.0625rem solid var(--color-Outline);box-sizing:border-box;height:calc(100vh - var(--iframe-spacing)*2);overflow:hidden;resize:both;width:100%}.ComponentView-iframe{height:100%;width:100%}[data-mode=presentation] .DeveloperInformation{display:none}@media screen and (prefers-reduced-motion){*,:after,:before{animation:none!important;transition:none!important}}@media (prefers-color-scheme:dark){.Iframe-newTabLink:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3'/%3E%3C/svg%3E")}}

package/dist/css/main.css

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

@@ -0,0 +1,35 @@
+.PerfSection .PerfChip {
+  background: var(--color-Code-background);
+  border: 1px solid var(--color-Outline);
+  border-radius: 999px;
+  display: inline-block;
+  font-family: var(--font-family);
+  font-size: 0.875em;
+  padding: 0.125rem 0.625rem;
+}
+
+.PerfSection .PerfChip--ok {
+  background: light-dark(hsl(135deg 60% 92%), hsl(135deg 30% 18%));
+  border-color: var(--color-Positive);
+}
+
+.PerfSection .PerfChip--warn {
+  background: light-dark(hsl(45deg 90% 88%), hsl(45deg 50% 18%));
+  border-color: light-dark(hsl(35deg 90% 45%), hsl(35deg 80% 60%));
+}
+
+.PerfSection .PerfChip--exceed {
+  background: light-dark(hsl(0deg 70% 92%), hsl(0deg 40% 22%));
+  border-color: var(--color-Negative);
+  color: var(--color-Negative);
+}
+
+.PerfSection .PerfChip--missing {
+  border-style: dashed;
+  color: var(--color-Iframe-text-secondary);
+}
+
+.PerfSection .PerfChip--unbudgeted {
+  background: transparent;
+  color: var(--color-Iframe-text-secondary);
+}

package/frontend/assets/css/iframe.css

@@ -4,7 +4,7 @@
 @import url("./iframe/accordion-tabs.css") layer(miyagi);
 @import url("./iframe/jsontree.js.css") layer(miyagi);
 @import url("./iframe/styleguide/index.css") layer(miyagi);
-@import url("./iframe/performance.css") layer(miyagi);
+@import url("./iframe/perf.css") layer(miyagi);
 
 html {
   --iframe-spacing: clamp(0.75rem, 4vi, 2.5rem);

package/frontend/assets/css/main/perf.css

@@ -0,0 +1,63 @@
+.PerfBanner {
+  align-items: center;
+  background: var(--color-Menu-background);
+  border-block-end: 1px solid var(--color-Outline);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.875em;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+}
+
+.PerfBanner-label {
+  color: var(--color-Text);
+  font-weight: 600;
+  margin-inline-end: 0.5rem;
+}
+
+.PerfBanner-errors {
+  color: var(--color-Negative);
+  font-weight: 600;
+  margin-inline-start: auto;
+}
+
+.PerfChip {
+  background: var(--color-Code-background);
+  border: 1px solid var(--color-Outline);
+  border-radius: 999px;
+  display: inline-flex;
+  font-family: var(--font-family);
+  gap: 0.25rem;
+  padding: 0.125rem 0.625rem;
+}
+
+.PerfChip b {
+  font-weight: 600;
+}
+
+.PerfChip--ok {
+  background: light-dark(hsl(135deg 60% 92%), hsl(135deg 30% 18%));
+  border-color: var(--color-Positive);
+}
+
+.PerfChip--warn {
+  background: light-dark(hsl(45deg 90% 88%), hsl(45deg 50% 18%));
+  border-color: light-dark(hsl(35deg 90% 45%), hsl(35deg 80% 60%));
+}
+
+.PerfChip--exceed {
+  background: light-dark(hsl(0deg 70% 92%), hsl(0deg 40% 22%));
+  border-color: var(--color-Negative);
+  color: var(--color-Negative);
+}
+
+.PerfChip--missing {
+  background: var(--color-Code-background);
+  border-style: dashed;
+  color: var(--color-Iframe-text-secondary, currentcolor);
+}
+
+.PerfChip--unbudgeted {
+  background: transparent;
+  color: var(--color-Iframe-text-secondary, currentcolor);
+}

package/frontend/assets/css/main.css

@@ -3,6 +3,7 @@
 @import url("./main/reset.css");
 @import url("./main/menu.css");
 @import url("./main/controls.css");
+@import url("./main/perf.css");
 
 html {
   height: 100%;

package/frontend/views/iframe_component.twig.miyagi

@@ -19,6 +19,23 @@
 						</div>
 					</dl>
 				{% endif %}
+				{% if perfSection %}
+					<h2 class="SectionTitle">Performance</h2>
+					<dl class="Information PerfSection">
+						<div class="Information-wrapper">
+							<dt class="Information-attr">CSS</dt>
+							<dd class="Information-val">
+								<span class="PerfChip PerfChip--{{ perfSection.css.status }}">{{ perfSection.css.bytesLabel }}{% if perfSection.css.budgetLabel %} / {{ perfSection.css.budgetLabel }}{% else %} (no budget){% endif %}</span>
+							</dd>
+						</div>
+						<div class="Information-wrapper">
+							<dt class="Information-attr">JS</dt>
+							<dd class="Information-val">
+								<span class="PerfChip PerfChip--{{ perfSection.js.status }}">{{ perfSection.js.bytesLabel }}{% if perfSection.js.budgetLabel %} / {{ perfSection.js.budgetLabel }}{% else %} (no budget){% endif %}</span>
+							</dd>
+						</div>
+					</dl>
+				{% endif %}
 				{% if renderFileTabs %}
 					<h2 class="SectionTitle">Files</h2>
 					<div class="Tabs">

package/frontend/views/main.twig.miyagi

@@ -16,6 +16,18 @@
     {% include "@miyagi/menu/menu.twig.miyagi" %}
 
     <main class="Content">
+      {% if perfBanner %}
+        <div class="PerfBanner" data-template="{{ perfBanner.templatePath }}" data-variation="{{ perfBanner.variation }}">
+          <span class="PerfBanner-label">Page perf</span>
+          <span class="PerfChip PerfChip--{{ perfBanner.css.status }}"><span class="u-hiddenVisually">Sum of declared component </span><b>CSS</b> {{ perfBanner.css.bytesLabel }}{% if perfBanner.css.budgetLabel %} / {{ perfBanner.css.budgetLabel }}{% endif %}</span>
+          <span class="PerfChip PerfChip--{{ perfBanner.js.status }}"><span class="u-hiddenVisually">Sum of declared component </span><b>JS</b> {{ perfBanner.js.bytesLabel }}{% if perfBanner.js.budgetLabel %} / {{ perfBanner.js.budgetLabel }}{% endif %}</span>
+          <span class="PerfChip PerfChip--{{ perfBanner.html.status }}"><span class="u-hiddenVisually">Rendered </span><b>HTML</b><span class="u-hiddenVisually"> size</span> {{ perfBanner.html.bytesLabel }}{% if perfBanner.html.budgetLabel %} / {{ perfBanner.html.budgetLabel }}{% endif %}</span>
+          <span class="PerfChip PerfChip--{{ perfBanner.total.status }}"><b>Total</b><span class="u-hiddenVisually"> CSS + JS + HTML</span> {{ perfBanner.total.bytesLabel }}{% if perfBanner.total.budgetLabel %} / {{ perfBanner.total.budgetLabel }}{% endif %}</span>
+          {% if perfBanner.errors and perfBanner.errors|length > 0 %}
+            <span class="PerfBanner-errors">⚠ {{ perfBanner.errors|length }} undeclared<span class="u-hiddenVisually"> components missing from miyagi.performance.json</span></span>
+          {% endif %}
+        </div>
+      {% endif %}
       <div class="FrameWrapper">
         <iframe class="Frame" id="iframe" src="{{ iframeSrc }}" name="iframe" title="Components"></iframe>
       </div>

package/frontend/views/menu/nav.twig.miyagi

@@ -17,7 +17,7 @@
 							></button>
 						{% endif %}
 
-						{% if (item.section == "design-tokens" or item.section == "performance") and item.url %}
+						{% if item.section == "design-tokens" and item.url %}
 							<a
 								class="Nav-item Nav-item--link"
 								href="{{ item.url }}"

package/lib/build/index.js

@@ -7,8 +7,6 @@ import appConfig from "../default-config.js";
 import { t } from "../i18n/index.js";
 import log from "../logger.js";
 import { getVariationData } from "../mocks/index.js";
-import { runPerformance } from "../performance/index.js";
-import { generatePerformanceReport } from "../performance/report.js";
 
 /**
  * Module for creating a static build
@@ -178,12 +176,6 @@ export default () => {
           .then(async () => {
             await createJsonOutputFile(buildFolder, paths);
 
-            const performanceError = await writePerformanceReport(buildFolder);
-            if (performanceError) {
-              reject(performanceError);
-              return;
-            }
-
             resolve(
               t("buildDone").replace(
                 "{{count}}",
@@ -198,71 +190,6 @@ export default () => {
     });
   });
 
-  /**
-   * Runs the performance-budget check against the just-built output, logs a
-   * summary, and (when configured) writes a markdown report. Never throws —
-   * a missing budget configuration is treated as "feature disabled". The only
-   * way this returns an Error is when `performance.report.failOnExceed` is on
-   * and a budget has actually been exceeded.
-   * @param {string} buildFolder
-   * @returns {Promise<Error|null>}
-   */
-  async function writePerformanceReport(buildFolder) {
-    const perfConfig = global.config.performance;
-    if (!perfConfig || !perfConfig.enabled) {
-      return null;
-    }
-
-    let result;
-    try {
-      result = runPerformance({
-        config: global.config,
-        html: true,
-        buildFolder,
-      });
-    } catch (error) {
-      log("warn", `Performance budget check skipped: ${error.message}`);
-      return null;
-    }
-
-    const configuredOutput = perfConfig.report?.output;
-    if (configuredOutput) {
-      // A bare filename (no directory component) lands inside the build folder
-      // alongside output.json; anything with a directory is honoured as-is.
-      const outputPath =
-        path.dirname(configuredOutput) === "."
-          ? path.join(buildFolder, configuredOutput)
-          : path.resolve(configuredOutput);
-
-      try {
-        await writeFile(
-          outputPath,
-          generatePerformanceReport(result),
-          "utf-8",
-        );
-        log("info", null, `Wrote ${outputPath}.`);
-      } catch (error) {
-        log("warn", `Failed to write performance report: ${error.message}`);
-      }
-    }
-
-    const { exceed, warn, ok, unbudgeted } = result.summary;
-    const summaryLine = `Performance budget (${result.compression}): ${ok} ok, ${warn} warn, ${exceed} exceed, ${unbudgeted} unbudgeted.`;
-
-    if (exceed > 0) {
-      log("warn", summaryLine);
-      if (perfConfig.report?.failOnExceed) {
-        return new Error(
-          `Performance budget exceeded in ${exceed} categor${exceed === 1 ? "y" : "ies"}.`,
-        );
-      }
-    } else {
-      log("info", summaryLine);
-    }
-
-    return null;
-  }
-
   /**
    * Creates an "output.json" file with the given array as content
    * @param {string} buildFolder

package/lib/cli/index.js

@@ -3,11 +3,11 @@ import componentImport from "./component.js";
 import drupalAssetsImport from "./drupal-assets.js";
 import doctorImport from "./doctor.js";
 import validateHtmlImport from "./validate-html.js";
-import budgetImport from "./budget.js";
+import perfImport from "./perf.js";
 
 export const lint = lintImport;
 export const component = componentImport;
 export const drupalAssets = drupalAssetsImport;
 export const doctor = doctorImport;
 export const validateHtml = validateHtmlImport;
-export const budgetCli = budgetImport;
+export const perfCli = perfImport;

package/lib/cli/perf.js

@@ -0,0 +1,130 @@
+// @ts-check
+
+import init from "../index.js";
+import getConfig from "../config.js";
+import { runPerformance } from "../performance/index.js";
+import { renderPageHtml } from "../performance/render-page.js";
+import { formatSize } from "../performance/parse-size.js";
+import { loadPerformanceConfig } from "../performance/config.js";
+import { EXIT_CODES } from "../errors.js";
+import log from "../logger.js";
+
+const STATUS_GLYPH = {
+  ok: "✓",
+  warn: "⚠",
+  exceed: "✗",
+  unbudgeted: "·",
+  missing: "?",
+};
+
+/**
+ * @param {object} args - parsed yargs args
+ * @returns {Promise<object>} CLI result envelope
+ */
+export default async function perfCli(args) {
+  const cwd = process.cwd();
+  // Probe for the config file before booting the full app — that avoids
+  // initializing the render pipeline for projects that haven't opted in.
+  const probe = loadPerformanceConfig({ cwd });
+  if (!probe) {
+    log("info", "Performance feature not configured (no miyagi.performance.json).");
+    return {
+      success: true,
+      code: EXIT_CODES.SUCCESS,
+      shouldExit: true,
+    };
+  }
+
+  const warnRatioOverride = args["warn-ratio"] ?? args.warnRatio;
+  if (warnRatioOverride != null) {
+    if (
+      typeof warnRatioOverride !== "number" ||
+      Number.isNaN(warnRatioOverride) ||
+      warnRatioOverride <= 0 ||
+      warnRatioOverride >= 1
+    ) {
+      log("error", `--warn-ratio must be a number in (0, 1); got ${warnRatioOverride}.`);
+      return {
+        success: false,
+        code: EXIT_CODES.CLI_USAGE_ERROR,
+        shouldExit: true,
+      };
+    }
+  }
+
+  // Initialize Miyagi like the api endpoints do — full state + engines, no
+  // listen(). Needed so renderPageHtml() can resolve mocks and run templates.
+  global.config = await getConfig(args, false);
+  await init("api");
+
+  const result = await runPerformance({
+    cwd,
+    componentsFolder: global.config.components.folder,
+    compression: args.compression,
+    warnRatio: warnRatioOverride,
+    render: renderPageHtml,
+  });
+
+  if (args.json) {
+    process.stdout.write(`${JSON.stringify(result, null, 2)}\n`);
+  } else {
+    printTable(result);
+  }
+
+  const failed =
+    args.fail &&
+    (result.summary.components.exceed > 0 || result.summary.pages.exceed > 0);
+
+  return {
+    success: !failed,
+    code: failed ? EXIT_CODES.GENERAL_ERROR : EXIT_CODES.SUCCESS,
+    shouldExit: true,
+  };
+}
+
+/**
+ * @param {object} result - return value of runPerformance()
+ * @returns {void}
+ */
+function printTable(result) {
+  process.stdout.write(
+    `Performance (${result.compression}, warn at ${result.warnRatio})\n`,
+  );
+
+  if (result.components.length > 0) {
+    process.stdout.write("\nComponents:\n");
+    for (const c of result.components) {
+      process.stdout.write(
+        `  ${formatLine(c.componentPath, "CSS", c.css)}\n`,
+      );
+      process.stdout.write(`  ${formatLine(c.componentPath, "JS", c.js)}\n`);
+    }
+  }
+
+  if (result.pages.length > 0) {
+    process.stdout.write("\nPages:\n");
+    for (const p of result.pages) {
+      const id = `${p.templatePath}#${p.variation}`;
+      process.stdout.write(`  ${formatLine(id, "CSS", p.totals.css)}\n`);
+      process.stdout.write(`  ${formatLine(id, "JS", p.totals.js)}\n`);
+      process.stdout.write(`  ${formatLine(id, "HTML", p.totals.html)}\n`);
+      process.stdout.write(`  ${formatLine(id, "Total", p.totals.total)}\n`);
+      for (const e of p.totals.errors ?? []) {
+        process.stdout.write(`    ! ${e.componentPath}: ${e.reason}\n`);
+      }
+    }
+  }
+}
+
+/**
+ * @param {string} subject
+ * @param {string} kind
+ * @param {object} metric
+ * @returns {string}
+ */
+function formatLine(subject, kind, metric) {
+  const glyph = STATUS_GLYPH[metric.status] ?? " ";
+  const budget =
+    metric.budget == null ? "(no budget)" : `/ ${formatSize(metric.budget)}`;
+  return `${glyph} ${subject} ${kind}: ${formatSize(metric.bytes)} ${budget} [${metric.status}]`;
+}

package/lib/cli/run.js

@@ -10,7 +10,7 @@ import {
   drupalAssets,
   doctor,
   validateHtml as validateHtmlCli,
-  budgetCli,
+  perfCli,
 } from "./index.js";
 import { EXIT_CODES, MiyagiError } from "../errors.js";
 
@@ -240,9 +240,9 @@ async function runDoctorCommand(args) {
  * @param {object} args
  * @returns {Promise<object>}
  */
-async function runBudgetCommand(args) {
+async function runPerfCommand(args) {
   applyCliEnv(args);
-  return await budgetCli(args);
+  return await perfCli(args);
 }
 
 /**
@@ -291,7 +291,7 @@ export async function runCli(argv = process.argv) {
       validateHtml: runValidateHtmlCommand,
       drupalAssets: runDrupalAssetsCommand,
       doctor: runDoctorCommand,
-      budget: runBudgetCommand,
+      perf: runPerfCommand,
     },
     argv,
   );