timvir 0.2.17 → 0.2.19

package/blocks/Arbitrary/index.js

@@ -158,6 +158,13 @@ function Arbitrary(props, ref) {
       });
     }
   }, "Refresh")), /*#__PURE__*/React.createElement(Exhibit, {
+    bleed: 0,
+    BackdropProps: {
+      style: {
+        borderRadius: 2,
+        border: "1px solid var(--timvir-border-color)"
+      }
+    },
     ...ExhibitProps
   }, children)));
 }

package/blocks/Arbitrary/styles.css

@@ -1,7 +1,7 @@
 .r1ev38xg{margin:1em 0;}
 .c8hz158{display:grid;grid-gap:8px;grid-template-columns:1fr 100px;margin-bottom:8px;}
-.t1663phv{display:flex;align-items:center;padding:0 0 0 10px;height:36px;position:relative;background:var(--timvir-secondary-background-color);}.t1663phv::after{display:block;position:absolute;content:"";inset:0;pointer-events:none;border:1px solid var(--timvir-border-color);border-radius:2px;}.t1663phv:hover::after{border-color:var(--timvir-text-color);}.t1663phv:focus-within::after{border-color:var(--timvir-text-color);}
+.t1663phv{display:flex;align-items:center;padding:0 0 0 10px;min-height:36px;position:relative;background:var(--timvir-secondary-background-color);}.t1663phv::after{display:block;position:absolute;content:"";inset:0;pointer-events:none;border:1px solid var(--timvir-border-color);border-radius:2px;}.t1663phv:hover::after{border-color:var(--timvir-text-color);}.t1663phv:focus-within::after{border-color:var(--timvir-text-color);}
 .s1k50njo{display:inline-block;color:var(--timvir-secondary-text-color);margin-right:6px;}
 .i1dajnne{border:none;outline:none;font:inherit;background:transparent;align-self:stretch;padding:0;width:100%;color:inherit;}
-.b128wsn{border:none;outline:none;height:36px;border:1px solid var(--timvir-border-color);border-radius:2px;background:var(--timvir-secondary-background-color);color:var(--timvir-text-color);font:inherit;}.b128wsn:hover{border-color:var(--timvir-text-color);background:var(--timvir-sidebar-highlight-color);}.b128wsn:active{border-color:var(--timvir-text-color);background:var(--timvir-sidebar-highlight-color);}
+.b128wsn{border:none;outline:none;min-height:36px;border:1px solid var(--timvir-border-color);border-radius:2px;background:var(--timvir-secondary-background-color);color:var(--timvir-text-color);font:inherit;}.b128wsn:hover{border-color:var(--timvir-text-color);background:var(--timvir-sidebar-highlight-color);}.b128wsn:active{border-color:var(--timvir-text-color);background:var(--timvir-sidebar-highlight-color);}
 

package/blocks/Code/styles.css

@@ -6,11 +6,11 @@
 .s1hdfi6o{position:absolute;z-index:-1;top:0;right:0;transition:all 0.2s;transform:translate(48px,-48px);}.s1hdfi6o path{fill:var(--c-p-4);}
 .d17pltln{padding:16px 24px 16px 0;}
 
-.r9v2r0l{margin:1.5rem 0 3rem;}:root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark) !important;font-style:var(--shiki-dark-font-style) !important;font-weight:var(--shiki-dark-font-weight) !important;text-decoration:var(--shiki-dark-text-decoration) !important;}
-.cs7tint{overflow-x:auto;contain:content;font-size:0.8em;border-radius:5px;--timvir-b-Code-bleed:calc(var(--timvir-page-margin,24px) * 0.6666);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),8px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));border:1px solid var(--timvir-border-color);}.cs7tint pre{margin:0;padding:16px 0;background-color:var(--timvir-secondary-background-color) !important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);}
+:root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark) !important;font-style:var(--shiki-dark-font-style) !important;font-weight:var(--shiki-dark-font-weight) !important;text-decoration:var(--shiki-dark-text-decoration) !important;}
+.cs7tint{overflow-x:auto;contain:content;font-size:0.8em;border-radius:5px;--timvir-b-Code-bleed:calc(var(--timvir-margin,0px) * 0.6666);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),8px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));border:1px solid var(--timvir-border-color);}.cs7tint pre{margin:0;padding:16px 0;background-color:var(--timvir-secondary-background-color) !important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);}
 .fjvaz2s{display:grid;border-radius:0;box-shadow:none;margin-inline:0;grid-auto-rows:min-content;grid-template-columns:[le] 0 [lc] 1fr [rc] 0 [re];grid-column-gap:16px;}.fjvaz2s:hover{box-shadow:none;}@media (min-width:60rem){.fjvaz2s{grid-template-columns:[le] 1fr [lc] minmax(0,48rem) [rc] 1fr [re];grid-column-gap:24px;}}.fjvaz2s > *{grid-column:lc / re;}
 .lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);}
 .h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] .h1xcko1i{background-color:rgba(174,124,20,0.15);}
 .ll2b9hx{display:inline-block;width:var(--timvir-b-Code-bleed);color:var(--timvir-secondary-text-color);text-align:right;padding-inline:4px;}
-.c5vr6r2{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:2px;}
+.c5vr6r2{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:0.3em;}
 

package/blocks/Exhibit/Exhibit.d.ts

@@ -2,18 +2,16 @@ import * as React from "react";
 /**
  * The underlying DOM element which is rendered by this component.
  */
-declare const Root = "figure";
+declare const Root = "div";
 interface Props extends React.ComponentProps<typeof Root> {
     caption?: React.ReactNode;
     /**
      * How much the component should extend out of its original box. When number,
      * it's the number of pixels. When a string, must evaluate to a CSS <length>
      * (can be inline or reference to a CSS variable).
-     *
-     * @default 0
      */
     bleed?: string | number;
     BackdropProps?: React.ComponentPropsWithoutRef<"div">;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/blocks/Exhibit/docs/index.mdx

@@ -15,7 +15,7 @@ Think of it as a `<figure>` + `<figcaption>` for React components.
 
 Add a title to the exhibit if it helps the reader to understand the exhibit better. The title is placed snuggly to the exhibit.
 
-<Exhibit bleed={8} title="This Is Not A Button" caption="It's an input element, of type text">
+<Exhibit title="This Is Not A Button" caption="It's an input element, of type text">
   <input type="text" placeholder="Type something…" style={{ boxSizing: "border-box", width: "100%", padding: 8 }} />
 </Exhibit>
 
@@ -23,33 +23,19 @@ Add a title to the exhibit if it helps the reader to understand the exhibit bett
 
 Use the `bleed` prop to control how much the checkered background extends beyond the box of the element itself.
 
-#### bleed 0
-
-<Exhibit bleed={0}>
+<Exhibit bleed={0} caption="Bleed 0">
   <div
     style={{ height: 40, padding: "0 16px", background: "teal", color: "white", display: "flex", alignItems: "center" }}
   />
 </Exhibit>
 
-#### bleed 4
-
-<Exhibit bleed={4}>
+<Exhibit bleed={4} caption="Bleed 4">
   <div
     style={{ height: 40, padding: "0 16px", background: "teal", color: "white", display: "flex", alignItems: "center" }}
   />
 </Exhibit>
 
-#### bleed 12
-
-<Exhibit bleed={12}>
-  <div
-    style={{ height: 40, padding: "0 16px", background: "teal", color: "white", display: "flex", alignItems: "center" }}
-  />
-</Exhibit>
-
-#### bleed 24
-
-<Exhibit bleed={24}>
+<Exhibit bleed={12} caption="Bleed 12">
   <div
     style={{ height: 40, padding: "0 16px", background: "teal", color: "white", display: "flex", alignItems: "center" }}
   />

package/blocks/Exhibit/index.js

@@ -34,7 +34,7 @@ var cx_default = cx;
 /**
  * The underlying DOM element which is rendered by this component.
  */
-const Root = "figure";
+const Root = "div";
 function Exhibit(props, ref) {
   const block = useBlock(props);
   const components = {
@@ -44,7 +44,7 @@ function Exhibit(props, ref) {
   const {
     title,
     caption,
-    bleed = 0,
+    bleed,
     BackdropProps,
     children,
     className,
@@ -56,16 +56,17 @@ function Exhibit(props, ref) {
     className: cx_default(className, classes.root),
     style: {
       ...style,
-      [cssVariables.bleed]: typeof bleed === "number" ? `${bleed}px` : bleed
+      [cssVariables.bleed]: typeof bleed === "number" ? `${bleed}px` : undefined
     },
     ...rest
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.container,
+    ...BackdropProps,
     style: {
-      border: bleed !== 0 ? `1px solid var(${cssVariables.borderColor})` : "none"
-    },
-    ...BackdropProps
-  }, children), caption && /*#__PURE__*/React.createElement("figcaption", {
+      border: bleed === 0 ? "none" : `1px solid var(${cssVariables.borderColor})`,
+      ...BackdropProps?.style
+    }
+  }, children), caption && /*#__PURE__*/React.createElement("div", {
     className: classes.caption
   }, caption)));
 }

package/blocks/Exhibit/styles.css

