@ui-doc/html-renderer 0.1.1 → 0.3.0

package/dist/assets/src/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function ready(callback: () => void): void;
+export declare function throttle(callback: (...args: any[]) => void, delay: number): (...args: any[]) => void;

package/dist/assets/ui-doc.cjs

@@ -1,14 +1,5 @@
 'use strict';
 
-function ready(callback) {
-    if (document.readyState !== 'loading') {
-        callback();
-    }
-    else {
-        document.addEventListener('DOMContentLoaded', callback);
-    }
-}
-
 function initExample() {
     document.querySelectorAll('[data-example] > iframe').forEach(iframe => {
         var _a, _b;
@@ -16,23 +7,33 @@ function initExample() {
         if (!document) {
             return;
         }
-        const action = () => {
+        const initHeightChange = () => {
+            let currentHeight = 0;
             const changeHeight = () => {
-                iframe.style.height = `${document.body.scrollHeight}px`;
+                if (document.body.scrollHeight === currentHeight) {
+                    return;
+                }
+                currentHeight = document.body.scrollHeight;
+                iframe.style.height = `${currentHeight}px`;
             };
+            // Initial height change
             changeHeight();
-            const observer = new MutationObserver(changeHeight);
-            observer.observe(document.body, {
+            // Use MutationObserver to detect changes in the DOM and change height if required
+            const mutationObserver = new MutationObserver(changeHeight);
+            mutationObserver.observe(document.body, {
                 attributes: true,
                 childList: true,
                 subtree: true,
             });
+            // Use ResizeObserver to detect changes in the viewport and change height if required
+            const resizeObserver = new ResizeObserver(changeHeight);
+            resizeObserver.observe(document.body);
         };
         if (document.readyState === 'complete') {
-            action();
+            initHeightChange();
         }
         else {
-            iframe.addEventListener('load', action);
+            iframe.addEventListener('load', initHeightChange);
         }
     });
 }
@@ -74,6 +75,15 @@ function initSidebar() {
     });
 }
 
+function ready(callback) {
+    if (document.readyState !== 'loading') {
+        callback();
+    }
+    else {
+        document.addEventListener('DOMContentLoaded', callback);
+    }
+}
+
 ready(() => {
     initExample();
     initSidebar();

package/dist/assets/ui-doc.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ui-doc.cjs","sources":["../../../scripts/src/base.ts","../../../scripts/src/example.ts","../../../scripts/src/sidebar.ts","../../../scripts/app.ts"],"sourcesContent":["export function ready(callback: () => void) {\n  if (document.readyState !== 'loading') {\n    callback()\n  } else {\n    document.addEventListener('DOMContentLoaded', callback)\n  }\n}\n","export function initExample() {\n  document.querySelectorAll<HTMLIFrameElement>('[data-example] > iframe').forEach(iframe => {\n    const document = iframe.contentDocument ?? iframe.contentWindow?.document\n\n    if (!document) {\n      return\n    }\n\n    const action = () => {\n      const changeHeight = () => {\n        iframe.style.height = `${document.body.scrollHeight}px`\n      }\n\n      changeHeight()\n\n      const observer = new MutationObserver(changeHeight)\n\n      observer.observe(document.body, {\n        attributes: true,\n        childList: true,\n        subtree: true,\n      })\n    }\n\n    if (document.readyState === 'complete') {\n      action()\n    } else {\n      iframe.addEventListener('load', action)\n    }\n  })\n}\n","function createSidebar(sidebar: HTMLElement) {\n  const links: Record<string, HTMLLinkElement> = {}\n  const observer = new IntersectionObserver(\n    entries => {\n      const activeEntries = entries.filter(entry => entry.isIntersecting)\n\n      if (activeEntries.length <= 0) {\n        return\n      }\n\n      Object.keys(links).forEach(id => {\n        links[id].classList.remove('active')\n      })\n\n      const activeLink = links[activeEntries[0].target.id]\n\n      activeLink.classList.add('active')\n      if (activeLink?.parentElement?.parentElement?.parentElement instanceof HTMLLIElement) {\n        activeLink.parentElement.parentElement.parentElement\n          .querySelector('a')\n          ?.classList.add('active')\n      }\n    },\n    {\n      root: null,\n      rootMargin: '0px 0px -90% 0px',\n      threshold: 0.5,\n    },\n  )\n\n  sidebar.querySelectorAll<HTMLLinkElement>('a[href^=\"#\"]').forEach(link => {\n    const id = link.href.split('#')[1]\n    const target = document.getElementById(id)\n\n    if (target) {\n      observer.observe(target)\n      links[id] = link\n    }\n  })\n}\n\nexport function initSidebar() {\n  document.querySelectorAll('[data-sidebar]').forEach(sidebar => {\n    createSidebar(sidebar as HTMLElement)\n  })\n}\n","import { ready } from './src/base'\nimport { initExample } from './src/example'\nimport { initSidebar } from './src/sidebar'\n\nready(() => {\n  initExample()\n  initSidebar()\n})\n"],"names":[],"mappings":";;AAAM,SAAU,KAAK,CAAC,QAAoB,EAAA;AACxC,IAAA,IAAI,QAAQ,CAAC,UAAU,KAAK,SAAS,EAAE;AACrC,QAAA,QAAQ,EAAE,CAAA;KACX;SAAM;AACL,QAAA,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAA;KACxD;AACH;;SCNgB,WAAW,GAAA;IACzB,QAAQ,CAAC,gBAAgB,CAAoB,yBAAyB,CAAC,CAAC,OAAO,CAAC,MAAM,IAAG;;AACvF,QAAA,MAAM,QAAQ,GAAG,CAAA,EAAA,GAAA,MAAM,CAAC,eAAe,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAM,CAAC,aAAa,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,QAAQ,CAAA;QAEzE,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;SACP;QAED,MAAM,MAAM,GAAG,MAAK;YAClB,MAAM,YAAY,GAAG,MAAK;AACxB,gBAAA,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAA,EAAA,CAAI,CAAA;AACzD,aAAC,CAAA;AAED,YAAA,YAAY,EAAE,CAAA;AAEd,YAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,YAAY,CAAC,CAAA;AAEnD,YAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AAC9B,gBAAA,UAAU,EAAE,IAAI;AAChB,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,OAAO,EAAE,IAAI;AACd,aAAA,CAAC,CAAA;AACJ,SAAC,CAAA;AAED,QAAA,IAAI,QAAQ,CAAC,UAAU,KAAK,UAAU,EAAE;AACtC,YAAA,MAAM,EAAE,CAAA;SACT;aAAM;AACL,YAAA,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;SACxC;AACH,KAAC,CAAC,CAAA;AACJ;;AC9BA,SAAS,aAAa,CAAC,OAAoB,EAAA;IACzC,MAAM,KAAK,GAAoC,EAAE,CAAA;AACjD,IAAA,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,OAAO,IAAG;;AACR,QAAA,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,cAAc,CAAC,CAAA;AAEnE,QAAA,IAAI,aAAa,CAAC,MAAM,IAAI,CAAC,EAAE;YAC7B,OAAM;SACP;QAED,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;YAC9B,KAAK,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;AACtC,SAAC,CAAC,CAAA;AAEF,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;AAEpD,QAAA,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;AAClC,QAAA,IAAI,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,UAAU,KAAA,IAAA,IAAV,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,UAAU,CAAE,aAAa,0CAAE,aAAa,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,aAAY,aAAa,EAAE;AACpF,YAAA,CAAA,EAAA,GAAA,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,aAAa;iBACjD,aAAa,CAAC,GAAG,CAAC,MACjB,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;SAC5B;AACH,KAAC,EACD;AACE,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,UAAU,EAAE,kBAAkB;AAC9B,QAAA,SAAS,EAAE,GAAG;AACf,KAAA,CACF,CAAA;IAED,OAAO,CAAC,gBAAgB,CAAkB,cAAc,CAAC,CAAC,OAAO,CAAC,IAAI,IAAG;AACvE,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;QAClC,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAA;QAE1C,IAAI,MAAM,EAAE;AACV,YAAA,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;AACxB,YAAA,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;SACjB;AACH,KAAC,CAAC,CAAA;AACJ,CAAC;SAEe,WAAW,GAAA;IACzB,QAAQ,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,OAAO,IAAG;QAC5D,aAAa,CAAC,OAAsB,CAAC,CAAA;AACvC,KAAC,CAAC,CAAA;AACJ;;ACzCA,KAAK,CAAC,MAAK;AACT,IAAA,WAAW,EAAE,CAAA;AACb,IAAA,WAAW,EAAE,CAAA;AACf,CAAC,CAAC;;"}
+{"version":3,"file":"ui-doc.cjs","sources":["../../../scripts/src/example.ts","../../../scripts/src/sidebar.ts","../../../scripts/src/utils.ts","../../../scripts/app.ts"],"sourcesContent":["export function initExample() {\n  document.querySelectorAll<HTMLIFrameElement>('[data-example] > iframe').forEach(iframe => {\n    const document = iframe.contentDocument ?? iframe.contentWindow?.document\n\n    if (!document) {\n      return\n    }\n\n    const initHeightChange = () => {\n      let currentHeight = 0\n      const changeHeight = () => {\n        if (document.body.scrollHeight === currentHeight) {\n          return\n        }\n\n        currentHeight = document.body.scrollHeight\n        iframe.style.height = `${currentHeight}px`\n      }\n\n      // Initial height change\n      changeHeight()\n\n      // Use MutationObserver to detect changes in the DOM and change height if required\n      const mutationObserver = new MutationObserver(changeHeight)\n\n      mutationObserver.observe(document.body, {\n        attributes: true,\n        childList: true,\n        subtree: true,\n      })\n\n      // Use ResizeObserver to detect changes in the viewport and change height if required\n      const resizeObserver = new ResizeObserver(changeHeight)\n\n      resizeObserver.observe(document.body)\n    }\n\n    if (document.readyState === 'complete') {\n      initHeightChange()\n    } else {\n      iframe.addEventListener('load', initHeightChange)\n    }\n  })\n}\n","function createSidebar(sidebar: HTMLElement) {\n  const links: Record<string, HTMLLinkElement> = {}\n  const observer = new IntersectionObserver(\n    entries => {\n      const activeEntries = entries.filter(entry => entry.isIntersecting)\n\n      if (activeEntries.length <= 0) {\n        return\n      }\n\n      Object.keys(links).forEach(id => {\n        links[id].classList.remove('active')\n      })\n\n      const activeLink = links[activeEntries[0].target.id]\n\n      activeLink.classList.add('active')\n      if (activeLink?.parentElement?.parentElement?.parentElement instanceof HTMLLIElement) {\n        activeLink.parentElement.parentElement.parentElement\n          .querySelector('a')\n          ?.classList.add('active')\n      }\n    },\n    {\n      root: null,\n      rootMargin: '0px 0px -90% 0px',\n      threshold: 0.5,\n    },\n  )\n\n  sidebar.querySelectorAll<HTMLLinkElement>('a[href^=\"#\"]').forEach(link => {\n    const id = link.href.split('#')[1]\n    const target = document.getElementById(id)\n\n    if (target) {\n      observer.observe(target)\n      links[id] = link\n    }\n  })\n}\n\nexport function initSidebar() {\n  document.querySelectorAll('[data-sidebar]').forEach(sidebar => {\n    createSidebar(sidebar as HTMLElement)\n  })\n}\n","export function ready(callback: () => void) {\n  if (document.readyState !== 'loading') {\n    callback()\n  } else {\n    document.addEventListener('DOMContentLoaded', callback)\n  }\n}\n\nexport function throttle(callback: (...args: any[]) => void, delay: number) {\n  let timerFlag: number | null = null\n\n  return (...args: any[]) => {\n    if (timerFlag === null) {\n      callback(...args)\n      timerFlag = window.setTimeout(() => {\n        timerFlag = null\n      }, delay)\n    }\n  }\n}\n","import { initExample } from './src/example'\nimport { initSidebar } from './src/sidebar'\nimport { ready } from './src/utils'\n\nready(() => {\n  initExample()\n  initSidebar()\n})\n"],"names":[],"mappings":"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"}

package/dist/assets/ui-doc.css

@@ -299,6 +299,121 @@ small {
 .nav-list > ul > li > ul > li > .control:hover {
     --border-opacity: 1;
   }
+.colors {
+  display: grid;
+  grid-template-columns: repeat(var(--colors-columns, 1), 1fr);
+  gap: var(--colors-gap, var(--size-normal));
+}
+@container content (width > 300px) {
+.colors {
+    --colors-columns: 2
+}
+  }
+@container content (width > 620px) {
+.colors {
+    --colors-columns: 3
+}
+  }
+@container content (width > 940px) {
+.colors {
+    --colors-columns: 4
+}
+  }
+.colors > .item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-xs);
+  justify-content: center;
+
+  padding: var(--size-xl) var(--size-md);
+
+  text-align: center;
+
+  border: 1px solid rgb(var(--border-color, currentColor));
+}
+.colors > .item > .text {
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-bold);
+  }
+.spaces {
+  --spaces-bg-color: var(--font-color);
+  --spaces-font-color: var(--bg-color);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaces-gap, var(--size-xs));
+}
+.spaces > .item {
+  display: flex;
+}
+.spaces > .item > .bg {
+    --bg-color: var(--spaces-bg-color);
+    --font-color: var(--spaces-font-color);
+  }
+.spaces > .item > div {
+    padding: var(--size-sm) var(--size-normal);
+  }
+.spaces > .item > div:first-child {
+    margin-right: var(--space-value);
+  }
+.spaces > .item > div:last-child {
+    display: flex;
+  }
+.spaces > .item > div:last-child > *:not(:last-child) {
+      margin-right: var(--size-xs);
+      padding-right: var(--size-xs);
+      border-right: 1px solid currentcolor;
+    }
+.spaces > .item > div:last-child > .name {
+      font-weight: var(--font-weight-bold);
+    }
+.icons {
+  display: grid;
+  grid-template-columns: repeat(var(--icons-columns, 1), 1fr);
+  gap: var(--icons-gap, var(--size-normal));
+}
+@container content (width > 300px) {
+.icons {
+    --icons-columns: 2
+}
+  }
+@container content (width > 620px) {
+.icons {
+    --icons-columns: 3
+}
+  }
+@container content (width > 940px) {
+.icons {
+    --icons-columns: 4
+}
+  }
+.icons > .item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-xs);
+  justify-content: center;
+
+  padding: var(--size-xl) var(--size-md);
+
+  text-align: center;
+
+  border: 1px solid rgb(var(--border-color));
+}
+.icons > .item > .show, .icons > .item > .show::before, .icons > .item > .text::before, .icons > .item > .text::after {
+    font-family: var(--icons-font-family);
+  }
+.icons > .item > .show {
+    font-size: var(--icons-show-font-size, 3em);
+  }
+.icons > .item > .name {
+    font-weight: var(--font-weight-bold);
+  }
+.icons > .item.from-var > .show::before, .icons > .item.from-var > .text::before, .icons > .item.from-var > .text::after {
+      content: var(--icon);
+    }
+.icons > .item.from-data > .text::before, .icons > .item.from-data > .text::after {
+      content: attr(data-icon);
+    }
 html {
   scroll-behavior: smooth;
   scrollbar-gutter: stable;
@@ -341,6 +456,8 @@ body > main > .sidebar > .scroll {
     max-height: calc(100vh - var(--nav-main-height));
   }
 body > main > .content {
+  container-name: content;
+  container-type: inline-size;
   margin-left: calc(var(--main-sidebar-width) + var(--main-content-sidebar-space));
 }
 body > main > .content > .headline + .description {

package/dist/assets/ui-doc.css.map

@@ -1 +1 @@
-{"version":3,"sources":["01_resets/root.css","01_resets/initial.css","01_resets/typography.css","02_objects/background.css","02_objects/text.css","02_objects/padding.css","02_objects/margin.css","02_objects/width.css","02_objects/control.css","03_components/example-markup.css","03_components/text-flow.css","03_components/nav/main.css","03_components/nav/list.css","04_layouts/page.css"],"names":[],"mappings":"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","file":"ui-doc.css","sourcesContent":[":root {\n  --font-weight-normal: 400;\n  --font-weight-bold: 700;\n  --font-size-sm: 0.85em;\n  --font-size-normal: 1em;\n  --font-size-md: 1.2em;\n  --font-size-lg: 1.7em;\n  --font-size-base: 16px;\n  --font-color: 3 3 3;\n  --font-family: system-ui, \"Segoe UI\", roboto, helvetica, arial, sans-serif, \"Apple Color Emoji\",\n    \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  --font-weight: var(--font-weight-normal);\n  --font-size: var(--font-size-normal);\n  --font-line-height: 1.4;\n  --headline-weight: var(--font-weight-bold);\n  --bg-color: 255 255 255;\n  --accent-color: 3 3 200;\n  --border-color: 5 5 5;\n  --selection-color: var(--bg-color);\n  --selection-bg-color: var(--font-color);\n  --size-base-unit: 1rem;\n  --size-xs: calc(0.5 * var(--size-base-unit));\n  --size-sm: calc(0.8 * var(--size-base-unit));\n  --size-normal: var(--size-base-unit);\n  --size-md: calc(1.2 * var(--size-base-unit));\n  --size-lg: calc(1.6 * var(--size-base-unit));\n  --size-xl: calc(2.4 * var(--size-base-unit));\n  --nav-main-menu-item-px: var(--size-sm);\n  --nav-main-menu-item-py: var(--size-xs);\n  --nav-main-menu-item-font-size: var(--font-size-md);\n  --nav-main-height: calc(\n    var(--nav-main-menu-item-py) * 2 + var(--nav-main-menu-item-font-size) * var(--font-line-height)\n  );\n\n  color-scheme: light;\n}\n","* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n*::after,\n*::before {\n  box-sizing: inherit;\n}\n\n::selection {\n  color: rgb(var(--selection-color));\n  background-color: rgb(var(--selection-bg-color));\n}\n\nbody {\n  background-color: rgb(var(--bg-color));\n}\n","html {\n  font-size: var(--font-size-base);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-size-adjust: 100%;\n  word-break: break-word;\n}\n\nbody,\n.font {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  line-height: var(--font-line-height);\n  color: rgb(var(--font-color));\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-family: var(--headline-family, inherit);\n  font-size: calc(var(--font-size-normal) * var(--headline-scale, 1));\n  font-weight: var(--headline-weight, inherit);\n  line-height: var(--headline-line-height, inherit);\n  color: rgb(var(--headline-color, inherit));\n}\n\nh1 {\n  --headline-scale: 2.5;\n}\n\nh2 {\n  --headline-scale: 2;\n}\n\nh3 {\n  --headline-scale: 1.75;\n}\n\nh4 {\n  --headline-scale: 1.5;\n}\n\na {\n  color: rgb(var(--link-color, inherit));\n  text-decoration: var(--link-decoration, none);\n}\n\nb,\nstrong {\n  --font-weight: var(--font-weight-bold);\n}\n\nsmall {\n  --font-size: var(--font-size-sm);\n}\n",".bg {\n  --selection-bg-color: var(--font-color);\n  --selection-color: var(--bg-color);\n\n  color: rgb(var(--font-color));\n  background: rgb(var(--bg-color));\n}\n",".tc {\n  color: rgb(var(--font-color));\n}\n",".padding,\n.pxy {\n  padding: var(--pt, var(--size-normal)) var(--pr, var(--size-normal)) var(--pb, var(--size-normal))\n    var(--pl, var(--size-normal));\n}\n\n.pt {\n  padding-top: var(--pt, var(--size-normal));\n}\n\n.pr {\n  padding-right: var(--pr, var(--size-normal));\n}\n\n.pb {\n  padding-bottom: var(--pb, var(--size-normal));\n}\n\n.pl {\n  padding-left: var(--pl, var(--size-normal));\n}\n\n.pxy {\n  --pt: var(--py, var(--size-normal));\n  --pb: var(--py, var(--size-normal));\n  --pl: var(--px, var(--size-normal));\n  --pr: var(--px, var(--size-normal));\n}\n\n.py {\n  --pt: var(--py, var(--size-normal));\n  --pb: var(--py, var(--size-normal));\n\n  @extend .pt;\n  @extend .pb;\n}\n\n.px {\n  --pl: var(--px, var(--size-normal));\n  --pr: var(--px, var(--size-normal));\n\n  @extend .pl;\n  @extend .pr;\n}\n",".margin,\n.mxy {\n  margin: var(--mt, var(--size-normal)) var(--mr, var(--size-normal)) var(--mb, var(--size-normal))\n    var(--ml, var(--size-normal));\n}\n\n.mt {\n  margin-top: var(--mt, var(--size-normal));\n}\n\n.mr {\n  margin-right: var(--mr, var(--size-normal));\n}\n\n.mb {\n  margin-bottom: var(--mb, var(--size-normal));\n}\n\n.ml {\n  margin-left: var(--ml, var(--size-normal));\n}\n\n.mxy {\n  --mt: var(--my, var(--size-normal));\n  --mb: var(--my, var(--size-normal));\n  --ml: var(--mx, var(--size-normal));\n  --mr: var(--mx, var(--size-normal));\n}\n\n.my {\n  --mt: var(--my, var(--size-normal));\n  --mb: var(--my, var(--size-normal));\n\n  @extend .mt;\n  @extend .mb;\n}\n\n.mx {\n  --ml: var(--mx, var(--size-normal));\n  --mr: var(--mx, var(--size-normal));\n\n  @extend .ml;\n  @extend .mr;\n}\n","[class*=\"width-\"] {\n  --width-calc: max(\n    var(--width-min-space-x, 32px),\n    calc((100% - var(--width-content, 1280px)) / 2)\n  );\n\n  padding-inline: var(--width-calc);\n}\n\n.width-content {\n  --width-content: 1280px;\n}\n\n.width-full {\n  --width: 100%;\n}\n",".control {\n  --px: 0;\n  --py: 0;\n\n  @extend .pxy;\n  @extend .font;\n\n  cursor: pointer;\n\n  display: inline-block;\n\n  text-align: center;\n  text-decoration: none;\n\n  appearance: none;\n  background: rgb(var(--control-bg-color, transparent));\n  border: none;\n  border-radius: unset;\n  outline: none;\n\n  &[aria-disabled=\"true\"],\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n",".example,\n.markup {\n  border: 1px solid rgb(var(--code-border-color, var(--border-color)));\n}\n\n.example,\n.markup > .code > .hljs {\n  padding: 1em;\n}\n\n.example {\n  display: flex;\n\n  > iframe {\n    width: 100%;\n    border: none;\n  }\n}\n\n.markup {\n  font-size: var(--font-size-xs);\n\n  > .code {\n    margin: 0;\n  }\n}\n\n.example + .markup {\n  margin-top: 0;\n  border-top: none;\n}\n",".text-flow {\n  > * + * {\n    margin-top: var(--text-flow-space, 1em);\n  }\n}\n",".nav-main {\n  @extend .bg;\n}\n\n.nav-main > .bar {\n  height: var(--nav-main-height);\n\n  > .control.title {\n    --px: var(--nav-main-menu-item-px);\n    --py: var(--nav-main-menu-item-py);\n    --font-weight: var(--font-weight-bold);\n  }\n}\n\n.nav-main > .menu {\n  position: absolute;\n  top: 0;\n  right: calc(var(--width-calc) - var(--nav-main-menu-item-px));\n\n  display: flex;\n  flex-direction: row;\n\n  height: var(--nav-main-height);\n\n  > .control {\n    --px: var(--nav-main-menu-item-px);\n    --py: var(--nav-main-menu-item-py);\n    --font-size: var(--nav-main-menu-item-font-size);\n    --font-weight: var(--font-weight-bold);\n\n    &[aria-current] {\n      --font-color: var(--accent-color);\n    }\n\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n}\n",".nav-list {\n  --nav-list-item-px: var(--size-sm);\n  --nav-list-item-py: var(--size-xs);\n  --nav-list-item-border-color: var(--border-color);\n\n  text-align: left;\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  > ul > li + li {\n    margin-top: var(--nav-list-root-item-space, var(--size-sm));\n  }\n\n  .control {\n    &.active {\n      --font-color: var(--accent-color);\n    }\n  }\n}\n\n.nav-list > ul > li > .control {\n  --py: var(--nav-list-item-py);\n  --pr: var(--nav-list-item-px);\n  --font-weight: var(--font-weight-bold);\n  --font-size: var(--font-size-md);\n}\n\n.nav-list > ul > li > ul > li > .control {\n  --py: var(--nav-list-item-py);\n  --px: var(--nav-list-item-px);\n\n  text-align: left;\n  border-left: 1px solid rgba(var(--nav-list-item-border-color) / var(--border-opacity, 0.1));\n\n  &:hover {\n    --border-opacity: 1;\n  }\n}\n","html {\n  scroll-behavior: smooth;\n  scrollbar-gutter: stable;\n  scroll-padding-top: var(--nav-main-height);\n  height: 100%;\n}\n\nhtml > body {\n  min-height: 100%;\n}\n\nbody > header {\n  padding-top: var(--nav-main-height);\n\n  > .nav-main {\n    position: fixed;\n    z-index: 1000;\n    top: 0;\n    width: 100%;\n  }\n}\n\nbody > main {\n  --main-sidebar-width: 25ch;\n  --main-content-sidebar-space: var(--size-xl);\n\n  position: relative;\n}\n\nbody > main > .sidebar {\n  position: absolute;\n  top: 0;\n  left: var(--width-calc);\n\n  width: var(--main-sidebar-width);\n  height: 100%;\n\n  > .scroll {\n    position: sticky;\n    top: var(--nav-main-height);\n\n    overflow-y: auto;\n\n    height: 100%;\n    max-height: calc(100vh - var(--nav-main-height));\n  }\n}\n\nbody > main > .content {\n  margin-left: calc(var(--main-sidebar-width) + var(--main-content-sidebar-space));\n\n  > .headline + .description {\n    margin-top: var(--size-md);\n  }\n\n  > section + section,\n  > section:first-of-type {\n    margin-top: var(--main-content-section-space, var(--size-lg));\n  }\n}\n\nfooter {\n  --mt: var(--size-xl);\n\n  > .text {\n    text-align: right;\n  }\n}\n"]}
+{"version":3,"sources":["01_resets/root.css","01_resets/initial.css","01_resets/typography.css","02_objects/background.css","02_objects/text.css","02_objects/padding.css","02_objects/margin.css","02_objects/width.css","02_objects/control.css","03_components/example-markup.css","03_components/text-flow.css","03_components/nav/main.css","03_components/nav/list.css","03_components/colors.css","03_components/spaces.css","03_components/icons.css","04_layouts/page.css"],"names":[],"mappings":"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","file":"ui-doc.css","sourcesContent":[":root {\n  --font-weight-normal: 400;\n  --font-weight-bold: 700;\n  --font-size-sm: 0.85em;\n  --font-size-normal: 1em;\n  --font-size-md: 1.2em;\n  --font-size-lg: 1.7em;\n  --font-size-base: 16px;\n  --font-color: 3 3 3;\n  --font-family: system-ui, \"Segoe UI\", roboto, helvetica, arial, sans-serif, \"Apple Color Emoji\",\n    \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  --font-weight: var(--font-weight-normal);\n  --font-size: var(--font-size-normal);\n  --font-line-height: 1.4;\n  --headline-weight: var(--font-weight-bold);\n  --bg-color: 255 255 255;\n  --accent-color: 3 3 200;\n  --border-color: 5 5 5;\n  --selection-color: var(--bg-color);\n  --selection-bg-color: var(--font-color);\n  --size-base-unit: 1rem;\n  --size-xs: calc(0.5 * var(--size-base-unit));\n  --size-sm: calc(0.8 * var(--size-base-unit));\n  --size-normal: var(--size-base-unit);\n  --size-md: calc(1.2 * var(--size-base-unit));\n  --size-lg: calc(1.6 * var(--size-base-unit));\n  --size-xl: calc(2.4 * var(--size-base-unit));\n  --nav-main-menu-item-px: var(--size-sm);\n  --nav-main-menu-item-py: var(--size-xs);\n  --nav-main-menu-item-font-size: var(--font-size-md);\n  --nav-main-height: calc(\n    var(--nav-main-menu-item-py) * 2 + var(--nav-main-menu-item-font-size) * var(--font-line-height)\n  );\n\n  color-scheme: light;\n}\n","* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n*::after,\n*::before {\n  box-sizing: inherit;\n}\n\n::selection {\n  color: rgb(var(--selection-color));\n  background-color: rgb(var(--selection-bg-color));\n}\n\nbody {\n  background-color: rgb(var(--bg-color));\n}\n","html {\n  font-size: var(--font-size-base);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-size-adjust: 100%;\n  word-break: break-word;\n}\n\nbody,\n.font {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  line-height: var(--font-line-height);\n  color: rgb(var(--font-color));\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-family: var(--headline-family, inherit);\n  font-size: calc(var(--font-size-normal) * var(--headline-scale, 1));\n  font-weight: var(--headline-weight, inherit);\n  line-height: var(--headline-line-height, inherit);\n  color: rgb(var(--headline-color, inherit));\n}\n\nh1 {\n  --headline-scale: 2.5;\n}\n\nh2 {\n  --headline-scale: 2;\n}\n\nh3 {\n  --headline-scale: 1.75;\n}\n\nh4 {\n  --headline-scale: 1.5;\n}\n\na {\n  color: rgb(var(--link-color, inherit));\n  text-decoration: var(--link-decoration, none);\n}\n\nb,\nstrong {\n  --font-weight: var(--font-weight-bold);\n}\n\nsmall {\n  --font-size: var(--font-size-sm);\n}\n",".bg {\n  --selection-bg-color: var(--font-color);\n  --selection-color: var(--bg-color);\n\n  color: rgb(var(--font-color));\n  background: rgb(var(--bg-color));\n}\n",".tc {\n  color: rgb(var(--font-color));\n}\n",".padding,\n.pxy {\n  padding: var(--pt, var(--size-normal)) var(--pr, var(--size-normal)) var(--pb, var(--size-normal))\n    var(--pl, var(--size-normal));\n}\n\n.pt {\n  padding-top: var(--pt, var(--size-normal));\n}\n\n.pr {\n  padding-right: var(--pr, var(--size-normal));\n}\n\n.pb {\n  padding-bottom: var(--pb, var(--size-normal));\n}\n\n.pl {\n  padding-left: var(--pl, var(--size-normal));\n}\n\n.pxy {\n  --pt: var(--py, var(--size-normal));\n  --pb: var(--py, var(--size-normal));\n  --pl: var(--px, var(--size-normal));\n  --pr: var(--px, var(--size-normal));\n}\n\n.py {\n  --pt: var(--py, var(--size-normal));\n  --pb: var(--py, var(--size-normal));\n\n  @extend .pt;\n  @extend .pb;\n}\n\n.px {\n  --pl: var(--px, var(--size-normal));\n  --pr: var(--px, var(--size-normal));\n\n  @extend .pl;\n  @extend .pr;\n}\n",".margin,\n.mxy {\n  margin: var(--mt, var(--size-normal)) var(--mr, var(--size-normal)) var(--mb, var(--size-normal))\n    var(--ml, var(--size-normal));\n}\n\n.mt {\n  margin-top: var(--mt, var(--size-normal));\n}\n\n.mr {\n  margin-right: var(--mr, var(--size-normal));\n}\n\n.mb {\n  margin-bottom: var(--mb, var(--size-normal));\n}\n\n.ml {\n  margin-left: var(--ml, var(--size-normal));\n}\n\n.mxy {\n  --mt: var(--my, var(--size-normal));\n  --mb: var(--my, var(--size-normal));\n  --ml: var(--mx, var(--size-normal));\n  --mr: var(--mx, var(--size-normal));\n}\n\n.my {\n  --mt: var(--my, var(--size-normal));\n  --mb: var(--my, var(--size-normal));\n\n  @extend .mt;\n  @extend .mb;\n}\n\n.mx {\n  --ml: var(--mx, var(--size-normal));\n  --mr: var(--mx, var(--size-normal));\n\n  @extend .ml;\n  @extend .mr;\n}\n","[class*=\"width-\"] {\n  --width-calc: max(\n    var(--width-min-space-x, 32px),\n    calc((100% - var(--width-content, 1280px)) / 2)\n  );\n\n  padding-inline: var(--width-calc);\n}\n\n.width-content {\n  --width-content: 1280px;\n}\n\n.width-full {\n  --width: 100%;\n}\n",".control {\n  --px: 0;\n  --py: 0;\n\n  @extend .pxy;\n  @extend .font;\n\n  cursor: pointer;\n\n  display: inline-block;\n\n  text-align: center;\n  text-decoration: none;\n\n  appearance: none;\n  background: rgb(var(--control-bg-color, transparent));\n  border: none;\n  border-radius: unset;\n  outline: none;\n\n  &[aria-disabled=\"true\"],\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n",".example,\n.markup {\n  border: 1px solid rgb(var(--code-border-color, var(--border-color)));\n}\n\n.example,\n.markup > .code > .hljs {\n  padding: 1em;\n}\n\n.example {\n  display: flex;\n\n  > iframe {\n    width: 100%;\n    border: none;\n  }\n}\n\n.markup {\n  font-size: var(--font-size-xs);\n\n  > .code {\n    margin: 0;\n  }\n}\n\n.example + .markup {\n  margin-top: 0;\n  border-top: none;\n}\n",".text-flow {\n  > * + * {\n    margin-top: var(--text-flow-space, 1em);\n  }\n}\n",".nav-main {\n  @extend .bg;\n}\n\n.nav-main > .bar {\n  height: var(--nav-main-height);\n\n  > .control.title {\n    --px: var(--nav-main-menu-item-px);\n    --py: var(--nav-main-menu-item-py);\n    --font-weight: var(--font-weight-bold);\n  }\n}\n\n.nav-main > .menu {\n  position: absolute;\n  top: 0;\n  right: calc(var(--width-calc) - var(--nav-main-menu-item-px));\n\n  display: flex;\n  flex-direction: row;\n\n  height: var(--nav-main-height);\n\n  > .control {\n    --px: var(--nav-main-menu-item-px);\n    --py: var(--nav-main-menu-item-py);\n    --font-size: var(--nav-main-menu-item-font-size);\n    --font-weight: var(--font-weight-bold);\n\n    &[aria-current] {\n      --font-color: var(--accent-color);\n    }\n\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n}\n",".nav-list {\n  --nav-list-item-px: var(--size-sm);\n  --nav-list-item-py: var(--size-xs);\n  --nav-list-item-border-color: var(--border-color);\n\n  text-align: left;\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  > ul > li + li {\n    margin-top: var(--nav-list-root-item-space, var(--size-sm));\n  }\n\n  .control {\n    &.active {\n      --font-color: var(--accent-color);\n    }\n  }\n}\n\n.nav-list > ul > li > .control {\n  --py: var(--nav-list-item-py);\n  --pr: var(--nav-list-item-px);\n  --font-weight: var(--font-weight-bold);\n  --font-size: var(--font-size-md);\n}\n\n.nav-list > ul > li > ul > li > .control {\n  --py: var(--nav-list-item-py);\n  --px: var(--nav-list-item-px);\n\n  text-align: left;\n  border-left: 1px solid rgba(var(--nav-list-item-border-color) / var(--border-opacity, 0.1));\n\n  &:hover {\n    --border-opacity: 1;\n  }\n}\n",".colors {\n  display: grid;\n  grid-template-columns: repeat(var(--colors-columns, 1), 1fr);\n  gap: var(--colors-gap, var(--size-normal));\n\n  @container content (width > 300px) {\n    --colors-columns: 2;\n  }\n\n  @container content (width > 620px) {\n    --colors-columns: 3;\n  }\n\n  @container content (width > 940px) {\n    --colors-columns: 4;\n  }\n}\n\n.colors > .item {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-xs);\n  justify-content: center;\n\n  padding: var(--size-xl) var(--size-md);\n\n  text-align: center;\n\n  border: 1px solid rgb(var(--border-color, currentColor));\n\n  > .text {\n    font-size: var(--font-size-md);\n    font-weight: var(--font-weight-bold);\n  }\n}\n",".spaces {\n  --spaces-bg-color: var(--font-color);\n  --spaces-font-color: var(--bg-color);\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--spaces-gap, var(--size-xs));\n}\n\n.spaces > .item {\n  display: flex;\n\n  > .bg {\n    --bg-color: var(--spaces-bg-color);\n    --font-color: var(--spaces-font-color);\n  }\n\n  > div {\n    padding: var(--size-sm) var(--size-normal);\n  }\n\n  > div:first-child {\n    margin-right: var(--space-value);\n  }\n\n  > div:last-child {\n    display: flex;\n\n    > *:not(:last-child) {\n      margin-right: var(--size-xs);\n      padding-right: var(--size-xs);\n      border-right: 1px solid currentcolor;\n    }\n\n    > .name {\n      font-weight: var(--font-weight-bold);\n    }\n  }\n}\n",".icons {\n  display: grid;\n  grid-template-columns: repeat(var(--icons-columns, 1), 1fr);\n  gap: var(--icons-gap, var(--size-normal));\n\n  @container content (width > 300px) {\n    --icons-columns: 2;\n  }\n\n  @container content (width > 620px) {\n    --icons-columns: 3;\n  }\n\n  @container content (width > 940px) {\n    --icons-columns: 4;\n  }\n}\n\n.icons > .item {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-xs);\n  justify-content: center;\n\n  padding: var(--size-xl) var(--size-md);\n\n  text-align: center;\n\n  border: 1px solid rgb(var(--border-color));\n\n  > .show,\n  > .show::before,\n  > .text::before,\n  > .text::after {\n    font-family: var(--icons-font-family);\n  }\n\n  > .show {\n    font-size: var(--icons-show-font-size, 3em);\n  }\n\n  > .name {\n    font-weight: var(--font-weight-bold);\n  }\n\n  &.from-var {\n    > .show::before,\n    > .text::before,\n    > .text::after {\n      content: var(--icon);\n    }\n  }\n\n  &.from-data {\n    > .text::before,\n    > .text::after {\n      content: attr(data-icon);\n    }\n  }\n}\n","html {\n  scroll-behavior: smooth;\n  scrollbar-gutter: stable;\n  scroll-padding-top: var(--nav-main-height);\n  height: 100%;\n}\n\nhtml > body {\n  min-height: 100%;\n}\n\nbody > header {\n  padding-top: var(--nav-main-height);\n\n  > .nav-main {\n    position: fixed;\n    z-index: 1000;\n    top: 0;\n    width: 100%;\n  }\n}\n\nbody > main {\n  --main-sidebar-width: 25ch;\n  --main-content-sidebar-space: var(--size-xl);\n\n  position: relative;\n}\n\nbody > main > .sidebar {\n  position: absolute;\n  top: 0;\n  left: var(--width-calc);\n\n  width: var(--main-sidebar-width);\n  height: 100%;\n\n  > .scroll {\n    position: sticky;\n    top: var(--nav-main-height);\n\n    overflow-y: auto;\n\n    height: 100%;\n    max-height: calc(100vh - var(--nav-main-height));\n  }\n}\n\nbody > main > .content {\n  container-name: content;\n  container-type: inline-size;\n  margin-left: calc(var(--main-sidebar-width) + var(--main-content-sidebar-space));\n\n  > .headline + .description {\n    margin-top: var(--size-md);\n  }\n\n  > section + section,\n  > section:first-of-type {\n    margin-top: var(--main-content-section-space, var(--size-lg));\n  }\n}\n\nfooter {\n  --mt: var(--size-xl);\n\n  > .text {\n    text-align: right;\n  }\n}\n"]}

package/dist/assets/ui-doc.min.css

@@ -1 +1 @@
-:root{--font-weight-normal:400;--font-weight-bold:700;--font-size-sm:0.85em;--font-size-normal:1em;--font-size-md:1.2em;--font-size-lg:1.7em;--font-size-base:16px;--font-color:3 3 3;--font-family:system-ui,"Segoe UI",roboto,helvetica,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--font-weight:var(--font-weight-normal);--font-size:var(--font-size-normal);--font-line-height:1.4;--headline-weight:var(--font-weight-bold);--bg-color:255 255 255;--accent-color:3 3 200;--border-color:5 5 5;--selection-color:var(--bg-color);--selection-bg-color:var(--font-color);--size-base-unit:1rem;--size-xs:calc(var(--size-base-unit)*0.5);--size-sm:calc(var(--size-base-unit)*0.8);--size-normal:var(--size-base-unit);--size-md:calc(var(--size-base-unit)*1.2);--size-lg:calc(var(--size-base-unit)*1.6);--size-xl:calc(var(--size-base-unit)*2.4);--nav-main-menu-item-px:var(--size-sm);--nav-main-menu-item-py:var(--size-xs);--nav-main-menu-item-font-size:var(--font-size-md);--nav-main-height:calc(var(--nav-main-menu-item-py)*2 + var(--nav-main-menu-item-font-size)*var(--font-line-height));color-scheme:light}*{box-sizing:border-box;margin:0}:after,:before{box-sizing:inherit}::-moz-selection{background-color:rgb(var(--selection-bg-color));color:rgb(var(--selection-color))}::selection{background-color:rgb(var(--selection-bg-color));color:rgb(var(--selection-color))}body{background-color:rgb(var(--bg-color))}html{font-size:var(--font-size-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;word-break:break-word}.control,.font,body{color:rgb(var(--font-color));font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--font-line-height)}button,input,optgroup,select,textarea{font-family:inherit}h1,h2,h3,h4,h5,h6{color:rgb(var(--headline-color,inherit));font-family:var(--headline-family,inherit);font-size:calc(var(--font-size-normal)*var(--headline-scale, 1));font-weight:var(--headline-weight,inherit);line-height:var(--headline-line-height,inherit)}h1{--headline-scale:2.5}h2{--headline-scale:2}h3{--headline-scale:1.75}h4{--headline-scale:1.5}a{color:rgb(var(--link-color,inherit));-webkit-text-decoration:var(--link-decoration,none);text-decoration:var(--link-decoration,none)}b,strong{--font-weight:var(--font-weight-bold)}small{--font-size:var(--font-size-sm)}.bg,.nav-main{--selection-bg-color:var(--font-color);--selection-color:var(--bg-color);background:rgb(var(--bg-color))}.bg,.nav-main,.tc{color:rgb(var(--font-color))}.control,.padding,.pxy{padding:var(--pt,var(--size-normal)) var(--pr,var(--size-normal)) var(--pb,var(--size-normal)) var(--pl,var(--size-normal))}.pt,.py{padding-top:var(--pt,var(--size-normal))}.pr,.px{padding-right:var(--pr,var(--size-normal))}.pb,.py{padding-bottom:var(--pb,var(--size-normal))}.pl,.px{padding-left:var(--pl,var(--size-normal))}.control,.pxy{--pt:var(--py,var(--size-normal));--pb:var(--py,var(--size-normal));--pl:var(--px,var(--size-normal));--pr:var(--px,var(--size-normal))}.py{--pt:var(--py,var(--size-normal));--pb:var(--py,var(--size-normal))}.px{--pl:var(--px,var(--size-normal));--pr:var(--px,var(--size-normal))}.margin,.mxy{margin:var(--mt,var(--size-normal)) var(--mr,var(--size-normal)) var(--mb,var(--size-normal)) var(--ml,var(--size-normal))}.mt,.my{margin-top:var(--mt,var(--size-normal))}.mr,.mx{margin-right:var(--mr,var(--size-normal))}.mb,.my{margin-bottom:var(--mb,var(--size-normal))}.ml,.mx{margin-left:var(--ml,var(--size-normal))}.mxy{--mt:var(--my,var(--size-normal));--mb:var(--my,var(--size-normal));--ml:var(--mx,var(--size-normal));--mr:var(--mx,var(--size-normal))}.my{--mt:var(--my,var(--size-normal));--mb:var(--my,var(--size-normal))}.mx{--ml:var(--mx,var(--size-normal));--mr:var(--mx,var(--size-normal))}[class*=width-]{--width-calc:max(var(--width-min-space-x,32px),calc((100% - var(--width-content, 1280px))/2));padding-inline:var(--width-calc)}.width-content{--width-content:1280px}.width-full{--width:100%}.control{--px:0;--py:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgb(var(--control-bg-color,transparent));border:none;border-radius:unset;cursor:pointer;display:inline-block;outline:none;text-align:center;text-decoration:none}.control:disabled,.control[aria-disabled=true]{cursor:not-allowed}.example,.markup{border:1px solid rgb(var(--code-border-color,var(--border-color)))}.example,.markup>.code>.hljs{padding:1em}.example{display:flex}.example>iframe{border:none;width:100%}.markup{font-size:var(--font-size-xs)}.markup>.code{margin:0}.example+.markup{border-top:none;margin-top:0}.text-flow>*+*{margin-top:var(--text-flow-space,1em)}.nav-main>.bar{height:var(--nav-main-height)}.nav-main>.bar>.control.title{--px:var(--nav-main-menu-item-px);--py:var(--nav-main-menu-item-py);--font-weight:var(--font-weight-bold)}.nav-main>.menu{display:flex;flex-direction:row;height:var(--nav-main-height);position:absolute;right:calc(var(--width-calc) - var(--nav-main-menu-item-px));top:0}.nav-main>.menu>.control{--px:var(--nav-main-menu-item-px);--py:var(--nav-main-menu-item-py);--font-size:var(--nav-main-menu-item-font-size);--font-weight:var(--font-weight-bold)}.nav-main>.menu>.control[aria-current]{--font-color:var(--accent-color)}.nav-main>.menu>.control:hover{text-decoration:underline}.nav-list{--nav-list-item-px:var(--size-sm);--nav-list-item-py:var(--size-xs);--nav-list-item-border-color:var(--border-color);text-align:left}.nav-list ul{list-style:none;margin:0;padding:0}.nav-list>ul>li+li{margin-top:var(--nav-list-root-item-space,var(--size-sm))}.nav-list .control.active{--font-color:var(--accent-color)}.nav-list>ul>li>.control{--py:var(--nav-list-item-py);--pr:var(--nav-list-item-px);--font-weight:var(--font-weight-bold);--font-size:var(--font-size-md)}.nav-list>ul>li>ul>li>.control{--py:var(--nav-list-item-py);--px:var(--nav-list-item-px);border-left:1px solid rgba(var(--nav-list-item-border-color)/var(--border-opacity,.1));text-align:left}.nav-list>ul>li>ul>li>.control:hover{--border-opacity:1}html{height:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-main-height);scrollbar-gutter:stable}html>body{min-height:100%}body>header{padding-top:var(--nav-main-height)}body>header>.nav-main{position:fixed;top:0;width:100%;z-index:1000}body>main{--main-sidebar-width:25ch;--main-content-sidebar-space:var(--size-xl);position:relative}body>main>.sidebar{height:100%;left:var(--width-calc);position:absolute;top:0;width:var(--main-sidebar-width)}body>main>.sidebar>.scroll{height:100%;max-height:calc(100vh - var(--nav-main-height));overflow-y:auto;position:sticky;top:var(--nav-main-height)}body>main>.content{margin-left:calc(var(--main-sidebar-width) + var(--main-content-sidebar-space))}body>main>.content>.headline+.description{margin-top:var(--size-md)}body>main>.content>section+section,body>main>.content>section:first-of-type{margin-top:var(--main-content-section-space,var(--size-lg))}footer{--mt:var(--size-xl)}footer>.text{text-align:right}
+:root{--font-weight-normal:400;--font-weight-bold:700;--font-size-sm:0.85em;--font-size-normal:1em;--font-size-md:1.2em;--font-size-lg:1.7em;--font-size-base:16px;--font-color:3 3 3;--font-family:system-ui,"Segoe UI",roboto,helvetica,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--font-weight:var(--font-weight-normal);--font-size:var(--font-size-normal);--font-line-height:1.4;--headline-weight:var(--font-weight-bold);--bg-color:255 255 255;--accent-color:3 3 200;--border-color:5 5 5;--selection-color:var(--bg-color);--selection-bg-color:var(--font-color);--size-base-unit:1rem;--size-xs:calc(var(--size-base-unit)*0.5);--size-sm:calc(var(--size-base-unit)*0.8);--size-normal:var(--size-base-unit);--size-md:calc(var(--size-base-unit)*1.2);--size-lg:calc(var(--size-base-unit)*1.6);--size-xl:calc(var(--size-base-unit)*2.4);--nav-main-menu-item-px:var(--size-sm);--nav-main-menu-item-py:var(--size-xs);--nav-main-menu-item-font-size:var(--font-size-md);--nav-main-height:calc(var(--nav-main-menu-item-py)*2 + var(--nav-main-menu-item-font-size)*var(--font-line-height));color-scheme:light}*{box-sizing:border-box;margin:0}:after,:before{box-sizing:inherit}::-moz-selection{background-color:rgb(var(--selection-bg-color));color:rgb(var(--selection-color))}::selection{background-color:rgb(var(--selection-bg-color));color:rgb(var(--selection-color))}body{background-color:rgb(var(--bg-color))}html{font-size:var(--font-size-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;word-break:break-word}.control,.font,body{color:rgb(var(--font-color));font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--font-line-height)}button,input,optgroup,select,textarea{font-family:inherit}h1,h2,h3,h4,h5,h6{color:rgb(var(--headline-color,inherit));font-family:var(--headline-family,inherit);font-size:calc(var(--font-size-normal)*var(--headline-scale, 1));font-weight:var(--headline-weight,inherit);line-height:var(--headline-line-height,inherit)}h1{--headline-scale:2.5}h2{--headline-scale:2}h3{--headline-scale:1.75}h4{--headline-scale:1.5}a{color:rgb(var(--link-color,inherit));-webkit-text-decoration:var(--link-decoration,none);text-decoration:var(--link-decoration,none)}b,strong{--font-weight:var(--font-weight-bold)}small{--font-size:var(--font-size-sm)}.bg,.nav-main{--selection-bg-color:var(--font-color);--selection-color:var(--bg-color);background:rgb(var(--bg-color))}.bg,.nav-main,.tc{color:rgb(var(--font-color))}.control,.padding,.pxy{padding:var(--pt,var(--size-normal)) var(--pr,var(--size-normal)) var(--pb,var(--size-normal)) var(--pl,var(--size-normal))}.pt,.py{padding-top:var(--pt,var(--size-normal))}.pr,.px{padding-right:var(--pr,var(--size-normal))}.pb,.py{padding-bottom:var(--pb,var(--size-normal))}.pl,.px{padding-left:var(--pl,var(--size-normal))}.control,.pxy{--pt:var(--py,var(--size-normal));--pb:var(--py,var(--size-normal));--pl:var(--px,var(--size-normal));--pr:var(--px,var(--size-normal))}.py{--pt:var(--py,var(--size-normal));--pb:var(--py,var(--size-normal))}.px{--pl:var(--px,var(--size-normal));--pr:var(--px,var(--size-normal))}.margin,.mxy{margin:var(--mt,var(--size-normal)) var(--mr,var(--size-normal)) var(--mb,var(--size-normal)) var(--ml,var(--size-normal))}.mt,.my{margin-top:var(--mt,var(--size-normal))}.mr,.mx{margin-right:var(--mr,var(--size-normal))}.mb,.my{margin-bottom:var(--mb,var(--size-normal))}.ml,.mx{margin-left:var(--ml,var(--size-normal))}.mxy{--mt:var(--my,var(--size-normal));--mb:var(--my,var(--size-normal));--ml:var(--mx,var(--size-normal));--mr:var(--mx,var(--size-normal))}.my{--mt:var(--my,var(--size-normal));--mb:var(--my,var(--size-normal))}.mx{--ml:var(--mx,var(--size-normal));--mr:var(--mx,var(--size-normal))}[class*=width-]{--width-calc:max(var(--width-min-space-x,32px),calc((100% - var(--width-content, 1280px))/2));padding-inline:var(--width-calc)}.width-content{--width-content:1280px}.width-full{--width:100%}.control{--px:0;--py:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgb(var(--control-bg-color,transparent));border:none;border-radius:unset;cursor:pointer;display:inline-block;outline:none;text-align:center;text-decoration:none}.control:disabled,.control[aria-disabled=true]{cursor:not-allowed}.example,.markup{border:1px solid rgb(var(--code-border-color,var(--border-color)))}.example,.markup>.code>.hljs{padding:1em}.example{display:flex}.example>iframe{border:none;width:100%}.markup{font-size:var(--font-size-xs)}.markup>.code{margin:0}.example+.markup{border-top:none;margin-top:0}.text-flow>*+*{margin-top:var(--text-flow-space,1em)}.nav-main>.bar{height:var(--nav-main-height)}.nav-main>.bar>.control.title{--px:var(--nav-main-menu-item-px);--py:var(--nav-main-menu-item-py);--font-weight:var(--font-weight-bold)}.nav-main>.menu{display:flex;flex-direction:row;height:var(--nav-main-height);position:absolute;right:calc(var(--width-calc) - var(--nav-main-menu-item-px));top:0}.nav-main>.menu>.control{--px:var(--nav-main-menu-item-px);--py:var(--nav-main-menu-item-py);--font-size:var(--nav-main-menu-item-font-size);--font-weight:var(--font-weight-bold)}.nav-main>.menu>.control[aria-current]{--font-color:var(--accent-color)}.nav-main>.menu>.control:hover{text-decoration:underline}.nav-list{--nav-list-item-px:var(--size-sm);--nav-list-item-py:var(--size-xs);--nav-list-item-border-color:var(--border-color);text-align:left}.nav-list ul{list-style:none;margin:0;padding:0}.nav-list>ul>li+li{margin-top:var(--nav-list-root-item-space,var(--size-sm))}.nav-list .control.active{--font-color:var(--accent-color)}.nav-list>ul>li>.control{--py:var(--nav-list-item-py);--pr:var(--nav-list-item-px);--font-weight:var(--font-weight-bold);--font-size:var(--font-size-md)}.nav-list>ul>li>ul>li>.control{--py:var(--nav-list-item-py);--px:var(--nav-list-item-px);border-left:1px solid rgba(var(--nav-list-item-border-color)/var(--border-opacity,.1));text-align:left}.nav-list>ul>li>ul>li>.control:hover{--border-opacity:1}.colors{display:grid;gap:var(--colors-gap,var(--size-normal));grid-template-columns:repeat(var(--colors-columns,1),1fr)}@container content (width > 300px){.colors{--colors-columns:2}}@container content (width > 620px){.colors{--colors-columns:3}}@container content (width > 940px){.colors{--colors-columns:4}}.colors>.item{border:1px solid rgb(var(--border-color,currentcolor));display:flex;flex-direction:column;gap:var(--size-xs);justify-content:center;padding:var(--size-xl) var(--size-md);text-align:center}.colors>.item>.text{font-size:var(--font-size-md);font-weight:var(--font-weight-bold)}.spaces{--spaces-bg-color:var(--font-color);--spaces-font-color:var(--bg-color);flex-direction:column;gap:var(--spaces-gap,var(--size-xs))}.spaces,.spaces>.item{display:flex}.spaces>.item>.bg{--bg-color:var(--spaces-bg-color);--font-color:var(--spaces-font-color)}.spaces>.item>div{padding:var(--size-sm) var(--size-normal)}.spaces>.item>div:first-child{margin-right:var(--space-value)}.spaces>.item>div:last-child{display:flex}.spaces>.item>div:last-child>:not(:last-child){border-right:1px solid;margin-right:var(--size-xs);padding-right:var(--size-xs)}.spaces>.item>div:last-child>.name{font-weight:var(--font-weight-bold)}.icons{display:grid;gap:var(--icons-gap,var(--size-normal));grid-template-columns:repeat(var(--icons-columns,1),1fr)}@container content (width > 300px){.icons{--icons-columns:2}}@container content (width > 620px){.icons{--icons-columns:3}}@container content (width > 940px){.icons{--icons-columns:4}}.icons>.item{border:1px solid rgb(var(--border-color));display:flex;flex-direction:column;gap:var(--size-xs);justify-content:center;padding:var(--size-xl) var(--size-md);text-align:center}.icons>.item>.show,.icons>.item>.show:before,.icons>.item>.text:after,.icons>.item>.text:before{font-family:var(--icons-font-family)}.icons>.item>.show{font-size:var(--icons-show-font-size,3em)}.icons>.item>.name{font-weight:var(--font-weight-bold)}.icons>.item.from-var>.show:before,.icons>.item.from-var>.text:after,.icons>.item.from-var>.text:before{content:var(--icon)}.icons>.item.from-data>.text:after,.icons>.item.from-data>.text:before{content:attr(data-icon)}html{height:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-main-height);scrollbar-gutter:stable}html>body{min-height:100%}body>header{padding-top:var(--nav-main-height)}body>header>.nav-main{position:fixed;top:0;width:100%;z-index:1000}body>main{--main-sidebar-width:25ch;--main-content-sidebar-space:var(--size-xl);position:relative}body>main>.sidebar{height:100%;left:var(--width-calc);position:absolute;top:0;width:var(--main-sidebar-width)}body>main>.sidebar>.scroll{height:100%;max-height:calc(100vh - var(--nav-main-height));overflow-y:auto;position:sticky;top:var(--nav-main-height)}body>main>.content{container-name:content;container-type:inline-size;margin-left:calc(var(--main-sidebar-width) + var(--main-content-sidebar-space))}body>main>.content>.headline+.description{margin-top:var(--size-md)}body>main>.content>section+section,body>main>.content>section:first-of-type{margin-top:var(--main-content-section-space,var(--size-lg))}footer{--mt:var(--size-xl)}footer>.text{text-align:right}

