timvir 0.2.44 → 0.2.45

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # timvir
 
+## 0.2.45
+
+### Patch Changes
+
+- **Use data attributes instead of CSS classes to identify block elements** ([#3511](https://github.com/timvir/timvir/pull/3511)) - Previously we've added well-known class names to certain blocks. This was used to allow external tools to more easily identify blocks on a rendered page. The custom CSS classes have been replaced by data attributes. If you used class selectors to identify blocks, you'll need to replace them with data attribute selectors. For example, instead of `.timvir-b-Exhibit` use `[data-timvir-b-exhibit]`. Note: data attributes are lowercase.
+
 ## 0.2.44
 
 ### Patch Changes

package/blocks/Arbitrary/index.js

@@ -264,16 +264,14 @@ function Arbitrary(props$1, ref) {
     }
   }, [props$1.id, block.bus, value.seed]);
   const rootStyleProps = props(layoutStyles.block, styles.root);
-  const inputStyleProps = {
-    className: "timvir-s-c342km timvir-s-1a2a7pz timvir-s-ln7xf2 timvir-s-jbqb8w timvir-s-kh2ocl timvir-s-1717udv timvir-s-h8yej3 timvir-s-1heor9g"
-  };
   return /*#__PURE__*/jsx(Context.Provider, {
     value: value,
     children: /*#__PURE__*/jsxs(Root, {
       ref: ref,
+      "data-timvir-b-arbitrary": true,
       ...rest,
       ...rootStyleProps,
-      className: cx("timvir-b-Arbitrary", rootStyleProps.className, className),
+      className: cx(rootStyleProps.className, className),
       style: {
         margin: "1em 0",
         ...rootStyleProps.style,
@@ -287,11 +285,8 @@ function Arbitrary(props$1, ref) {
             className: "timvir-s-1rg5ohu timvir-s-vgvpxu timvir-s-15ku74s",
             children: "Seed:"
           }), /*#__PURE__*/jsx("input", {
-            ...inputStyleProps,
-            className: cx("timvir-b-Arbitrary-seed", inputStyleProps.className),
-            style: {
-              ...inputStyleProps.style
-            },
+            "data-timvir-b-arbitrary-seed": true,
+            className: "timvir-s-c342km timvir-s-1a2a7pz timvir-s-ln7xf2 timvir-s-jbqb8w timvir-s-kh2ocl timvir-s-1717udv timvir-s-h8yej3 timvir-s-1heor9g",
             placeholder: "Seed",
             value: encode(new TextEncoder().encode(`${value.seed}`)),
             readOnly: true,
@@ -325,7 +320,7 @@ function Arbitrary(props$1, ref) {
     })
   });
 }
-var Arbitrary$1 = /*#__PURE__*/React.forwardRef(Arbitrary);
+var Arbitrary_default = /*#__PURE__*/React.forwardRef(Arbitrary);
 const styles = {
   root: {
     kogj98: "timvir-s-9t3ola",
@@ -333,4 +328,4 @@ const styles = {
   }
 };
 
-export { Arbitrary$1 as Arbitrary, useContext };
+export { Arbitrary_default as Arbitrary, useContext };

package/blocks/Code/index.js

@@ -229,34 +229,29 @@ function Code(props$1, ref) {
     })();
   }, [children, language, highlightedLines]);
   const rootStyleProps = props(layoutStyles.block);
-  const codeStyleProps = {
-    className: "timvir-s-w2csxc timvir-s-6wvzqs timvir-s-sfzzmd timvir-s-1sxf85j timvir-s-15o1dgp timvir-s-idmeni timvir-s-1717udv timvir-s-1etwjqo timvir-s-mkeg23 timvir-s-1y0btm7 timvir-s-j7gikm timvir-s-1d0dlzq"
-  };
-  const captionStyleProps = {
-    className: "timvir-s-1dcheo9 timvir-s-jkpybl timvir-s-vgvpxu timvir-s-lwy1ot"
-  };
   return /*#__PURE__*/jsxs(Root, {
     ref: ref,
+    "data-timvir-b-code": true,
     ...rest,
     ...rootStyleProps,
-    className: cx("timvir-b-Code", !state.settled && "timvir-unsettled", className, rootStyleProps.className),
+    className: cx(!state.settled && "timvir-unsettled", className, rootStyleProps.className),
     style: {
       ...rootStyleProps.style,
       ...rest.style
     },
     children: [/*#__PURE__*/jsx("div", {
-      ...codeStyleProps,
-      className: cx("timvir-b-Code-container", codeStyleProps.className),
+      "data-timvir-b-code-container": true,
+      className: "timvir-s-w2csxc timvir-s-6wvzqs timvir-s-sfzzmd timvir-s-1sxf85j timvir-s-i27niw timvir-s-idmeni timvir-s-1717udv timvir-s-1etwjqo timvir-s-mkeg23 timvir-s-1y0btm7 timvir-s-j7gikm timvir-s-1d0dlzq",
       dangerouslySetInnerHTML: {
         __html: state.html
       }
     }), caption && /*#__PURE__*/jsx("div", {
-      ...captionStyleProps,
-      className: cx("timvir-b-Code-caption", captionStyleProps.className),
+      "data-timvir-b-code-caption": true,
+      className: "timvir-s-1dcheo9 timvir-s-jkpybl timvir-s-vgvpxu timvir-s-lwy1ot",
       children: caption
     })]
   });
 }
