@gov-design-system-ce/components 0.0.25 → 0.0.26

package/dist/collection/components/gov-form/password-power/gov-form-password-power.css

@@ -0,0 +1,265 @@
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* [Core] - Buttons
+------------------------------------------------------------------ */
+/*
+ * Gets color from theme-colors or from palette-colors
+ */
+/*
+ * Converts hex value to rgb colors value
+ */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/*
+ * Generates list of utility classes for margin, padding
+ *
+ * Make sure $list of definitions is sorted so that last item is defined last
+ * So largest views are mentioned last.
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Layout
+ */
+/**
+* Utilities - Offset
+*/
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/**
+* Generates CSS3 var with default value
+*/
+/*
+ -  Variables - General
+ */
+/*
+ -  Variables - Typography
+ */
+/*
+ -  Variables - Variants
+ */
+/*
+ -  Variables - Container
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Accordion
+ */
+/*
+ -  Variables - Attachments
+ */
+/*
+ -  Variables - Alert
+ */
+/*
+ -  Variables - Backdrop
+ */
+/*
+ -  Variables - Buttons (&& Badges)
+ */
+/*
+ -  Variables - Breadcrumbs
+ */
+/*
+ -  Variables - Classes
+ */
+/*
+ -  Variables - Colors
+ */
+/*
+ -  Variables - Cookiebar
+ */
+/*
+ -  Variables - Card
+ */
+/*
+ -  Variables - Message
+ */
+/*
+ -  Variables - Empty
+ */
+/*
+ -  Variables - Error code
+ */
+/*
+ -  Variables - Grid
+ */
+/*
+ -  Variables - Tiles
+ */
+/*
+ -  Variables - Modal & Prompt
+ */
+/**
+* Utilities - Offset
+*/
+/*
+ -  Variables - shadows
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Statsbar
+ */
+/*
+ -  Variables - Tabs
+ */
+/*
+ -  Variables - Tooltip
+ */
+/*
+ -  Variables - Loading
+ */
+/*
+ -	Variables - Forms
+ */
+/*
+ -  Variables - Form Autocomplete
+ */
+/*
+ -  Variables - Form Message
+ */
+/*
+ -	Variables - Form label
+ */
+/*
+ -	Variables - Form switch
+ */
+/*
+ -	Variables - Form select
+ */
+/*
+ -	Variables - Form input
+ */
+/*
+ -	Variables - Form multiselect
+ */
+/*
+ -	Variables - Form password power
+ */
+/*
+ -	Variables - Form checkbox & radio
+ */
+/*
+ -  Variables - Form group
+ */
+/*
+ -	Variables - Form file
+ */
+/*
+ -  Variables - Toast Message
+ */
+/*
+ -  Variables - Wizzard
+ */
+/*
+ -  Variables - Stepper
+ */
+/*
+ -  Variables - Side nav
+ */
+/*
+ -  Variables - Grid & Tile
+ */
+/*
+ -  Variables - Pagination
+ */
+/*
+ -  Variables - Nav
+ */
+/*
+ -  Variables - Layout
+ */
+.gov-spin-animation,
+.gov-pseudo-spin-animation::before {
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.gov-form-password-power {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  height: 1.5rem;
+}
+.gov-form-password-power__bar {
+  display: flex;
+  gap: 0.25rem;
+  width: 100%;
+}
+.gov-form-password-power__bar span {
+  display: inline-block;
+  width: 100%;
+  height: var(--gov-form-password-power-height, 0.25rem);
+  border-radius: var(--gov-form-password-power-radius, 0.125rem);
+  background-color: var(--gov-form-password-power-color, var(--gov-color-secondary-600));
+}
+.gov-form-password-power__text {
+  font-weight: var(--gov-text-s-font-weight);
+  font-size: var(--gov-text-s-font-size);
+  line-height: var(--gov-text-s-line-height);
+  letter-spacing: var(--gov-text-s-letter-spacing);
+  text-align: right;
+  flex-basis: 3.5rem;
+}
+.gov-form-password-power[power="1"] {
+  color: var(--gov-form-password-power-color-weak, var(--gov-color-error));
+}
+.gov-form-password-power[power="1"] .gov-form-password-power__bar span:nth-child(1) {
+  background-color: var(--gov-form-password-power-color-weak, var(--gov-color-error));
+}
+.gov-form-password-power[power="2"] {
+  color: var(--gov-form-password-power-color-medium, var(--gov-color-warning-500));
+}
+.gov-form-password-power[power="2"] .gov-form-password-power__bar span:nth-child(1),
+.gov-form-password-power[power="2"] .gov-form-password-power__bar span:nth-child(2) {
+  background-color: var(--gov-form-password-power-color-medium, var(--gov-color-warning-500));
+}
+.gov-form-password-power[power="3"] {
+  color: var(--gov-form-password-power-color-strong, var(--gov-color-success));
+}
+.gov-form-password-power[power="3"] .gov-form-password-power__bar span {
+  background-color: var(--gov-form-password-power-color-strong, var(--gov-color-success));
+}

package/dist/collection/components/gov-form/password-power/gov-form-password-power.js

@@ -0,0 +1,43 @@
+import { h, Host } from '@stencil/core';
+import { FormPasswordPowerClass } from './constants';
+export class GovFormPasswordPower {
+  constructor() {
+    this.power = undefined;
+  }
+  render() {
+    return (h(Host, { class: FormPasswordPowerClass.root }, h("span", { class: FormPasswordPowerClass.bar }, h("span", null), h("span", null), h("span", null)), h("span", { class: FormPasswordPowerClass.text }, h("slot", null))));
+  }
+  static get is() { return "gov-form-password-power"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-form-password-power.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-form-password-power.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "power": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Password power: 0 - none, 1 - weak, 2 - medium, 3 - strong"
+        },
+        "attribute": "power",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=gov-form-password-power.js.map

package/dist/collection/components/gov-form/password-power/gov-form-password-power.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-form-password-power.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/password-power/gov-form-password-power.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAMpD,MAAM,OAAO,oBAAoB;;;;EAMhC,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,sBAAsB,CAAC,IAAI;MAC3B,YAAM,KAAK,EAAE,sBAAsB,CAAC,GAAG;QACnC,eAAa;QACb,eAAa;QACb,eAAa,CACV;MACP,YAAM,KAAK,EAAE,sBAAsB,CAAC,IAAI;QACpC,eAAQ,CACL,CACb,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core'\nimport { FormPasswordPowerClass } from './constants'\n\n@Component({\n\ttag: 'gov-form-password-power',\n\tstyleUrl: 'gov-form-password-power.scss',\n})\nexport class GovFormPasswordPower {\n    /**\n\t * Password power: 0 - none, 1 - weak, 2 - medium, 3 - strong\n\t */\n\t@Prop() readonly power: number\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormPasswordPowerClass.root}>\n                <span class={FormPasswordPowerClass.bar}>\n                    <span></span>\n                    <span></span>\n                    <span></span>\n                </span>\n                <span class={FormPasswordPowerClass.text}>\n                    <slot />\n                </span>\n\t\t\t</Host>\n\t\t)\n\t}\n}"]}

package/dist/collection/components/gov-form/radio/constants.js

@@ -0,0 +1,10 @@
+import { Sizes } from '../../../core/constants/sizes';
+import { pick } from '../../../utils/utils';
+export const FormRadioSizes = pick(Sizes, ['_XS', '_S', '_M', '_L']);
+export const FormRadioClass = {
+  root: 'gov-form-radio',
+  holder: 'gov-form-radio__holder',
+  input: 'gov-form-radio__input',
+  indicator: 'gov-form-radio__indicator',
+};
+//# sourceMappingURL=constants.js.map

package/dist/collection/components/gov-form/radio/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/radio/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAG3C,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;AAGpE,MAAM,CAAC,MAAM,cAAc,GAAG;EAC7B,IAAI,EAAE,gBAAgB;EACtB,MAAM,EAAE,wBAAwB;EAChC,KAAK,EAAE,uBAAuB;EAC9B,SAAS,EAAE,2BAA2B;CACtC,CAAA","sourcesContent":["import { Sizes } from '../../../core/constants/sizes'\nimport { pick } from '../../../utils/utils'\nimport { ValueOf } from '../../../types/interfaces'\n\nexport const FormRadioSizes = pick(Sizes, ['_XS', '_S', '_M', '_L'])\nexport type FormRadioSizesType = `${ValueOf<typeof FormRadioSizes>}`\n\nexport const FormRadioClass = {\n\troot: 'gov-form-radio',\n\tholder: 'gov-form-radio__holder',\n\tinput: 'gov-form-radio__input',\n\tindicator: 'gov-form-radio__indicator',\n}\n"]}

package/dist/collection/components/gov-form/radio/gov-form-radio.css

@@ -0,0 +1,388 @@
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* [Core] - Buttons
+------------------------------------------------------------------ */
+/*
+ * Gets color from theme-colors or from palette-colors
+ */
+/*
+ * Converts hex value to rgb colors value
+ */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/*
+ * Generates list of utility classes for margin, padding
+ *
+ * Make sure $list of definitions is sorted so that last item is defined last
+ * So largest views are mentioned last.
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Layout
+ */
+/**
+* Utilities - Offset
+*/
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/**
+* Generates CSS3 var with default value
+*/
+/*
+ -  Variables - General
+ */
+/*
+ -  Variables - Typography
+ */
+/*
+ -  Variables - Variants
+ */
+/*
+ -  Variables - Container
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Accordion
+ */
+/*
+ -  Variables - Attachments
+ */
+/*
+ -  Variables - Alert
+ */
+/*
+ -  Variables - Backdrop
+ */
+/*
+ -  Variables - Buttons (&& Badges)
+ */
+/*
+ -  Variables - Breadcrumbs
+ */
+/*
+ -  Variables - Classes
+ */
+/*
+ -  Variables - Colors
+ */
+/*
+ -  Variables - Cookiebar
+ */
+/*
+ -  Variables - Card
+ */
+/*
+ -  Variables - Message
+ */
+/*
+ -  Variables - Empty
+ */
+/*
+ -  Variables - Error code
+ */
+/*
+ -  Variables - Grid
+ */
+/*
+ -  Variables - Tiles
+ */
+/*
+ -  Variables - Modal & Prompt
+ */
+/**
+* Utilities - Offset
+*/
+/*
+ -  Variables - shadows
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Statsbar
+ */
+/*
+ -  Variables - Tabs
+ */
+/*
+ -  Variables - Tooltip
+ */
+/*
+ -  Variables - Loading
+ */
+/*
+ -	Variables - Forms
+ */
+/*
+ -  Variables - Form Autocomplete
+ */
+/*
+ -  Variables - Form Message
+ */
+/*
+ -	Variables - Form label
+ */
+/*
+ -	Variables - Form switch
+ */
+/*
+ -	Variables - Form select
+ */
+/*
+ -	Variables - Form input
+ */
+/*
+ -	Variables - Form multiselect
+ */
+/*
+ -	Variables - Form password power
+ */
+/*
+ -	Variables - Form checkbox & radio
+ */
+/*
+ -  Variables - Form group
+ */
+/*
+ -	Variables - Form file
+ */
+/*
+ -  Variables - Toast Message
+ */
+/*
+ -  Variables - Wizzard
+ */
+/*
+ -  Variables - Stepper
+ */
+/*
+ -  Variables - Side nav
+ */
+/*
+ -  Variables - Grid & Tile
+ */
+/*
+ -  Variables - Pagination
+ */
+/*
+ -  Variables - Nav
+ */
+/*
+ -  Variables - Layout
+ */
+.gov-spin-animation,
+.gov-pseudo-spin-animation::before {
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/*
+*   Radio
+*/
+/*
+ *   Checkbox & Radio Shared Definitions
+ */
+.gov-form-radio {
+  cursor: pointer;
+}
+.gov-form-radio input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.gov-form-radio input + span {
+  position: relative;
+  display: block;
+}
+.gov-form-radio input + span::before {
+  content: "";
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  border: var(--gov-form-checkbox-border-size, 0.125rem solid var(--gov-color-primary));
+  background-color: var(--gov-form-checkbox-background-color, var(--gov-color-neutral-white));
+  transition: 150ms linear border-color, 150ms linear background-color, 150ms linear outline-color;
+}
+.gov-form-radio .gov-form-label__label {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+}
+.gov-form-radio input:focus-visible + span::before {
+  outline: var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);
+}
+[invalid=""].gov-form-radio .gov-form-label__label, [invalid=true i].gov-form-radio .gov-form-label__label, [invalid="1"].gov-form-radio .gov-form-label__label {
+  color: var(--gov-form-state-color-error, var(--gov-color-error));
+}
+[invalid=""].gov-form-radio input + span::before, [invalid=true i].gov-form-radio input + span::before, [invalid="1"].gov-form-radio input + span::before {
+  border-color: var(--gov-form-state-color-error, var(--gov-color-error));
+}
+[disabled=""].gov-form-radio, [disabled=true i].gov-form-radio, [disabled="1"].gov-form-radio {
+  pointer-events: none;
+}
+[disabled=""].gov-form-radio .gov-form-label__label, [disabled=true i].gov-form-radio .gov-form-label__label, [disabled="1"].gov-form-radio .gov-form-label__label {
+  color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
+}
+[disabled=""].gov-form-radio input + span::before, [disabled=true i].gov-form-radio input + span::before, [disabled="1"].gov-form-radio input + span::before {
+  border-color: var(--gov-form-input-disabled-bg, var(--gov-color-primary-400));
+}
+[size=xs].gov-form-radio {
+  font-weight: var(--gov-text-xs-font-weight);
+  font-size: var(--gov-text-xs-font-size);
+  line-height: var(--gov-text-xs-line-height);
+  letter-spacing: var(--gov-text-xs-letter-spacing);
+  display: block;
+  min-width: var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);
+  min-height: var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);
+}
+[size=xs].gov-form-radio .gov-form-label__label {
+  padding-top: calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-text-xs-font-size) * 1.5) / 2);
+  padding-left: calc(var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) + var(--gov-form-checkbox-core-xs-gap, 0.75rem));
+}
+[size=xs].gov-form-radio input + span::before {
+  width: var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);
+  height: var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);
+}
+[size=s].gov-form-radio {
+  font-weight: var(--gov-text-s-font-weight);
+  font-size: var(--gov-text-s-font-size);
+  line-height: var(--gov-text-s-line-height);
+  letter-spacing: var(--gov-text-s-letter-spacing);
+  display: block;
+  min-width: var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);
+  min-height: var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);
+}
+[size=s].gov-form-radio .gov-form-label__label {
+  padding-top: calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-text-s-font-size) * 1.5) / 2);
+  padding-left: calc(var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) + var(--gov-form-checkbox-core-s-gap, 0.75rem));
+}
+[size=s].gov-form-radio input + span::before {
+  width: var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);
+  height: var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);
+}
+[size=m].gov-form-radio {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+  display: block;
+  min-width: var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);
+  min-height: var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);
+}
+[size=m].gov-form-radio .gov-form-label__label {
+  padding-top: calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-text-m-font-size) * 1.5) / 2);
+  padding-left: calc(var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) + var(--gov-form-checkbox-core-m-gap, 1rem));
+}
+[size=m].gov-form-radio input + span::before {
+  width: var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);
+  height: var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);
+}
+[size=l].gov-form-radio {
+  font-weight: var(--gov-text-l-font-weight);
+  font-size: var(--gov-text-l-font-size);
+  line-height: var(--gov-text-l-line-height);
+  letter-spacing: var(--gov-text-l-letter-spacing);
+  display: block;
+  min-width: var(--gov-form-checkbox-core-l-indicator-size, 2rem);
+  min-height: var(--gov-form-checkbox-core-l-indicator-size, 2rem);
+}
+[size=l].gov-form-radio .gov-form-label__label {
+  padding-top: calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-text-l-font-size) * 1.5) / 2);
+  padding-left: calc(var(--gov-form-checkbox-core-l-indicator-size, 2rem) + var(--gov-form-checkbox-core-l-gap, 1rem));
+}
+[size=l].gov-form-radio input + span::before {
+  width: var(--gov-form-checkbox-core-l-indicator-size, 2rem);
+  height: var(--gov-form-checkbox-core-l-indicator-size, 2rem);
+}
+
+.gov-form-radio input + span::before {
+  border-radius: 50%;
+}
+.gov-form-radio input + span::after {
+  content: "";
+  position: absolute;
+  display: block;
+  border-radius: 50%;
+  background: var(--gov-form-radio-indicator-bg, var(--gov-color-primary));
+  opacity: 0;
+  transition: 150ms linear opacity;
+}
+.gov-form-radio input:checked + span::after {
+  opacity: 1;
+}
+.gov-form-radio[invalid=""] input + span::after, .gov-form-radio[invalid=true i] input + span::after, .gov-form-radio[invalid="1"] input + span::after {
+  background: var(--gov-form-state-color-error, var(--gov-color-error));
+}
+.gov-form-radio[disabled=""] input:checked + span::after, .gov-form-radio[disabled=true i] input:checked + span::after, .gov-form-radio[disabled="1"] input:checked + span::after {
+  background-color: var(--gov-form-input-disabled-bg, var(--gov-color-primary-400));
+}
+.gov-form-radio[size=xs] input + span::after {
+  top: calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-form-checkbox-core-xs-dot-size, 0.625rem)) / 2);
+  left: calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-form-checkbox-core-xs-dot-size, 0.625rem)) / 2);
+  width: var(--gov-form-checkbox-core-xs-dot-size, 0.625rem);
+  height: var(--gov-form-checkbox-core-xs-dot-size, 0.625rem);
+}
+.gov-form-radio[size=s] input + span::after {
+  top: calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-form-checkbox-core-s-dot-size, 0.6875rem)) / 2);
+  left: calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-form-checkbox-core-s-dot-size, 0.6875rem)) / 2);
+  width: var(--gov-form-checkbox-core-s-dot-size, 0.6875rem);
+  height: var(--gov-form-checkbox-core-s-dot-size, 0.6875rem);
+}
+.gov-form-radio[size=m] input + span::after {
+  top: calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-form-checkbox-core-m-dot-size, 0.75rem)) / 2);
+  left: calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-form-checkbox-core-m-dot-size, 0.75rem)) / 2);
+  width: var(--gov-form-checkbox-core-m-dot-size, 0.75rem);
+  height: var(--gov-form-checkbox-core-m-dot-size, 0.75rem);
+}
+.gov-form-radio[size=l] input + span::after {
+  top: calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-form-checkbox-core-l-dot-size, 1rem)) / 2);
+  left: calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-form-checkbox-core-l-dot-size, 1rem)) / 2);
+  width: var(--gov-form-checkbox-core-l-dot-size, 1rem);
+  height: var(--gov-form-checkbox-core-l-dot-size, 1rem);
+}