package/dist/assets/ui-doc.min.js

@@ -1 +1 @@
-!function(){"use strict";function e(){document.querySelectorAll("[data-sidebar]").forEach((e=>{!function(e){const t={},n=new IntersectionObserver((e=>{var n,o,r;const l=e.filter((e=>e.isIntersecting));if(l.length<=0)return;Object.keys(t).forEach((e=>{t[e].classList.remove("active")}));const a=t[l[0].target.id];a.classList.add("active"),(null===(o=null===(n=null==a?void 0:a.parentElement)||void 0===n?void 0:n.parentElement)||void 0===o?void 0:o.parentElement)instanceof HTMLLIElement&&(null===(r=a.parentElement.parentElement.parentElement.querySelector("a"))||void 0===r||r.classList.add("active"))}),{root:null,rootMargin:"0px 0px -90% 0px",threshold:.5});e.querySelectorAll('a[href^="#"]').forEach((e=>{const o=e.href.split("#")[1],r=document.getElementById(o);r&&(n.observe(r),t[o]=e)}))}(e)}))}var t;t=()=>{document.querySelectorAll("[data-example] > iframe").forEach((e=>{var t,n;const o=null!==(t=e.contentDocument)&&void 0!==t?t:null===(n=e.contentWindow)||void 0===n?void 0:n.document;if(!o)return;const r=()=>{const t=()=>{e.style.height=`${o.body.scrollHeight}px`};t(),new MutationObserver(t).observe(o.body,{attributes:!0,childList:!0,subtree:!0})};"complete"===o.readyState?r():e.addEventListener("load",r)})),e()},"loading"!==document.readyState?t():document.addEventListener("DOMContentLoaded",t)}();
+!function(){"use strict";function e(){document.querySelectorAll("[data-sidebar]").forEach((e=>{!function(e){const t={},n=new IntersectionObserver((e=>{var n,o,r;const l=e.filter((e=>e.isIntersecting));if(l.length<=0)return;Object.keys(t).forEach((e=>{t[e].classList.remove("active")}));const a=t[l[0].target.id];a.classList.add("active"),(null===(o=null===(n=null==a?void 0:a.parentElement)||void 0===n?void 0:n.parentElement)||void 0===o?void 0:o.parentElement)instanceof HTMLLIElement&&(null===(r=a.parentElement.parentElement.parentElement.querySelector("a"))||void 0===r||r.classList.add("active"))}),{root:null,rootMargin:"0px 0px -90% 0px",threshold:.5});e.querySelectorAll('a[href^="#"]').forEach((e=>{const o=e.href.split("#")[1],r=document.getElementById(o);r&&(n.observe(r),t[o]=e)}))}(e)}))}var t;t=()=>{document.querySelectorAll("[data-example] > iframe").forEach((e=>{var t,n;const o=null!==(t=e.contentDocument)&&void 0!==t?t:null===(n=e.contentWindow)||void 0===n?void 0:n.document;if(!o)return;const r=()=>{let t=0;const n=()=>{o.body.scrollHeight!==t&&(t=o.body.scrollHeight,e.style.height=`${t}px`)};n(),new MutationObserver(n).observe(o.body,{attributes:!0,childList:!0,subtree:!0}),new ResizeObserver(n).observe(o.body)};"complete"===o.readyState?r():e.addEventListener("load",r)})),e()},"loading"!==document.readyState?t():document.addEventListener("DOMContentLoaded",t)}();