-var Code$1 = /*#__PURE__*/React.forwardRef(Code);
+var Code_default = /*#__PURE__*/React.forwardRef(Code);
 
-export { Code$1 as Code };
+export { Code_default as Code };

package/blocks/Code/styles.css

@@ -1,6 +1,6 @@
 @layer priority1 {
-  .timvir-s-15o1dgp {
-    --timvir-b-Code-bleed: calc(var(--timvir-margin, 0) * .6666);
+  .timvir-s-i27niw {
+    --timvir-b-Code-bleed: calc(var(--timvir-margin, 0px) * .6666);
   }
 
   .timvir-s-idmeni {

package/blocks/ColorBar/docs/index.mdx

@@ -5,130 +5,45 @@ import { Code, Exhibit } from "timvir/blocks";
 
 A `ColorBar` is a horizontal arrangement of swatches.
 
-<Exhibit>
-  <ColorBar
-    values={[
-      "#D6CCFF",
-      "#C8BCF5",
-      "#BAACEB",
-      "#AC9CE1",
-      "#9E8CD7",
-      "#907DCD",
-      "#826EC3",
-      "#745FBA",
-      "#6550B0",
-      "#5642A6",
-    ]}
-    style={{ margin: 0 }}
-  />
-</Exhibit>
+<Sample variant="basic" />
 
-<Exhibit>
-  <ColorBar values={["#a0dbc2", "#60c19f", "#1a896b", "#0e6d54"]} style={{ margin: 0 }} />
-</Exhibit>
+Pass the colors as an array of CSS color values.
 
-<Code language="jsx" caption="Pass an array of color values to the component." highlightedLines={[4]}>
+<Code language="jsx" highlightedLines={[4]}>
   <Sample variant="basic" as="source" />
 </Code>
 
-The ColorBar works comfortably with as few as two colors and as many as 20
-
-<Exhibit caption="Two colors in a ColorBar">
-  <ColorBar
-    values={[
-      { value: "#FFE4A0", name: "Yellow Submarine", ancestry: "Yellow 001" },
-      { value: "#A67908", name: "Yellow Spaceship", ancestry: "Yellow 999", contrastValue: "white" },
-    ]}
-    style={{ margin: 0 }}
-  />
-</Exhibit>
-
-<Exhibit caption="20 colors in a ColorBar">
-  <ColorBar
-    values={[
-      "#FFE4A0",
-      "#FBDE98",
-      "#F6D891",
-      "#F2D28A",
-      "#EDCC82",
-      "#E8C77B",
-      "#E4C173",
-      "#DFBB6C",
-      "#DBB565",
-      "#D6B05D",
-      "#D1AA56",
-      "#CDA54F",
-      "#C89F47",
-      "#C39940",
-      "#BE9438",
-      "#BA8E30",
-      "#B58928",
-      "#B0841F",
-      "#AB7E15",
-      "#A67908",
-    ]}
-    style={{ margin: 0 }}
-  />
-</Exhibit>
-
-## Text Colors
-
-These are the main text colors that are used in our website. We have a **textPrimary** color for
-headings and body text, **textSecondary** for captions and meta lines, and a third (yet unamed)
-text color for card descriptions.
-
-All text colors are taken from the **Gray** palette.
-
-<Exhibit caption="Text Colors" style={{ margin: "10px 0 20px 0" }}>
-  <ColorBar
-    values={[
-      { value: "rgba(0, 0, 13, 0.89)", name: "textPrimary", ancestry: "Gray 01", contrastValue: "white" },
-      { value: "rgba(0, 0, 13, 0.69)", name: "???? (unnamed)", ancestry: "Gray 03", contrastValue: "white" },
-      { value: "rgba(0, 0, 13, 0.49)", name: "textSecondary", ancestry: "Gray 05" },
-    ]}
-    style={{ margin: 0 }}
-  />
-</Exhibit>
-<Exhibit caption="Gray Color Palette (00 – 09)" style={{ margin: "-12px 0 20px 0" }}>
-  <ColorBar
-    values={[
-      { value: "rgba(0, 0, 13, 0.99)", name: "Gray 00", contrastValue: "white" },
-      { value: "rgba(0, 0, 13, 0.89)", name: "Gray 01", contrastValue: "white" },
-      { value: "rgba(0, 0, 13, 0.79)", name: "Gray 02", contrastValue: "white" },
-      { value: "rgba(0, 0, 13, 0.69)", name: "Gray 03", contrastValue: "white" },
-      { value: "rgba(0, 0, 13, 0.59)", name: "Gray 04", contrastValue: "white" },
-      { value: "rgba(0, 0, 13, 0.49)", name: "Gray 05", contrastValue: "black" },
-      { value: "rgba(0, 0, 13, 0.39)", name: "Gray 06", contrastValue: "black" },
-      { value: "rgba(0, 0, 13, 0.29)", name: "Gray 07", contrastValue: "black" },
-      { value: "rgba(0, 0, 13, 0.19)", name: "Gray 08", contrastValue: "black" },
-      { value: "rgba(0, 0, 13, 0.09)", name: "Gray 09", contrastValue: "black" },
-    ]}
-    style={{ margin: 0 }}
-  />
-</Exhibit>
-
-Wrap a `<ColorBar>` in a `<Exhibit>` to add a caption to it. The caption can even include links!
-
-<Exhibit
-  caption={
-    <>
-      Source: <a href="https://hihayk.github.io/scale/#2/7/50/90/0/0/0/-0/1190D7/17/144/215">hihayk.github.io/scale</a>
-    </>
-  }
->
-  <ColorBar
-    values={[
-      "#E7F4FB",
-      "#C9E6F6",
-      "#AAD7F1",
-      "#8BC9EC",
-      "#6DBBE6",
-      "#4EADE1",
-      "#309EDC",
-      "#1190D7",
-      "#0D6CA1",
-      "#09486C",
-    ]}
-    style={{ margin: 0 }}
-  />
-</Exhibit>
+The ColorBar works comfortably with as few as two colors and as many as 20.
+If you specify more colors than that, each individual swatch becomes tiny, especially on smaller viewports.
+
+<ColorBar
+  values={[
+    { value: "#FFE4A0", name: "Yellow Submarine", ancestry: "Yellow 001" },
+    { value: "#A67908", name: "Yellow Spaceship", ancestry: "Yellow 999", contrastValue: "white" },
+  ]}
+/>
+
+<ColorBar
+  values={[
+    "#FFE4A0",
+    "#FBDE98",
+    "#F6D891",
+    "#F2D28A",
+    "#EDCC82",
+    "#E8C77B",
+    "#E4C173",
+    "#DFBB6C",
+    "#DBB565",
+    "#D6B05D",
+    "#D1AA56",
+    "#CDA54F",
+    "#C89F47",
+    "#C39940",
+    "#BE9438",
+    "#BA8E30",
+    "#B58928",
+    "#B0841F",
+    "#AB7E15",
+    "#A67908",
+  ]}
+/>

package/blocks/ColorBar/index.js

@@ -227,7 +227,7 @@ function ColorBar(props$1, ref) {
     })]
   });
 }
