@guardian/stand 0.0.22 → 0.0.24

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

@@ -0,0 +1,57 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-checkbox-input-shared-display: flex;
+	--component-checkbox-input-shared-position: relative;
+	--component-checkbox-input-shared-gap: 0.5rem;
+	--component-checkbox-input-shared-align-items: flex-start;
+	--component-checkbox-input-shared-color: #000000;
+	--component-checkbox-input-shared-cursor: pointer;
+	--component-checkbox-input-shared-indicator-display: flex;
+	--component-checkbox-input-shared-indicator-align-items: center;
+	--component-checkbox-input-shared-indicator-justify-content: center;
+	--component-checkbox-input-shared-indicator-flex-shrink: 0;
+	--component-checkbox-input-shared-indicator-border: 0.0625rem solid #545454;
+	--component-checkbox-input-shared-indicator-border-radius: 0.25rem;
+	--component-checkbox-input-shared-indicator-transition: all 200ms;
+	--component-checkbox-input-shared-indicator-svg-fill: none;
+	--component-checkbox-input-shared-indicator-check-width: 20px;
+	--component-checkbox-input-shared-indicator-check-height: 20px;
+	--component-checkbox-input-shared-indicator-indeterminate-width: 12px;
+	--component-checkbox-input-shared-indicator-indeterminate-height: 2px;
+	--component-checkbox-input-shared-indicator-selected-background-color: #005d8b;
+	--component-checkbox-input-shared-indicator-selected-border: 0.0625rem solid
+		#0072a9;
+	--component-checkbox-input-shared-indicator-selected-svg-fill: #ffffff;
+	--component-checkbox-input-shared-indicator-focus-visible-outline: 0.125rem
+		solid #0072a9;
+	--component-checkbox-input-shared-indicator-focus-visible-outline-offset: 0.125rem;
+	--component-checkbox-input-shared-indicator-error-background-color: #b42a19;
+	--component-checkbox-input-shared-indicator-error-border: 0.0625rem solid
+		#b42a19;
+	--component-checkbox-input-shared-label-align-self: center;
+	--component-checkbox-input-shared-disabled-color: #999999;
+	--component-checkbox-input-shared-disabled-cursor: not-allowed;
+	--component-checkbox-input-shared-disabled-indicator-border: 0.0625rem solid
+		#dcdcdc;
+	--component-checkbox-input-shared-disabled-indicator-selected-background-color: #dcdcdc;
+	--component-checkbox-input-sm-typography-font: normal 460 0.875rem/1.3
+		'Open Sans';
+	--component-checkbox-input-sm-typography-letter-spacing: 0;
+	--component-checkbox-input-sm-typography-font-width: 95;
+	--component-checkbox-input-sm-indicator-size: 1.25rem;
+	--component-checkbox-input-md-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-checkbox-input-md-typography-letter-spacing: 0;
+	--component-checkbox-input-md-typography-font-width: 95;
+	--component-checkbox-input-md-indicator-size: 1.5rem;
+	--component-checkbox-group-shared-display: flex;
+	--component-checkbox-group-shared-flex-direction: column;
+	--component-checkbox-group-sm-gap: 1rem;
+	--component-checkbox-group-sm-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-checkbox-group-sm-margin-bottom: 0.5rem; /** spacing between the input itself and the following element (error) 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-checkbox-group-md-gap: 1.25rem;
+	--component-checkbox-group-md-margin-top: 0.75rem; /** 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-checkbox-group-md-margin-bottom: 0.75rem; /** spacing between the input itself and the following element (error) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
+}

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

@@ -7,6 +7,7 @@
 	--component-inline-message-shared-gap: 0.25rem;
 	--component-inline-message-shared-align-items: center;
 	--component-inline-message-shared-icon-size: 1.25rem;
+	--component-inline-message-shared-icon-align-self: flex-start;
 	--component-inline-message-shared-typography-font: normal 460 0.875rem/1.3
 		'Open Sans';
 	--component-inline-message-shared-typography-letter-spacing: 0;

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/component/textArea.css

@@ -0,0 +1,30 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-text-area-shared-color: #000000;
+	--component-text-area-shared-cursor: text;
+	--component-text-area-shared-padding-top: 0.5rem;
+	--component-text-area-shared-padding-right: 0.75rem;
+	--component-text-area-shared-padding-bottom: 0.5rem;
+	--component-text-area-shared-padding-left: 0.75rem;
+	--component-text-area-shared-height: 144px;
+	--component-text-area-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-text-area-shared-border-radius: 0.25rem;
+	--component-text-area-shared-border: 0.0625rem solid #545454;
+	--component-text-area-shared-background-color: #ffffff;
+	--component-text-area-shared-placeholder-color: #545454;
+	--component-text-area-shared-disabled-background-color: #ffffff;
+	--component-text-area-shared-disabled-cursor: not-allowed;
+	--component-text-area-shared-disabled-color: #999999;
+	--component-text-area-shared-disabled-border: 0.0625rem solid #dcdcdc;
+	--component-text-area-shared-focused-outline: 0.125rem auto #0072a9;
+	--component-text-area-shared-error-border: 0.0625rem solid #b42a19;
+	--component-text-area-sm-typography-font: normal 460 0.875rem/1.3 'Open Sans';
+	--component-text-area-sm-typography-letter-spacing: 0;
+	--component-text-area-sm-typography-font-width: 95;
+	--component-text-area-md-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-text-area-md-typography-letter-spacing: 0;
+	--component-text-area-md-typography-font-width: 95;
+}

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

@@ -13,10 +13,12 @@
 	--component-text-input-shared-border-radius: 0.25rem;
 	--component-text-input-shared-border: 0.0625rem solid #545454;
 	--component-text-input-shared-background-color: #ffffff;
+	--component-text-input-shared-placeholder-color: #545454;
 	--component-text-input-shared-disabled-background-color: #ffffff;
 	--component-text-input-shared-disabled-cursor: not-allowed;
 	--component-text-input-shared-disabled-color: #999999;
 	--component-text-input-shared-disabled-border: 0.0625rem solid #dcdcdc;
+	--component-text-input-shared-focused-outline: 0.125rem auto #0072a9;
 	--component-text-input-shared-error-border: 0.0625rem solid #b42a19;
 	--component-text-input-sm-height: 2rem;
 	--component-text-input-sm-typography-font: normal 460 0.875rem/1.3 'Open Sans';

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/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/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;

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

@@ -0,0 +1,83 @@
+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"
+    }
+  }
+};
+
+export { componentRadioGroup };

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

@@ -0,0 +1,48 @@
+'use strict';
+
+const componentTextArea = {
+  shared: {
+    color: "#000000",
+    cursor: "text",
+    padding: {
+      top: "0.5rem",
+      right: "0.75rem",
+      bottom: "0.5rem",
+      left: "0.75rem"
+    },
+    height: "144px",
+    "margin-top": "0.5rem",
+    "border-radius": "0.25rem",
+    border: "0.0625rem solid #545454",
+    "background-color": "#ffffff",
+    placeholderColor: "#545454",
+    disabled: {
+      backgroundColor: "#ffffff",
+      cursor: "not-allowed",
+      color: "#999999",
+      border: "0.0625rem solid #dcdcdc"
+    },
+    focused: {
+      outline: "0.125rem auto #0072a9"
+    },
+    error: {
+      border: "0.0625rem solid #b42a19"
+    }
+  },
+  sm: {
+    typography: {
+      font: "normal 460 0.875rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  },
+  md: {
+    typography: {
+      font: "normal 460 1rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  }
+};
+
+exports.componentTextArea = componentTextArea;