readonly css

packages/bbui/src/Form/Core/Checkbox.svelte

@@ -25,16 +25,12 @@
   class:is-invalid={!!error}
   class:checked={value}
   class:is-indeterminate={indeterminate}
+  class:readonly
 >
   <input
     checked={value}
     {disabled}
     on:change={onChange}
-    on:click={e => {
-      if (readonly) {
-        e.preventDefault()
-      }
-    }}
     type="checkbox"
     class="spectrum-Checkbox-input"
     {id}
@@ -74,4 +70,7 @@
   .spectrum-Checkbox-input {
     opacity: 0;
   }
+  .readonly {
+    pointer-events: none;
+  }
 </style>

packages/bbui/src/Form/Core/CheckboxGroup.svelte

@@ -35,17 +35,13 @@
         title={getOptionLabel(option)}
         class="spectrum-Checkbox spectrum-FieldGroup-item"
         class:is-invalid={!!error}
+        class:readonly
       >
         <label
           class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item"
         >
           <input
             on:change={onChange}
-            on:click={e => {
-              if (readonly) {
-                e.preventDefault()
-              }
-            }}
             type="checkbox"
             class="spectrum-Checkbox-input"
             value={optionValue}
@@ -72,4 +68,7 @@
   .spectrum-Checkbox-input {
     opacity: 0;
   }
+  .readonly {
+    pointer-events: none;
+  }
 </style>

packages/bbui/src/Form/Core/RadioGroup.svelte

@@ -41,14 +41,10 @@
         title={getOptionTitle(option)}
         class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized"
         class:is-invalid={!!error}
+        class:readonly
       >
         <input
           on:change={onChange}
-          on:click={e => {
-            if (readonly) {
-              e.preventDefault()
-            }
-          }}
           bind:group={value}
           value={getOptionValue(option)}
           type="radio"
@@ -68,4 +64,7 @@
   .spectrum-Radio-input {
     opacity: 0;
   }
+  .readonly {
+    pointer-events: none;
+  }
 </style>

packages/client/src/components/app/forms/Field.svelte

@@ -78,6 +78,7 @@
       contenteditable={$component.editing}
       on:blur={$component.editing ? updateLabel : null}
       class:hidden={!label}
+      class:readonly
       for={fieldState?.fieldId}
       class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`}
     >
@@ -138,4 +139,7 @@
   .spectrum-FieldLabel--left {
     padding-right: var(--spectrum-global-dimension-size-200);
   }
+  .readonly {
+    pointer-events: none;
+  }
 </style>