-var ColorBar$1 = /*#__PURE__*/React.forwardRef(ColorBar);
+var ColorBar_default = /*#__PURE__*/React.forwardRef(ColorBar);
 const styles = {
   root: {
     kVAEAm: "timvir-s-1n2onr6",
@@ -250,4 +250,4 @@ const styles = {
   }
 };
 
-export { ColorBar$1 as ColorBar };
+export { ColorBar_default as ColorBar };

package/blocks/ColorBook/index.js

@@ -213,7 +213,7 @@ function ColorBook(props$1, ref) {
     }, i))
   });
 }
-var ColorBook$1 = /*#__PURE__*/React.forwardRef(ColorBook);
+var ColorBook_default = /*#__PURE__*/React.forwardRef(ColorBook);
 const styles = {
   root: {
     k1xSpc: "timvir-s-rvj5dj",
@@ -243,4 +243,4 @@ const styles = {
   }
 };
 
-export { ColorBook$1 as ColorBook };
+export { ColorBook_default as ColorBook };

package/blocks/Cover/index.js

@@ -201,6 +201,6 @@ function Cover(props$1, ref) {
     })
   });
 }
-var Cover$1 = /*#__PURE__*/React.forwardRef(Cover);
+var Cover_default = /*#__PURE__*/React.forwardRef(Cover);
 
-export { Cover$1 as Cover };
+export { Cover_default as Cover };

package/blocks/Exhibit/index.js

@@ -194,14 +194,12 @@ function Exhibit(props$1, ref) {
       className: "timvir-s-ufnvkl timvir-s-7zdco timvir-s-1sxf85j timvir-s-mkeg23 timvir-s-1tffoc1 timvir-s-ng3xce timvir-s-rxpjvj timvir-s-1717udv"
     }
   }[!!(bleed === 0) << 0];
-  const captionStyleProps = {
-    className: "timvir-s-1dcheo9 timvir-s-jkpybl timvir-s-vgvpxu timvir-s-lwy1ot"
-  };
   return /*#__PURE__*/jsxs(Root, {
     ref: ref,
+    "data-timvir-b-exhibit": true,
     ...rest,
     ...rootStyleProps,
-    className: cx("timvir-b-Exhibit", className, rootStyleProps.className),
+    className: cx(className, rootStyleProps.className),
     style: {
       ...rootStyleProps.style,
       ...style,
@@ -210,9 +208,10 @@ function Exhibit(props$1, ref) {
       [cssVariables.background]: "var(--timvir-background-pattern)"
     },
     children: [/*#__PURE__*/jsx("div", {
+      "data-timvir-b-exhibit-container": true,
       ...BackdropProps,
       ...containerStyleProps,
-      className: cx("timvir-b-Exhibit-container", containerStyleProps.className, BackdropProps?.className),
+      className: cx(containerStyleProps.className, BackdropProps?.className),
       style: {
         ...containerStyleProps.style,
         border: bleed === 0 ? "none" : `1px solid var(${cssVariables.borderColor})`,
@@ -220,13 +219,13 @@ function Exhibit(props$1, ref) {
       },
       children: children
     }), caption && /*#__PURE__*/jsx("div", {
-      ...captionStyleProps,
-      className: cx("timvir-b-Exhibit-caption", captionStyleProps.className),
+      "data-timvir-b-exhibit-caption": true,
+      className: "timvir-s-1dcheo9 timvir-s-jkpybl timvir-s-vgvpxu timvir-s-lwy1ot",
       children: caption
     })]
   });
 }
-var Exhibit$1 = /*#__PURE__*/React.forwardRef(Exhibit);
+var Exhibit_default = /*#__PURE__*/React.forwardRef(Exhibit);
 const cssVariables = {
   bleed: "--timvir-b-Exhibit-bleed",
   borderColor: "--timvir-b-Exhibit-borderColor",
@@ -238,4 +237,4 @@ const styles = {
   }
 };
 
-export { Exhibit$1 as Exhibit };
+export { Exhibit_default as Exhibit };

package/blocks/Font/index.js

@@ -300,6 +300,6 @@ function Font(props$1, ref) {
     })]
   });
 }