@@ -1,4 +1,4 @@
-.r1nql2f9{margin:0 0 1.5rem;--timvir-b-Exhibit-bleed:0px;--timvir-b-Exhibit-borderColor:var(--timvir-border-color);--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII=);}:root[data-timvir-theme="dark"] .r1nql2f9{--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
-.c4ji594{display:flow-root;background:var(--timvir-b-Exhibit-background);margin:0 calc(-1 * var(--timvir-b-Exhibit-bleed));padding:var(--timvir-b-Exhibit-bleed);}
-.cf43jjx{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:2px;}
+.r1nql2f9{--timvir-b-Exhibit-bleed:calc(var(--timvir-margin,0px) * 0.6666);--timvir-b-Exhibit-borderColor:var(--timvir-border-color);--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAHElEQVR4AWP4/u07Mvr75y8yGlBpND6a6oGUBgAxMSSkDKa/pQAAAABJRU5ErkJggg==);}:root[data-timvir-theme="dark"] .r1nql2f9{--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
+.c4ji594{display:flow-root;background:var(--timvir-b-Exhibit-background);margin:0 calc(-1 * var(--timvir-b-Exhibit-bleed));padding:var(--timvir-b-Exhibit-bleed);border-radius:5px;}
+.cf43jjx{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:0.3em;}
 

package/blocks/Grid/docs/index.mdx

@@ -67,16 +67,16 @@ Combine `<Grid>` with the `<Image>` component.
 Combine `<Grid>` with the `<Exhibit>` component.
 
 <Grid>
-  <Exhibit bleed={8}>
+  <Exhibit>
     <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
   </Exhibit>
-  <Exhibit bleed={8}>
+  <Exhibit>
     <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
   </Exhibit>
-  <Exhibit bleed={8}>
+  <Exhibit>
     <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
   </Exhibit>
-  <Exhibit bleed={8}>
+  <Exhibit>
     <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
   </Exhibit>
 </Grid>

package/blocks/Grid/styles.css

@@ -1,2 +1,2 @@
-.r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}
+.r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--timvir-page-margin,24px);--timvir-margin:calc(var(--timvir-page-margin,24px) * 0.5);}
 

package/blocks/Message/docs/index.mdx

@@ -5,7 +5,7 @@ import { Code } from "../../Code";
 
 # Message
 
-<Exhibit bleed="var(--timvir-page-margin)">
+<Exhibit>
   <Sample variant="basic" />
 </Exhibit>
 
@@ -16,13 +16,13 @@ import { Code } from "../../Code";
 ## Variants
 
 <Grid>
-  <Exhibit bleed={8} caption="info">
+  <Exhibit caption="info">
     <Sample variant="basic" props={{ variant: "info" }} />
   </Exhibit>
-  <Exhibit bleed={8} caption="warning">
+  <Exhibit caption="warning">
     <Sample variant="basic" props={{ variant: "warning" }} />
   </Exhibit>
-  <Exhibit bleed={8} caption="alert">
+  <Exhibit caption="alert">
     <Sample variant="basic" props={{ variant: "alert" }} />
   </Exhibit>
 </Grid>
@@ -32,7 +32,7 @@ import { Code } from "../../Code";
 Make the title bold and place it before the message, or use a level 3 heading. You can use arbitrary markdown inside the message.
 
 <Grid>
-<Exhibit bleed={8} caption="Inline title">
+<Exhibit caption="Inline title">
   <Sample variant="basic">
 
 
@@ -42,7 +42,7 @@ Make the title bold and place it before the message, or use a level 3 heading. Y
 </Exhibit>
 
 
-<Exhibit bleed={8} caption="Title as a separate block elment">
+<Exhibit caption="Title as a separate block elment">
   <Sample variant="basic">
 
 

package/blocks/Viewport/styles.css

@@ -1,4 +1,4 @@
-.fgdj0yb{font-size:0.75rem;color:var(--timvir-secondary-text-color);white-space:nowrap;display:flex;justify-content:space-between;align-items:center;}
+.fgdj0yb{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);white-space:nowrap;display:flex;justify-content:space-between;align-items:center;}
 .d1rc4zjh{cursor:pointer;}.d1rc4zjh:hover{color:var(--c-p-4);opacity:1;}.d1rc4zjh > svg{display:block;}
 .d1enfo6{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
 .d1watfn6{margin-top:12px;}
@@ -7,7 +7,7 @@
 
 .ssl4j8q{width:100%;display:block;height:16px;margin:8px 0;}
 
-.r1ouu0bc{contain:layout;}
+.r1ouu0bc{contain:layout;margin-bottom:0;}
 .d1uj09ka{position:relative;}
 .d2uawyc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-variant-numeric:tabular-nums;}
 .d8ms9m9{display:flex;align-items:stretch;justify-content:center;}

package/blocks/styles.css

@@ -1,9 +1,9 @@
 .r1ev38xg{margin:1em 0;}
 .c8hz158{display:grid;grid-gap:8px;grid-template-columns:1fr 100px;margin-bottom:8px;}
-.t1663phv{display:flex;align-items:center;padding:0 0 0 10px;height:36px;position:relative;background:var(--timvir-secondary-background-color);}.t1663phv::after{display:block;position:absolute;content:"";inset:0;pointer-events:none;border:1px solid var(--timvir-border-color);border-radius:2px;}.t1663phv:hover::after{border-color:var(--timvir-text-color);}.t1663phv:focus-within::after{border-color:var(--timvir-text-color);}
+.t1663phv{display:flex;align-items:center;padding:0 0 0 10px;min-height:36px;position:relative;background:var(--timvir-secondary-background-color);}.t1663phv::after{display:block;position:absolute;content:"";inset:0;pointer-events:none;border:1px solid var(--timvir-border-color);border-radius:2px;}.t1663phv:hover::after{border-color:var(--timvir-text-color);}.t1663phv:focus-within::after{border-color:var(--timvir-text-color);}
 .s1k50njo{display:inline-block;color:var(--timvir-secondary-text-color);margin-right:6px;}
 .i1dajnne{border:none;outline:none;font:inherit;background:transparent;align-self:stretch;padding:0;width:100%;color:inherit;}
-.b128wsn{border:none;outline:none;height:36px;border:1px solid var(--timvir-border-color);border-radius:2px;background:var(--timvir-secondary-background-color);color:var(--timvir-text-color);font:inherit;}.b128wsn:hover{border-color:var(--timvir-text-color);background:var(--timvir-sidebar-highlight-color);}.b128wsn:active{border-color:var(--timvir-text-color);background:var(--timvir-sidebar-highlight-color);}
+.b128wsn{border:none;outline:none;min-height:36px;border:1px solid var(--timvir-border-color);border-radius:2px;background:var(--timvir-secondary-background-color);color:var(--timvir-text-color);font:inherit;}.b128wsn:hover{border-color:var(--timvir-text-color);background:var(--timvir-sidebar-highlight-color);}.b128wsn:active{border-color:var(--timvir-text-color);background:var(--timvir-sidebar-highlight-color);}
 
 .tac6gx6{color:#393a34;background-color:#f6f8fa;}.tac6gx6 :is(.comment,.prolog,.doctype,.cdata){color:#999988;font-style:italic;}.tac6gx6 :is(.namespace){opacity:0.7;}.tac6gx6 :is(.string,.attr-value){color:#e3116c;}.tac6gx6 :is(.punctuation,.operator){color:#6cb6ff;}.tac6gx6 :is(.function,.delete,.tag){color:#d73a49;}.tac6gx6 :is(.tag,.selector,.keyword){color:#00009f;}.tac6gx6 :is(.function-variable){color:#6f42c1;}.tac6gx6 :is(.atrule,.keyword,.attr-name,.selector){color:#00a4db;}.tac6gx6 :is(.entity,.url,.symbol,.number,.boolean,.variable,.constant,.property,.regex,.inserted){color:#36acaa;}:root[data-timvir-theme="dark"] .tac6gx6{color:#adbac7;background-color:#2d333b;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.comment,.prolog,.doctype,.cdata){color:#999988;font-style:italic;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.namespace){opacity:0.7;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.string,.attr-value){color:#96d0ff;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.punctuation,.operator){color:#6cb6ff;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.function,.delete,.tag){color:#d73a49;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.tag,.selector,.keyword){color:#8ddb8c;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.function-variable){color:#6f42c1;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.atrule,.keyword,.attr-name,.selector){color:#f47067;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.entity,.url,.symbol,.number,.boolean,.variable,.constant,.property,.regex,.inserted){color:#dcbdfb;}
 
@@ -13,13 +13,13 @@
 .s1hdfi6o{position:absolute;z-index:-1;top:0;right:0;transition:all 0.2s;transform:translate(48px,-48px);}.s1hdfi6o path{fill:var(--c-p-4);}
 .d17pltln{padding:16px 24px 16px 0;}
 
-.r9v2r0l{margin:1.5rem 0 3rem;}:root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark) !important;font-style:var(--shiki-dark-font-style) !important;font-weight:var(--shiki-dark-font-weight) !important;text-decoration:var(--shiki-dark-text-decoration) !important;}
-.cs7tint{overflow-x:auto;contain:content;font-size:0.8em;border-radius:5px;--timvir-b-Code-bleed:calc(var(--timvir-page-margin,24px) * 0.6666);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),8px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));border:1px solid var(--timvir-border-color);}.cs7tint pre{margin:0;padding:16px 0;background-color:var(--timvir-secondary-background-color) !important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);}
+:root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark) !important;font-style:var(--shiki-dark-font-style) !important;font-weight:var(--shiki-dark-font-weight) !important;text-decoration:var(--shiki-dark-text-decoration) !important;}
+.cs7tint{overflow-x:auto;contain:content;font-size:0.8em;border-radius:5px;--timvir-b-Code-bleed:calc(var(--timvir-margin,0px) * 0.6666);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),8px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));border:1px solid var(--timvir-border-color);}.cs7tint pre{margin:0;padding:16px 0;background-color:var(--timvir-secondary-background-color) !important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);}
 .fjvaz2s{display:grid;border-radius:0;box-shadow:none;margin-inline:0;grid-auto-rows:min-content;grid-template-columns:[le] 0 [lc] 1fr [rc] 0 [re];grid-column-gap:16px;}.fjvaz2s:hover{box-shadow:none;}@media (min-width:60rem){.fjvaz2s{grid-template-columns:[le] 1fr [lc] minmax(0,48rem) [rc] 1fr [re];grid-column-gap:24px;}}.fjvaz2s > *{grid-column:lc / re;}
 .lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);}
 .h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] .h1xcko1i{background-color:rgba(174,124,20,0.15);}
 .ll2b9hx{display:inline-block;width:var(--timvir-b-Code-bleed);color:var(--timvir-secondary-text-color);text-align:right;padding-inline:4px;}
-.c5vr6r2{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:2px;}
+.c5vr6r2{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:0.3em;}
 
 
 .r1f19pie{position:relative;}
