@ui-doc/html-renderer 0.3.0 → 1.0.0

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","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"]}
+{"version":3,"sources":["index.css","01_resets/root/color.css","01_resets/root/font.css","01_resets/root/space.css","01_resets/root/witdh.css","01_resets/root.css","01_resets/initial.css","01_resets/typography.css","02_utils/background.css","02_utils/padding.css","02_utils/margin.css","02_utils/control.css","02_utils/width.css","03_components/button.css","03_components/container.css","03_components/grid-auto.css","03_components/navigation/burger-control.css","03_components/navigation/main.css","03_components/navigation/list.css","03_components/example-markup.css","03_components/colors.css","03_components/icons.css","03_components/spaces.css","04_layout/body.css","04_layout/inline-code.css","04_layout/page.css"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH;;;;;GAKG;;AAEH;;;;;GAKG;;AClBH;;;;;;;;;;;GAWG;;AACH;EACE,oBAAoB;EACpB,sBAAsB;EACtB,0BAA0B;EAC1B,yBAAyB;EACzB,0BAA0B;AAC5B;;AClBA;;;;GAIG;;AACH;EACE;;;;;;KAMG;EACH,yBAAyB;EACzB,uBAAuB;;EAEvB;;;;;;;KAOG;EACH,sBAAsB;EACtB,uBAAuB;EACvB,qBAAqB;AACvB;;AC3BA;;;;;;;;;;;;;;;;;;;GAmBG;;AACH;EACE,iBAAiB;EACjB,eAAe;EACf,eAAe;EACf,iBAAiB;EACjB,eAAe;EACf,eAAe;EACf,eAAe;EACf,gBAAgB;AAClB;;AC7BA;;;;;;;GAOG;;AACH;EACE,0BAA0B;EAC1B,uBAAuB;AACzB;;ACNA;;;;GAIG;;AACH;EACE;;;;;;;;;;KAUG;EACH,sBAAsB;EACtB,sBAAsB;EACtB,gCAAgC;EAChC;uCACqC;EACrC,wCAAwC;EACxC,oCAAoC;EACpC,uBAAuB;;EAEvB;;;;;;;;KAQG;EACH,8BAA8B;EAC9B,mCAAmC;EACnC,kCAAkC;EAClC,uCAAuC;EACvC,iBAAiB;;EAEjB;;;;;KAKG;EACH,uBAAuB;;EAEvB;;KAEG;EACH,gDAAgD;EAChD,4CAA4C;EAC5C;;;GAGC;EACD,wCAAwC;EACxC,4CAA4C;EAC5C,kDAAkD;;EAElD;;KAEG;EACH,4CAA4C;;EAE5C,mBAAmB;AACrB;;ACzEA;EACE,sBAAsB;AACxB;;AAEA;;EAEE,mBAAmB;AACrB;;AAEA;EACE,kCAAkC;EAClC,0CAA0C;AAC5C;;AAHA;EACE,kCAAkC;EAClC,0CAA0C;AAC5C;;AAEA;EACE,uBAAuB;EACvB,gDAAgD;AAClD;;AAEA;EACE,SAAS;EACT,gCAAgC;AAClC;;ACtBA;;GAEG;;AAEH;;;;;;;;GAQG;;AACH;EACE,gCAAgC;EAChC,mCAAmC;EACnC,kCAAkC;EAClC,8BAAsB;KAAtB,2BAAsB;UAAtB,sBAAsB;EACtB,sBAAsB;AACxB;;AAEA;;;;EAIE,+BAA+B;EAC/B,2BAA2B;EAC3B,+BAA+B;EAC/B,oCAAoC;EACpC,6BAA6B;AAC/B;;AAEA;;;;;EAKE,oBAAoB;AACtB;;AAEA;;;;;;;;;;;;;;;;;;GAkBG;;AACH;;;;;;;EAOE,cAAc;;EAEd,qFAAqF;EACrF,gBAAgB;;EAEhB,4CAA4C;EAC5C,mEAAmE;EACnE,4DAA4D;EAC5D,iDAAiD;EACjD,0CAA0C;AAC5C;;AAEA;;EAEE,qBAAqB;AACvB;;AAEA;;EAEE,mBAAmB;AACrB;;AAEA;;EAEE,sBAAsB;AACxB;;AAEA;;EAEE,qBAAqB;AACvB;;AAEA;;EAEE,qBAAqB;AACvB;;AAEA;;EAEE,qBAAqB;AACvB;;AAEA;;;;;;;GAOG;;AACH;EACE,mBAAmB;AACrB;;AAEA;;;;;;GAMG;;AAEH,SAAS;;AAET;;;;GAIG;;AACH;EACE,sCAAsC;EACtC,0DAAkD;UAAlD,kDAAkD;EAClD;qDACmD;AAMrD;;AAJE;IACE,0DAA0D;IAC1D,qDAAqD;EACvD;;AAGF;;;;;;;;GAQG;;AACH;;EAEE,sCAAsC;AACxC;;AAEA;EACE,gCAAgC;AAClC;;AP5IA;;;;;GAKG;;AQ5BH;;;;;;GAMG;;AACH;EACE,uCAAuC;EACvC,kCAAkC;;EAElC,6BAA6B;EAC7B,gCAAgC;AAClC;;ACbA;;;;;;;;;;;;;;;GAeG;;AACH;;EAEE;;;6EAG2E;AAC7E;;AAEA;;;;;;;;;GASG;;AACH;;EAEE,sFAAsF;AACxF;;AAEA;;;;;;;;;GASG;;AACH;;EAEE,wFAAwF;AAC1F;;AAEA;;;;;;;;;GASG;;AACH;;EAEE,yFAAyF;AAC3F;;AAEA;;;;;;;;;GASG;;AACH;;EAEE,uFAAuF;AACzF;;AAEA;;;;;;;;;;;;;GAaG;;AACH;EACE,+EAA+E;EAC/E,+EAA+E;EAC/E,+EAA+E;EAC/E,+EAA+E;AACjF;;AAEA;;;;;;;;;GASG;;AACH;EACE,+EAA+E;EAC/E,+EAA+E;AACjF;;AAEA;;;;;;;;;GASG;;AACH;EACE,+EAA+E;EAC/E,+EAA+E;AACjF;;ACrIA;;;;;;;;;;;;;;;;;GAiBG;;AACH;;EAEE;;;6EAG2E;AAC7E;;AAEA;;;;;;;;;;;GAWG;;AACH;;EAEE,qFAAqF;AACvF;;AAEA;;;;;;;;;;;GAWG;;AACH;;EAEE,uFAAuF;AACzF;;AAEA;;;;;;;;;;;GAWG;;AACH;;EAEE,wFAAwF;AAC1F;;AAEA;;;;;;;;;;;GAWG;;AACH;;EAEE,sFAAsF;AACxF;;AAEA;;;;;;;;;;;;;;;GAeG;;AACH;EACE,+EAA+E;EAC/E,+EAA+E;EAC/E,+EAA+E;EAC/E,+EAA+E;AACjF;;AAEA;;;;;;;;;;;GAWG;;AACH;EACE,+EAA+E;EAC/E,+EAA+E;AACjF;;AAEA;;;;;;;;;;;GAWG;;AACH;EACE,+EAA+E;EAC/E,+EAA+E;AACjF;;ACrJA;;;;;;;;;GASG;;AACH;;EAEE,aAAa;EACb,aAAa;;EAEb,eAAe;;EAEf,qBAAqB;;EAErB;wDACsD;;EAEtD,kBAAkB;EAClB,qBAAqB;EACrB,oBAAoB;;EAEpB,wBAAgB;;KAAhB,qBAAgB;;UAAhB,gBAAgB;EAChB,qDAAqD;EACrD,YAAY;EACZ,oBAAoB;EACpB,aAAa;AAUf;;AARE;IACE,6DAA6D;EAC/D;;AAEA;;;;IAEE,mBAAmB;EACrB;;ACvCF;;;;;;;GAOG;;AACH;;EAEE,oHAAoH;EACpH;;;GAGC;;EAED,iCAAiC;AACnC;;AAEA;;;;;;GAMG;;AAEH,sBAAsB;;AAEtB;;;;;;GAMG;;AACH;EACE,gCAAgC;AAClC;;AZHA;;;;;GAKG;;AaxCH;;;;;;;;;GASG;;AACH;EACE,gDAAgD;EAChD,gDAAgD;EAChD,0DAA0D;EAC1D,8DAA8D;;EAE9D,oDAAoD;EACpD,qDAAqD;EACrD,qEAAqE;AACvE;;AAEA;;;;;;;GAOG;;AACH;EACE,mCAAmC;AACrC;;AAEA;;;;;;;;GAQG;;ACzCH;;;;;;GAMG;;AAED;IACE,aAAa;EACf;;AAEA;IACE,gBAAgB;EAClB;;ACdF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;;AACH;EACE,sEAAsE;EACtE;;;GAGC;EACD;;;GAGC;EACD,+CAA+C;EAC/C,uEAAuE;EACvE,uFAAuF;;EAEvF,aAAa;EACb,6CAA6C;EAC7C;;;GAGC;AACH;;AChDA;;;;;;;;;;;GAWG;;AAEH;EACE,oBAAoB;EACpB;;;;;;IAME;;EAEF,kBAAkB;EAClB,6FAA6F;EAC7F,sCAAsC;AACxC;;AAEA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,gCAAgC;;EAEhC,cAAc;;EAEd,4EAA4E;EAC5E,kDAAkD;;EAElD,kCAAkC;;EAElC,2DAA2D;AAmB7D;;AAjBE;IACE;;;;;KAKC;EACH;;AAEA;IACE;;;;;KAKC;EACH;;AAIA;IACE,8CAA8C;EAChD;;AAEA;IACE,aAAa;EACf;;AAEA;IACE,+CAA+C;EACjD;;ACzEF;EACE,sDAAsD;EACtD,0DAA0D;EAC1D,iEAAiE;;EAEjE,gBAAgB;EAChB,YAAY;EACZ,MAAM;AACR;;AAEA;;EAEE,aAAa;EACb,0FAA0F;AAC5F;;AAEA;EACE,4EAA4E;;EAE5E,uBAAuB;EACvB,2BAA2B;EAC3B,uBAAuB;EACvB,gCAAgC;AA+ElC;;AA7EE;;;IAGE,4CAA4C;IAC5C,4CAA4C;EAC9C;;AAEA;IACE,uCAAuC;EAMzC;;AAJE;MACE,WAAW;MACX,YAAY;IACd;;AAGF;IACE,sCAAsC;;IAEtC,cAAc;EAKhB;;AAHE;MACE,iCAAiC;IACnC;;AAGF;IACE;MACE,aAAa;IACf;;IAEA;MACE,iBAAiB;IACnB;EACF;;AAEA;;AA5CF;IA6CI;AAwCJ;;IAtCI;MACE,0DAA0D;;MAE1D,iBAAiB;IACnB;;IAEA;MACE,kBAAkB;MAClB,0CAA0C;MAC1C,OAAO;;MAEP,gBAAgB;MAChB,sBAAsB;;MAEtB,WAAW;MACX,gDAAgD;MAChD;8DACwD;;MAExD,UAAU;MACV,gCAAgC;IAClC;;IAEA;;MAEE,oCAAoC;IACtC;;IAEA;;MAEE,UAAU;IACZ;;IAEA;;MAEE,aAAa;IACf;EACF;;ACpGF;EACE,yCAAyC;EACzC,yCAAyC;EACzC,oEAAoE;;EAEpE,gBAAgB;AAelB;;AAbE;IACE,SAAS;IACT,UAAU;IACV,gBAAgB;EAClB;;AAEA;IACE,2DAA2D;EAC7D;;AAEA;IACE,iCAAiC;EACnC;;AAGF;EACE,yCAAyC;EACzC,yCAAyC;EACzC,sCAAsC;EACtC,gCAAgC;AAClC;;AAEA;EACE,yCAAyC;EACzC,yCAAyC;;EAEzC,gBAAgB;EAChB,2FAA2F;AAK7F;;AAHE;IACE,mBAAmB;EACrB;;ACtCF;;EAEE,uFAAuF;AACzF;;AAEA;EACE,aAAa;AAMf;;AAJE;IACE,WAAW;IACX,YAAY;EACd;;AAGF;EACE,8BAA8B;AAKhC;;AAHE;IACE,SAAS;EACX;;AAGF;EACE,aAAa;EACb,gBAAgB;AAClB;;ACzBA;EACE,iBAAiB;EACjB,4BAA4B;AAC9B;;AAEA;EACE,2BAA2B;EAC3B,2BAA2B;;EAE3B,aAAa;EACb,sBAAsB;EACtB,8CAA8C;EAC9C,uBAAuB;;EAEvB,kBAAkB;;EAElB,6DAA6D;AAM/D;;AAJE;IACE,8BAA8B;IAC9B,oCAAoC;EACtC;;ACrBF;EACE,iBAAiB;EACjB,4BAA4B;AAC9B;;AAEA;EACE,2BAA2B;EAC3B,2BAA2B;;EAE3B,aAAa;EACb,sBAAsB;EACtB,8CAA8C;EAC9C,uBAAuB;;EAEvB,kBAAkB;;EAElB,6DAA6D;AA+B/D;;AA7BE;;;;IAIE,qCAAqC;EACvC;;AAEA;IACE,2CAA2C;EAC7C;;AAEA;IACE,oCAAoC;EACtC;;AAGE;;;MAGE,oBAAoB;IACtB;;AAIA;;MAEE,wBAAwB;IAC1B;;AC7CJ;EACE,oCAAoC;EACpC,oCAAoC;;EAEpC,aAAa;EACb,sBAAsB;EACtB,0FAA0F;AAC5F;;AAEA;EACE,aAAa;AA6Bf;;AA3BE;IACE,kCAAkC;IAClC,sCAAsC;EACxC;;AAEA;IACE,+BAA+B;IAC/B,2BAA2B;EAC7B;;AAEA;IACE,0DAA0D;EAC5D;;AAEA;IACE,aAAa;EAWf;;AATE;MACE,uDAAuD;MACvD,wDAAwD;MACxD,oCAAoC;IACtC;;AAEA;MACE,oCAAoC;IACtC;;AtBeJ;;;;;GAKG;;AuBzDH;EACE,YAAY;AACd;;AAEA;EACE,aAAa;EACb,sBAAsB;EACtB,gBAAgB;AAKlB;;AAHE;IACE,SAAS;EACX;;AAGF;EACE,qDAAqD;EACrD,0DAA0D;AAK5D;;AAHE;IACE,iBAAiB;EACnB;;ACpBF;EACE,qBAAqB;EACrB,oBAAoB;EACpB,4DAA4D;EAC5D,+DAA+D;AACjE;;ACLA;EACE,0BAA0B;EAC1B,6CAA6C;AAC/C;;AAEA;EACE,2BAA2B;AAc7B;;AAZE;IACE,6FAA6F;EAC/F;;AAEA;IACE,wFAAwF;EAC1F;;AAEA;;IAEE,eAAe;EACjB;;AAGF;EACE,uBAAuB;EACvB,2BAA2B;AAC7B;;AAEA;EACE;IACE,aAAa;IACb,oDAAoD;IACpD,4BAA4B;IAC5B;;;;;;;OAOG;EA0BL;;IAxBE;MACE,uBAAuB;MACvB,oBAAoB;IACtB;;IAEA;MACE,uBAAuB;MACvB,oBAAoB;IACtB;;IAEA;MACE,uBAAuB;MACvB,oBAAoB;IACtB;;IAEA;MACE,gBAAgB;MAChB,2BAA2B;;MAE3B,gBAAgB;;MAEhB,YAAY;MACZ,gDAAgD;IAClD;AAEJ;;AAEA;EACE;IACE,aAAa;EACf;AACF","file":"ui-doc.css","sourcesContent":["/**\n  * Text for the index page\n  *\n  * @page index UI-Doc\n  */\n\n/**\n  * Variables used in the project.\n  *\n  * @page variables Variables\n  * @order 10\n  */\n\n/**\n  * Resets used to normalize the browser styles.\n  *\n  * @page resets Resets\n  * @order 20\n  */\n@import url(\"01_resets/root.css\");\n@import url(\"01_resets/initial.css\");\n@import url(\"01_resets/typography.css\");\n\n/**\n  * Utility classes are building the base of all styles. They can be applyed everywhere to modify/control one specific thing.\n  *\n  * @page utils Utilities\n  * @order 30\n  */\n@import url(\"02_utils/background.css\");\n@import url(\"02_utils/padding.css\");\n@import url(\"02_utils/margin.css\");\n@import url(\"02_utils/control.css\");\n@import url(\"02_utils/width.css\");\n\n/**\n  * Objects are build out of objects and define style for it's inner children.\n  *\n  * @page components Components\n  * @order 40\n  */\n@import url(\"03_components/button.css\");\n@import url(\"03_components/container.css\");\n@import url(\"03_components/grid-auto.css\");\n@import url(\"03_components/navigation/burger-control.css\");\n@import url(\"03_components/navigation/main.css\");\n@import url(\"03_components/navigation/list.css\");\n@import url(\"03_components/example-markup.css\");\n@import url(\"03_components/colors.css\");\n@import url(\"03_components/icons.css\");\n@import url(\"03_components/spaces.css\");\n\n/**\n  * Layouts are the outermost layer of the design. They define the structure of the page.\n  *\n  * @page layout Layout\n  * @order 50\n  */\n@import url(\"04_layout/body.css\");\n@import url(\"04_layout/inline-code.css\");\n@import url(\"04_layout/page.css\");\n","/**\n  * The color variables are used to define the color palette.\n  *\n  * The color variables are defined by RGB value. When you want to use a color you need use the `rgb()` function. For example: `rgb(var(--color-black))`.\n  *\n  * @location variables.colors Colors\n  * @color {0 0 0|255 255 255} --color-black | Black\n  * @color {20 33 61|255 255 255} --color-blue | Blue\n  * @color {252 163 17} --color-yellow | Yellow\n  * @color {229 229 229} --color-gray | Gray\n  * @color {255 255 255} --color-white | White\n  */\n:root {\n  --color-black: 0 0 0;\n  --color-blue: 20 33 61;\n  --color-yellow: 252 163 17;\n  --color-gray: 229 229 229;\n  --color-white: 255 255 255;\n}\n","/**\n  * Set of predefined font variables.\n  *\n  * @location variables.font Font\n  */\n:root {\n  /**\n    * Font weights are a set of predefined values that can be used to define the weight of a font:\n    * - **--font-weight-normal**\n    * - **--font-weight-bold**\n    *\n    * @location variables.font.weight Font weight\n    */\n  --font-weight-normal: 400;\n  --font-weight-bold: 700;\n\n  /**\n    * Font sizes are a set of predefined values that can be used to define the size of a font:\n    * - **--font-size-sm**\n    * - **--font-size-normal**\n    * - **--font-size-md**\n    *\n    * @location variables.font.size Font size\n    */\n  --font-size-sm: 0.85em;\n  --font-size-normal: 1em;\n  --font-size-md: 1.2em;\n}\n","/**\n  * Space are a set of predefined values that can be used to define the space of an element.\n  * When spaces are used there is always a set of two variables you can use the `--space-unit` and `--space-<size>`.\n  * The `--space-unit` is the base unit that will be multiplied by the `--space-<size>`. Depending on the context\n  * you are using the space `<size>` changes.\n  *\n  * The predefined space can the be set in a specific context by defining the `--space-<size>` variable.\n  * For example the space unit is `1rem` and we are in the padding context, we can use `--space-pt: var(--space-md);` to change the padding\n  * top to the medium space.\n  *\n  * @location variables.spaces Spaces\n  * @space {0.35em} --space-xxs | Extra extra small\n  * @space {0.5em} --space-xs | Extra small\n  * @space {0.7em} --space-sm | Small\n  * @space {1em} --space-normal | Normal\n  * @space {1.3em} --space-md | Medium\n  * @space {1.8em} --space-lg | Large\n  * @space {3.2em} --space-xl | Extra large\n  * @space {4.8em} --space-xxl | Extra extra large\n  */\n:root {\n  --space-xxs: 0.35;\n  --space-xs: 0.5;\n  --space-sm: 0.7;\n  --space-normal: 1;\n  --space-md: 1.3;\n  --space-lg: 1.8;\n  --space-xl: 3.2;\n  --space-xxl: 4.8;\n}\n","/**\n  * Widths are a set of predefined values that can be used to limit the content width.\n  *\n  * - `--width-min-offset-x` - The minimum space on the left and right side.\n  * - `--width-content` - The width of the content.\n  *\n  * @location variables.width Width (Content)\n  */\n:root {\n  --width-min-offset-x: 22px;\n  --width-content: 1200px;\n}\n","@import url(\"./root/color.css\");\n@import url(\"./root/font.css\");\n@import url(\"./root/space.css\");\n@import url(\"./root/witdh.css\");\n\n/**\n  * There are some global veriables that are used in the project. These variables are a base set and can be changed depending on context and requirements. All components are using these variables to define the style or as a fallback if there more specific named variable is not present.\n  *\n  * @location variables.global Globals\n  */\n:root {\n  /**\n    * - `--font-space-unit` - The spacing unit when using font related spaces (see the spaces documentation for mor details).\n    * - `--font-size-base` - The base font size.\n    * - `--font-color` - used font color.\n    * - `--font-family` - uded font family.\n    * - `--font-weight` - used font weight.\n    * - `--font-size` - used font size.\n    * - `--font-line-height` - used font line height.\n    *\n    * @location variables.global.font Font\n    */\n  --font-space-unit: 1em;\n  --font-size-base: 16px;\n  --font-color: var(--color-black);\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\n  /**\n    * - `--bg-color` - used background color\n    * - `--accent-color` - used accent color\n    * - `--selection-color` - used selection color\n    * - `--selection-bg-color` - used selection background color\n    * - `--animation-time` - used animation time\n    *\n    * @location variables.global.colors Colors\n    */\n  --bg-color: var(--color-white);\n  --accent-color: var(--color-yellow);\n  --selection-color: var(--bg-color);\n  --selection-bg-color: var(--font-color);\n  --space-unit: 1em;\n\n  /**\n    *\n    * - `--animation-time` - used animation time\n    *\n    * @location variables.global.animation Animation\n    */\n  --animation-time: 0.25s;\n\n  /**\n    * @location variables.global.nav-main Main navigation\n    */\n  --nav-main-bar-item-space-x: var(--space-normal);\n  --nav-main-bar-item-space-y: var(--space-sm);\n  --nav-main-bar-item-height: calc(\n    (var(--font-size) * var(--font-line-height)) +\n      (var(--space-unit) * var(--nav-main-bar-item-space-y) * 2)\n  );\n  --nav-main-menu-space-t: var(--space-sm);\n  --nav-main-menu-space-b: var(--space-normal);\n  --nav-main-height: var(--nav-main-bar-item-height);\n\n  /**\n    * @location variables.global.nav-main Main navigation\n    */\n  --scroll-padding-top: var(--nav-main-height);\n\n  color-scheme: light;\n}\n","* {\n  box-sizing: border-box;\n}\n\n*::after,\n*::before {\n  box-sizing: inherit;\n}\n\n::selection {\n  color: rgb(var(--selection-color));\n  background: rgb(var(--selection-bg-color));\n}\n\nhtml {\n  scroll-behavior: smooth;\n  scroll-padding-top: var(--scroll-padding-top, 0);\n}\n\nbody {\n  margin: 0;\n  background: rgb(var(--bg-color));\n}\n","/**\n  * @location resets.typography Typography\n  */\n\n/**\n  * @location resets.typography.font Font Style\n  * @example\n  * <div style=\"font-weight: bold;\">Bold | bold | 700</div>\n  * <div style=\"font-weight: normal;\">Normal | normal | 400</div>\n  * <div style=\"font-weight: bold; font-style: italic;\">Bold Italic</div>\n  * <div style=\"font-weight: normal; font-style: italic;\">Normal Italic</div>\n  * @hideCode\n  */\nhtml {\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.control,\n.btn {\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\n/**\n  * You can use html headline tags or the class `.headline` to define headlines. The hedline class comes in handy if you want to display\n  * a headline without the semantic meaning of a headline tag.\n  *\n  * @location resets.typography.headlines Headlines\n  * @example\n  * <h1>Headline h1</h1>\n  * <h2>Headline h2</h2>\n  * <h3>Headline h3</h3>\n  * <h4>Headline h4</h4>\n  * <h5>Headline h5</h5>\n  * <h6>Headline h6</h6>\n  * <span class=\"headline h1\">Class Headline h1</span>\n  * <span class=\"headline h2\">Class Headline h2</span>\n  * <span class=\"headline h3\">Class Headline h3</span>\n  * <span class=\"headline h4\">Class Headline h4</span>\n  * <span class=\"headline h5\">Class Headline h5</span>\n  * <span class=\"headline h6\">Class Headline h6</span>\n  */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\n.headline {\n  display: block;\n\n  margin-top: calc(var(--font-space-unit) * var(--headline-space, var(--space-normal)));\n  margin-bottom: 0;\n\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, var(--font-weight-bold));\n  line-height: var(--headline-line-height, inherit);\n  color: rgb(var(--headline-color, inherit));\n}\n\nh1,\n.headline.h1 {\n  --headline-scale: 2.5;\n}\n\nh2,\n.headline.h2 {\n  --headline-scale: 2;\n}\n\nh3,\n.headline.h3 {\n  --headline-scale: 1.75;\n}\n\nh4,\n.headline.h4 {\n  --headline-scale: 1.5;\n}\n\nh5,\n.headline.h5 {\n  --headline-scale: 1.2;\n}\n\nh6,\n.headline.h6 {\n  --headline-scale: 1.1;\n}\n\n/**\n  * You can use the `.no-space` class to remove the margin from the headline class.\n  *\n  * @location resets.typography.headlines.no-space Headlines without space\n  * @example\n  * <span class=\"headline h1 no-space\">Class Headline h1</span>\n  * <span class=\"headline h2 no-space\">Class Headline h2</span>\n  */\n.headline.no-space {\n  --headline-space: 0;\n}\n\n/**\n  * @location resets.typography.text Text / Paragraph\n  * @example\n  * <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>\n  * <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>\n  * <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>\n  */\n\n/* p {} */\n\n/**\n  * @location resets.typography.link Link\n  * @example\n  * <a href=\"#\">Link Text</a>\n  */\na {\n  color: rgb(var(--link-color, inherit));\n  text-decoration: var(--link-decoration, underline);\n  transition: color ease var(--link-animation-time, var(--animation-time)) text-decoration ease\n    var(--link-animation-time, var(--animation-time));\n\n  &:hover {\n    --link-color: var(--link-hover-color, var(--accent-color));\n    --link-decoration: var(--link-hover-decoration, none);\n  }\n}\n\n/**\n  * @location resets.typography.format Format\n  * @example\n  * <span>Normal Text</span><br>\n  * <strong>Strong Text</strong><br>\n  * <small>Small Text</small><br>\n  * <em>Emphasis Text</em><br>\n  * <i>Italic Text</i>\n  */\nb,\nstrong {\n  --font-weight: var(--font-weight-bold);\n}\n\nsmall {\n  --font-size: var(--font-size-sm);\n}\n","/**\n  * The `.bg` class can be used to set backgrounds, depending on the selected\n  * variant css variables will be changed, so all colors used inside will fit to\n  * the background.\n  *\n  * @location utils.background Background\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","/**\n  * Using `padding` to add paddings top, right, bottom and left to your element.\n  * Possible variables are:\n  * - **--[space]** - set direclty a spacing unit\n  * - **--space-[space]** - set a predefined space\n  *\n  * Possible <spaces> are:\n  * - **pt** - padding-top\n  * - **pr** - padding-right\n  * - **pb** - padding-bottom\n  * - **pl** - padding-left\n  *\n  * @location utils.padding Padding\n  * @example\n  * <div class=\"padding bg bg-black\"><div class=\"bg bg-white\">text</div></div>\n  */\n.padding,\n.pxy {\n  padding: var(--pt, calc(var(--space-unit) * var(--space-pt, var(--space-normal))))\n    var(--pr, calc(var(--space-unit) * var(--space-pr, var(--space-normal))))\n    var(--pb, calc(var(--space-unit) * var(--space-pb, var(--space-normal))))\n    var(--pl, calc(var(--space-unit) * var(--space-pl, var(--space-normal))));\n}\n\n/**\n  * Using `pt` to add padding top to your element.\n  * Possible variables are:\n  * - **--pt** - set direclty a spacing unit\n  * - **--space-pt** - set a predefined space\n  *\n  * @location utils.padding.top Padding top\n  * @example\n  * <div class=\"pt bg bg-black\"><div class=\"bg bg-white\">text</div></div>\n  */\n.pt,\n.py {\n  padding-top: var(--pt, calc(var(--space-unit) * var(--space-pt, var(--space-normal))));\n}\n\n/**\n  * Using `pr` to add padding right to your element.\n  * Possible variables are:\n  * - **--pr** - set direclty a spacing unit\n  * - **--space-pr** - set a predefined space\n  *\n  * @location utils.padding.right Padding right\n  * @example\n  * <div class=\"pr bg bg-black\"><div class=\"bg bg-white\">text</div></div>\n  */\n.pr,\n.px {\n  padding-right: var(--pr, calc(var(--space-unit) * var(--space-pr, var(--space-normal))));\n}\n\n/**\n  * Using `pb` to add padding bottom to your element.\n  * Possible variables are:\n  * - **--pb** - set direclty a spacing unit\n  * - **--space-pb** - set a predefined space\n  *\n  * @location utils.padding.bottom Padding bottom\n  * @example\n  * <div class=\"pb bg bg-black\"><div class=\"bg bg-white\">text</div></div>\n  */\n.pb,\n.py {\n  padding-bottom: var(--pb, calc(var(--space-unit) * var(--space-pb, var(--space-normal))));\n}\n\n/**\n  * Using `pl` to add padding left to your element.\n  * Possible variables are:\n  * - **--pl** - set direclty a spacing unit\n  * - **--space-pl** - set a predefined space\n  *\n  * @location utils.padding.left Padding left\n  * @example\n  * <div class=\"pl bg bg-black\"><div class=\"bg bg-white\">text</div></div>\n  */\n.pl,\n.px {\n  padding-left: var(--pl, calc(var(--space-unit) * var(--space-pl, var(--space-normal))));\n}\n\n/**\n  * Using `pxy` to add padding for the x and y axies to your element.\n  * Possible variables are:\n  * - **--[space]** - set direclty a spacing unit\n  * - **--space-[space]** - set a predefined space\n  *\n  * Possible <spaces> are:\n  * - **my** - padding-top and padding-bottom\n  * - **mx** - padding-left and padding-right\n\n  * @location utils.padding.xy padding y-axis and x-axis\n  * @example\n  * <div class=\"pxy bg bg-black\"><div class=\"bg bg-white\">text</div></div>\n  */\n.pxy {\n  --pt: var(--py, calc(var(--space-unit) * var(--space-py, var(--space-normal))));\n  --pb: var(--py, calc(var(--space-unit) * var(--space-py, var(--space-normal))));\n  --pl: var(--px, calc(var(--space-unit) * var(--space-px, var(--space-normal))));\n  --pr: var(--px, calc(var(--space-unit) * var(--space-px, var(--space-normal))));\n}\n\n/**\n  * Using `py` to add paddings tob and bottom with same size to your element.\n  * Possible variables are:\n  * - **--py** - set direclty a spacing unit\n  * - **--space-py** - set a predefined space\n  *\n  * @location utils.padding.y Padding y-axis\n  * @example\n  * <div class=\"py bg bg-black\"><div class=\"bg bg-white\">text</div></div>\n  */\n.py {\n  --pt: var(--py, calc(var(--space-unit) * var(--space-py, var(--space-normal))));\n  --pb: var(--py, calc(var(--space-unit) * var(--space-py, var(--space-normal))));\n}\n\n/**\n  * Using `px` to add paddings left and right with same size to your element.\n  * Possible variables are:\n  * - **--px** - set direclty a spacing unit\n  * - **--space-px** - set a predefined space\n  *\n  * @location utils.padding.x Padding x-axis\n  * @example\n  * <div class=\"px bg bg-black\"><div class=\"bg bg-white\">text</div></div>\n  */\n.px {\n  --pl: var(--px, calc(var(--space-unit) * var(--space-px, var(--space-normal))));\n  --pr: var(--px, calc(var(--space-unit) * var(--space-px, var(--space-normal))));\n}\n","/**\n  * Using `margin` to add margins top, right, bottom and left to your element.\n  * Possible variables are:\n  * - **--[space]** - set direclty a spacing unit\n  * - **--space-[space]** - set a predefined space\n  *\n  * Possible <spaces> are:\n  * - **mt** - margin-top\n  * - **mr** - margin-right\n  * - **mb** - margin-bottom\n  * - **ml** - margin-left\n  *\n  * @location utils.margin Margin\n  * @example\n  * <div class=\"bg bg-black\" style=\"display: flow-root;\">\n  *   <div class=\"margin bg bg-white\">text</div>\n  * </div>\n  */\n.margin,\n.mxy {\n  margin: var(--mt, calc(var(--space-unit) * var(--space-mt, var(--space-normal))))\n    var(--mr, calc(var(--space-unit) * var(--space-mr, var(--space-normal))))\n    var(--mb, calc(var(--space-unit) * var(--space-mb, var(--space-normal))))\n    var(--ml, calc(var(--space-unit) * var(--space-ml, var(--space-normal))));\n}\n\n/**\n  * Using `mt` to add margin top to your element.\n  * Possible variables are:\n  * - **--mt** - set direclty a spacing unit\n  * - **--space-mt** - set a predefined space\n  *\n  * @location utils.margin.top Margin top\n  * @example\n  * <div class=\"bg bg-black\" style=\"display: flow-root;\">\n  *   <div class=\"mt bg bg-white\">text</div>\n  * </div>\n  */\n.mt,\n.my {\n  margin-top: var(--mt, calc(var(--space-unit) * var(--space-mt, var(--space-normal))));\n}\n\n/**\n  * Using `mr` to add margin right to your element.\n  * Possible variables are:\n  * - **--mr** - set direclty a spacing unit\n  * - **--space-mr** - set a predefined space\n  *\n  * @location utils.margin.right Margin right\n  * @example\n  * <div class=\"bg bg-black\" style=\"display: flow-root;\">\n  *   <div class=\"mr bg bg-white\">text</div>\n  * </div>\n  */\n.mr,\n.mx {\n  margin-right: var(--mr, calc(var(--space-unit) * var(--space-mr, var(--space-normal))));\n}\n\n/**\n  * Using `mb` to add margin bottom to your element.\n  * Possible variables are:\n  * - **--mb** - set direclty a spacing unit\n  * - **--space-mb** - set a predefined space\n  *\n  * @location utils.margin.bottom Margin bottom\n  * @example\n  * <div class=\"bg bg-black\" style=\"display: flow-root;\">\n  *   <div class=\"mb bg bg-white\">text</div>\n  * </div>\n  */\n.mb,\n.my {\n  margin-bottom: var(--mb, calc(var(--space-unit) * var(--space-mb, var(--space-normal))));\n}\n\n/**\n  * Using `ml` to add margin left to your element.\n  * Possible variables are:\n  * - **--ml** - set direclty a spacing unit\n  * - **--space-ml** - set a predefined space\n  *\n  * @location utils.margin.left Margin left\n  * @example\n  * <div class=\"bg bg-black\" style=\"display: flow-root;\">\n  *   <div class=\"ml bg bg-white\">text</div>\n  * </div>\n  */\n.ml,\n.mx {\n  margin-left: var(--ml, calc(var(--space-unit) * var(--space-ml, var(--space-normal))));\n}\n\n/**\n  * Using `mxy` to add margin for the x and y axies to your element.\n  * Possible variables are:\n  * - **--[space]** - set direclty a spacing unit\n  * - **--space-[space]** - set a predefined space\n  *\n  * Possible <spaces> are:\n  * - **my** - margin-top and margin-bottom\n  * - **mx** - margin-left and margin-right\n\n  * @location utils.margin.xy Margin y-axis and x-axis\n  * @example\n  * <div class=\"bg bg-black\" style=\"display: flow-root;\">\n  *   <div class=\"mxy bg bg-white\">text</div>\n  * </div>\n  */\n.mxy {\n  --mt: var(--my, calc(var(--space-unit) * var(--space-my, var(--space-normal))));\n  --mb: var(--my, calc(var(--space-unit) * var(--space-my, var(--space-normal))));\n  --ml: var(--mx, calc(var(--space-unit) * var(--space-mx, var(--space-normal))));\n  --mr: var(--mx, calc(var(--space-unit) * var(--space-mx, var(--space-normal))));\n}\n\n/**\n  * Using `my` to add margins tob and bottom with same size to your element.\n  * Possible variables are:\n  * - **--my** - set direclty a spacing unit\n  * - **--space-my** - set a predefined space\n  *\n  * @location utils.margin.y Margin y-axis\n  * @example\n  * <div class=\"bg bg-black\" style=\"display: flow-root;\">\n  *   <div class=\"my bg bg-white\">text</div>\n  * </div>\n  */\n.my {\n  --mt: var(--my, calc(var(--space-unit) * var(--space-my, var(--space-normal))));\n  --mb: var(--my, calc(var(--space-unit) * var(--space-my, var(--space-normal))));\n}\n\n/**\n  * Using `mx` to add margins left and right with same size to your element.\n  * Possible variables are:\n  * - **--mx** - set direclty a spacing unit\n  * - **--space-mx** - set a predefined space\n  *\n  * @location utils.margin.x Margin x-axis\n  * @example\n  * <div class=\"bg bg-black\" style=\"display: flow-root;\">\n  *   <div class=\"mx bg bg-white\">text</div>\n  * </div>\n  */\n.mx {\n  --ml: var(--mx, calc(var(--space-unit) * var(--space-mx, var(--space-normal))));\n  --mr: var(--mx, calc(var(--space-unit) * var(--space-mx, var(--space-normal))));\n}\n","/**\n  * The `.control` class is used as base for all controls either by extending or using the class directly.\n  *\n  * @location utils.control Control\n  * @example\n  * <a class=\"control\">Link control</a><br>\n  * <button type=\"button\" class=\"control\">Button control</button><br>\n  * <button type=\"button\" class=\"control\" disabled>Button control disabeled</button><br>\n  * <button type=\"button\" class=\"control no-hover\">Disable hover effect</button><br>\n  */\n.control,\n.btn {\n  --space-px: 0;\n  --space-py: 0;\n\n  cursor: pointer;\n\n  display: inline-block;\n\n  padding: var(--py, calc(var(--space-unit) * var(--space-py)))\n    var(--px, calc(var(--space-unit) * var(--space-px)));\n\n  text-align: center;\n  text-decoration: none;\n  word-break: keep-all;\n\n  appearance: none;\n  background: rgb(var(--control-bg-color, transparent));\n  border: none;\n  border-radius: unset;\n  outline: none;\n\n  &:hover:not([aria-disabled=\"true\"], [disabled], .btn[class*=\"bg-\"], .no-hover) {\n    --font-color: var(--control-hover-color, var(--accent-color));\n  }\n\n  &[aria-disabled=\"true\"],\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n","/**\n  * Limit width of content. Use the `--width-content` variable to set the width and the `--width-min-offset-x` to\n  * set the minimum required space on the left and right side. If you want to offset the content a little bit but\n  * keep the same settings from `--width-content` and `--width-min-offset-x` you can use the `--width-content-offset`\n  * variable.\n  *\n  * @location utils.width Width (Content)\n  */\n[class^=\"width-\"],\n[class*=\" width-\"] {\n  /* use padding to get content to a specific width https://css-tricks.com/using-max-for-an-inner-element-max-width/ */\n  --width-calc: max(\n    calc(var(--width-min-offset-x) - var(--width-content-offset, 0px)),\n    calc((100% - var(--width-content)) / 2 - var(--width-content-offset, 0px))\n  );\n\n  padding-inline: var(--width-calc);\n}\n\n/**\n  * @location utils.width.content Width base/default\n  * @example\n  * <div class=\"width-content\">\n  *   <div class=\"bg bg-black\" style=\"min-height: 1em\"></div>\n  * </div>\n  */\n\n/* .width-content {} */\n\n/**\n  * @location utils.width.small Width small\n  * @example\n  * <div class=\"width-sm\">\n  *   <div class=\"bg bg-black\" style=\"min-height: 1em\"></div>\n  * </div>\n  */\n.width-sm {\n  --width-content: var(--width-sm);\n}\n","/**\n  * Buttons extend the `.control` class and can be used with different html attributes.\n  *\n  * @location components.button Button\n  * @example\n  * <button class=\"btn\">Button</button>\n  * <button class=\"btn\" disabled>Button disabled</button>\n  * <a href=\"#\" class=\"btn\">Link Button</a>\n  * <input type=\"submit\" class=\"btn\" value=\"Submit button\" />\n  */\n.btn {\n  --space-py: var(--btn-space-py, var(--space-xs));\n  --space-px: var(--btn-space-px, var(--space-sm));\n  --font-size: var(--btn-font-size, var(--font-size-normal));\n  --font-weight: var(--btn-font-weight, var(--font-weight-bold));\n\n  color: rgb(var(--btn-font-color, var(--font-color)));\n  background: rgb(var(--btn-bg-color, var(--bg-color)));\n  transition: all ease var(--btn-animation-time, var(--animation-time));\n}\n\n/**\n  * We are using the bg colors to modify the btn color. In combination with the accent color for hover effects.\n  *\n  * @location components.button.colors Colors\n  * @example\n  * <button class=\"btn bg-white\">Button</button>\n  * <button class=\"btn bg-black\">Button</button>\n  */\n.btn[class*=\"bg-\"]:hover:not([aria-disabled=\"true\"], [disabled], .no-hover) {\n  --btn-bg-color: var(--accent-color);\n}\n\n/**\n  * The hover effect when using bg colors is disabled when using disabled attributes. Or you can manually disable it with `.no-hover`.\n  *\n  * @location components.button.colors.hover Hover effect\n  * @example\n  * <button class=\"btn bg-black\" aria-disabled=\"true\">Disabled by aria</button>\n  * <button class=\"btn bg-black\" disabled>Disabled</button>\n  * <button class=\"btn bg-black no-hover\">No hover</button>\n  */\n","/**\n  * You can use the container class to wrap your content in a container.\n  *\n  * @location components.container Container\n  * @code\n  * <div class=\"container\"></div>\n  */\n.container {\n  > *:first-child {\n    margin-top: 0;\n  }\n\n  > *:last-child {\n    margin-bottom: 0;\n  }\n}\n","/**\n  * Use the auto grid class to define your custom grid layouts. Please note, all columns will have the same width.\n  * We are using css variables to define the grid:\n  * - `--grid-columns` (required): define how many columns your grid should have\n  * - `--grid-item-min-width` (required): define the min width of the containing items, when you use a count of 4 and a item\n  *   width of  200px but there are only 650px availabe only three columns will be used. All items won't get smaller as\n  *   this number.\n  *\n  * Modify the gap of your grid:\n  * - `--gap-x` (optional): column (x-axis) gap - space between items - eg. 3rem\n  * - `--gap-y` (optional): row (y-axis) gap - space between items - eg. 3rem\n  * - `--gap` (optional): Define column (x-axis) and row (y-axis) gap - eg. 3rem\n  * - `--gap-space-x` (optional): Define column (x-axis) gap - use existing space variables - eg. var(--space-xs)\n  * - `--gap-space-y` (optional): Define row (y-axis) gap - use existing space variables - eg. var(--space-xs)\n  * - `--gap-space` (optional): Define column (x-axis) and row (y-axis) gap - use existing space variables - eg. var(--space-xs)\n  *\n  * If you need to redefine the gap in a inner auto grid you can use `unset` or `inital` as vairable value inn the inner grid to fallback to default.\n  *\n  * @location components.grid-auto Auto Grid\n  * @example\n  * <div class=\"grid-auto\" style=\"--grid-columns: 3; --grid-item-min-width: 300px;\">\n  *   <div class=\"bg bg-black pxy\"></div>\n  *   <div class=\"bg bg-black pxy\"></div>\n  *   <div class=\"bg bg-black pxy\"></div>\n  *   <div class=\"bg bg-black pxy\"></div>\n  *   <div class=\"bg bg-black pxy\"></div>\n  * </div>\n  */\n.grid-auto {\n  /* https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/ */\n  --grid-gap-x: var(\n    --gap-x,\n    var(--gap, calc(var(--space-unit) * var(--gap-space-x, var(--gap-space, var(--space-normal)))))\n  );\n  --grid-gap-y: var(\n    --gap-y,\n    var(--gap, calc(var(--space-unit) * var(--gap-space-y, var(--gap-space, var(--space-normal)))))\n  );\n  --grid-gap-count: calc(var(--grid-columns) - 1);\n  --grid-total-gap-width: calc(var(--grid-gap-count) * var(--grid-gap-x));\n  --grid-item-max-width: calc((100% - var(--grid-total-gap-width)) / var(--grid-columns));\n\n  display: grid;\n  grid-gap: var(--grid-gap-y) var(--grid-gap-x);\n  grid-template-columns: repeat(\n    auto-fill,\n    minmax(max(var(--grid-item-min-width), var(--grid-item-max-width)), 1fr)\n  );\n}\n","/**\n  * @location components.navigation.burger-control Navigation Burger Control\n  * @example\n  * <nav class=\"nav\">\n  *   <button class=\"control burger\" aria-label=\"Toggle Navigation\" aria-expanded=\"false\" aria-controls=\"target\" style=\"--nav-burger-control-size: 3em; --space-px: .4; --space-py: .6\">\n  *     <span class=\"line\"></span>\n  *     <span class=\"line\"></span>\n  *     <span class=\"line\"></span>\n  *   </button>\n  *   <div id=\"target\" hidden>Controlled Area</div>\n  * </nav>\n  */\n\n.nav-main .burger.control {\n  /* prettier-ignore */\n  --nav-burger-control-line-height-calc: var(--nav-burger-control-line-height, calc(\n    (\n      var(--nav-burger-control-size) -\n      (var(--py, calc(var(--space-unit) * var(--space-py))) * 2) -\n      (var(--nav-burger-control-line-space, var(--space-unit) / 2) * 2)\n    ) / 3\n  ));\n\n  position: relative;\n  width: calc(var(--nav-burger-control-size) * var(--nav-burger-control-width-multiplier, 1.4));\n  height: var(--nav-burger-control-size);\n}\n\n.nav-main .burger.control > .line {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  display: block;\n\n  width: calc(100% - var(--px, calc(var(--space-unit) * var(--space-px))) * 2);\n  height: var(--nav-burger-control-line-height-calc);\n\n  background: rgb(var(--font-color));\n\n  transition: all var(--nav-burger-animation-time, 0.3s) ease;\n\n  &:first-child {\n    transform: translate(\n      -50%,\n      calc(\n        -50% - var(--nav-burger-control-line-space, var(--space-unit) / 2) - var(--nav-burger-control-line-height-calc)\n      )\n    );\n  }\n\n  &:last-child {\n    transform: translate(\n      -50%,\n      calc(\n        -50% + var(--nav-burger-control-line-space, var(--space-unit) / 2) + var(--nav-burger-control-line-height-calc)\n      )\n    );\n  }\n}\n\n.nav-main .burger.control[aria-expanded=\"true\"] > .line {\n  &:first-child {\n    transform: translate(-50%, -50%) rotate(45deg);\n  }\n\n  &:nth-child(2) {\n    display: none;\n  }\n\n  &:last-child {\n    transform: translate(-50%, -50%) rotate(-45deg);\n  }\n}\n",".nav-main {\n  --bg-color: var(--na-main-bg-color, var(--color-blue));\n  --font-color: var(--nav-main-bg-color, var(--color-white));\n  --accent-color: var(--nav-main-accent-color, var(--color-yellow));\n\n  position: sticky;\n  z-index: 100;\n  top: 0;\n}\n\n.nav-main > .bar,\n.nav-main > .bar > .menu {\n  display: flex;\n  gap: var(--nav-main-item-gap, calc(var(--space-unit) * var(--nav-main-item-gap-space, 0)));\n}\n\n.nav-main > .bar {\n  --width-content-offset: var(--nav-main-bar-item-space-x) * var(--space-unit);\n\n  container-name: nav-bar;\n  container-type: inline-size;\n  justify-content: center;\n  background: rgb(var(--bg-color));\n\n  > .logo,\n  > .burger.control,\n  > .menu > .control {\n    --space-px: var(--nav-main-bar-item-space-x);\n    --space-py: var(--nav-main-bar-item-space-y);\n  }\n\n  > .logo {\n    height: var(--nav-main-bar-item-height);\n\n    > svg {\n      width: auto;\n      height: 100%;\n    }\n  }\n\n  > .menu > .control {\n    --font-weight: var(--font-weight-bold);\n\n    display: block;\n\n    &[aria-current=\"page\"] {\n      --font-color: var(--accent-color);\n    }\n  }\n\n  @container nav-bar (width > 1000px) {\n    > .burger.control {\n      display: none;\n    }\n\n    > .menu {\n      margin-left: auto;\n    }\n  }\n\n  @container nav-bar (width <= 1000px) {\n    position: relative;\n\n    > .burger.control {\n      --nav-burger-control-size: var(--nav-main-bar-item-height);\n\n      margin-left: auto;\n    }\n\n    > .menu {\n      position: absolute;\n      top: calc(var(--nav-main-bar-item-height));\n      left: 0;\n\n      overflow-y: auto;\n      flex-direction: column;\n\n      width: 100%;\n      max-height: calc(100vh - var(--nav-main-height));\n      padding: calc(var(--space-unit) * var(--nav-main-menu-space-t)) var(--width-calc)\n        calc(var(--space-unit) * var(--nav-main-menu-space-b));\n\n      opacity: 1;\n      background: rgb(var(--bg-color));\n    }\n\n    > .menu.menu-show-enter-active,\n    > .menu.menu-show-leave-active {\n      transition: opacity 0.3s ease-in-out;\n    }\n\n    > .menu.menu-show-enter-from,\n    > .menu.menu-show-leave-to {\n      opacity: 0;\n    }\n\n    > .menu[hidden],\n    > .burger.control[aria-expanded=\"false\"] ~ .menu {\n      display: none;\n    }\n  }\n}\n",".nav-list {\n  --nav-list-item-space-px: var(--space-sm);\n  --nav-list-item-space-py: var(--space-xs);\n  --nav-list-item-border-color: var(--border-color, var(--font-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.active {\n    --font-color: var(--accent-color);\n  }\n}\n\n.nav-list > ul > li > .control {\n  --space-py: var(--nav-list-item-space-py);\n  --space-pr: var(--nav-list-item-space-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  --space-py: var(--nav-list-item-space-py);\n  --space-px: var(--nav-list-item-space-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",".example,\n.markup {\n  border: 1px solid rgb(var(--code-border-color, var(--border-color, var(--font-color))));\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",".colors {\n  --grid-columns: 4;\n  --grid-item-min-width: 200px;\n}\n\n.colors > .item {\n  --space-px: var(--space-md);\n  --space-py: var(--space-xl);\n\n  display: flex;\n  flex-direction: column;\n  gap: calc(var(--space-xs) * var(--space-unit));\n  justify-content: center;\n\n  text-align: center;\n\n  border: 1px solid rgb(var(--border-color, var(--font-color)));\n\n  > .text {\n    font-size: var(--font-size-md);\n    font-weight: var(--font-weight-bold);\n  }\n}\n",".icons {\n  --grid-columns: 4;\n  --grid-item-min-width: 200px;\n}\n\n.icons > .item {\n  --space-px: var(--space-md);\n  --space-py: var(--space-xl);\n\n  display: flex;\n  flex-direction: column;\n  gap: calc(var(--space-xs) * var(--space-unit));\n  justify-content: center;\n\n  text-align: center;\n\n  border: 1px solid rgb(var(--border-color, var(--font-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",".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, calc(var(--spaces-gap-space, var(--space-xs)) * var(--space-unit)));\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  > .pxy {\n    --space-px: var(--space-normal);\n    --space-py: var(--space-xs);\n  }\n\n  > div:first-child {\n    margin-right: calc(var(--space-value) * var(--space-unit));\n  }\n\n  > .info {\n    display: flex;\n\n    > *:not(:last-child) {\n      margin-right: calc(var(--space-xs) * var(--space-unit));\n      padding-right: calc(var(--space-xs) * var(--space-unit));\n      border-right: 1px solid currentcolor;\n    }\n\n    > .name {\n      font-weight: var(--font-weight-bold);\n    }\n  }\n}\n","html {\n  height: 100%;\n}\n\nhtml > body:has(.expand-full-height) {\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n\n  > .expand-full-height {\n    flex: 1 1;\n  }\n}\n\nhtml > body > footer {\n  --bg-color: var(--footer-bg-color, var(--color-blue));\n  --font-color: var(--footer-font-color, var(--color-white));\n\n  > .text {\n    text-align: right;\n  }\n}\n","p > code {\n  display: inline-block;\n  padding: 0.1em 0.2em;\n  color: rgb(var(--inline-code-font-color, var(--font-color)));\n  background: rgb(var(--inline-code-bg-color, var(--color-gray)));\n}\n","body.page {\n  --main-sidebar-width: 25ch;\n  --main-content-sidebar-space: var(--space-xl);\n}\n\nbody.page > .content {\n  --space-py: var(--space-xl);\n\n  .headline + .description {\n    margin-top: calc(var(--page-headline-description-space, var(--space-md)) * var(--space-unit));\n  }\n\n  > main > section + section {\n    margin-top: calc(var(--page-content-section-space, var(--space-xl)) * var(--space-unit));\n  }\n\n  > main * + .example,\n  > main *:not(.example) + .markup {\n    margin-top: 1em;\n  }\n}\n\nbody.page > .content > main {\n  container-name: content;\n  container-type: inline-size;\n}\n\n@media screen and (width >= 1000px) {\n  body.page > .content:has(> .sidebar) {\n    display: grid;\n    grid-template-columns: var(--main-sidebar-width) 1fr;\n    grid-template-rows: auto 1fr;\n    gap: var(\n        --page-header-main-garp,\n        calc(var(--page-header-main-space, var(--space-lg)) * var(--space-unit))\n      )\n      var(\n        --page-content-sidebar-garp,\n        calc(var(--page-content-sidebar-space, var(--space-xl)) * var(--space-unit))\n      );\n\n    > .sidebar {\n      grid-column: 1 / span 1;\n      grid-row: 1 / span 2;\n    }\n\n    > header {\n      grid-column: 2 / span 1;\n      grid-row: 1 / span 1;\n    }\n\n    > main {\n      grid-column: 2 / span 1;\n      grid-row: 2 / span 1;\n    }\n\n    > .sidebar > .scrollbar {\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}\n\n@media screen and (width < 1000px) {\n  body.page > .content > .sidebar {\n    display: none;\n  }\n}\n"]}

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

@@ -1 +1,9 @@
-: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}
+:root{--color-black:0 0 0;--color-blue:20 33 61;--color-yellow:252 163 17;--color-gray:229 229 229;--color-white:255 255 255;--font-weight-normal:400;--font-weight-bold:700;--font-size-sm:0.85em;--font-size-normal:1em;--font-size-md:1.2em;--space-xxs:0.35;--space-xs:0.5;--space-sm:0.7;--space-normal:1;--space-md:1.3;--space-lg:1.8;--space-xl:3.2;--space-xxl:4.8;--width-min-offset-x:22px;--width-content:1200px;--font-space-unit:1em;--font-size-base:16px;--font-color:var(--color-black);--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;--bg-color:var(--color-white);--accent-color:var(--color-yellow);--selection-color:var(--bg-color);--selection-bg-color:var(--font-color);--space-unit:1em;--animation-time:0.25s;--nav-main-bar-item-space-x:var(--space-normal);--nav-main-bar-item-space-y:var(--space-sm);--nav-main-bar-item-height:calc(var(--font-size)*var(--font-line-height) + var(--space-unit)*var(--nav-main-bar-item-space-y)*2);--nav-main-menu-space-t:var(--space-sm);--nav-main-menu-space-b:var(--space-normal);--nav-main-height:var(--nav-main-bar-item-height);--scroll-padding-top:var(--nav-main-height);color-scheme:light}*{box-sizing:border-box}:after,:before{box-sizing:inherit}::-moz-selection{background:rgb(var(--selection-bg-color));color:rgb(var(--selection-color))}::selection{background:rgb(var(--selection-bg-color));color:rgb(var(--selection-color))}html{scroll-behavior:smooth;scroll-padding-top:var(--scroll-padding-top,0)}body{background:rgb(var(--bg-color));margin:0}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}.btn,.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}.headline,h1,h2,h3,h4,h5,h6{color:rgb(var(--headline-color,inherit));display:block;font-family:var(--headline-family,inherit);font-size:calc(var(--font-size-normal)*var(--headline-scale, 1));font-weight:var(--headline-weight,var(--font-weight-bold));line-height:var(--headline-line-height,inherit);margin-bottom:0;margin-top:calc(var(--font-space-unit)*var(--headline-space, var(--space-normal)))}.headline.h1,h1{--headline-scale:2.5}.headline.h2,h2{--headline-scale:2}.headline.h3,h3{--headline-scale:1.75}.headline.h4,h4{--headline-scale:1.5}.headline.h5,h5{--headline-scale:1.2}.headline.h6,h6{--headline-scale:1.1}.headline.no-space{--headline-space:0}a{color:rgb(var(--link-color,inherit));-webkit-text-decoration:var(--link-decoration,underline);text-decoration:var(--link-decoration,underline);transition:color ease var(--link-animation-time,var(--animation-time)) text-decoration ease var(--link-animation-time,var(--animation-time))}a:hover{--link-color:var(--link-hover-color,var(--accent-color));--link-decoration:var(--link-hover-decoration,none)}b,strong{--font-weight:var(--font-weight-bold)}small{--font-size:var(--font-size-sm)}.bg{--selection-bg-color:var(--font-color);--selection-color:var(--bg-color);background:rgb(var(--bg-color));color:rgb(var(--font-color))}.padding,.pxy{padding:var(--pt,calc(var(--space-unit)*var(--space-pt, var(--space-normal)))) var(--pr,calc(var(--space-unit)*var(--space-pr, var(--space-normal)))) var(--pb,calc(var(--space-unit)*var(--space-pb, var(--space-normal)))) var(--pl,calc(var(--space-unit)*var(--space-pl, var(--space-normal))))}.pt,.py{padding-top:var(--pt,calc(var(--space-unit)*var(--space-pt, var(--space-normal))))}.pr,.px{padding-right:var(--pr,calc(var(--space-unit)*var(--space-pr, var(--space-normal))))}.pb,.py{padding-bottom:var(--pb,calc(var(--space-unit)*var(--space-pb, var(--space-normal))))}.pl,.px{padding-left:var(--pl,calc(var(--space-unit)*var(--space-pl, var(--space-normal))))}.pxy{--pt:var(--py,calc(var(--space-unit)*var(--space-py, var(--space-normal))));--pb:var(--py,calc(var(--space-unit)*var(--space-py, var(--space-normal))));--pl:var(--px,calc(var(--space-unit)*var(--space-px, var(--space-normal))));--pr:var(--px,calc(var(--space-unit)*var(--space-px, var(--space-normal))))}.py{--pt:var(--py,calc(var(--space-unit)*var(--space-py, var(--space-normal))));--pb:var(--py,calc(var(--space-unit)*var(--space-py, var(--space-normal))))}.px{--pl:var(--px,calc(var(--space-unit)*var(--space-px, var(--space-normal))));--pr:var(--px,calc(var(--space-unit)*var(--space-px, var(--space-normal))))}.margin,.mxy{margin:var(--mt,calc(var(--space-unit)*var(--space-mt, var(--space-normal)))) var(--mr,calc(var(--space-unit)*var(--space-mr, var(--space-normal)))) var(--mb,calc(var(--space-unit)*var(--space-mb, var(--space-normal)))) var(--ml,calc(var(--space-unit)*var(--space-ml, var(--space-normal))))}.mt,.my{margin-top:var(--mt,calc(var(--space-unit)*var(--space-mt, var(--space-normal))))}.mr,.mx{margin-right:var(--mr,calc(var(--space-unit)*var(--space-mr, var(--space-normal))))}.mb,.my{margin-bottom:var(--mb,calc(var(--space-unit)*var(--space-mb, var(--space-normal))))}.ml,.mx{margin-left:var(--ml,calc(var(--space-unit)*var(--space-ml, var(--space-normal))))}.mxy{--mt:var(--my,calc(var(--space-unit)*var(--space-my, var(--space-normal))));--mb:var(--my,calc(var(--space-unit)*var(--space-my, var(--space-normal))));--ml:var(--mx,calc(var(--space-unit)*var(--space-mx, var(--space-normal))));--mr:var(--mx,calc(var(--space-unit)*var(--space-mx, var(--space-normal))))}.my{--mt:var(--my,calc(var(--space-unit)*var(--space-my, var(--space-normal))));--mb:var(--my,calc(var(--space-unit)*var(--space-my, var(--space-normal))))}.mx{--ml:var(--mx,calc(var(--space-unit)*var(--space-mx, var(--space-normal))));--mr:var(--mx,calc(var(--space-unit)*var(--space-mx, var(--space-normal))))}.btn,.control{--space-px:0;--space-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;padding:var(--py,calc(var(--space-unit)*var(--space-py))) var(--px,calc(var(--space-unit)*var(--space-px)));text-align:center;text-decoration:none;word-break:keep-all}.btn:hover:not([aria-disabled=true],[disabled],.btn[class*=bg-],.no-hover),.control:hover:not([aria-disabled=true],[disabled],.btn[class*=bg-],.no-hover){--font-color:var(--control-hover-color,var(--accent-color))}.btn:disabled,.btn[aria-disabled=true],.control:disabled,.control[aria-disabled=true]{cursor:not-allowed}[class*=" width-"],[class^=width-]{--width-calc:max(calc(var(--width-min-offset-x) - var(--width-content-offset, 0px)),calc((100% - var(--width-content))/2 - var(--width-content-offset, 0px)));padding-inline:var(--width-calc)}.width-sm{--width-content:var(--width-sm)}.btn{--space-py:var(--btn-space-py,var(--space-xs));--space-px:var(--btn-space-px,var(--space-sm));--font-size:var(--btn-font-size,var(--font-size-normal));--font-weight:var(--btn-font-weight,var(--font-weight-bold));background:rgb(var(--btn-bg-color,var(--bg-color)));color:rgb(var(--btn-font-color,var(--font-color)));transition:all ease var(--btn-animation-time,var(--animation-time))}.btn[class*=bg-]:hover:not([aria-disabled=true],[disabled],.no-hover){--btn-bg-color:var(--accent-color)}.container>:first-child{margin-top:0}.container>:last-child{margin-bottom:0}.grid-auto{--grid-gap-x:var(
+    --gap-x,var(--gap,calc(var(--space-unit) * var(--gap-space-x, var(--gap-space, var(--space-normal)))))
+  );--grid-gap-y:var(
+    --gap-y,var(--gap,calc(var(--space-unit) * var(--gap-space-y, var(--gap-space, var(--space-normal)))))
+  );--grid-gap-count:calc(var(--grid-columns) - 1);--grid-total-gap-width:calc(var(--grid-gap-count)*var(--grid-gap-x));--grid-item-max-width:calc((100% - var(--grid-total-gap-width))/var(--grid-columns));display:grid;grid-gap:var(--grid-gap-y) var(--grid-gap-x);grid-template-columns:repeat(auto-fill,minmax(max(var(--grid-item-min-width),var(--grid-item-max-width)),1fr))}.nav-main .burger.control{--nav-burger-control-line-height-calc:var(--nav-burger-control-line-height,calc((var(--nav-burger-control-size) - (var(--py, calc(var(--space-unit) * var(--space-py))) * 2) - (var(--nav-burger-control-line-space, var(--space-unit) / 2) * 2)) / 3));height:var(--nav-burger-control-size);position:relative;width:calc(var(--nav-burger-control-size)*var(--nav-burger-control-width-multiplier, 1.4))}.nav-main .burger.control>.line{background:rgb(var(--font-color));display:block;height:var(--nav-burger-control-line-height-calc);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all var(--nav-burger-animation-time,.3s) ease;width:calc(100% - var(--px, calc(var(--space-unit) * var(--space-px))) * 2)}.nav-main .burger.control>.line:first-child{transform:translate(-50%,calc(-50% - var(--nav-burger-control-line-space, var(--space-unit) / 2) - var(--nav-burger-control-line-height-calc)))}.nav-main .burger.control>.line:last-child{transform:translate(-50%,calc(-50% + var(--nav-burger-control-line-space, var(--space-unit) / 2) + var(--nav-burger-control-line-height-calc)))}.nav-main .burger.control[aria-expanded=true]>.line:first-child{transform:translate(-50%,-50%) rotate(45deg)}.nav-main .burger.control[aria-expanded=true]>.line:nth-child(2){display:none}.nav-main .burger.control[aria-expanded=true]>.line:last-child{transform:translate(-50%,-50%) rotate(-45deg)}.nav-main{--bg-color:var(--na-main-bg-color,var(--color-blue));--font-color:var(--nav-main-bg-color,var(--color-white));--accent-color:var(--nav-main-accent-color,var(--color-yellow));position:sticky;top:0;z-index:100}.nav-main>.bar,.nav-main>.bar>.menu{display:flex;gap:var(--nav-main-item-gap,calc(var(--space-unit)*var(--nav-main-item-gap-space, 0)))}.nav-main>.bar{--width-content-offset:var(--nav-main-bar-item-space-x) * var(--space-unit);background:rgb(var(--bg-color));container-name:nav-bar;container-type:inline-size;justify-content:center}.nav-main>.bar>.burger.control,.nav-main>.bar>.logo,.nav-main>.bar>.menu>.control{--space-px:var(--nav-main-bar-item-space-x);--space-py:var(--nav-main-bar-item-space-y)}.nav-main>.bar>.logo{height:var(--nav-main-bar-item-height)}.nav-main>.bar>.logo>svg{height:100%;width:auto}.nav-main>.bar>.menu>.control{--font-weight:var(--font-weight-bold);display:block}.nav-main>.bar>.menu>.control[aria-current=page]{--font-color:var(--accent-color)}@container nav-bar (width > 1000px){.nav-main>.bar>.burger.control{display:none}.nav-main>.bar>.menu{margin-left:auto}}@container nav-bar (width <= 1000px){.nav-main>.bar{position:relative}.nav-main>.bar>.burger.control{--nav-burger-control-size:var(--nav-main-bar-item-height);margin-left:auto}.nav-main>.bar>.menu{background:rgb(var(--bg-color));flex-direction:column;left:0;max-height:calc(100vh - var(--nav-main-height));opacity:1;overflow-y:auto;padding:calc(var(--space-unit)*var(--nav-main-menu-space-t)) var(--width-calc) calc(var(--space-unit)*var(--nav-main-menu-space-b));position:absolute;top:calc(var(--nav-main-bar-item-height));width:100%}.nav-main>.bar>.menu.menu-show-enter-active,.nav-main>.bar>.menu.menu-show-leave-active{transition:opacity .3s ease-in-out}.nav-main>.bar>.menu.menu-show-enter-from,.nav-main>.bar>.menu.menu-show-leave-to{opacity:0}.nav-main>.bar>.burger.control[aria-expanded=false]~.menu,.nav-main>.bar>.menu[hidden]{display:none}}.nav-list{--nav-list-item-space-px:var(--space-sm);--nav-list-item-space-py:var(--space-xs);--nav-list-item-border-color:var(--border-color,var(--font-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{--space-py:var(--nav-list-item-space-py);--space-pr:var(--nav-list-item-space-px);--font-weight:var(--font-weight-bold);--font-size:var(--font-size-md)}.nav-list>ul>li>ul>li>.control{--space-py:var(--nav-list-item-space-py);--space-px:var(--nav-list-item-space-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}.example,.markup{border:1px solid rgb(var(--code-border-color,var(--border-color,var(--font-color))))}.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}.colors{--grid-columns:4;--grid-item-min-width:200px}.colors>.item{--space-px:var(--space-md);--space-py:var(--space-xl);border:1px solid rgb(var(--border-color,var(--font-color)));display:flex;flex-direction:column;gap:calc(var(--space-xs)*var(--space-unit));justify-content:center;text-align:center}.colors>.item>.text{font-size:var(--font-size-md);font-weight:var(--font-weight-bold)}.icons{--grid-columns:4;--grid-item-min-width:200px}.icons>.item{--space-px:var(--space-md);--space-py:var(--space-xl);border:1px solid rgb(var(--border-color,var(--font-color)));display:flex;flex-direction:column;gap:calc(var(--space-xs)*var(--space-unit));justify-content:center;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)}.spaces{--spaces-bg-color:var(--font-color);--spaces-font-color:var(--bg-color);flex-direction:column;gap:var(--spaces-gap,calc(var(--spaces-gap-space, var(--space-xs))*var(--space-unit)))}.spaces,.spaces>.item{display:flex}.spaces>.item>.bg{--bg-color:var(--spaces-bg-color);--font-color:var(--spaces-font-color)}.spaces>.item>.pxy{--space-px:var(--space-normal);--space-py:var(--space-xs)}.spaces>.item>div:first-child{margin-right:calc(var(--space-value)*var(--space-unit))}.spaces>.item>.info{display:flex}.spaces>.item>.info>:not(:last-child){border-right:1px solid;margin-right:calc(var(--space-xs)*var(--space-unit));padding-right:calc(var(--space-xs)*var(--space-unit))}.spaces>.item>.info>.name{font-weight:var(--font-weight-bold)}html{height:100%}html>body:has(.expand-full-height){display:flex;flex-direction:column;min-height:100%}html>body:has(.expand-full-height)>.expand-full-height{flex:1 1}html>body>footer{--bg-color:var(--footer-bg-color,var(--color-blue));--font-color:var(--footer-font-color,var(--color-white))}html>body>footer>.text{text-align:right}p>code{background:rgb(var(--inline-code-bg-color,var(--color-gray)));color:rgb(var(--inline-code-font-color,var(--font-color)));display:inline-block;padding:.1em .2em}body.page{--main-sidebar-width:25ch;--main-content-sidebar-space:var(--space-xl)}body.page>.content{--space-py:var(--space-xl)}body.page>.content .headline+.description{margin-top:calc(var(--page-headline-description-space, var(--space-md))*var(--space-unit))}body.page>.content>main>section+section{margin-top:calc(var(--page-content-section-space, var(--space-xl))*var(--space-unit))}body.page>.content>main *+.example,body.page>.content>main :not(.example)+.markup{margin-top:1em}body.page>.content>main{container-name:content;container-type:inline-size}@media screen and (width >= 1000px){body.page>.content:has(>.sidebar){display:grid;gap:var(
+        --page-header-main-garp,calc(var(--page-header-main-space, var(--space-lg))*var(--space-unit))
+      ) var(
+        --page-content-sidebar-garp,calc(var(--page-content-sidebar-space, var(--space-xl))*var(--space-unit))
+      );grid-template-columns:var(--main-sidebar-width) 1fr;grid-template-rows:auto 1fr}body.page>.content:has(>.sidebar)>.sidebar{grid-column:1/span 1;grid-row:1/span 2}body.page>.content:has(>.sidebar)>header{grid-column:2/span 1;grid-row:1/span 1}body.page>.content:has(>.sidebar)>main{grid-column:2/span 1;grid-row:2/span 1}body.page>.content:has(>.sidebar)>.sidebar>.scrollbar{height:100%;max-height:calc(100vh - var(--nav-main-height));overflow-y:auto;position:sticky;top:var(--nav-main-height)}}@media screen and (width < 1000px){body.page>.content>.sidebar{display:none}}

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=()=>{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)}();
+!function(){"use strict";function e(e,t,n,r){const a=n?"enter":"leave",i=`${t}-${a}-active`,o=`${t}-${a}-to`,l=`${t}-${a}-from`,d=()=>{e.classList.remove(o,i),e.removeEventListener("animationend",d),e.removeEventListener("transitionend",d),r&&r()};e.addEventListener("animationend",d),e.addEventListener("transitionend",d),e.addEventListener("animationcancel",d),e.addEventListener("transitioncancel",d),e.classList.add(i,l),requestAnimationFrame((()=>{const t=window.getComputedStyle(e);["all","none"].includes(t.transition)&&"none"===t.animationName&&requestAnimationFrame(d),e.classList.remove(l),e.classList.add(o)}))}function t(e,n,r=10){return r<=0||null===e?null:e.matches(n)?e:e.parentElement?t(e.parentElement,n,r-1):null}function n(e,n){const r=e.getAttribute("data-inert");null!==r&&""!==r&&r.split(",").forEach((r=>{(n?null:t(e.parentElement,`[data-inert="${r}"],[data-inert^="${r},"],[data-inert$=",${r}"],[data-inert*=",${r},"]`))||document.querySelectorAll(r).forEach((e=>{n?e.setAttribute("inert",""):e.removeAttribute("inert")}))}))}function r(){document.querySelectorAll("[aria-expanded]").forEach((t=>{const r=t.getAttribute("aria-controls"),a=a=>{const i="true"===t.getAttribute("aria-expanded"),o=()=>{t.setAttribute("aria-expanded",i?"false":"true")};t.parentElement&&t.hasAttribute("data-hide-same-level")&&Array.from(t.parentElement.querySelectorAll(':scope > [aria-expanded="true"]')).filter((e=>e!==t&&e!==a.relatedTarget)).forEach((e=>{e.dispatchEvent(new MouseEvent("click",{bubbles:!0,relatedTarget:t}))})),null!==r&&""!==r?function(t,r,a){const i=document.querySelector(t);if(!i)return;const o=i.getAttribute("data-animate"),l=()=>{i.hasAttribute("aria-hidden")?i.setAttribute("aria-hidden",r?"false":"true"):r?i.removeAttribute("hidden"):i.setAttribute("hidden",""),a()};r?i.querySelectorAll(':scope > [tabindex="-1"], [tabindex="-1"]:not([aria-hidden="true"] [tabindex="-1"], [hidden] [tabindex="-1"])').forEach((e=>{e.setAttribute("tabindex","0")})):i.querySelectorAll('[tabindex="0"]').forEach((e=>{e.setAttribute("tabindex","-1")})),n(i,r),null!==o&&""!==o?r?(l(),e(i,o,r)):e(i,o,r,l):l()}(`#${r}`,!i,o):o()};t.addEventListener("click",a),null!==r&&""!==r&&document.querySelectorAll(`#${r} [aria-controls="${r}"]`).forEach((e=>{e.addEventListener("click",a)}))}))}function a(){document.querySelectorAll("[data-sidebar]").forEach((e=>{!function(e){const t={},n=new IntersectionObserver((e=>{var n,r,a;const i=e.filter((e=>e.isIntersecting));if(i.length<=0)return;Object.keys(t).forEach((e=>{t[e].classList.remove("active")}));const o=t[i[0].target.id];o.classList.add("active"),(null===(r=null===(n=null==o?void 0:o.parentElement)||void 0===n?void 0:n.parentElement)||void 0===r?void 0:r.parentElement)instanceof HTMLLIElement&&(null===(a=o.parentElement.parentElement.parentElement.querySelector("a"))||void 0===a||a.classList.add("active"))}),{root:null,rootMargin:"0px 0px -90% 0px",threshold:.5});e.querySelectorAll('a[href^="#"]').forEach((e=>{const r=e.href.split("#")[1],a=document.getElementById(r);a&&(n.observe(a),t[r]=e)}))}(e)}))}var i;i=()=>{r(),document.querySelectorAll("[data-example] > iframe").forEach((e=>{var t,n;const r=null!==(t=e.contentDocument)&&void 0!==t?t:null===(n=e.contentWindow)||void 0===n?void 0:n.document;if(!r)return;const a=()=>{let t=0;const n=()=>{r.body.scrollHeight!==t&&(t=r.body.scrollHeight,e.style.height=`${t}px`)};n(),new MutationObserver(n).observe(r.body,{attributes:!0,childList:!0,subtree:!0}),new ResizeObserver(n).observe(r.body)};"complete"===r.readyState?a():e.addEventListener("load",a)})),a()},"loading"!==document.readyState?i.call(document):document.addEventListener("DOMContentLoaded",i)}();

package/dist/assets/ui-doc.mjs

@@ -36,6 +36,288 @@ function initExample() {
     });
 }
 