-var Font$1 = /*#__PURE__*/React.forwardRef(Font);
+var Font_default = /*#__PURE__*/React.forwardRef(Font);
 
-export { Font$1 as Font };
+export { Font_default as Font };

package/blocks/Grid/index.js

@@ -188,10 +188,26 @@ function Grid(props$1, ref) {
       ...rest.style
     },
     className: cx(className, rootStyleProps.className),
-    children: children
+    children: React.Children.map(children, child => {
+      if (! /*#__PURE__*/React.isValidElement(child)) {
+        return child;
+      }
+      const {
+        style,
+        ...props
+      } = child.props;
+      return /*#__PURE__*/React.createElement(child.type, {
+        ...props,
+        style: {
+          margin: 0,
+          gridColumn: "initial",
+          ...style
+        }
+      });
+    })
   });
 }
-var Grid$1 = /*#__PURE__*/React.forwardRef(Grid);
+var Grid_default = /*#__PURE__*/React.forwardRef(Grid);
 const styles = {
   root: {
     k1xSpc: "timvir-s-rvj5dj",
@@ -202,4 +218,4 @@ const styles = {
   }
 };
 
-export { Grid$1 as Grid };
+export { Grid_default as Grid };

package/blocks/Icon/index.js

@@ -136,6 +136,6 @@ function Icon(props, ref) {
     })
   });
 }
-var Icon$1 = /*#__PURE__*/React.forwardRef(Icon);
+var Icon_default = /*#__PURE__*/React.forwardRef(Icon);
 
-export { Icon$1 as Icon };
+export { Icon_default as Icon };

package/blocks/Message/docs/index.mdx

@@ -1,48 +1,57 @@
-import { Exhibit } from "../../Exhibit";
-import { Grid } from "../../Grid";
 import { Swatch } from "../../Swatch";
 import { Code } from "../../Code";
 
 # Message
 
-<Exhibit>
-  <Sample variant="basic" />
-</Exhibit>
+The `<Message>` component is a simple container for messages.
 
-<Code language="jsx">
-  <Sample variant="basic" as="source" />
-</Code>
+<Sample variant="basic" />
 
 ## Variants
 
-<Grid>
-  <Exhibit caption="info" style={{ margin: 0, gridColumn: "initial" }}>
-    <Sample variant="basic" props={{ variant: "info" }} />
-  </Exhibit>
-  <Exhibit caption="warning" style={{ margin: 0, gridColumn: "initial" }}>
-    <Sample variant="basic" props={{ variant: "warning" }} />
-  </Exhibit>
-  <Exhibit caption="alert" style={{ margin: 0, gridColumn: "initial" }}>
-    <Sample variant="basic" props={{ variant: "alert" }} />
-  </Exhibit>
-</Grid>
+The Message block comes in four variants: **plain**, **info**, **warning**, and **alert**.
+Each variant uses a different color and icon.
+Below are examples in which situations to use the variants.
 
-## Content
+<Sample variant="basic">
+This is the **plain** variant. Use it for simple notes, neutral remarks, or secondary information that doesn’t require emphasis.
+
+_Example:_ This component is defined in src/components/Message.tsx.
+
+</Sample>
+
+<Sample variant="basic" props={{ variant: "info" }}>
+This is the **info** variant. Use it to share helpful or contextual information about the code or component.
+
+_Example:_ This hook is useful for managing form state.
+
+</Sample>
 
-Make the title bold and place it before the message, or use a level 3 heading. You can use arbitrary markdown inside the message.
+<Sample variant="basic" props={{ variant: "warning" }}>
+  This is the **warning** variant. Use it to call attention to potential pitfalls, limitations, or special cases to consider when using the code.
 
-<Grid>
-<Exhibit caption="Inline title" style={{ margin: 0, gridColumn: "initial" }}>
-  <Sample variant="basic">
+_Example:_ This component has not been tested with server-side rendering.
 
-**Short Messages** should place the title in front of the message and make it stand out.
+</Sample>
 
-  </Sample>
-</Exhibit>
+<Sample variant="basic" props={{ variant: "alert" }}>
+This is the **alert** variant. Use it for strict requirements, do-nots, or critical caveats that must be followed when using the code.
 
-<Exhibit caption="Title as a separate block elment" style={{ margin: 0, gridColumn: "initial" }}>
-  <Sample variant="basic">
+_Example:_ You must not use this component inside a React Suspense boundary.
 
