@guardian/stand 0.0.21 → 0.0.23

package/dist/styleD/build/css/component/radioGroup.css

@@ -0,0 +1,52 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-radio-group-shared-margin-top: 0.5rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
+	--component-radio-group-shared-margin-bottom: 0.5rem; /** spacing between the input itself and the next element (error text) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
+	--component-radio-group-shared-display: flex;
+	--component-radio-group-shared-flex-direction: column;
+	--component-radio-group-shared-radio-color: #000000;
+	--component-radio-group-shared-radio-disabled-color: #999999;
+	--component-radio-group-shared-radio-display: flex;
+	--component-radio-group-shared-radio-align-items: center;
+	--component-radio-group-shared-radio-gap: 0.5rem;
+	--component-radio-group-shared-indicator-position: relative;
+	--component-radio-group-shared-indicator-after-position: absolute;
+	--component-radio-group-shared-indicator-after-border-radius: inherit;
+	--component-radio-group-shared-indicator-after-inset: 0;
+	--component-radio-group-shared-indicator-after-scale: 0;
+	--component-radio-group-shared-indicator-border-radius: 50%;
+	--component-radio-group-shared-indicator-border: 0.0625rem solid #545454;
+	--component-radio-group-shared-indicator-focused-outline: 0.125rem solid
+		#0072a9;
+	--component-radio-group-shared-indicator-focused-outline-offset: 0.125rem;
+	--component-radio-group-shared-indicator-invalid-border: 0.0625rem solid
+		#b42a19;
+	--component-radio-group-shared-indicator-invalid-after-background-color: #b42a19;
+	--component-radio-group-shared-indicator-disabled-border: 0.0625rem solid
+		#dcdcdc;
+	--component-radio-group-shared-indicator-selected-after-background-color: #005d8b;
+	--component-radio-group-shared-indicator-selected-after-scale: 0.6rem;
+	--component-radio-group-shared-indicator-selected-border: 0.125rem solid
+		#0072a9;
+	--component-radio-group-shared-indicator-selected-invalid-border: 0.125rem
+		solid #b42a19;
+	--component-radio-group-shared-indicator-selected-disabled-border: 0.125rem
+		solid #dcdcdc;
+	--component-radio-group-shared-indicator-selected-disabled-after-background-color: #dcdcdc;
+	--component-radio-group-sm-gap: 1rem;
+	--component-radio-group-sm-typography-font: normal 460 0.875rem/1.3
+		'Open Sans';
+	--component-radio-group-sm-typography-letter-spacing: 0;
+	--component-radio-group-sm-typography-font-width: 95;
+	--component-radio-group-sm-indicator-width: 1.25rem;
+	--component-radio-group-sm-indicator-height: 1.25rem;
+	--component-radio-group-md-gap: 1.25rem;
+	--component-radio-group-md-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-radio-group-md-typography-letter-spacing: 0;
+	--component-radio-group-md-typography-font-width: 95;
+	--component-radio-group-md-indicator-width: 1.5rem;
+	--component-radio-group-md-indicator-height: 1.5rem;
+}

package/dist/styleD/build/css/semantic/colors.css

@@ -11,6 +11,7 @@
 	--semantic-colors-text-error: #8c2113;
 	--semantic-colors-text-warning: #433608;
 	--semantic-colors-text-success: #326528;
+	--semantic-colors-text-success-inverse: #cde4c9;
 	--semantic-colors-text-information: #00344e;
 	--semantic-colors-text-disabled: #999999;
 	--semantic-colors-text-green: #24491d;
@@ -64,5 +65,6 @@
 	--semantic-colors-fill-information-weak: #e8f0fb;
 	--semantic-colors-fill-error-weak: #f5c6c0;
 	--semantic-colors-fill-error-strong: #b42a19;
-	--semantic-colors-fill-success-weak: #edf5ec;
+	--semantic-colors-fill-success-weak: #cde4c9;
+	--semantic-colors-fill-success-strong: #326528;
 }

package/dist/styleD/build/css/semantic/sizing.css

@@ -3,6 +3,7 @@
  */
 
 :root {
+	--semantic-sizing-height-xxxs: 1.125rem;
 	--semantic-sizing-height-xxs: 1.25rem;
 	--semantic-sizing-height-xs: 1.5rem;
 	--semantic-sizing-height-sm: 2rem;

package/dist/styleD/build/css/semantic/typography.css

@@ -61,6 +61,9 @@
 		'Open Sans';
 	--semantic-typography-heading-compact-2xl-letter-spacing: -0.03125rem;
 	--semantic-typography-heading-compact-2xl-font-width: 88;
+	--semantic-typography-body-xs-font: normal 460 0.75rem/1.3 'Open Sans';
+	--semantic-typography-body-xs-letter-spacing: 0;
+	--semantic-typography-body-xs-font-width: 95;
 	--semantic-typography-body-sm-font: normal 460 0.875rem/1.3 'Open Sans';
 	--semantic-typography-body-sm-letter-spacing: 0;
 	--semantic-typography-body-sm-font-width: 95;
@@ -73,6 +76,24 @@
 	--semantic-typography-body-xl-font: normal 460 1.25rem/1.3 'Open Sans';
 	--semantic-typography-body-xl-letter-spacing: 0;
 	--semantic-typography-body-xl-font-width: 95;
+	--semantic-typography-body-bold-xs-font: normal 700 0.75rem/1.3 'Open Sans';
+	--semantic-typography-body-bold-xs-letter-spacing: 0;
+	--semantic-typography-body-bold-xs-font-width: 95;
+	--semantic-typography-body-bold-sm-font: normal 700 0.875rem/1.3 'Open Sans';
+	--semantic-typography-body-bold-sm-letter-spacing: 0;
+	--semantic-typography-body-bold-sm-font-width: 95;
+	--semantic-typography-body-bold-md-font: normal 700 1rem/1.3 'Open Sans';
+	--semantic-typography-body-bold-md-letter-spacing: 0;
+	--semantic-typography-body-bold-md-font-width: 95;
+	--semantic-typography-body-bold-lg-font: normal 700 1.125rem/1.3 'Open Sans';
+	--semantic-typography-body-bold-lg-letter-spacing: 0;
+	--semantic-typography-body-bold-lg-font-width: 95;
+	--semantic-typography-body-bold-xl-font: normal 700 1.25rem/1.3 'Open Sans';
+	--semantic-typography-body-bold-xl-letter-spacing: 0;
+	--semantic-typography-body-bold-xl-font-width: 95;
+	--semantic-typography-body-italic-xs-font: italic 460 0.75rem/1.3 'Open Sans';
+	--semantic-typography-body-italic-xs-letter-spacing: 0;
+	--semantic-typography-body-italic-xs-font-width: 95;
 	--semantic-typography-body-italic-sm-font: italic 460 0.875rem/1.3 'Open Sans';
 	--semantic-typography-body-italic-sm-letter-spacing: 0;
 	--semantic-typography-body-italic-sm-font-width: 95;
@@ -85,6 +106,29 @@
 	--semantic-typography-body-italic-xl-font: italic 460 1.25rem/1.3 'Open Sans';
 	--semantic-typography-body-italic-xl-letter-spacing: 0;
 	--semantic-typography-body-italic-xl-font-width: 95;
+	--semantic-typography-body-italic-bold-xs-font: italic 700 0.75rem/1.3
+		'Open Sans';
+	--semantic-typography-body-italic-bold-xs-letter-spacing: 0;
+	--semantic-typography-body-italic-bold-xs-font-width: 95;
+	--semantic-typography-body-italic-bold-sm-font: italic 700 0.875rem/1.3
+		'Open Sans';
+	--semantic-typography-body-italic-bold-sm-letter-spacing: 0;
+	--semantic-typography-body-italic-bold-sm-font-width: 95;
+	--semantic-typography-body-italic-bold-md-font: italic 700 1rem/1.3
+		'Open Sans';
+	--semantic-typography-body-italic-bold-md-letter-spacing: 0;
+	--semantic-typography-body-italic-bold-md-font-width: 95;
+	--semantic-typography-body-italic-bold-lg-font: italic 700 1.125rem/1.3
+		'Open Sans';
+	--semantic-typography-body-italic-bold-lg-letter-spacing: 0;
+	--semantic-typography-body-italic-bold-lg-font-width: 95;
+	--semantic-typography-body-italic-bold-xl-font: italic 700 1.25rem/1.3
+		'Open Sans';
+	--semantic-typography-body-italic-bold-xl-letter-spacing: 0;
+	--semantic-typography-body-italic-bold-xl-font-width: 95;
+	--semantic-typography-body-compact-xs-font: normal 460 0.75rem/1.3 'Open Sans';
+	--semantic-typography-body-compact-xs-letter-spacing: 0;
+	--semantic-typography-body-compact-xs-font-width: 88;
 	--semantic-typography-body-compact-sm-font: normal 460 0.875rem/1.3
 		'Open Sans';
 	--semantic-typography-body-compact-sm-letter-spacing: 0;
@@ -99,6 +143,30 @@
 	--semantic-typography-body-compact-xl-font: normal 460 1.25rem/1.3 'Open Sans';
 	--semantic-typography-body-compact-xl-letter-spacing: 0;
 	--semantic-typography-body-compact-xl-font-width: 88;
+	--semantic-typography-body-compact-bold-xs-font: normal 700 0.75rem/1.3
+		'Open Sans';
+	--semantic-typography-body-compact-bold-xs-letter-spacing: 0;
+	--semantic-typography-body-compact-bold-xs-font-width: 88;
+	--semantic-typography-body-compact-bold-sm-font: normal 700 0.875rem/1.3
+		'Open Sans';
+	--semantic-typography-body-compact-bold-sm-letter-spacing: 0;
+	--semantic-typography-body-compact-bold-sm-font-width: 88;
+	--semantic-typography-body-compact-bold-md-font: normal 700 1rem/1.3
+		'Open Sans';
+	--semantic-typography-body-compact-bold-md-letter-spacing: 0;
+	--semantic-typography-body-compact-bold-md-font-width: 88;
+	--semantic-typography-body-compact-bold-lg-font: normal 700 1.125rem/1.3
+		'Open Sans';
+	--semantic-typography-body-compact-bold-lg-letter-spacing: 0;
+	--semantic-typography-body-compact-bold-lg-font-width: 88;
+	--semantic-typography-body-compact-bold-xl-font: normal 700 1.25rem/1.3
+		'Open Sans';
+	--semantic-typography-body-compact-bold-xl-letter-spacing: 0;
+	--semantic-typography-body-compact-bold-xl-font-width: 88;
+	--semantic-typography-body-compact-italic-xs-font: italic 460 0.75rem/1.3
+		'Open Sans';
+	--semantic-typography-body-compact-italic-xs-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-xs-font-width: 88;
 	--semantic-typography-body-compact-italic-sm-font: italic 460 0.875rem/1.3
 		'Open Sans';
 	--semantic-typography-body-compact-italic-sm-letter-spacing: 0;
@@ -115,6 +183,26 @@
 		'Open Sans';
 	--semantic-typography-body-compact-italic-xl-letter-spacing: 0;
 	--semantic-typography-body-compact-italic-xl-font-width: 88;
+	--semantic-typography-body-compact-italic-bold-xs-font: italic 700 0.75rem/1.3
+		'Open Sans';
+	--semantic-typography-body-compact-italic-bold-xs-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-bold-xs-font-width: 88;
+	--semantic-typography-body-compact-italic-bold-sm-font: italic 700
+		0.875rem/1.3 'Open Sans';
+	--semantic-typography-body-compact-italic-bold-sm-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-bold-sm-font-width: 88;
+	--semantic-typography-body-compact-italic-bold-md-font: italic 700 1rem/1.3
+		'Open Sans';
+	--semantic-typography-body-compact-italic-bold-md-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-bold-md-font-width: 88;
+	--semantic-typography-body-compact-italic-bold-lg-font: italic 700
+		1.125rem/1.3 'Open Sans';
+	--semantic-typography-body-compact-italic-bold-lg-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-bold-lg-font-width: 88;
+	--semantic-typography-body-compact-italic-bold-xl-font: italic 700 1.25rem/1.3
+		'Open Sans';
+	--semantic-typography-body-compact-italic-bold-xl-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-bold-xl-font-width: 88;
 	--semantic-typography-meta-md-font: normal 460 0.75rem/1.3 'Open Sans';
 	--semantic-typography-meta-md-letter-spacing: 0;
 	--semantic-typography-meta-md-font-width: 95;

package/dist/styleD/build/typescript/base/typography.cjs

@@ -32,11 +32,11 @@ const baseTypography = {
     "48-rem": "3rem"
   },
   weight: {
-    "Guardian Text Egyptian": {
-      normal: 400,
+    "Guardian Headline": {
       bold: 700
     },
-    "Guardian Headline": {
+    "Guardian Text Egyptian": {
+      normal: 400,
       bold: 700
     },
     "Open Sans": {

package/dist/styleD/build/typescript/base/typography.js

@@ -30,11 +30,11 @@ const baseTypography = {
     "48-rem": "3rem"
   },
   weight: {
-    "Guardian Text Egyptian": {
-      normal: 400,
+    "Guardian Headline": {
       bold: 700
     },
-    "Guardian Headline": {
+    "Guardian Text Egyptian": {
+      normal: 400,
       bold: 700
     },
     "Open Sans": {

package/dist/styleD/build/typescript/component/TopBar.cjs

@@ -115,6 +115,38 @@ const componentTopBar = {
         letterSpacing: "-0.0125rem",
         fontWidth: 88
       }
+    },
+    link: {
+      textDecoration: "none",
+      color: "unset",
+      position: "relative",
+      width: "100%",
+      height: "100%"
+    },
+    hoverLink: {
+      color: "#ffffff",
+      paddingLeft: "1.25rem",
+      paddingRight: "1.25rem",
+      backgroundColor: "#092f62",
+      opacity: "0",
+      typography: {
+        font: "normal 700 0.875rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      hover: {
+        opacity: "1"
+      },
+      pressed: {
+        backgroundColor: "#061d3c"
+      },
+      focused: {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "-0.125rem"
+      }
     }
   }
 };

package/dist/styleD/build/typescript/component/TopBar.js

@@ -113,6 +113,38 @@ const componentTopBar = {
         letterSpacing: "-0.0125rem",
         fontWidth: 88
       }
+    },
+    link: {
+      textDecoration: "none",
+      color: "unset",
+      position: "relative",
+      width: "100%",
+      height: "100%"
+    },
+    hoverLink: {
+      color: "#ffffff",
+      paddingLeft: "1.25rem",
+      paddingRight: "1.25rem",
+      backgroundColor: "#092f62",
+      opacity: "0",
+      typography: {
+        font: "normal 700 0.875rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      hover: {
+        opacity: "1"
+      },
+      pressed: {
+        backgroundColor: "#061d3c"
+      },
+      focused: {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "-0.125rem"
+      }
     }
   }
 };

package/dist/styleD/build/typescript/component/checkbox.cjs

@@ -0,0 +1,100 @@
+'use strict';
+
+const componentCheckbox = {
+  input: {
+    shared: {
+      display: "flex",
+      position: "relative",
+      gap: "0.5rem",
+      "align-items": "flex-start",
+      color: "#000000",
+      cursor: "pointer",
+      indicator: {
+        display: "flex",
+        "align-items": "center",
+        "justify-content": "center",
+        "flex-shrink": 0,
+        border: "0.0625rem solid #545454",
+        "border-radius": "0.25rem",
+        transition: "all 200ms",
+        svg: {
+          fill: "none"
+        },
+        check: {
+          width: "20px",
+          height: "20px"
+        },
+        indeterminate: {
+          width: "12px",
+          height: "2px"
+        },
+        selected: {
+          "background-color": "#005d8b",
+          border: "0.0625rem solid #0072a9",
+          svg: {
+            fill: "#ffffff"
+          }
+        },
+        ":focus-visible": {
+          outline: "0.125rem solid #0072a9",
+          "outline-offset": "0.125rem"
+        },
+        error: {
+          "background-color": "#b42a19",
+          border: "0.0625rem solid #b42a19"
+        }
+      },
+      label: {
+        "align-self": "center"
+      },
+      disabled: {
+        color: "#999999",
+        cursor: "not-allowed",
+        indicator: {
+          border: "0.0625rem solid #dcdcdc",
+          selected: {
+            "background-color": "#dcdcdc"
+          }
+        }
+      }
+    },
+    sm: {
+      typography: {
+        font: "normal 460 0.875rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      indicator: {
+        size: "1.25rem"
+      }
+    },
+    md: {
+      typography: {
+        font: "normal 460 1rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      indicator: {
+        size: "1.5rem"
+      }
+    }
+  },
+  group: {
+    shared: {
+      display: "flex",
+      "flex-direction": "column"
+    },
+    sm: {
+      gap: "1rem",
+      "margin-top": "0.5rem",
+      "margin-bottom": "0.5rem"
+    },
+    md: {
+      gap: "1.25rem",
+      "margin-top": "0.75rem",
+      "margin-bottom": "0.75rem"
+    }
+  }
+};
+
+exports.componentCheckbox = componentCheckbox;

package/dist/styleD/build/typescript/component/checkbox.js

@@ -0,0 +1,98 @@
+const componentCheckbox = {
+  input: {
+    shared: {
+      display: "flex",
+      position: "relative",
+      gap: "0.5rem",
+      "align-items": "flex-start",
+      color: "#000000",
+      cursor: "pointer",
+      indicator: {
+        display: "flex",
+        "align-items": "center",
+        "justify-content": "center",
+        "flex-shrink": 0,
+        border: "0.0625rem solid #545454",
+        "border-radius": "0.25rem",
+        transition: "all 200ms",
+        svg: {
+          fill: "none"
+        },
+        check: {
+          width: "20px",
+          height: "20px"
+        },
+        indeterminate: {
+          width: "12px",
+          height: "2px"
+        },
+        selected: {
+          "background-color": "#005d8b",
+          border: "0.0625rem solid #0072a9",
+          svg: {
+            fill: "#ffffff"
+          }
+        },
+        ":focus-visible": {
+          outline: "0.125rem solid #0072a9",
+          "outline-offset": "0.125rem"
+        },
+        error: {
+          "background-color": "#b42a19",
+          border: "0.0625rem solid #b42a19"
+        }
+      },
+      label: {
+        "align-self": "center"
+      },
+      disabled: {
+        color: "#999999",
+        cursor: "not-allowed",
+        indicator: {
+          border: "0.0625rem solid #dcdcdc",
+          selected: {
+            "background-color": "#dcdcdc"
+          }
+        }
+      }
+    },
+    sm: {
+      typography: {
+        font: "normal 460 0.875rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      indicator: {
+        size: "1.25rem"
+      }
+    },
+    md: {
+      typography: {
+        font: "normal 460 1rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      indicator: {
+        size: "1.5rem"
+      }
+    }
+  },
+  group: {
+    shared: {
+      display: "flex",
+      "flex-direction": "column"
+    },
+    sm: {
+      gap: "1rem",
+      "margin-top": "0.5rem",
+      "margin-bottom": "0.5rem"
+    },
+    md: {
+      gap: "1.25rem",
+      "margin-top": "0.75rem",
+      "margin-bottom": "0.75rem"
+    }
+  }
+};
+
+export { componentCheckbox };

package/dist/styleD/build/typescript/component/inlineMessage.cjs

@@ -6,7 +6,8 @@ const componentInlineMessage = {
     gap: "0.25rem",
     "align-items": "center",
     icon: {
-      size: "1.25rem"
+      size: "1.25rem",
+      "align-self": "flex-start"
     },
     typography: {
       font: "normal 460 0.875rem/1.3 Open Sans",

package/dist/styleD/build/typescript/component/inlineMessage.js

@@ -4,7 +4,8 @@ const componentInlineMessage = {
     gap: "0.25rem",
     "align-items": "center",
     icon: {
-      size: "1.25rem"
+      size: "1.25rem",
+      "align-self": "flex-start"
     },
     typography: {
       font: "normal 460 0.875rem/1.3 Open Sans",

package/dist/styleD/build/typescript/component/radioGroup.cjs

@@ -0,0 +1,85 @@
+'use strict';
+
+const componentRadioGroup = {
+  shared: {
+    marginTop: "0.5rem",
+    marginBottom: "0.5rem",
+    display: "flex",
+    flexDirection: "column",
+    radio: {
+      color: "#000000",
+      disabled: {
+        color: "#999999"
+      },
+      display: "flex",
+      alignItems: "center",
+      gap: "0.5rem"
+    },
+    indicator: {
+      position: "relative",
+      after: {
+        position: "absolute",
+        borderRadius: "inherit",
+        inset: "0px",
+        scale: "0"
+      },
+      borderRadius: "50%",
+      border: "0.0625rem solid #545454",
+      focused: {
+        outline: "0.125rem solid #0072a9",
+        outlineOffset: "0.125rem"
+      },
+      invalid: {
+        border: "0.0625rem solid #b42a19",
+        after: {
+          backgroundColor: "#b42a19"
+        }
+      },
+      disabled: {
+        border: "0.0625rem solid #dcdcdc"
+      },
+      selected: {
+        after: {
+          backgroundColor: "#005d8b",
+          scale: "0.6"
+        },
+        border: "0.125rem solid #0072a9",
+        invalid: {
+          border: "0.125rem solid #b42a19"
+        },
+        disabled: {
+          border: "0.125rem solid #dcdcdc",
+          after: {
+            backgroundColor: "#dcdcdc"
+          }
+        }
+      }
+    }
+  },
+  sm: {
+    gap: "1rem",
+    typography: {
+      font: "normal 460 0.875rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    },
+    indicator: {
+      width: "1.25rem",
+      height: "1.25rem"
+    }
+  },
+  md: {
+    gap: "1.25rem",
+    typography: {
+      font: "normal 460 1rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    },
+    indicator: {
+      width: "1.5rem",
+      height: "1.5rem"
+    }
+  }
+};
+
+exports.componentRadioGroup = componentRadioGroup;