+/**
+ * Run function when dom is ready
+ *
+ * @param callback function to run when dom is ready
+ */
+function ready(callback) {
+    if (document.readyState !== 'loading') {
+        callback.call(document);
+    }
+    else {
+        document.addEventListener('DOMContentLoaded', callback);
+    }
+}
+/**
+ * Animate an element using css animations/transitions. This function will add the necessary
+ * classes to the element to trigger the animation.
+ * When doing an entering animation following classes will be added:
+ * - `[animation-name]-enter-active`
+ * - `[animation-name]-enter-from`
+ * - `[animation-name]-enter-to`
+ * When doing a leaving animation following classes will be added:
+ * - `[animation-name]-leave-active`
+ * - `[animation-name]-leave-from`
+ * - `[animation-name]-leave-to`
+ *
+ * The animation classes will be removed after the animation is done. If a callback is provided
+ * it will be called after the animation is done.
+ *
+ * The `-active` class will stay on the element until the animation is done. The `-from` class will
+ * be removed after the first frame and the `-to`
+ * class will be added after the first frame.
+ *
+ * @param target html element to animate
+ * @param animationName animation name to be used
+ * @param entering determine if the elements animation should be entering or leaving
+ * @param callback to be called after the animation is done
+ */
+function animate(target, animationName, entering, callback) {
+    const animationState = entering ? 'enter' : 'leave';
+    const animateClassActive = `${animationName}-${animationState}-active`;
+    const animateClassTo = `${animationName}-${animationState}-to`;
+    const animateClassFrom = `${animationName}-${animationState}-from`;
+    const afterAnimation = () => {
+        target.classList.remove(animateClassTo, animateClassActive);
+        target.removeEventListener('animationend', afterAnimation);
+        target.removeEventListener('transitionend', afterAnimation);
+        if (callback) {
+            callback();
+        }
+    };
+    target.addEventListener('animationend', afterAnimation);
+    target.addEventListener('transitionend', afterAnimation);
+    target.addEventListener('animationcancel', afterAnimation);
+    target.addEventListener('transitioncancel', afterAnimation);
+    target.classList.add(animateClassActive, animateClassFrom);
+    requestAnimationFrame(() => {
+        const styles = window.getComputedStyle(target);
+        // if the element has no transition or animation we can call the afterAnimation function in the
+        // next frame
+        if (['all', 'none'].includes(styles.transition) && styles.animationName === 'none') {
+            requestAnimationFrame(afterAnimation);
+        }
+        target.classList.remove(animateClassFrom);
+        target.classList.add(animateClassTo);
+    });
+}
+
+/**
+ * Query the first parent element that matches the selector
+ *
+ * @param element to search in
+ * @param selector to be matched
+ * @param maxDepth maximum depth to search
+ * @returns element that matches the selector
+ */
+function queryParentSelector(element, selector, maxDepth = 10) {
+    if (maxDepth <= 0 || element === null) {
+        return null;
+    }
+    if (element.matches(selector)) {
+        return element;
+    }
+    return element.parentElement
+        ? queryParentSelector(element.parentElement, selector, maxDepth - 1)
+        : null;
+}
+
+/**
+ * Sometimes you need to prevent the user from interacting with other elements while an element
+ * is expanded. Then you need the [inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert) attribute.
+ * You can set the `data-inert` attribute with selectors (comma separated) to control the
+ * `inert` attribute of elements matching your selectors.
+ * @location functions.expand.with-inerts Expand controlling inert
+ * @order 30
+ * @example
+ * <style>
+ * button::after {
+ *   content: ' ' attr(aria-expanded);
+ * }
+ * </style>
+ * <button aria-expanded="false" aria-controls="target">Expanded:</button>
+ * <div id="target" hidden data-inert="[data-inert-controlled],#inert-controlled-2">Controlled Target</div>
+ * <div data-inert-controlled=""><button>Button 1.1</button><button>Button 1.2</button></div>
+ * <div id="inert-controlled-2"><button>Button 2.1</button><button>Button 2.2</button></div>
+ * @code
+ * <button aria-expanded="false" aria-controls="target">Expanded:</button>
+ * <div id="target" hidden data-inert="[data-inert-controlled],#inert-controlled-2">Controlled Target</div>
+ * <div data-inert-controlled="1"><button>Button 1.1</button><button>Button 1.2</button></div>
+ * <div id="inert-controlled-2"><button>Button 2.1</button><button>Button 2.2</button></div>
+ */
+function toggleInert(target, show) {
+    const inertSelector = target.getAttribute('data-inert');
+    if (inertSelector === null || inertSelector === '') {
+        return;
+    }
+    inertSelector.split(',').forEach(selector => {
+        // if the target is inside an element with the same selector, we don't want to remove the inert attribute
+        const activeParentWithSameSelector = !show
+            ? queryParentSelector(target.parentElement, `[data-inert="${selector}"],`
+                + `[data-inert^="${selector},"],`
+                + `[data-inert$=",${selector}"],`
+                + `[data-inert*=",${selector},"]`)
+            : null;
+        if (activeParentWithSameSelector) {
+            return;
+        }
+        document.querySelectorAll(selector).forEach(invertOn => {
+            if (show) {
+                invertOn.setAttribute('inert', '');
+            }
+            else {
+                invertOn.removeAttribute('inert');
+            }
+        });
+    });
+}
+/**
+ * If you want to control a specific aria you can combine [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) attribute with [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) attribute.
+ *
+ * When an element with the `aria-expanded` attribute is clicked, the value of the attribute will be toggled between `true` and `false`. Also the element with the id specified in the `aria-controls` attribute will be toggled between `aria-hidden="true"` and `aria-hidden="false"`. If no `aria-hidden` attribute is present, the `hidden` attribute will be used.`
+ *
+ * @location functions.expand.with-controls Expand with controls
+ * @order 10
+ * @example
+ * <style>
+ * button::after {
+ *   content: ' ' attr(aria-expanded);
+ * }
+ * </style>
+ * <button aria-expanded="true" aria-controls="target-aria-hidden">Expanded:</button>
+ * <div id="target-aria-hidden" aria-hidden="false">Controlled Target</div>
+ * <hr>
+ * <button aria-expanded="true" aria-controls="target-hidden">Expanded:</button>
+ * <div id="target-hidden">Controlled Target</div>
+ * @code
+ * <button aria-expanded="true" aria-controls="target-aria-hidden">Expanded:</button>
+ * <div id="target-aria-hidden" aria-hidden="false">Controlled Target</div>
+ * <hr>
+ * <button aria-expanded="true" aria-controls="target-hidden">Expanded:</button>
+ * <div id="target-hidden">Controlled Target</div>
+ */
+/**
+ * You can add animations/transitions on the controlled element by adding the `data-animate` attribute with the animation name.
+ * The animation name will be used to add the necessary classes to the element to trigger the animation.
+ * Please refer to the animate function for more information, what classes will be added and when.
+ *
+ * @location functions.expand.with-animation Expand with animation
+ * @order 20
+ * @example
+ * <style>
+ *   .fade-enter-active,
+ *   .fade-leave-active {
+ *     transition: opacity 0.5s ease;
+ *   }
+ *
+ *   .fade-enter-from,
+ *   .fade-leave-to {
+ *     opacity: 0;
+ *   }
+ * </style>
+ * <button aria-expanded="true" aria-controls="target-hidden">Toggle Controlled Area</button>
+ * <div id="target-hidden" data-animate="fade">Controlled Target</div>
+ */
+function toggleControlTarget(selector, show, callback) {
+    const target = document.querySelector(selector);
+    if (!target) {
+        return;
+    }
+    const animationName = target.getAttribute('data-animate');
+    const toggleHide = () => {
+        if (target.hasAttribute('aria-hidden')) {
+            target.setAttribute('aria-hidden', show ? 'false' : 'true');
+        }
+        else if (show) {
+            target.removeAttribute('hidden');
+        }
+        else {
+            target.setAttribute('hidden', '');
+        }
+        callback();
+    };
+    if (show) {
+        // set tabindex=0 for all elements with tabindex=-1 that are not inside an aria-hidden element
+        target
+            .querySelectorAll(':scope > [tabindex="-1"], [tabindex="-1"]:not([aria-hidden="true"] [tabindex="-1"], [hidden] [tabindex="-1"])')
+            .forEach(el => {
+            el.setAttribute('tabindex', '0');
+        });
+    }
+    else {
+        // set tabindex=-1 for all elements with tabindex=0
+        target.querySelectorAll('[tabindex="0"]').forEach(el => {
+            el.setAttribute('tabindex', '-1');
+        });
+    }
+    toggleInert(target, show);
+    if (animationName !== null && animationName !== '') {
+        if (show) {
+            toggleHide();
+            animate(target, animationName, show);
+        }
+        else {
+            animate(target, animationName, show, toggleHide);
+        }
+    }
+    else {
+        toggleHide();
+    }
+}
+/**
+ * Initialize expandable/collapsable elements by using the
+ * [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) attribute.
+ *
+ * When an element with the `aria-expanded` attribute is clicked, the value of the attribute will
+ * be toggled between `true` and `false`.
+ *
+ * @location functions.expand Expand
+ * @example
+ * <style>
+ * button::after {
+ *   content: ' ' attr(aria-expanded);
+ * }
+ * </style>
+ * <button aria-expanded="false">Expanded:</button>
+ * @code
+ * <button aria-expanded="false">Expanded:</button>
+ */
+function initExpand() {
+    document.querySelectorAll('[aria-expanded]').forEach(expander => {
+        const controlTarget = expander.getAttribute('aria-controls');
+        const toggle = (e) => {
+            const expanded = expander.getAttribute('aria-expanded') === 'true';
+            const toggleExpanded = () => {
+                expander.setAttribute('aria-expanded', expanded ? 'false' : 'true'); // when expanded we need to set false
+            };
+            // if data-hide-same-level is set, we need to klick all other expanded elements to close them
+            if (expander.parentElement && expander.hasAttribute('data-hide-same-level')) {
+                Array.from(expander.parentElement.querySelectorAll(':scope > [aria-expanded="true"]'))
+                    .filter(el => el !== expander && el !== e.relatedTarget)
+                    .forEach(sibling => {
+                    sibling.dispatchEvent(new MouseEvent('click', { bubbles: true, relatedTarget: expander }));
+                });
+            }
+            if (controlTarget !== null && controlTarget !== '') {
+                toggleControlTarget(`#${controlTarget}`, !expanded, toggleExpanded);
+            }
+            else {
+                toggleExpanded();
+            }
+        };
+        expander.addEventListener('click', toggle);
+        if (controlTarget !== null && controlTarget !== '') {
+            // select all controls inside the controlled area that have the same aria-controls attribute
+            document
+                .querySelectorAll(`#${controlTarget} [aria-controls="${controlTarget}"]`)
+                .forEach(control => {
+                control.addEventListener('click', toggle);
+            });
+        }
+    });
+}
+
 function createSidebar(sidebar) {
     const links = {};
     const observer = new IntersectionObserver(entries => {
@@ -73,16 +355,8 @@ function initSidebar() {
     });
 }
 
-function ready(callback) {
-    if (document.readyState !== 'loading') {
-        callback();
-    }
-    else {
-        document.addEventListener('DOMContentLoaded', callback);
-    }
-}
-
 ready(() => {
+    initExpand();
     initExample();
     initSidebar();
 });