package/dist/assets/ui-doc.mjs

@@ -1,12 +1,3 @@
-function ready(callback) {
-    if (document.readyState !== 'loading') {
-        callback();
-    }
-    else {
-        document.addEventListener('DOMContentLoaded', callback);
-    }
-}
-
 function initExample() {
     document.querySelectorAll('[data-example] > iframe').forEach(iframe => {
         var _a, _b;
@@ -14,23 +5,33 @@ function initExample() {
         if (!document) {
             return;
         }
-        const action = () => {
+        const initHeightChange = () => {
+            let currentHeight = 0;
             const changeHeight = () => {
-                iframe.style.height = `${document.body.scrollHeight}px`;
+                if (document.body.scrollHeight === currentHeight) {
+                    return;
+                }
+                currentHeight = document.body.scrollHeight;
+                iframe.style.height = `${currentHeight}px`;
             };
+            // Initial height change
             changeHeight();
-            const observer = new MutationObserver(changeHeight);
-            observer.observe(document.body, {
+            // Use MutationObserver to detect changes in the DOM and change height if required
+            const mutationObserver = new MutationObserver(changeHeight);
+            mutationObserver.observe(document.body, {
                 attributes: true,
                 childList: true,
                 subtree: true,
             });
+            // Use ResizeObserver to detect changes in the viewport and change height if required
+            const resizeObserver = new ResizeObserver(changeHeight);
+            resizeObserver.observe(document.body);
         };
         if (document.readyState === 'complete') {
-            action();
+            initHeightChange();
         }
         else {
-            iframe.addEventListener('load', action);
+            iframe.addEventListener('load', initHeightChange);
         }
     });
 }
@@ -72,6 +73,15 @@ function initSidebar() {
     });
 }
 
+function ready(callback) {
+    if (document.readyState !== 'loading') {
+        callback();
+    }
+    else {
+        document.addEventListener('DOMContentLoaded', callback);
+    }
+}
+
 ready(() => {
     initExample();
     initSidebar();

package/dist/assets/ui-doc.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ui-doc.mjs","sources":["../../../scripts/src/base.ts","../../../scripts/src/example.ts","../../../scripts/src/sidebar.ts","../../../scripts/app.ts"],"sourcesContent":["export function ready(callback: () => void) {\n  if (document.readyState !== 'loading') {\n    callback()\n  } else {\n    document.addEventListener('DOMContentLoaded', callback)\n  }\n}\n","export function initExample() {\n  document.querySelectorAll<HTMLIFrameElement>('[data-example] > iframe').forEach(iframe => {\n    const document = iframe.contentDocument ?? iframe.contentWindow?.document\n\n    if (!document) {\n      return\n    }\n\n    const action = () => {\n      const changeHeight = () => {\n        iframe.style.height = `${document.body.scrollHeight}px`\n      }\n\n      changeHeight()\n\n      const observer = new MutationObserver(changeHeight)\n\n      observer.observe(document.body, {\n        attributes: true,\n        childList: true,\n        subtree: true,\n      })\n    }\n\n    if (document.readyState === 'complete') {\n      action()\n    } else {\n      iframe.addEventListener('load', action)\n    }\n  })\n}\n","function createSidebar(sidebar: HTMLElement) {\n  const links: Record<string, HTMLLinkElement> = {}\n  const observer = new IntersectionObserver(\n    entries => {\n      const activeEntries = entries.filter(entry => entry.isIntersecting)\n\n      if (activeEntries.length <= 0) {\n        return\n      }\n\n      Object.keys(links).forEach(id => {\n        links[id].classList.remove('active')\n      })\n\n      const activeLink = links[activeEntries[0].target.id]\n\n      activeLink.classList.add('active')\n      if (activeLink?.parentElement?.parentElement?.parentElement instanceof HTMLLIElement) {\n        activeLink.parentElement.parentElement.parentElement\n          .querySelector('a')\n          ?.classList.add('active')\n      }\n    },\n    {\n      root: null,\n      rootMargin: '0px 0px -90% 0px',\n      threshold: 0.5,\n    },\n  )\n\n  sidebar.querySelectorAll<HTMLLinkElement>('a[href^=\"#\"]').forEach(link => {\n    const id = link.href.split('#')[1]\n    const target = document.getElementById(id)\n\n    if (target) {\n      observer.observe(target)\n      links[id] = link\n    }\n  })\n}\n\nexport function initSidebar() {\n  document.querySelectorAll('[data-sidebar]').forEach(sidebar => {\n    createSidebar(sidebar as HTMLElement)\n  })\n}\n","import { ready } from './src/base'\nimport { initExample } from './src/example'\nimport { initSidebar } from './src/sidebar'\n\nready(() => {\n  initExample()\n  initSidebar()\n})\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui-doc.mjs","sources":["../../../scripts/src/example.ts","../../../scripts/src/sidebar.ts","../../../scripts/src/utils.ts","../../../scripts/app.ts"],"sourcesContent":["export function initExample() {\n  document.querySelectorAll<HTMLIFrameElement>('[data-example] > iframe').forEach(iframe => {\n    const document = iframe.contentDocument ?? iframe.contentWindow?.document\n\n    if (!document) {\n      return\n    }\n\n    const initHeightChange = () => {\n      let currentHeight = 0\n      const changeHeight = () => {\n        if (document.body.scrollHeight === currentHeight) {\n          return\n        }\n\n        currentHeight = document.body.scrollHeight\n        iframe.style.height = `${currentHeight}px`\n      }\n\n      // Initial height change\n      changeHeight()\n\n      // Use MutationObserver to detect changes in the DOM and change height if required\n      const mutationObserver = new MutationObserver(changeHeight)\n\n      mutationObserver.observe(document.body, {\n        attributes: true,\n        childList: true,\n        subtree: true,\n      })\n\n      // Use ResizeObserver to detect changes in the viewport and change height if required\n      const resizeObserver = new ResizeObserver(changeHeight)\n\n      resizeObserver.observe(document.body)\n    }\n\n    if (document.readyState === 'complete') {\n      initHeightChange()\n    } else {\n      iframe.addEventListener('load', initHeightChange)\n    }\n  })\n}\n","function createSidebar(sidebar: HTMLElement) {\n  const links: Record<string, HTMLLinkElement> = {}\n  const observer = new IntersectionObserver(\n    entries => {\n      const activeEntries = entries.filter(entry => entry.isIntersecting)\n\n      if (activeEntries.length <= 0) {\n        return\n      }\n\n      Object.keys(links).forEach(id => {\n        links[id].classList.remove('active')\n      })\n\n      const activeLink = links[activeEntries[0].target.id]\n\n      activeLink.classList.add('active')\n      if (activeLink?.parentElement?.parentElement?.parentElement instanceof HTMLLIElement) {\n        activeLink.parentElement.parentElement.parentElement\n          .querySelector('a')\n          ?.classList.add('active')\n      }\n    },\n    {\n      root: null,\n      rootMargin: '0px 0px -90% 0px',\n      threshold: 0.5,\n    },\n  )\n\n  sidebar.querySelectorAll<HTMLLinkElement>('a[href^=\"#\"]').forEach(link => {\n    const id = link.href.split('#')[1]\n    const target = document.getElementById(id)\n\n    if (target) {\n      observer.observe(target)\n      links[id] = link\n    }\n  })\n}\n\nexport function initSidebar() {\n  document.querySelectorAll('[data-sidebar]').forEach(sidebar => {\n    createSidebar(sidebar as HTMLElement)\n  })\n}\n","export function ready(callback: () => void) {\n  if (document.readyState !== 'loading') {\n    callback()\n  } else {\n    document.addEventListener('DOMContentLoaded', callback)\n  }\n}\n\nexport function throttle(callback: (...args: any[]) => void, delay: number) {\n  let timerFlag: number | null = null\n\n  return (...args: any[]) => {\n    if (timerFlag === null) {\n      callback(...args)\n      timerFlag = window.setTimeout(() => {\n        timerFlag = null\n      }, delay)\n    }\n  }\n}\n","import { initExample } from './src/example'\nimport { initSidebar } from './src/sidebar'\nimport { ready } from './src/utils'\n\nready(() => {\n  initExample()\n  initSidebar()\n})\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ui-doc/html-renderer",
   "description": "HTML renderer for UI-Doc.",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "license": "MIT",
   "keywords": [
     "ui-doc",
@@ -55,7 +55,7 @@
   },
   "sideEffects": false,
   "peerDependencies": {
-    "@ui-doc/core": "^0.1.0"
+    "@ui-doc/core": "^0.3.0"
   },
   "optionalDependencies": {
     "@highlightjs/cdn-assets": "^11.9.0"

package/scripts/app.ts

@@ -1,6 +1,6 @@
-import { ready } from './src/base'
 import { initExample } from './src/example'
 import { initSidebar } from './src/sidebar'
+import { ready } from './src/utils'
 
 ready(() => {
   initExample()

package/scripts/src/example.ts

@@ -6,26 +6,39 @@ export function initExample() {
       return
     }
 
-    const action = () => {
+    const initHeightChange = () => {
+      let currentHeight = 0
       const changeHeight = () => {
-        iframe.style.height = `${document.body.scrollHeight}px`
+        if (document.body.scrollHeight === currentHeight) {
+          return
+        }
+
+        currentHeight = document.body.scrollHeight
+        iframe.style.height = `${currentHeight}px`
       }
 
+      // Initial height change
       changeHeight()
 
-      const observer = new MutationObserver(changeHeight)
+      // Use MutationObserver to detect changes in the DOM and change height if required
+      const mutationObserver = new MutationObserver(changeHeight)
 
-      observer.observe(document.body, {
+      mutationObserver.observe(document.body, {
         attributes: true,
         childList: true,
         subtree: true,
       })
+
+      // Use ResizeObserver to detect changes in the viewport and change height if required
+      const resizeObserver = new ResizeObserver(changeHeight)
+
+      resizeObserver.observe(document.body)
     }
 
     if (document.readyState === 'complete') {
-      action()
+      initHeightChange()
     } else {
-      iframe.addEventListener('load', action)
+      iframe.addEventListener('load', initHeightChange)
     }
   })
 }

package/scripts/src/utils.ts

@@ -0,0 +1,20 @@
+export function ready(callback: () => void) {
+  if (document.readyState !== 'loading') {
+    callback()
+  } else {
+    document.addEventListener('DOMContentLoaded', callback)
+  }
+}
+
+export function throttle(callback: (...args: any[]) => void, delay: number) {
+  let timerFlag: number | null = null
+
+  return (...args: any[]) => {
+    if (timerFlag === null) {
+      callback(...args)
+      timerFlag = window.setTimeout(() => {
+        timerFlag = null
+      }, delay)
+    }
+  }
+}

package/styles/03_components/colors.css

@@ -0,0 +1,35 @@
+.colors {
+  display: grid;
+  grid-template-columns: repeat(var(--colors-columns, 1), 1fr);
+  gap: var(--colors-gap, var(--size-normal));
+
+  @container content (width > 300px) {
+    --colors-columns: 2;
+  }
+
+  @container content (width > 620px) {
+    --colors-columns: 3;
+  }
+
+  @container content (width > 940px) {
+    --colors-columns: 4;
+  }
+}
+
+.colors > .item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-xs);
+  justify-content: center;
+
+  padding: var(--size-xl) var(--size-md);
+
+  text-align: center;
+
+  border: 1px solid rgb(var(--border-color, currentColor));
+
+  > .text {
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-bold);
+  }
+}

package/styles/03_components/icons.css

@@ -0,0 +1,60 @@
+.icons {
+  display: grid;
+  grid-template-columns: repeat(var(--icons-columns, 1), 1fr);
+  gap: var(--icons-gap, var(--size-normal));
+
+  @container content (width > 300px) {
+    --icons-columns: 2;
+  }
+
+  @container content (width > 620px) {
+    --icons-columns: 3;
+  }
+
+  @container content (width > 940px) {
+    --icons-columns: 4;
+  }
+}
+
+.icons > .item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-xs);
+  justify-content: center;
+
+  padding: var(--size-xl) var(--size-md);
+
+  text-align: center;
+
+  border: 1px solid rgb(var(--border-color));
+
+  > .show,
+  > .show::before,
+  > .text::before,
+  > .text::after {
+    font-family: var(--icons-font-family);
+  }
+
+  > .show {
+    font-size: var(--icons-show-font-size, 3em);
+  }
+
+  > .name {
+    font-weight: var(--font-weight-bold);
+  }
+
+  &.from-var {
+    > .show::before,
+    > .text::before,
+    > .text::after {
+      content: var(--icon);
+    }
+  }
+
+  &.from-data {
+    > .text::before,
+    > .text::after {
+      content: attr(data-icon);
+    }
+  }
+}

package/styles/03_components/spaces.css

@@ -0,0 +1,39 @@
+.spaces {
+  --spaces-bg-color: var(--font-color);
+  --spaces-font-color: var(--bg-color);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaces-gap, var(--size-xs));
+}
+
+.spaces > .item {
+  display: flex;
+
+  > .bg {
+    --bg-color: var(--spaces-bg-color);
+    --font-color: var(--spaces-font-color);
+  }
+
+  > div {
+    padding: var(--size-sm) var(--size-normal);
+  }
+
+  > div:first-child {
+    margin-right: var(--space-value);
+  }
+
+  > div:last-child {
+    display: flex;
+
+    > *:not(:last-child) {
+      margin-right: var(--size-xs);
+      padding-right: var(--size-xs);
+      border-right: 1px solid currentcolor;
+    }
+
+    > .name {
+      font-weight: var(--font-weight-bold);
+    }
+  }
+}

package/styles/04_layouts/page.css

@@ -47,6 +47,8 @@ body > main > .sidebar {
 }
 
 body > main > .content {
+  container-name: content;
+  container-type: inline-size;
   margin-left: calc(var(--main-sidebar-width) + var(--main-content-sidebar-space));
 
   > .headline + .description {

package/styles/index.css

@@ -13,5 +13,8 @@
 @import url("./03_components/text-flow.css");
 @import url("./03_components/nav/main.css");
 @import url("./03_components/nav/list.css");
+@import url("./03_components/colors.css");
+@import url("./03_components/spaces.css");
+@import url("./03_components/icons.css");
 
 @import url("./04_layouts/page.css");

package/templates/layouts/example.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>{{var:title}}</title>
+    <base href=".." />
 
     {{var:styles}}
     <style>

package/templates/partials/colors.html

@@ -0,0 +1,12 @@
+<div class="colors">
+  {{for:this}}
+  <div
+    class="item bg"
+    style="--bg-color: {{var:value.output}};{{if:font}} --font-color: {{var:font.output}};{{/if}}"
+  >
+    {{if:value.hex}}<span class="value">{{var:value.hex}}</span>{{/if}}
+    <span class="text">{{var:text}}</span>
+    <span class="name">{{var:name}}</span>
+  </div>
+  {{/for}}
+</div>

package/templates/partials/content.html

@@ -5,3 +5,15 @@
 {{partial:example example}}
 
 {{partial:code code}}
+
+{{if:colors}}
+{{partial:colors colors}}
+{{/if}}
+
+{{if:spaces}}
+{{partial:spaces spaces}}
+{{/if}}
+
+{{if:icons}}
+{{partial:icons icons}}
+{{/if}}

package/templates/partials/icons.html

@@ -0,0 +1,18 @@
+<div class="icons">
+  {{for:this}}
+    {{if:value.name}}
+    <div class="item from-var" style="--icon: {{var:value.output}}">
+      <span class="show"></span>
+      <span class="text">{{var:text}}</span>
+      <span class="name">{{var:name}}</span>
+    </div>
+    {{/if}}
+    {{if:value.value}}
+    <div class="item from-data">
+      <span class="show">{{var:value.output}}</span>
+      <span class="text" data-icon="{{var:value.output}}">{{var:text}}</span>
+      <span class="name">{{var:name}}</span>
+    </div>
+    {{/if}}
+  {{/for}}
+</div>

package/templates/partials/spaces.html

@@ -0,0 +1,15 @@
+<div class="spaces">
+  {{for:this}}
+  <div
+    class="item"
+    style="--space-value: {{var:value.output}};"
+  >
+    <div class="bg"></div>
+    <div class="bg">
+      <span class="name">{{var:name}}</span>
+      <span class="value">{{var:value.output}}</span>
+      <span class="text">{{var:text}}</span>
+    </div>
+  </div>
+  {{/for}}
+</div>

package/dist/assets/src/base.d.ts

@@ -1 +0,0 @@
-export declare function ready(callback: () => void): void;

package/scripts/src/base.ts

@@ -1,7 +0,0 @@
-export function ready(callback: () => void) {
-  if (document.readyState !== 'loading') {
-    callback()
-  } else {
-    document.addEventListener('DOMContentLoaded', callback)
-  }
-}