+</Sample>
+
+## Content
+
+You can use arbitrary markdown inside the message, or even blocks.
+Note that not all combinations have been exhaustively tested.
+If you come across markup that doesn't render well, please raise an issue in the Timvir project.
+
+<Sample variant="basic">
+  **Short Messages** should place the title in front of the message and make it stand out.
+</Sample>
+
+<Sample variant="basic">
 ### Longer Messages
 
 Longer messages should make the title a separate block element. This body uses [links](#) and _italic_ text.
@@ -50,10 +59,7 @@ Longer messages should make the title a separate block element. This body uses [
 And multiple paragraphs. And even a component:
 
 <Swatch value="#FF00FF" />
-
-  </Sample>
-</Exhibit>
-</Grid>
+</Sample>
 
 ## References
 

package/blocks/Message/index.js

@@ -234,6 +234,7 @@ function Message(props$1, ref) {
         className: "timvir-s-3psx0u timvir-s-1lliihq timvir-s-1n2onr6 timvir-s-xk6nc9 timvir-s-jvto2c timvir-s-dpf0h8 timvir-s-ozkzq6 timvir-s-1mz1spe"
       })
     }[variant], /*#__PURE__*/jsx("div", {
+      className: "timvir-s-1iyjqo2 timvir-s-euugli",
       children: React.Children.toArray(children).map((child, index, array) => {
         if (/*#__PURE__*/React.isValidElement(child)) {
           const style = {
@@ -256,7 +257,7 @@ function Message(props$1, ref) {
     })]
   });
 }
-var Message$1 = /*#__PURE__*/React.forwardRef(Message);
+var Message_default = /*#__PURE__*/React.forwardRef(Message);
 const styles = {
   root: {
     kVAEAm: "timvir-s-1n2onr6",
@@ -307,7 +308,12 @@ const styles = {
   iconAlert: {
     kMwMTN: "timvir-s-1mz1spe",
     $$css: true
+  },
+  content: {
+    kzQI83: "timvir-s-1iyjqo2",
+    k7Eaqz: "timvir-s-euugli",
+    $$css: true
   }
 };
 
-export { Message$1 as Message };
+export { Message_default as Message };

package/blocks/Message/styles.css

@@ -103,6 +103,10 @@
     display: grid;
   }
 
+  .timvir-s-1iyjqo2 {
+    flex-grow: 1;
+  }
+
   .timvir-s-kpwil5 {
     font-size: .875rem;
   }

package/blocks/Swatch/docs/index.mdx

@@ -4,36 +4,38 @@ import { Grid } from "../../Grid";
 
 # Swatch
 
-<Exhibit caption="Plain color" style={{ marginBottom: 24 }}>
-  <Swatch value="#FF00FF" style={{ margin: 0 }} />
-</Exhibit>
+A `<Swatch>` is a colored block element.
+It highlights a particular color, and provides additional information to it.
 
-<Exhibit caption="Give the color a meaningful name" style={{ marginBottom: 24 }}>
-  <Swatch value="#FF00FF" name="Primary" style={{ margin: 0 }} />
-</Exhibit>
+<Swatch value="#FF00FF" />
 
-<Exhibit caption="Add a note about its ancenstry (how or where from it was derived)" style={{ marginBottom: 24 }}>
-  <Swatch value="#FF00FF" name="Primary" ancestry="Red 700" style={{ margin: 0 }} />
-</Exhibit>
+You can provide a meaningful name along with the color value.
+This helps users to correlate the color to names used outside of this documentation, for example in a design system.
+
+<Swatch value="#FF00FF" name="Primary" />
+
+Use the secondary label to add a secondary explanation or reference.
+
+<Swatch value="#FF00FF" name="Primary" ancestry="Red 700" />
 
 ## In a Grid
 
 <Grid style={{ gridGap: 6 }}>
-  <Swatch value="#0E5A8A" contrastValue="#FFFFFF" name="@blue1" style={{ margin: 0, gridColumn: "initial" }} />
-  <Swatch value="#106BA3" contrastValue="#FFFFFF" name="@blue2" style={{ margin: 0, gridColumn: "initial" }} />
-  <Swatch value="#137CBD" contrastValue="#FFFFFF" name="@blue3" style={{ margin: 0, gridColumn: "initial" }} />
-  <Swatch value="#2B95D6" contrastValue="#000000" name="@blue4" style={{ margin: 0, gridColumn: "initial" }} />
-  <Swatch value="#48AFF0" contrastValue="#000000" name="@blue5" style={{ margin: 0, gridColumn: "initial" }} />
+  <Swatch value="#0E5A8A" contrastValue="#FFFFFF" name="@blue1" />
+  <Swatch value="#106BA3" contrastValue="#FFFFFF" name="@blue2" />
+  <Swatch value="#137CBD" contrastValue="#FFFFFF" name="@blue3" />
+  <Swatch value="#2B95D6" contrastValue="#000000" name="@blue4" />
+  <Swatch value="#48AFF0" contrastValue="#000000" name="@blue5" />
 </Grid>
 
 ## Another example
 
-<div style={{ gridColumn: "lc / rc", display: "grid", gridGap: 6 }}>
-  <Swatch value="#F58221" name="Access" ancestry="Orange 300" style={{ margin: 0, gridColumn: "initial" }} />
-  <Swatch value="#D9418D" name="Use" ancestry="Red 500" style={{ margin: 0, gridColumn: "initial" }} />
-  <Swatch value="#B87AF2" name="Innovation" ancestry="Violett 500" style={{ margin: 0, gridColumn: "initial" }} />
-  <Swatch value="#4188D9" name="Jobs" ancestry="Blue 500" style={{ margin: 0, gridColumn: "initial" }} />
-  <Swatch value="#4AE6CC" name="Society" ancestry="…" style={{ margin: 0, gridColumn: "initial" }} />
-  <Swatch value="#1FD35B" name="Trust" ancestry="Green 400" style={{ margin: 0, gridColumn: "initial" }} />
-  <Swatch value="#C4D534" name="Market Openness" ancestry="…" style={{ margin: 0, gridColumn: "initial" }} />
-</div>
+<Grid style={{ gridGap: 6, gridTemplateColumns: "1fr" }}>
+  <Swatch value="#F58221" name="Access" ancestry="Orange 300" />
+  <Swatch value="#D9418D" name="Use" ancestry="Red 500" />
+  <Swatch value="#B87AF2" name="Innovation" ancestry="Violett 500" />
+  <Swatch value="#4188D9" name="Jobs" ancestry="Blue 500" />
+  <Swatch value="#4AE6CC" name="Society" ancestry="…" />
+  <Swatch value="#1FD35B" name="Trust" ancestry="Green 400" />
+  <Swatch value="#C4D534" name="Market Openness" ancestry="…" />
+</Grid>

package/blocks/Swatch/index.js

@@ -236,7 +236,7 @@ function Swatch(props$1, ref) {
     })
   });
 }