@@ -35,9 +35,9 @@
 .a1y0tcvx:hover::before,.a1y0tcvx::before{box-shadow:0 0 0 2px var(--c-p-5);opacity:1;}
 
 
-.r1nql2f9{margin:0 0 1.5rem;--timvir-b-Exhibit-bleed:0px;--timvir-b-Exhibit-borderColor:var(--timvir-border-color);--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII=);}:root[data-timvir-theme="dark"] .r1nql2f9{--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
-.c4ji594{display:flow-root;background:var(--timvir-b-Exhibit-background);margin:0 calc(-1 * var(--timvir-b-Exhibit-bleed));padding:var(--timvir-b-Exhibit-bleed);}
-.cf43jjx{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:2px;}
+.r1nql2f9{--timvir-b-Exhibit-bleed:calc(var(--timvir-margin,0px) * 0.6666);--timvir-b-Exhibit-borderColor:var(--timvir-border-color);--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAHElEQVR4AWP4/u07Mvr75y8yGlBpND6a6oGUBgAxMSSkDKa/pQAAAABJRU5ErkJggg==);}:root[data-timvir-theme="dark"] .r1nql2f9{--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
+.c4ji594{display:flow-root;background:var(--timvir-b-Exhibit-background);margin:0 calc(-1 * var(--timvir-b-Exhibit-bleed));padding:var(--timvir-b-Exhibit-bleed);border-radius:5px;}
+.cf43jjx{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:0.3em;}
 
 .mby32tn{display:flex;align-items:baseline;font-size:0.9rem;font-weight:bold;transition:all 0.2s;}
 .rc7ivp5{padding:16px 0;}
@@ -49,7 +49,7 @@
 .dw285p4{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
 .dx3nfmc{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
 
-.r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}
+.r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--timvir-page-margin,24px);--timvir-margin:calc(var(--timvir-page-margin,24px) * 0.5);}
 
 .b1a0xzv7{background:white;place-self:stretch;border-radius:2px;transition:all 0.2s;box-shadow:0 0 0 0 rgba(0,0,0,0.1);}
 .g10obtzp{opacity:0;transition:all 0.2s;pointer-events:none;}
@@ -70,7 +70,7 @@
 .dobecwk{display:flex;justify-content:space-between;align-items:center;line-height:1;}
 .dho7t08{padding-top:6px;opacity:0.5;font-size:0.8em;line-height:1;}
 
-.fgdj0yb{font-size:0.75rem;color:var(--timvir-secondary-text-color);white-space:nowrap;display:flex;justify-content:space-between;align-items:center;}
+.fgdj0yb{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);white-space:nowrap;display:flex;justify-content:space-between;align-items:center;}
 .d1rc4zjh{cursor:pointer;}.d1rc4zjh:hover{color:var(--c-p-4);opacity:1;}.d1rc4zjh > svg{display:block;}
 .d1enfo6{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
 .d1watfn6{margin-top:12px;}
@@ -79,7 +79,7 @@
 
 .ssl4j8q{width:100%;display:block;height:16px;margin:8px 0;}
 
-.r1ouu0bc{contain:layout;}
+.r1ouu0bc{contain:layout;margin-bottom:0;}
 .d1uj09ka{position:relative;}
 .d2uawyc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-variant-numeric:tabular-nums;}
 .d8ms9m9{display:flex;align-items:stretch;justify-content:center;}

package/core/components/Page/Page.d.ts

@@ -24,7 +24,7 @@ interface Props extends React.ComponentProps<typeof Root> {
      * highlighting. If you want to enable syntax highlighting in code blocks, use the
      * '<Code>' component from 'timvir/blocks'.
      */
-    mdxComponents?: React.ComponentPropsWithoutRef<typeof MDXProvider>['components'];
+    mdxComponents?: React.ComponentPropsWithoutRef<typeof MDXProvider>["components"];
     /**
      * Search Configuration. When provided, then the Search menu will appear in the sidebar.
      */

package/core/components/Page/internal/Sidebar.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Node } from "../types";
-interface Props {
+interface Props extends React.ComponentPropsWithoutRef<"nav"> {
     toc: readonly Node[];
     search?: {
         open: () => void;

package/core/components/Page/types.d.ts

@@ -1,4 +1,6 @@
+import * as React from "react";
 export interface Node {
+    readonly icon?: React.ReactElement;
     readonly label: string;
     readonly path?: string;
     readonly children?: readonly Node[];

package/core/index.js

@@ -58,34 +58,38 @@ function Footer(props, ref) {
   } = props;
   return /*#__PURE__*/React.createElement(Root$2, {
     ref: ref,
-    className: cx_default(className, classes$6.root),
+    className: cx_default(className, classes$7.root),
     ...rest
   }, links && /*#__PURE__*/React.createElement("div", {
     className: grid
   }, /*#__PURE__*/React.createElement("div", {
-    className: classes$6.linkGroups
+    className: classes$7.linkGroups
   }, links.map(({
     group,
     items
   }, i) => /*#__PURE__*/React.createElement("div", {
     key: i
   }, /*#__PURE__*/React.createElement("div", {
-    className: classes$6.linkGroupTitle
+    className: classes$7.linkGroupTitle
   }, group), /*#__PURE__*/React.createElement("div", null, items.map(({
     label,
     href
   }, j) => /*#__PURE__*/React.createElement("a", {
     key: j,
     href: href,
-    className: classes$6.link
+    className: classes$7.link
   }, label))))))), /*#__PURE__*/React.createElement("div", {
-    className: cx_default(grid, classes$6.meta)
-  }, /*#__PURE__*/React.createElement("div", null, "Built with ", /*#__PURE__*/React.createElement("a", {
+    className: cx_default(grid, classes$7.meta)
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 0
+    }
+  }, "Built with ", /*#__PURE__*/React.createElement("a", {
     href: "https://timvir.vercel.app"
   }, "Timvir"))));
 }
 var Footer$1 = /*#__PURE__*/React.forwardRef(Footer);
-const classes$6 = {
+const classes$7 = {
   root: "rwhrdvg",
   linkGroups: "l1u1x7q7",
   linkGroupTitle: "l1x5jo3a",
@@ -101,10 +105,10 @@ function Action(props) {
     ...rest
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: classes$5.root,
+    className: classes$6.root,
     ...rest
   }, /*#__PURE__*/React.createElement("div", {
-    className: classes$5.icon
+    className: classes$6.icon
   }, /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 24 24",
     fill: "none",
@@ -120,10 +124,10 @@ function Action(props) {
   }), /*#__PURE__*/React.createElement("polyline", {
     points: "12 5 19 12 12 19"
   }))), /*#__PURE__*/React.createElement("div", {
-    className: classes$5.label
+    className: classes$6.label
   }, label));
 }
-const classes$5 = {
+const classes$6 = {
   root: "ru1mblv",
   icon: "i1wyx06o",
   label: "legxg01"
@@ -176,13 +180,13 @@ function Dialog(props) {
     })();
   }, [mutate, state.query]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classes$4.root,
+    className: classes$5.root,
     style: state.style,
     ...rest
   }, /*#__PURE__*/React.createElement("div", {
-    className: classes$4.context
+    className: classes$5.context
   }, "Context"), /*#__PURE__*/React.createElement("div", {
-    className: classes$4.prompt
+    className: classes$5.prompt
   }, /*#__PURE__*/React.createElement("input", {
     autoFocus: true,
     placeholder: "Type a command or search\u2026",
@@ -194,9 +198,9 @@ function Dialog(props) {
       });
     }
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: classes$4.subheader
+    className: classes$5.subheader
   }, "Pages"), /*#__PURE__*/React.createElement("div", {
-    className: classes$4.commands
+    className: classes$5.commands
   }, state.commands.map(({
     node
   }, index) => /*#__PURE__*/React.createElement(Action, {
@@ -208,7 +212,7 @@ function Dialog(props) {
     }
   })))));
 }
