@ui-doc/html-renderer 0.1.1 → 0.2.0

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/package.json

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

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>