-var Swatch$1 = /*#__PURE__*/React.forwardRef(Swatch);
+var Swatch_default = /*#__PURE__*/React.forwardRef(Swatch);
 const styles = {
   root: {
     kVAEAm: "timvir-s-1n2onr6",
@@ -244,4 +244,4 @@ const styles = {
   }
 };
 
-export { Swatch$1 as Swatch };
+export { Swatch_default as Swatch };

package/blocks/Viewport/index.js

@@ -388,8 +388,9 @@ function Viewport(props$1, ref) {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs(Root, {
       ref: ref,
+      "data-timvir-b-viewport": true,
       ...rest,
-      className: cx("timvir-b-Viewport", !state.settled && "timvir-unsettled", className, rootStyleProps.className),
+      className: cx(!state.settled && "timvir-unsettled", className, rootStyleProps.className),
       style: {
         ...rootStyleProps.style,
         ...rest.style
@@ -496,7 +497,7 @@ function Viewport(props$1, ref) {
     })]
   });
 }
-var Viewport$1 = /*#__PURE__*/React.forwardRef(Viewport);
+var Viewport_default = /*#__PURE__*/React.forwardRef(Viewport);
 const styles = {
   root: {
     ktR8K2: "timvir-s-1vjgj0v",
@@ -505,4 +506,4 @@ const styles = {
   }
 };
 
-export { Viewport$1 as Viewport };
+export { Viewport_default as Viewport };

package/blocks/WebLink/index.js

@@ -200,12 +200,13 @@ function WebLink(props$1, ref) {
   const rootStyleProps = props(layoutStyles.block, styles.root);
   return /*#__PURE__*/jsxs(Root, {
     ref: ref,
+    "data-timvir-b-weblink": true,
     href: url,
     target: "_blank",
     rel: "noopener noreferrer",
     ...rest,
     ...rootStyleProps,
-    className: cx("timvir-b-WebLink", !state.settled && "timvir-unsettled", className, rootStyleProps.className),
+    className: cx(!state.settled && "timvir-unsettled", className, rootStyleProps.className),
     style: {
       ...rootStyleProps.style,
       ...rest.style
@@ -241,7 +242,7 @@ function WebLink(props$1, ref) {
     })]
   });
 }
-var WebLink$1 = /*#__PURE__*/React.forwardRef(WebLink);
+var WebLink_default = /*#__PURE__*/React.forwardRef(WebLink);
 const styles = {
   root: {
     kmkexE: "timvir-s-zhuw26",
@@ -264,4 +265,4 @@ async function defaultUnfurl(url) {
   return fetch(`https://timvir.vercel.app/api/unfurl?url=${encodeURIComponent(url)}`).then(res => res.json());
 }
 
-export { WebLink$1 as WebLink };
+export { WebLink_default as WebLink };

package/blocks/styles.css

@@ -222,8 +222,8 @@
   }
 }
 @layer priority1 {
-  .timvir-s-15o1dgp {
-    --timvir-b-Code-bleed: calc(var(--timvir-margin, 0) * .6666);
+  .timvir-s-i27niw {
+    --timvir-b-Code-bleed: calc(var(--timvir-margin, 0px) * .6666);
   }
 
   .timvir-s-idmeni {
@@ -1420,6 +1420,10 @@
     display: grid;
   }
 
+  .timvir-s-1iyjqo2 {
+    flex-grow: 1;
+  }
+
   .timvir-s-kpwil5 {
     font-size: .875rem;
   }

package/core/components/Commands/internal/Action.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 declare const Root = "div";
-interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+interface Props extends Omit<React.ComponentPropsWithoutRef<typeof Root>, "className" | "style"> {
     label?: React.ReactNode;
 }
 declare function Action(props: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -5,7 +5,7 @@ import { Node } from "./types";
  * The underlying DOM element which is rendered by this component.
  */
 declare const Root = "div";
-interface Props extends React.ComponentProps<typeof Root> {
+interface Props extends Omit<React.ComponentProps<typeof Root>, "className" | "style"> {
     toc: readonly Node[];
     location: {
         asPath: string;

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

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

package/core/index.js

@@ -56,18 +56,7 @@ function Footer(props, ref) {
     })]
   });
 }
-var Footer$1 = /*#__PURE__*/React.forwardRef(Footer);
-
-function cx(...args) {
-  let str = "";
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    if (typeof arg === "string") {
-      str += (str && " ") + arg;
-    }
-  }
-  return str;
-}
+var Footer_default = /*#__PURE__*/React.forwardRef(Footer);
 
 var styleq = {};
 var hasRequiredStyleq;
