timvir 0.2.51 → 0.2.53

package/blocks/Icon/styles.css

@@ -88,6 +88,7 @@
   }
 
   .timvir-s-87ps6o {
+    -webkit-user-select: none;
     user-select: none;
   }
 

package/blocks/Message/docs/index.mdx

@@ -3,7 +3,7 @@ import { Code } from "../../Code";
 
 # Message
 
-The `<Message>` component is a simple container for messages.
+> A simple container for displaying messages with optional intent and icon.
 
 <Sample variant="basic" />
 

package/blocks/Message/styles.css

@@ -127,8 +127,8 @@
     grid-auto-rows: min-content;
   }
 
-  .timvir-s-12c0rpe {
-    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  .timvir-s-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-1evy7pa {
@@ -140,14 +140,14 @@
   }
 
   @media (width >= 72rem) {
-    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
-      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];
+    .timvir-s-5diife.timvir-s-5diife {
+      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];
     }
   }
 
   @media (width >= 48rem) {
-    .timvir-s-9q0i6z.timvir-s-9q0i6z {
-      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/Swatch/docs/index.mdx

@@ -4,8 +4,7 @@ import { Grid } from "../../Grid";
 
 # Swatch
 
-A `<Swatch>` is a colored block element.
-It highlights a particular color, and provides additional information to it.
+> A colored block element that highlights a particular color with additional information.
 
 <Swatch value="#FF00FF" />
 

package/blocks/Swatch/styles.css

@@ -75,8 +75,8 @@
     grid-auto-rows: min-content;
   }
 
-  .timvir-s-12c0rpe {
-    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  .timvir-s-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-l56j7k {
@@ -104,14 +104,14 @@
   }
 
   @media (width >= 72rem) {
-    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
-      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];
+    .timvir-s-5diife.timvir-s-5diife {
+      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];
     }
   }
 
   @media (width >= 48rem) {
-    .timvir-s-9q0i6z.timvir-s-9q0i6z {
-      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/Viewport/docs/index.mdx

@@ -2,13 +2,12 @@ import { Viewport } from "..";
 
 # Viewport
 
-The `<Viewport>` component is a full-width component which is a lightly interactive wrapper around an `<iframe>`.
-The viewport can be resized to simulate different device widths. The height of the iframe will automatically adjust
-to the iframe content.
+> A resizable iframe wrapper for previewing content at different device widths.
 
-The component does not provide the full functionality of the browsers responsive device mode simulation. In particular,
-it can't simulate network / CPU throttling, nor can it change the user agent. It's purpose is to provide a simple
-interface to test your components at different viewport widths.
+<Viewport src="/docs/components/Grid/samples/basic" />
+
+The height of the iframe automatically adjusts to fit the content.
+Note that it does not replicate the browser's full responsive device mode: network and CPU throttling, as well as user agent changes, are not supported.
 
 Since `<Viewport>` uses an `<iframe>`, you must provide a page which can be loaded into it. If you used the timvir
 cli to scaffold your component, you already have one such sample (in `src/components/…/samples/basic.tsx`). Make that
@@ -16,8 +15,6 @@ sample available via a Next.js page and load it into the `<Viewport>`.
 
 See also [Concepts: Component Sample](/concepts/component-sample).
 
-<Viewport src="/docs/components/Grid/samples/basic" />
-
 ## Loading Behaviour
 
 The `<Viewport>` displays a gray, animated background while the iframe is loading.

package/blocks/Viewport/index.js

@@ -210,6 +210,7 @@ function Caption(props$1) {
         children: ["Source:", " ", /*#__PURE__*/jsx(components.a, {
           href: src,
           target: "_blank",
+          rel: "noopener",
           children: src
         })]
       }), code && /*#__PURE__*/jsx("div", {
@@ -419,7 +420,7 @@ function Viewport(props$1) {
                   className: "timvir-s-wonfvy timvir-s-w75i6v timvir-s-1n2onr6 timvir-s-98rzlu timvir-s-pyat2d timvir-s-1h3vnj2 timvir-s-10r4kp7 timvir-s-b3r6kr"
                 },
                 1: {
-                  className: "timvir-s-wonfvy timvir-s-w75i6v timvir-s-1n2onr6 timvir-s-98rzlu timvir-s-pyat2d timvir-s-10r4kp7 timvir-s-b3r6kr timvir-s-1c74tu6 timvir-s-10e4vud timvir-s-a4qsjk timvir-s-1bx2yh timvir-s-1esw782 timvir-s-dftl3q timvir-s-9ncquh timvir-s-1w911z timvir-s-1nj7uno"
+                  className: "timvir-s-wonfvy timvir-s-w75i6v timvir-s-1n2onr6 timvir-s-98rzlu timvir-s-pyat2d timvir-s-10r4kp7 timvir-s-b3r6kr timvir-s-1c74tu6 timvir-s-10e4vud timvir-s-a4qsjk timvir-s-1bx2yh timvir-s-1esw782 timvir-s-dftl3q timvir-s-9emw9s timvir-s-1w911z timvir-s-1nj7uno"
                 }
               }[!!(height === undefined) << 0],
               style: {

package/blocks/Viewport/styles.css

@@ -101,7 +101,7 @@
     animation-timing-function: linear;
   }
 
-  .timvir-s-9ncquh {
+  .timvir-s-9emw9s {
     background-image: linear-gradient(to right, #fafafa 0%, #f4f4f4 25%, #fafafa 40%);
   }
 
@@ -161,8 +161,8 @@
     grid-column-gap: 8px;
   }
 
-  .timvir-s-12c0rpe {
-    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  .timvir-s-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-7tmw4v {
@@ -226,14 +226,14 @@
   }
 
   @media (width >= 72rem) {
-    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
-      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];
+    .timvir-s-5diife.timvir-s-5diife {
+      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];
     }
   }
 
   @media (width >= 48rem) {
-    .timvir-s-9q0i6z.timvir-s-9q0i6z {
-      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/WebLink/docs/index.mdx

@@ -2,7 +2,9 @@ import { WebLink } from "..";
 
 # WebLink
 
-`<WebLink>` is a link to an website, displayed as rich media (title, description, and opengraph image).
+> A link to a website displayed as rich media with title, description, and image.
+
+<WebLink url="https://tangled.sh" />
 
 ## Examples
 

package/blocks/WebLink/styles.css

@@ -119,8 +119,8 @@
     grid-auto-rows: min-content;
   }
 
-  .timvir-s-12c0rpe {
-    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  .timvir-s-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-1vbrtjm {
@@ -156,14 +156,14 @@
   }
 
   @media (width >= 72rem) {
-    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
-      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];
+    .timvir-s-5diife.timvir-s-5diife {
+      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];
     }
   }
 
   @media (width >= 48rem) {
-    .timvir-s-9q0i6z.timvir-s-9q0i6z {
-      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }