@charcoal-ui/react 3.7.0 → 3.9.0

package/src/components/Radio/__snapshots__/index.story.storyshot

@@ -1,7 +1,716 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Radio Default 1`] = `
+exports[`Storybook Tests Radio Basic 1`] = `
+.c2 {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 4px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.c2[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.c3[type='radio'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 6px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  border-radius: 999999px;
+  background-color: var(--charcoal-surface1);
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c3[type='radio']:disabled {
+  cursor: default;
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
+.c3[type='radio'][aria-disabled='false']:hover {
+  background-color: var(--charcoal-surface1-hover);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):active,
+.c3[type='radio'][aria-disabled='false']:active {
+  background-color: var(--charcoal-surface1-press);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):focus,
+.c3[type='radio'][aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c3[type='radio'][aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):focus-visible,
+.c3[type='radio'][aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
+.c3[type='radio'][aria-disabled='false'][aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true']:focus,
+.c3[type='radio'][aria-disabled='false'][aria-invalid='true']:focus {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c3[type='radio']:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--charcoal-text3);
+}
+
+.c3[type='radio']:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.c3[type='radio']:checked::after {
+  content: '';
+  display: block;
+  width: 8px;
+  height: 8px;
+  pointer-events: none;
+  background-color: var(--charcoal-text5);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover,
+.c3[type='radio']:checked[aria-disabled='false']:hover {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover::after,
+.c3[type='radio']:checked[aria-disabled='false']:hover::after {
+  background-color: var(--charcoal-text5-hover);
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active,
+.c3[type='radio']:checked[aria-disabled='false']:active {
+  background-color: var(--charcoal-brand-press);
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active::after,
+.c3[type='radio']:checked[aria-disabled='false']:active::after {
+  background-color: var(--charcoal-text5-press);
+}
+
+.c4 {
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+}
+
+.c4::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c4::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.c1 {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 8px;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 24px;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    className="c0"
+  >
+    <div
+      aria-label="label"
+      aria-orientation="vertical"
+      className="c1"
+      role="radiogroup"
+    >
+      <label
+        aria-disabled={false}
+        className="c2"
+      >
+        <input
+          aria-invalid={false}
+          checked={true}
+          className="c3"
+          disabled={false}
+          name="name"
+          onChange={[Function]}
+          type="radio"
+          value="1"
+        />
+        <div
+          className="c4"
+        >
+          Value 
+          1
+        </div>
+      </label>
+      <label
+        aria-disabled={false}
+        className="c2"
+      >
+        <input
+          aria-invalid={false}
+          checked={false}
+          className="c3"
+          disabled={false}
+          name="name"
+          onChange={[Function]}
+          type="radio"
+          value="2"
+        />
+        <div
+          className="c4"
+        >
+          Value 
+          2
+        </div>
+      </label>
+      <label
+        aria-disabled={false}
+        className="c2"
+      >
+        <input
+          aria-invalid={false}
+          checked={false}
+          className="c3"
+          disabled={false}
+          name="name"
+          onChange={[Function]}
+          type="radio"
+          value="3"
+        />
+        <div
+          className="c4"
+        >
+          Value 
+          3
+        </div>
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests Radio Disabled 1`] = `
+.c2 {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 4px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.c2[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.c3[type='radio'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 6px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  border-radius: 999999px;
+  background-color: var(--charcoal-surface1);
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c3[type='radio']:disabled {
+  cursor: default;
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
+.c3[type='radio'][aria-disabled='false']:hover {
+  background-color: var(--charcoal-surface1-hover);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):active,
+.c3[type='radio'][aria-disabled='false']:active {
+  background-color: var(--charcoal-surface1-press);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):focus,
+.c3[type='radio'][aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c3[type='radio'][aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):focus-visible,
+.c3[type='radio'][aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
+.c3[type='radio'][aria-disabled='false'][aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true']:focus,
+.c3[type='radio'][aria-disabled='false'][aria-invalid='true']:focus {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c3[type='radio']:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--charcoal-text3);
+}
+
+.c3[type='radio']:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.c3[type='radio']:checked::after {
+  content: '';
+  display: block;
+  width: 8px;
+  height: 8px;
+  pointer-events: none;
+  background-color: var(--charcoal-text5);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover,
+.c3[type='radio']:checked[aria-disabled='false']:hover {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover::after,
+.c3[type='radio']:checked[aria-disabled='false']:hover::after {
+  background-color: var(--charcoal-text5-hover);
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active,
+.c3[type='radio']:checked[aria-disabled='false']:active {
+  background-color: var(--charcoal-brand-press);
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active::after,
+.c3[type='radio']:checked[aria-disabled='false']:active::after {
+  background-color: var(--charcoal-text5-press);
+}
+
+.c4 {
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+}
+
+.c4::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c4::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.c1 {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 8px;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 24px;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    className="c0"
+  >
+    <div
+      aria-label="label"
+      aria-orientation="vertical"
+      className="c1"
+      role="radiogroup"
+    >
+      <label
+        aria-disabled={true}
+        className="c2"
+      >
+        <input
+          aria-invalid={false}
+          checked={true}
+          className="c3"
+          disabled={true}
+          name="name"
+          onChange={[Function]}
+          type="radio"
+          value="1"
+        />
+        <div
+          className="c4"
+        >
+          Value 
+          1
+        </div>
+      </label>
+      <label
+        aria-disabled={true}
+        className="c2"
+      >
+        <input
+          aria-invalid={false}
+          checked={false}
+          className="c3"
+          disabled={true}
+          name="name"
+          onChange={[Function]}
+          type="radio"
+          value="2"
+        />
+        <div
+          className="c4"
+        >
+          Value 
+          2
+        </div>
+      </label>
+      <label
+        aria-disabled={true}
+        className="c2"
+      >
+        <input
+          aria-invalid={false}
+          checked={false}
+          className="c3"
+          disabled={true}
+          name="name"
+          onChange={[Function]}
+          type="radio"
+          value="3"
+        />
+        <div
+          className="c4"
+        >
+          Value 
+          3
+        </div>
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests Radio Invalid 1`] = `
+.c2 {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 4px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.c2[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.c3[type='radio'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 6px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  border-radius: 999999px;
+  background-color: var(--charcoal-surface1);
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c3[type='radio']:disabled {
+  cursor: default;
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
+.c3[type='radio'][aria-disabled='false']:hover {
+  background-color: var(--charcoal-surface1-hover);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):active,
+.c3[type='radio'][aria-disabled='false']:active {
+  background-color: var(--charcoal-surface1-press);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):focus,
+.c3[type='radio'][aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c3[type='radio'][aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):focus-visible,
+.c3[type='radio'][aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
+.c3[type='radio'][aria-disabled='false'][aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true']:focus,
+.c3[type='radio'][aria-disabled='false'][aria-invalid='true']:focus {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c3[type='radio']:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--charcoal-text3);
+}
+
+.c3[type='radio']:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.c3[type='radio']:checked::after {
+  content: '';
+  display: block;
+  width: 8px;
+  height: 8px;
+  pointer-events: none;
+  background-color: var(--charcoal-text5);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover,
+.c3[type='radio']:checked[aria-disabled='false']:hover {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover::after,
+.c3[type='radio']:checked[aria-disabled='false']:hover::after {
+  background-color: var(--charcoal-text5-hover);
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active,
+.c3[type='radio']:checked[aria-disabled='false']:active {
+  background-color: var(--charcoal-brand-press);
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active::after,
+.c3[type='radio']:checked[aria-disabled='false']:active::after {
+  background-color: var(--charcoal-text5-press);
+}
+
+.c4 {
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+}
+
+.c4::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c4::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
 .c1 {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 8px;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 24px;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    className="c0"
+  >
+    <div
+      aria-invalid={true}
+      aria-label="label"
+      aria-orientation="vertical"
+      className="c1"
+      role="radiogroup"
+    >
+      <label
+        aria-disabled={false}
+        className="c2"
+      >
+        <input
+          aria-invalid={true}
+          checked={true}
+          className="c3"
+          disabled={false}
+          name="name"
+          onChange={[Function]}
+          type="radio"
+          value="1"
+        />
+        <div
+          className="c4"
+        >
+          Value 
+          1
+        </div>
+      </label>
+      <label
+        aria-disabled={false}
+        className="c2"
+      >
+        <input
+          aria-invalid={true}
+          checked={false}
+          className="c3"
+          disabled={false}
+          name="name"
+          onChange={[Function]}
+          type="radio"
+          value="2"
+        />
+        <div
+          className="c4"
+        >
+          Value 
+          2
+        </div>
+      </label>
+      <label
+        aria-disabled={false}
+        className="c2"
+      >
+        <input
+          aria-invalid={true}
+          checked={false}
+          className="c3"
+          disabled={false}
+          name="name"
+          onChange={[Function]}
+          type="radio"
+          value="3"
+        />
+        <div
+          className="c4"
+        >
+          Value 
+          3
+        </div>
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests Radio PartialDisabled 1`] = `
+.c2 {
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: 4px;
@@ -12,12 +721,12 @@ exports[`Storyshots Radio Default 1`] = `
   cursor: pointer;
 }
 
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
+.c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
-.c2[type='radio'] {
+.c3[type='radio'] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -34,37 +743,57 @@ exports[`Storyshots Radio Default 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
-.c2[type='radio']:not(:disabled):not([aria-disabled]):hover,
-.c2[type='radio'][aria-disabled='false']:hover {
+.c3[type='radio']:disabled {
+  cursor: default;
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
+.c3[type='radio'][aria-disabled='false']:hover {
   background-color: var(--charcoal-surface1-hover);
 }
 
-.c2[type='radio']:not(:disabled):not([aria-disabled]):active,
-.c2[type='radio'][aria-disabled='false']:active {
+.c3[type='radio']:not(:disabled):not([aria-disabled]):active,
+.c3[type='radio'][aria-disabled='false']:active {
   background-color: var(--charcoal-surface1-press);
 }
 
-.c2[type='radio']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='radio'][aria-disabled='false']:focus,
-.c2[type='radio']:not(:disabled):not([aria-disabled]):active,
-.c2[type='radio'][aria-disabled='false']:active,
-.c2[type='radio']:not(:disabled):not([aria-disabled]):focus-visible,
-.c2[type='radio'][aria-disabled='false']:focus-visible {
+.c3[type='radio']:not(:disabled):not([aria-disabled]):focus,
+.c3[type='radio'][aria-disabled='false']:focus {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c2[type='radio']:not(:checked) {
+.c3[type='radio']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c3[type='radio'][aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):focus-visible,
+.c3[type='radio'][aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
+.c3[type='radio'][aria-disabled='false'][aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true']:focus,
+.c3[type='radio'][aria-disabled='false'][aria-invalid='true']:focus {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c3[type='radio']:not(:checked) {
   border-width: 2px;
   border-style: solid;
   border-color: var(--charcoal-text3);
 }
 
-.c2[type='radio']:checked {
+.c3[type='radio']:checked {
   background-color: var(--charcoal-brand);
 }
 
-.c2[type='radio']:checked::after {
+.c3[type='radio']:checked::after {
   content: '';
   display: block;
   width: 8px;
@@ -76,34 +805,34 @@ exports[`Storyshots Radio Default 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
-.c2[type='radio']:checked:not(:disabled):not([aria-disabled]):hover,
-.c2[type='radio']:checked[aria-disabled='false']:hover {
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover,
+.c3[type='radio']:checked[aria-disabled='false']:hover {
   background-color: var(--charcoal-brand-hover);
 }
 
-.c2[type='radio']:checked:not(:disabled):not([aria-disabled]):hover::after,
-.c2[type='radio']:checked[aria-disabled='false']:hover::after {
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover::after,
+.c3[type='radio']:checked[aria-disabled='false']:hover::after {
   background-color: var(--charcoal-text5-hover);
 }
 
-.c2[type='radio']:checked:not(:disabled):not([aria-disabled]):active,
-.c2[type='radio']:checked[aria-disabled='false']:active {
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active,
+.c3[type='radio']:checked[aria-disabled='false']:active {
   background-color: var(--charcoal-brand-press);
 }
 
-.c2[type='radio']:checked:not(:disabled):not([aria-disabled]):active::after,
-.c2[type='radio']:checked[aria-disabled='false']:active::after {
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active::after,
+.c3[type='radio']:checked[aria-disabled='false']:active::after {
   background-color: var(--charcoal-text5-press);
 }
 
-.c3 {
+.c4 {
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
   color: var(--charcoal-text2);
 }
 
-.c3::before {
+.c4::before {
   display: block;
   width: 0;
   height: 0;
@@ -111,7 +840,7 @@ exports[`Storyshots Radio Default 1`] = `
   margin-top: -4px;
 }
 
-.c3::after {
+.c4::after {
   display: block;
   width: 0;
   height: 0;
@@ -119,181 +848,332 @@ exports[`Storyshots Radio Default 1`] = `
   margin-bottom: -4px;
 }
 
-.c0 {
+.c1 {
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: 8px;
 }
 
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 24px;
+}
+
 <div
   data-dark={false}
 >
   <div
-    css={
-      Array [
-        "
-      display: flex;
-      flex-direction: column;
-      gap: ",
-        [Function],
-        ";
-    ",
-      ]
-    }
+    className="c0"
   >
     <div
-      aria-invalid={false}
-      aria-label="選択肢-name1"
+      aria-label="label"
       aria-orientation="vertical"
-      className="c0"
+      className="c1"
       role="radiogroup"
     >
       <label
         aria-disabled={false}
-        className="c1"
+        className="c2"
       >
         <input
-          checked={false}
-          className="c2"
+          aria-invalid={false}
+          checked={true}
+          className="c3"
           disabled={false}
-          name="name1"
+          name="name"
           onChange={[Function]}
           type="radio"
-          value="value1"
+          value="1"
         />
         <div
-          className="c3"
+          className="c4"
         >
-          name1
-          (
-          value1
-          )を選ぶ
+          Value 
+          1
         </div>
       </label>
       <label
-        aria-disabled={false}
-        className="c1"
+        aria-disabled={true}
+        className="c2"
       >
         <input
+          aria-invalid={false}
           checked={false}
-          className="c2"
-          disabled={false}
-          name="name1"
+          className="c3"
+          disabled={true}
+          name="name"
           onChange={[Function]}
           type="radio"
-          value="value2"
+          value="2"
         />
         <div
-          className="c3"
+          className="c4"
         >
-          name1
-          (
-          value2
-          )を選ぶ
+          Value 
+          2
         </div>
       </label>
-    </div>
-    <div
-      aria-invalid={false}
-      aria-label="選択肢-name2"
-      aria-orientation="vertical"
-      className="c0"
-      role="radiogroup"
-    >
       <label
         aria-disabled={false}
-        className="c1"
+        className="c2"
       >
         <input
+          aria-invalid={false}
           checked={false}
-          className="c2"
+          className="c3"
           disabled={false}
-          name="name2"
+          name="name"
           onChange={[Function]}
           type="radio"
-          value="value1"
+          value="3"
         />
         <div
-          className="c3"
+          className="c4"
         >
-          name2
-          (
-          value1
-          )を選ぶ
+          Value 
+          3
         </div>
       </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests Radio Readonly 1`] = `
+.c2 {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 4px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.c2[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.c3[type='radio'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 6px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  border-radius: 999999px;
+  background-color: var(--charcoal-surface1);
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c3[type='radio']:disabled {
+  cursor: default;
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
+.c3[type='radio'][aria-disabled='false']:hover {
+  background-color: var(--charcoal-surface1-hover);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):active,
+.c3[type='radio'][aria-disabled='false']:active {
+  background-color: var(--charcoal-surface1-press);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):focus,
+.c3[type='radio'][aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c3[type='radio'][aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled]):focus-visible,
+.c3[type='radio'][aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
+.c3[type='radio'][aria-disabled='false'][aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true']:focus,
+.c3[type='radio'][aria-disabled='false'][aria-invalid='true']:focus {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c3[type='radio']:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--charcoal-text3);
+}
+
+.c3[type='radio']:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.c3[type='radio']:checked::after {
+  content: '';
+  display: block;
+  width: 8px;
+  height: 8px;
+  pointer-events: none;
+  background-color: var(--charcoal-text5);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover,
+.c3[type='radio']:checked[aria-disabled='false']:hover {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover::after,
+.c3[type='radio']:checked[aria-disabled='false']:hover::after {
+  background-color: var(--charcoal-text5-hover);
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active,
+.c3[type='radio']:checked[aria-disabled='false']:active {
+  background-color: var(--charcoal-brand-press);
+}
+
+.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active::after,
+.c3[type='radio']:checked[aria-disabled='false']:active::after {
+  background-color: var(--charcoal-text5-press);
+}
+
+.c4 {
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+}
+
+.c4::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c4::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.c1 {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 8px;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 24px;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    className="c0"
+  >
+    <div
+      aria-label="label"
+      aria-orientation="vertical"
+      className="c1"
+      role="radiogroup"
+    >
       <label
         aria-disabled={false}
-        className="c1"
+        className="c2"
       >
         <input
-          checked={false}
-          className="c2"
+          aria-invalid={false}
+          checked={true}
+          className="c3"
           disabled={false}
-          name="name2"
+          name="name"
           onChange={[Function]}
           type="radio"
-          value="value2"
+          value="1"
         />
         <div
-          className="c3"
+          className="c4"
         >
-          name2
-          (
-          value2
-          )を選ぶ
+          Value 
+          1
         </div>
       </label>
-    </div>
-    <div
-      aria-invalid={false}
-      aria-label="選択肢-name3"
-      aria-orientation="vertical"
-      className="c0"
-      role="radiogroup"
-    >
       <label
-        aria-disabled={false}
-        className="c1"
+        aria-disabled={true}
+        className="c2"
       >
         <input
+          aria-invalid={false}
           checked={false}
-          className="c2"
-          disabled={false}
-          name="name3"
+          className="c3"
+          disabled={true}
+          name="name"
           onChange={[Function]}
           type="radio"
-          value="value1"
+          value="2"
         />
         <div
-          className="c3"
+          className="c4"
         >
-          name3
-          (
-          value1
-          )を選ぶ
+          Value 
+          2
         </div>
       </label>
       <label
-        aria-disabled={false}
-        className="c1"
+        aria-disabled={true}
+        className="c2"
       >
         <input
+          aria-invalid={false}
           checked={false}
-          className="c2"
-          disabled={false}
-          name="name3"
+          className="c3"
+          disabled={true}
+          name="name"
           onChange={[Function]}
           type="radio"
-          value="value2"
+          value="3"
         />
         <div
-          className="c3"
+          className="c4"
         >
-          name3
-          (
-          value2
-          )を選ぶ
+          Value 
+          3
         </div>
       </label>
     </div>