@czi-sds/mcp 0.5.2 → 0.5.3

package/data/zeroheight-exports/Notification.md

@@ -26,10 +26,26 @@ Relevant components such as Tables (documentation coming soon) or Charts (docume
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
+**Default**
+
+---
+
+---
+
+**Default + Child Node (content module)**
+
+---
+
+---
+
+**Default + Button**
+
 ---
 
 ---
 
+**Default + Child Node (content module) + Button**
+
 ---
 
 ### Dismissible Notification
@@ -42,10 +58,26 @@ Click on each state below to enter inspect view and get details on its code attr
 
 
 
+**Notification/Notification**
+
 ---
 
 ---
 
+**Notification**
+
+---
+
+---
+
+**Notification**
+
+---
+
+---
+
+**Notification**
+
 ---
 
 ---
@@ -54,6 +86,10 @@ Click on each state below to enter inspect view and get details on its code attr
 
 These rules establish how much margin should exist between and around elements. Because Notifications are positioned in the top-right corner of the UI on top of other elements, the top and right spacing rules below indicate the distance between the component and the edges of the browser window.
 
+**Notification spacing**
+
+---
+
 ---
 
 ### Intent Variations
@@ -65,9 +101,25 @@ Each intent is demonstrated below using the Persistent Notification for referenc
 | **Error** | **Info** |
 | --------- | -------- |
 
+**Notification**
+
+---
+
+**Notification**
+
+---
+
 | **Success** | **Warning** |
 | ----------- | ----------- |
 
+**Notification**
+
+---
+
+**Notification**
+
+---
+
 ## Code
 
 ## Notification Component
@@ -111,10 +163,26 @@ A Minimal Button can be added to the Notification if additional action from the
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
+**Default**
+
+---
+
+---
+
+**Default + Child Node (content module)**
+
 ---
 
 ---
 
+**Default + Button**
+
+---
+
+---
+
+**Default + Child Node (content module) + Button**
+
 ---
 
 
@@ -129,10 +197,26 @@ Click on each state below to enter inspect view and get details on its code attr
 
 
 
+**Default**
+
 ---
 
 ---
 
+**Default + Child Node (content module)**
+
+---
+
+---
+
+**Default + Button**
+
+---
+
+---
+
+**Default + Child Node (content module) + Button**
+
 ---
 
 ---
@@ -141,6 +225,10 @@ Click on each state below to enter inspect view and get details on its code attr
 
 These rules establish how much margin should exist between and around elements. Because Notifications are positioned in the top-right corner of the UI on top of other elements, the top and right spacing rules below indicate the distance between the component and the edges of the browser window.
 
+**Notification spacing**
+
+---
+
 ---
 
 ### Intent Variations
@@ -152,9 +240,25 @@ Each intent is demonstrated below using the Persistent Notification for referenc
 | **Error** | **Info** |
 | --------- | -------- |
 
+**Notification**
+
+---
+
+**Notification**
+
+---
+
 | **Success** | **Warning** |
 | ----------- | ----------- |
 
+**Notification**
+
+---
+
+**Notification**
+
+---
+
 ## Code
 
 ## Notification Component
@@ -187,6 +291,14 @@ Notifications come in two different variants distinguished by whether users to h
 
 Notifications appear outside of the flow of the page on top of other elements as opposed to Callouts which appear within the page's flow.
 
+**Preview_Guidelines_Notification_persistent**
+
+---
+
+**Preview_Guidelines_Notification_dismissible**
+
+---
+
 ---
 
 ### Live Instance
@@ -206,6 +318,22 @@ A Minimal Button can be added to the Notification if additional action from the
 | Default | Default + Button | Default + Content Module | Default + Content Module + Button |
 | ------- | ---------------- | ------------------------ | --------------------------------- |
 
+**Notification_persistent_default**
+
+---
+
+**Notification_persistent_button**
+
+---
+
+**Notification_persistent_content slot**
+
+---
+
+**Notification_persistent_button + content slot**
+
+---
+
 ---
 
 ### Notification – Dismissible
@@ -217,12 +345,32 @@ A Minimal Button can be added to the Notification if additional action from the
 | Default | Default + Button | Default + Content Module | Default + Content Module + Button |
 | ------- | ---------------- | ------------------------ | --------------------------------- |
 
+**Notification_dismissible_default**
+
+---
+
+**Notification_dismissible_button**
+
+---
+
+**Notification_dismissible_content slot**
+
+---
+
+**Notification_dismissible_button + content slot**
+
+---
+
 ---
 
 ### Notification Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Notification spacing**
+
+---
+
 ---
 
 ### Intent Variations
@@ -234,6 +382,22 @@ Each intent is demonstrated below using the Persistent variant for reference. Re
 | Info | Negative | Notice | Positive |
 | ---- | -------- | ------ | -------- |
 
+**Notification_intent_info**
+
+---
+
+**Notification_intent_error**
+
+---
+
+**Notification_intent_warning**
+
+---
+
+**Notification_intent_success**
+
+---
+
 ## Code
 
 > **Note:** The code examples below must install dependencies before displaying and may take extra time to load
@@ -388,15 +552,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Notification</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -535,15 +698,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Notification</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -686,15 +848,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Notification</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -849,15 +1010,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Notification</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>

package/data/zeroheight-exports/Panel.md

@@ -11,12 +11,20 @@ Panels are elements that contain supplementary information or actions for the pa
 
 Panels are comprised of containers within which other elements are placed. Use the Basic Panel when the elements contained within it are able to functionally adjust the content on the page next to it. In CZ GEN EPI's case, the Basic Panel is positioned on the left-hand side of the screen and contains Filters.
 
+**Basic Panel anatomy**
+
+---
+
 ### Basic Panel Example
 
 The example below shows where in CZ GEN EPI the Basic Panel is used.
 
 
 
+**Basic Panel_left**
+
+---
+
 ## Code
 
 ## Panel Components
@@ -56,10 +64,22 @@ Basic Panels can be positioned on the left or right side of the screen using the
 
 Although Basic Panels can be designed to contain a wide range of elements, there are a few common configurations used within the products today that have been turned into templates: Filter Panel, Info Panel, and Info Panel with Accordions (templates coming soon).
 
+**Basic Panel anatomy**
+
+---
+
 ### Basic Panel Examples
 
 The examples below show where in CZ ID the Basic Panel is currently being used.
 
+**Basic Panel_left**
+
+---
+
+---
+
+**Basic Panel_right**
+
 ---
 
 ---
@@ -77,12 +97,24 @@ Overlay Panels can be positioned on the bottom or right side of the screen using
 
 Although Overlay Panels can be designed to contain a wide range of elements, there are a few common configurations used within the products today that have been turned into templates: Sample Details, Taxon Details, Genes Details, and Pipeline Information (templates coming soon).
 
+**Overlay Panel anatomy**
+
+---
+
 
 
 ### Overlay Panel Examples
 
 The examples below show where in CZ ID the Overlay Panel is currently being used.
 
+**Overlay Panel_bottom**
+
+---
+
+---
+
+**Overlay Panel_right**
+
 ---
 
 ## Code
@@ -124,6 +156,10 @@ Panels are elements that contain supplementary information or actions for the pa
 
 ### Panel – Basic Anatomy
 
+**Basic Panel anatomy**
+
+---
+
 ---
 
 ### Overview
@@ -135,12 +171,24 @@ Panel – Basic can be positioned on the left or right side of the screen. Both
 | Left | Right |
 | :--: | :---: |
 
+**PanelBasic_Left**
+
+---
+
+**PanelBasic_Right**
+
+---
+
 ---
 
 ### Panel – Basic Spacing
 
 These rules establish how much margin should exist to the left or right of an opened Panel – Basic.
 
+**Basic Panel spacing**
+
+---
+
 ---
 
 ## Panel – Overlay
@@ -150,6 +198,10 @@ These rules establish how much margin should exist to the left or right of an op
 
 ### Panel – Overlay Anatomy
 
+**Overlay Panel anatomy**
+
+---
+
 ---
 
 ### Overview
@@ -161,6 +213,18 @@ Panel – Overlay can be positioned on the bottom, left, or right side of the sc
 | Bottom | Left | Right |
 | :----: | :--: | :---: |
 
+**PanelOverlay_Bottom**
+
+---
+
+**PanelOverlay_Left**
+
+---
+
+**PanelOverlay_Right**
+
+---
+
 ## Code
 
 > **Note:** The code examples below must install dependencies before displaying and may take extra time to load
@@ -365,15 +429,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Panel</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -550,15 +613,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Panel</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -739,15 +801,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Panel</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -939,15 +1000,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Panel</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>

package/data/zeroheight-exports/README.md

@@ -1,25 +1,25 @@
 # Exported Zeroheight Pages
 
-Generated on: 2025-08-27T17:38:30.576Z
+Generated on: 2025-10-01T19:40:49.193Z
 Styleguide ID: 66099
-Total files exported: 56
-Total pages combined: 164
+Total files exported: 55
+Total pages combined: 159
 
 ## Files
 
+- [Typography.md](./Typography.md)
+- [Corners.md](./Corners.md)
+- [Colors.md](./Colors.md)
 - [Icons.md](./Icons.md)
 - [Introduction-to-Bases.md](./Introduction-to-Bases.md)
-- [Colors.md](./Colors.md)
 - [Theming.md](./Theming.md)
-- [Corners.md](./Corners.md)
 - [Responsive-Design.md](./Responsive-Design.md)
-- [Typography.md](./Typography.md)
 - [Borders.md](./Borders.md)
 - [Drop-Shadows.md](./Drop-Shadows.md)
 - [Spacing.md](./Spacing.md)
 - [Introduction-to-Cells.md](./Introduction-to-Cells.md)
 - [Search.md](./Search.md)
-- [Dropdown-Menu.md](./Dropdown-Menu.md)
+- [Dropdown-Menus.md](./Dropdown-Menus.md)
 - [Introduction-to-DNA.md](./Introduction-to-DNA.md)
 - [Accordion.md](./Accordion.md)
 - [Table.md](./Table.md)
@@ -49,14 +49,13 @@ Total pages combined: 164
 - [Loading-Indicator.md](./Loading-Indicator.md)
 - [Segmented-Control.md](./Segmented-Control.md)
 - [Banner.md](./Banner.md)
+- [Table.md](./Table.md)
+- [Callout.md](./Callout.md)
+- [Accordion.md](./Accordion.md)
 - [Hero.md](./Hero.md)
 - [Content-Card.md](./Content-Card.md)
 - [Notification.md](./Notification.md)
-- [Table.md](./Table.md)
 - [Dialog.md](./Dialog.md)
-- [Callout.md](./Callout.md)
-- [Dropdown-Menu.md](./Dropdown-Menu.md)
-- [Accordion.md](./Accordion.md)
 - [Panel.md](./Panel.md)
 - [Contributing-to-SDS.md](./Contributing-to-SDS.md)
 - [Link.md](./Link.md)
@@ -66,13 +65,13 @@ Total pages combined: 164
 
 ## Combination Summary
 
+- **Typography.md**: 4 pages combined
+- **Corners.md**: 4 pages combined
+- **Colors.md**: 4 pages combined
 - **Icons.md**: 4 pages combined
 - **Introduction-to-Bases.md**: 4 pages combined
-- **Colors.md**: 4 pages combined
 - **Theming.md**: 1 page combined
-- **Corners.md**: 4 pages combined
 - **Responsive-Design.md**: 1 page combined
-- **Typography.md**: 4 pages combined
 - **Borders.md**: 3 pages combined
 - **Drop-Shadows.md**: 4 pages combined
 - **Spacing.md**: 4 pages combined
@@ -86,7 +85,7 @@ Total pages combined: 164
 - **Dialogs.md**: 3 pages combined
 - **Tags.md**: 4 pages combined
 - **Tooltips.md**: 4 pages combined
-- **Buttons.md**: 4 pages combined
+- **Buttons.md**: 3 pages combined
 - **Control-Inputs.md**: 4 pages combined
 - **Text-Link.md**: 3 pages combined
 - **Navigation.md**: 3 pages combined
@@ -108,14 +107,13 @@ Total pages combined: 164
 - **Loading-Indicators.md**: 3 pages combined
 - **Segmented-Control.md**: 2 pages combined
 - **Banners.md**: 1 page combined
+- **Table.md**: 3 pages combined
+- **Callout.md**: 3 pages combined
+- **Accordion.md**: 3 pages combined
 - **Hero.md**: 1 page combined
 - **Content-Card.md**: 1 page combined
 - **Notification.md**: 3 pages combined
-- **Table.md**: 3 pages combined
 - **Dialog.md**: 4 pages combined
-- **Callout.md**: 3 pages combined
-- **Dropdown-Menu.md**: 4 pages combined
-- **Accordion.md**: 3 pages combined
 - **Panel.md**: 3 pages combined
 - **Contributing-to-SDS.md**: 1 page combined
 - **Link.md**: 1 page combined