-const classes$4 = {
+const classes$5 = {
   root: "r1fo6voy",
   context: "c185xiij",
   prompt: "p1ky3ya3",
@@ -238,7 +242,7 @@ function Commands(props) {
         const containerElement = document.createElement("div");
         document.body.appendChild(containerElement);
         const reactPortal = /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
-          className: classes$3.root,
+          className: classes$4.root,
           onClick: ev => {
             if (ev.target === ev.currentTarget) {
               close();
@@ -254,7 +258,7 @@ function Commands(props) {
         });
       } else {
         const reactPortal = /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
-          className: classes$3.root,
+          className: classes$4.root,
           onClick: ev => {
             if (ev.target === ev.currentTarget) {
               close();
@@ -273,7 +277,7 @@ function Commands(props) {
       draft.open = false;
       if (draft.dialog) {
         const reactPortal = /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
-          className: classes$3.root
+          className: classes$4.root
         }, /*#__PURE__*/React.createElement(Dialog, {
           onDispose: () => {
             mutate(draft => {
@@ -317,7 +321,7 @@ function Commands(props) {
   }, [state.open]);
   return ((_state$dialog = state.dialog) === null || _state$dialog === void 0 ? void 0 : _state$dialog.reactPortal) ?? null;
 }
-const classes$3 = {
+const classes$4 = {
   root: "rfei6z8"
 };
 
@@ -326,6 +330,9 @@ const classes$3 = {
  */
 const Root$1 = "div";
 function NavigationFooter(props, ref) {
+  const {
+    Link
+  } = useContext();
   const {
     prev,
     next,
@@ -335,37 +342,33 @@ function NavigationFooter(props, ref) {
   return /*#__PURE__*/React.createElement(Root$1, {
     ref: ref,
     ...rest,
-    className: cx_default(className, "re625n1")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d19gj27w"
+    className: cx_default(className, classes$3.root)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "d15ohs1l"
-  }, prev && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SecondaryLabel, null, prev.context || "/"), /*#__PURE__*/React.createElement(PrimaryLink, {
-    href: prev.href
-  }, prev.label))), /*#__PURE__*/React.createElement("div", {
-    className: "dczrd9z"
-  }, next && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SecondaryLabel, null, next.context || "/"), /*#__PURE__*/React.createElement(PrimaryLink, {
-    href: next.href
-  }, next.label)))));
+    className: "de625n1"
+  }, prev && /*#__PURE__*/React.createElement(Link, {
+    href: prev.href,
+    className: "l19gj27w"
+  }, /*#__PURE__*/React.createElement(Context, null, /*#__PURE__*/React.createElement(Icons.ChevronLeft, null), " Previous"), /*#__PURE__*/React.createElement(Label, null, prev.label)), next && /*#__PURE__*/React.createElement(Link, {
+    href: next.href,
+    className: "l15ohs1l"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Context, null, "Next ", /*#__PURE__*/React.createElement(Icons.ChevronRight, null)), /*#__PURE__*/React.createElement(Label, null, next.label)))));
 }
 var NavigationFooter$1 = /*#__PURE__*/React.forwardRef(NavigationFooter);
-const PrimaryLink = ({
-  href,
-  children
-}) => {
-  const {
-    Link
-  } = useContext();
-  return /*#__PURE__*/React.createElement(Link, {
-    href: href,
-    className: "lifnzb8"
-  }, children);
+function Label(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dczrd9z",
+    ...props
+  });
+}
+function Context(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "difnzb8",
+    ...props
+  });
+}
+const classes$3 = {
+  root: "rymvrdu"
 };
-const SecondaryLabel = ({
-  children
-}) => /*#__PURE__*/React.createElement("div", {
-  className: "dymvrdu"
-}, children);
 
 function memoize(fn) {
   var cache = Object.create(null);
@@ -656,7 +659,9 @@ function SidebarItem(props) {
     style: {
       marginLeft: depth * 16
     }
-  }, /*#__PURE__*/React.createElement("span", {
+  }, props.icon ? /*#__PURE__*/React.cloneElement(props.icon, {
+    className: classes$2.icn
+  }) : null, /*#__PURE__*/React.createElement("span", {
     className: classes$2.label
   }, label), icon) : /*#__PURE__*/React.createElement("a", {
     style: {
@@ -664,14 +669,17 @@ function SidebarItem(props) {
     },
     href: "#",
     onClick: () => setActive(x => !x)
-  }, /*#__PURE__*/React.createElement("span", {
+  }, props.icon ? /*#__PURE__*/React.cloneElement(props.icon, {
+    className: classes$2.icn
+  }) : null, /*#__PURE__*/React.createElement("span", {
     className: classes$2.label
   }, label), icon));
 }
 const classes$2 = {
   root: "r28qe6v",
-  label: "l1ia823q",
-  icon: "i13ixk6c"
+  icn: "i1ia823q",
+  label: "l13ixk6c",
+  icon: "i7wcd3g"
 };
 
 function Section(props) {
@@ -716,34 +724,67 @@ const classes$1 = {
 };
 
 function Sidebar(props) {
+  const {
+    location
+  } = useContext();
   const {
     toc,
-    search
+    search,
+    className,
+    ...rest
   } = props;
-  const [state, mutate] = useImmer({
-    shadowVisible: false
-  });
-  const onScroll = ev => {
-    const shadowVisible = ev.currentTarget.scrollTop > 2;
-    if (state.shadowVisible !== shadowVisible) {
-      mutate(draft => {
-        draft.shadowVisible = shadowVisible;
-      });
+  const node = function find(nodes) {
+    for (const node of nodes) {
+      if (node.path === location.asPath) {
+        return node;
+      }
+      if (node.children) {
+        const n = find(node.children);
+        if (n) {
+          return n;
+        }
+      }
     }
-  };
-  return /*#__PURE__*/React.createElement("aside", {
-    className: cx_default(classes.root)
+  }(toc);
+  return /*#__PURE__*/React.createElement("nav", {
+    className: cx_default(className, classes.root),
+    ...rest
+  }, /*#__PURE__*/React.createElement("header", {
+    className: "h17eoe18"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d1mgn6rc"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "d17eoe18"
-  }, search && /*#__PURE__*/React.createElement("div", {
-    className: cx_default("d1mgn6rc", state.shadowVisible && "d7bx8iu")
+    className: "d7bx8iu"
+  }, "Timvir"), /*#__PURE__*/React.createElement("div", {
+    className: "d119ou0k"
+  }), /*#__PURE__*/React.createElement("div", null, "Docs")), search && /*#__PURE__*/React.createElement("div", {
+    className: cx_default("d1f74255")
   }, /*#__PURE__*/React.createElement(Search, {
     ...search
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classes.sections,
-    onScroll: onScroll
-  }, /*#__PURE__*/React.createElement("nav", {
-    className: classes.nav
+  }))), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "menu",
+    className: "l5l3c45"
+  }, node !== null && node !== void 0 && node.icon ? /*#__PURE__*/React.cloneElement(node.icon, {
+    className: "c15ju3pv"
+  }) : null, /*#__PURE__*/React.createElement("span", null, (node === null || node === void 0 ? void 0 : node.label) ?? "Menu"), /*#__PURE__*/React.createElement(Icons.Menu, {
+    size: `1rem`,
+    className: "s2bwnbz"
+  })), /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    id: "menu",
+    className: "iu06l76",
+    onChange: ev => {
+      document.body.classList.toggle(classes.scrollLock, ev.currentTarget.checked);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classes.content
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.sections
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.nav,
+    onClick: () => {
+      document.body.classList.remove(classes.scrollLock);
+    }
   }, toc.map((c, i) => /*#__PURE__*/React.createElement(Section, {
     key: i,
     depth: 0,
@@ -751,9 +792,11 @@ function Sidebar(props) {
   }))))));
 }
 const classes = {
-  root: "r119ou0k",
-  sections: "s1f74255",
-  nav: "n5l3c45"
+  scrollLock: "s56darb",
+  root: "rwbgl5x",
+  content: "c15aig6x",
+  sections: "svou0q5",
+  nav: "n1ibjf0n"
 };
 function Search(props) {
   const {
@@ -761,10 +804,10 @@ function Search(props) {
     label
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: "d15ju3pv"
+    className: "da95449"
   }, /*#__PURE__*/React.createElement("div", {
     role: "button",
-    className: "d2bwnbz",
+    className: "d1au8wkb",
     onClick: open
   }, /*#__PURE__*/React.createElement("svg", {
     x: "0px",
@@ -829,9 +872,8 @@ function Page(props, ref) {
     ref: ref,
     ...rest,
     className: cx_default(className, theme, "rfhjyp1")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d1pp8z35"
   }, /*#__PURE__*/React.createElement(Sidebar, {
+    className: "s1pp8z35",
     toc: toc,
     search: search && {
       open: () => {
@@ -841,7 +883,7 @@ function Page(props, ref) {
       },
       ...search
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "dxk1fgw"
   }, /*#__PURE__*/React.createElement("div", {
     className: grid

package/core/styles.css

@@ -1,13 +1,13 @@
 
-.g1et32pl{display:grid;--timvir-page-margin:16px;grid-auto-rows:min-content;grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width:48rem){.g1et32pl{--timvir-page-margin:24px;grid-template-columns:[le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] var( --timvir-page-margin ) [re];}}@media (min-width:72rem){.g1et32pl{grid-template-columns:[le] 1fr var(--timvir-page-margin) [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] var( --timvir-page-margin ) 1fr [re];}}.g1et32pl > *:not(.nc2e9vn){grid-column:lc / rc;min-width:0;}
+.g1et32pl{display:grid;--timvir-page-margin:16px;--timvir-margin:var(--timvir-page-margin);grid-auto-rows:min-content;grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width:48rem){.g1et32pl{--timvir-page-margin:24px;grid-template-columns:[le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] var( --timvir-page-margin ) [re];}}@media (min-width:72rem){.g1et32pl{grid-template-columns:[le] 1fr var(--timvir-page-margin) [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] var( --timvir-page-margin ) 1fr [re];}}.g1et32pl > *:not(.nc2e9vn){grid-column:lc / rc;min-width:0;}.g1et32pl > *{margin:0 0 2rem;}.g1et32pl > p + ul{margin-top:-1.25rem;}
 .en6sn9p{grid-column:lex / rex;}
 .f3c539b{grid-column:le / re;}
 
-.rwhrdvg{padding:50px 0 30px;background:#20232a;color:white;display:grid;gap:50px;}
+.rwhrdvg{padding:50px 0 30px;display:grid;gap:50px;border-top:1px solid var(--timvir-border-color);}
 .l1u1x7q7{display:grid;grid-template-columns:repeat(auto-fill,minmax(234px,1fr));grid-gap:32px;}
-.l1x5jo3a{text-transform:uppercase;color:var(--timvir-secondary-text-color);font-weight:700;letter-spacing:0.08em;margin-bottom:12px;}
-.l29wcr8{display:block;color:white;text-decoration:none;}.l29wcr8:hover{color:var(--c-p-4);}
-.m1ojti9g{color:var(--timvir-secondary-text-color);}.m1ojti9g a{color:currentColor;text-decoration:none;background-image:linear-gradient(transparent,transparent 5px,#383838 5px,#383838);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x;}.m1ojti9g a:hover{background-image:linear-gradient(transparent,transparent 3px,#2bbc8a 3px,#2bbc8a);}
+.l1x5jo3a{font-weight:600;margin-bottom:12px;}
+.l29wcr8{display:block;color:inherit;text-decoration:none;}.l29wcr8:hover{color:var(--c-p-4);}
+.m1ojti9g{color:var(--timvir-secondary-text-color);}.m1ojti9g a{color:inherit;text-decoration:none;background-image:linear-gradient(transparent,transparent 5px,#383838 5px,#383838);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x;}.m1ojti9g a:hover{background-image:linear-gradient(transparent,transparent 3px,#2bbc8a 3px,#2bbc8a);}
 
 .t1amubg3{font-family:system-ui,sans-serif;font-feature-settings:"liga","kern";text-rendering:optimizelegibility;font-size:0.9375rem;line-height:1.7333;background-color:var(--timvir-background-color);color:var(--timvir-text-color);--c-p-0:#f0fcf6;--c-p-1:#d1f6e4;--c-p-2:#a0dbc1;--c-p-3:#61c19f;--c-p-4:#38a585;--c-p-5:#1b896b;}:root{box-sizing:border-box;scroll-padding-top:20px;}*,*:before,*:after{box-sizing:inherit;}:root{--timvir-background-color:#ffffff;--timvir-text-color:#000000c9;--timvir-secondary-text-color:#00000066;--timvir-secondary-background-color:#f9f8f9;--timvir-border-color:#e9e8ea;--timvir-sidebar-highlight-color:rgb(237,237,237);--timvir-accent-color:#38a585;}:root[data-timvir-theme="dark"]{--timvir-background-color:#1f2023;--timvir-text-color:rgba(255 255 255 / 0.86);--timvir-secondary-text-color:rgba(255 255 255 / 0.56);--timvir-secondary-background-color:#161618;--timvir-border-color:#27292f;--timvir-sidebar-highlight-color:rgb(41,43,47);--timvir-accent-color:#38a585;}
 
@@ -23,19 +23,19 @@
 
 .rfei6z8{position:fixed;inset:0px;display:flex;z-index:900;align-items:flex-start;justify-content:center;padding:13vh 16px 16px;font-family:system-ui,sans-serif;font-feature-settings:"liga","kern";text-rendering:optimizelegibility;font-size:16px;line-height:1.725;}
 
-.re625n1{padding:50px 0;background:#282c34;color:white;display:grid;grid-auto-rows:min-content;grid-template-columns:[le] 16px [lex lc] 1fr [rc rex] 16px [re];}@media (min-width:48rem){.re625n1{grid-template-columns:[le] 24px [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] 24px [re];}}@media (min-width:72rem){.re625n1{grid-template-columns:[le] 1fr 24px [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] 24px 1fr [re];}}.re625n1 > *{grid-column:lc / rc;}
-.d19gj27w{display:flex;align-items:flex-start;justify-content:space-between;}
-.d15ohs1l{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;}
-.dczrd9z{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;text-align:right;}
-.lifnzb8{font-size:1.2rem;color:inherit;text-decoration:none;}.lifnzb8:hover{color:var(--c-p-3);}
-.dymvrdu{opacity:0.5;}
+.de625n1{display:flex;flex-direction:column-reverse;gap:1rem;font-size:0.875rem;line-height:1.5;}@media (min-width:48rem){.de625n1{flex-direction:row;}}
+.l19gj27w{width:100%;display:flex;gap:4px;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;border-radius:8px;border:1px solid var(--timvir-border-color);padding:16px;color:inherit;text-decoration:none;min-width:0;}.l19gj27w:hover{background-color:var(--timvir-secondary-background-color);}
+.l15ohs1l{width:100%;display:flex;flex-direction:column;gap:4px;align-items:flex-end;justify-content:flex-start;text-align:right;border-radius:8px;border:1px solid var(--timvir-border-color);padding:16px;color:inherit;text-decoration:none;min-width:0;}.l15ohs1l:hover{background-color:var(--timvir-secondary-background-color);}
+.dczrd9z{font-weight:500;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
+.difnzb8{color:var(--timvir-secondary-text-color);display:flex;align-items:center;margin-inline:-0.2em;}.difnzb8 svg{height:1.2em;width:1.2em;}
+.rymvrdu{padding:50px 0 80px;display:grid;grid-auto-rows:min-content;grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width:48rem){.rymvrdu{grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] var(--timvir-page-margin) [re];}}@media (min-width:72rem){.rymvrdu{grid-template-columns: [le] 1fr var(--timvir-page-margin) [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] var( --timvir-page-margin ) 1fr [re];}}.rymvrdu > *{grid-column:lc / rc;}
 
 .a12hs2f7{color:inherit;text-decoration:none;}.a12hs2f7:hover svg{opacity:1;transform:none;visibility:visible;--visibility-delay:0s;}
 .c31avqb{margin-left:6px;color:var(--timvir-secondary-text-color);height:0.9rem;width:0.9rem;vertical-align:middle;transition:opacity 0.2s,transform 0.2s,visibility 0s var(--visibility-delay,0.2s);opacity:0;visibility:hidden;transform:translateX(-50%);}
 .h6ceq1b{margin-top:3rem;margin-bottom:1rem;font-size:2rem;line-height:1.125;font-weight:590;text-indent:-0.05em;}
-.hj6166y{position:relative;margin-top:4.5rem;margin-bottom:0.5rem;font-size:1.5rem;line-height:1.1666;font-weight:590;}
-.h1f8mqks{position:relative;margin-top:3rem;margin-bottom:0.5rem;font-size:1.0625rem;line-height:1.4705882353;font-weight:590;}
-.h1hmga4{position:relative;margin-top:2rem;margin-bottom:0.5rem;font-size:0.9375rem;line-height:1.4375;font-weight:590;}
+.hj6166y{position:relative;margin:2.5rem 0 1rem;font-size:1.5rem;line-height:1.1666;font-weight:590;}
+.h1f8mqks{position:relative;margin:1rem 0 1rem;font-size:1.0625rem;line-height:1.4705882353;font-weight:590;}
+.h1hmga4{position:relative;margin:1rem 0 1rem;font-size:0.9375rem;line-height:1.4375;font-weight:590;}
 .blrd6ep{margin-left:0;font-size:1.1rem;}.blrd6ep > *:first-child{margin-top:0;}.blrd6ep > *:last-child{margin-bottom:0;}
 .h172su6f{display:block;border:none;height:1px;width:100%;background:currentColor;opacity:0.25;}
 .t1a7p0gg{border-spacing:0;border-collapse:collapse;width:100%;overflow:auto;}
@@ -46,28 +46,37 @@
 .tvhsmuz{text-align:var(--tvhsmuz-0);padding:6px 13px;border:1px solid var(--c-p-2);}
 .c197eb99{border-radius:5px;padding:4px 6px 3px;font-size:0.8em;background:var(--timvir-secondary-background-color);border:1px solid var(--timvir-border-color);}
 .a1d7vdmn{color:currentColor;text-decoration:none;background-image:linear-gradient(transparent,transparent 5px,#383838 5px,#383838);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x;}.a1d7vdmn:hover{background-image:linear-gradient(transparent,transparent 3px,#2bbc8a 3px,#2bbc8a);}.a1d7vdmn:hover .c197eb99{box-shadow:inset 0 0 0 1px rgba(16,22,26,0.5),inset 0 1px 4px rgba(16,22,26,0.2);}.a1d7vdmn:active .c197eb99{box-shadow:inset 0 0 0 1px rgba(16,22,26,0.7),inset 0 1px 4px rgba(16,22,26,0.4);background:var(--c-p-2);}
-.pgfnift{margin:0 0 1rem;}
-.u3pt2dg{margin:0 0 1rem;}
-.ojr9iky{margin:0 0 1rem;}
 
-.r28qe6v{display:flex;align-items:center;margin:1px 0;}.r28qe6v > a{min-width:0;transition:background 0.16s;border-radius:4px;display:flex;align-items:center;color:var(--timvir-text-color);font-size:0.8125rem;line-height:2.2;font-weight:500;background:none;text-decoration:none;width:100%;padding:0 8px;opacity:0.7;}.r28qe6v:hover a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}.r28qe6v[data-active="true"] a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}
-.l1ia823q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto;}
-.i13ixk6c{margin-left:4px;transition:transform 0.12s cubic-bezier(0.455,0.03,0.515,0.955);transform-origin:center center;}
 
 
 
-.d17eoe18{display:none;height:0;}@media (min-width:60rem){.d17eoe18{display:flex;flex-direction:column;height:100%;}}
-.d1mgn6rc{padding:24px 0 0;flex-shrink:0;transition:all 0.16s;}
-.d7bx8iu{box-shadow:0 1px 0 rgba(16,22,26,0.15);}
-.r119ou0k{position:fixed;top:0;left:0;bottom:0;width:0;}@media (min-width:60rem){.r119ou0k{width:300px;}}
-.s1f74255{padding:16px 0 30px;overflow-y:auto;flex-grow:1;overscroll-behavior:contain;}
-.n5l3c45{padding-inline:16px;}
-.d15ju3pv{font-family:system-ui;padding:0 16px;}
-.d2bwnbz{color:var(--timvir-text-color);font-size:0.8125rem;line-height:2.2;font-weight:400;cursor:pointer;height:36px;border-radius:8px;padding:0 12px;border:1px solid var(--timvir-border-color);background:var(--timvir-secondary-background-color);display:flex;align-items:center;}.d2bwnbz:hover{background:var(--timvir-sidebar-highlight-color);}.d2bwnbz > svg{display:block;margin-right:8px;}
+.r28qe6v{display:flex;align-items:center;margin:1px 0;font-size:0.9375rem;line-height:2.2;}@media (min-width:48rem){.r28qe6v{font-size:0.8125rem;}}@media (any-pointer:coarse){.r28qe6v > a{min-height:44px;}}.r28qe6v > a{min-width:0;transition:background 0.16s;border-radius:4px;display:flex;align-items:center;color:var(--timvir-text-color);font-weight:500;background:none;text-decoration:none;width:100%;padding:0 8px;opacity:0.7;}.r28qe6v:hover a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}.r28qe6v[data-active="true"] a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}
+.i1ia823q{display:block;width:1.3em;height:1.3em;margin-right:8px;min-width:1.3em;}
+.l13ixk6c{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto;}
+.i7wcd3g{margin-left:4px;transition:transform 0.12s cubic-bezier(0.455,0.03,0.515,0.955);transform-origin:center center;width:1rem;height:1rem;}
 
-.rfhjyp1{min-height:100vh;display:grid;grid-template-columns:[l] 0 [m] 1fr [r];}@media (min-width:60rem){.rfhjyp1{grid-template-columns:[l] 300px [m] 1fr [r];}}
-.d1pp8z35{grid-column:l / m;border-right:1px solid var(--timvir-border-color);}
-.dxk1fgw{display:flex;flex-direction:column;grid-column:m / r;}
+
+
+.h17eoe18{padding:0 var(--timvir-page-margin);height:3rem;display:flex;align-items:center;}@media (min-width:48rem){.h17eoe18{padding-top:24px;display:block;height:auto;}}
+.d1mgn6rc{font-size:0.875rem;line-height:1.3125;display:flex;gap:16px;}
+.d7bx8iu{font-weight:590;}
+.d119ou0k{background-color:var(--timvir-border-color);width:1px;height:1.25rem;}
+.d1f74255{flex-shrink:0;transition:all 0.16s;margin-top:16px;display:none;}@media (min-width:48rem){.d1f74255{display:block;}}
+.l5l3c45{border-bottom:1px solid var(--timvir-border-color);padding:0 var(--timvir-page-margin);height:3rem;display:flex;align-items:center;cursor:pointer;}@media (min-width:48rem){.l5l3c45{display:none;}}
+.c15ju3pv{display:block;width:1.3em;height:1.3em;margin-right:8px;min-width:1.3em;}
+.s2bwnbz{margin-left:auto;}
+.iu06l76{display:none;}
+.s56darb{overflow-y:scroll;position:fixed;top:0px;width:100%;}
+.rwbgl5x{display:flex;flex-direction:column;}@media (min-width:48rem){.rwbgl5x{height:100%;}}
+.c15aig6x{display:none;background-color:var(--timvir-background-color);}#menu:checked ~ .c15aig6x{display:flex;position:fixed;top:6rem;left:0;right:0;bottom:0;}@media (min-width:48rem){.c15aig6x{display:flex;flex-direction:column;height:100%;position:static;overflow:hidden;}}
+.svou0q5{padding:24px 0;overflow-y:auto;flex-grow:1;overscroll-behavior:auto;scroll-padding-block:24px;mask-image:linear-gradient( to bottom, transparent 0%, rgba(0,0,0,0.2) 12px, #000 24px, #000 calc(100% - 24px), rgba(0,0,0,0.2) calc(100% - 12px), transparent 100% );}
+.n1ibjf0n{padding-inline:calc(var(--timvir-page-margin) - 8px);}@media (min-width:48rem){.n1ibjf0n{padding-inline:var(--timvir-page-margin);}}
+.da95449{font-family:system-ui;}
+.d1au8wkb{color:var(--timvir-text-color);font-size:0.8125rem;line-height:2.2;font-weight:400;cursor:pointer;min-height:36px;border-radius:8px;padding:0 12px;border:1px solid var(--timvir-border-color);background:var(--timvir-secondary-background-color);display:flex;align-items:center;}.d1au8wkb:hover{background:var(--timvir-sidebar-highlight-color);}.d1au8wkb > svg{display:block;margin-right:8px;width:0.75rem;height:0.75rem;}
+
+.rfhjyp1{min-height:100vh;--timvir-page-margin:16px;display:grid;grid-template-areas:"navigation" "content";}@media (min-width:48rem){.rfhjyp1{--timvir-page-margin:24px;grid-template-areas:"navigation content";grid-template-columns:[l] 300px [m] 1fr [r];}}
+.s1pp8z35{grid-area:navigation;z-index:80;background-color:var(--timvir-background-color);position:sticky;top:0;}@media (min-width:48rem){.s1pp8z35{position:fixed;top:0;bottom:0;left:0;width:300px;border-right:1px solid var(--timvir-border-color);}}
+.dxk1fgw{display:flex;flex-direction:column;grid-area:content;}
 .d2srpki{margin-top:auto;}
 .d1hkiw6l{margin-top:auto;padding-top:80px;}
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "timvir",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

package/styles.css

@@ -1,9 +1,9 @@
 .r1ev38xg{margin:1em 0;}
 .c8hz158{display:grid;grid-gap:8px;grid-template-columns:1fr 100px;margin-bottom:8px;}
-.t1663phv{display:flex;align-items:center;padding:0 0 0 10px;height:36px;position:relative;background:var(--timvir-secondary-background-color);}.t1663phv::after{display:block;position:absolute;content:"";inset:0;pointer-events:none;border:1px solid var(--timvir-border-color);border-radius:2px;}.t1663phv:hover::after{border-color:var(--timvir-text-color);}.t1663phv:focus-within::after{border-color:var(--timvir-text-color);}
+.t1663phv{display:flex;align-items:center;padding:0 0 0 10px;min-height:36px;position:relative;background:var(--timvir-secondary-background-color);}.t1663phv::after{display:block;position:absolute;content:"";inset:0;pointer-events:none;border:1px solid var(--timvir-border-color);border-radius:2px;}.t1663phv:hover::after{border-color:var(--timvir-text-color);}.t1663phv:focus-within::after{border-color:var(--timvir-text-color);}
 .s1k50njo{display:inline-block;color:var(--timvir-secondary-text-color);margin-right:6px;}
 .i1dajnne{border:none;outline:none;font:inherit;background:transparent;align-self:stretch;padding:0;width:100%;color:inherit;}
-.b128wsn{border:none;outline:none;height:36px;border:1px solid var(--timvir-border-color);border-radius:2px;background:var(--timvir-secondary-background-color);color:var(--timvir-text-color);font:inherit;}.b128wsn:hover{border-color:var(--timvir-text-color);background:var(--timvir-sidebar-highlight-color);}.b128wsn:active{border-color:var(--timvir-text-color);background:var(--timvir-sidebar-highlight-color);}
+.b128wsn{border:none;outline:none;min-height:36px;border:1px solid var(--timvir-border-color);border-radius:2px;background:var(--timvir-secondary-background-color);color:var(--timvir-text-color);font:inherit;}.b128wsn:hover{border-color:var(--timvir-text-color);background:var(--timvir-sidebar-highlight-color);}.b128wsn:active{border-color:var(--timvir-text-color);background:var(--timvir-sidebar-highlight-color);}
 
 .tac6gx6{color:#393a34;background-color:#f6f8fa;}.tac6gx6 :is(.comment,.prolog,.doctype,.cdata){color:#999988;font-style:italic;}.tac6gx6 :is(.namespace){opacity:0.7;}.tac6gx6 :is(.string,.attr-value){color:#e3116c;}.tac6gx6 :is(.punctuation,.operator){color:#6cb6ff;}.tac6gx6 :is(.function,.delete,.tag){color:#d73a49;}.tac6gx6 :is(.tag,.selector,.keyword){color:#00009f;}.tac6gx6 :is(.function-variable){color:#6f42c1;}.tac6gx6 :is(.atrule,.keyword,.attr-name,.selector){color:#00a4db;}.tac6gx6 :is(.entity,.url,.symbol,.number,.boolean,.variable,.constant,.property,.regex,.inserted){color:#36acaa;}:root[data-timvir-theme="dark"] .tac6gx6{color:#adbac7;background-color:#2d333b;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.comment,.prolog,.doctype,.cdata){color:#999988;font-style:italic;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.namespace){opacity:0.7;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.string,.attr-value){color:#96d0ff;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.punctuation,.operator){color:#6cb6ff;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.function,.delete,.tag){color:#d73a49;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.tag,.selector,.keyword){color:#8ddb8c;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.function-variable){color:#6f42c1;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.atrule,.keyword,.attr-name,.selector){color:#f47067;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.entity,.url,.symbol,.number,.boolean,.variable,.constant,.property,.regex,.inserted){color:#dcbdfb;}
 
@@ -13,13 +13,13 @@
 .s1hdfi6o{position:absolute;z-index:-1;top:0;right:0;transition:all 0.2s;transform:translate(48px,-48px);}.s1hdfi6o path{fill:var(--c-p-4);}
 .d17pltln{padding:16px 24px 16px 0;}
 
-.r9v2r0l{margin:1.5rem 0 3rem;}:root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark) !important;font-style:var(--shiki-dark-font-style) !important;font-weight:var(--shiki-dark-font-weight) !important;text-decoration:var(--shiki-dark-text-decoration) !important;}
-.cs7tint{overflow-x:auto;contain:content;font-size:0.8em;border-radius:5px;--timvir-b-Code-bleed:calc(var(--timvir-page-margin,24px) * 0.6666);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),8px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));border:1px solid var(--timvir-border-color);}.cs7tint pre{margin:0;padding:16px 0;background-color:var(--timvir-secondary-background-color) !important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);}
+:root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark) !important;font-style:var(--shiki-dark-font-style) !important;font-weight:var(--shiki-dark-font-weight) !important;text-decoration:var(--shiki-dark-text-decoration) !important;}
+.cs7tint{overflow-x:auto;contain:content;font-size:0.8em;border-radius:5px;--timvir-b-Code-bleed:calc(var(--timvir-margin,0px) * 0.6666);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),8px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));border:1px solid var(--timvir-border-color);}.cs7tint pre{margin:0;padding:16px 0;background-color:var(--timvir-secondary-background-color) !important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);}
 .fjvaz2s{display:grid;border-radius:0;box-shadow:none;margin-inline:0;grid-auto-rows:min-content;grid-template-columns:[le] 0 [lc] 1fr [rc] 0 [re];grid-column-gap:16px;}.fjvaz2s:hover{box-shadow:none;}@media (min-width:60rem){.fjvaz2s{grid-template-columns:[le] 1fr [lc] minmax(0,48rem) [rc] 1fr [re];grid-column-gap:24px;}}.fjvaz2s > *{grid-column:lc / re;}
 .lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);}
 .h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] .h1xcko1i{background-color:rgba(174,124,20,0.15);}
 .ll2b9hx{display:inline-block;width:var(--timvir-b-Code-bleed);color:var(--timvir-secondary-text-color);text-align:right;padding-inline:4px;}
-.c5vr6r2{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:2px;}
+.c5vr6r2{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:0.3em;}
 
 
 .r1f19pie{position:relative;}
@@ -35,9 +35,9 @@
 .a1y0tcvx:hover::before,.a1y0tcvx::before{box-shadow:0 0 0 2px var(--c-p-5);opacity:1;}
 
 
-.r1nql2f9{margin:0 0 1.5rem;--timvir-b-Exhibit-bleed:0px;--timvir-b-Exhibit-borderColor:var(--timvir-border-color);--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII=);}:root[data-timvir-theme="dark"] .r1nql2f9{--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
-.c4ji594{display:flow-root;background:var(--timvir-b-Exhibit-background);margin:0 calc(-1 * var(--timvir-b-Exhibit-bleed));padding:var(--timvir-b-Exhibit-bleed);}
-.cf43jjx{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:2px;}
+.r1nql2f9{--timvir-b-Exhibit-bleed:calc(var(--timvir-margin,0px) * 0.6666);--timvir-b-Exhibit-borderColor:var(--timvir-border-color);--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAHElEQVR4AWP4/u07Mvr75y8yGlBpND6a6oGUBgAxMSSkDKa/pQAAAABJRU5ErkJggg==);}:root[data-timvir-theme="dark"] .r1nql2f9{--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
+.c4ji594{display:flow-root;background:var(--timvir-b-Exhibit-background);margin:0 calc(-1 * var(--timvir-b-Exhibit-bleed));padding:var(--timvir-b-Exhibit-bleed);border-radius:5px;}
+.cf43jjx{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:0.3em;}
 
 .mby32tn{display:flex;align-items:baseline;font-size:0.9rem;font-weight:bold;transition:all 0.2s;}
 .rc7ivp5{padding:16px 0;}
@@ -49,7 +49,7 @@
 .dw285p4{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
 .dx3nfmc{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
 
-.r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}
+.r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--timvir-page-margin,24px);--timvir-margin:calc(var(--timvir-page-margin,24px) * 0.5);}
 
 .b1a0xzv7{background:white;place-self:stretch;border-radius:2px;transition:all 0.2s;box-shadow:0 0 0 0 rgba(0,0,0,0.1);}
 .g10obtzp{opacity:0;transition:all 0.2s;pointer-events:none;}
@@ -70,7 +70,7 @@
 .dobecwk{display:flex;justify-content:space-between;align-items:center;line-height:1;}
 .dho7t08{padding-top:6px;opacity:0.5;font-size:0.8em;line-height:1;}
 
-.fgdj0yb{font-size:0.75rem;color:var(--timvir-secondary-text-color);white-space:nowrap;display:flex;justify-content:space-between;align-items:center;}
+.fgdj0yb{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);white-space:nowrap;display:flex;justify-content:space-between;align-items:center;}
 .d1rc4zjh{cursor:pointer;}.d1rc4zjh:hover{color:var(--c-p-4);opacity:1;}.d1rc4zjh > svg{display:block;}
 .d1enfo6{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
 .d1watfn6{margin-top:12px;}
@@ -79,7 +79,7 @@
 
 .ssl4j8q{width:100%;display:block;height:16px;margin:8px 0;}
 
-.r1ouu0bc{contain:layout;}
+.r1ouu0bc{contain:layout;margin-bottom:0;}
 .d1uj09ka{position:relative;}
 .d2uawyc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-variant-numeric:tabular-nums;}
 .d8ms9m9{display:flex;align-items:stretch;justify-content:center;}
@@ -100,15 +100,15 @@
 
 
 
-.g1et32pl{display:grid;--timvir-page-margin:16px;grid-auto-rows:min-content;grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width:48rem){.g1et32pl{--timvir-page-margin:24px;grid-template-columns:[le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] var( --timvir-page-margin ) [re];}}@media (min-width:72rem){.g1et32pl{grid-template-columns:[le] 1fr var(--timvir-page-margin) [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] var( --timvir-page-margin ) 1fr [re];}}.g1et32pl > *:not(.nc2e9vn){grid-column:lc / rc;min-width:0;}
+.g1et32pl{display:grid;--timvir-page-margin:16px;--timvir-margin:var(--timvir-page-margin);grid-auto-rows:min-content;grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width:48rem){.g1et32pl{--timvir-page-margin:24px;grid-template-columns:[le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] var( --timvir-page-margin ) [re];}}@media (min-width:72rem){.g1et32pl{grid-template-columns:[le] 1fr var(--timvir-page-margin) [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] var( --timvir-page-margin ) 1fr [re];}}.g1et32pl > *:not(.nc2e9vn){grid-column:lc / rc;min-width:0;}.g1et32pl > *{margin:0 0 2rem;}.g1et32pl > p + ul{margin-top:-1.25rem;}
 .en6sn9p{grid-column:lex / rex;}
 .f3c539b{grid-column:le / re;}
 
-.rwhrdvg{padding:50px 0 30px;background:#20232a;color:white;display:grid;gap:50px;}
+.rwhrdvg{padding:50px 0 30px;display:grid;gap:50px;border-top:1px solid var(--timvir-border-color);}
 .l1u1x7q7{display:grid;grid-template-columns:repeat(auto-fill,minmax(234px,1fr));grid-gap:32px;}
-.l1x5jo3a{text-transform:uppercase;color:var(--timvir-secondary-text-color);font-weight:700;letter-spacing:0.08em;margin-bottom:12px;}
-.l29wcr8{display:block;color:white;text-decoration:none;}.l29wcr8:hover{color:var(--c-p-4);}
-.m1ojti9g{color:var(--timvir-secondary-text-color);}.m1ojti9g a{color:currentColor;text-decoration:none;background-image:linear-gradient(transparent,transparent 5px,#383838 5px,#383838);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x;}.m1ojti9g a:hover{background-image:linear-gradient(transparent,transparent 3px,#2bbc8a 3px,#2bbc8a);}
+.l1x5jo3a{font-weight:600;margin-bottom:12px;}
+.l29wcr8{display:block;color:inherit;text-decoration:none;}.l29wcr8:hover{color:var(--c-p-4);}
+.m1ojti9g{color:var(--timvir-secondary-text-color);}.m1ojti9g a{color:inherit;text-decoration:none;background-image:linear-gradient(transparent,transparent 5px,#383838 5px,#383838);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x;}.m1ojti9g a:hover{background-image:linear-gradient(transparent,transparent 3px,#2bbc8a 3px,#2bbc8a);}
 
 .t1amubg3{font-family:system-ui,sans-serif;font-feature-settings:"liga","kern";text-rendering:optimizelegibility;font-size:0.9375rem;line-height:1.7333;background-color:var(--timvir-background-color);color:var(--timvir-text-color);--c-p-0:#f0fcf6;--c-p-1:#d1f6e4;--c-p-2:#a0dbc1;--c-p-3:#61c19f;--c-p-4:#38a585;--c-p-5:#1b896b;}:root{box-sizing:border-box;scroll-padding-top:20px;}*,*:before,*:after{box-sizing:inherit;}:root{--timvir-background-color:#ffffff;--timvir-text-color:#000000c9;--timvir-secondary-text-color:#00000066;--timvir-secondary-background-color:#f9f8f9;--timvir-border-color:#e9e8ea;--timvir-sidebar-highlight-color:rgb(237,237,237);--timvir-accent-color:#38a585;}:root[data-timvir-theme="dark"]{--timvir-background-color:#1f2023;--timvir-text-color:rgba(255 255 255 / 0.86);--timvir-secondary-text-color:rgba(255 255 255 / 0.56);--timvir-secondary-background-color:#161618;--timvir-border-color:#27292f;--timvir-sidebar-highlight-color:rgb(41,43,47);--timvir-accent-color:#38a585;}
 
@@ -124,19 +124,19 @@
 
 .rfei6z8{position:fixed;inset:0px;display:flex;z-index:900;align-items:flex-start;justify-content:center;padding:13vh 16px 16px;font-family:system-ui,sans-serif;font-feature-settings:"liga","kern";text-rendering:optimizelegibility;font-size:16px;line-height:1.725;}
 
-.re625n1{padding:50px 0;background:#282c34;color:white;display:grid;grid-auto-rows:min-content;grid-template-columns:[le] 16px [lex lc] 1fr [rc rex] 16px [re];}@media (min-width:48rem){.re625n1{grid-template-columns:[le] 24px [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] 24px [re];}}@media (min-width:72rem){.re625n1{grid-template-columns:[le] 1fr 24px [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] 24px 1fr [re];}}.re625n1 > *{grid-column:lc / rc;}
-.d19gj27w{display:flex;align-items:flex-start;justify-content:space-between;}
-.d15ohs1l{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;}
-.dczrd9z{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;text-align:right;}
-.lifnzb8{font-size:1.2rem;color:inherit;text-decoration:none;}.lifnzb8:hover{color:var(--c-p-3);}
-.dymvrdu{opacity:0.5;}
+.de625n1{display:flex;flex-direction:column-reverse;gap:1rem;font-size:0.875rem;line-height:1.5;}@media (min-width:48rem){.de625n1{flex-direction:row;}}
+.l19gj27w{width:100%;display:flex;gap:4px;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;border-radius:8px;border:1px solid var(--timvir-border-color);padding:16px;color:inherit;text-decoration:none;min-width:0;}.l19gj27w:hover{background-color:var(--timvir-secondary-background-color);}
+.l15ohs1l{width:100%;display:flex;flex-direction:column;gap:4px;align-items:flex-end;justify-content:flex-start;text-align:right;border-radius:8px;border:1px solid var(--timvir-border-color);padding:16px;color:inherit;text-decoration:none;min-width:0;}.l15ohs1l:hover{background-color:var(--timvir-secondary-background-color);}
+.dczrd9z{font-weight:500;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
+.difnzb8{color:var(--timvir-secondary-text-color);display:flex;align-items:center;margin-inline:-0.2em;}.difnzb8 svg{height:1.2em;width:1.2em;}
+.rymvrdu{padding:50px 0 80px;display:grid;grid-auto-rows:min-content;grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width:48rem){.rymvrdu{grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] var(--timvir-page-margin) [re];}}@media (min-width:72rem){.rymvrdu{grid-template-columns: [le] 1fr var(--timvir-page-margin) [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] var( --timvir-page-margin ) 1fr [re];}}.rymvrdu > *{grid-column:lc / rc;}
 
 .a12hs2f7{color:inherit;text-decoration:none;}.a12hs2f7:hover svg{opacity:1;transform:none;visibility:visible;--visibility-delay:0s;}
 .c31avqb{margin-left:6px;color:var(--timvir-secondary-text-color);height:0.9rem;width:0.9rem;vertical-align:middle;transition:opacity 0.2s,transform 0.2s,visibility 0s var(--visibility-delay,0.2s);opacity:0;visibility:hidden;transform:translateX(-50%);}
 .h6ceq1b{margin-top:3rem;margin-bottom:1rem;font-size:2rem;line-height:1.125;font-weight:590;text-indent:-0.05em;}
-.hj6166y{position:relative;margin-top:4.5rem;margin-bottom:0.5rem;font-size:1.5rem;line-height:1.1666;font-weight:590;}
-.h1f8mqks{position:relative;margin-top:3rem;margin-bottom:0.5rem;font-size:1.0625rem;line-height:1.4705882353;font-weight:590;}
-.h1hmga4{position:relative;margin-top:2rem;margin-bottom:0.5rem;font-size:0.9375rem;line-height:1.4375;font-weight:590;}
+.hj6166y{position:relative;margin:2.5rem 0 1rem;font-size:1.5rem;line-height:1.1666;font-weight:590;}
+.h1f8mqks{position:relative;margin:1rem 0 1rem;font-size:1.0625rem;line-height:1.4705882353;font-weight:590;}
+.h1hmga4{position:relative;margin:1rem 0 1rem;font-size:0.9375rem;line-height:1.4375;font-weight:590;}
 .blrd6ep{margin-left:0;font-size:1.1rem;}.blrd6ep > *:first-child{margin-top:0;}.blrd6ep > *:last-child{margin-bottom:0;}
 .h172su6f{display:block;border:none;height:1px;width:100%;background:currentColor;opacity:0.25;}
 .t1a7p0gg{border-spacing:0;border-collapse:collapse;width:100%;overflow:auto;}
@@ -147,28 +147,37 @@
 .tvhsmuz{text-align:var(--tvhsmuz-0);padding:6px 13px;border:1px solid var(--c-p-2);}
 .c197eb99{border-radius:5px;padding:4px 6px 3px;font-size:0.8em;background:var(--timvir-secondary-background-color);border:1px solid var(--timvir-border-color);}
 .a1d7vdmn{color:currentColor;text-decoration:none;background-image:linear-gradient(transparent,transparent 5px,#383838 5px,#383838);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x;}.a1d7vdmn:hover{background-image:linear-gradient(transparent,transparent 3px,#2bbc8a 3px,#2bbc8a);}.a1d7vdmn:hover .c197eb99{box-shadow:inset 0 0 0 1px rgba(16,22,26,0.5),inset 0 1px 4px rgba(16,22,26,0.2);}.a1d7vdmn:active .c197eb99{box-shadow:inset 0 0 0 1px rgba(16,22,26,0.7),inset 0 1px 4px rgba(16,22,26,0.4);background:var(--c-p-2);}
-.pgfnift{margin:0 0 1rem;}
-.u3pt2dg{margin:0 0 1rem;}
-.ojr9iky{margin:0 0 1rem;}
 
-.r28qe6v{display:flex;align-items:center;margin:1px 0;}.r28qe6v > a{min-width:0;transition:background 0.16s;border-radius:4px;display:flex;align-items:center;color:var(--timvir-text-color);font-size:0.8125rem;line-height:2.2;font-weight:500;background:none;text-decoration:none;width:100%;padding:0 8px;opacity:0.7;}.r28qe6v:hover a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}.r28qe6v[data-active="true"] a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}
-.l1ia823q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto;}
-.i13ixk6c{margin-left:4px;transition:transform 0.12s cubic-bezier(0.455,0.03,0.515,0.955);transform-origin:center center;}
 
 
 
-.d17eoe18{display:none;height:0;}@media (min-width:60rem){.d17eoe18{display:flex;flex-direction:column;height:100%;}}
-.d1mgn6rc{padding:24px 0 0;flex-shrink:0;transition:all 0.16s;}
-.d7bx8iu{box-shadow:0 1px 0 rgba(16,22,26,0.15);}
-.r119ou0k{position:fixed;top:0;left:0;bottom:0;width:0;}@media (min-width:60rem){.r119ou0k{width:300px;}}
-.s1f74255{padding:16px 0 30px;overflow-y:auto;flex-grow:1;overscroll-behavior:contain;}
-.n5l3c45{padding-inline:16px;}
-.d15ju3pv{font-family:system-ui;padding:0 16px;}
-.d2bwnbz{color:var(--timvir-text-color);font-size:0.8125rem;line-height:2.2;font-weight:400;cursor:pointer;height:36px;border-radius:8px;padding:0 12px;border:1px solid var(--timvir-border-color);background:var(--timvir-secondary-background-color);display:flex;align-items:center;}.d2bwnbz:hover{background:var(--timvir-sidebar-highlight-color);}.d2bwnbz > svg{display:block;margin-right:8px;}
+.r28qe6v{display:flex;align-items:center;margin:1px 0;font-size:0.9375rem;line-height:2.2;}@media (min-width:48rem){.r28qe6v{font-size:0.8125rem;}}@media (any-pointer:coarse){.r28qe6v > a{min-height:44px;}}.r28qe6v > a{min-width:0;transition:background 0.16s;border-radius:4px;display:flex;align-items:center;color:var(--timvir-text-color);font-weight:500;background:none;text-decoration:none;width:100%;padding:0 8px;opacity:0.7;}.r28qe6v:hover a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}.r28qe6v[data-active="true"] a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}
+.i1ia823q{display:block;width:1.3em;height:1.3em;margin-right:8px;min-width:1.3em;}
+.l13ixk6c{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto;}
+.i7wcd3g{margin-left:4px;transition:transform 0.12s cubic-bezier(0.455,0.03,0.515,0.955);transform-origin:center center;width:1rem;height:1rem;}
 
-.rfhjyp1{min-height:100vh;display:grid;grid-template-columns:[l] 0 [m] 1fr [r];}@media (min-width:60rem){.rfhjyp1{grid-template-columns:[l] 300px [m] 1fr [r];}}
-.d1pp8z35{grid-column:l / m;border-right:1px solid var(--timvir-border-color);}
-.dxk1fgw{display:flex;flex-direction:column;grid-column:m / r;}
+
+
+.h17eoe18{padding:0 var(--timvir-page-margin);height:3rem;display:flex;align-items:center;}@media (min-width:48rem){.h17eoe18{padding-top:24px;display:block;height:auto;}}
+.d1mgn6rc{font-size:0.875rem;line-height:1.3125;display:flex;gap:16px;}
+.d7bx8iu{font-weight:590;}
+.d119ou0k{background-color:var(--timvir-border-color);width:1px;height:1.25rem;}
+.d1f74255{flex-shrink:0;transition:all 0.16s;margin-top:16px;display:none;}@media (min-width:48rem){.d1f74255{display:block;}}
+.l5l3c45{border-bottom:1px solid var(--timvir-border-color);padding:0 var(--timvir-page-margin);height:3rem;display:flex;align-items:center;cursor:pointer;}@media (min-width:48rem){.l5l3c45{display:none;}}
+.c15ju3pv{display:block;width:1.3em;height:1.3em;margin-right:8px;min-width:1.3em;}
+.s2bwnbz{margin-left:auto;}
+.iu06l76{display:none;}
+.s56darb{overflow-y:scroll;position:fixed;top:0px;width:100%;}
+.rwbgl5x{display:flex;flex-direction:column;}@media (min-width:48rem){.rwbgl5x{height:100%;}}
+.c15aig6x{display:none;background-color:var(--timvir-background-color);}#menu:checked ~ .c15aig6x{display:flex;position:fixed;top:6rem;left:0;right:0;bottom:0;}@media (min-width:48rem){.c15aig6x{display:flex;flex-direction:column;height:100%;position:static;overflow:hidden;}}
+.svou0q5{padding:24px 0;overflow-y:auto;flex-grow:1;overscroll-behavior:auto;scroll-padding-block:24px;mask-image:linear-gradient( to bottom, transparent 0%, rgba(0,0,0,0.2) 12px, #000 24px, #000 calc(100% - 24px), rgba(0,0,0,0.2) calc(100% - 12px), transparent 100% );}
+.n1ibjf0n{padding-inline:calc(var(--timvir-page-margin) - 8px);}@media (min-width:48rem){.n1ibjf0n{padding-inline:var(--timvir-page-margin);}}
+.da95449{font-family:system-ui;}
+.d1au8wkb{color:var(--timvir-text-color);font-size:0.8125rem;line-height:2.2;font-weight:400;cursor:pointer;min-height:36px;border-radius:8px;padding:0 12px;border:1px solid var(--timvir-border-color);background:var(--timvir-secondary-background-color);display:flex;align-items:center;}.d1au8wkb:hover{background:var(--timvir-sidebar-highlight-color);}.d1au8wkb > svg{display:block;margin-right:8px;width:0.75rem;height:0.75rem;}
+
+.rfhjyp1{min-height:100vh;--timvir-page-margin:16px;display:grid;grid-template-areas:"navigation" "content";}@media (min-width:48rem){.rfhjyp1{--timvir-page-margin:24px;grid-template-areas:"navigation content";grid-template-columns:[l] 300px [m] 1fr [r];}}
+.s1pp8z35{grid-area:navigation;z-index:80;background-color:var(--timvir-background-color);position:sticky;top:0;}@media (min-width:48rem){.s1pp8z35{position:fixed;top:0;bottom:0;left:0;width:300px;border-right:1px solid var(--timvir-border-color);}}
+.dxk1fgw{display:flex;flex-direction:column;grid-area:content;}
 .d2srpki{margin-top:auto;}
 .d1hkiw6l{margin-top:auto;padding-top:80px;}