@@ -258,17 +247,9 @@ function Action(props) {
     label,
     ...rest
   } = props;
-  const rootStyleProps = {
-    className: "timvir-s-jbqb8w timvir-s-vc674v timvir-s-uxw1ft timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-17zmd2n timvir-s-wvwv9b timvir-s-1q0g3np timvir-s-1iyjqo2 timvir-s-s83m0k timvir-s-dl72j9 timvir-s-b3r6kr timvir-s-qin4a2 timvir-s-cym7qx timvir-s-t0e3qv timvir-s-1d6mti2"
-  };
   return /*#__PURE__*/jsxs(Root$2, {
     ...rest,
-    ...rootStyleProps,
-    className: cx(rest.className, rootStyleProps.className),
-    style: {
-      ...rootStyleProps.style,
-      ...rest.style
-    },
+    className: "timvir-s-jbqb8w timvir-s-vc674v timvir-s-uxw1ft timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-17zmd2n timvir-s-wvwv9b timvir-s-1q0g3np timvir-s-1iyjqo2 timvir-s-s83m0k timvir-s-dl72j9 timvir-s-b3r6kr timvir-s-qin4a2 timvir-s-cym7qx timvir-s-t0e3qv timvir-s-1d6mti2",
     children: [/*#__PURE__*/jsx("div", {
       className: "timvir-s-1wsuqlk timvir-s-1kky2od",
       children: /*#__PURE__*/jsxs("svg", {
@@ -681,7 +662,7 @@ function Section(props) {
   });
 }
 
-function Sidebar(props) {
+function Sidebar(props$1) {
   const {
     location
   } = useContext();
@@ -703,7 +684,7 @@ function Sidebar(props) {
     toc,
     search,
     ...rest
-  } = props;
+  } = props$1;
   const node = function find(nodes) {
     for (const node of nodes) {
       if (location.asPath.replace(/#.*$/, "") === node.path) {
@@ -717,13 +698,9 @@ function Sidebar(props) {
       }
     }
   }(toc);
-  const rootStyleProps = {
-    className: "timvir-s-78zum5 timvir-s-dt5ytf timvir-s-1fsrbvp"
-  };
   return /*#__PURE__*/jsxs("nav", {
     ...rest,
-    ...rootStyleProps,
-    className: cx(rest.className, rootStyleProps.className),
+    ...props(props$1.sx, styles$1.root),
     children: [/*#__PURE__*/jsxs("header", {
       className: "timvir-s-7uxsod timvir-s-1pizb70 timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-1d813ht timvir-s-1m2nq6k timvir-s-1vptubt",
       children: [/*#__PURE__*/jsxs("div", {
@@ -782,6 +759,14 @@ function Sidebar(props) {
     })]
   });
 }
+const styles$1 = {
+  root: {
+    k1xSpc: "timvir-s-78zum5",
+    kXwgrk: "timvir-s-dt5ytf",
+    kHSMxh: "timvir-s-1fsrbvp",
+    $$css: true
+  }
+};
 function Search(props) {
   const {
     open,
@@ -871,22 +856,14 @@ function Page(props$1, ref) {
   }, {
     enableOnFormTags: true
   });
-  const rootStyleProps = {
-    className: "timvir-s-g6iff7 timvir-s-1hz7z82 timvir-s-rvj5dj timvir-s-c0s83b timvir-s-1i3za4p timvir-s-oxwh6b timvir-s-1w3eerp"
-  };
   return /*#__PURE__*/jsxs(Provider, {
     value: context,
     children: [/*#__PURE__*/jsxs(Root, {
       ref: ref,
       ...rest,
-      ...rootStyleProps,
-      className: cx(rest.className, rootStyleProps.className),
-      style: {
-        ...rest.style,
-        ...rootStyleProps.style
-      },
+      className: "timvir-s-g6iff7 timvir-s-1hz7z82 timvir-s-rvj5dj timvir-s-c0s83b timvir-s-1i3za4p timvir-s-oxwh6b timvir-s-1w3eerp",
       children: [/*#__PURE__*/jsx(Sidebar, {
-        className: "timvir-s-1nkj2r4 timvir-s-13tdkmf timvir-s-1b7vwdu timvir-s-7wzq59 timvir-s-13vifvy timvir-s-1b3g1kt timvir-s-1uk07ai timvir-s-bvzrs5 timvir-s-1i1dbpq timvir-s-zfhgub timvir-s-3f8au3",
+        sx: styles.sidebar,
         toc: toc,
         search: search && {
           open: () => {
@@ -960,8 +937,22 @@ function Page(props$1, ref) {
     })]
   });
 }
-var Page$1 = /*#__PURE__*/React.forwardRef(Page);
+var Page_default = /*#__PURE__*/React.forwardRef(Page);
 const styles = {
+  sidebar: {
+    kJuA4N: "timvir-s-1nkj2r4",
+    kY2c9j: "timvir-s-13tdkmf",
+    kWkggS: "timvir-s-1b7vwdu",
+    kVAEAm: "timvir-s-7wzq59",
+    k87sOh: "timvir-s-13vifvy",
+    kZ9C5d: "timvir-s-1b3g1kt",
+    kYjXgR: "timvir-s-1uk07ai",
+    kY6lvZ: "timvir-s-bvzrs5",
+    kTTLU8: "timvir-s-1i1dbpq",
+    kMbnel: "timvir-s-zfhgub",
+    kg8xMQ: "timvir-s-3f8au3",
+    $$css: true
+  },
   content: {
     kTgw9: "timvir-s-13faqbe",
     $$css: true
@@ -1037,4 +1028,4 @@ function useArticleComponents() {
   };
 }
 
-export { Footer$1 as Footer, Page$1 as Page, extendedWidth, fullWidth, grid, layoutStyles, noLayout, useArticleComponents, useBlock, useMailbox };
+export { Footer_default as Footer, Page_default as Page, extendedWidth, fullWidth, grid, layoutStyles, noLayout, useArticleComponents, useBlock, useMailbox };

package/global.css

@@ -45,14 +45,14 @@
  * Temporary kludge to enable light/dark support in Code blocks. To be
  * removed once theming is implemented properly.
  */
-.timvir-b-Code .shiki span {
+[data-timvir-b-Code] .shiki span {
   color: var(--timvir-b-Code-shiki-light);
   font-style: var(--timvir-b-Code-shiki-light-font-style);
   font-weight: var(--timvir-b-Code-shiki-light-font-weight);
   text-decoration: var(--timvir-b-Code-shiki-light-text-decoration);
 }
 
-:root[data-timvir-theme="dark"] .timvir-b-Code .shiki span {
+:root[data-timvir-theme="dark"] [data-timvir-b-Code] .shiki span {
   color: var(--timvir-b-Code-shiki-dark);
   font-style: var(--timvir-b-Code-shiki-dark-font-style);
   font-weight: var(--timvir-b-Code-shiki-dark-font-weight);

package/hooks/useResizeObserver/index.d.ts

@@ -33,24 +33,3 @@ export declare function useResizeObserverEntries<T extends Element>(): readonly
  * > <div ref={ref}>{entry?.contentRect.width}</div>
  */
 export declare function useResizeObserverEntry<T extends Element>(): readonly [(el: T | null) => void, ResizeObserverEntry | undefined];
-interface ResizeObserver {
-    observe(target: Element): void;
-    unobserve(target: Element): void;
-    disconnect(): void;
-}
-interface ResizeObserverSize {
-    inlineSize: number;
-    blockSize: number;
-}
-interface ResizeObserverEntry {
-    readonly target: Element;
-    readonly contentRect: DOMRectReadOnly;
-    readonly borderBoxSize: ResizeObserverSize;
-    readonly contentBoxSize: ResizeObserverSize;
-}
-type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;
-declare const ResizeObserver: {
-    prototype: ResizeObserver;
-    new (callback: ResizeObserverCallback): ResizeObserver;
-};
-export {};

package/package.json

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

package/search/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 function Search(_props, _ref) {
   return null;
 }
-var Search$1 = /*#__PURE__*/React.forwardRef(Search);
+var Search_default = /*#__PURE__*/React.forwardRef(Search);
 function defaultSearch(toc) {
   return {
     q: async query => {
@@ -41,4 +41,4 @@ function flatten(n) {
   return ret;
 }
 
-export { Search$1 as Search, defaultSearch };
+export { Search_default as Search, defaultSearch };

package/styles.css

@@ -45,14 +45,14 @@
  * Temporary kludge to enable light/dark support in Code blocks. To be
  * removed once theming is implemented properly.
  */
-.timvir-b-Code .shiki span {
+[data-timvir-b-Code] .shiki span {
   color: var(--timvir-b-Code-shiki-light);
   font-style: var(--timvir-b-Code-shiki-light-font-style);
   font-weight: var(--timvir-b-Code-shiki-light-font-weight);
   text-decoration: var(--timvir-b-Code-shiki-light-text-decoration);
 }
 
-:root[data-timvir-theme="dark"] .timvir-b-Code .shiki span {
+:root[data-timvir-theme="dark"] [data-timvir-b-Code] .shiki span {
   color: var(--timvir-b-Code-shiki-dark);
   font-style: var(--timvir-b-Code-shiki-dark-font-style);
   font-weight: var(--timvir-b-Code-shiki-dark-font-weight);
@@ -1491,8 +1491,8 @@ body {
   }
 }
 @layer priority1 {
-  .timvir-s-15o1dgp {
-    --timvir-b-Code-bleed: calc(var(--timvir-margin, 0) * .6666);
+  .timvir-s-i27niw {
+    --timvir-b-Code-bleed: calc(var(--timvir-margin, 0px) * .6666);
   }
 
   .timvir-s-idmeni {
@@ -2689,6 +2689,10 @@ body {
     display: grid;
   }
 
+  .timvir-s-1iyjqo2 {
+    flex-grow: 1;
+  }
+
   .timvir-s-kpwil5 {
     font-size: .875rem;
   }